/* ═══════════════════════════════════════════════════════════
   FONTS — self-hosted (offline-ready)
   Menggantikan Google Fonts CDN link di index.html
   ═══════════════════════════════════════════════════════════ */

/* ── CINZEL ── */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cinzel-latin-400-normal.woff2') format('woff2'),
       url('fonts/cinzel-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cinzel-latin-600-normal.woff2') format('woff2'),
       url('fonts/cinzel-latin-600-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cinzel-latin-700-normal.woff2') format('woff2'),
       url('fonts/cinzel-latin-700-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/cinzel-latin-900-normal.woff2') format('woff2'),
       url('fonts/cinzel-latin-900-normal.woff') format('woff');
}

/* ── CORMORANT GARAMOND ── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'),
       url('fonts/cormorant-garamond-latin-300-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2'),
       url('fonts/cormorant-garamond-latin-300-italic.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'),
       url('fonts/cormorant-garamond-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'),
       url('fonts/cormorant-garamond-latin-600-normal.woff') format('woff');
}

/* ── RALEWAY ── */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/raleway-latin-300-normal.woff2') format('woff2'),
       url('fonts/raleway-latin-300-normal.woff') format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/raleway-latin-400-normal.woff2') format('woff2'),
       url('fonts/raleway-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/raleway-latin-500-normal.woff2') format('woff2'),
       url('fonts/raleway-latin-500-normal.woff') format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/raleway-latin-600-normal.woff2') format('woff2'),
       url('fonts/raleway-latin-600-normal.woff') format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/raleway-latin-700-normal.woff2') format('woff2'),
       url('fonts/raleway-latin-700-normal.woff') format('woff');
}

:root{
  --bg:#080808;--bg2:#0e0e0e;--bg3:#161616;--bg4:#1e1e1e;
  --gold:#c9a84c;--gold2:#f0d080;--gold3:#8b6914;--gold4:#6b4f0e;
  --gold-glow:rgba(201,168,76,0.2);--gold-glow2:rgba(201,168,76,0.08);
  --text:#e8dcc8;--text2:#c8bca8;--muted:#666;--muted2:#444;
  --red:#c0392b;--red2:#e74c3c;--red-bg:rgba(192,57,43,0.18);
  --blue:#1565c0;--green:#2e7d32;
  --border:1px solid rgba(201,168,76,0.18);--hdr:62px;--r:8px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:'Outfit','Raleway',sans-serif;font-size:17px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--gold4);border-radius:3px}
a{color:inherit;text-decoration:none}

/* ===== UTILITIES ===== */
.hidden{display:none!important}
.flex{display:flex}
.center{justify-content:center;align-items:center}
.ml-auto{margin-left:auto}
input[type="date"]{position:relative;cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;cursor:pointer;opacity:0;
  filter:invert(0.7) sepia(1) saturate(2) hue-rotate(10deg);
}

/* ===== LOGIN PAGE — split: gerhana emas (kiri) + form (kanan); mobile: form di bawah ===== */
#loginPage{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;padding:0;overflow-y:auto;position:relative;background:#080806;
}
.lcard{position:relative;width:100%;height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;overflow:hidden;background:#080806}

/* — latar: gerhana emas — */
.lart{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(ellipse at 20% 30%,#2a1d06 0%,#120d03 48%,#080806 100%)}
.lstars{position:absolute;inset:0}
.lstars.s1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='86' cy='246' r='0.59' fill='%23f0d080' opacity='0.74'/%3E%3Ccircle cx='22' cy='214' r='0.82' fill='%23f0d080' opacity='0.57'/%3E%3Ccircle cx='18' cy='236' r='0.8' fill='%23f0d080' opacity='0.37'/%3E%3Ccircle cx='115' cy='111' r='0.54' fill='%23f0d080' opacity='0.4'/%3E%3Ccircle cx='112' cy='19' r='1.0' fill='%23f0d080' opacity='0.42'/%3E%3Ccircle cx='61' cy='165' r='0.88' fill='%23f0d080' opacity='0.92'/%3E%3Ccircle cx='151' cy='153' r='0.74' fill='%23f0d080' opacity='0.94'/%3E%3Ccircle cx='15' cy='146' r='1.02' fill='%23f0d080' opacity='0.52'/%3E%3Ccircle cx='40' cy='142' r='0.57' fill='%23f0d080' opacity='0.54'/%3E%3Ccircle cx='212' cy='178' r='0.61' fill='%23f0d080' opacity='0.7'/%3E%3Ccircle cx='167' cy='52' r='0.72' fill='%23f0d080' opacity='0.68'/%3E%3Ccircle cx='20' cy='148' r='0.54' fill='%23f0d080' opacity='0.47'/%3E%3Ccircle cx='178' cy='140' r='0.76' fill='%23f0d080' opacity='0.54'/%3E%3Ccircle cx='153' cy='240' r='0.77' fill='%23f0d080' opacity='0.53'/%3E%3C/svg%3E");background-size:260px 260px}
.lstars.s2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Ccircle cx='410' cy='96' r='1.34' fill='%23f0d080' opacity='0.5'/%3E%3Ccircle cx='298' cy='157' r='1.13' fill='%23f0d080' opacity='0.88'/%3E%3Ccircle cx='377' cy='233' r='0.85' fill='%23f0d080' opacity='0.94'/%3E%3Ccircle cx='64' cy='266' r='1.0' fill='%23f0d080' opacity='0.8'/%3E%3Ccircle cx='81' cy='254' r='1.01' fill='%23f0d080' opacity='0.93'/%3E%3Ccircle cx='43' cy='395' r='1.17' fill='%23f0d080' opacity='0.82'/%3E%3Ccircle cx='164' cy='178' r='1.33' fill='%23f0d080' opacity='0.71'/%3E%3C/svg%3E");background-size:420px 420px;background-position:90px 140px}
.lrings{position:absolute;width:60vw;left:-4vw;top:-8vw;height:auto;pointer-events:none}
.lorb{position:absolute;width:46vw;aspect-ratio:1;left:-9vw;top:-14vw;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 68% 64%,#f7e0a0 0%,#d8b45a 26%,#a67e25 52%,#5c4210 78%,#271b07 100%);
  box-shadow:0 0 110px 14px rgba(201,168,76,.2),inset -3vw -3vw 8vw rgba(0,0,0,.5)}
.lorb svg{width:100%;height:100%;display:block}
.lmoon{position:absolute;width:7.4vw;aspect-ratio:1;left:36vw;top:38vh;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6dc 0%,#e6cd8e 38%,#a98a42 72%,#5a4519 100%);
  box-shadow:0 0 40px 6px rgba(240,208,128,.28)}
.lstreak{position:absolute;height:1.5px;width:150px;transform:rotate(38deg);transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,rgba(240,208,128,.85));border-radius:2px}
.lstreak.a{left:41vw;top:20vh}.lstreak.b{left:28vw;top:72vh;width:110px;opacity:.7}
.lspark{position:absolute;opacity:.9;animation:lTwinkle 5s ease-in-out infinite}
.lspark.p1{width:22px;left:33vw;top:15vh}
.lspark.p2{width:14px;left:30vw;top:66vh;animation-delay:1.6s}
.lspark.p3{width:16px;left:12vw;top:88vh;animation-delay:3s}
@keyframes lTwinkle{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

/* — video latar (opsional, dari Pengaturan) — */
.lmedia{position:absolute;inset:0;container-type:size;background:transparent}
.lmedia::after{content:'';position:absolute;inset:0;pointer-events:none;background:transparent}
.lmedia video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .9s ease}
.lmedia video.on{opacity:1}
.lmedia video::-webkit-media-controls,.lmedia video::-webkit-media-controls-panel,
.lmedia video::-webkit-media-controls-start-playback-button,.lmedia video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.lmedia video{pointer-events:none}
.lmedia iframe{
  position:absolute;top:50%;left:50%;border:0;pointer-events:none;
  width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%) scale(1.18);
}
.lscrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(8,8,6,.78) 0%,rgba(8,8,6,0) 34%),
    linear-gradient(90deg,rgba(8,8,6,.1) 0%,rgba(8,8,6,.12) 42%,rgba(8,8,6,.86) 66%,#080806 100%)}

/* — merek & tagline — */
.lbrandSide{position:absolute;left:clamp(28px,4vw,60px);top:clamp(22px,3.6vw,48px);z-index:2}
.lbrandSide img{max-height:130px;width:auto;display:block;filter:drop-shadow(0 2px 14px rgba(0,0,0,.6))}
.ltag{position:absolute;z-index:2;left:clamp(28px,4vw,60px);bottom:clamp(40px,8vh,84px);
  font-family:'Outfit','Raleway',sans-serif;font-weight:800;font-size:clamp(26px,2.9vw,44px);line-height:1.08;
  letter-spacing:.01em;color:#fbf3e0;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.ltag span{color:var(--gold2)}

/* — panel form — */
.lpanel{
  position:absolute;top:0;right:0;bottom:0;z-index:3;width:min(560px,44%);
  padding:40px clamp(36px,5vw,72px) 64px;display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;
}
.lpanel>*{flex-shrink:0}
.lhead{margin-bottom:26px}
.lhead h2{font-family:'Outfit','Raleway',sans-serif;font-size:clamp(40px,4.2vw,62px);font-weight:800;line-height:1;
  letter-spacing:.005em;color:#fbf3e0}
.llabel{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px}
.lfield{position:relative;margin-bottom:12px}
.lfield svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.lfield input{
  width:100%;height:54px;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.22);border-radius:10px;
  padding:0 16px 0 48px;color:var(--text);font-size:16px;font-family:'Outfit','Raleway',sans-serif;
  outline:none;transition:border-color .15s,background .15s;
}
.lfield input::placeholder{color:rgba(232,220,200,.45)}
.lfield input:focus{border-color:var(--gold2);background:rgba(201,168,76,.11)}
.lfield input:-webkit-autofill{-webkit-text-fill-color:var(--text);transition:background-color 99999s}
#loginPage .btnPrimary{
  width:100%;height:54px;margin-top:8px;padding:0 22px;border:0;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(100deg,#8b6914 0%,var(--gold) 50%,var(--gold2) 100%);color:#1a1204;
  font-family:'Outfit','Raleway',sans-serif;font-size:17px;font-weight:700;letter-spacing:.3px;
  transition:box-shadow .15s,transform .15s,opacity .15s;
}
#loginPage .btnPrimary:hover{box-shadow:0 6px 26px var(--gold-glow);transform:translateY(-1px)}
#loginPage .btnPrimary:active{transform:none;box-shadow:none}
#loginPage .btnPrimary:disabled{opacity:.7;cursor:wait;transform:none}
.lsep{height:1px;background:rgba(201,168,76,.22);margin:26px 0 16px}
.lalt{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:12px}
.lrow{display:grid;grid-template-columns:1fr 54px 54px 54px;gap:10px}
#loginPage .btnSecondary,.lrow a{
  height:48px;border-radius:10px;background:rgba(201,168,76,.07);cursor:pointer;
  border:1px solid rgba(201,168,76,.22);color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Outfit','Raleway',sans-serif;font-size:15px;font-weight:500;transition:background .15s,border-color .15s;
}
#loginPage .btnSecondary svg,.lrow a svg{width:19px;height:19px}
#loginPage .btnSecondary svg{fill:none;stroke:var(--gold2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lrow a{color:var(--gold2)}
#loginPage .btnSecondary:hover,.lrow a:hover{background:rgba(201,168,76,.15);border-color:var(--gold2)}
#loginPage :focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.lnote{font-size:12.5px;color:var(--text2);margin-top:18px}
.lnote b{font-weight:500;color:var(--gold2)}
.lerr{
  color:var(--red2);font-size:14px;margin-top:8px;
  padding:8px 12px;background:rgba(192,57,43,.14);border-radius:4px;
  border-left:2px solid var(--red2);display:none;
}
.lcopy{position:absolute;right:0;bottom:22px;z-index:4;width:min(560px,44%);text-align:center;
  font-size:12px;color:rgba(232,220,200,.6);letter-spacing:1px}

/* — MOBILE / potret: gerhana di atas, form langsung di atas latar — */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lcard{display:flex;flex-direction:column;height:auto;padding-top:calc(max(20px,env(safe-area-inset-top)) + 96px + 14px)}
  .lrings{width:150vw;left:-20vw;top:-50vw}
  .lorb{width:118vw;left:auto;right:-36vw;top:-30vw}
  .lmoon{width:24vw;left:-7vw;top:34vh}
  .lstreak.a{left:46vw;top:30vh}.lstreak.b{left:62vw;top:44vh;width:90px}
  .lspark.p1{left:52vw;top:21vh}.lspark.p2{left:12vw;top:27vh}.lspark.p3{left:80vw;top:38vh}
  .lscrim{background:linear-gradient(180deg,rgba(8,8,6,0) 0%,rgba(8,8,6,.15) 20%,rgba(8,8,6,.82) 46%,#080806 66%)}
  .lbrandSide{left:24px;top:max(20px,env(safe-area-inset-top))}
  .lbrandSide img{max-height:96px}
  .ltag{display:none}
  .lpanel{
    position:relative;width:100%;margin-top:auto;overflow:visible;
    padding:30px max(24px,calc((100% - 480px)/2)) calc(56px + env(safe-area-inset-bottom));
  }
  .lhead{margin-bottom:20px}
  .lhead h2{font-size:46px}
  .lcopy{left:0;right:0;width:auto;bottom:calc(16px + env(safe-area-inset-bottom));font-size:11px}
}
@media(max-height:640px) and (min-width:761px){
  .lpanel{padding-top:20px;padding-bottom:48px}
  .lhead{margin-bottom:14px}
  .lfield input,#loginPage .btnPrimary{height:46px}
  .lsep{margin:16px 0 10px}
  .lnote{margin-top:10px}
  .lbrandSide img{max-height:96px}
}
@media(prefers-reduced-motion:reduce){
  .lmedia video{transition:none}
  .lspark{animation:none}
  #loginPage .btnPrimary,#loginPage .btnSecondary{transition:none}
}

/* ===== APP SHELL ===== */
#app{display:none;min-height:100vh;flex-direction:column}

/* ===== SIDEBAR ===== */

/* ===== HEADER ===== */
#hdr{
  height:50px;position:sticky;top:0;z-index:100;
  background:rgba(8,8,8,0.98);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,168,76,0.12);
  display:flex;align-items:center;gap:14px;padding:0 18px;
  flex-shrink:0;
}
.hTitle h2{font-family:'Outfit','Cinzel',serif;font-size:19px;color:var(--gold);letter-spacing:4px;font-weight:700}
.hTitle p{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:0.5px}

/* ===== TOP NAVIGATION BAR ===== */
#topNav{
  position:sticky;top:50px;z-index:99;
  background:rgba(10,10,10,0.96);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,168,76,0.1);
  padding:5px 10px;flex-shrink:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#topNav::-webkit-scrollbar{display:none}
#topNavBtns{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  width:max-content;
  min-width:100%;
}
.topNavBtn{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:5px;padding:8px 12px;border-radius:7px;
  font-family:'Outfit','Raleway',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:0.5px;cursor:pointer;transition:all .18s;text-transform:uppercase;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
  color:var(--muted);white-space:nowrap;flex-shrink:0;
}
.topNavBtn svg{display:none}
.topNavBtn:hover{background:rgba(201,168,76,0.07);color:var(--text2);border-color:rgba(201,168,76,0.2)}
.topNavBtn.active{
  background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.4);
  color:var(--gold);
}
.topNavBtn.topNavLogout{
  background:rgba(192,57,43,0.08);border-color:rgba(192,57,43,0.25);color:#ef9a9a;
}
.topNavBtn.topNavLogout:hover{background:rgba(192,57,43,0.2);border-color:var(--red2);color:#ffcdd2}
@media(min-width:641px){
  #topNavBtns{gap:6px}
  .topNavBtn{padding:10px 16px;font-size:14px;letter-spacing:0.8px;border-radius:8px}
}
@media(max-width:640px){
  #topNav{padding:4px 8px}
  #topNavBtns{gap:3px}
  .topNavBtn{padding:7px 10px;font-size:12px}
  #hdrClock span:last-child{display:none}
  #hClkTimeEl{font-size:18px !important;letter-spacing:1px !important}
}

/* ===== CONTENT AREA ===== */
#content{
  flex:1;padding:20px;overflow-y:auto;
  max-width:1800px;width:100%;margin:0 auto;
}

/* ===== HOME ===== */
.homeTop{
  display:grid;grid-template-columns:1fr auto;gap:16px;
  margin-bottom:20px;align-items:start;flex-wrap:wrap;
}
.homeTop.noEvent{
  display:none !important;
}

/* ===== SPLASH SCREEN ===== */
#splashScreen{
  position:fixed;inset:0;z-index:99999;
  background:#080808;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
#splashScreen.fade-out{
  animation:splashFadeOut 0.25s ease forwards;
}
@keyframes splashFadeOut{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(1.04)}
}
.splash-bg{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,#1c1200 0%,#0a0800 40%,#080808 75%);
}
.splash-logo-wrap{
  position:relative;z-index:2;text-align:center;
}
.splash-logo-text{
  opacity:0;
  text-align:center;
  animation:splashLogoIn 0.35s cubic-bezier(0.2,0.8,0.3,1) 0.05s forwards;
}
.splash-brand-top{
  font-family:'Outfit','Cormorant Garamond',serif;font-size:clamp(12px,2vw,15px);
  color:var(--gold3);letter-spacing:clamp(4px,1.5vw,8px);
  text-transform:uppercase;margin-bottom:14px;
  animation:splashFadeSlideUp 0.3s ease 0.15s both;
}

.splash-brand-line{
  width:clamp(120px,30vw,240px);margin:20px auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:splashLineExpand 0.3s ease 0.25s both;
}
.splash-brand-tagline{
  font-family:'Outfit','Cormorant Garamond',serif;
  font-size:clamp(11px,1.8vw,14px);
  color:var(--muted);letter-spacing:clamp(3px,1.2vw,6px);
  text-transform:uppercase;
  animation:splashFadeSlideUp 0.3s ease 0.3s both;
}
@keyframes splashLogoIn{
  from{opacity:0;transform:scale(0.88) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes splashNameIn{
  from{opacity:0;transform:scaleX(0.85) translateY(30px);letter-spacing:clamp(20px,5vw,40px)}
  to{opacity:1;transform:scaleX(1) translateY(0);letter-spacing:clamp(8px,3vw,24px)}
}
@keyframes splashNameGlow{
  from{text-shadow:0 0 30px rgba(201,168,76,0.35),0 0 60px rgba(201,168,76,0.15)}
  to{text-shadow:0 0 60px rgba(201,168,76,0.7),0 0 100px rgba(201,168,76,0.35),0 0 140px rgba(201,168,76,0.15)}
}
@keyframes splashFadeSlideUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes splashLineExpand{
  from{width:0;opacity:0}
  to{width:clamp(120px,30vw,240px);opacity:1}
}
/* ===== SPLASH TWITCH (elegant glitch) ===== */
@keyframes splashTwitch{
  0%,60%,100%{
    transform:translate(0,0) scale(1) skewX(0deg);
    filter:drop-shadow(0 0 24px rgba(201,168,76,0.5));
  }
  61%{
    transform:translate(-5px,0) scale(1.004) skewX(-1.5deg);
    filter:drop-shadow(-4px 0 10px rgba(255,70,70,0.45)) drop-shadow(4px 0 10px rgba(70,220,255,0.45)) drop-shadow(0 0 18px rgba(201,168,76,0.4));
  }
  62%{
    transform:translate(5px,0) scale(0.997) skewX(1.5deg);
    filter:drop-shadow(4px 0 10px rgba(255,70,70,0.45)) drop-shadow(-4px 0 10px rgba(70,220,255,0.45)) drop-shadow(0 0 18px rgba(201,168,76,0.4));
  }
  63%{
    transform:translate(-2px,1px) scale(1.002) skewX(-0.5deg);
    filter:drop-shadow(0 0 36px rgba(201,168,76,0.85));
  }
  64%{
    transform:translate(0,0) scale(1) skewX(0deg);
    filter:drop-shadow(0 0 24px rgba(201,168,76,0.5));
  }
  72%{
    transform:translate(-3px,0) scale(1) skewX(-1deg);
    filter:drop-shadow(-3px 0 7px rgba(255,70,70,0.3)) drop-shadow(0 0 22px rgba(201,168,76,0.5));
  }
  73%{
    transform:translate(3px,0) scale(1) skewX(1deg);
    filter:drop-shadow(3px 0 7px rgba(70,220,255,0.3)) drop-shadow(0 0 22px rgba(201,168,76,0.5));
  }
  74%{
    transform:translate(0,0) scale(1) skewX(0deg);
    filter:drop-shadow(0 0 24px rgba(201,168,76,0.5));
  }
}
.homeInfo .eventNameDisp{
  font-family:'Outfit','Cinzel',serif;font-size:24px;color:var(--gold2);
  margin-top:14px;letter-spacing:3px;text-shadow:0 0 20px rgba(240,208,128,0.3);
  min-height:28px;
}
.homeInfo .eventTimeDisp{
  font-size:13px;color:var(--muted);margin-top:4px;letter-spacing:1px;
}
.eventImgWrap img{
  width:220px;height:148px;border-radius:8px;object-fit:cover;
  border:1px solid rgba(201,168,76,0.3);display:block;
  cursor:pointer;
}

/* Stats */
.statsBar{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.statCard{
  flex:1;min-width:130px;background:var(--bg2);
  border:var(--border);border-radius:var(--r);
  padding:16px 18px;text-align:center;
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);
}
.statCard .sv{font-family:'Outfit','Cinzel',serif;font-size:40px;color:var(--gold);font-weight:700;line-height:1}
.statCard .sl{font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:2px;text-transform:uppercase;font-weight:600}

/* Controls */
.ctrlBar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.srchInp{
  flex:1;min-width:160px;background:var(--bg2);
  border:var(--border);border-radius:6px;
  padding:9px 14px;color:var(--text);font-size:15px;font-family:'Outfit','Raleway',sans-serif;outline:none;
}
.srchInp:focus,.dateInp:focus{border-color:var(--gold)}
.dateInp{
  background:rgba(201,168,76,0.07);
  border:1px solid rgba(201,168,76,0.45);
  border-radius:6px;
  padding:9px 12px;
  color:var(--gold2);
  font-size:15px;
  font-family:'Outfit','Raleway',sans-serif;
  font-weight:600;
  outline:none;
  cursor:pointer;
  position:relative;
  letter-spacing:0.5px;
}

/* Buttons */
.btn{
  padding:9px 18px;border-radius:6px;font-size:14px;font-family:'Outfit','Raleway',sans-serif;
  cursor:pointer;transition:all .2s;font-weight:600;letter-spacing:0.8px;border:none;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;
}
.btnGold{background:linear-gradient(135deg,var(--gold4),var(--gold));color:#06050a}
.btnGold:hover{background:linear-gradient(135deg,var(--gold),var(--gold2));transform:translateY(-1px);box-shadow:0 4px 16px var(--gold-glow)}
.btnRed{background:rgba(192,57,43,0.18);border:1px solid rgba(192,57,43,0.4);color:#ef9a9a}
.btnRed:hover{background:rgba(192,57,43,0.3)}
.btnGray{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--muted)}
.btnGray:hover{background:rgba(255,255,255,0.09);color:var(--text)}
.btnGreen{background:rgba(46,125,50,0.18);border:1px solid rgba(76,175,80,0.35);color:#a5d6a7}
.btnGreen:hover{background:rgba(46,125,50,0.3)}
.btnFDC{
  padding:9px 18px;background:linear-gradient(135deg,#1a4020,var(--green));
  border:1px solid rgba(76,175,80,0.4);border-radius:6px;
  color:#a5d6a7;font-size:14px;font-family:'Outfit','Raleway',sans-serif;
  cursor:pointer;font-weight:700;letter-spacing:1px;transition:all .2s;text-transform:uppercase;
}
.btnFDC:hover{filter:brightness(1.2);box-shadow:0 0 12px rgba(76,175,80,0.25)}
.btnEvent{
  padding:9px 18px;background:rgba(201,168,76,0.1);
  border:1px solid rgba(201,168,76,0.3);border-radius:6px;
  color:var(--gold);font-size:14px;font-family:'Outfit','Raleway',sans-serif;
  cursor:pointer;font-weight:600;letter-spacing:1px;transition:all .2s;text-transform:uppercase;
}
.btnEvent:hover{background:rgba(201,168,76,0.18)}

/* ===== FLOOR SECTIONS ===== */
.floorSection{margin-bottom:28px}
.floorTitle{
  font-family:'Outfit','Cinzel',serif;font-size:14px;letter-spacing:4px;color:var(--gold);
  padding:9px 16px;border-left:3px solid var(--gold);margin-bottom:16px;
  background:rgba(201,168,76,0.04);border-radius:0 6px 6px 0;text-transform:uppercase;
}
.areaBlock{margin-bottom:18px}
.areaLabel{
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;display:inline-block;margin-bottom:10px;opacity:0.9;
}
.tableGrid{display:flex;flex-wrap:wrap;gap:9px}

/* ===== TABLE BOXES ===== */
.tbox{
  width:128px;min-height:108px;border-radius:8px;cursor:pointer;padding:10px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transition:transform .12s ease,filter .12s ease,border-color .12s ease,background .12s ease;
  border:2px solid transparent;position:relative;flex-shrink:0;
  will-change:transform;
}
.tbox:hover{transform:translateY(-2px);filter:brightness(1.12)}
.tbox:active{transform:translateY(0) scale(0.97);transition:transform .06s ease}
.tbox.empty{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12)}
.tbox.occupied{background:rgba(192,57,43,0.22);border-color:#e74c3c}
.tbox .tn{font-family:'Outfit','Cinzel',serif;font-size:18px;font-weight:700;letter-spacing:1px;margin-bottom:4px;line-height:1.2}
.tbox .tmc{font-size:14px;color:var(--muted);margin-bottom:4px}
.tbox .tguest{font-size:18px;font-weight:700;color:var(--gold2);margin-bottom:3px;line-height:1.2;word-break:break-word;max-width:100%}
.tbox .tpax{font-size:15px;color:#ef9a9a}
.tbox .tavail{font-size:15px;color:var(--muted);margin-top:4px}
.tbox .tremarks{font-size:13px;color:var(--muted);margin-top:3px;opacity:0.8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbox .tdep{font-size:14px;color:#90caf9;margin-top:2px}
.tbox .tsisa{font-size:14px;color:#1e88e5;font-weight:700;margin-top:2px}

/* ===== GUEST MODE ===== */
body.guestMode .appFoot{display:none}
body.guestMode #content{padding-top:16px}
/* Sembunyikan header & navigasi untuk guest */
body.guestMode #hdr{display:none!important}
body.guestMode #topNav{display:none!important}
body.guestMode #topNavBtns{display:none!important}
.guestBanner{
  background:linear-gradient(135deg,rgba(201,168,76,0.08),rgba(201,168,76,0.04));
  border:1px solid rgba(201,168,76,0.2);border-radius:8px;
  padding:12px 18px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.guestBanner .gbTitle{font-family:'Outfit','Cinzel',serif;font-size:17px;color:var(--gold);letter-spacing:2px}
.guestBanner .gbUser{font-size:13px;color:var(--muted)}

/* Deposit + sisa */
.detDepositRow{
  background:rgba(21,101,192,0.1);border:1px solid rgba(21,101,192,0.25);
  border-radius:6px;padding:10px 14px;margin-top:10px;
}
.detDepositRow .dl{color:#90caf9}
.detDepositRow .dv{color:#90caf9;font-weight:700}
.sisaRow{
  background:rgba(21,101,192,0.15);border:1px solid rgba(21,101,192,0.4);
  border-radius:6px;padding:10px 14px;margin-top:6px;
}
.sisaRow .dl{color:#64b5f6}
.sisaRow .dv{color:#1e88e5;font-weight:800;font-size:18px}
.lunasBadge{
  background:rgba(21,101,192,0.2);border:1px solid rgba(21,101,192,0.5);
  border-radius:6px;padding:10px 14px;margin-top:6px;
  text-align:center;color:#42a5f5;font-family:'Outfit','Cinzel',serif;font-size:15px;
  letter-spacing:1.5px;font-weight:700;
}

/* ===== VIEW HEADER ===== */
.viewHdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;flex-wrap:wrap;gap:12px;
}
.viewHdr h2{font-family:'Outfit','Cinzel',serif;font-size:19px;color:var(--gold);letter-spacing:3px;text-transform:uppercase}

/* ===== TABLES (data) ===== */
.tblWrap{overflow-x:auto;border-radius:var(--r);border:var(--border)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  background:rgba(201,168,76,0.08);color:var(--gold);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  padding:12px 14px;text-align:left;font-weight:700;white-space:nowrap;
  border-bottom:1px solid rgba(201,168,76,0.15);
}
td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--text2);vertical-align:middle}
tr:last-child td{border:none}
tbody tr:hover td{background:rgba(201,168,76,0.03)}
tfoot td{padding:11px 14px;border-top:1px solid rgba(201,168,76,0.2);color:var(--text2);vertical-align:middle;font-size:14px}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.bActive{background:rgba(76,175,80,0.15);color:#a5d6a7}
.bGone{background:rgba(192,57,43,0.15);color:#ef9a9a}

/* ===== MODALS ===== */
.mBg{
  position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:500;
  display:none;align-items:center;justify-content:center;padding:16px;
  backdrop-filter:blur(4px);
}
.mBg.open{display:flex}
.modal{
  background:var(--bg2);border:1px solid rgba(201,168,76,0.25);border-radius:12px;
  width:100%;max-width:500px;max-height:92vh;overflow-y:auto;
  box-shadow:0 0 60px rgba(0,0,0,0.9);position:relative;
  animation:slideUp .12s ease-out;
}
.modalWide{max-width:680px}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.mhdr{
  padding:22px 22px 16px;border-bottom:1px solid rgba(201,168,76,0.1);
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;
  background:var(--bg2);z-index:1;
}
.mhdr h3{font-family:'Outfit','Cinzel',serif;font-size:17px;color:var(--gold);letter-spacing:2.5px;text-transform:uppercase}
.mclose{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:26px;line-height:1;padding:4px;transition:color .2s;margin-left:8px;flex-shrink:0;
}
.mclose:hover{color:var(--text)}
.mbody{padding:20px 22px}
.mfooter{
  padding:14px 22px;border-top:1px solid rgba(201,168,76,0.1);
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  position:sticky;bottom:0;background:var(--bg2);
}

/* Form inputs inside modals */
.finp{margin-bottom:15px}
.finp label{display:block;font-size:11px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.finp input,.finp select,.finp textarea{
  width:100%;background:rgba(255,255,255,0.03);
  border:1px solid rgba(201,168,76,0.18);border-radius:6px;
  padding:10px 13px;color:var(--text);font-size:15px;
  font-family:'Outfit','Raleway',sans-serif;outline:none;transition:border-color .2s;
}
.finp input:focus,.finp select:focus,.finp textarea:focus{border-color:var(--gold);background:rgba(201,168,76,0.02)}
.finp input::placeholder,.finp textarea::placeholder{color:var(--muted2)}
.finp select option{background:var(--bg2);color:var(--text)}
.finp textarea{resize:vertical;min-height:65px;line-height:1.5}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Table detail popup */
.detStatus{
  padding:12px 16px;border-radius:6px;margin-bottom:16px;text-align:center;
  font-weight:700;font-size:15px;letter-spacing:1px;
}
.stLunas{background:rgba(21,101,192,0.18);border:1px solid rgba(21,101,192,0.35);color:#90caf9}
.stBelum{background:rgba(192,57,43,0.18);border:1px solid rgba(192,57,43,0.35);color:#ef9a9a}
.detRow{display:flex;justify-content:space-between;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.04);gap:12px;font-size:15px}
.detRow:last-child{border:none}
.detRow .dl{color:var(--muted);font-size:13px;letter-spacing:0.5px;flex-shrink:0}
.detRow .dv{color:var(--text);font-weight:500;text-align:right}

/* ===== FILTER BAR ===== */
.filterBar{display:flex;gap:9px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.filterBar input,.filterBar select{
  background:var(--bg2);border:var(--border);border-radius:6px;
  padding:7px 11px;color:var(--text);font-size:14px;
  font-family:'Outfit','Raleway',sans-serif;outline:none;
}
.filterBar input[type="date"]{position:relative;cursor:pointer}
.filterBar input:focus,.filterBar select:focus{border-color:var(--gold)}
.filterBar label{font-size:13px;color:var(--muted);flex-shrink:0}

/* ===== GUEST FILTER CHIPS ===== */
.gfChip{
  padding:6px 14px;border-radius:20px;font-size:13px;font-family:'Outfit','Raleway',sans-serif;
  font-weight:600;letter-spacing:0.5px;cursor:pointer;transition:all .18s;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  color:var(--muted);white-space:nowrap;
}
.gfChip:hover{background:rgba(201,168,76,0.08);color:var(--text2);border-color:rgba(201,168,76,0.25)}
.gfChip.active{background:rgba(201,168,76,0.15);border-color:var(--gold);color:var(--gold);font-weight:700}

/* ===== SETTINGS ===== */
.setSection{margin-bottom:28px}
.setSection h3{
  font-family:'Outfit','Cinzel',serif;font-size:14px;color:var(--gold);letter-spacing:3px;
  margin-bottom:14px;padding-bottom:9px;border-bottom:var(--border);text-transform:uppercase;
}
.mcAreaBlock{margin-bottom:20px}
.mcAreaLabel{
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;display:inline-block;margin-bottom:10px;opacity:0.9;
}
.mcGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:7px}
.mcItem{background:var(--bg3);border:var(--border);border-radius:6px;padding:9px 10px}
.mcItem label{font-size:11px;color:var(--muted);display:block;margin-bottom:5px;letter-spacing:0.5px;font-weight:600;text-transform:uppercase}
.mcItem input{
  width:100%;background:rgba(255,255,255,0.03);
  border:1px solid rgba(201,168,76,0.15);border-radius:4px;
  padding:6px 8px;color:var(--text);font-size:14px;font-family:'Outfit','Raleway',sans-serif;outline:none;
}
.mcItem input:focus{border-color:var(--gold)}
.mcFloorTitle{
  font-family:'Outfit','Cinzel',serif;font-size:13px;letter-spacing:3px;color:var(--gold);
  padding:7px 14px;border-left:3px solid var(--gold);margin-bottom:12px;margin-top:4px;
  background:rgba(201,168,76,0.04);border-radius:0 5px 5px 0;text-transform:uppercase;
}

/* ===== AD POPUP — FADE IN/OUT ===== */
#adMod{
  z-index:600;
  display:flex!important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}
#adMod.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.adInner{
  background:var(--bg2);border:1px solid var(--gold);border-radius:10px;
  max-width:min(78vw,340px);width:auto;overflow:hidden;position:relative;
  box-shadow:0 0 40px rgba(201,168,76,0.15);
  animation:adPopIn 0.28s cubic-bezier(.22,1,.36,1);
  cursor:pointer;display:inline-flex;flex-direction:column;
}
@keyframes adPopIn{
  from{opacity:0;transform:scale(0.94) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.adImg{display:block;width:auto;height:auto;max-width:min(78vw,340px);max-height:55vh;object-fit:contain;cursor:pointer}
.adCaption{padding:6px 10px;font-family:'Outfit','Cinzel',serif;font-size:11px;color:var(--gold);text-align:center;letter-spacing:1.5px}

/* ===== MULTI-TABLE SELECT ===== */
.mtsGrid{display:flex;flex-wrap:wrap;gap:5px;max-height:200px;overflow-y:auto;padding:4px}
.mtsBox{
  padding:5px 9px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);
  color:var(--muted);transition:all .15s;letter-spacing:0.3px;
}
.mtsBox:hover{border-color:var(--gold);color:var(--text2)}
.mtsBox.sel{background:rgba(201,168,76,0.18);border-color:var(--gold);color:var(--gold)}
.mtsBox.occupied-target{background:rgba(201,168,76,0.1);border-color:rgba(201,168,76,0.4);color:var(--gold);cursor:pointer}
.mtsBox.occupied-target:hover{background:rgba(201,168,76,0.2);border-color:var(--gold)}
.mtsBox.occupied-target.sel{background:rgba(201,168,76,0.3);border-color:var(--gold2);color:var(--gold2)}

/* ===== RANKING ===== */
.rankItem{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.rankItem:last-child{border:none}
.rankBadge{
  font-family:'Outfit','Cinzel',serif;font-size:17px;font-weight:700;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;flex-shrink:0;
}
.rk1{background:linear-gradient(135deg,var(--gold3),var(--gold2));color:#06050a}
.rk2{background:linear-gradient(135deg,#757575,#bdbdbd);color:#fff}
.rk3{background:linear-gradient(135deg,#6d4c41,#a1887f);color:#fff}
.rkN{background:rgba(255,255,255,0.06);color:var(--muted)}

/* ===== WA MODAL ===== */
.waBody{text-align:center;padding:16px 10px 6px}
.waBody h4{font-family:'Outfit','Cinzel',serif;font-size:20px;color:var(--gold);margin-bottom:10px;letter-spacing:2px}
.waBody p{color:var(--text2);font-size:15px;margin-bottom:26px;line-height:1.8;max-width:320px;margin-left:auto;margin-right:auto}
.btnWA{
  display:inline-flex;align-items:center;gap:11px;padding:14px 30px;
  background:linear-gradient(135deg,#1b5e20,#2e7d32,#388e3c);
  border:1px solid rgba(76,175,80,0.55);border-radius:10px;
  color:#c8e6c9;font-size:18px;font-weight:700;cursor:pointer;
  text-decoration:none;transition:all .25s;font-family:'Outfit','Raleway',sans-serif;
  letter-spacing:0.5px;box-shadow:0 4px 18px rgba(37,211,102,0.18);
}
.btnWA:hover{filter:brightness(1.15);box-shadow:0 6px 28px rgba(37,211,102,0.35);transform:translateY(-2px)}
.btnWA:active{transform:translateY(0)}

/* ===== CHECKIN ===== */
.ciItem{
  background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.18);
  border-radius:8px;padding:14px;margin-bottom:10px;
}
.ciItem h4{font-family:'Outfit','Cinzel',serif;color:var(--gold);font-size:15px;margin-bottom:6px}
.ciItem p{font-size:13px;color:var(--muted);line-height:1.6}

/* ===== APP FOOTER ===== */
.appFoot{
  text-align:center;padding:11px 20px;font-size:11px;color:var(--muted2);
  border-top:1px solid rgba(201,168,76,0.08);letter-spacing:0.5px;line-height:1.7;
  font-style:italic;flex-shrink:0;
}

/* ===== NOTICE ===== */
.emptyState{
  text-align:center;padding:50px 20px;color:var(--muted);
}
.emptyState p{font-size:15px;margin-top:8px}

/* ===== EVENT IMAGE POPUP ===== */
#evImgPopupBg{
  position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:700;
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(8px);
}
#evImgPopupBg.open{display:flex}
#evImgPopupBg img{
  max-width:min(480px,90vw);max-height:80vh;
  border-radius:12px;border:1px solid var(--gold);
  object-fit:contain;
}
#evImgPopupBg 

/* ===== SYNC STATUS ===== */
.syncBadge{
  font-size:11px;padding:2px 7px;border-radius:10px;
  letter-spacing:1px;font-weight:600;text-transform:uppercase;
  margin-left:6px;
}
.syncOk{background:rgba(46,125,50,0.2);color:#a5d6a7;border:1px solid rgba(76,175,80,0.3)}
.syncWarn{background:rgba(255,152,0,0.18);color:#ffcc80;border:1px solid rgba(255,152,0,0.35)}
.syncOff{background:rgba(100,100,100,0.2);color:var(--muted);border:1px solid rgba(100,100,100,0.3)}

/* ===== RESPONSIVE ===== */
@media(max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .homeTop{grid-template-columns:1fr}
  .homeInfo{text-align:center}
  /* Event image full centered modal on mobile - handled by evImgPopupBg */
  .tbox{width:calc(33.333% - 7px);min-height:100px}
  .tbox .tn{font-size:15px}
  .tbox .tguest{font-size:15px}
  .tbox .tpax{font-size:13px}
  .tbox .tdep,.tbox .tsisa{font-size:13px}
  
  .statsBar{gap:8px}
  .statCard{min-width:100px}
  .ctrlBar{flex-direction:row;flex-wrap:wrap;gap:8px}
  .srchInp{min-width:120px}
  #content{padding:12px}
  .tableGrid{gap:6px}
  .statsBar{flex-wrap:wrap}
  .statCard .sv{font-size:31px}
  th{padding:9px 10px;font-size:9px}
  td{padding:9px 10px;font-size:13px}
  /* CENTERED MODALS ON MOBILE */
  .modal{max-width:96vw;border-radius:12px;margin-top:0}
  .mBg{align-items:center;padding:12px}
}
/* ===== PENDING MOVES MODAL ===== */
.pendMoveItem{
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;padding:14px 16px;margin-bottom:10px;
  transition:all 0.2s;
}
.pendMoveItem:hover{border-color:rgba(201,168,76,0.25)}
.pendMoveItem .pmHeader{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  flex-wrap:wrap;
}
.pendMoveItem .pmGuest{
  font-size:17px;font-weight:700;color:var(--gold2);flex:1;
}
.pendMoveItem .pmBy{
  font-size:12px;color:var(--muted);letter-spacing:0.5px;
}
.pendMoveItem .pmRoute{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;font-size:14px;
}
.pendMoveItem .pmFrom{
  padding:5px 10px;border-radius:6px;
  background:rgba(192,57,43,0.12);border:1px solid rgba(192,57,43,0.3);color:#ef9a9a;
  font-weight:600;
}
.pendMoveItem .pmTo{
  padding:5px 10px;border-radius:6px;
  background:rgba(46,125,50,0.12);border:1px solid rgba(76,175,80,0.3);color:#a5d6a7;
  font-weight:600;
}
.pendMoveItem .pmArrow{color:var(--gold);font-size:17px}
.pendMoveItem .pmMC{
  font-size:13px;color:var(--muted);margin-bottom:10px;
  padding:6px 10px;background:rgba(201,168,76,0.04);border-radius:6px;
}
.pendMoveItem .pmActions{display:flex;gap:8px}
.pmBadgeCount{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red2);color:#fff;border-radius:50%;
  width:18px;height:18px;font-size:12px;font-weight:700;
  margin-left:6px;
}

/* ===== MOVE TABLE ENHANCED ===== */
.moveInfoCard{
  background:linear-gradient(135deg,rgba(201,168,76,0.07) 0%,rgba(201,168,76,0.03) 100%);
  border:1px solid rgba(201,168,76,0.25);border-radius:10px;
  padding:14px 16px;margin-bottom:16px;position:relative;overflow:hidden;
}
.moveInfoCard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.moveInfoCard .micTitle{
  font-family:'Outfit','Cinzel',serif;font-size:11px;letter-spacing:3px;color:var(--gold);
  text-transform:uppercase;margin-bottom:10px;opacity:0.8;
}
.moveInfoGrid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.moveInfoItem{display:flex;flex-direction:column;gap:2px}
.moveInfoItem .mil{font-size:11px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}
.moveInfoItem .miv{font-size:15px;color:var(--text);font-weight:600}
.moveInfoItem .miv.gold{color:var(--gold2)}
.moveInfoItem .miv.red{color:#ef9a9a}
.moveInfoItem .miv.green{color:#a5d6a7}
.moveArrow{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:12px 0;padding:8px;
  background:rgba(255,255,255,0.03);border-radius:8px;
}
.moveArrow .maFrom,.moveArrow .maTo{
  flex:1;text-align:center;
  padding:8px 12px;border-radius:6px;font-size:14px;font-weight:600;
}
.moveArrow .maFrom{
  background:rgba(192,57,43,0.12);border:1px solid rgba(192,57,43,0.3);color:#ef9a9a;
}
.moveArrow .maTo{
  background:rgba(46,125,50,0.12);border:1px solid rgba(76,175,80,0.3);color:#a5d6a7;
  transition:all 0.2s;
}
.moveArrow .maTo.selected{
  background:rgba(201,168,76,0.18);border-color:var(--gold);color:var(--gold2);
}
.moveArrow .arrowIcon{color:var(--gold);font-size:21px;flex-shrink:0}
.moveDestPreview{
  background:rgba(255,255,255,0.03);border:1px dashed rgba(201,168,76,0.2);
  border-radius:8px;padding:10px 14px;margin-bottom:14px;
  font-size:13px;color:var(--muted);transition:all 0.2s;min-height:42px;
  display:flex;align-items:center;
}
.moveDestPreview.active{
  background:rgba(201,168,76,0.06);border-color:rgba(201,168,76,0.4);color:var(--text2);
}
.moveDestPreview .mdpGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.moveDestPreview .mdpItem{display:flex;flex-direction:column;gap:1px}
.moveDestPreview .mdpL{font-size:9px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.moveDestPreview .mdpV{font-size:14px;color:var(--gold2);font-weight:600}
.moveGridTitle{
  font-size:12px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.06);
}
/* Host pax edit inline */
.paxEditInline{
  display:flex;align-items:center;gap:8px;
  background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.2);
  border-radius:8px;padding:10px 14px;margin-top:10px;
}
.paxEditInline label{font-size:13px;color:var(--gold);flex-shrink:0;letter-spacing:0.5px}
.paxEditInline input{
  width:70px;background:rgba(255,255,255,0.05);border:1px solid rgba(201,168,76,0.3);
  border-radius:6px;padding:7px 10px;color:var(--text);font-size:15px;
  font-family:'Outfit','Raleway',sans-serif;outline:none;text-align:center;
}
.paxEditInline input:focus{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}
/* Move history badge in guest table */
/* ===== CHECK-IN & EDIT NAME ===== */
.badgeCheckin{
  display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
}
.badgeCheckin.in{background:rgba(46,125,50,0.25);color:#a5d6a7;border:1px solid rgba(76,175,80,0.4)}
.badgeCheckin.out{background:rgba(255,255,255,0.05);color:var(--muted);border:1px solid rgba(255,255,255,0.1)}
.btnCI{
  padding:4px 10px;border-radius:5px;font-size:12px;font-family:'Outfit','Raleway',sans-serif;
  cursor:pointer;font-weight:700;letter-spacing:0.8px;border:none;transition:all .18s;
  text-transform:uppercase;
}
.btnCI.doIn{background:rgba(46,125,50,0.2);border:1px solid rgba(76,175,80,0.4);color:#a5d6a7}
.btnCI.doIn:hover{background:rgba(46,125,50,0.4)}
.btnCI.doOut{background:rgba(192,57,43,0.15);border:1px solid rgba(192,57,43,0.35);color:#ef9a9a}
.btnCI.doOut:hover{background:rgba(192,57,43,0.3)}
.btnEditName{
  padding:4px 9px;border-radius:5px;font-size:12px;font-family:'Outfit','Raleway',sans-serif;
  cursor:pointer;font-weight:600;letter-spacing:0.5px;
  background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.3);color:var(--gold);
  transition:all .18s;
}
.btnEditName:hover{background:rgba(201,168,76,0.22)}
/* Edit name inline modal */
#editNameModal{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
#editNameModal.open{display:flex}
.editNameBox{
  background:var(--bg2);border:1px solid rgba(201,168,76,0.35);
  border-radius:12px;padding:28px 28px 24px;width:min(400px,92vw);
  box-shadow:0 0 60px rgba(0,0,0,0.8);
}
.editNameBox h3{
  font-family:'Outfit','Cinzel',serif;font-size:17px;color:var(--gold);
  letter-spacing:2px;margin-bottom:18px;text-transform:uppercase;
}
.editNameBox input{
  width:100%;background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,168,76,0.3);border-radius:6px;
  padding:11px 14px;color:var(--text);font-size:17px;
  font-family:'Outfit','Raleway',sans-serif;outline:none;transition:all .2s;
}
.editNameBox input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.editNameBox .errMsg{color:var(--red2);font-size:14px;margin-top:6px;display:none}
.editNameBox .btnRow{display:flex;gap:10px;margin-top:18px}
.moveHistBadge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;padding:2px 7px;border-radius:10px;
  background:rgba(201,168,76,0.12);color:var(--gold);border:1px solid rgba(201,168,76,0.25);
  cursor:pointer;white-space:nowrap;
}
.moveHistBadge:hover{background:rgba(201,168,76,0.22)}
/* Move history popup */
.moveHistPopup{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:800;
  display:none;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(4px);
}
.moveHistPopup.open{display:flex}
.moveHistBox{
  background:var(--bg2);border:1px solid rgba(201,168,76,0.3);border-radius:12px;
  padding:20px;max-width:480px;width:100%;max-height:80vh;overflow-y:auto;
}
.moveHistBox h4{font-family:'Outfit','Cinzel',serif;font-size:15px;color:var(--gold);letter-spacing:2px;margin-bottom:14px}
.moveHistItem{
  padding:10px 12px;border-radius:8px;margin-bottom:8px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
  font-size:13px;line-height:1.7;
}
.moveHistItem .mhTime{font-size:11px;color:var(--muted);margin-top:4px}

/* ===== ANTRIAN NOTIF REQUEST ===== */
@keyframes fadeIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes spamShake{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}

/* ===== GUEST MODE — sembunyikan stats & kontrol yang tidak perlu ===== */
body.guestMode #statsBar{ display:none !important; }
body.guestMode #preOpenBanner{ display:none !important; }
body.guestMode #tableSearch{ display:none !important; }
/* Rapatkan ctrlBar ke atas saat tidak ada event (homeTop hidden) */
body:not(.guestMode) #view-home .homeTop[style*="display: none"] ~ .statsBar,
body:not(.guestMode) #view-home .homeTop[style*="display:none"] ~ .statsBar{ margin-top:0 }
/* Rapatkan ctrlBar saat tidak ada event */
#view-home .homeTop[style*="display: none"] ~ .ctrlBar,
#view-home .homeTop[style*="display:none"] ~ .ctrlBar{ margin-top:0 }

/* ===== DENAH LAYOUT TAMU ===== */
#guestLayoutView{padding:10px 0}
.glv-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.glv-tab{
  padding:7px 16px;border-radius:20px;font-size:13px;font-family:'Outfit','Raleway',sans-serif;
  font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .18s;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  color:var(--muted);text-transform:uppercase;
}
.glv-tab.active{background:rgba(201,168,76,0.15);border-color:var(--gold);color:var(--gold)}
.glv-canvas-wrap{
  position:relative;width:100%;overflow:hidden;
  background:rgba(255,255,255,0.015);
  border:1px solid rgba(201,168,76,0.1);border-radius:10px;
}
.glv-canvas{position:relative;min-width:320px;}
.glv-tbl{
  position:absolute;
  border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Outfit','Raleway',sans-serif;
  border:2px solid;
  box-sizing:border-box;
  transition:box-shadow .15s;
  overflow:hidden;
  user-select:none;-webkit-user-select:none;
}
.glv-tbl .gt-name{font-size:12px;font-weight:800;letter-spacing:1px;text-align:center;line-height:1.2}
.glv-tbl .gt-num{font-size:19px;font-weight:900;letter-spacing:0;text-align:center;line-height:1;font-family:'Outfit','Cinzel',serif}
.glv-tbl .gt-status{font-size:11px;letter-spacing:0.5px;margin-top:3px;text-align:center;line-height:1.2}
.glv-tbl.gt-occupied{box-shadow:0 0 12px rgba(255,80,80,0.2)}
.glv-tbl.gt-available{opacity:0.8}
/* Legend */
.glv-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.glv-legend-item{display:flex;align-items:center;gap:5px}
.glv-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
/* Guest layout floor decor */
.glv-floor-section{margin-bottom:32px}
.glv-floor-decor{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.glv-decor-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(201,168,76,0.07);border:1px solid rgba(201,168,76,0.2);border-radius:8px}
.glv-decor-badge span{font-family:'Outfit','Cinzel',serif;font-size:12px;color:var(--gold);letter-spacing:2px;text-transform:uppercase}
/* Area legend table */
.glv-area-legend{margin-top:14px}
.glv-area-legend-title{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.glv-area-table{border-collapse:collapse;background:rgba(255,255,255,0.02);border:1px solid rgba(201,168,76,0.12);border-radius:8px;overflow:hidden;min-width:260px;width:100%;max-width:420px}
.glv-area-table th{background:rgba(201,168,76,0.06);padding:7px 10px;font-size:11px;color:var(--gold);letter-spacing:2px;text-align:left;font-weight:700;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid rgba(201,168,76,0.1)}
.glv-area-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle}
.glv-area-table tr:last-child td{border:none}
.glv-area-swatch{width:14px;height:14px;border-radius:3px;display:inline-block;flex-shrink:0}
/* Canvas scaling — berlaku di semua ukuran layar */
.glv-canvas-scaler{transform-origin:top left;display:block}
/* Mobile canvas scaling */
@media(max-width:640px){
  .glv-canvas-wrap{overflow:hidden !important}
  .glv-floor-decor{gap:6px}
  .glv-decor-badge{padding:5px 10px}
}

/* ===== LAYOUT EDITOR (admin/resepsionis) ===== */
#layoutEditorWrap{margin-top:8px}
.le-toolbar{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:10px;padding:10px 12px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(201,168,76,0.12);border-radius:8px;
}
.le-toolbar label{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;flex-shrink:0}
.le-toolbar select{
  background:var(--bg2);border:1px solid rgba(201,168,76,0.2);border-radius:5px;
  padding:5px 8px;color:var(--text);font-size:13px;font-family:'Outfit','Raleway',sans-serif;outline:none;
}
.le-grid-canvas{
  position:relative;min-height:340px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,0.03) 0,rgba(255,255,255,0.03) 1px,transparent 1px,transparent 40px),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.03) 0,rgba(255,255,255,0.03) 1px,transparent 1px,transparent 40px);
  border:1px solid rgba(201,168,76,0.15);border-radius:8px;overflow:hidden;
}
.le-item{
  position:absolute;cursor:grab;
  border-radius:6px;border:2px solid;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Outfit','Raleway',sans-serif;
  box-sizing:border-box;transition:box-shadow .12s;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}
.le-item:active{cursor:grabbing;box-shadow:0 6px 20px rgba(0,0,0,0.5);z-index:100}
.le-item.selected{outline:2px solid var(--gold2);outline-offset:2px}
.le-stage-item{
  background:rgba(201,168,76,0.14)!important;
  border-color:rgba(201,168,76,0.6)!important;
  border-style:dashed!important;
  border-width:2px!important;
}
.le-item .li-name{font-size:11px;font-weight:800;letter-spacing:0.8px;text-align:center;pointer-events:none}
.le-size-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.le-size-row label{font-size:12px;color:var(--muted)}
.le-size-row input{
  width:60px;background:var(--bg2);border:1px solid rgba(201,168,76,0.2);
  border-radius:5px;padding:5px 7px;color:var(--text);font-size:13px;
  font-family:'Outfit','Raleway',sans-serif;outline:none;text-align:center;
}
.le-hint{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:0.3px}

/* ===== TOAST NOTIFICATION ===== */
.notif-toast{
  position:fixed;bottom:24px;right:20px;
  background:rgba(14,14,14,0.97);
  border:1px solid rgba(201,168,76,0.55);
  color:var(--gold2);padding:12px 18px;border-radius:8px;
  font-size:14px;font-family:'Outfit','Raleway',sans-serif;font-weight:600;
  z-index:99999;opacity:0;transform:translateY(20px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  box-shadow:0 6px 28px rgba(0,0,0,0.9),0 0 0 1px rgba(201,168,76,0.1);
  max-width:320px;letter-spacing:0.3px;line-height:1.5;
  pointer-events:none;
  display:flex;align-items:center;gap:4px;
}
.notif-toast.show{opacity:1;transform:translateY(0)}
@media(max-width:640px){.notif-toast{bottom:16px;right:12px;left:12px;max-width:none}}


/* ===== MENU MOBILE: HAMBURGER + DRAWER (≤768px) ===== */
#navToggle,#navBackdrop,.navDrawerHead{display:none}
@media(max-width:768px){
  #hdr{padding:0 12px;gap:10px}
  #navToggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    position:relative;width:40px;height:40px;flex-shrink:0;
    background:transparent;border:1px solid rgba(201,168,76,0.28);border-radius:8px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  #navToggle span{display:block;width:18px;height:1.5px;background:var(--gold);border-radius:2px}
  #navToggle.hasPend::after{
    content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;
    border-radius:50%;background:var(--red2);border:1.5px solid #080808;
  }

  #topNav{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(86vw,340px);z-index:9500;
    padding:0 0 env(safe-area-inset-bottom,0);
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,#120f06 0%,#070707 60%);
    border-left:1px solid rgba(201,168,76,0.32);border-bottom:none;
    box-shadow:-24px 0 60px rgba(0,0,0,0.75);
    backdrop-filter:none;
    transform:translateX(105%);visibility:hidden;
    transition:transform .34s cubic-bezier(.22,.8,.3,1),visibility 0s linear .34s;
  }
  body.navOpen #topNav{
    transform:none;visibility:visible;
    transition:transform .34s cubic-bezier(.22,.8,.3,1),visibility 0s;
  }
  #navBackdrop{
    display:block;position:fixed;inset:0;z-index:9400;
    background:rgba(0,0,0,0.68);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .3s;
  }
  body.navOpen #navBackdrop{opacity:1;pointer-events:auto}
  body.navOpen{overflow:hidden}

  .navDrawerHead{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:1;
    padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;
    background:#100d05;border-bottom:1px solid rgba(201,168,76,0.2);
  }
  .navDrawerHead b{font-family:'Outfit','Cinzel',serif;font-size:19px;letter-spacing:5px;color:var(--gold)}
  .navDrawerHead small{display:block;margin-top:4px;font-size:11px;letter-spacing:4px;color:var(--muted);text-transform:uppercase}
  #navClose{
    width:38px;height:38px;border-radius:50%;line-height:1;font-size:26px;
    background:transparent;color:var(--gold);border:1px solid rgba(201,168,76,0.32);cursor:pointer;
  }

  #topNavBtns{flex-direction:column;gap:0;width:100%;min-width:0;padding:6px 0 28px}
  #topNavBtns .topNavBtn{
    width:100%;justify-content:flex-start;gap:16px;
    padding:17px 22px;border-radius:0;border:none;
    border-bottom:1px solid rgba(255,255,255,0.05);
    background:transparent;color:var(--text2);
    font-family:'Outfit','Cinzel',serif;font-size:18px;font-weight:600;letter-spacing:3px;
    -webkit-tap-highlight-color:transparent;
    opacity:0;transform:translateX(18px);
  }
  body.navOpen #topNavBtns .topNavBtn{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease,background .18s}
  body.navOpen #topNavBtns .topNavBtn:nth-child(1){transition-delay:.06s}
  body.navOpen #topNavBtns .topNavBtn:nth-child(2){transition-delay:.10s}
  body.navOpen #topNavBtns .topNavBtn:nth-child(3){transition-delay:.14s}
  body.navOpen #topNavBtns .topNavBtn:nth-child(4){transition-delay:.18s}
  body.navOpen #topNavBtns .topNavBtn:nth-child(5){transition-delay:.22s}
  body.navOpen #topNavBtns .topNavBtn:nth-child(6){transition-delay:.26s}
  body.navOpen #topNavBtns .topNavBtn:nth-child(n+7){transition-delay:.30s}
  #topNavBtns .topNavBtn svg{display:block;width:18px;height:18px;flex-shrink:0;opacity:.75}
  #topNavBtns .topNavBtn:active{background:rgba(201,168,76,0.1)}
  #topNavBtns .topNavBtn.active{
    color:var(--gold);box-shadow:inset 3px 0 0 var(--gold);
    background:linear-gradient(90deg,rgba(201,168,76,0.15),transparent);
  }
  #topNavBtns .topNavBtn.active svg{opacity:1}
  #topNavBtns .topNavLogout{margin-top:14px;color:#ef9a9a;border-top:1px solid rgba(192,57,43,0.28);border-bottom:none}
  #topNavBtns .topNavBtn .pmBadgeCount{margin-left:auto}
  #hdrClock span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  #topNav,#navBackdrop,#topNavBtns .topNavBtn{transition:none!important}
}

/* ===== DENAH TAMU — LT.1 CLUB (gaya neon) ===== */
.c1g-head{font-family:'Outfit','Cinzel',serif;font-size:14px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.c1g-dot{width:8px;height:8px;border-radius:50%;background:#ffe600;box-shadow:0 0 10px #ffe600;animation:c1blink 2.4s ease-in-out infinite}
.c1-wrap{overflow-x:auto !important;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:#050505 !important;border:1px solid rgba(201,168,76,.35) !important;box-shadow:0 0 30px rgba(201,168,76,.08),inset 0 0 40px rgba(0,0,0,.8)}
.c1canvas{font-family:'Outfit','Raleway',sans-serif}
.c1floor{position:absolute;left:40px;top:40px;width:820px;height:490px;border-radius:26px;border:2px solid rgba(201,168,76,.55);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 6px,transparent 6px 12px),radial-gradient(ellipse at 50% 35%,#2a2a2a 0%,#111 70%);box-shadow:0 0 40px rgba(201,168,76,.12) inset}
.c1lt{position:absolute;right:48px;top:12px;font-weight:900;font-size:35px;letter-spacing:3px;color:#fff;text-shadow:0 0 14px rgba(201,168,76,.7)}
.c1stage{position:absolute;left:305px;top:82px;width:290px;height:108px;border-radius:6px 6px 70px 70px;background:linear-gradient(180deg,#111,#1b1b1b);border:3px solid #f0d080;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;box-shadow:0 0 30px rgba(240,208,128,.35)}
.c1stage span{font-weight:900;font-size:33px;letter-spacing:6px;color:#f0d080;text-shadow:0 0 16px rgba(240,208,128,.8)}
.c1beam{position:absolute;top:190px;width:2px;height:60px;background:linear-gradient(180deg,rgba(240,208,128,.5),transparent);filter:blur(1px);animation:c1blink 3s ease-in-out infinite}
.c1beam.b2{animation-delay:.8s}.c1beam.b3{animation-delay:1.6s}
.c1b{position:absolute;background:rgba(var(--rgb,255,255,255),.1);border:1.5px solid rgba(var(--rgb,255,255,255),.55);box-shadow:0 0 14px rgba(var(--rgb,255,255,255),.15) inset}
.c1bar{position:absolute;left:234px;top:398px;width:325px;height:44px;border-radius:8px;background:linear-gradient(135deg,rgba(255,95,207,.28),rgba(255,95,207,.1));border:1.5px solid rgba(255,95,207,.7);box-shadow:0 0 18px rgba(255,95,207,.3)}
.c1stool{position:absolute;width:12px;height:12px;border-radius:50%;background:#333;border:1px solid #666;transform:translateX(-50%)}
.c1stair{position:absolute;width:22px;height:78px;background:linear-gradient(90deg,#444,#bbb);border-radius:3px;opacity:.55}
.c1counter{position:absolute;left:253px;top:478px;width:290px;height:42px;border-radius:6px;background:linear-gradient(135deg,#e8e8e8,#9a9a9a 60%,#d6d6d6);box-shadow:0 0 16px rgba(255,255,255,.15)}
.c1t{position:absolute;width:40px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-weight:900;font-size:20px;box-sizing:border-box;user-select:none;-webkit-user-select:none;transition:transform .15s,box-shadow .15s}
.c1t:active{transform:scale(.92)}
.c1t-free{background:linear-gradient(145deg,var(--c),rgba(var(--rgb),.7));color:var(--ink);box-shadow:0 0 12px rgba(var(--rgb),.55),0 2px 0 rgba(0,0,0,.4);animation:c1glow 3.2s ease-in-out infinite}
.c1t-occ{background:#0b0b0b;color:var(--c);border:2px solid rgba(var(--rgb),.8);box-shadow:0 0 8px rgba(var(--rgb),.25)}
.c1t-occ::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#ff5252;box-shadow:0 0 5px #ff5252}
.c1lg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;max-width:640px}
.c1lg{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(var(--rgb),.07);border:1px solid rgba(var(--rgb),.35)}
.c1lg-sw{width:22px;height:22px;border-radius:6px;background:var(--c);box-shadow:0 0 10px rgba(var(--rgb),.6);flex-shrink:0}
.c1lg-tx{flex:1;min-width:0}
.c1lg-name{font-weight:800;font-size:15px;letter-spacing:1px;color:var(--c);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c1lg-sub{font-size:12px;color:var(--muted);margin-top:2px}
.c1lg-mc{font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap}
@keyframes c1glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@keyframes c1blink{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.c1t-free,.c1beam,.c1g-dot{animation:none}}

/* ===== DENAH TAMU — LT.2 CLUB ===== */
.c2wall{position:absolute;border:2.5px solid rgba(240,208,128,.55);box-sizing:border-box;border-radius:4px;pointer-events:none}
.c2lt{right:56px;top:auto;bottom:34px;text-align:right;line-height:1.05;font-size:31px}
.c2barbox{position:absolute;left:297px;top:393px;width:224px;height:50px;border:2.5px solid rgba(255,255,255,.5);border-top-width:3px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.c2barbox span{font-weight:900;letter-spacing:6px;color:#fff;font-size:21px;text-shadow:0 0 10px rgba(255,255,255,.5)}
.c2room{flex-direction:column;gap:1px;border-radius:12px;line-height:1.1;text-align:center}
.c2room b{font-size:35px;font-weight:900;line-height:1}
.c2room small{font-size:13px;font-weight:700;letter-spacing:.5px;opacity:.9}
.c2room em{font-style:normal;font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.75;margin-top:3px}

/* ═════════════════════════════════════════════════════════
   MODE TAMU — TEMA EKSKLUSIF (black · champagne gold)
   ═════════════════════════════════════════════════════════ */
#guestLayoutView{--gd1:#f6e3a1;--gd2:#d9b45a;--gd3:#9c7a2a;padding:18px 0 30px}
.glv-title{text-align:center;margin:6px 0 26px;position:relative}
.glv-title span{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:17px;letter-spacing:6px;color:rgba(246,227,161,.65);text-transform:uppercase}
.glv-title h2{margin:4px 0 0;font-family:'Cinzel',serif;font-weight:600;font-size:31px;letter-spacing:9px;text-transform:uppercase;
  background:linear-gradient(180deg,var(--gd1),var(--gd2) 55%,var(--gd3));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgba(217,180,90,.25))}
.glv-title i{display:block;height:1px;width:min(260px,60%);margin:14px auto 0;background:linear-gradient(90deg,transparent,var(--gd2),transparent);position:relative}
.glv-title i::after{content:'◆';position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-style:normal;font-size:11px;color:var(--gd2);background:#0a0a0a;padding:0 8px}

.c1g{margin-bottom:46px}
.c1g-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;letter-spacing:0}
.c1g-dot{width:7px;height:7px;transform:rotate(45deg);border-radius:1px;background:var(--gd2,#d9b45a) !important;box-shadow:0 0 10px rgba(217,180,90,.8) !important;animation:c1blink 3s ease-in-out infinite}
.c1g-ttl{font-family:'Cinzel',serif;font-weight:600;font-size:18px;letter-spacing:5px;text-transform:uppercase;color:#f6e3a1}
.c1g-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:rgba(246,227,161,.5);letter-spacing:2px;flex:1;display:flex;align-items:center;gap:14px}
.c1g-sub::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(217,180,90,.5),transparent)}

/* Bingkai denah */
.c1-wrap{position:relative;border-radius:18px !important;border:1px solid rgba(217,180,90,.55) !important;
  background:radial-gradient(ellipse at 50% 0%,#17140c 0%,#070707 65%) !important;
  box-shadow:0 0 0 4px #050505,0 0 0 5px rgba(217,180,90,.25),0 24px 60px rgba(0,0,0,.7),0 0 50px rgba(217,180,90,.07),inset 0 0 60px rgba(0,0,0,.85) !important}
.c1floor{border:1px solid rgba(217,180,90,.5) !important;border-radius:22px !important;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(217,180,90,.09),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 14px),
    linear-gradient(180deg,#171717,#0c0c0c) !important;
  box-shadow:inset 0 0 0 6px #0a0a0a,inset 0 0 0 7px rgba(217,180,90,.2),inset 0 0 70px rgba(0,0,0,.7) !important}
.c1vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
.c1lt{font-family:'Cinzel',serif !important;font-weight:600 !important;letter-spacing:6px !important;
  background:linear-gradient(180deg,#fff3c4,#d9b45a 60%,#9c7a2a);-webkit-background-clip:text;background-clip:text;color:transparent !important;text-shadow:none !important;filter:drop-shadow(0 0 10px rgba(217,180,90,.45))}

/* Stage */
.c1stage{background:linear-gradient(180deg,#0d0d0d,#1a1710) !important;border:1.5px solid #d9b45a !important;
  box-shadow:0 0 0 4px rgba(217,180,90,.08),0 0 40px rgba(217,180,90,.3),inset 0 0 30px rgba(217,180,90,.12) !important}
.c1stage span{font-family:'Cinzel',serif !important;font-weight:600 !important;letter-spacing:12px !important;font-size:28px !important;
  background:linear-gradient(180deg,#fff3c4,#d9b45a 65%,#9c7a2a);-webkit-background-clip:text;background-clip:text;color:transparent !important;text-shadow:none !important}
.c1beam{width:70px !important;height:70px !important;background:linear-gradient(180deg,rgba(246,227,161,.28),transparent) !important;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(2px) !important;transform:translateX(-50%)}

/* Sofa / booth */
.c1b{background:linear-gradient(145deg,rgba(var(--rgb,255,255,255),.12),rgba(var(--rgb,255,255,255),.03)) !important;
  border:1px solid rgba(var(--rgb,255,255,255),.5) !important;box-shadow:inset 0 0 18px rgba(0,0,0,.55),0 0 10px rgba(var(--rgb,255,255,255),.08) !important;backdrop-filter:blur(1px)}
.c1bar{background:linear-gradient(135deg,rgba(255,95,207,.22),rgba(255,95,207,.06)) !important;border:1px solid rgba(255,95,207,.65) !important;box-shadow:0 0 22px rgba(255,95,207,.22),inset 0 0 14px rgba(0,0,0,.5) !important}
.c1counter{background:linear-gradient(135deg,#f3efe4,#b7ac8c 55%,#e9e2cd) !important;box-shadow:0 0 22px rgba(217,180,90,.25),inset 0 -3px 6px rgba(0,0,0,.25) !important}
.c1stool{background:radial-gradient(circle at 35% 30%,#8a7a4a,#1a1a1a) !important;border:1px solid rgba(217,180,90,.5) !important}
.c1stair{background:linear-gradient(90deg,#2a2a2a,#8a8068) !important;opacity:.5}
.c2wall{border-color:rgba(217,180,90,.5) !important}
.c2barbox{border-color:rgba(217,180,90,.6) !important;background:linear-gradient(135deg,rgba(217,180,90,.12),rgba(217,180,90,.02)) !important}
.c2barbox span{font-family:'Cinzel',serif !important;color:#f6e3a1 !important;text-shadow:0 0 12px rgba(217,180,90,.5) !important}

/* Meja — logam berkilau */
.c1t{font-family:'Cinzel','Outfit',serif;font-weight:700;border-radius:9px}
.c1t-free{background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,var(--c) 38%,rgba(var(--rgb),.62) 100%) !important;
  border:1px solid rgba(255,255,255,.55);box-shadow:0 0 14px rgba(var(--rgb),.42),0 3px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6) !important;animation:none !important}
.c1t-free span{text-shadow:0 1px 0 rgba(255,255,255,.35)}
.c1t-occ{background:linear-gradient(160deg,#17130a,#050505) !important;color:rgba(var(--rgb),.9) !important;
  border:1px solid rgba(var(--rgb),.7) !important;box-shadow:0 0 10px rgba(var(--rgb),.18),inset 0 0 12px rgba(0,0,0,.9) !important}
.c1t-occ::after{background:#d9b45a !important;box-shadow:0 0 6px #d9b45a !important;width:4px !important;height:4px !important}
@media (hover:hover){.c1t:hover{transform:translateY(-2px) scale(1.12);z-index:5;box-shadow:0 0 22px rgba(var(--rgb),.8),0 8px 14px rgba(0,0,0,.6) !important}}
.c2room{border-radius:14px !important}
.c2room b{font-family:'Cinzel',serif;font-size:38px}
.c2room small{font-family:'Raleway','Outfit',sans-serif}

/* Legenda & keterangan */
.c1g .glv-legend{gap:18px;font-family:'Raleway','Outfit',sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:11px;color:rgba(246,227,161,.6)}
.c1g .glv-legend-dot{border-radius:50%;width:9px;height:9px}
.c1g .glv-legend-dot.lg-free{background:radial-gradient(circle at 35% 30%,#fff3c4,#d9b45a);box-shadow:0 0 8px rgba(217,180,90,.7)}
.c1g .glv-legend-dot.lg-occ{background:#050505;border:1px solid #d9b45a}
.c1g .glv-area-legend-title{font-family:'Cinzel',serif;font-size:13px;letter-spacing:5px;color:#f6e3a1;display:flex;align-items:center;gap:14px;margin-bottom:12px}
.c1g .glv-area-legend-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(217,180,90,.5),transparent)}
.c1lg-grid{max-width:none !important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;gap:12px !important}
.c1lg{position:relative;border-radius:12px !important;padding:13px 14px !important;overflow:hidden;
  background:linear-gradient(145deg,rgba(var(--rgb),.1),rgba(10,10,10,.85) 70%) !important;
  border:1px solid rgba(217,180,90,.28) !important;box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.c1lg::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--c),transparent)}
.c1lg-sw{width:20px !important;height:20px !important;border-radius:50% !important;background:radial-gradient(circle at 32% 28%,#fff,var(--c) 45%,rgba(var(--rgb),.5)) !important;box-shadow:0 0 14px rgba(var(--rgb),.65) !important}
.c1lg-name{font-family:'Cinzel',serif !important;font-weight:600 !important;letter-spacing:3px !important;color:#f6e3a1 !important;font-size:15px !important}
.c1lg-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px !important;color:rgba(246,227,161,.55) !important}
.c1lg-mc{font-family:'Cinzel',serif;color:var(--c) !important;font-size:14px !important;letter-spacing:1px}
@media(max-width:640px){
  .glv-title h2{font-size:24px;letter-spacing:6px}
  .c1g-ttl{font-size:15px;letter-spacing:3px}
  .c1g-sub{display:none}
}

/* ── Lingkaran → kotak (selaras dengan bentuk meja) ── */
.c1g .glv-legend-dot{width:14px !important;height:11px !important;border-radius:4px !important}
.c1g .glv-legend-dot.lg-free{background:linear-gradient(160deg,#fff3c4,#d9b45a 60%,#9c7a2a) !important;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 8px rgba(217,180,90,.6) !important}
.c1g .glv-legend-dot.lg-occ{background:linear-gradient(160deg,#17130a,#050505) !important;border:1px solid #d9b45a !important}
.c1lg-sw{width:26px !important;height:20px !important;border-radius:6px !important;
  background:linear-gradient(160deg,rgba(255,255,255,.55),var(--c) 40%,rgba(var(--rgb),.62)) !important;
  border:1px solid rgba(255,255,255,.5);box-shadow:0 0 12px rgba(var(--rgb),.5),0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6) !important}
.c1t-occ::after{border-radius:1px !important}
.c1stool{border-radius:4px !important}

/* ── Fit layar penuh, tidak terpotong ── */
.c1-wrap{overflow:hidden !important}
.c1t{font-size:22px;line-height:1}
.c2room b{font-size:40px}
@media(max-width:640px){
  .c1-wrap{border-radius:12px !important;box-shadow:0 0 0 2px #050505,0 0 0 3px rgba(217,180,90,.25),0 12px 30px rgba(0,0,0,.7) !important}
  .c1lg-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
  .c1lg{padding:10px 10px !important;gap:8px !important}
  .c1lg-name{font-size:13px !important;letter-spacing:2px !important}
  .c1lg-sub{font-size:14px !important}
  .c1lg-sw{width:22px !important;height:17px !important}
  .c1lg-mc{font-size:12px !important}
  #guestLayoutView{padding-left:0;padding-right:0}
}

/* ── Meja terisi: tanda silang (mode tamu) ── */
.c1t-occ>span,.c1t-occ b,.c1t-occ small,.c1t-occ em{opacity:.4}
.c1t-occ::before,.glv-tbl.gt-occupied::before{content:'';position:absolute;inset:3px;pointer-events:none;z-index:2;
  background:
    linear-gradient(to top right,transparent calc(50% - 1.6px),#ff4d4d calc(50% - 1.6px),#ff4d4d calc(50% + 1.6px),transparent calc(50% + 1.6px)),
    linear-gradient(to bottom right,transparent calc(50% - 1.6px),#ff4d4d calc(50% - 1.6px),#ff4d4d calc(50% + 1.6px),transparent calc(50% + 1.6px));
  filter:drop-shadow(0 0 4px rgba(255,60,60,.7))}
.c1t-occ::after{display:none !important}
.c1g .glv-legend-dot.lg-occ{position:relative;overflow:hidden}
.c1g .glv-legend-dot.lg-occ::before{content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top right,transparent calc(50% - .8px),#ff4d4d calc(50% - .8px),#ff4d4d calc(50% + .8px),transparent calc(50% + .8px)),
    linear-gradient(to bottom right,transparent calc(50% - .8px),#ff4d4d calc(50% - .8px),#ff4d4d calc(50% + .8px),transparent calc(50% + .8px))}

/* Label BAR pada counter Lt.1 */
.c1counter{display:flex;align-items:center;justify-content:center}
.c1counter span{font-family:'Cinzel',serif;font-weight:900;letter-spacing:6px;font-size:21px;color:#1a1710}
.c2room b{font-size:40px}

/* BAR: bentuk sama di Lt.1 & Lt.2 */
.c2barbox{width:224px;height:50px;border-radius:6px}
.c1t-occ{cursor:default;pointer-events:none}
.glv-tbl.gt-occupied{pointer-events:none}


/* ═══════════════════════════════════════════════════════════
   NAVIGASI MINIMAL (gaya pacha.com) — teks polos, huruf kapital
   renggang, garis bawah tipis untuk menu aktif. Tanpa kotak/ikon.
   ═══════════════════════════════════════════════════════════ */
#hdr,#topNav,#navBackdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#hdr{height:52px;background:#050505;border-bottom:none}
.hTitle h2{font-weight:500;font-size:18px;letter-spacing:6px}
.hTitle p{display:none}
#topNav{top:52px;background:#050505;border-bottom:1px solid rgba(255,255,255,.06);padding:0 16px}
#topNavBtns{justify-content:space-evenly;gap:16px}
.topNavBtn,.topNavBtn.topNavLogout{
  position:relative;background:transparent!important;border:none!important;border-radius:0;
  padding:12px 0;font-weight:400;font-size:16px;letter-spacing:2.5px;color:var(--muted);
  transition:color .15s;
}
.topNavBtn:hover{background:transparent;color:#fff}
.topNavBtn::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--gold);
  transform:scaleX(0);transition:transform .15s;
}
.topNavBtn:hover::after{transform:scaleX(.4)}
.topNavBtn.active{color:#fff;background:transparent}
.topNavBtn.active::after{transform:scaleX(1)}
.topNavBtn.topNavLogout{color:var(--muted2)}
.topNavBtn.topNavLogout:hover{color:#ef9a9a}
@media(min-width:641px){
  #topNavBtns{gap:16px}
  .topNavBtn{padding:12px 0;font-size:16px;letter-spacing:2.5px;border-radius:0}
}
@media(min-width:769px) and (max-width:1100px){
  #topNavBtns{gap:14px;justify-content:space-evenly}
  .topNavBtn{letter-spacing:2px;font-size:14px}
}
@media(max-width:768px){
  #navToggle{border:none;width:44px;gap:6px}
  #navToggle span{width:22px;height:1px}
  #topNav{
    width:100%;left:0;right:0;border-left:none;background:#050505;box-shadow:none;
    transition:opacity .18s ease,visibility 0s linear .18s;
    transform:none;opacity:0;
  }
  body.navOpen #topNav{opacity:1;transition:opacity .18s ease,visibility 0s}
  #navBackdrop{display:none!important}
  .navDrawerHead{background:transparent;border-bottom:none;padding:calc(12px + env(safe-area-inset-top,0px)) 20px 8px}
  .navDrawerHead small{display:none}
  .navDrawerHead b{font-weight:500;font-size:18px;letter-spacing:6px}
  #navClose{border:none;font-size:35px;font-weight:200}
  #topNavBtns{align-items:center;gap:0;padding:6vh 0 28px}
  #topNavBtns .topNavBtn{
    width:auto;justify-content:center;padding:15px 20px;border:none!important;
    font-family:'Outfit','Cinzel',serif;font-size:22px;font-weight:300;letter-spacing:6px;
    opacity:1;transform:none;color:var(--text2);
  }
  body.navOpen #topNavBtns .topNavBtn{transition:color .15s;transition-delay:0s!important}
  #topNavBtns .topNavBtn svg{display:none}
  #topNavBtns .topNavBtn.active{color:#fff;box-shadow:none;background:transparent}
  #topNavBtns .topNavBtn::after{bottom:8px;left:20px;right:20px}
  #topNavBtns .topNavLogout{margin-top:8px;border-top:none;color:var(--muted);font-size:17px}
}

/* Respons: transisi lebih singkat di tombol & input */
.btnPrimary,.btnSecondary,.linput input{transition-duration:.12s}

/* Mobile: logo tampil di header; menu yang dibuka hanya berisi navigasi (tanpa nama/logo) */
.navDrawerLogo{display:none}
@media(max-width:768px){
  .hTitle{display:block!important}
  .navDrawerHead{justify-content:flex-end}
  .navDrawerHead > div{display:none}
  .navDrawerLogo{display:none!important}
}

/* ══════════════════════════════════════════════════════════
   DENAH KTV (Lt.1 / Lt.2 / Lt.3) — gaya sama dengan denah Club
   (hitam · champagne gold, meja metalik berpendar)
   ══════════════════════════════════════════════════════════ */
.ktvFloor{--gd1:#f6e3a1;--gd2:#d9b45a;--gd3:#9c7a2a;margin-bottom:34px}
.ktvFrame{position:relative;border-radius:18px;border:1px solid rgba(217,180,90,.55);padding:14px;
  background:radial-gradient(ellipse at 50% 0%,#17140c 0%,#070707 65%);
  box-shadow:0 0 0 4px #050505,0 0 0 5px rgba(217,180,90,.25),0 24px 60px rgba(0,0,0,.7),0 0 50px rgba(217,180,90,.07),inset 0 0 60px rgba(0,0,0,.85)}
.ktvBox{position:relative;width:100%;aspect-ratio:600/880;container-type:inline-size}
.ktvFloorBg{position:absolute;inset:0;border-radius:22px;border:1px solid rgba(217,180,90,.5);
  background:radial-gradient(ellipse at 50% 30%,rgba(217,180,90,.09),transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 14px),linear-gradient(180deg,#171717,#0c0c0c);
  box-shadow:inset 0 0 0 6px #0a0a0a,inset 0 0 0 7px rgba(217,180,90,.2),inset 0 0 70px rgba(0,0,0,.7)}
.ktvBox .c1vig{border-radius:22px}
.ktvLt{position:absolute;right:6cqw;top:3.4cqw;font-family:'Cinzel',serif;font-weight:600;letter-spacing:.9cqw;font-size:clamp(18px,6.4cqw,34px);
  background:linear-gradient(180deg,#fff3c4,#d9b45a 60%,#9c7a2a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(217,180,90,.45))}
.ktvPlanIn{position:absolute;left:6%;right:6%;top:12.5%;bottom:4.2%}

/* kamar — memakai .c1t (meja Club): free = logam berpendar, occ = gelap berbingkai */
.ktvRoom.c1t{width:auto;height:auto;font-size:inherit;flex-direction:column;gap:.5cqw;padding:1cqw;text-align:center;line-height:1.1;
  border-radius:1.8cqw;overflow:hidden;box-sizing:border-box}
.ktvRoom.c1t-free{color:var(--ink)}
.ktvRoom.c1t-occ{color:#f3e6c4}
.ktvRoom .ktvNo{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(15px,5.6cqw,36px);line-height:1}
.ktvRoom.c1t-occ .ktvNo{color:var(--c)}
.ktvRoom .ktvType{font-style:normal;font-family:'Raleway','Outfit',sans-serif;font-weight:700;font-size:clamp(8px,1.9cqw,11px);letter-spacing:.14em;text-transform:uppercase;opacity:.8;max-width:100%;overflow-wrap:anywhere}
.ktvRoom .ktvSt{font-family:'Raleway','Outfit',sans-serif;font-size:clamp(9px,2.2cqw,12px);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.ktvRoom.c1t-occ .ktvSt{color:#ef9a9a;opacity:1;font-weight:700}
.ktvRoom .ktvMc{font-family:'Raleway','Outfit',sans-serif;font-size:clamp(9px,2.3cqw,12px);font-weight:600;opacity:.85}
.ktvRoom .ktvGuest{font-family:'Raleway','Outfit',sans-serif;font-size:clamp(11px,3.3cqw,17px);font-weight:800;color:#f6e3a1;max-width:100%;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.ktvRoom .ktvMeta{font-size:clamp(10px,2.6cqw,13px);color:#ef9a9a}
.ktvRoom .ktvPaid{font-size:clamp(9px,2.3cqw,12px);color:#64b5f6;font-weight:700}
.ktvRoom .ktvDue{font-size:clamp(9px,2.3cqw,12px);color:#90caf9;font-weight:700}
.ktvRoom .ktvRem{font-size:clamp(8px,2cqw,11px);color:rgba(255,255,255,.5);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* admin: info terbaca penuh & kamar tetap bisa diklik (tanpa tanda silang) */
.ktvAdmin .ktvRoom.c1t-occ{pointer-events:auto;cursor:pointer}
.ktvAdmin .ktvRoom.c1t-occ::before{display:none}
.ktvAdmin .ktvRoom.c1t-occ b,.ktvAdmin .ktvRoom.c1t-occ small,.ktvAdmin .ktvRoom.c1t-occ em,.ktvAdmin .ktvRoom.c1t-occ>span{opacity:1}
.ktvAdmin .ktvRoom.c1t-occ .ktvType{opacity:.8}
.ktvAdmin .ktvRoom.c1t-occ::after{display:block !important;top:1.4cqw;right:1.4cqw;width:1.3cqw !important;height:1.3cqw !important}
.ktvRoom.c1t{cursor:pointer}
.ktvFloor .ktvRoom.c1t-occ::before{inset:1.2cqw}
.ktvRoom.ktvIn{border-color:#4caf50 !important;background:linear-gradient(160deg,#10260f,#050505) !important;box-shadow:0 0 12px rgba(76,175,80,.3),inset 0 0 12px rgba(0,0,0,.9) !important}
.ktvRoom.ktvIn .ktvNo{color:#a5d6a7}
.ktvRoom.ktvDim{opacity:.2;filter:grayscale(.7)}
.ktvRoom.compact{gap:.2cqw;padding:.6cqw}
.ktvRoom.compact .ktvNo{font-size:clamp(14px,5cqw,30px)}
.ktvRoom.compact .ktvRem{display:none}
.ktvRoom.compact.c1t-occ .ktvMc{display:none}

/* lift & sofa — bentuk (SVG) */
.ktvLift,.ktvSofa{position:absolute;pointer-events:none;filter:drop-shadow(0 0 8px rgba(217,180,90,.18))}
.ktvSofa{filter:drop-shadow(0 0 8px rgba(0,224,255,.18))}
.ktvLift svg,.ktvSofa svg{display:block;width:100%;height:100%;overflow:visible}

.ktvFloor .glv-legend{gap:18px;font-family:'Raleway','Outfit',sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:11px;color:rgba(246,227,161,.6)}
.ktvFloor .glv-legend-dot{border-radius:4px;width:14px;height:11px}
.ktvFloor .glv-legend-dot.lg-free{background:linear-gradient(160deg,#fff3c4,#d9b45a);box-shadow:0 0 8px rgba(217,180,90,.7)}
.ktvFloor .glv-legend-dot.lg-occ{background:#050505;border:1px solid #d9b45a}
.ktvFloor .glv-legend-dot.lg-in{background:#10260f;border:1px solid #4caf50}
.ktvFloor .c1lg-grid{grid-template-columns:1fr !important}
.ktvFloor .c1lg-sub{font-size:13px !important}
.ktvFloor .c1g-sub{font-size:14px}

/* tiga lantai berdampingan di layar lebar */
@media (min-width:1100px){
  #tableLayout .ktvFloor,#guestLayoutView .ktvFloor{display:inline-block;vertical-align:top;width:calc((100% - 72px)/3);margin-right:16px;box-sizing:border-box}
}

/* ===== AREA LEGEND: teks tidak terpotong saat MC terisi =====
   Swatch di kiri; nama + keterangan di kanan; MC pindah ke baris bawah teks. */
.c1lg{display:grid !important;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:5px;align-items:center}
.c1lg-sw{grid-column:1;grid-row:1 / span 2;align-self:center}
.c1lg-tx{grid-column:2;grid-row:1;min-width:0}
.c1lg-mc{grid-column:2;grid-row:2;white-space:normal;overflow-wrap:anywhere}
.c1lg-name{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;overflow-wrap:anywhere;line-height:1.25}
.c1lg-sub{overflow-wrap:anywhere}

/* ===== MODE TAMU — tampilan datar & sederhana =====
   Tanpa glow, gradasi metalik, vignette, berkas cahaya, ornamen, maupun animasi.
   Hanya warna solid, garis tipis 1px, dan satu jenis huruf. Dipasang paling akhir agar menimpa tema lama. */
#guestLayoutView .c1g{margin-bottom:36px}
#guestLayoutView .c1g-head{gap:0;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #2a2a2a}
#guestLayoutView .c1g-dot,#guestLayoutView .c1vig,#guestLayoutView .c1beam{display:none !important}
#guestLayoutView .c1g-ttl{font-family:'Outfit','Raleway',sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;color:#e6e2d6;text-transform:none}
#guestLayoutView .c1g-sub{font-family:'Outfit','Raleway',sans-serif;font-style:normal;font-size:13px;letter-spacing:0;color:#8a8a8a;flex:0 0 auto;margin-left:auto}
#guestLayoutView .c1g-sub::after{display:none}

#guestLayoutView .c1-wrap,#guestLayoutView .ktvFrame{border-radius:6px !important;border:1px solid #2e2e2e !important;background:#0e0e0e !important;box-shadow:none !important}
#guestLayoutView .c1floor,#guestLayoutView .ktvFloorBg{border:1px solid #4a4a4a !important;border-radius:6px !important;background:#161616 !important;box-shadow:none !important}
#guestLayoutView .c1stage{background:#1c1c1c !important;border:1px solid #6b6b6b !important;box-shadow:none !important}
#guestLayoutView .c1stage span{font-family:'Outfit','Raleway',sans-serif !important;font-weight:600 !important;font-size:16px !important;letter-spacing:.24em !important;
  background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;color:#bdbdbd !important;text-shadow:none !important}
#guestLayoutView .c1b{background:rgba(var(--rgb,255,255,255),.08) !important;border:1px solid rgba(var(--rgb,255,255,255),.45) !important;box-shadow:none !important;backdrop-filter:none}
#guestLayoutView .c1bar{background:rgba(255,95,207,.1) !important;border:1px solid rgba(255,95,207,.5) !important;box-shadow:none !important}
#guestLayoutView .c1counter{background:#cfcfcf !important;box-shadow:none !important}
#guestLayoutView .c1stool{background:#444 !important;border:1px solid #777 !important}
#guestLayoutView .c1stair{background:#555 !important}
#guestLayoutView .ktvLift,#guestLayoutView .ktvSofa{filter:none}

#guestLayoutView .c1t{font-family:'Outfit','Raleway',sans-serif;font-weight:700;border-radius:4px}
#guestLayoutView .c1t-free{background:var(--c) !important;border:0 !important;box-shadow:none !important}
#guestLayoutView .c1t-free span{text-shadow:none}
#guestLayoutView .c1t-occ{background:transparent !important;color:rgba(var(--rgb),.9) !important;border:1.5px solid rgba(var(--rgb),.8) !important;box-shadow:none !important}
#guestLayoutView .c1t-occ::after{box-shadow:none !important}
@media (hover:hover){#guestLayoutView .c1t:hover{transform:none;box-shadow:none !important;filter:brightness(1.15)}}
#guestLayoutView .c2room,#guestLayoutView .ktvRoom.c1t{border-radius:6px !important}
#guestLayoutView .c2room b,#guestLayoutView .ktvRoom .ktvNo{font-family:'Outfit','Raleway',sans-serif}

#guestLayoutView .c1lg{background:transparent !important;border:1px solid #2e2e2e !important;border-radius:6px !important}
#guestLayoutView .c1lg::before{display:none}
#guestLayoutView .c1lg-sw{width:18px !important;height:18px !important;border-radius:3px !important;background:var(--c) !important;box-shadow:none !important}
#guestLayoutView .c1lg-name{font-family:'Outfit','Raleway',sans-serif !important;font-weight:600 !important;font-size:13px !important;letter-spacing:.06em !important;color:#e6e2d6 !important}
#guestLayoutView .c1lg-sub{font-family:'Outfit','Raleway',sans-serif;font-style:normal;font-size:12.5px !important;color:#8a8a8a !important}
#guestLayoutView .c1lg-mc{font-family:'Outfit','Raleway',sans-serif;font-size:13px !important;letter-spacing:0;color:#cfcfcf !important}
#guestLayoutView .glv-legend,#guestLayoutView .glv-area-legend-title{font-family:'Outfit','Raleway',sans-serif}
#guestLayoutView .ktvFloor .glv-legend-dot.lg-free{background:#d9d9d9 !important;box-shadow:none !important}
#guestLayoutView .c1counter span,#guestLayoutView .c2barbox span{font-family:'Outfit','Raleway',sans-serif !important;font-weight:600;letter-spacing:.24em;text-shadow:none !important}
#guestLayoutView .glv-legend{color:#8a8a8a;letter-spacing:.04em}
#guestLayoutView .glv-legend-dot.lg-free{background:#d9d9d9 !important;border:0 !important;box-shadow:none !important}
#guestLayoutView .glv-legend-dot.lg-occ{background:transparent !important;border:1.5px solid #c9c9c9 !important;box-shadow:none !important}
#guestLayoutView .glv-area-legend-title{letter-spacing:.12em;color:#8a8a8a;font-size:12px}

/* Logo Hades VIP menggantikan tulisan di header */
.hTitle .hdrLogo{display:block;height:46px;width:auto;filter:drop-shadow(0 0 8px rgba(201,168,76,0.25))}

/* Alamat di dasar layar — khusus mode tamu. Dikunci di bawah layar, tidak ikut bergerak saat digulir. */
body.guestMode #content{padding-bottom:108px}
body.guestMode::after{
  content:"JL. Alternatif Cibubur No.39 Kel. Jati Sampurna, Kec. Jati Sampurna, Bekasi Kota \2013  Jawa Barat 17435" "\A" "\A9 " var(--cy,"2026") " Hades VIP \B7  All Rights Reserved";
  white-space:pre-line;
  position:fixed;left:0;right:0;bottom:0;
  padding:22px 16px calc(10px + env(safe-area-inset-bottom,0px));
  text-align:center;
  font-family:'Outfit','Raleway',sans-serif;font-size:12px;line-height:1.4;letter-spacing:.5px;
  color:rgba(255,255,255,.55);
  background:linear-gradient(to top,rgba(8,8,8,.92) 35%,rgba(8,8,8,0));
  pointer-events:none;z-index:400;
  /* lapisan sendiri: mencegah goyang/lompat di HP saat gulir & bar browser naik-turun */
  -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
  will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;
}

/* ══ Navigasi satu baris ala apple.com / pacha.com (desktop lebar) ══
   logo di kiri · menu tersebar merata di tengah · badge & jam di kanan.
   Di bawah 1366px tetap dua baris seperti sebelumnya. */
@media(min-width:1366px){
  #topNav{
    position:fixed;top:0;left:130px;right:300px;height:52px;z-index:101;
    display:flex;align-items:center;
    background:transparent;border-bottom:none;padding:0;
  }
  #topNavBtns{width:100%;min-width:0;justify-content:space-evenly;gap:10px}
  .topNavBtn,.topNavBtn.topNavLogout{
    height:52px;padding:0;
    font-size:clamp(13px,.8vw,16px);letter-spacing:.08em;
  }
  .topNavBtn::after{bottom:12px}
}

/* Ikon Kirim (share) — warnanya mengikuti warna teks tombol */
.icoKirim{
  display:inline-block;width:1.15em;height:1.15em;margin-right:7px;vertical-align:-0.2em;
  background-color:currentColor;
  -webkit-mask:url(icon-kirim.png) center/contain no-repeat;
  mask:url(icon-kirim.png) center/contain no-repeat;
}
.btnEvent{display:inline-flex;align-items:center;justify-content:center}
.btnEvent .icoKirim{vertical-align:middle}

/* Kolom cari table di Home: diperkecil agar tombol FDC / OTS / Event muat sejajar */
/* Desktop/tablet: kolom cari melebar mengisi sisa ruang (tombol tetap ukuran aslinya) */
#tableSearch{flex:1 1 280px;width:auto;min-width:240px;max-width:520px;padding:0 14px;font-size:15px}
/* Buku Telepon: kolom cari nama / nomor ikut melebar */
#pbSearch{flex:1 1 320px;width:auto;min-width:240px;max-width:560px}
/* Mobile: kolom cari satu baris penuh, kontrol lain turun di bawahnya */
@media(max-width:640px){
  #pbSearch{flex:1 1 100%;width:100%;min-width:0;max-width:none;font-size:16px}
}
/* Semua kontrol di baris Home (cari, tanggal, FDC, OTS, Bar, Event, Kirim) satu tinggi */
#view-home .ctrlBar > input,
#view-home .ctrlBar > button{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
#view-home .ctrlBar > input{display:block}
#view-home .ctrlBar > button{padding-left:16px;padding-right:16px}

/* Waiting List OTS (Home) */
.waitPanel{margin:0 0 16px;padding:10px 12px;background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.28);border-radius:8px}
.wlHdr{font-family:'Outfit','Cinzel',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
.wlCount{display:inline-block;margin-left:6px;padding:0 8px;border-radius:10px;background:rgba(201,168,76,0.2);color:var(--gold2)}
.wlRow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px solid rgba(255,255,255,0.06)}
.wlRow:first-of-type{border-top:none}
.wlInfo{font-size:15px;color:var(--text)}
.wlMeta{font-size:12px;color:var(--muted);margin-left:6px}
.wlAct{display:flex;gap:8px;align-items:center}
.wlBtn{padding:6px 14px;font-size:13px}
.wlPend{font-size:12px;color:var(--gold);font-style:italic}

/* ===== EVENT MENDATANG (MODE TAMU) — gaya kartu ala pacha.com ===== */
#guestEventsView{margin:6px 0 24px}
.gevHead{font-family:'Outfit','Raleway',sans-serif;font-size:clamp(26px,6vw,44px);font-weight:800;color:#fff;text-transform:uppercase;text-align:center;letter-spacing:-.5px;margin:6px 0 20px;line-height:1.05}
.gevRow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px calc(50% - min(78vw,360px)/2) 12px;align-items:stretch}
.gevRow::-webkit-scrollbar{display:none}
#guestEventsView{position:relative;isolation:isolate}
.gevCard{position:relative;overflow:hidden;flex:0 0 min(78vw,360px);scroll-snap-align:center;display:flex;flex-direction:column;padding:14px;border-radius:24px;transition:transform .35s,opacity .35s;transform:scale(.93);opacity:.7;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28);font-family:'Outfit','Raleway',sans-serif}
.gevCard>*:not(.gevGlass){position:relative;z-index:1}
/* Efek kaca: poster yang sama di-blur di belakang kartu */
.gevGlass{position:absolute;inset:-30px;z-index:0;background:radial-gradient(circle at 25% 15%,rgba(201,168,76,.45),transparent 65%),linear-gradient(160deg,#241a08,#0a0a0a);background-size:cover;background-position:center;filter:blur(34px) saturate(1.6);opacity:.75;pointer-events:none}
.gevCard::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(0,0,0,.25));pointer-events:none}
.gevBtn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gevMedia{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#111;margin-bottom:14px}
.gevPoster{width:100%;height:100%;object-fit:cover;display:block}
.gevPlain{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(201,168,76,.3),transparent 60%),linear-gradient(160deg,#1c1608,#0a0a0a);color:var(--gold)}
.gevPlain b{font-size:84px;line-height:1;font-weight:800}
.gevPlain span{font-size:18px;letter-spacing:6px;text-transform:uppercase}
.gevTag{position:absolute;top:0;left:0;background:#c0102a;color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:0 0 8px 0;letter-spacing:.5px}
.gevTag.soft{background:#7a1020}
.gevDate{font-size:16px;color:#a9a9b3;margin:0 4px 6px}
.gevName{font-size:17px;font-weight:700;text-transform:uppercase;color:#fff;line-height:1.25;margin:0 4px 8px}
.gevBand{font-size:13px;color:#b5b5be;line-height:1.55;margin:0 4px 6px}
.gevGrow{flex:1;min-height:14px}
.gevBtn{width:100%;padding:18px 12px;border-radius:40px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.35);color:#fff;font-family:'Outfit','Raleway',sans-serif;font-size:15px;font-weight:800;letter-spacing:-.2px;text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.15);transition:background .2s}
.gevBtn.on{background:#c0102a;border-color:#c0102a}
.gevSummary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.gevSumTtl{font-size:15px;font-weight:700;color:#fff;text-transform:uppercase}
.gevSumSub{font-size:13px;color:#a9a9b3;margin-top:2px}
.gevSumCnt{font-size:13px;color:#a9a9b3}
.gevSumCnt span{color:#fff;font-weight:800;font-size:16px}
.evThumb{width:36px;height:44px;object-fit:cover;border-radius:4px;border:1px solid rgba(201,168,76,0.3);flex-shrink:0}

.gevCard.act{transform:scale(1);opacity:1}

.gevPoster{display:none}
.gevMedia.has .gevPoster{display:block}
.gevMedia.has .gevPlain{display:none}

/* Bar event terpilih — poster tetap terlihat saat denah meja ditampilkan */
#guestSelEvent{position:sticky;top:0;z-index:30;align-items:center;gap:12px;margin:0 0 14px;padding:10px 12px;border-radius:16px;background:rgba(16,16,20,.74);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 24px rgba(0,0,0,.5);font-family:'Outfit','Raleway',sans-serif}
.gsePoster{position:relative;flex:0 0 64px;height:64px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(201,168,76,.3),transparent 60%),linear-gradient(160deg,#1c1608,#0a0a0a);color:var(--gold)}
.gsePoster b{font-size:24px;line-height:1;font-weight:800}
.gsePoster span{font-size:10px;letter-spacing:2px;text-transform:uppercase}
.gsePoster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.gsePoster.has img{display:block}
.gsePoster.has b,.gsePoster.has span{display:none}
.gseInfo{flex:1;min-width:0}
.gseName{font-size:14px;font-weight:700;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gseSub{font-size:12px;color:#a9a9b3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gseCnt{flex-shrink:0;text-align:right;font-size:12px;color:#a9a9b3;line-height:1.5}
.gseCnt span{color:#fff;font-weight:800;font-size:15px}
.gseCnt{display:flex;flex-direction:column;gap:4px;line-height:1.3}
.gseRow{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:end;column-gap:12px;white-space:nowrap}
.gseRow em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#c9a84c;text-align:left;min-width:34px}
.gseRow div{text-align:right}
@media (max-width:520px){
  .gseRow{column-gap:8px}
  .gseCnt{font-size:11px}
  .gseCnt span{font-size:14px}
}

/* ═══════════════ TATA LETAK MODE TAMU ═══════════════
   urutan: bar atas (logo · logout) → Event Mendatang → pilih tanggal → bar event terpilih → denah → alamat */
body.guestMode{background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(201,168,76,.13),transparent 70%),var(--bg) no-repeat}
body.guestMode #content{max-width:1280px;padding:0 18px 96px}
body.guestMode #view-home{padding-top:6px}
body.guestMode .homeTop{display:none!important}            /* nama event sudah ada di kartu */

/* bar atas */
body.guestMode .guestBanner{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;padding:14px 2px;margin:0 0 22px;flex-wrap:nowrap}
.gbBrand{display:flex;align-items:center;gap:12px;min-width:0}
.gbLogo{height:40px;width:auto;display:block;filter:drop-shadow(0 0 8px rgba(201,168,76,.25))}
.gbTag{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);padding:5px 10px;border:1px solid rgba(201,168,76,.35);border-radius:20px}
.gbOut{flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#ddd;padding:9px 18px;border-radius:30px;font-family:'Outfit','Raleway',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.15);position:relative;z-index:51}

/* Event mendatang: beri napas */
body.guestMode #guestEventsView{margin:0 0 20px}
body.guestMode .gevHead{margin:4px 0 18px}

/* pilih tanggal lain */
body.guestMode .ctrlBar{justify-content:space-between;gap:12px;margin:0 0 18px;padding:10px 14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04)}
body.guestMode .ctrlBar::before{content:"Cek meja di tanggal lain";font-family:'Outfit','Raleway',sans-serif;font-size:13px;color:#a9a9b3;letter-spacing:.3px}
body.guestMode .ctrlBar #calPicker{margin:0}

/* denah */
body.guestMode #guestLayoutView{padding:6px 0 10px}
body.guestMode #guestSelEvent{margin-bottom:18px}

@media (max-width:600px){
  body.guestMode #content{padding:0 12px 96px}
  .gbLogo{height:34px}
  .gbTag{display:none}
  body.guestMode .ctrlBar{flex-wrap:nowrap}
  body.guestMode .ctrlBar::before{font-size:12px}
}
@media (min-width:900px){
  body.guestMode .gevCard{flex-basis:380px}
  body.guestMode .gevRow{padding-left:calc(50% - 190px);padding-right:calc(50% - 190px)}
}

/* Home: kolom Cari table dilebarkan; tanggal & tombol (FDC, OTS, Bar, Event, Kirim) diperkecil */
body:not(.guestMode) #view-home .ctrlBar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px
}
body:not(.guestMode) #view-home .ctrlBar > #tableSearch{
  flex:1 1 320px;width:auto;min-width:200px;max-width:none;
  height:38px;padding:0 14px;font-size:14px
}
body:not(.guestMode) #view-home .ctrlBar > #calPicker{
  flex:0 0 auto;width:auto;min-width:0;height:38px;padding:0 8px;font-size:13px
}
body:not(.guestMode) #view-home .ctrlBar > button{
  flex:0 0 auto;width:auto;min-width:0;height:38px;
  padding-left:12px;padding-right:12px;font-size:12px;letter-spacing:.5px
}
body:not(.guestMode) #view-home .ctrlBar > button .icoKirim{margin-right:5px}
@media(max-width:640px){
  /* Mobile: cari = 1 baris penuh; tanggal + tombol di bawahnya, rata & tidak terpotong */
  body:not(.guestMode) #view-home .ctrlBar{gap:6px}
  body:not(.guestMode) #view-home .ctrlBar > #tableSearch{
    flex:1 1 100%;width:100%;max-width:100%;font-size:16px /* cegah zoom otomatis iOS */
  }
  body:not(.guestMode) #view-home .ctrlBar > #calPicker{
    flex:1 1 128px;min-width:0;max-width:100%;font-size:13px
  }
  body:not(.guestMode) #view-home .ctrlBar > button{
    flex:1 1 auto;min-width:0;max-width:100%;
    padding-left:8px;padding-right:8px;font-size:11.5px;letter-spacing:.3px
  }
}

/* Pengaturan Event: kartu daftar event — teks tidak terpotong, tombol rata di baris bawah */
#evMod .modal{max-width:520px !important}
#evList{max-height:300px !important;gap:10px !important;padding-right:2px}
.evRow{background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.18);border-radius:8px;padding:12px}
.evRowTop{display:flex;align-items:flex-start;gap:12px}
.evRowTop .evThumb{width:46px;height:58px;border-radius:5px}
.evRowInfo{flex:1;min-width:0}
.evRowDate{font-size:12px;color:var(--gold);letter-spacing:.8px;text-transform:uppercase;font-weight:600;margin-bottom:3px}
.evRowName{font-size:15px;line-height:1.4;color:var(--text);font-weight:600;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.evRowBand{font-size:13px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.evRowBtns{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;margin-top:11px}
.evRowBtns .btn{font-size:12px;padding:8px 6px;justify-content:center;white-space:nowrap;min-width:0}
#evMod #evImgIn,#evMod #evImgExisting{width:100%;box-sizing:border-box;padding:8px;font-size:13px;color:var(--muted)}
#evMod input[type=file]::file-selector-button{margin-right:12px;padding:7px 14px;border-radius:6px;border:1px solid rgba(201,168,76,0.4);background:rgba(201,168,76,0.12);color:var(--gold);font-family:'Outfit','Raleway',sans-serif;font-weight:600;font-size:12px;letter-spacing:.8px;text-transform:uppercase;cursor:pointer}
#evMod .finp > div[style*="font-size:12px"]{line-height:1.5}
@media(max-width:420px){
  .evRowBtns{grid-template-columns:1fr 1fr}
  .evRowBtns .btn:nth-child(2){grid-column:span 2;order:3}
}

/* ── Alur tamu: pilih event dulu → baru denah meja ── */
body.guestMode.gStageEvents #guestSelEvent,
body.guestMode.gStageEvents #guestLayoutView,
body.guestMode.gStageEvents #guestBackBtn,
body.guestMode.gStageEvents .ctrlBar,
body.guestMode.gStageEvents #waitPanel{display:none!important}
body.guestMode.gStageLayout #guestEventsView{display:none!important}
body.guestMode.gHasEv .ctrlBar{display:none!important}   /* tanggal mengikuti event yang dipilih */
.gBack{display:none;align-items:center;gap:6px;margin:0 0 14px;padding:10px 18px;border:1px solid rgba(201,168,76,.45);border-radius:999px;background:rgba(201,168,76,.08);color:#e8c25e;font-family:'Outfit','Raleway',sans-serif;font-size:13px;font-weight:600;letter-spacing:.4px;cursor:pointer}
.gBack:active{transform:scale(.97)}
body.guestMode .gBack{display:inline-flex}

/* Link "hari biasa / tanpa event" di layar pilih event tamu */
.gevPlain2{position:relative;text-align:center;margin:18px 0 0}
.gp2Link{background:none;border:0;padding:10px 14px;color:#a9a9b3;font-family:'Outfit','Raleway',sans-serif;font-size:13px;cursor:pointer}
.gp2Link u{color:#e8c25e;text-underline-offset:3px}

/* ── Gerak halus alur tamu (hanya fade + naik pelan, satu kurva easing) ── */
@keyframes gRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gFade{from{opacity:0}to{opacity:1}}
body.guestMode{--g-ease:cubic-bezier(.22,.68,.2,1)}

/* Layar pilih event: judul → kartu → tautan masuk berurutan */
body.guestMode.gStageEvents .gevHead{animation:gRise .6s var(--g-ease) both}
body.guestMode.gStageEvents .gevRow{animation:gRise .7s var(--g-ease) .12s both}
body.guestMode.gStageEvents .gevPlain2{animation:gFade .6s ease .45s both}

/* Poster "mengendap" pelan saat kartu berada di tengah */
.gevCard .gevPoster{transform:scale(1.07);transition:transform 1.4s var(--g-ease,ease)}
.gevCard.act .gevPoster{transform:scale(1)}

/* Tombol & tautan: respons sentuhan yang kalem */
.gevBtn{transition:background-color .25s ease,border-color .25s ease,transform .15s ease}
.gevBtn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.gevBtn:active{transform:scale(.985)}
.gp2Link{transition:color .25s ease}
.gp2Link:hover{color:#fff}
.gBack{transition:background-color .25s ease,transform .15s ease}
.gBack:hover{background:rgba(201,168,76,.16)}

/* Layar denah: tombol kembali → bar event → denah muncul berurutan */
body.guestMode.gStageLayout #guestBackBtn{animation:gFade .4s ease both}
body.guestMode.gStageLayout #guestSelEvent{animation:gRise .5s var(--g-ease) .06s both}
body.guestMode.gStageLayout #guestLayoutView{animation:gRise .6s var(--g-ease) .16s both}

@media (prefers-reduced-motion:reduce){
  body.guestMode .gevHead,body.guestMode .gevRow,body.guestMode .gevPlain2,
  body.guestMode #guestBackBtn,body.guestMode #guestSelEvent,body.guestMode #guestLayoutView{animation:none!important}
  .gevCard .gevPoster{transition:none;transform:none}
}

/* ── Kalender pilih tanggal (tamu) ── */
.gcalOv{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.gcalOv.on{opacity:1;visibility:visible;transition:opacity .28s ease}
.gcalSheet{width:min(100%,360px);padding:18px 16px 14px;border-radius:22px;background:#121212;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.55);transform:translateY(18px);transition:transform .38s cubic-bezier(.22,.68,.2,1);font-family:'Outfit','Raleway',sans-serif;color:#fff}
.gcalOv.on .gcalSheet{transform:none}
.gcalTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.gcalTtl{font-size:17px;font-weight:700;letter-spacing:.2px}
.gcalTtl span{color:#a9a9b3;font-weight:500;margin-left:4px}
.gcalNav{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background-color .2s ease,opacity .2s ease}
.gcalNav:hover:not(:disabled){background:rgba(255,255,255,.08)}
.gcalNav:disabled{opacity:.25;cursor:default}
.gcalWk,.gcalGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.gcalWk{margin-bottom:6px}
.gcalWk span{text-align:center;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#7d7d88;padding:4px 0}
.gcalCell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:none;color:#fff;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .12s ease}
button.gcalCell:hover{background:rgba(255,255,255,.1)}
button.gcalCell:active{transform:scale(.92)}
.gcalVoid{pointer-events:none}
.gcalOff{color:#4a4a52;cursor:default}
.gcalToday{box-shadow:inset 0 0 0 1px #e8c25e;color:#e8c25e;font-weight:700}
.gcalEv::after{content:'';position:absolute;bottom:15%;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#e8c25e}
.gcalFoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.gcalKey{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#a9a9b3}
.gcalKey i{width:5px;height:5px;border-radius:50%;background:#e8c25e}
.gcalNow{background:none;border:0;padding:8px 4px;color:#e8c25e;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:560px){
  .gcalOv{align-items:flex-end;padding:0}
  .gcalSheet{width:100%;border-radius:22px 22px 0 0;border-bottom:0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(100%)}
}
@media (prefers-reduced-motion:reduce){ .gcalOv,.gcalSheet{transition:none} }

/* ═══════════════════════════════════════════════════════════
   TEMA APLIKASI (Home & tab lain) — sama dengan halaman login:
   latar gradasi emas statis (video loop hanya di halaman login), panel kaca, input garis putus-putus,
   tombol pil emas.
   ═══════════════════════════════════════════════════════════ */
.appBg{position:fixed;inset:0;z-index:0}
.appBg{background:radial-gradient(ellipse at 28% 38%,#4a3508 0%,#1a1204 55%,#080808 100%)}
.appBg::after{background:rgba(8,7,4,0.86)}
#app{position:relative;z-index:1}
#hdr{background:rgba(8,7,4,0.72);border-bottom:1px solid rgba(201,168,76,0.22)}
@media(min-width:641px){
  #topNav{background:rgba(8,7,4,0.6);border-bottom:1px solid rgba(201,168,76,0.18)}
}
.statCard{
  background:rgba(10,8,3,0.5);border:1px solid rgba(201,168,76,0.3);border-radius:18px;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
}
.srchInp,.dateInp{
  background:transparent;border:0;border-bottom:1px dashed rgba(201,168,76,0.55);border-radius:0;
  padding:10px 4px;
}
.srchInp:focus,.dateInp:focus{border-bottom:1px solid var(--gold2)}
.btn,.btnFDC,.btnEvent{border-radius:999px}
.btnGold{background:linear-gradient(135deg,#8b6914,var(--gold) 45%,var(--gold2))}
.tbox{border-radius:12px}
.modal{
  background:rgba(10,8,3,0.82);border:1px solid rgba(201,168,76,0.3);border-radius:20px;
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
}
.finp input,.finp select,.finp textarea{
  background:transparent;border:0;border-bottom:1px dashed rgba(201,168,76,0.55);border-radius:0;
}
.finp input:focus,.finp select:focus,.finp textarea:focus{border-bottom:1px solid var(--gold2);background:transparent}


/* ═══════════════════════════════════════════════════════════
   DASHBOARD — halaman dalam: sidebar ikon melayang (desktop ≥1024px),
   judul besar + subjudul, kartu gelap membulat, kartu KPI berpita warna.
   Di bawah 1024px tetap memakai menu atas / drawer yang sudah ada.
   ═══════════════════════════════════════════════════════════ */
:root{--card:#181817;--card2:#0f0f0e;--cardline:rgba(255,255,255,.06)}
body{background:#0a0a09}
.hdrHead{display:none}

/* — kartu umum (semua lebar layar) — */
.ctrlBar,.filterBar{
  background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:14px 18px;
}
.tblWrap{background:var(--card);border:1px solid var(--cardline);border-radius:16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.srchInp,.dateInp,.filterBar input,.filterBar select{
  background:var(--card2);border:1px solid rgba(201,168,76,.28);border-radius:8px;padding:10px 12px;color:var(--text);
}
.srchInp:focus,.dateInp:focus,.filterBar input:focus,.filterBar select:focus{border-color:var(--gold2);outline:none}

/* — kartu KPI — */
.statCard{
  position:relative;display:flex;flex-direction:column-reverse;gap:6px;text-align:left;
  background:var(--card);border:1px solid var(--cardline);border-top:4px solid var(--kc,var(--gold));border-radius:16px;
  padding:16px 84px 16px 20px;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.statCard.k1{--kc:#c9a84c}.statCard.k2{--kc:#5fd0a0}.statCard.k3{--kc:#e0904f}.statCard.k4{--kc:#e8dcc8}
.statCard .sv{font-size:34px;font-weight:600;color:#fbf3e0}
.statCard .sl{margin-top:0;font-size:13px;letter-spacing:.4px;text-transform:none;font-weight:500;color:var(--text2)}
.statCard .sico{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;background:var(--card2);border:1px solid var(--cardline);color:var(--kc,var(--gold));
}
.statCard .sico svg{width:23px;height:23px}

/* — SIDEBAR + header judul (desktop) — */
@media(min-width:1024px){
  #hdr{
    position:relative;height:auto;margin-left:104px;padding:30px 32px 8px;
    background:transparent;border:0;align-items:center;
  }
  #hdr .hTitle{display:none!important}
  .hdrHead{display:block}
  .hdrHead h1{font-family:'Outfit','Raleway',sans-serif;font-size:36px;font-weight:700;line-height:1.1;color:#fbf3e0;letter-spacing:0}
  .hdrHead p{font-size:17px;font-weight:300;color:var(--text2);margin-top:4px}
  #content{margin:0 auto 0 104px;width:calc(100% - 104px);max-width:1720px;padding:10px 32px 32px}
  .appFoot{margin-left:104px}

  #topNav{
    position:fixed;top:16px;bottom:16px;left:16px;right:auto;width:72px;height:auto;z-index:300;
    display:flex;flex-direction:column;align-items:center;padding:14px 0 16px;overflow:visible;
    background:#121211;border:1px solid rgba(201,168,76,.16);border-radius:22px;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
  }
  .navDrawerHead{display:flex;justify-content:center;width:100%;padding:0 0 14px;margin-bottom:8px;border-bottom:1px solid var(--cardline);background:transparent}
  .navDrawerHead>div,#navClose{display:none}
  .navDrawerLogo{display:block!important;width:42px;height:42px;object-fit:contain}
  #topNavBtns{width:100%;min-width:0;flex:1;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:4px 0 0}
  #topNav .topNavBtn,#topNav .topNavBtn.topNavLogout{
    position:relative;width:48px;height:48px;padding:0;border-radius:14px;justify-content:center;
    font-size:0;line-height:0;letter-spacing:0;color:#8d8676;transition:background .15s,color .15s;
  }
  #topNav .topNavBtn svg{display:block;width:22px;height:22px}
  #topNav .topNavBtn:hover{background:rgba(201,168,76,.1)!important;color:var(--gold2)}
  #topNav .topNavBtn.active{background:#000!important;color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(201,168,76,.4)}
  #topNav .topNavBtn.topNavLogout{margin-top:auto}
  #topNav .topNavBtn.topNavLogout:hover{background:rgba(192,57,43,.18)!important;color:#ef9a9a}
  #topNav .pmBadgeCount{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    font-size:10px;line-height:17px;text-align:center;color:#fff}
  /* tooltip nama menu */
  #topNav .topNavBtn::after,#topNav .topNavBtn.active::after,#topNav .topNavBtn:hover::after{
    content:attr(title);position:absolute;left:calc(100% + 14px);top:50%;right:auto;bottom:auto;height:auto;
    transform:translate(-4px,-50%);opacity:0;pointer-events:none;white-space:nowrap;
    background:#1d1c1a;color:#f3e8cf;font-size:13px;line-height:1.2;letter-spacing:.3px;padding:7px 11px;border-radius:8px;
    border:1px solid rgba(201,168,76,.28);transition:opacity .12s,transform .12s;
  }
  #topNav .topNavBtn:hover::after{opacity:1;transform:translate(0,-50%)}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){#topNav .topNavBtn::after{transition:none}}

/* KPI di layar kecil: 2 kolom, ikon kecil di pojok */
@media(max-width:640px){
  .statsBar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .statCard{min-width:0;padding:14px 14px 14px 16px}
  .statCard .sv{font-size:28px}
  .statCard .sl{font-size:12.5px}
  .statCard .sico{width:34px;height:34px;top:12px;right:12px;transform:none;border-radius:10px}
  .statCard .sico svg{width:18px;height:18px}
}
#topNav .topNavBtn::after{text-transform:none}

/* ═══ Login: insight media sosial (angka diisi admin) ═══ */
.lleft{position:absolute;z-index:2;left:clamp(28px,4vw,60px);bottom:clamp(28px,5.5vh,56px);
  display:flex;flex-direction:column;gap:clamp(18px,3vh,30px);max-width:min(52vw,640px)}
.lleft .ltag{position:static;left:auto;bottom:auto}
.lsoc{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.lsoc[hidden]{display:none}
.lsocItem{display:flex;align-items:flex-start;gap:12px;padding:12px 16px 12px 14px;min-width:150px;
  background:rgba(14,12,6,.6);border:1px solid rgba(201,168,76,.28);border-radius:14px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--gold2);
  transition:border-color .15s,background .15s}
.lsocItem:hover{border-color:var(--gold2);background:rgba(201,168,76,.12)}
.lsocIco{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.22)}
.lsocIco svg{width:19px;height:19px}
.lsocTxt{display:flex;flex-direction:column;line-height:1.25}
.lsocNum{font-family:'Outfit','Raleway',sans-serif;font-size:24px;font-weight:700;color:#fbf3e0;line-height:1.05;white-space:nowrap}
.lsocLab{font-size:12.5px;color:var(--text2);margin-top:2px}
.lsocSub{font-size:11.5px;color:rgba(232,220,200,.62);margin-top:3px}
.lsocNote{flex-basis:100%;font-size:11.5px;color:rgba(232,220,200,.6);letter-spacing:.2px}

@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lleft{position:relative;left:auto;right:auto;bottom:auto;top:auto;margin-top:auto;max-width:none;
    padding:0 max(24px,calc((100% - 480px)/2));z-index:3}
  .lpanel{margin-top:0;padding-top:18px}
  .lsoc{flex-wrap:nowrap;gap:8px}
  .lsocItem{flex:1 1 0;min-width:0;padding:9px 10px;gap:8px;align-items:center}
  .lsocIco{width:28px;height:28px;border-radius:8px}
  .lsocIco svg{width:16px;height:16px}
  .lsocNum{font-size:17px}
  .lsocLab,.lsocSub{display:none}
  .lsocNote{display:none}
}

/* ═══ Login: perbaikan layar sangat sempit & HP landscape ═══ */
@media(max-width:360px){
  .lsoc{gap:6px}
  .lsocItem{padding:8px 8px;gap:6px}
  .lsocIco{width:24px;height:24px;border-radius:7px}
  .lsocIco svg{width:14px;height:14px}
  .lsocNum{font-size:15px}
}
@media(max-height:480px) and (min-width:761px){
  .lpanel{padding-top:12px;padding-bottom:12px}
  .lhead{margin-bottom:8px}
  .lhead h2{font-size:32px}
  .llabel{margin-bottom:6px;font-size:13px}
  .lfield{margin-bottom:8px}
  .lfield input,#loginPage .btnPrimary{height:40px}
  #loginPage .btnPrimary{margin-top:4px;font-size:15px}
  .lsep{margin:10px 0 8px}
  .lalt{margin-bottom:6px}
  #loginPage .btnSecondary,.lrow a{height:38px}
  .lrow{grid-template-columns:1fr 44px 44px 44px}
  .lnote{margin-top:8px}
  .lcopy{display:none}
  .lbrandSide{top:14px}
  .lbrandSide img{max-height:72px}
  .lleft{bottom:16px;gap:12px}
  .ltag{font-size:22px}
  .lsoc{gap:8px}
  .lsocItem{padding:7px 12px;min-width:0}
  .lsocNum{font-size:18px}
  .lsocLab,.lsocSub{display:none}
}

/* ═══ Mode tamu — desktop: tanpa sidebar, isi dipusatkan di tengah layar ═══
   Aturan dashboard (≥1024px) menyisakan 104px di kiri untuk sidebar. Di mode tamu sidebar
   disembunyikan, jadi ruang itu dibuang agar isi sejajar dengan alamat di dasar layar. */
@media(min-width:1024px){
  body.guestMode #content{margin:0 auto;width:100%;max-width:1280px;padding:0 32px 96px}
  body.guestMode .appFoot{margin-left:0}
  body.guestMode .guestBanner{padding:18px 2px;margin-bottom:28px}
  body.guestMode .gbLogo{height:48px}
}

/* ═══ Kartu meja — mengikuti tema dashboard (kartu gelap membulat + aksen warna zona di atas) ═══
   Warna zona dikirim dari app.js lewat --zc (hex) dan --zrgb (r,g,b). */
.tbox{
  --zc:var(--gold);--zrgb:201,168,76;
  width:136px;min-height:112px;padding:14px 10px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--zrgb),.06) 0%,rgba(255,255,255,.015) 100%),var(--card);
  border:1px solid rgba(var(--zrgb),.26);border-top:3px solid rgba(var(--zrgb),.6);
  box-shadow:0 6px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.tbox:hover{
  transform:translateY(-3px);filter:none;
  border-color:rgba(var(--zrgb),.6);border-top-color:var(--zc);
  box-shadow:0 12px 26px rgba(0,0,0,.42),0 0 0 1px rgba(var(--zrgb),.18),0 0 22px rgba(var(--zrgb),.16);
}
.tbox.empty{background:linear-gradient(180deg,rgba(var(--zrgb),.05) 0%,rgba(255,255,255,.012) 100%),var(--card);border-color:rgba(var(--zrgb),.26)}
.tbox.empty .tn{font-weight:600}
.tbox.occupied{
  background:linear-gradient(180deg,rgba(var(--zrgb),.2) 0%,rgba(var(--zrgb),.08) 100%),var(--card);
  border-color:rgba(var(--zrgb),.7);border-top-color:var(--zc);
  box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 18px rgba(var(--zrgb),.12);
}
.tbox .tavail{display:inline-block;margin-top:6px;padding:3px 12px;border-radius:999px;font-size:12.5px;letter-spacing:.4px;
  background:rgba(var(--zrgb),.1);border:1px solid rgba(var(--zrgb),.22)}
@media(max-width:640px){
  .tbox{width:calc(33.333% - 7px);min-height:100px;padding:12px 6px 10px;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){.tbox,.tbox:hover{transition:none;transform:none}}

/* ═══ PEMILIH METODE PEMBAYARAN (kartu pilihan) ═══ */
.payNative{display:none!important}
.payPicker{display:flex;flex-direction:column;gap:12px;margin-top:6px;width:100%}
.payGroupLbl{font-family:'Outfit','Cinzel',serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:7px;opacity:.9}
.payGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.payTile{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:68px;padding:10px 6px;cursor:pointer;
  background:var(--card2,#0f0f0e);color:var(--text2);
  border:1px solid rgba(201,168,76,.22);border-radius:12px;
  font-family:'Outfit','Raleway',sans-serif;font-size:13px;font-weight:600;letter-spacing:.3px;
  transition:border-color .15s,background .15s,box-shadow .15s,transform .1s,color .15s;
}
.payTile:hover{border-color:rgba(240,208,128,.6);color:var(--text);background:rgba(201,168,76,.06)}
.payTile:active{transform:scale(.97)}
.payTile:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.payIco{display:flex;align-items:center;justify-content:center;height:24px;color:var(--gold)}
.payIco svg{width:26px;height:24px;display:block}
.payWord{font-family:'Outfit',sans-serif;font-weight:900;font-style:italic;font-size:17px;letter-spacing:1px;color:var(--gold2)}
.payTile.on{
  color:#1a1405;border-color:var(--gold2);
  background:linear-gradient(135deg,var(--gold3,#8b6914) -20%,var(--gold) 40%,var(--gold2) 120%);
  box-shadow:0 0 0 1px rgba(240,208,128,.35),0 6px 18px rgba(201,168,76,.28);
}
.payTile.on .payIco,.payTile.on .payWord{color:#1a1405}
.payTile.on::after{
  content:'✓';position:absolute;top:5px;right:7px;font-size:11px;font-weight:900;color:#1a1405;
}


/* ═══════════════════════════════════════════════════════════
   NAVIGASI MOBILE (≤768px) — mengikuti tema dashboard desktop
   Sidebar ikon melayang di kiri (desktop)  →  dock ikon melayang di bawah (mobile),
   jangkauan ibu jari. Menu lengkap = bottom-sheet kartu gelap dengan kotak ikon.
   Warna/radius/bayangan sama dengan sidebar: #121211 · garis emas · radius 22px,
   menu aktif = kotak hitam + cincin emas.
   ═══════════════════════════════════════════════════════════ */
#mobDock{display:none}
@media(max-width:768px){
  /* hamburger di header diganti tombol "Menu" pada dock */
  #hdr #navToggle{display:none!important}
  #hdr{padding:0 14px}
  #hdr .ml-auto{margin-left:auto}

  /* ── DOCK BAWAH ── */
  #mobDock{
    display:flex;align-items:stretch;gap:4px;
    position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
    height:66px;padding:6px;z-index:300;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    background:#121211;border:1px solid rgba(201,168,76,.16);border-radius:22px;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
  }
  #mobDock::-webkit-scrollbar{display:none}
  .mobTab{
    position:relative;flex:1 0 62px;min-width:62px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:0;border:0;border-radius:16px;background:transparent;color:#8d8676;cursor:pointer;
    font-family:'Outfit','Raleway',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.3px;line-height:1;
    -webkit-tap-highlight-color:transparent;transition:background .15s,color .15s;
  }
  .mobTab{flex:1 1 0;min-width:52px}   /* 5 ikon: lebar dibagi rata mengikuti layar */
  .mobTab svg{width:22px;height:22px;display:block}
  .mobTab:active{background:rgba(201,168,76,.1)}
  .mobTab.active{background:#000;color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(201,168,76,.4)}
  .mobTab.hasPend::after{
    content:"";position:absolute;top:8px;right:calc(50% - 20px);width:9px;height:9px;
    border-radius:50%;background:var(--red2);border:1.5px solid #121211;
  }
  body.navOpen #mobMenuBtn{background:#000;color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(201,168,76,.4)}

  /* Layar sempit: dock hanya berisi tombol "Menu" (diatur js/pages.js → fitDock) — tidak ada tab yang terpotong */
  #mobDock.menuOnly{
    left:50%;right:auto;transform:translateX(-50%);width:auto;overflow:hidden;
  }
  #mobDock.menuOnly .mobTab[data-view]{display:none!important}
  #mobDock.menuOnly #mobMenuBtn{
    flex:0 0 auto;min-width:112px;flex-direction:row;gap:10px;padding:0 22px;font-size:13px;
  }
  #mobDock.menuOnly #mobMenuBtn{background:#000;color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(201,168,76,.4)}
  #mobDock.menuOnly #mobMenuBtn svg{width:20px;height:20px}
  #mobDock.menuOnly #mobMenuBtn.hasPend::after{top:10px;right:14px}

  /* ruang agar isi halaman, footer, dan toast tidak tertutup dock */
  #app{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .notif-toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}
  body.guestMode #mobDock{display:none!important}
  body.guestMode #app{padding-bottom:0}

  /* ── MENU LENGKAP = BOTTOM SHEET ── */
  #navBackdrop{
    display:block!important;position:fixed;inset:0;z-index:9400;
    background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .25s;
  }
  body.navOpen #navBackdrop{opacity:1;pointer-events:auto}
  body #topNav{
    position:fixed;top:auto;left:10px;right:10px;width:auto;
    bottom:calc(86px + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - 150px - env(safe-area-inset-bottom,0px));
    padding:0 14px 14px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    background:#121211;border:1px solid rgba(201,168,76,.16);border-radius:22px;
    box-shadow:0 10px 40px rgba(0,0,0,.55);
    z-index:9500;
    transform:translateY(18px) scale(.98);opacity:0;visibility:hidden;
    transition:transform .24s cubic-bezier(.22,.8,.3,1),opacity .2s ease,visibility 0s linear .24s;
  }
  body.navOpen #topNav{
    transform:none;opacity:1;visibility:visible;
    transition:transform .24s cubic-bezier(.22,.8,.3,1),opacity .2s ease,visibility 0s;
  }
  body.navOpen{overflow:hidden}

  /* kepala sheet: logo + judul di kiri, tombol tutup di kanan */
  body #topNav .navDrawerHead{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:1;
    padding:14px 0 12px;margin:0;background:#121211;border-bottom:1px solid var(--cardline);
  }
  body #topNav .navDrawerHead > div{display:block}
  body #topNav .navDrawerHead .navDrawerLogo{display:block!important;width:36px;height:36px;object-fit:contain}
  body #topNav .navDrawerHead > div{flex:1}
  body #topNav .navDrawerHead b{display:block;font-size:15px;font-weight:600;letter-spacing:4px;color:var(--gold)}
  body #topNav .navDrawerHead small{display:block;margin-top:3px;font-size:11px;letter-spacing:3px;color:var(--muted)}
  body #topNav #navClose{
    display:grid;place-items:center;width:36px;height:36px;border-radius:12px;
    font-size:24px;font-weight:300;line-height:1;color:var(--gold);
    background:var(--card2);border:1px solid var(--cardline);
  }

  /* kotak menu 3 kolom (ikon di atas, nama di bawah) */
  body #topNav #topNavBtns{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
    width:100%;min-width:0;align-items:stretch;justify-content:stretch;padding:14px 0 0;
  }
  body #topNav #topNavBtns .topNavBtn{
    position:relative;width:auto;min-height:80px;margin:0;padding:14px 6px 12px;
    flex-direction:column;justify-content:center;gap:8px;
    background:var(--card2)!important;border:1px solid var(--cardline)!important;border-radius:14px;
    color:#b9b09c;text-align:center;white-space:normal;
    font-family:'Outfit','Raleway',sans-serif;font-size:12.5px;font-weight:500;line-height:1.2;
    letter-spacing:.2px;text-transform:none;
    opacity:1;transform:none;box-shadow:none;transition:background .15s,color .15s,box-shadow .15s;
  }
  body #topNav #topNavBtns .topNavBtn::after{display:none!important}
  body #topNav #topNavBtns .topNavBtn svg{display:block;width:24px;height:24px;opacity:1;color:var(--gold)}
  body #topNav #topNavBtns .topNavBtn:active{background:rgba(201,168,76,.12)!important}
  body #topNav #topNavBtns .topNavBtn.active{
    background:#000!important;color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(201,168,76,.4);
  }
  body #topNav #topNavBtns .topNavBtn .pmBadgeCount{
    position:absolute;top:6px;right:8px;margin:0;min-width:18px;height:18px;padding:0 5px;
    border-radius:9px;font-size:10.5px;line-height:18px;text-align:center;color:#fff;
  }
  /* Logout: baris penuh di dasar sheet, aksen merah seperti di desktop */
  body #topNav #topNavBtns .topNavBtn.topNavLogout{
    grid-column:1/-1;min-height:50px;margin-top:4px;flex-direction:row;gap:10px;
    background:rgba(192,57,43,.1)!important;border:1px solid rgba(192,57,43,.3)!important;
    color:#ef9a9a;font-size:14px;
  }
  body #topNav #topNavBtns .topNavBtn.topNavLogout svg{width:20px;height:20px;color:#ef9a9a}
  body #topNav #topNavBtns .topNavBtn.topNavLogout:active{background:rgba(192,57,43,.22)!important}
}
@media(max-width:340px){
  .mobTab{font-size:10px}
  body #topNav #topNavBtns{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  body #topNav,#navBackdrop,.mobTab{transition:none!important}
}
@media(max-width:768px){
  /* saat menu lengkap terbuka, hanya tombol "Menu" yang menyala di dock */
  body.navOpen .mobTab.active:not(#mobMenuBtn){background:transparent;box-shadow:none;color:#8d8676}
}


/* Waiting List OTS — kotak-kotak kecil (tinggi dibatasi, gulir di dalam panel) */
.waitPanel{padding:10px 12px 12px}
.wlHdr{margin-bottom:10px}
.wlSep{margin:0 4px;opacity:.5}
.wlGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;max-height:188px;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 2px 0}
.wlTile{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:9px 10px 10px;
  background:var(--card2,#0f0f0e);border:1px solid rgba(201,168,76,.28);border-top:3px solid rgba(201,168,76,.6);border-radius:12px}
.wlTile.wlSched{border-style:dashed;border-top-style:solid;border-color:rgba(201,168,76,.2);border-top-color:rgba(201,168,76,.35);opacity:.9}
.wlName{font-size:15px;font-weight:700;color:var(--gold2);line-height:1.2;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlSub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlGo{margin-top:6px;padding:5px 8px;font-size:12px;width:100%;justify-content:center}
.wlTile .wlPend{margin-top:6px;font-size:11.5px;line-height:1.3}
.wlX{position:absolute;top:5px;right:5px;min-width:20px;height:20px;padding:0 4px;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--muted);font-size:11px;line-height:20px;font-family:inherit}
.wlX:hover{background:rgba(255,255,255,.08);color:var(--text)}
@media(max-width:640px){.wlGrid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:200px}}


/* Dropdown (<select>) — daftar pilihan harus terbaca jelas di tema gelap.
   Latar & tulisan diatur eksplisit untuk option dan judul grup; color-scheme:dark membuat
   popup bawaan browser (termasuk scrollbar) ikut gelap. */
select{color-scheme:dark}
select option,
.finp select option,
.filterBar select option{background-color:#1a1914;color:#f3e8cf;font-size:16px;padding:8px 10px}
select optgroup,
.finp select optgroup{background-color:#0f0e0a;color:#f0d080;font-style:normal;font-weight:700;font-size:13px;letter-spacing:.5px}
select option:checked,
select option:hover{background-color:#c9a84c;color:#1a1205}
select option[value=""],select option:disabled{color:#a79f8a}

/* ═══ Daftar pilihan dropdown buatan sendiri (js/select-ui.js) — tulisan besar & kontras tinggi ═══ */
.sdPop{
  position:fixed;z-index:100000;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px;background:#14130f;border:1px solid rgba(201,168,76,.55);border-radius:14px;
  box-shadow:0 14px 44px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6);
  font-family:'Outfit','Raleway',sans-serif;color-scheme:dark;
}
.sdGroup{padding:10px 12px 5px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#f0d080}
.sdGroup:not(:first-child){margin-top:4px;border-top:1px solid rgba(201,168,76,.18)}
.sdItem{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:46px;padding:10px 12px;border-radius:10px;cursor:pointer;
  font-size:17px;font-weight:500;line-height:1.25;color:#fff4dc;
  -webkit-tap-highlight-color:transparent;
}
.sdItem.sdBlank{color:#b8b09a;font-weight:400}
.sdItem.sdOff{opacity:.4;cursor:default}
.sdItem.sdHi{background:rgba(201,168,76,.2)}
.sdItem.sdOn{background:linear-gradient(135deg,#c9a84c,#f0d080);color:#1a1205;font-weight:700}
.sdTick{font-size:16px;flex-shrink:0}
select.sdOpen{border-color:var(--gold2)!important}


/* ═══ Tamu OTS — ringkasan satu baris di Home + daftar lengkap di jendela ═══ */
.wlHdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wlHdrSub{font-weight:500;letter-spacing:.5px;text-transform:none;font-size:12.5px;color:var(--text2)}
.wlAll{margin-left:auto;padding:6px 14px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.3px;
  text-transform:none;color:var(--gold2);background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.4)}
.wlAll:hover{background:rgba(201,168,76,.22)}
/* satu baris saja: kotak yang tidak muat dipotong (sisanya ada di "Lihat semua") */
.wlGrid.wlOneRow{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));grid-template-rows:auto;grid-auto-rows:0;row-gap:0;padding:0;overflow:hidden;max-height:none}
.wlNone{font-size:13px;color:var(--muted);padding:2px 0}
@media(max-width:640px){.wlGrid.wlOneRow{grid-template-columns:repeat(2,minmax(0,1fr))}}

.wlModal{max-width:560px;display:flex;flex-direction:column;max-height:min(86vh,720px)}
.wlTools{padding:12px 20px 8px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--cardline)}
.wlTools .srchInp{width:100%;min-width:0;flex:none}
.wlDates{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.wlDates::-webkit-scrollbar{display:none}
.wlChip{flex-shrink:0;padding:7px 14px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--text2);background:var(--card2,#0f0f0e);border:1px solid rgba(201,168,76,.28);white-space:nowrap}
.wlChip i{font-style:normal;margin-left:4px;padding:0 7px;border-radius:9px;background:rgba(201,168,76,.18);color:var(--gold2);font-size:12px}
.wlChip.on{background:linear-gradient(135deg,#c9a84c,#f0d080);color:#1a1205;border-color:var(--gold2)}
.wlChip.on i{background:rgba(0,0,0,.18);color:#1a1205}
.wlListBody{flex:1;min-height:120px;overflow-y:auto;padding:4px 20px 12px}
.wlDay{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;padding:10px 0 6px;background:var(--bg2);
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.wlDay span{font-weight:500;letter-spacing:.5px;color:var(--muted);text-transform:none}
.wlLRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.wlDay + .wlLRow,.wlListBody > .wlLRow:first-child{border-top:none}
.wlLMain{min-width:0;display:flex;flex-direction:column;gap:2px}
.wlLMain b{font-size:16px;color:var(--gold2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlLMain span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlLAct{display:flex;align-items:center;gap:8px;flex-shrink:0}
.wlLAct .wlX{position:static;min-width:32px;height:32px;line-height:32px;border-radius:8px;background:var(--card2,#0f0f0e);border:1px solid var(--cardline);font-size:12px}
.wlLAct .wlX.arm{color:#ef9a9a;border-color:rgba(192,57,43,.5);padding:0 10px}
.wlEmpty{padding:40px 0;text-align:center;color:var(--muted);font-size:14px}

@media(max-width:640px){.wlHdrSub{display:none}}


/* ═══ MOBILE: tidak ada yang terpotong di semua halaman ═══
   Tabel lebar bergulir ke samping di dalam kotaknya; filter, kolom isian, dan modal menyesuaikan lebar layar. */
@media(max-width:768px){
  html,body{max-width:100%;overflow-x:hidden}
  #content{min-width:0;max-width:100%}
  .view{min-width:0;max-width:100%}
  .tblWrap{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .tblWrap table{min-width:max-content;width:100%}
  th{white-space:nowrap}
  td{white-space:nowrap}
  td:last-child,td.wrap{white-space:normal}
  .filterBar{gap:8px}
  .filterBar>*{min-width:0;max-width:100%}
  .filterBar input[type="date"]{flex:1 1 100px;font-size:14px;padding:9px 8px}
  .filterBar input[type="text"],.filterBar input[type="search"],.filterBar select{flex:1 1 130px;font-size:16px}
  th{padding:8px 8px}
  td{padding:8px 8px;font-size:12.5px}
  .filterBar .btn{flex:1 1 auto}
  .ctrlBar>*{min-width:0;max-width:100%}
  .ctrlBar .btnFDC,.ctrlBar .btnEvent{flex:1 1 auto}
  .modal{max-width:96vw;width:100%}
  .modal input,.modal select,.modal textarea{max-width:100%;min-width:0;font-size:16px}
  .mfooter{flex-wrap:wrap}
  .mfooter .btn{flex:1 1 auto}
  .statsBar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .statCard{min-width:0}
}

/* ═══ Tabel mobile: teks boleh turun baris agar muat (diatur js/pages.js → fitTables) ═══ */
@media(max-width:768px){
  .tblWrap table.tfit{min-width:0;width:100%}
  .tblWrap table.tfit th,.tblWrap table.tfit td{white-space:normal;overflow-wrap:break-word}
  .tblWrap table.tfit th{letter-spacing:.5px}
}
@media(max-width:768px){ .tblWrap table.tfit2 th,.tblWrap table.tfit2 td{overflow-wrap:anywhere} }

/* ═══ Keterangan bila minimum charge kosong ═══ */
.noMc{font-family:'Raleway','Outfit',sans-serif;font-size:11px;font-weight:500;letter-spacing:.3px;color:var(--muted);text-transform:none}
.tbox .tmc.noMcRow{color:var(--muted);font-size:11px;letter-spacing:.5px}
.ktvRoom .ktvNoMc{font-family:'Raleway','Outfit',sans-serif;font-size:clamp(8px,2cqw,11px);font-weight:500;opacity:.7;letter-spacing:.02em;line-height:1.15}
/* Legenda (Floor 1, Floor 2, KTV): kalimat hijau */
.c1lg-mc .noMc,.glv-area-table .noMc,#guestLayoutView .c1lg-mc .noMc{font-size:16px;font-weight:700;color:#4caf50 !important;letter-spacing:.2px;white-space:normal;line-height:1.25}
@media(max-width:480px){ .c1lg-mc .noMc,.glv-area-table .noMc,#guestLayoutView .c1lg-mc .noMc{font-size:14px} }

/* ═══ Pengaturan Minimum Charge — tampilan baru ═══ */
.mcxScope{background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.28);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.mcxScope.ev{background:rgba(255,204,128,.07);border-color:rgba(255,204,128,.4)}
.mcxScopeTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.mcxScopeTop label{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:700}
.mcxMode{font-size:10.5px;font-weight:800;letter-spacing:1.2px;padding:4px 10px;border-radius:20px}
.mcxMode.std{background:rgba(76,175,80,.14);color:#81c784;border:1px solid rgba(76,175,80,.35)}
.mcxMode.ev{background:rgba(255,204,128,.14);color:#ffcc80;border:1px solid rgba(255,204,128,.4)}
.mcxScope select{width:100%;padding:11px 12px;font-size:15px;border-radius:10px}
.mcxScopeNote{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:9px}
.mcxScopeNote b{color:var(--text2)}
.mcxScope.ev .mcxScopeNote{color:#d9b98a}
.mcxRO{padding:9px 12px;background:rgba(255,152,0,.1);border:1px solid rgba(255,152,0,.3);border-radius:10px;margin-bottom:12px;font-size:13px;color:#ffcc80}

.mcxTabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 12px;margin-bottom:4px}
.mcxTabs::-webkit-scrollbar{display:none}
.mcxTab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:30px;border:1px solid rgba(201,168,76,.25);
  background:rgba(255,255,255,.03);color:var(--text2);font-family:'Outfit','Raleway',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.mcxTab:hover{border-color:var(--gold)}
.mcxTab.on{background:rgba(201,168,76,.16);border-color:var(--gold);color:var(--gold2)}
.mcxBadge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ffb74d;color:#1a1200;font-size:11px;font-weight:800;display:inline-grid;place-items:center}

.mcxHint{font-size:13px;color:var(--muted);line-height:1.6;margin:2px 0 14px}
.mcxHint b{color:var(--text2)}
.mcxBulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border:1px dashed rgba(201,168,76,.35);border-radius:12px;background:rgba(255,255,255,.02)}
.mcxBulk>span{font-size:13px;color:var(--text2);font-weight:600;flex:1 1 200px}
.mcxBulk .mcxInp{flex:0 1 190px}
.mcxBulk .btn{padding:9px 16px;font-size:13px}

.mcxGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.mcxCard{border:1px solid rgba(var(--arg),.28);border-left:4px solid var(--ac);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--arg),.09),rgba(255,255,255,.015) 60%)}
.mcxCardHd{display:flex;flex-direction:column;gap:2px;padding:12px 16px 10px;font-family:'Outfit','Cinzel',serif;font-size:15px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--ac);border-bottom:1px solid rgba(var(--arg),.16)}
.mcxCardHd small{font-size:11px;font-weight:500;letter-spacing:.3px;text-transform:none;color:var(--muted)}
.mcxCardBd{display:grid;gap:14px;padding:14px 16px 16px}
.mcxFld label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text2);margin-bottom:7px}
.mcxInp{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid rgba(201,168,76,.22);border-radius:10px;padding:0 6px 0 12px;transition:border-color .15s,box-shadow .15s}
.mcxInp:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.15)}
.mcxCur{font-size:13px;color:var(--muted);font-weight:600}
.mcxInp input{flex:1;min-width:0;width:100%;background:transparent;border:0;outline:none;color:var(--text);padding:12px 4px;font-size:20px;font-weight:700;
  font-family:'Outfit','Raleway',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.mcxInp input::placeholder{font-size:14px;font-weight:400;color:#555;letter-spacing:0}
.mcxInp input:disabled{opacity:.6;cursor:not-allowed}
.mcxX{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.06);color:var(--muted);font-size:12px;cursor:pointer}
.mcxX:hover{background:rgba(231,76,60,.25);color:#ef9a9a}
.mcxSteps{display:flex;gap:8px;margin-top:8px}
.mcxSteps button{flex:1;padding:8px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text2);
  font-family:'Outfit','Raleway',sans-serif;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.mcxSteps button:hover{border-color:var(--gold);background:rgba(201,168,76,.1)}
.mcxSteps button:active{transform:scale(.97)}
.mcxStat{min-height:18px;margin-top:8px;font-size:12px;font-weight:600}
.mcxNo{color:#4caf50;font-size:14px;font-weight:700}.mcxOn{color:var(--gold2)}.mcxFollow{color:#90a4ae;font-weight:500}
.mcxFld.chg .mcxInp{border-color:#ffb74d;box-shadow:0 0 0 3px rgba(255,183,77,.14)}
.mcxFld.chg label::after{content:' • diubah';color:#ffb74d;text-transform:none;letter-spacing:0;font-weight:600}

.mcxBar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  margin-top:20px;padding:12px 14px;background:rgba(18,17,14,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(201,168,76,.3);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.mcxBarInfo{font-size:13.5px;font-weight:600;color:#81c784}
.mcxBarInfo.dirty{color:#ffb74d}
.mcxBarBtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mcxBarBtns .btn:disabled{cursor:not-allowed}
@media(max-width:768px){
  .mcxBar{bottom:calc(86px + env(safe-area-inset-bottom,0px) + 8px);padding:10px 12px}
  .mcxBarBtns{width:100%}
  .mcxBarBtns #saveMCBtn{order:-1;flex:1 1 100%;justify-content:center;padding:13px 16px !important;font-size:15px !important}
  .mcxBarBtns #clearMCBtn,.mcxBarBtns #mcResetBtn{flex:1 1 auto;justify-content:center}
  .mcxGrid{grid-template-columns:1fr}
  .mcxInp input{font-size:22px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARTU MEJA v3 — gaya "invoice": kartu putih bersih, judul tebal + keterangan kecil, lencana outline di kanan,
   baris label–nilai bergaris tipis, total tebal, kaki bergaris putus-putus + tautan ungu.
   UKURAN KARTU PERMANEN: semua kartu (kosong / terisi / check-in) persis sama lebar & tinggi.
   Isi yang panjang dipotong dengan "…", kartu tidak pernah memanjang. Warna zona (--zc / --zrgb) = titik di samping nama & hover.
   ═══════════════════════════════════════════════════════════════════════════ */
.areaLabel{margin-bottom:18px}
.tableGrid{gap:16px 14px;padding-top:2px;align-items:flex-start}

.tbox{
  --ink:#111827;--ink2:#6b7280;--mute:#9aa3b2;--line:#eef0f4;
  box-sizing:border-box;position:relative;overflow:hidden;will-change:auto;
  width:212px;height:252px;min-height:0;max-height:252px;flex:0 0 212px;padding:15px 16px 13px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;
  background:#fff;color:var(--ink);border-radius:18px;cursor:pointer;
  border:1px solid #e8ebf2;border-top:1px solid #e8ebf2;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px rgba(0,0,0,.30);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.tbox *{box-sizing:border-box}
.tbox:hover{
  transform:translateY(-3px);filter:none;
  border-color:rgba(var(--zrgb),.55);border-top-color:rgba(var(--zrgb),.55);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 32px rgba(0,0,0,.42),0 0 0 3px rgba(var(--zrgb),.18);
}
.tbox.empty{background:#fff}

/* kepala: nama + keterangan kiri, lencana kanan */
.tbox .thead{flex:none;height:38px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tbox .tid{min-width:0;flex:1}
.tbox .tn{display:flex;align-items:center;gap:7px;margin:0;font-family:'Outfit','Cinzel',serif;font-size:15px;font-weight:800;
  line-height:1.2;letter-spacing:-.1px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbox .tn span{overflow:hidden;text-overflow:ellipsis}
.tbox .tdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--zc);box-shadow:0 0 0 3px rgba(var(--zrgb),.18)}
.tbox .tsubl{margin-top:3px;font-size:11px;line-height:1.2;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbox .tbadge{
  position:static;transform:none;flex:none;padding:4px 8px;border-radius:9px;white-space:nowrap;
  font-size:9px;font-weight:800;letter-spacing:1.1px;line-height:1.2;text-transform:uppercase;
  color:#15803d;background:#ecfdf3;border:1.5px solid #4ade80;box-shadow:0 0 0 2px rgba(74,222,128,.12);
}
.tbox .tbadge.occ{color:#b45309;background:#fffbeb;border-color:#fbbf24;box-shadow:0 0 0 2px rgba(251,191,36,.14)}
.tbox .tbadge.in{color:#15803d;background:#ecfdf3;border-color:#4ade80}

/* judul kolom kecil + baris label–nilai */
.tbox .tcols{flex:none;height:22px;display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:5px;
  font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.tbox .tlist{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.tbox .tr{flex:none;height:25px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.2}
.tbox .tr .k{flex:none;color:var(--ink2)}
.tbox .tr .v{min-width:0;font-weight:600;color:var(--ink);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbox .tr.dim .v{font-weight:500;color:#c3c9d4}
.tbox .tr.ok .v{color:#15803d}
.tbox .tr.due .v{color:#b45309}

/* total (Minimum Charge) */
.tbox .ttot{flex:none;height:32px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line)}
.tbox .ttot span{font-size:13px;font-weight:800;color:var(--ink)}
.tbox .ttot b{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--ink);white-space:nowrap}
.tbox .ttot b i{font-style:normal;font-size:11px;font-weight:600;color:var(--ink2);margin-right:3px}
.tbox .ttot.none b{font-size:13px;color:#2e9d4f}

/* kaki: catatan kiri, tautan ungu kanan */
.tbox .tfoot{flex:none;height:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  border-top:1px dashed #dfe3ea;padding-top:0}
.tbox .tnote{min-width:0;font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbox .tlink{flex:none;font-size:12px;font-weight:800;color:#4f46e5;white-space:nowrap}
.tbox:hover .tlink{color:#3730a3}

/* terisi & check-in: cincin halus */
.tbox.occupied{border-color:#f3d58a;box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px rgba(0,0,0,.34),0 0 0 2px rgba(251,191,36,.55)}
.tbox.occupied:hover{border-color:#f3d58a;box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 32px rgba(0,0,0,.45),0 0 0 2px #fbbf24,0 0 22px rgba(251,191,36,.25)}
.tbox.occupied.ci{border-color:#a7e3b8;box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px rgba(0,0,0,.34),0 0 0 2px rgba(74,222,128,.6)}
.tbox.occupied.ci:hover{border-color:#a7e3b8;box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 32px rgba(0,0,0,.45),0 0 0 2px #4ade80,0 0 22px rgba(74,222,128,.25)}

/* HP: 2 kartu per baris, tinggi tetap */
@media(max-width:640px){
  .tableGrid{gap:14px 12px}
  .tbox{width:calc(50% - 6px);flex:0 0 calc(50% - 6px);height:236px;max-height:236px;padding:12px 12px 10px;border-radius:16px}
  .tbox .thead{height:36px;gap:6px}
  .tbox .tn{font-size:14px;gap:6px}
  .tbox .tdot{width:7px;height:7px;box-shadow:0 0 0 2px rgba(var(--zrgb),.18)}
  .tbox .tsubl{font-size:10px}
  .tbox .tbadge{padding:3px 6px;font-size:8px;letter-spacing:.9px;border-radius:7px}
  .tbox .tcols{height:20px;font-size:8.5px;letter-spacing:1px}
  .tbox .tr{height:24px;font-size:11.5px}
  .tbox .ttot{height:30px}
  .tbox .ttot span{font-size:11.5px}
  .tbox .ttot b{font-size:13px}
  .tbox .ttot b i{font-size:9.5px}
  .tbox .tfoot{height:26px}
  .tbox .tnote{font-size:10px}
  .tbox .tlink{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.tbox,.tbox:hover{transition:none;transform:none}}

/* ═══ Tablet / jendela dikecilkan (769–1023px): menu atas tidak boleh terpotong ═══
   9 tab menu tidak muat satu baris di lebar ini → dirapatkan, dan turun ke baris kedua bila perlu. */
@media(min-width:769px) and (max-width:1023px){
  #topNav{overflow-x:visible;padding:0 12px}
  #topNavBtns{flex-wrap:wrap;width:auto;min-width:0;justify-content:center;gap:0 16px}
  .topNavBtn,.topNavBtn.topNavLogout{flex-shrink:1;padding:10px 0;font-size:13px;letter-spacing:1.2px}
}

/* Nama user di sebelah jam (garis pemisah = border kiri #hdrClock) */
#hdrUser{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;padding-right:2px;text-align:right}
#hdrUserName{font-size:15px;font-weight:600;color:var(--text);letter-spacing:.3px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hdrUserRole{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:1.5px;margin-top:2px}
#hdrClock{border-left-width:1px!important;padding-left:14px!important;margin-left:4px}
/* Mobile: nama user tetap tampil (versi ringkas) di sebelah jam */
@media(max-width:640px){
  #hdr .ml-auto{gap:6px!important}
  #hdrUser{padding-right:0}
  #hdrUserName{font-size:12px;max-width:88px}
  #hdrUserRole{font-size:9px;letter-spacing:1px;margin-top:1px}
  #hdrClock{padding-left:8px!important;margin-left:0}
}
@media(max-width:380px){#hdrUserName{max-width:62px}}

/* ═══ Popup detail table: tombol aksi rapi (grid rata, aksi utama di atas, Tutup di bawah) ═══ */
#tabModFoot{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;padding:14px 20px 18px}
#tabModFoot .btn{
  flex:1 1 calc(33.333% - 8px);min-width:118px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 10px;font-size:13px!important;font-weight:600;letter-spacing:.6px;
  white-space:nowrap;border-radius:12px;
}
#tabModFoot .btn svg{width:14px;height:14px;flex:none}
/* aksi utama: Check-In & Check-Out berdampingan di baris pertama */
#tabModFoot .btnGreen{order:-3;flex:1 1 calc(50% - 8px);background:#2e7d32;border:1px solid #2e7d32;color:#fff;font-weight:700}
#tabModFoot .btnGreen:hover{background:#256528}
#tabModFoot .btnRed{order:-2;flex:1 1 calc(50% - 8px);background:rgba(192,57,43,.1);border:1.5px solid #c0392b;color:#c0392b;font-weight:700}
#tabModFoot .btnRed:hover{background:rgba(192,57,43,.2)}
/* Tutup: satu baris penuh di paling bawah, tampil tenang */
#tabModFoot .ftClose{order:99;flex:1 1 100%;background:transparent;border:1px solid rgba(0,0,0,.14);color:var(--muted)}
#tabModFoot .ftClose:hover{background:rgba(0,0,0,.05);color:var(--text)}
@media(max-width:520px){
  #tabModFoot{padding:12px 14px 16px}
  #tabModFoot .btn{flex-basis:calc(50% - 8px);min-width:0;padding:11px 6px}
}

/* ═══ Login: schedule event (bentuk seperti sel-octagon-tokyo.jp) ═══
   Di tengah area yang tidak tertutup form; tagline "HIDUPKAN MALAM DI HADES VIP" tetap di pojok kiri bawah.
   --lleft-h (diisi JS) = tinggi blok tagline + chip, supaya schedule tidak menimpanya. */
.lsch{--top:clamp(150px,20vh,200px);--bot:calc(clamp(28px,5.5vh,56px) + var(--lleft-h,200px) + 24px);
  position:absolute;z-index:2;left:0;right:min(560px,44%);top:var(--top);bottom:var(--bot);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 clamp(24px,3vw,48px)}
.lsch[hidden]{display:none}
.lschHead{font-family:'Outfit','Raleway',sans-serif;font-size:clamp(12px,1vw,15px);font-weight:700;letter-spacing:.3em;
  text-indent:.3em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.7);line-height:1}
.lschLine{width:28px;height:2px;background:#fff;margin:8px 0 clamp(8px,1.4vh,12px);opacity:.85}
.lschRow{display:flex;justify-content:center;width:100%;max-width:1040px;
  --pmax:min(180px,max(80px,calc(100dvh - var(--top) - var(--bot) - 130px)))}
.lschItem{flex:1 1 0;min-width:0;max-width:var(--pmax);display:flex;flex-direction:column;text-align:left;cursor:pointer;
  background:none;border:0;padding:0;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.lschImg{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#111;transition:filter .25s,transform .25s}
.lschItem:hover .lschImg{filter:brightness(1.12);transform:translateY(-3px)}
.lschItem:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.lschMeta{display:flex;align-items:stretch;gap:7px;margin-top:6px;min-height:34px}
.lschDate{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:0 6px;border-left:1px solid rgba(255,255,255,.3);border-right:1px solid rgba(255,255,255,.3);
  font-family:'Outfit','Raleway',sans-serif;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.lschDate small{font-size:8px;font-weight:600;letter-spacing:.02em}
.lschDate b{font-size:clamp(12px,1vw,15px);font-weight:700;line-height:1.05}
.lschName{align-self:center;font-family:'Outfit','Raleway',sans-serif;font-size:clamp(9px,.7vw,10.5px);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1.25;text-shadow:0 1px 10px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lschMore{flex-shrink:0;margin-top:clamp(8px,1.4vh,12px);height:28px;padding:0 24px;cursor:pointer;
  font-family:'Outfit','Raleway',sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;color:#fff;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.7);transition:background .2s,color .2s}
.lschMore:hover{background:#fff;color:#080806}
@media(max-height:420px) and (min-width:761px){ .lsch{display:none} }
@media(prefers-reduced-motion:reduce){ .lsch,.lschImg{transition:none} .lschItem:hover .lschImg{transform:none} }

/* HP / potret: baris poster bisa digeser ke samping, tepat di bawah logo */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lsch{position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:3;padding:0;margin:0 0 16px}
  .lschRow{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:0 24px;
    scrollbar-width:none;max-width:100%}
  .lschRow::-webkit-scrollbar{display:none}
  .lschItem{flex:0 0 min(46vw,180px);max-width:none;scroll-snap-align:center}
  .lschMore{height:28px;padding:0 24px;font-size:10px}
}

/* Tombol "Tamu" dihapus dari form — tinggal ikon media sosial */
.lrow{display:flex;gap:10px}
.lrow a{width:54px;flex:0 0 54px}
@media(max-height:480px) and (min-width:761px){ .lrow a{width:44px;flex-basis:44px} }

/* ═══ Login: rapikan letak & jarak (v84) ═══ */
/* Poster schedule: beri jarak antar-poster supaya tidak menempel */
.lschRow{gap:clamp(10px,1.2vw,18px)}
.lschMeta{margin-top:10px;gap:8px}
.lschName{font-size:clamp(9.5px,.72vw,11px)}

/* Desktop: schedule mulai di bawah logo (tidak mepet), form sedikit naik dari tengah */
@media(min-width:761px) and (min-height:481px){
  .lsch{--top:clamp(196px,25vh,250px)}
  .lbrandSide{top:clamp(26px,4.5vh,52px)}
  .lpanel{padding-bottom:84px}
  .lhead{margin-bottom:30px}
  .lsep{margin:28px 0 18px}
  .lnote{margin-top:20px}
}
/* Layar pendek (laptop kecil): rapatkan sedikit agar semua muat tanpa tumpang tindih */
@media(min-width:761px) and (max-height:760px) and (min-height:481px){
  .lbrandSide img{max-height:104px}
  .lsch{--top:clamp(160px,23vh,190px)}
  .ltag{font-size:clamp(24px,2.5vw,36px)}
  .lleft{gap:14px;bottom:clamp(20px,4vh,40px)}
}

/* HP & tablet potret: logo → schedule → form; jarak antar-blok lebih lega */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lcard{padding-top:calc(max(20px,env(safe-area-inset-top)) + 96px + 18px)}
  .lbrandSide{left:0;right:0;display:flex;justify-content:center}
  .lbrandSide img{max-height:84px}
  .lcard{padding-top:calc(max(20px,env(safe-area-inset-top)) + 84px + 20px)}
  .lsch{margin:0 0 18px}
  .lschRow{gap:12px;padding:0 max(24px,calc((100% - 480px)/2))}
  .lschItem{flex:0 0 min(40vw,168px)}
  .lleft{margin-top:0;margin-bottom:6px}
  .lsoc{margin-bottom:0}
  .lpanel{padding-top:26px}
  .lhead{margin-bottom:18px}
  .lhead h2{font-size:42px}
}

/* ═══ Login: schedule lebih besar (v85) ═══ */
@media(min-width:761px){
  .lsch{padding:0 clamp(14px,1.8vw,30px)}
  .lschRow{max-width:1180px;gap:clamp(10px,1vw,16px);
    --pmax:min(300px,max(110px,calc(100dvh - var(--top) - var(--bot) - 150px)))}
  .lschHead{font-size:clamp(14px,1.15vw,18px)}
  .lschLine{width:34px;margin:10px 0 clamp(10px,1.6vh,16px)}
  .lschMeta{margin-top:12px;min-height:42px;gap:10px}
  .lschDate{padding:0 9px}
  .lschDate small{font-size:10px}
  .lschDate b{font-size:clamp(15px,1.25vw,20px)}
  .lschName{font-size:clamp(11px,.85vw,13.5px);letter-spacing:.025em}
  .lschMore{height:34px;padding:0 30px;font-size:11px;margin-top:clamp(12px,2vh,18px)}
}
@media(min-width:761px) and (max-height:760px){
  .lsch{--top:clamp(150px,21vh,176px)}
}
/* HP & tablet potret */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lschItem{flex:0 0 min(58vw,260px)}
  .lschDate b{font-size:16px}
  .lschName{font-size:11.5px}
  .lschMore{height:32px;font-size:11px}
}

/* ═══ Login: ikon media sosial di tengah form (v86) ═══ */
.lrow{justify-content:center}

/* ═══ Login: poster schedule bentuk memanjang 4:5 (v87) ═══ */
.lschImg{aspect-ratio:4/5}
@media(min-width:761px){
  .lschRow{--pmax:min(280px,max(96px,calc((100dvh - var(--top) - var(--bot) - 150px) / 1.25)))}
}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lschItem{flex:0 0 min(54vw,236px)}
}

/* ══════════════════════════════════════════════════════════════════
   Login v88 — top bar · dropdown form login · tombol Menu (PDF)
   Schedule di tengah layar tanpa judul. Menimpa aturan login lama di atas.
   ══════════════════════════════════════════════════════════════════ */
.lscrim{background:
  linear-gradient(0deg,rgba(8,8,6,.88) 0%,rgba(8,8,6,0) 40%),
  linear-gradient(180deg,rgba(8,8,6,.72) 0%,rgba(8,8,6,0) 26%),
  rgba(8,8,6,.34)}

/* — top bar — */
.ltop{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:max(14px,env(safe-area-inset-top)) clamp(16px,3.2vw,48px) 14px}
.ltopLogo{display:block;line-height:0;-webkit-tap-highlight-color:transparent}
.ltopLogo img{height:clamp(54px,5.8vw,78px);width:auto;display:block;filter:drop-shadow(0 2px 12px rgba(0,0,0,.6))}
.ltopNav{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.ltopBtn{height:34px;padding:0 18px;border:0;border-radius:3px;cursor:pointer;background:#fff;color:#080806;
  font-family:'Outfit','Raleway',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  transition:background .15s,color .15s}
.ltopBtn:hover{background:var(--gold2)}
.lacct{position:relative}
.lacctBtn{display:flex;align-items:center;gap:4px;height:40px;padding:0 4px;border:0;background:none;color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.lacctIco{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lacctChev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(180deg);transition:transform .18s}
.lacct.open .lacctChev{transform:none}
.lacctBtn:hover{color:var(--gold2)}

/* — dropdown login — */
.ldrop{display:block;position:absolute;top:calc(100% + 8px);right:0;z-index:7;width:min(340px,calc(100vw - 32px));
  max-height:calc(100dvh - 90px);overflow-y:auto;background:#000;border:1px solid rgba(255,255,255,.88);padding:24px 24px 20px;
  animation:ldropIn .16s ease-out}
.ldrop[hidden]{display:none}
@keyframes ldropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ldropTitle{margin:0;font-family:'Outfit','Raleway',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.ldropLine{height:1px;background:#fff;margin:16px 0 18px}
.ldropLine2{background:rgba(255,255,255,.22);margin:22px 0 16px}
.ldrop .llabel{font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:10px}
.ldrop .lfield input{height:46px;border-radius:3px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);font-size:15px}
.ldrop .lfield input:focus{border-color:#fff;background:rgba(255,255,255,.1)}
.ldrop .lfield svg{stroke:rgba(255,255,255,.7)}
#loginPage .ldrop .btnPrimary{height:46px;border-radius:3px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.ldrop .lrow{justify-content:center;gap:10px}
.ldrop .lrow a{width:44px;flex:0 0 44px;height:44px;border-radius:3px;background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.ldrop .lrow a:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.ldrop .lnote{text-align:center;margin-top:16px}
.ldropShade{position:fixed;inset:0;z-index:5;background:transparent}
.ldropShade[hidden]{display:none}

/* — bawah: tagline kiri · chip sosial kanan — */
.lleft{left:clamp(28px,4vw,60px);right:clamp(28px,4vw,60px);bottom:clamp(44px,7vh,64px);max-width:none;
  flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px}
.lcopy{left:0;right:0;width:auto;bottom:16px;text-align:center}

/* — schedule: tepat di tengah layar, tanpa judul — */
.lsch{--top:calc(clamp(54px,5.8vw,78px) + 64px);
  --bot:calc(clamp(44px,7vh,64px) + var(--lleft-h,120px) + 20px);
  --gap:max(var(--top),var(--bot));
  left:0;right:0;top:var(--gap);bottom:var(--gap)}
.lsch:not([hidden]){display:flex}
@media(min-width:761px){
  .lschRow{max-width:1180px;--pmax:min(280px,max(96px,calc((100dvh - 2*var(--gap) - 120px) / 1.25)))}
}
@media(min-width:761px) and (min-height:481px){ .lsch{--top:calc(clamp(54px,5.8vw,78px) + 64px)} }
@media(max-height:420px) and (min-width:761px){ .ltag{display:none} .lsch{--bot:calc(clamp(44px,7vh,64px) + 60px)} }

/* — penampil menu PDF — */
.lmenuBg{position:fixed;inset:0;z-index:50;display:flex;justify-content:center;background:rgba(0,0,0,.86);
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
.lmenuBg[hidden]{display:none}
.lmenuBox{width:min(960px,100%);min-height:0;display:flex;flex-direction:column;background:#0b0b09;border:1px solid rgba(255,255,255,.7)}
.lmenuHead{flex:0 0 auto;display:flex;align-items:center;gap:12px;height:54px;padding:0 6px 0 20px;border-bottom:1px solid rgba(255,255,255,.7)}
.lmenuTitle{font-family:'Outfit','Raleway',sans-serif;font-size:14px;font-weight:700;letter-spacing:.2em;color:#fff}
.lmenuDl{margin-left:auto;font-family:'Outfit','Raleway',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.5);border-radius:3px;padding:7px 12px}
.lmenuDl[hidden]{display:none}
.lmenuDl:hover{background:#fff;color:#080806}
.lmenuClose{margin-left:auto;width:44px;height:44px;border:0;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lmenuDl:not([hidden])+.lmenuClose{margin-left:0}
.lmenuClose:hover{color:var(--gold2)}
.lmenuBody{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;background:#161613}
.lmenuPage{width:fit-content;max-width:100%;margin:0 auto 14px;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.5)}
.lmenuPage canvas{display:block;max-width:100%}
.lmenuNote{padding:56px 16px;text-align:center;font-size:14px;color:var(--text2);letter-spacing:.03em}
.lmenuNote.err{color:var(--red2)}
html.lmenuOpen{overflow:hidden}

/* — HP & tablet potret: logo/ikon di atas, schedule di tengah, sosial di bawah — */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lcard{display:flex;flex-direction:column;height:auto;min-height:100dvh;
    padding-top:calc(max(14px,env(safe-area-inset-top)) + 78px);padding-bottom:calc(44px + env(safe-area-inset-bottom))}
  .ltop{padding-left:16px;padding-right:16px}
  .ltopLogo img{height:58px}
  .ltopBtn{height:32px;padding:0 14px;font-size:12px}
  .lsch{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:1 1 auto;justify-content:center;margin:0;padding:14px 0}
  .lleft{position:relative;left:auto;right:auto;bottom:auto;top:auto;margin-top:0;flex-direction:column;align-items:stretch;
    padding:0 max(20px,calc((100% - 480px)/2));z-index:3}
  .lcopy{bottom:calc(14px + env(safe-area-inset-bottom))}
  .ldropShade{background:rgba(0,0,0,.45)}
  .ldrop{padding:22px 20px 18px}
}
@media(prefers-reduced-motion:reduce){ .ldrop{animation:none} .lacctChev{transition:none} }

/* Tagline: animasi mengetik (v89) */
.ltag{min-height:2.16em}
.ltag .ltL1{color:inherit}
.ltCaret{display:inline-block;width:.07em;height:.86em;margin-left:.05em;background:var(--gold2);vertical-align:-.06em;
  animation:ltBlink 1s steps(1) infinite}
.ltCaret.typing{animation:none}
@keyframes ltBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ltCaret{display:none}}

/* Tagline mengetik tampil juga di HP & tablet potret (v90) */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .ltag{display:block;position:static;text-align:center;font-size:clamp(26px,8vw,38px);margin:0 0 14px;min-height:2.16em}
}


/* ═══ Login v91 — carousel poster: tengah, loop ke kiri, bisa di-swipe · judul emas ═══ */
.lsch{align-items:stretch}
.lschTitle{margin:0 0 clamp(12px,2vh,20px);text-align:center;text-transform:uppercase;
  font-family:'Outfit','Raleway',sans-serif;font-weight:800;font-size:clamp(18px,1.9vw,28px);line-height:1.1;
  letter-spacing:.08em;color:var(--gold2);text-shadow:0 2px 18px rgba(0,0,0,.7)}
.lschRow{display:block;position:relative;width:100%;max-width:none;overflow:hidden;padding:0;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lschRow:active{cursor:grabbing}
.lschTrack{display:flex;flex-wrap:nowrap;width:max-content;gap:clamp(12px,1.2vw,18px);will-change:transform}
.lschItem{flex:0 0 var(--pmax);max-width:none;width:var(--pmax)}
.lschImg{-webkit-user-drag:none;pointer-events:none}
.lschMore{align-self:center}
@media(min-width:761px){
  .lschRow{--pmax:min(250px,max(96px,calc((100dvh - 2*var(--gap) - 190px) / 1.25)))}
}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lsch{align-items:stretch;padding:14px 0}
  .lschTitle{font-size:clamp(20px,6vw,28px)}
  .lschRow{--pmax:min(54vw,236px);overflow:hidden;padding:0;justify-content:initial;scroll-snap-type:none}
  .lschItem{flex:0 0 var(--pmax);scroll-snap-align:none}
}


/* ═══ Login v95 — penampil Menu: polos & rapi, senada top bar (hitam · putih · garis tipis) ═══ */
.lmenuBg{padding:0;background:rgba(0,0,0,.92)}
.lmenuBox{width:min(960px,100%);background:#0b0b09;border:0;border-left:1px solid rgba(255,255,255,.18);border-right:1px solid rgba(255,255,255,.18)}
@media(max-width:760px){ .lmenuBox{border-left:0;border-right:0} }
.lmenuHead{height:auto;min-height:56px;gap:12px;padding:max(8px,env(safe-area-inset-top)) 8px 8px 20px;background:none;
  border-bottom:1px solid rgba(255,255,255,.7)}
.lmenuTitle{flex:1;font-family:'Outfit','Raleway',sans-serif;font-size:14px;font-weight:700;letter-spacing:.2em;color:#fff;text-shadow:none}
.lmenuPg{font-family:'Outfit','Raleway',sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.lmenuPg[hidden]{display:none}
.lmenuDl{display:inline-flex;align-items:center;height:34px;padding:0 14px;margin-left:0;border-radius:3px;
  font-family:'Outfit','Raleway',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:none;border:1px solid rgba(255,255,255,.55);text-decoration:none;box-shadow:none;transition:background .15s,color .15s}
.lmenuDl svg{display:none}
.lmenuDl:hover{background:#fff;color:#080806;transform:none;box-shadow:none}
.lmenuClose{width:42px;height:42px;border-radius:0;display:grid;place-items:center;margin-left:0;background:none;border:0;color:#fff;transform:none}
.lmenuClose svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lmenuClose:hover{background:none;color:var(--gold2);transform:none}
.lmenuHead .lmenuPg+.lmenuDl,.lmenuHead .lmenuDl[hidden]~.lmenuClose{margin-left:0}
.lmenuBody{padding:12px;background:#161613;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#555 transparent}
.lmenuBody::-webkit-scrollbar{width:6px}
.lmenuBody::-webkit-scrollbar-thumb{background:#555;border-radius:0}
.lmenuPage{margin:0 auto 12px;border-radius:0;overflow:visible;background:#fff;opacity:1;transform:none;transition:none;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.lmenuNote{display:block;padding:56px 16px;text-align:center;font-family:inherit;font-size:14px;letter-spacing:.03em;text-transform:none;color:var(--text2)}
.lmenuNote.load::before{display:none}
@media(prefers-reduced-motion:reduce){ .lmenuBody{scroll-behavior:auto} }

/* Satu event saja: poster diam di tengah (tanpa loop/duplikat) */
.lschRow.single{cursor:default;touch-action:auto;-webkit-mask-image:none;mask-image:none;overflow:visible}
.lschRow.single .lschTrack{margin:0 auto}

/* Desktop lebar: poster lebih besar — tagline ada di pojok kiri, jadi tidak perlu menyisakan ruang bawah yang sama */
@media(min-width:1100px) and (min-height:481px){
  .lsch{--gap:var(--top)}
  .lschRow{--pmax:min(440px,max(150px,calc((100dvh - 2*var(--gap) - 175px) / 1.25)))}
  .lschTitle{font-size:clamp(28px,2.6vw,44px)}
  .lschName{font-size:clamp(12px,.9vw,15px)}
  .lschDate b{font-size:clamp(17px,1.4vw,24px)}
}

/* Judul "Upcoming Event": Montserrat Light (SIL OFL), huruf besar tipis berjarak lebar */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/montserrat-latin-300-normal.woff2') format('woff2'),url('fonts/montserrat-latin-300-normal.woff') format('woff')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/montserrat-latin-400-normal.woff2') format('woff2'),url('fonts/montserrat-latin-400-normal.woff') format('woff')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/montserrat-latin-800-normal.woff2') format('woff2'),url('fonts/montserrat-latin-800-normal.woff') format('woff')}
.lschTitle{font-family:'Montserrat','Outfit',sans-serif;font-weight:800;letter-spacing:-.01em;color:#fff;font-size:clamp(34px,3.2vw,54px);text-shadow:0 2px 14px rgba(0,0,0,.65)}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){ .lschTitle{font-weight:800;letter-spacing:-.01em;font-size:clamp(32px,10.5vw,52px)} }


/* ═══ Denah tamu: geser per lantai di HP (Club Lt 1 · Club Lt 2 · KTV Lt 1–3) ═══ */
.glvTabs{display:none}
.glvPager{display:block}
.glvSlide{display:contents}
@media(max-width:760px){
  .glvTabs{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 12px;margin:0 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .glvTabs::-webkit-scrollbar{display:none}
  .glvTab{flex:0 0 auto;height:34px;padding:0 15px;border-radius:3px;cursor:pointer;white-space:nowrap;
    font-family:'Outfit','Raleway',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(255,255,255,.72);background:transparent;border:1px solid rgba(255,255,255,.28);-webkit-tap-highlight-color:transparent;
    transition:background .15s,color .15s,border-color .15s}
  .glvTab.on{background:#fff;color:#080806;border-color:#fff}
  .glvPager{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .glvPager::-webkit-scrollbar{display:none}
  .glvSlide{display:block;flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box;padding:0 12px;scroll-snap-align:start;scroll-snap-stop:always}
  .glvSlide .glv-floor-section,.glvSlide .c1g,.glvSlide .ktvFloor{margin-bottom:12px;width:100%;margin-right:0;display:block}
}
@media(prefers-reduced-motion:reduce){ .glvTab{transition:none} }

/* Jarak judul "Upcoming Event" ke poster dirapatkan (ubah --tgap untuk mengatur) */
.lsch{--tgap:clamp(6px,1vh,10px)}
.lschTitle{margin:0 0 var(--tgap);line-height:1}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){ .lsch{--tgap:8px} }

/* HP & tablet potret: susunan sama di semua perangkat — logo · judul · poster · MORE · tagline (tengah) · hak cipta.
   Ukuran poster ikut tinggi layar (dvh) supaya semua muat satu layar, baik HP pendek maupun tinggi. */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lcard{min-height:100vh;min-height:100dvh}
  .lschRow{--pmax:max(120px,min(54vw,236px,calc((100dvh - 410px) / 1.25)))}
  .lsch{justify-content:center}
  .lleft{align-items:center;text-align:center;margin-bottom:6px}
  .ltag{text-align:center;margin:0 0 4px}
  .lsoc{justify-content:center}
}

/* Tab lantai: semua muat satu baris tanpa terpotong (nama di atas, "Lt n" di bawah) */
@media(max-width:760px){
  .glvTabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;overflow:visible;padding:2px 12px 12px}
  .glvTab{height:44px;padding:0 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:11.5px;letter-spacing:.05em;line-height:1.1;text-align:center;white-space:normal}
  .glvTab small{display:block;font-size:10px;font-weight:500;letter-spacing:.06em;opacity:.8}
}

/* Jarak judul "Upcoming Event" ke poster dilonggarkan */
.lsch{--tgap:clamp(18px,2.8vh,30px)}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lsch{--tgap:18px}
  .lschRow{--pmax:max(120px,min(54vw,236px,calc((100dvh - 430px) / 1.25)))}
}

/* HP landscape: pager & tab tetap aktif (jangan ada lantai yang terpotong) */
@media(orientation:landscape) and (max-height:500px) and (max-width:1100px){
  .glvTabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;overflow:visible;
    padding:2px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));margin:0 auto 4px;max-width:720px}
  .glvTab{height:40px;padding:0 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    font-family:'Outfit','Raleway',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.05em;line-height:1.1;text-align:center;
    text-transform:uppercase;color:rgba(255,255,255,.72);background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:3px;cursor:pointer}
  .glvTab.on{background:#fff;color:#080806;border-color:#fff}
  .glvTab small{display:block;font-size:10px;font-weight:500;opacity:.8}
  .glvPager{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .glvPager::-webkit-scrollbar{display:none}
  .glvSlide{display:block;flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box;
    padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));scroll-snap-align:start;scroll-snap-stop:always}
  .glvSlide .glv-floor-section,.glvSlide .c1g,.glvSlide .ktvFloor{margin-bottom:12px;width:100%;margin-right:0;display:block}
}
/* Semua mode HP: padding aman notch kiri/kanan */
@media(max-width:760px){
  .glvTabs{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .glvSlide{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
}

/* HP landscape: denah muat satu layar (tidak terpotong) & alamat tidak menimpa konten */
@media(orientation:landscape) and (max-height:500px) and (max-width:1100px){
  body.guestMode #content{padding-bottom:14px}
  body.guestMode::after{position:static;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:none;
    -webkit-transform:none;transform:none;will-change:auto}
  .glvSlide .ktvFloor .ktvFrame{width:100%;padding:8px;box-sizing:border-box}   /* denah KTV landscape: selebar layar */
  .glvSlide .c1g-head{margin-bottom:8px}
}

/* Logo mode tamu: ukuran sama dengan logo halaman login (.ltopLogo img) */
body.guestMode .gbLogo{height:clamp(54px,5.8vw,78px)}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  body.guestMode .gbLogo{height:58px}
}

/* ═══ Judul "Upcoming Event": Montserrat ExtraBold (geometric sans-serif tebal) ═══
   HP & tablet potret: "UPCOMING" di atas, "EVENT" di bawah. Desktop tetap satu baris. */
.lschTitle,.gevHead{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase}
.utW{display:inline}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lschTitle .utW,.gevHead .utW{display:block}
  .lschTitle,.gevHead{line-height:1.02;letter-spacing:-.01em}
  .gevHead{font-size:clamp(26px,8vw,40px)}
}

/* ═══ Tagline "HIDUPKAN MALAM DI HADES VIP.": Montserrat ExtraBold, ukuran diperbesar sedikit ═══ */
.ltag{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:clamp(29px,3.2vw,50px)}
@media(min-width:761px) and (max-height:760px) and (min-height:481px){ .ltag{font-size:clamp(27px,2.8vw,40px)} }
@media(max-height:480px) and (min-width:761px){ .ltag{font-size:24px} }
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .ltag{align-self:stretch;width:100%;box-sizing:border-box;font-size:min(40px,calc((100vw - 40px)/11.6));letter-spacing:-.015em;white-space:nowrap}   /* selalu 2 baris: HIDUPKAN MALAM / DI HADES VIP. */
  .ltag .ltL1,.ltag .ltL2{white-space:nowrap}
}

/* ═══ Tab lantai tamu (HP): satu lantai tampil, ganti dengan fade + geser tipis ═══
   Menggantikan pager scroll-snap yang bisa terpental balik ke Club Lt 1 */
@media(max-width:760px),(orientation:landscape) and (max-height:500px) and (max-width:1100px){
  .glvPager{display:block;overflow:visible;scroll-snap-type:none;height:auto!important}
  .glvSlide{display:none;flex:none;scroll-snap-align:none}
  .glvSlide.on{display:block;animation:glvFade .34s cubic-bezier(.22,.8,.3,1) both}
  .glvSlide.on.fromR{animation:glvFromR .7s cubic-bezier(.25,.8,.25,1) both}
  .glvSlide.on.fromL{animation:glvFromL .7s cubic-bezier(.25,.8,.25,1) both}
}
@keyframes glvFade{from{opacity:0}to{opacity:1}}
@keyframes glvFromR{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes glvFromL{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .glvSlide.on,.glvSlide.on.fromR,.glvSlide.on.fromL{animation:none} }

/* Anti-kedip: render ulang karena update data tidak memutar ulang animasi */
#guestLayoutView.glvNoAnim .glvSlide.on{animation:none!important}

/* ═══ Layar "Upcoming Events" tamu: tanpa scroll — semua muat dalam satu layar ═══ */
html:has(body.guestMode.gStageEvents),
body.guestMode.gStageEvents{overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:none}
body.guestMode.gStageEvents #content{padding-bottom:52px}
body.guestMode.gStageEvents #guestEventsView{margin:0}
body.guestMode.gStageEvents .gevRow{overflow-y:hidden}
/* Card lebih manjang (poster 4:5); sisa tinggi layar dipakai poster, elemen lain dirapatkan agar tetap tanpa scroll */
body.guestMode.gStageEvents .gevMedia{max-height:max(110px,calc(100vh - 466px));max-height:max(110px,calc(100dvh - 466px));margin-bottom:10px}
body.guestMode.gStageEvents .gevHead{margin:0 0 10px}
body.guestMode.gStageEvents .gevRow{padding-top:2px;padding-bottom:6px}
body.guestMode.gStageEvents .gevCard{padding:12px}
body.guestMode.gStageEvents .gevBtn{padding:14px 12px}
body.guestMode.gStageEvents .gevGrow{min-height:8px}
body.guestMode.gStageEvents .gevPlain2{margin-top:6px}
@media(max-height:640px){
  body.guestMode.gStageEvents .gevHead{margin:0 0 8px;font-size:clamp(22px,6.5vw,30px)}
  body.guestMode.gStageEvents .gevBtn{padding:12px}
}

/* ═══ Layar tamu: kalender inline menggantikan carousel Upcoming Events ═══ */
.gcalInline{width:100%;display:flex;justify-content:center}
.gcalInline .gcalSheet{width:min(100%,400px);transform:none;border-radius:22px;border:1px solid rgba(255,255,255,.1);padding:18px 16px 14px;transition:none}
body.guestMode.gStageEvents .gcalInline{animation:gRise .7s var(--g-ease) .12s both}
body.guestMode.gStageEvents .gcalInline .gcalSheet{padding-bottom:14px}
@media (max-height:700px){
  .gcalInline .gcalCell{aspect-ratio:1/.8;font-size:14px}
  .gcalInline .gcalSheet{padding:12px 12px 8px}
  .gcalInline .gcalTop{margin-bottom:8px}
  .gcalInline .gcalFoot{margin-top:8px;padding-top:8px}
}
@media (prefers-reduced-motion:reduce){ body.guestMode .gcalInline{animation:none!important} }

/* ═══ Kalender tamu — kotak per tanggal berisi nama event (gaya kalender editorial), warna tema emas-hitam ═══ */
.gcalSheet{width:min(100%,720px)}
.gcalInline .gcalSheet{width:min(100%,720px);padding:16px 14px 12px}
.gcalWk,.gcalGrid{gap:4px}
.gcalWk span{font-weight:600;font-size:11px}
.gcalCell{aspect-ratio:1/1.4;border-radius:8px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;
  padding:5px 5px 4px;text-align:left;overflow:hidden;min-width:0;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.gcalCell.gcalVoid{background:none;box-shadow:none}
.gcalD{font-size:clamp(12px,3.4vw,16px);font-weight:700;line-height:1;color:#fff}
.gcalN{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;width:100%;
  font-size:clamp(6.5px,1.85vw,11.5px);font-weight:700;line-height:1.14;letter-spacing:0;text-transform:uppercase;
  color:#f3d98a;overflow-wrap:break-word;word-break:normal;hyphens:auto;margin:auto 0 0}
button.gcalCell:hover{background:rgba(255,255,255,.08)}
.gcalOff{color:#4a4a52}
.gcalOff .gcalD{color:#55555d}
.gcalOff.gcalEv .gcalN{color:#7a6d45}
.gcalEv,.gcalInline .gcalEv{background:linear-gradient(160deg,rgba(240,207,110,.2),rgba(201,168,76,.09));
  box-shadow:inset 0 0 0 1px rgba(232,194,94,.55);color:inherit}
.gcalEv::after,.gcalInline .gcalEv::after{display:none}
.gcalOff.gcalEv,.gcalInline .gcalOff.gcalEv{background:rgba(201,168,76,.05);box-shadow:inset 0 0 0 1px rgba(201,168,76,.18)}
button.gcalEv:hover,.gcalInline button.gcalEv:hover{background:linear-gradient(160deg,rgba(246,217,127,.3),rgba(212,178,85,.15))}
.gcalToday,.gcalInline .gcalToday{box-shadow:inset 0 0 0 2px #e8c25e,0 0 14px rgba(232,194,94,.28);color:inherit}
.gcalToday .gcalD{color:#e8c25e}
.gcalToday.gcalEv,.gcalInline .gcalToday.gcalEv{background:linear-gradient(145deg,#f0cf6e,#c9a84c);box-shadow:0 0 0 2px #fff3c4,0 4px 14px rgba(201,168,76,.4)}
.gcalToday.gcalEv .gcalD,.gcalToday.gcalEv .gcalN{color:#1a1405}
.gcalKey i,.gcalInline .gcalKey i{width:14px;height:11px;border-radius:3px;background:linear-gradient(160deg,rgba(240,207,110,.35),rgba(201,168,76,.15));box-shadow:inset 0 0 0 1px rgba(232,194,94,.7)}
/* Tombol pintasan "Hari ini" */
.gcalNow{padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,#f0cf6e,#c9a84c);color:#1a1405;font-weight:700;letter-spacing:.02em;box-shadow:0 3px 12px rgba(201,168,76,.3);transition:transform .12s ease,filter .2s ease}
.gcalNow:hover{filter:brightness(1.07)}
.gcalNow:active{transform:scale(.95)}
@media(min-width:700px){
  .gcalCell{aspect-ratio:1/.78;padding:7px 8px 6px;gap:4px;border-radius:10px}
  .gcalD{font-size:17px}
  .gcalN{font-size:12.5px;-webkit-line-clamp:3}
  .gcalWk,.gcalGrid{gap:6px}
}
@media(max-height:700px){
  .gcalInline .gcalCell{aspect-ratio:1/1.1;font-size:inherit}
  .gcalInline .gcalSheet{padding:10px 10px 8px}
}
@media(max-height:820px) and (min-width:700px){ .gcalInline .gcalCell{aspect-ratio:1/.8} .gcalD{font-size:15px} .gcalN{font-size:10.5px;line-height:1.1} }
@media(max-width:480px){ .gcalWk,.gcalGrid{gap:3px} .gcalCell{padding:4px 3px 3px;border-radius:6px} .gcalInline .gcalSheet{padding:12px 8px 10px} }

/* ═══ Perbaikan: tombol MORE di halaman login tidak bisa diklik ═══
   Kotak .lleft (tagline + chip sosmed) selebar layar dan z-index-nya sama dengan .lsch, sehingga di
   laptop (mis. 1440×900, 1536×864) bagian atasnya menimpa tombol MORE dan "menelan" klik.
   .lsch dinaikkan di atas .lleft (tetap di bawah header & dropdown login z-index 5–7),
   dan .lleft hanya menerima klik pada elemen interaktifnya sendiri (chip sosmed). */
.lsch{z-index:3}
.lleft{pointer-events:none}
.lleft a,.lleft button,.lleft [role="button"],.lleft .lsocItem{pointer-events:auto}

/* ═══ Kalender tamu — desain simpel & modern (v152) ═══
   Tanpa kotak/garis per tanggal: angka bersih di tengah, hari ini = lingkaran emas,
   hari event = latar emas lembut + nama event kecil di bawah angka. */
.gcalSheet,.gcalInline .gcalSheet{width:min(100%,460px);padding:20px 16px 16px;border-radius:28px;
  background:linear-gradient(180deg,#151515,#0e0e0e);border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.gcalTop{margin-bottom:18px;padding:0 2px}
.gcalTtl{font-size:20px;font-weight:700;letter-spacing:-.2px}
.gcalTtl span{font-weight:400;color:#8c8c96}
.gcalNav{width:36px;height:36px;border:0;background:rgba(255,255,255,.06);font-size:18px}
.gcalNav:hover:not(:disabled){background:rgba(255,255,255,.12)}
.gcalWk,.gcalGrid{gap:2px}
.gcalWk{margin-bottom:4px}
.gcalWk span{font-size:11px;font-weight:500;letter-spacing:.6px;color:#6f6f79}
.gcalCell{aspect-ratio:1/1.18;border-radius:14px;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  padding:7px 2px 4px;text-align:center;background:none;box-shadow:none}
.gcalCell.gcalVoid{background:none;box-shadow:none}
.gcalD{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  font-size:15px;font-weight:500;color:#ececf0;flex-shrink:0}
.gcalN{margin:0;text-align:center;font-size:clamp(6.5px,1.9vw,9px);font-weight:600;letter-spacing:.2px;line-height:1.15;
  -webkit-line-clamp:3;color:#e8c25e}
button.gcalCell:hover{background:rgba(255,255,255,.06)}
.gcalOff{color:#4a4a52}
.gcalOff .gcalD{color:#4f4f57}
.gcalOff.gcalEv .gcalN{color:#6f6446}
/* hari event: latar emas lembut, tanpa garis */
.gcalEv,.gcalInline .gcalEv{background:rgba(232,194,94,.1);box-shadow:none}
button.gcalEv:hover,.gcalInline button.gcalEv:hover{background:rgba(232,194,94,.18)}
.gcalOff.gcalEv,.gcalInline .gcalOff.gcalEv{background:rgba(232,194,94,.04);box-shadow:none}
/* hari ini: angka dalam lingkaran emas */
.gcalToday,.gcalInline .gcalToday{box-shadow:none;color:inherit}
.gcalToday .gcalD{background:#e8c25e;color:#17130a;font-weight:700}
.gcalToday.gcalEv,.gcalInline .gcalToday.gcalEv{background:rgba(232,194,94,.1);box-shadow:none}
.gcalToday.gcalEv .gcalD{color:#17130a}
.gcalToday.gcalEv .gcalN{color:#e8c25e}
.gcalFoot{border-top:0;margin-top:14px;padding-top:0}
.gcalKey{color:#8c8c96}
.gcalKey i,.gcalInline .gcalKey i{width:12px;height:12px;border-radius:4px;background:rgba(232,194,94,.22);box-shadow:none}
.gcalNow{padding:8px 18px;background:rgba(232,194,94,.14);color:#e8c25e;box-shadow:none;font-weight:600}
.gcalNow:hover{filter:none;background:rgba(232,194,94,.24)}
@media (max-height:700px){
  .gcalInline .gcalCell{aspect-ratio:1/1;padding-top:5px}
  .gcalD{width:24px;height:24px;font-size:14px}
}
/* v152b: tinggi kotak mengikuti isi supaya nama event tidak terpotong */
.gcalCell{aspect-ratio:auto;min-height:clamp(50px,13.5vw,62px);padding:6px 1px 5px;overflow:visible}
.gcalInline .gcalSheet{padding:18px 12px 14px}
.gcalN{width:100%;padding:0 1px;font-size:clamp(6px,1.7vw,8.5px);letter-spacing:0;-webkit-line-clamp:4;
  overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-height:700px){ .gcalInline .gcalCell{aspect-ratio:auto;min-height:44px} }
/* v153: judul di atas kalender tamu */
.gevCalHead{font-size:clamp(20px,5.4vw,28px);letter-spacing:.5px;margin:2px 0 14px}
@media (max-height:700px){ .gevCalHead{font-size:18px;margin:0 0 8px} }

/* ═══ Kalender tamu v156 — kartu berwarna ala poster jadwal ═══ */
.gcalInline{display:block}
.gtWrap{width:min(100%,720px);margin:0 auto}
.gtTop{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;padding:0 2px}
.gtGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){ .gtGrid{grid-template-columns:repeat(3,1fr);gap:12px} }
.gtTile{position:relative;display:block;aspect-ratio:1/1.28;padding:0;border:0;border-radius:4px;overflow:hidden;cursor:pointer;
  background:var(--c1);color:var(--ink);font-family:'Montserrat','Outfit',sans-serif;text-align:left;
  transition:transform .18s ease,filter .2s ease}
.gtTile:hover{filter:brightness(1.07)}
.gtTile:active{transform:scale(.97)}
.gtTile.gtToday{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #e8c25e}
.gtImg{position:absolute;left:0;right:0;top:0;height:68%;width:100%;object-fit:cover;opacity:0;mix-blend-mode:multiply;transition:opacity .4s ease}
.gtImg.on{opacity:.3}
.gtMon{position:absolute;left:9px;top:10px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(13px,3.8vw,18px);font-weight:800;letter-spacing:.06em;line-height:1;color:var(--ink)}
.gtDay{position:absolute;left:calc(clamp(13px,3.8vw,18px) + 16px);top:2px;right:6px;font-size:clamp(58px,19vw,96px);font-weight:800;
  line-height:.92;letter-spacing:-.04em;color:var(--ink);white-space:nowrap}
@media(min-width:560px){ .gtDay{font-size:clamp(60px,10vw,92px)} }
.gtBand{position:absolute;left:0;right:0;bottom:0;height:32%;padding:6px 8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--c2);text-align:center}
.gtName{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(9px,2.6vw,12px);font-weight:400;
  letter-spacing:.07em;line-height:1.2;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
.gtSub{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(10px,2.9vw,13px);font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.gtEmpty{padding:48px 12px;text-align:center;font-size:14px;color:#8c8c96;border:1px dashed rgba(255,255,255,.14);border-radius:8px}
.gtFoot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.gtLink{background:none;border:0;padding:8px 2px;color:#8c8c96;font-family:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gtLink:hover{color:#fff}
@media(prefers-reduced-motion:reduce){ .gtTile,.gtImg{transition:none} }
/* v157: nama event jadi teks utama di dalam kartu (tebal, besar, sampai 3 baris); band jadi baris kedua */
.gtBand{height:38%;gap:4px;padding:6px 8px 9px}
.gtName{-webkit-line-clamp:3;font-size:clamp(11px,3.3vw,15px);font-weight:800;letter-spacing:.03em;line-height:1.15}
.gtSub{font-size:clamp(9px,2.6vw,12px);font-weight:500;letter-spacing:.08em;opacity:.85}
.gtImg{height:62%}

/* v158: kartu untuk SETIAP tanggal dalam sebulan — hari event berwarna + nama event, hari biasa polos gelap */
.gtGrid{grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:600px){ .gtGrid{grid-template-columns:repeat(4,1fr);gap:10px} }
.gtTile{aspect-ratio:1/1.3}
.gtMon{left:6px;top:8px;font-size:clamp(10px,2.9vw,14px)}
.gtDay{left:calc(clamp(10px,2.9vw,14px) + 12px);top:2px;right:3px;font-size:clamp(40px,13.5vw,66px)}
@media(min-width:600px){ .gtDay{font-size:clamp(52px,9vw,78px)} .gtMon{font-size:15px} }
.gtBand{height:36%;padding:4px 5px 6px;gap:2px}
.gtName{-webkit-line-clamp:3;font-size:clamp(8.5px,2.5vw,11.5px);letter-spacing:.02em;line-height:1.12}
.gtSub{font-size:clamp(8px,2.2vw,10.5px)}
/* hari biasa (tanpa event) */
.gtPlain{--c1:#1b1b1d;--c2:#131314;--ink:#e9e9ee}
.gtPlain .gtDay{color:#e9e9ee;opacity:.9}
.gtPlain .gtMon{color:#7d7d88}
.gtPlain .gtSub{color:#7d7d88;font-weight:600;opacity:1}
/* hari yang sudah lewat */
.gtOff{opacity:.32;cursor:default;pointer-events:none;filter:grayscale(.35)}

/* v160: kalender tamu — 5 kolom × 3 baris (15 kotak), nama hari di dalam kotak, kotak pertama = hari ini */
.gtWrap{width:min(100%,760px);container-type:inline-size}
.gtGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media(max-width:560px){ .gtGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .gtGrid>.gtTile:nth-child(n+13){display:none} }   /* HP: 4×3 = 12 kotak */
.gtTile{aspect-ratio:1/1.3;border-radius:4px}
.gtMon{left:5px;top:7px;font-size:max(7px,2.6cqw)}
.gtDay{left:calc(max(7px,2.6cqw) + 8px);top:2px;right:1px;font-size:11.2cqw;letter-spacing:-.05em}
.gtBand{height:36%;padding:3px 3px 5px;gap:1px}
.gtName{-webkit-line-clamp:3;font-size:max(6.5px,1.9cqw);letter-spacing:.01em;line-height:1.1;overflow-wrap:anywhere}
.gtSub{font-size:max(6px,1.7cqw)}
.gtTile.gtToday{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #e8c25e}
.gtTopOne{justify-content:center}
/* judul kalender tamu: font sama dengan kotak kalender (Montserrat) */


@media(max-width:560px){ .gtMon{left:6px;top:8px;font-size:max(8px,3.2cqw)} .gtDay{left:calc(max(8px,3.2cqw) + 10px);font-size:14.2cqw} .gtName{font-size:max(7.5px,2.4cqw)} .gtSub{font-size:max(7px,2.1cqw)} }

/* v160 mobile maks: kotak selebar layar (4 kolom) dan setinggi sisa layar (3 baris), halaman tamu tidak bisa digulir */
@media(max-width:560px){
  .gtWrap{width:calc(100% + 12px);margin:0 -6px}
  .gtGrid{gap:4px;grid-auto-rows:min(calc((100vh - 290px)/3),38cqw);grid-auto-rows:min(calc((100dvh - 290px)/3),38cqw)}
  .gtTile{aspect-ratio:auto;height:100%;border-radius:4px}
  .gtMon{left:6px;top:8px;font-size:max(9px,3.4cqw)}
  .gtDay{left:calc(max(9px,3.4cqw) + 9px);top:3px;right:1px;font-size:13cqw}
  .gtBand{height:34%;padding:3px 3px 5px}
  .gtName{font-size:max(8px,2.5cqw);line-height:1.1}
  .gtSub{font-size:max(7.5px,2.2cqw)}
  .gtTopOne{margin-bottom:6px}
}

/* judul "Check Our Calendar": font Michroma (SIL OFL), besar */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/michroma-latin-400-normal.woff2') format('woff2'),url('fonts/michroma-latin-400-normal.woff') format('woff')}
body.guestMode .gevCalHead{font-family:'Michroma','Montserrat','Outfit',sans-serif;font-weight:400;font-size:clamp(20px,5.2vw,46px);letter-spacing:.02em;line-height:1.1;margin:6px 0 16px}
@media(max-width:560px){ .gtGrid{grid-auto-rows:min(calc((100vh - 280px)/3),38cqw);grid-auto-rows:min(calc((100dvh - 280px)/3),38cqw)} }

/* v160 jarak: judul diberi ruang atas-bawah, jarak antar kotak dilonggarkan, kalender di tengah */
body.guestMode.gStageEvents .gevCalHead{margin:16px 0 30px}
.gtWrap{margin-left:auto;margin-right:auto}
.gtGrid{gap:14px}
@media(max-width:560px){
  body.guestMode.gStageEvents .gevCalHead{margin:10px 0 18px}
  .gtWrap{width:calc(100% + 12px);margin:0 -6px}
  .gtGrid{gap:7px;grid-auto-rows:min(calc((100vh - 305px)/3),38cqw);grid-auto-rows:min(calc((100dvh - 305px)/3),38cqw)}
}

/* judul agak tebal: Michroma hanya punya satu bobot, jadi ditebalkan dengan garis tepi tipis */
body.guestMode .gevCalHead{-webkit-text-stroke:.03em currentColor;paint-order:stroke fill;letter-spacing:.03em}

/* mobile: kalender sedikit lebih turun dari judul */
@media(max-width:560px){
  body.guestMode.gStageEvents .gevCalHead{margin:10px 0 34px}
  .gtGrid{grid-auto-rows:min(calc((100vh - 325px)/3),38cqw);grid-auto-rows:min(calc((100dvh - 325px)/3),38cqw)}
}

/* akhir pekan (Jumat & Sabtu): hanya tulisan yang beda — emas; yang ada event diberi efek glitch */
.gtPlain.gtWknd .gtDay{color:#f0cf6e;opacity:1}
.gtPlain.gtWknd .gtMon{color:#c9a84c}
.gtPlain.gtWknd .gtSub{color:#e8c25e}
@keyframes gtGlitch{
  0%,80%,100%{transform:none;text-shadow:none;clip-path:none}
  81%{transform:translate(-3px,0);text-shadow:3px 0 #ff2d6f,-3px 0 #22e3ff;clip-path:inset(0 0 60% 0)}
  83%{transform:translate(3px,-1px);text-shadow:-3px 0 #ff2d6f,3px 0 #22e3ff;clip-path:inset(45% 0 0 0)}
  85%{transform:translate(-2px,1px) skewX(-10deg);text-shadow:4px 0 #ff2d6f,-4px 0 #22e3ff;clip-path:none}
  87%{transform:translate(2px,0);text-shadow:-2px 0 #ff2d6f,2px 0 #22e3ff;clip-path:inset(25% 0 30% 0)}
  89%{transform:translate(-1px,0) skewX(6deg);text-shadow:3px 1px #ff2d6f,-3px -1px #22e3ff;clip-path:none}
  91%{transform:none;text-shadow:2px 0 #ff2d6f,-2px 0 #22e3ff;clip-path:inset(60% 0 5% 0)}
  93%{transform:none;text-shadow:none;clip-path:none}
}
/* glitch HANYA di tulisan nama event (semua kartu yang punya event); angka tanggal & bulan tidak ikut */
.gtTile:not(.gtPlain) .gtName{animation:gtGlitch 3.4s steps(1,end) infinite;will-change:transform}
.gtTile:not(.gtPlain):nth-child(2n) .gtName{animation-delay:.7s}
.gtTile:not(.gtPlain):nth-child(3n) .gtName{animation-delay:1.4s}
.gtTile:not(.gtPlain):nth-child(5n) .gtName{animation-delay:2.1s}
.gtTile:not(.gtPlain):hover .gtName{animation-duration:1.1s}
@media(prefers-reduced-motion:reduce){ .gtTile:not(.gtPlain) .gtName{animation:none} }
/* tulisan event (nama + baris di bawahnya) rata kiri; kartu tanpa event tetap di tengah */
.gtTile:not(.gtPlain) .gtBand{align-items:flex-start;text-align:left;padding-left:max(6px,1.8cqw)}
.gtTile:not(.gtPlain) .gtName,.gtTile:not(.gtPlain) .gtSub{text-align:left;width:100%}
/* glitch juga di angka tanggal event (kartu yang punya event saja) */
.gtTile:not(.gtPlain) .gtDay{animation:gtGlitch 3.4s steps(1,end) infinite;will-change:transform}
.gtTile:not(.gtPlain):nth-child(2n) .gtDay{animation-delay:.7s}
.gtTile:not(.gtPlain):nth-child(3n) .gtDay{animation-delay:1.4s}
.gtTile:not(.gtPlain):nth-child(5n) .gtDay{animation-delay:2.1s}
.gtTile:not(.gtPlain):hover .gtDay{animation-duration:1.1s}
@media(prefers-reduced-motion:reduce){ .gtTile:not(.gtPlain) .gtDay{animation:none} }
/* v165: tulisan di dalam kartu diperbesar; ukuran kartu tetap (pita bawah sedikit lebih tinggi untuk memuat teks) */
.gtMon{font-size:max(8px,3cqw)}
.gtBand{height:41%;gap:2px}
.gtName{font-size:max(8px,2.35cqw);letter-spacing:0;line-height:1.1}
.gtSub{font-size:max(7px,2cqw)}
@media(max-width:560px){
  .gtMon{font-size:max(10px,3.8cqw)}
  .gtBand{height:42%}
  .gtName{font-size:max(9px,3cqw)}
  .gtSub{font-size:max(8px,2.6cqw)}
}
/* v167: garis neon futuristik di bawah kalender */
.gtWrap::after{content:'';display:block;position:relative;height:2px;margin:18px 0 6px;border-radius:2px;
  background:
    linear-gradient(90deg,transparent 0,rgba(255,255,255,.95) 50%,transparent 100%) 0 0/28% 100% no-repeat,
    linear-gradient(90deg,transparent 0,#22e3ff 18%,#e8c25e 50%,#ff2d6f 82%,transparent 100%);
  box-shadow:0 0 6px #22e3ff,0 0 14px rgba(34,227,255,.65),0 0 28px rgba(255,45,111,.4),0 6px 22px rgba(34,227,255,.25);
  animation:gtNeonRun 3.2s linear infinite,gtNeonPulse 2.4s ease-in-out infinite alternate}
@keyframes gtNeonRun{0%{background-position:-30% 0,0 0}100%{background-position:130% 0,0 0}}
@keyframes gtNeonPulse{from{filter:brightness(.85)}to{filter:brightness(1.35)}}
@media(prefers-reduced-motion:reduce){ .gtWrap::after{animation:none} }
/* v169: tombol keluar tamu = ikon rumah bergaya kotak kalender (gelap, sudut 4px, emas) */
.gbOut{display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:4px;
  background:#1b1b1d;border:1px solid rgba(232,194,94,.35);color:#e8c25e;font-size:0;letter-spacing:0;
  transition:filter .2s ease,box-shadow .2s ease,transform .1s ease}
.gbOut svg{display:block;width:26px;height:26px;filter:drop-shadow(0 0 4px rgba(232,194,94,.45))}
.gbOut:hover{filter:brightness(1.15);box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #e8c25e}
.gbOut:active{transform:scale(.95)}
/* v171: ikon rumah tanpa kotak, ukuran sama dengan logo (mengikuti tinggi .gbLogo) */
body.guestMode .gbOut{width:auto;height:auto;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
body.guestMode .gbOut:hover{filter:brightness(1.2);box-shadow:none}
body.guestMode .gbOut svg{width:clamp(54px,5.8vw,78px);height:clamp(54px,5.8vw,78px);filter:drop-shadow(0 0 8px rgba(232,194,94,.4))}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  body.guestMode .gbOut svg{width:58px;height:58px}
}
/* v172: halaman denah tamu bergaya kalender — kartu tanggal berwarna, kotak gelap sudut 4px, Montserrat */
body.guestMode #guestSelEvent{border-radius:4px;background:#161618;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 24px rgba(0,0,0,.5);font-family:'Montserrat','Outfit',sans-serif;gap:14px;padding:10px 14px 10px 10px}
body.guestMode .gsePoster{flex:0 0 clamp(84px,22vw,108px);width:clamp(84px,22vw,108px);height:auto;aspect-ratio:1/1.28;border-radius:4px;display:block;
  background:var(--c1);color:var(--ink)}
body.guestMode .gsePoster img{display:block;position:absolute;left:0;right:0;top:0;width:100%;height:68%;object-fit:cover;opacity:0;mix-blend-mode:multiply;transition:opacity .4s ease}
body.guestMode .gsePoster.has img{opacity:.3}
body.guestMode .gsePoster .gseMon,body.guestMode .gsePoster.has .gseMon{display:block;position:absolute;left:7px;top:9px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(10px,2.8vw,13px);font-weight:800;letter-spacing:.1em;line-height:1;color:var(--ink)}
body.guestMode .gsePoster .gseDay,body.guestMode .gsePoster.has .gseDay{display:block;position:absolute;left:calc(clamp(10px,2.8vw,13px) + 12px);right:2px;top:3px;
  font-size:clamp(40px,10.5vw,54px);font-weight:800;line-height:.92;letter-spacing:-.05em;white-space:nowrap;color:var(--ink)}
body.guestMode .gsePoster .gseDow{position:absolute;left:0;right:0;bottom:0;height:32%;display:flex;align-items:center;justify-content:center;background:var(--c2);
  font-style:normal;font-size:clamp(8px,2.2vw,10.5px);font-weight:700;letter-spacing:.14em;color:var(--ink)}
body.guestMode .gseName{font-family:'Montserrat','Outfit',sans-serif;font-weight:800;font-size:clamp(14px,3.6vw,20px);letter-spacing:.03em;
  animation:gtGlitch 3.4s steps(1,end) infinite}
body.guestMode .gseSub{font-weight:500;letter-spacing:.08em;margin-top:4px}
body.guestMode .gseRow em{font-family:'Montserrat','Outfit',sans-serif;font-weight:800}
body.guestMode .gseCnt span{font-family:'Montserrat','Outfit',sans-serif;font-weight:800}
/* tombol "Pilih Event Lain" = kotak gelap sudut 4px seperti kartu kalender */
body.guestMode .gBack{border-radius:4px;background:#1b1b1d;border:1px solid rgba(232,194,94,.35);font-family:'Montserrat','Outfit',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body.guestMode .gBack:hover{background:#1b1b1d;filter:brightness(1.15);box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px #e8c25e}
/* judul lantai */
body.guestMode #guestLayoutView .c1g-ttl{font-family:'Montserrat','Outfit',sans-serif;font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#e8c25e}
@media(prefers-reduced-motion:reduce){ body.guestMode .gseName{animation:none} }
/* v173: kotak info event + bingkai & kotak denah disamakan dengan kalender (sudut 4px, gelap #1b1b1d/#131314, Montserrat 800); tanpa glitch */
body.guestMode .gseName{animation:none !important;font-size:clamp(16px,4.2vw,26px);line-height:1.1;letter-spacing:.03em;color:#fff}
body.guestMode .gseInfo{display:flex;flex-direction:column;justify-content:center;align-self:stretch}
body.guestMode .gseSub{font-size:clamp(9px,2.5vw,12px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7d7d88;margin-top:6px}
body.guestMode .gseCnt{align-self:center;gap:6px}
body.guestMode .gseRow em{font-size:clamp(9px,2.4vw,11px);letter-spacing:.14em}
body.guestMode .gseCnt span{font-size:clamp(15px,3.6vw,20px)}
/* bingkai & lantai */
body.guestMode #guestLayoutView .c1-wrap,body.guestMode #guestLayoutView .ktvFrame{border-radius:4px !important;background:#131314 !important;border:1px solid rgba(255,255,255,.06) !important}
body.guestMode #guestLayoutView .c1floor,body.guestMode #guestLayoutView .ktvFloorBg{border-radius:4px !important;background:#1b1b1d !important;border:1px solid rgba(255,255,255,.08) !important}
/* panggung & bar: seperti pita bawah kartu kalender */
body.guestMode #guestLayoutView .c1stage{background:#131314 !important;border:1px solid rgba(255,255,255,.1) !important}
body.guestMode #guestLayoutView .c1stage span,body.guestMode #guestLayoutView .c1counter span,body.guestMode #guestLayoutView .c2barbox span{font-family:'Montserrat','Outfit',sans-serif !important;font-weight:800 !important;letter-spacing:.2em !important;color:#7d7d88 !important}
body.guestMode #guestLayoutView .c1counter{background:#131314 !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:4px !important}
body.guestMode #guestLayoutView .c1bar,body.guestMode #guestLayoutView .c1stool,body.guestMode #guestLayoutView .c1stair{border-radius:4px !important}
/* kotak area (booth) & ruang */
body.guestMode #guestLayoutView .c1b{border-radius:4px !important;background:rgba(var(--rgb,255,255,255),.1) !important;border:1px solid rgba(var(--rgb,255,255,255),.4) !important}
body.guestMode #guestLayoutView .c2room,body.guestMode #guestLayoutView .ktvRoom.c1t{border-radius:4px !important}
/* kotak meja: angka tebal Montserrat seperti angka tanggal */
body.guestMode #guestLayoutView .c1t{font-family:'Montserrat','Outfit',sans-serif;font-weight:800;border-radius:4px !important}
body.guestMode #guestLayoutView .c2room b,body.guestMode #guestLayoutView .ktvRoom .ktvNo{font-family:'Montserrat','Outfit',sans-serif;font-weight:800}
/* legenda area: kotak gelap sudut 4px, teks seperti pita kartu */
body.guestMode #guestLayoutView .c1lg{border-radius:4px !important;background:#1b1b1d !important;border:0 !important}
body.guestMode #guestLayoutView .c1lg-sw{border-radius:2px !important}
body.guestMode #guestLayoutView .c1lg-name{font-family:'Montserrat','Outfit',sans-serif !important;font-weight:800 !important;font-size:12px !important;letter-spacing:.08em !important;text-transform:uppercase}
body.guestMode #guestLayoutView .c1lg-sub,body.guestMode #guestLayoutView .c1lg-mc,body.guestMode #guestLayoutView .glv-legend,body.guestMode #guestLayoutView .glv-area-legend-title{font-family:'Montserrat','Outfit',sans-serif;font-weight:600;letter-spacing:.06em}
body.guestMode #guestLayoutView .glv-area-legend-title{font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#e8c25e}


/* ═══ v175: bar atas tamu = navigasi halaman login (logo → halaman awal, tombol Menu), menempel di atas saat scroll ═══ */
body.guestMode .guestBanner{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 -18px 18px;padding:max(8px,env(safe-area-inset-top)) 18px 8px;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;
  background:rgba(8,8,6,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.guestMode .gbHomeLink{display:block;line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.guestMode .gbHomeLink .gbLogo{height:clamp(48px,4.6vw,64px)}
body.guestMode .gbNav{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
body.guestMode .lmenuBg{z-index:200}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  body.guestMode .guestBanner{margin-left:-12px;margin-right:-12px;padding-left:16px;padding-right:16px}
  body.guestMode .gbHomeLink .gbLogo{height:46px}
}

/* v178: 3 tombol navigasi tamu (Calendar · Contact Us · Menu) */
body.guestMode .gbNav{gap:clamp(8px,1.2vw,16px)}
body.guestMode .gbNav .ltopBtn{white-space:nowrap}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  body.guestMode .gbNav{gap:6px}
  body.guestMode .gbNav .ltopBtn{height:30px;padding:0 9px;font-size:11px}
}

/* ═══ v179: halaman Contact Us tamu (alamat · jam · telepon · peta · sosial) ═══ */
body.guestMode.gStageContact #guestSelEvent,
body.guestMode.gStageContact #guestLayoutView,
body.guestMode.gStageContact #guestEventsView,
body.guestMode.gStageContact #guestBackBtn,
body.guestMode.gStageContact #guestHomeBtn,
body.guestMode.gStageContact .ctrlBar,
body.guestMode.gStageContact #waitPanel{display:none!important}
#guestContactView{padding:6px 0 24px}
.gcBox{max-width:520px;padding:6px 2px 8px;animation:gFade .4s ease both}
.gcLbl{margin:26px 0 8px;font-family:'Montserrat','Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2)}
.gcBox>.gcLbl:first-child{margin-top:8px}
.gcTxt{margin:0 0 4px;font-family:'Outfit','Raleway',sans-serif;font-size:16px;line-height:1.6;color:#a9a9b3}
.gcTxt a{color:inherit;text-decoration:none}
.gcTxt a:hover{color:#fff}
a.gcLink{display:inline-block;margin-top:22px;text-decoration:none}
a.gcLink:hover{color:#fff}
.gcWa{display:flex;align-items:center;justify-content:center;margin:22px 0 0;height:46px;border-radius:4px;background:#25d366;color:#07140b;text-decoration:none;
  font-family:'Montserrat','Outfit',sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.gcWa:active{transform:scale(.98)}
.gcSoc{display:flex;gap:14px;margin-top:6px}
.gcSoc a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;transition:border-color .2s,color .2s}
.gcSoc a:hover{border-color:var(--gold2);color:var(--gold2)}
.gcSoc svg{width:20px;height:20px;display:block}

/* v180: ikon akun + dropdown Sign in di bar atas tamu (gaya halaman login) */
body.guestMode .gbNav .lacct{position:relative}
body.guestMode .ldrop{z-index:60}
.gLoginBtn{width:100%;height:46px;margin-top:6px;padding:0 22px;border:0;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(100deg,#8b6914 0%,var(--gold) 50%,var(--gold2) 100%);color:#1a1204;
  font-family:'Outfit','Raleway',sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gLoginBtn:disabled{opacity:.7;cursor:wait}
@media(max-width:520px){
  body.guestMode .gbHomeLink .gbLogo{height:38px}
  body.guestMode .guestBanner{padding-left:12px;padding-right:12px;gap:8px}
  body.guestMode .gbNav{gap:4px}
  body.guestMode .gbNav .ltopBtn{height:28px;padding:0 8px;font-size:10.5px}
  body.guestMode .gbNav .lacctBtn{height:32px;padding:0 2px;gap:2px}
  body.guestMode .gbNav .lacctIco{width:24px;height:24px}
  body.guestMode .gbNav .lacctChev{width:12px;height:12px}
}

/* v182: "← Pilih Event Lain" / "← Kembali" = teks abu-abu saja (tanpa kotak) */
body.guestMode .gBack,body.guestMode .gBack:hover{background:none;border:0;border-radius:0;box-shadow:none;filter:none;padding:4px 0;color:#8a8a93}
body.guestMode .gBack:hover{color:#c9c9d1}

/* v183: Contact Us — peta gelap + tombol "Buka di Maps" (gaya referensi) */
.gcBox{max-width:760px}
.gcMap{position:relative;width:100%;height:clamp(220px,46vw,340px);border-radius:6px;overflow:hidden;background:#161616;border:1px solid rgba(255,255,255,.08);margin:6px 0 0}
.gcMap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:invert(92%) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.92)}
.gcMapBtn{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:4px;
  background:rgba(28,28,30,.92);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;
  font-family:'Outfit','Raleway',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.gcMapBtn:hover{border-color:var(--gold2);color:var(--gold2)}
.gcMapBtn svg{width:14px;height:14px;display:block}
.gcName{margin:22px 0 0;font-family:'Montserrat','Outfit',sans-serif;font-size:clamp(22px,5vw,30px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.2}
.gcBox>.gcMap+.gcName+.gcLbl{margin-top:18px}

.gcTag{margin-left:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6f6f78}

/* v185: bar atas tamu menyatu dengan warna halaman; jadi solid hanya saat halaman di-scroll */
body.guestMode .guestBanner{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom-color:transparent!important;transition:background .2s ease,border-color .2s ease}
body.guestMode.gbScrolled .guestBanner{background:rgba(10,10,9,.97)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
  border-bottom-color:rgba(255,255,255,.08)!important}

/* v186: nama event panjang di kartu kalender tamu = rata kiri */
.gtTile.gtLong .gtBand{align-items:flex-start;text-align:left}
.gtTile.gtLong .gtName,.gtTile.gtLong .gtSub{text-align:left;align-self:flex-start;width:100%}

/* v187: bar atas tamu = warna sama persis dengan halaman di bawahnya.
   Sinar emas dipindah ke lapisan tetap di atas bar, jadi bar dan halaman terlihat satu warna. */
body.guestMode{background:#0a0a09!important}
body.guestMode::before{content:'';position:fixed;left:0;right:0;top:0;height:100vh;pointer-events:none;z-index:60;
  background:radial-gradient(ellipse 80% 40vh at 50% 0%,rgba(201,168,76,.13),transparent 70%)}
body.guestMode .guestBanner,body.guestMode.gbScrolled .guestBanner{background:#0a0a09!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom-color:transparent!important}
body.guestMode.gbScrolled .guestBanner{border-bottom-color:rgba(255,255,255,.06)!important}

/* v188: kartu event terpilih (tamu) — bila ada poster, tampilkan poster saja (tanpa bulan/tanggal/hari) */
body.guestMode .gsePoster.has,body.guestMode .gsePoster.wantImg{background:#131314}
body.guestMode .gsePoster.has .gseMon,body.guestMode .gsePoster.wantImg .gseMon,
body.guestMode .gsePoster.has .gseDay,body.guestMode .gsePoster.wantImg .gseDay,
body.guestMode .gsePoster.has .gseDow,body.guestMode .gsePoster.wantImg .gseDow{display:none!important}
body.guestMode .gsePoster.has img{top:0;height:100%;opacity:1;mix-blend-mode:normal}

/* v190: halaman kalender tamu — posisi di tengah layar + animasi lampu panggung (beam + kilatan) */
body.guestMode.gStageEvents #guestEventsView{display:flex!important;flex-direction:column;justify-content:center;min-height:calc(100svh - 200px)}
.gevLights{display:none}
body.guestMode.gStageEvents .gevLights{display:block;position:fixed;left:0;right:0;top:0;height:75vh;z-index:-1;pointer-events:none;overflow:hidden}
.gevLights i{position:absolute;top:-8px;left:var(--x);width:min(40vw,380px);height:100%;transform-origin:50% 0;
  background:linear-gradient(to bottom,var(--c) 0%,transparent 88%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
  mix-blend-mode:screen;opacity:.2;filter:blur(1.5px);
  animation:gBeamSwing var(--d) ease-in-out infinite alternate,gBeamPulse 3.1s ease-in-out infinite}
.gevLights i:nth-child(2){animation-delay:-1.7s,-.8s}
.gevLights i:nth-child(3){animation-delay:-3.1s,-1.6s}
.gevLights i:nth-child(4){animation-delay:-4.4s,-2.3s}
.gevLights::after{content:'';position:absolute;inset:0;opacity:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(255,255,255,.4),rgba(160,200,255,.12) 45%,transparent 75%);
  animation:gStrobe 8s linear infinite}
@keyframes gBeamSwing{from{transform:translateX(-50%) rotate(var(--a0))}to{transform:translateX(-50%) rotate(var(--a1))}}
@keyframes gBeamPulse{0%,100%{opacity:.14}50%{opacity:.38}}
@keyframes gStrobe{0%,89%,100%{opacity:0}90%{opacity:.95}90.8%{opacity:.1}91.6%{opacity:.8}93%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .gevLights i,.gevLights::after{animation:none} }

/* v191: Contact Us (tamu) — alamat footer bawah disembunyikan (sudah ada di halaman),
   tampilan mobile muat satu layar tanpa scroll, "Send via WhatsApp" = teks abu-abu saja */
body.guestMode.gStageContact::after{display:none!important}
body.guestMode.gStageContact #content{padding-bottom:16px}

.gcWa,.gcWa:hover,.gcWa:active{display:inline-flex;align-items:center;justify-content:flex-start;height:auto;margin:14px 0 0;padding:6px 0;border-radius:0;
  background:none;border:0;box-shadow:none;transform:none;color:#8a8a93;
  font-family:'Outfit','Raleway',sans-serif;font-size:14px;font-weight:500;letter-spacing:.02em;text-transform:none}
.gcWa:hover{color:#c9c9d1}

@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  html:has(body.guestMode.gStageContact),body.guestMode.gStageContact{height:100vh;height:100svh;overflow:hidden}
  body.guestMode.gStageContact #app{height:100vh;height:100svh;min-height:0!important;overflow:hidden}
  body.guestMode.gStageContact .guestBanner{flex-shrink:0;margin-bottom:6px}
  body.guestMode.gStageContact #content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0 0 max(12px,env(safe-area-inset-bottom))}
  body.guestMode.gStageContact #guestContactView{flex:1 1 auto;min-height:0;display:flex!important;flex-direction:column;padding:0}
  body.guestMode.gStageContact .gcBox{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;max-width:none;padding:0}
  body.guestMode.gStageContact .gBack{align-self:flex-start;margin:0 0 6px;padding:2px 0;font-size:12px}
  body.guestMode.gStageContact .gcMap{flex:1 1 0;height:auto;min-height:96px;margin:0}
  body.guestMode.gStageContact .gcMapBtn{top:8px;left:8px;height:30px;padding:0 11px;font-size:12px}
  body.guestMode.gStageContact .gcName{margin:12px 0 0;font-size:19px}
  body.guestMode.gStageContact .gcLbl,body.guestMode.gStageContact .gcBox>.gcMap+.gcName+.gcLbl{margin:10px 0 2px;font-size:10px}
  body.guestMode.gStageContact .gcTxt{margin:0;font-size:13.5px;line-height:1.4}
  body.guestMode.gStageContact .gcWa{margin:6px 0 0;padding:4px 0;font-size:13.5px}
  body.guestMode.gStageContact .gcSoc{gap:12px;margin-top:4px}
  body.guestMode.gStageContact .gcSoc a{width:38px;height:38px}
  body.guestMode.gStageContact .gcSoc svg{width:18px;height:18px}
}

/* v192: bar navigasi atas tamu — logo lebih besar, tinggi tombol seragam, hierarki jelas
   (Contact Us = garis tipis, Menu = putih solid), ikon akun sejajar & mudah disentuh */
body.guestMode .guestBanner{padding-top:max(12px,env(safe-area-inset-top))!important;padding-bottom:10px!important;align-items:center}
body.guestMode .gbNav{align-items:center;gap:8px}
body.guestMode .gbNav .ltopBtn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 15px;border-radius:4px;
  font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1}
/* v218: Contact Us = kotak hitam, tulisan putih; Menu = putih solid */
body.guestMode .gbNav .ltopBtn:not(.gbMenu){background:#000;color:#fff;border:1px solid rgba(255,255,255,.38)}
body.guestMode .gbNav .ltopBtn:not(.gbMenu):hover{background:#000;border-color:var(--gold2);color:var(--gold2)}
body.guestMode .gbNav .gbMenu{background:#fff;color:#080806;border:1px solid #fff}
body.guestMode .gbNav .gbMenu:hover{background:var(--gold2);border-color:var(--gold2)}
body.guestMode .gbNav .lacctBtn{height:40px;min-width:40px;padding:0 2px;gap:1px;justify-content:center}
body.guestMode .gbNav .lacctIco{width:28px;height:28px}
body.guestMode .gbNav .lacctChev{width:13px;height:13px;opacity:.7}
body.guestMode .gbHomeLink .gbLogo{filter:drop-shadow(0 0 10px rgba(201,168,76,.35))}
@media(max-width:520px){
  body.guestMode .guestBanner{padding-left:14px!important;padding-right:12px!important;gap:6px}
  body.guestMode .gbHomeLink .gbLogo{height:50px}
  body.guestMode .gbNav{gap:6px}
  body.guestMode .gbNav .ltopBtn{height:34px;padding:0 11px;font-size:11px;letter-spacing:.06em}
  body.guestMode .gbNav .lacctBtn{height:38px;min-width:34px}
  body.guestMode .gbNav .lacctIco{width:27px;height:27px}
  body.guestMode .gbNav .lacctChev{width:11px;height:11px}
}
@media(max-width:360px){
  body.guestMode .gbHomeLink .gbLogo{height:42px}
  body.guestMode .gbNav .ltopBtn{padding:0 9px;font-size:10.5px}
}

/* v202: lampu kalender tamu — sorot bergerak (seperti semula) + laser tipis yang menyapu; emas & putih hangat.
   Dipasang tepat di bawah bar atas. */
body.guestMode.gStageEvents .gevLights{top:var(--gbH,72px);height:calc(72vh - var(--gbH,72px))}
.gevLights i{top:6px}
.gevLights s{position:absolute;top:6px;left:var(--x);width:min(90vw,640px);height:100%;transform-origin:50% 0;text-decoration:none;
  clip-path:polygon(49.65% 0,50.35% 0,50.95% 100%,49.05% 100%);background:linear-gradient(to bottom,var(--c) 0%,transparent 96%);
  mix-blend-mode:screen;opacity:.85;animation:gBeamSwing var(--d) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@media(prefers-reduced-motion:reduce){ .gevLights s{animation:none} }

/* v194: Contact Us mobile — rantai tinggi lewat #view-home (tempat banner & konten berada), padding kiri-kanan kembali,
   peta mengisi sisa layar (besar), teks sedikit lebih besar */
body.guestMode.gStageContact .homeTop,body.guestMode.gStageContact .statsBar,body.guestMode.gStageContact #tableLayout,
body.guestMode.gStageContact #preOpenBanner{display:none!important}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  body.guestMode.gStageContact #content{padding:0 14px max(14px,env(safe-area-inset-bottom))}
  body.guestMode.gStageContact #view-home{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:0}
  body.guestMode.gStageContact .guestBanner{margin-left:-14px;margin-right:-14px}
  body.guestMode.gStageContact #guestContactView{flex:1 1 auto;min-height:0}
  body.guestMode.gStageContact .gcMap{min-height:170px;border-radius:8px}
  body.guestMode.gStageContact .gcName{margin:14px 0 0;font-size:21px}
  body.guestMode.gStageContact .gcLbl,body.guestMode.gStageContact .gcBox>.gcMap+.gcName+.gcLbl{margin:12px 0 3px;font-size:10.5px}
  body.guestMode.gStageContact .gcTxt{font-size:14.5px;line-height:1.45}
  body.guestMode.gStageContact .gcWa{margin:8px 0 0;font-size:14.5px}
  body.guestMode.gStageContact .gcSoc a{width:40px;height:40px}
}

/* v196: Contact Us — ikon telepon & mobile menggantikan tulisan "Telepon" / "Mobile" */
.gcPh{display:flex;align-items:center;gap:10px}
.gcIco{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;color:var(--gold2)}
.gcIco svg{width:18px;height:18px;display:block}

/* v198: bar navigasi tamu menempel ke tepi atas layar — celah di atas logo/tombol dihilangkan */
body.guestMode #content{padding-top:0!important}
body.guestMode #view-home{padding-top:0!important}
body.guestMode .guestBanner{margin-top:0!important;top:0!important;padding-top:max(8px,env(safe-area-inset-top))!important}

/* v201: "Check Our Calendar" + kalender tepat di tengah layar (di antara bar atas dan alamat bawah) — HP maupun desktop */
body.guestMode.gStageEvents #guestEventsView{display:flex!important;flex-direction:column;justify-content:center;
  min-height:calc(100vh - var(--gbH,72px) - 84px);min-height:calc(100svh - var(--gbH,72px) - 84px)}
@media(min-width:1024px){
  body.guestMode.gStageEvents #guestEventsView{min-height:calc(100vh - var(--gbH,72px) - 96px);min-height:calc(100svh - var(--gbH,72px) - 96px)}
}
body.guestMode.gStageEvents .gevHead{margin-top:0;margin-bottom:16px}
body.guestMode.gStageEvents .guestBanner{margin-bottom:0!important}
body.guestMode.gStageEvents #content{padding-bottom:84px!important}
@media(min-width:1024px){ body.guestMode.gStageEvents #content{padding-bottom:96px!important} }

/* v203: Contact Us mobile — JS memberi #view-home gaya inline display:block, jadi display:flex dipaksa (!important)
   agar peta mengisi seluruh sisa layar tanpa ruang kosong di bawah */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  body.guestMode.gStageContact #view-home{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;padding-top:0}
  body.guestMode.gStageContact #content{display:flex!important;flex-direction:column}
  body.guestMode.gStageContact #guestContactView{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0}
  body.guestMode.gStageContact .gcMap{min-height:150px}
}

/* v205: nama event panjang di kartu event terpilih (tamu) — tidak terpotong, turun ke baris berikutnya, rata kiri */
body.guestMode .gseInfo{text-align:left;align-items:flex-start;min-width:0}
body.guestMode .gseName,body.guestMode .gseSub{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  text-align:left;overflow-wrap:anywhere;word-break:normal;max-width:100%}
body.guestMode .gseName{line-height:1.15}


/* ═══ Poster hanya 2: statis, berdampingan, rata tengah (tanpa loop → tidak glitch di HP) ═══ */
.lschRow.fit{cursor:default;touch-action:auto;-webkit-mask-image:none;mask-image:none;overflow:visible}
.lschRow.fit .lschTrack{margin:0 auto;will-change:auto;transform:none!important}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lschRow.fit{--pmax:min(calc(50vw - 22px),236px);padding:0 16px;box-sizing:border-box}
  .lschRow.fit .lschTrack{gap:12px}
}


/* ═══ v206: lampu kalender tamu — neon warna-warni, futuristik ═══
   spotlight berwarna + laser (inti putih + halo glow) + aurora neon + strobo berwarna */
.gevLights i{background:linear-gradient(to bottom,var(--c) 0%,transparent 88%);opacity:.3;filter:blur(2px);
  animation:gBeamSwing var(--d) ease-in-out infinite alternate,gBeamPulse2 3.1s ease-in-out infinite}
.gevLights i:nth-child(5){animation-delay:-2.6s,-1.1s}
@keyframes gBeamPulse2{0%,100%{opacity:.2}50%{opacity:.55}}

.gevLights s{background:none;clip-path:none;mix-blend-mode:normal;opacity:1}
.gevLights s::before,.gevLights s::after{content:'';position:absolute;inset:0;pointer-events:none}
.gevLights s::before{background:linear-gradient(to bottom,var(--c) 0%,transparent 94%);
  clip-path:polygon(45% 0,55% 0,58% 100%,42% 100%);filter:blur(7px);mix-blend-mode:screen;opacity:.5;
  animation:gLaserGlow 2.4s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.gevLights s::after{background:linear-gradient(to bottom,#fff 0%,var(--c) 16%,transparent 97%);
  clip-path:polygon(49.7% 0,50.3% 0,50.95% 100%,49.05% 100%);mix-blend-mode:screen;opacity:.95}
@keyframes gLaserGlow{from{opacity:.3}to{opacity:.7}}

.gevLights::before{content:'';position:absolute;inset:-15% -10% 20% -10%;pointer-events:none;
  background:radial-gradient(ellipse 38% 55% at 15% 0%,rgba(0,229,255,.30),transparent 70%),
             radial-gradient(ellipse 38% 55% at 50% 0%,rgba(255,43,214,.26),transparent 70%),
             radial-gradient(ellipse 38% 55% at 85% 0%,rgba(124,77,255,.30),transparent 70%);
  animation:gAurora 12s ease-in-out infinite alternate}
@keyframes gAurora{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(4%,2%,0) scale(1.08)}}

.gevLights::after{background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(255,255,255,.5),rgba(0,240,255,.24) 32%,rgba(255,43,214,.2) 58%,transparent 78%);
  animation:gStrobe2 8s linear infinite}
@keyframes gStrobe2{0%,89%,100%{opacity:0}90%{opacity:.75}90.8%{opacity:.1}91.6%{opacity:.6}93%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .gevLights i,.gevLights s::before,.gevLights::before,.gevLights::after{animation:none} }


/* ═══ v207: copyright "© tahun Hades VIP · All Rights Reserved" di semua halaman ═══ */
.appFoot .appCopy{display:block;margin-top:2px;font-style:normal;letter-spacing:.6px;opacity:.8}
/* Contact Us (tamu): alamat sudah ada di halaman → footer tinggal copyright saja, tetap terlihat */
body.guestMode.gStageContact::after{display:block!important;content:"\A9 " var(--cy,"2026") " Hades VIP \B7  All Rights Reserved";
  padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));font-size:11px;background:none}
body.guestMode.gStageContact #content{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}


/* ═══ v209: lampu kalender tamu — bentuk sederhana: 5 laser neon tipis berkipas + glow lembut, tanpa kerucut & strobo ═══ */
.gevLights i,.gevLights::after{display:none}
.gevLights::before{opacity:.55}
.gevLights s{
  background:radial-gradient(circle at 50% 0,#fff 0 1.5px,var(--c) 3px,transparent 10px) 50% 0/26px 26px no-repeat;
  animation:gBeamSwing var(--d) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.gevLights s::before{clip-path:polygon(48.2% 0,51.8% 0,53.2% 100%,46.8% 100%);filter:blur(6px);opacity:.45}
.gevLights s::after{clip-path:polygon(49.8% 0,50.2% 0,50.7% 100%,49.3% 100%);opacity:1}
@media(prefers-reduced-motion:reduce){ .gevLights s{animation:none} }


/* ═══ v210: halaman awal menampilkan 1 poster event terdekat — dibuat lebih besar di HP ═══ */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lschRow.single{--pmax:max(130px,min(62vw,260px,calc((100svh - 470px) / 1.25)))}   /* ikut tinggi layar → halaman awal tidak perlu di-scroll */
}


/* footer mode tamu jangan menutup kabut dengan gradasi gelapnya */
body.guestMode.gStageEvents::after{background:none}


/* ═══ v213: lampu = sorot kerucut lebar (tanpa laser) · kabut diganti partikel cahaya yang naik pelan ═══ */
.gevLights s{display:none}
.gevLights i{display:block;width:min(78vw,620px);top:6px;
  background:linear-gradient(to bottom,var(--c) 0%,rgba(0,0,0,0) 90%);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
  mix-blend-mode:screen;opacity:.2;filter:blur(3px);
  animation:gBeamSwing var(--d) ease-in-out infinite alternate,gConePulse 4.2s ease-in-out infinite}
@keyframes gConePulse{0%,100%{opacity:.12}50%{opacity:.34}}

@media(prefers-reduced-motion:reduce){ .gevLights i{animation:none} }


/* ═══ v216: asap panggung konser — kabut tebal menyapu lantai, tiga lapis (belakang pelan · tengah · depan tebal) ═══ */
.gevSmoke{display:none}
body.guestMode.gStageEvents .gevSmoke{display:block;position:fixed;left:0;right:0;bottom:0;height:54vh;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(to top,rgba(226,229,238,.26) 0%,rgba(226,229,238,.10) 30%,rgba(226,229,238,0) 62%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 38%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 38%,transparent 100%)}
.gevSmoke u{position:absolute;left:0;width:200%;bottom:-8%;background-repeat:repeat-x;background-size:50% 100%;text-decoration:none;
  transform-origin:50% 100%;will-change:transform}
/* belakang: tinggi, abu-abu, paling pelan */
.gevSmoke u:nth-child(1){height:100%;
  background-image:radial-gradient(ellipse 30% 78% at 10% 100%,rgba(170,176,188,.30),transparent 72%),
                   radial-gradient(ellipse 26% 70% at 34% 100%,rgba(190,195,206,.26),transparent 72%),
                   radial-gradient(ellipse 32% 82% at 60% 100%,rgba(165,171,184,.30),transparent 72%),
                   radial-gradient(ellipse 24% 66% at 86% 100%,rgba(195,200,210,.24),transparent 72%);
  animation:gSmokeL 78s linear infinite,gSmokeBob 9s ease-in-out infinite alternate}
/* tengah: lebih terang, arah berlawanan */
.gevSmoke u:nth-child(2){height:78%;
  background-image:radial-gradient(ellipse 28% 72% at 20% 100%,rgba(228,231,239,.34),transparent 72%),
                   radial-gradient(ellipse 30% 76% at 48% 100%,rgba(205,210,220,.30),transparent 72%),
                   radial-gradient(ellipse 26% 70% at 76% 100%,rgba(236,238,244,.32),transparent 72%);
  animation:gSmokeR 52s linear infinite,gSmokeBob 7s ease-in-out -2.5s infinite alternate}
/* depan: menempel di lantai, putih tebal, paling cepat */
.gevSmoke u:nth-child(3){height:46%;
  background-image:radial-gradient(ellipse 24% 80% at 8% 100%,rgba(244,245,250,.46),transparent 72%),
                   radial-gradient(ellipse 28% 86% at 30% 100%,rgba(222,226,235,.42),transparent 72%),
                   radial-gradient(ellipse 22% 78% at 56% 100%,rgba(246,247,251,.46),transparent 72%),
                   radial-gradient(ellipse 26% 84% at 82% 100%,rgba(214,218,228,.42),transparent 72%);
  animation:gSmokeL 34s linear infinite,gSmokeBob 5.5s ease-in-out -1.2s infinite alternate}
@keyframes gSmokeL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes gSmokeR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes gSmokeBob{from{scale:1 .9}to{scale:1 1.14}}
@media(prefers-reduced-motion:reduce){ .gevSmoke u{animation:none} }

/* ═══ v217: judul "Check Our Calendar" naik sedikit ═══ */
body.guestMode.gStageEvents .gevCalHead{position:relative;top:-12px}
@media(min-width:900px){ body.guestMode.gStageEvents .gevCalHead{top:-16px} }


/* v218: tanpa poster event → hanya logo di tengah, judul/carousel/MORE disembunyikan */
.lschLogo{display:block;width:min(72vw,440px);max-height:46vh;object-fit:contain;margin:auto;align-self:center;filter:drop-shadow(0 0 18px rgba(201,168,76,.3))}
.lschLogo[hidden]{display:none}
.lsch.lschEmpty{justify-content:center;align-items:center}
.lsch.lschEmpty .lschTitle,.lsch.lschEmpty .lschRow{display:none!important}
/* v237: tombol MORE tetap tampil di login walau tidak ada poster (di bawah logo) */
.lsch.lschEmpty .lschLogo{order:1;margin:auto auto 0}
.lsch.lschEmpty .lschMore{display:block!important;order:2;align-self:center;margin:clamp(14px,2.4vh,24px) auto auto}

/* v218: kalender tamu — alamat mengisi ruang kosong di bawah garis neon; footer tetap hanya copyright */
body.guestMode.gStageEvents::after{content:"\A9 " var(--cy,"2026") " Hades VIP \B7  All Rights Reserved";padding:14px 16px calc(8px + env(safe-area-inset-bottom,0px));font-size:11px}
.gevAddr{flex:1 1 auto;display:flex;align-items:flex-end;justify-content:center;max-width:400px;width:100%;min-height:56px;margin:0 auto;padding:10px 16px 14px;box-sizing:border-box;
  text-align:center;font-family:'Outfit','Raleway',sans-serif;font-size:14px;line-height:1.5;letter-spacing:.4px;color:rgba(255,255,255,.7)}
/* susunan atas→bawah: judul (ada ruang dari bar atas) → kalender → garis neon → alamat (di tengah sisa ruang) → copyright */
body.guestMode.gStageEvents #guestEventsView{justify-content:flex-start;min-height:calc(100vh - var(--gbH,72px) - 84px);min-height:calc(100dvh - var(--gbH,72px) - 84px)}
body.guestMode.gStageEvents .gevCalHead{margin-top:22px}
@media(max-width:560px){ body.guestMode.gStageEvents .gevCalHead{margin:20px 0 22px} }

/* v218: pilihan layout tabel (tamu) — footer hanya copyright, tanpa alamat */
body.guestMode.gStageLayout::after{content:"\A9 " var(--cy,"2026") " Hades VIP \B7  All Rights Reserved";
  padding:14px 16px calc(8px + env(safe-area-inset-bottom,0px));font-size:11px}
body.guestMode.gStageLayout #content{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* v219: alamat dikunci di area kabut (di atas copyright), lebih besar & rata tengah */
body.guestMode.gStageEvents .gevAddr{position:fixed;left:0;right:0;bottom:calc(46px + env(safe-area-inset-bottom,0px));z-index:3;pointer-events:none;
  display:block;flex:none;width:auto;max-width:440px;min-height:0;margin:0 auto;padding:0 20px;text-align:center;
  font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.3px;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.65)}
@media(max-height:560px){ body.guestMode.gStageEvents .gevAddr{position:static;margin:14px auto 0} }

/* v221: halaman awal — event tanpa foto: logo Hades VIP di dalam poster */
.lschImg.lschImgLogo{object-fit:contain;padding:22%;box-sizing:border-box;background:linear-gradient(160deg,#1b1b1b,#0b0b0b);border:1px solid rgba(201,168,76,.25)}
/* alamat kalender: 14px, gaya sama dengan copyright */
body.guestMode.gStageEvents .gevAddr{font-family:'Outfit','Raleway',sans-serif;font-size:14px;font-weight:400;line-height:1.4;letter-spacing:.5px;color:rgba(255,255,255,.55);text-shadow:none}

/* v224: pembeda reservasi (staf) — Belum DP = garis putus-putus amber · Sudah DP = garis solid biru + tag "DP" */
.ktvRoom.rsvTent{border-style:dashed !important;border-color:#f5a623 !important;box-shadow:0 0 10px rgba(245,166,35,.28) !important}
.ktvRoom.rsvDp{border-color:#4aa3ff !important;box-shadow:0 0 12px rgba(74,163,255,.38),inset 0 0 12px rgba(0,0,0,.9) !important}
.ktvAdmin .ktvRoom.rsvDp::before{display:block !important;content:'DP';position:absolute;inset:auto;top:1.2cqw;left:1.4cqw;
  padding:.2cqw .9cqw;border:0;border-radius:.6cqw;background:#4aa3ff;color:#04111f;font:700 1.9cqw/1.3 'Outfit',sans-serif;letter-spacing:.04em;z-index:3}
.ktvFloor .glv-legend-dot.lg-tent{background:transparent;border:1.5px dashed #f5a623}
.ktvFloor .glv-legend-dot.lg-dp{background:transparent;border:1.5px solid #4aa3ff;box-shadow:0 0 5px rgba(74,163,255,.6)}
.tbox.rsvTent{border-style:dashed !important;border-color:#f5a623 !important;box-shadow:0 0 0 2px rgba(245,166,35,.28) !important}
.tbox.rsvDp{border-color:#4aa3ff !important;box-shadow:0 0 0 2px rgba(74,163,255,.5),0 6px 20px rgba(74,163,255,.16) !important}
.tbox .tbadge.tent{color:#b45309;background:#fffbeb;border:1px dashed #f5a623}
.tbox .tbadge.dp{color:#0b4a8f;background:#eaf3ff;border-color:#4aa3ff}

/* ═══ Maintenance room & sofa (v227) ═══ */
.c1t.c1t-mt,#guestLayoutView .c1t.c1t-mt{background:repeating-linear-gradient(135deg,#3b3b3b 0 6px,#2a2a2a 6px 12px) !important;color:#b0b0b0 !important;border:1.5px dashed #8a8a8a !important;box-shadow:none !important;animation:none !important;cursor:not-allowed !important}
.c1t.c1t-mt{overflow:hidden !important}
.c1t.c1t-mt::before{content:'' !important;display:block !important;position:absolute;inset:0 !important;left:0 !important;top:0 !important;width:auto !important;height:auto !important;transform:none !important;background:linear-gradient(to top right,transparent calc(50% - 2px),#f5c400 calc(50% - 2px),#f5c400 calc(50% + 2px),transparent calc(50% + 2px)),linear-gradient(to bottom right,transparent calc(50% - 2px),#f5c400 calc(50% - 2px),#f5c400 calc(50% + 2px),transparent calc(50% + 2px)),linear-gradient(to top right,transparent calc(50% - 3.5px),rgba(0,0,0,.6) calc(50% - 3.5px),rgba(0,0,0,.6) calc(50% + 3.5px),transparent calc(50% + 3.5px)),linear-gradient(to bottom right,transparent calc(50% - 3.5px),rgba(0,0,0,.6) calc(50% - 3.5px),rgba(0,0,0,.6) calc(50% + 3.5px),transparent calc(50% + 3.5px)) !important;box-shadow:none !important;z-index:3;pointer-events:none}
.c1t.c1t-mt::after{content:none !important;display:none !important}
.c1t.c1t-mt>span,.c1t.c1t-mt b,.c1t.c1t-mt em,.c1t.c1t-mt small{opacity:.6 !important}
.c1t.c1t-mt>span,.c1t.c1t-mt b,.c1t.c1t-mt em,.c1t.c1t-mt small{opacity:.8}
.ktvRoom.c1t-mt .ktvSt{color:#ffb74d;opacity:1;font-weight:700}
.ktvRoom.c1t-mt .ktvNo{color:#c8c8c8}
.glv-legend-dot.lg-mt,.c1g .glv-legend-dot.lg-mt,.ktvFloor .glv-legend-dot.lg-mt,#guestLayoutView .glv-legend-dot.lg-mt{background:repeating-linear-gradient(135deg,#3b3b3b 0 3px,#222 3px 6px) !important;border:1px dashed #8a8a8a !important;box-shadow:none !important}
.tbox.maint{background:repeating-linear-gradient(135deg,rgba(130,130,130,.16) 0 8px,rgba(60,60,60,.10) 8px 16px);border:1px dashed #9e9e9e}
.tbadge.mt{background:rgba(255,152,0,.16) !important;color:#ffb74d !important;border:1px solid rgba(255,152,0,.5) !important}
.mtGroup{margin-bottom:16px}
.mtGroupTtl{font-size:13px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.mtArea{margin-bottom:10px}
.mtAreaLbl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;font-weight:700}
.mtChips{display:flex;flex-wrap:wrap;gap:6px}
.mtChip{background:var(--bg2);border:1px solid rgba(201,168,76,0.25);color:var(--text2);border-radius:7px;padding:7px 11px;font-size:13px;cursor:pointer;font-family:inherit}
.mtChip:hover{border-color:var(--gold);color:var(--text)}
.mtChip.on{background:rgba(255,152,0,.16);border-color:rgba(255,152,0,.6);color:#ffb74d;font-weight:700}

/* ═══ Logo 3D di halaman login saat tidak ada poster (v231) ═══ */
.lschLogo.l3d{position:relative;display:block;width:min(72vw,440px,calc(46vh*1.379));max-height:none;aspect-ratio:233/169;margin:auto;align-self:center;perspective:1100px;filter:none;object-fit:unset}
.lschLogo.l3d[hidden]{display:none}
.l3dGlow{position:absolute;left:50%;top:50%;width:130%;height:130%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(201,168,76,.30),rgba(201,168,76,.09) 55%,transparent 75%);pointer-events:none;animation:l3dPulse 4.5s ease-in-out infinite}
.l3dFloat{position:absolute;inset:0;transform-style:preserve-3d;animation:l3dFloat 7s ease-in-out infinite}
.l3dTilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--l3dx,0deg)) rotateY(var(--l3dy,0deg));transition:transform .18s ease-out}
.l3dTilt>i,.l3dTilt>b{position:absolute;inset:0;display:block;background:url('logo.png') center/contain no-repeat}
.l3dTilt>i{transform:translateZ(calc(var(--i)*-3.2px));filter:brightness(.34) sepia(1) saturate(3.6) hue-rotate(-8deg)}
.l3dTilt>b.l3dFront{transform:translateZ(3px);filter:drop-shadow(0 0 16px rgba(201,168,76,.5))}
.l3dTilt>b.l3dShine{transform:translateZ(4px);background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.9) 50%,transparent 64%) 130% 0/260% 100% no-repeat;-webkit-mask:url('logo.png') center/contain no-repeat;mask:url('logo.png') center/contain no-repeat;opacity:.8;animation:l3dShine 5s ease-in-out infinite}
.l3dShadow{position:absolute;left:50%;bottom:-13%;width:72%;height:11%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(7px);pointer-events:none;animation:l3dShadow 7s ease-in-out infinite}
@keyframes l3dFloat{0%,100%{transform:translateY(-7px) rotateY(-18deg) rotateX(4deg)}50%{transform:translateY(9px) rotateY(18deg) rotateX(-3deg)}}
@keyframes l3dShine{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}
@keyframes l3dPulse{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes l3dShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.82);opacity:.6}}
@media(prefers-reduced-motion:reduce){.l3dFloat,.l3dTilt>b.l3dShine,.l3dGlow,.l3dShadow{animation:none}.l3dFloat{transform:rotateY(-12deg) rotateX(3deg)}}

/* ═══ v238: logo login tanpa poster — neon emas + kilau menyapu (tanpa 3D). Hapus blok ini untuk kembali ke logo 3D ═══ */
.lschLogo.l3d .l3dFloat{animation:none;transform:none}
.lschLogo.l3d .l3dTilt{transform:none !important;transition:none}
.lschLogo.l3d .l3dTilt>i,.lschLogo.l3d .l3dShadow{display:none}
.lschLogo.l3d .l3dTilt>b.l3dFront{transform:none;animation:neonGlow 5.5s ease-in-out infinite}
.lschLogo.l3d .l3dTilt>b.l3dShine{transform:none}
@keyframes neonGlow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(201,168,76,.55)) drop-shadow(0 0 22px rgba(201,168,76,.35));opacity:1}
  50%{filter:drop-shadow(0 0 14px rgba(240,208,120,.85)) drop-shadow(0 0 38px rgba(201,168,76,.55));opacity:1}
  82%{opacity:1}
  83%{opacity:.78}
  84%{opacity:1}
  86%{opacity:.85}
  87%{opacity:1}
}
@media(prefers-reduced-motion:reduce){.lschLogo.l3d .l3dTilt>b.l3dFront{animation:none}}

/* ═══ v239: login tanpa poster — hanya emblem phoenix (tanpa tulisan HADES VIP), ukuran lebih besar ═══ */
.lschLogo.l3d{width:min(70.6vw,353px,calc(50.4vh*.796));aspect-ratio:360/452}
.lschLogo.l3d .l3dTilt>i,.lschLogo.l3d .l3dTilt>b{background-image:url('logo-emblem-hd.webp')}
.lschLogo.l3d .l3dTilt>b.l3dShine{-webkit-mask:url('logo-emblem-hd.webp') center/contain no-repeat;mask:url('logo-emblem-hd.webp') center/contain no-repeat}

/* ═══ v243: logo login tajam — tanpa konteks 3D (menghindari render buram/pecah), sumber gambar 3x (webp) ═══ */
.lschLogo.l3d{perspective:none !important}
.lschLogo.l3d .l3dFloat,.lschLogo.l3d .l3dTilt{transform-style:flat !important;will-change:auto}
.lschLogo.l3d .l3dTilt>b.l3dFront{background-image:url('logo-emblem-hd.webp');background-size:contain;image-rendering:auto}

/* ═══ v249: logo login — efek CLUB MALAM (lampu sorot berputar, glow warna-warni, denyut beat, kilau).
         Hapus blok ini untuk kembali ke logo tanpa efek ═══ */
.lschLogo.l3d{isolation:isolate;overflow:visible}
/* lampu sorot berputar di belakang logo */
.lschLogo.l3d::before{content:'';position:absolute;left:50%;top:50%;width:250%;height:250%;margin:-125% 0 0 -125%;z-index:-2;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 6%,rgba(255,40,160,.34) 8.5%,transparent 12% 27%,rgba(0,205,255,.30) 30%,transparent 34% 52%,rgba(201,168,76,.42) 55%,transparent 59% 77%,rgba(150,90,255,.34) 80%,transparent 84%);
  -webkit-mask:radial-gradient(closest-side,#000 8%,transparent 68%);mask:radial-gradient(closest-side,#000 8%,transparent 68%);
  animation:clubSpin 16s linear infinite}
/* glow warna berganti (emas → magenta → cyan → ungu) */
.lschLogo.l3d .l3dGlow{display:block;width:175%;height:175%;
  background:radial-gradient(closest-side,rgba(201,168,76,.55),rgba(201,168,76,.16) 52%,transparent 76%);
  animation:clubGlow 1.9s ease-in-out infinite,clubHue 9s linear infinite}
/* logo berdenyut mengikuti beat */
.lschLogo.l3d .l3dTilt>b.l3dFront{transform:none;animation:clubLogo 1.9s ease-in-out infinite}
.lschLogo.l3d .l3dTilt>b.l3dShine{transform:none;animation-duration:3.6s}
@keyframes clubSpin{to{transform:rotate(360deg)}}
@keyframes clubHue{0%{filter:hue-rotate(0deg)}30%{filter:hue-rotate(255deg)}60%{filter:hue-rotate(150deg)}100%{filter:hue-rotate(360deg)}}
@keyframes clubGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}35%{opacity:.62;transform:translate(-50%,-50%) scale(.97)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.06)}75%{opacity:.6;transform:translate(-50%,-50%) scale(.96)}}
@keyframes clubLogo{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 6px rgba(201,168,76,.6)) drop-shadow(0 0 16px rgba(201,168,76,.3))}
  12%{transform:scale(1.04);filter:drop-shadow(0 0 12px rgba(255,214,102,.95)) drop-shadow(0 0 30px rgba(255,60,170,.55))}
  35%{transform:scale(1.005);filter:drop-shadow(0 0 7px rgba(201,168,76,.65)) drop-shadow(0 0 18px rgba(201,168,76,.3))}
  50%{transform:scale(1.04);filter:drop-shadow(0 0 12px rgba(255,214,102,.95)) drop-shadow(0 0 30px rgba(0,205,255,.5))}
  75%{transform:scale(1.005);filter:drop-shadow(0 0 7px rgba(201,168,76,.65)) drop-shadow(0 0 18px rgba(201,168,76,.3))}}
@media(prefers-reduced-motion:reduce){
  .lschLogo.l3d::before,.lschLogo.l3d .l3dGlow,.lschLogo.l3d .l3dTilt>b.l3dFront,.lschLogo.l3d .l3dTilt>b.l3dShine{animation:none}}

/* ═══ v250b: kotak tanggal kartu event (denah tamu) — dipendekkan ke bawah (sebelumnya rasio 1/1.28) ═══ */
body.guestMode .gsePoster{aspect-ratio:1/1.02}

/* ═══ v251: logo besar halaman login diperkecil 20% (sebelumnya min(70.6vw,353px,50.4vh×.796)) ═══ */
.lschLogo.l3d{width:min(56.5vw,282px,calc(40.3vh*.796))}

/* ═══ v252: logo besar login lebih terang (emas lebih cerah). Ubah angka brightness untuk menyesuaikan, hapus baris ini untuk kembali ═══ */
.lschLogo.l3d .l3dTilt{filter:brightness(1.18) saturate(1.1)}

/* ═══ Gallery tamu (foto dari Google Drive) — grid kotak gaya referensi T2 ═══ */
body.guestMode.gStageGallery #guestSelEvent,
body.guestMode.gStageGallery #guestLayoutView,
body.guestMode.gStageGallery #guestEventsView,
body.guestMode.gStageGallery #guestContactView,
body.guestMode.gStageGallery #guestBackBtn,
body.guestMode.gStageGallery #guestHomeBtn,
body.guestMode.gStageGallery .ctrlBar,
body.guestMode.gStageGallery #waitPanel{display:none!important}
#guestGalleryView{padding:6px 0 24px}
.galWrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(8px,2.4vw,24px);box-sizing:border-box;animation:gFade .4s ease both}
.galTitle{margin:clamp(22px,5vw,44px) 0 0;text-align:center;font-family:'Montserrat','Outfit',sans-serif;font-weight:800;font-size:clamp(34px,9vw,60px);line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.galLine{width:52px;height:2px;margin:clamp(14px,3.4vw,22px) auto clamp(22px,5vw,40px);background:#fff;opacity:.9}
.galGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(6px,1.6vw,12px)}
@media(min-width:720px){ .galGrid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1100px){ .galGrid{grid-template-columns:repeat(4,1fr)} }
.galItem{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:0;overflow:hidden;cursor:pointer;background:#0b0b18;-webkit-tap-highlight-color:transparent}
.galItem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .6s ease}
.galItem img.in{opacity:1;transform:none}
@media(hover:hover){ .galItem:hover img.in{transform:scale(1.045)} }
.galItem:active img{opacity:.85}
.galNote{margin:40px 0;text-align:center;font-family:'Outfit','Raleway',sans-serif;font-size:15px;color:rgba(255,255,255,.6)}
body.guestMode.gStageGallery #content{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}
body.guestMode.gStageGallery::after{position:static;display:block;margin-top:4px;content:"\A9 " var(--cy,"2026") " Hades VIP \B7  All Rights Reserved";padding:6px 16px calc(10px + env(safe-area-inset-bottom,0px));font-size:11px;background:none}
@media(prefers-reduced-motion:reduce){ .galWrap{animation:none} .galItem img{transition:none;transform:none} }
/* lightbox */
.galLb{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(3,3,10,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.galLb.on{display:flex}
.galLbImg{max-width:100%;max-height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.galLbX,.galLbN{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.galLbX{top:max(14px,env(safe-area-inset-top));right:14px;font-size:18px}
.galLbN{top:50%;transform:translateY(-50%);font-size:30px;padding-bottom:4px}
.galLbP{left:10px}.galLbF{right:10px}
@media(max-width:720px){ .galLbN{display:none} }

/* v255: navigasi tamu = tulisan saja (tanpa kotak) + posisi foto gallery rapi & simetris */
body.guestMode .guestBanner{gap:10px}
body.guestMode .gbHomeLink{flex-shrink:0}
body.guestMode .gbNav{min-width:0;flex-shrink:1;gap:2px}
body.guestMode .gbNav .ltopBtn,
body.guestMode .gbNav .ltopBtn:not(.gbMenu),
body.guestMode .gbNav .gbMenu{
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:#fff!important;padding:0 8px!important;height:34px;
  text-transform:uppercase;font-weight:600;letter-spacing:.1em;white-space:nowrap}
body.guestMode .gbNav .ltopBtn:hover,
body.guestMode .gbNav .ltopBtn:not(.gbMenu):hover,
body.guestMode .gbNav .gbMenu:hover{background:none!important;color:var(--gold2)!important}
body.guestMode .gbNav .ltopBtn:focus-visible{outline:1px solid var(--gold2);outline-offset:2px}
@media(max-width:520px){
  body.guestMode .gbNav .ltopBtn,
  body.guestMode .gbNav .ltopBtn:not(.gbMenu),
  body.guestMode .gbNav .gbMenu{padding:0 6px!important;font-size:11px;letter-spacing:.07em}
}
@media(max-width:360px){
  body.guestMode .gbNav .ltopBtn,
  body.guestMode .gbNav .ltopBtn:not(.gbMenu),
  body.guestMode .gbNav .gbMenu{padding:0 4px!important;font-size:10px;letter-spacing:.05em}
}
/* gallery: margin kiri = kanan, grid di tengah, kepala/wajah tidak terpotong */
.galWrap{padding:0!important;margin:0 auto}
.galGrid{gap:4px;justify-content:center}
@media(min-width:720px){ .galGrid{gap:8px} }
.galItem img{object-position:center 30%}

/* v259: halaman Gallery = latar & bar atas sama dengan halaman kalender (sorot lampu + asap panggung),
   lampu dipasang tepat di bawah bar atas seperti di kalender */
body.guestMode.gStageGallery .guestBanner{margin-bottom:0!important}
body.guestMode.gStageGallery .gevLights{display:block;position:fixed;left:0;right:0;top:var(--gbH,72px);height:calc(72vh - var(--gbH,72px));z-index:-1;pointer-events:none;overflow:hidden}
body.guestMode.gStageGallery .gevSmoke{display:block;position:fixed;left:0;right:0;bottom:0;height:54vh;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(to top,rgba(226,229,238,.26) 0%,rgba(226,229,238,.10) 30%,rgba(226,229,238,0) 62%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 38%,transparent 100%);mask-image:linear-gradient(to top,#000 0%,#000 38%,transparent 100%)}
body.guestMode.gStageGallery::after{background:none}

/* v260: halaman kalender (desktop/tablet) — judul + kotak tanggal diturunkan sedikit dari bar atas.
   Besarnya mengikuti tinggi layar (22px → 52px) supaya tidak terpotong di layar pendek. HP tidak diubah. */
@media(min-width:561px){
  body.guestMode.gStageEvents .gevCalHead{margin-top:clamp(22px,5.6vh,52px)}
}

/* v261: judul "The Moments" diam di bawah bar atas saat di-scroll; foto bergulir di bawahnya */
.galHead{position:sticky;top:var(--gbH,72px);z-index:5;display:flow-root;
  margin-top:clamp(14px,3vw,30px);padding-bottom:18px;
  background:linear-gradient(to bottom,rgba(10,10,9,.94) 0%,rgba(10,10,9,.94) 72%,rgba(10,10,9,0) 100%)}
.galHead .galTitle{margin:10px 0 0;font-size:clamp(28px,7vw,46px)}
.galHead .galLine{margin:12px auto 0}

/* v262: bar atas (tab) & judul benar-benar diam saat scroll di Gallery.
   Penyebab: "overflow-x:hidden" di html/body membuat body jadi wadah scroll sendiri sehingga position:sticky tidak menempel.
   "clip" tetap mencegah geser ke samping tanpa membuat wadah scroll. */
html:has(body.guestMode.gStageGallery),
body.guestMode.gStageGallery{overflow-x:clip!important;overflow-y:visible!important}
body.guestMode.gStageGallery .guestBanner{position:sticky!important;top:0!important}

/* v263: latar hitam di atas (bar atas + judul) satu blok, diam, dan menutup penuh foto yang lewat di bawahnya */
.galHead{
  background:linear-gradient(to bottom,#0a0a09 0%,#0a0a09 76%,rgba(10,10,9,0) 100%);
  box-shadow:0 -40px 0 0 #0a0a09;   /* menutup celah tipis antara bar atas dan judul */
  top:calc(var(--gbH,72px) - 1px)}

/* v264: Gallery = layar tetap. Bar atas, judul, latar, dan footer TIDAK bergerak;
   hanya daftar foto (.galGrid) yang bisa di-scroll di dalam kotaknya sendiri. */
html:has(body.guestMode.gStageGallery),
body.guestMode.gStageGallery{overflow:hidden!important;height:100vh;height:100dvh;overscroll-behavior:none}
body.guestMode.gStageGallery #content{padding-bottom:0!important}
body.guestMode.gStageGallery #guestGalleryView{
  display:flex!important;flex-direction:column;padding:0;
  height:calc(100vh - var(--gbH,72px) - 34px - env(safe-area-inset-bottom,0px));
  height:calc(100dvh - var(--gbH,72px) - 34px - env(safe-area-inset-bottom,0px))}
body.guestMode.gStageGallery .galWrap{flex:1 1 auto;min-height:0;height:100%;display:flex;flex-direction:column}
body.guestMode.gStageGallery .galHead{position:static;flex:none;margin-top:0;box-shadow:none;background:none;padding-bottom:14px}
body.guestMode.gStageGallery .galGrid{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;
  padding-bottom:16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.guestMode.gStageGallery .galNote{flex:none}
body.guestMode.gStageGallery::after{position:fixed;left:0;right:0;bottom:0;margin:0;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:none;pointer-events:none}

/* v265: rapikan Gallery — foto kembali persegi (tidak gepeng), margin kiri=kanan, tanpa scrollbar, tepi atas/bawah memudar */
body.guestMode.gStageGallery .galGrid{
  grid-auto-rows:max-content;align-content:start;padding:0;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 26px),transparent 100%)}
body.guestMode.gStageGallery .galGrid::-webkit-scrollbar{display:none;width:0;height:0}
/* tinggi petak dari lebar (padding-bottom) — tidak bisa dimampatkan oleh tinggi kotak scroll */
body.guestMode.gStageGallery .galItem{aspect-ratio:auto;height:0;min-height:0;padding:0 0 100% 0;box-sizing:content-box}
body.guestMode.gStageGallery .galWrap{padding:0!important;box-sizing:border-box}
body.guestMode.gStageGallery .galHead .galTitle{margin-top:14px}
body.guestMode.gStageGallery .galHead{padding-bottom:18px}

/* v266: bar atas tamu di desktop — logo & tulisan menu lebih besar dan lebih lega (HP tidak diubah) */
@media(min-width:900px){
  body.guestMode .gbHomeLink .gbLogo{height:78px}
  body.guestMode .gbNav{gap:6px}
  body.guestMode .gbNav .ltopBtn,
  body.guestMode .gbNav .ltopBtn:not(.gbMenu),
  body.guestMode .gbNav .gbMenu{font-size:15px;letter-spacing:.12em;padding:0 16px!important;height:46px}
  body.guestMode .gbNav .lacctBtn{height:46px;min-width:46px}
  body.guestMode .gbNav .lacctIco{width:34px;height:34px}
  body.guestMode .gbNav .lacctChev{width:14px;height:14px}
}

/* ═══ v267: login desktop — bar atas (logo + Menu + akun) sama ukuran & posisi dengan bar atas kalender tamu; emblem tengah lebih besar ═══ */
@media(min-width:900px){
  .ltop{left:max(0px,calc((100% - 1280px)/2));right:max(0px,calc((100% - 1280px)/2));
    padding:max(8px,env(safe-area-inset-top)) 18px 10px}
  .ltopLogo img{height:78px}
  .ltopNav{gap:6px}
  .ltopBtn{height:46px;font-size:15px;letter-spacing:.12em;padding:0 16px}
  .lacctBtn{height:46px;min-width:46px}
  .lacctIco{width:34px;height:34px}
  .lacctChev{width:14px;height:14px}
  .lschLogo.l3d{width:min(70.6vw,440px,calc(58vh*.796))}   /* emblem tengah: ±25% lebih besar */
}
@media(min-width:1024px){
  .ltop{padding-left:32px;padding-right:32px}
}

/* ═══ v268: bar atas halaman depan = tab sama persis dengan bar atas kalender (Gallery · Contact Us · Menu, tulisan saja) ═══ */
.ltopNav{gap:2px}
.ltopNav .ltopBtn{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:#fff!important;padding:0 8px!important;height:34px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ltopNav .ltopBtn:hover{background:none!important;color:var(--gold2)!important}
.ltopNav .ltopBtn:focus-visible{outline:1px solid var(--gold2);outline-offset:2px}
@media(max-width:520px){ .ltopNav .ltopBtn{padding:0 6px!important;font-size:11px;letter-spacing:.07em} }
@media(max-width:360px){ .ltopNav .ltopBtn{padding:0 4px!important;font-size:10px;letter-spacing:.05em} }
@media(min-width:900px){ .ltopNav .ltopBtn{padding:0 16px!important;height:46px;font-size:15px;letter-spacing:.12em} }

/* ═══ v269: HP — judul "Check Our Calendar" + kotak tanggal diturunkan ±26px dari bar atas.
   Tinggi kotak dikurangi sedikit supaya dasar kalender tidak mendekati alamat di bawah. ═══ */
@media(max-width:560px){
  body.guestMode.gStageEvents .gevCalHead{margin-top:46px}
  .gtGrid{grid-auto-rows:min(calc((100vh - 341px)/3),38cqw);grid-auto-rows:min(calc((100dvh - 341px)/3),38cqw)}
}

/* ═══ v270: bar atas halaman depan = SAMA PERSIS dengan bar atas kalender tamu di semua lebar layar
   (jarak atas/samping, tinggi logo, jarak & ukuran tab, ikon akun) — supaya tidak bergeser saat pindah halaman ═══ */
.ltop{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:10px}
.ltopLogo img{height:48px}
.ltopNav .lacctBtn{height:40px;min-width:40px;padding:0 2px;gap:1px;justify-content:center}
.ltopNav .lacctIco{width:28px;height:28px}
.ltopNav .lacctChev{width:13px;height:13px;opacity:.7}
@media(min-width:761px) and (max-width:1023px){ .ltop{padding-left:18px;padding-right:18px} }
@media(max-width:760px){
  .ltop{padding-left:22px;padding-right:22px}
  .ltopLogo img{height:46px}
}
@media(max-width:560px){ .ltop{padding-left:16px;padding-right:16px} }
@media(max-width:520px){
  .ltop{padding-left:14px;padding-right:12px;gap:10px}
  .ltopLogo img{height:50px}
  .ltopNav .lacctBtn{height:38px;min-width:34px}
  .ltopNav .lacctIco{width:27px;height:27px}
  .ltopNav .lacctChev{width:11px;height:11px}
}
@media(max-width:360px){ .ltopLogo img{height:42px} }
@media(min-width:900px){
  .ltopLogo img{height:78px}
  .ltopNav{gap:6px}
  .ltopNav .lacctBtn{height:46px;min-width:46px}
  .ltopNav .lacctIco{width:34px;height:34px}
  .ltopNav .lacctChev{width:14px;height:14px}
}

/* ═══ v271: alamat di halaman kalender tamu turun sedikit (±8px), tetap di atas copyright ═══ */
body.guestMode.gStageEvents .gevAddr{bottom:calc(38px + env(safe-area-inset-bottom,0px))}

/* ═══ v272: Contact Us — pembungkus info (tanpa efek di HP) ═══ */
.gcInfo{display:contents}

/* ═══ v272: Contact Us di DESKTOP — tanpa scroll: layar dikunci setinggi jendela, 2 kolom (peta kiri · info kanan) ═══ */
@media(min-width:761px) and (orientation:landscape),(min-width:1101px){
  html:has(body.guestMode.gStageContact),body.guestMode.gStageContact{height:100vh;height:100dvh;overflow:hidden}
  body.guestMode.gStageContact #app{height:100vh;height:100dvh;min-height:0!important;overflow:hidden}
  body.guestMode.gStageContact .guestBanner{flex-shrink:0;margin-bottom:8px}
  body.guestMode.gStageContact #view-home{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;padding-top:0}
  body.guestMode.gStageContact #content{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))}
  body.guestMode.gStageContact #guestContactView{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;padding:0}
  body.guestMode.gStageContact .gBack{align-self:flex-start;flex:0 0 auto;margin:0 0 8px;padding:2px 0;font-size:13px}
  body.guestMode.gStageContact .gcBox{flex:1 1 auto;min-height:0;max-width:none;width:100%;padding:0;
    display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);grid-template-rows:minmax(0,1fr);column-gap:clamp(24px,3.4vw,56px)}
  body.guestMode.gStageContact .gcMap{grid-column:1;height:auto;min-height:160px;margin:0}
  body.guestMode.gStageContact .gcInfo{grid-column:2;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden}
  body.guestMode.gStageContact .gcName{margin:0;font-size:clamp(22px,2.2vw,30px)}
  body.guestMode.gStageContact .gcLbl{margin:clamp(10px,2.4vh,22px) 0 4px;font-size:11px}
  body.guestMode.gStageContact .gcTxt{margin:0;font-size:14.5px;line-height:1.45}
  body.guestMode.gStageContact .gcWa{margin:clamp(6px,1.4vh,12px) 0 0;padding:4px 0}
  body.guestMode.gStageContact .gcSoc{margin-top:4px}
}
/* layar desktop pendek (laptop kecil): rapatkan supaya tetap muat tanpa scroll */
@media(min-width:761px) and (orientation:landscape) and (max-height:760px),(min-width:1101px) and (max-height:760px){
  body.guestMode.gStageContact .gcLbl{margin:8px 0 2px;font-size:10px}
  body.guestMode.gStageContact .gcTxt{font-size:13px;line-height:1.35}
  body.guestMode.gStageContact .gcName{font-size:20px}
  body.guestMode.gStageContact .gcSoc a{width:36px;height:36px}
  body.guestMode.gStageContact .gcWa{margin-top:4px;padding:2px 0;font-size:13px}
}

/* ═══ v253: logo login — garis kilau yang bergerak di tengah logo dihilangkan.
         Hapus blok ini (dan tambahkan lagi <b class="l3dShine"></b> di index.html) untuk mengembalikan kilau ═══ */
.lschLogo.l3d .l3dTilt>b.l3dShine{display:none !important;animation:none !important}

/* ═══ v273: Contact Us — dirapikan sesuai tema emas-hitam (bentuk & ukuran peta TIDAK diubah).
         Hapus blok ini untuk kembali ke tampilan sebelumnya ═══ */
/* peta: bingkai emas tipis + bayangan lembut + vinyet halus di tepi */
body.guestMode.gStageContact .gcMap{border-color:rgba(201,168,76,.28);box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4)}
body.guestMode.gStageContact .gcMap::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 38px rgba(0,0,0,.45)}
body.guestMode.gStageContact .gcMapBtn{background:rgba(14,14,13,.94);border-color:rgba(201,168,76,.35);z-index:3}
body.guestMode.gStageContact .gcMapBtn:hover{background:rgba(201,168,76,.14)}

/* nama tempat: garis emas pendek di bawahnya */
body.guestMode.gStageContact .gcName{letter-spacing:.1em}
body.guestMode.gStageContact .gcName::after{content:'';display:block;width:44px;height:2px;margin-top:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* label seksi: tanpa garis emas di depan tulisan */
body.guestMode.gStageContact .gcLbl{display:flex;align-items:center;gap:10px}
body.guestMode.gStageContact .gcLbl::before{content:none;display:none}

/* isi teks lebih terbaca */
body.guestMode.gStageContact .gcTxt{color:#c3c3cb}
body.guestMode.gStageContact .gcTxt a{transition:color .2s}
body.guestMode.gStageContact .gcTxt a:hover{color:var(--gold2)}

/* ikon telepon & mobile: dalam lingkaran emas tipis */
body.guestMode.gStageContact .gcPh{gap:12px;margin-bottom:6px}
body.guestMode.gStageContact .gcIco{width:28px;height:28px;border-radius:50%;border:1px solid rgba(201,168,76,.4);background:rgba(201,168,76,.07)}
body.guestMode.gStageContact .gcIco svg{width:14px;height:14px}

/* Via WhatsApp: tetap teks (tanpa tombol hijau), kini bergaris bawah emas + panah, emas saat disentuh */
body.guestMode.gStageContact .gcWa,body.guestMode.gStageContact .gcWa:hover,body.guestMode.gStageContact .gcWa:active{
  gap:8px;color:#c3c3cb;transition:color .2s,gap .2s}
body.guestMode.gStageContact .gcWa::after{content:'→';color:var(--gold2);transition:transform .2s}
body.guestMode.gStageContact .gcWa:hover{color:var(--gold2)}
body.guestMode.gStageContact .gcWa:hover::after{transform:translateX(4px)}

/* ikon sosial: bingkai emas halus; saat disentuh terisi emas lembut dan naik sedikit */
body.guestMode.gStageContact .gcSoc a{border-color:rgba(201,168,76,.32);background:rgba(255,255,255,.02);
  transition:border-color .2s,color .2s,background .2s,transform .2s}
body.guestMode.gStageContact .gcSoc a:hover{background:rgba(201,168,76,.12);border-color:var(--gold2);color:var(--gold2);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){body.guestMode.gStageContact .gcSoc a:hover,body.guestMode.gStageContact .gcWa:hover::after{transform:none}}

/* laptop pendek: rapatkan sedikit agar tetap muat tanpa scroll */
@media(min-width:761px) and (max-height:760px){
  body.guestMode.gStageContact .gcName::after{margin-top:6px}
  body.guestMode.gStageContact .gcIco{width:24px;height:24px}
  body.guestMode.gStageContact .gcPh{margin-bottom:3px}
}

/* ═══ v274: tombol LOGIN (ikon akun di bar atas) — gaya referensi: pil emas dengan teks "Login" + lingkaran putih berisi panah ↗.
         Tab lain (Gallery · Contact Us · Menu) tetap tulisan huruf kapital bersih.
         Berlaku di halaman depan (login) dan bar atas mode tamu. Hapus blok ini untuk kembali ke ikon akun ═══ */
.lacctTxt{display:none}
.ltopNav .lacctBtn,
body.guestMode .gbNav .lacctBtn{
  display:inline-flex;align-items:center;gap:12px;height:40px;min-width:0;margin-left:10px;
  padding:0 5px 0 18px;border:0;border-radius:999px;
  background:linear-gradient(100deg,#8b6914 0%,var(--gold) 50%,var(--gold2) 100%);
  color:#1a1204;box-shadow:0 4px 18px rgba(201,168,76,.28);
  transition:box-shadow .2s,filter .2s}
.ltopNav .lacctBtn:hover,
body.guestMode .gbNav .lacctBtn:hover{color:#1a1204;filter:brightness(1.08);box-shadow:0 6px 24px rgba(201,168,76,.45)}
.ltopNav .lacctBtn:focus-visible,
body.guestMode .gbNav .lacctBtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ltopNav .lacctTxt,
body.guestMode .gbNav .lacctTxt{display:inline;font-family:'Outfit','Raleway',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap}
/* ikon akun & panah kecil lama disembunyikan; diganti lingkaran putih berisi panah */
.ltopNav .lacctBtn .lacctIco,.ltopNav .lacctBtn .lacctChev,
body.guestMode .gbNav .lacctBtn .lacctIco,body.guestMode .gbNav .lacctBtn .lacctChev{display:none}
.ltopNav .lacctBtn::after,
body.guestMode .gbNav .lacctBtn::after{
  content:'';flex:none;width:30px;height:30px;border-radius:50%;background-color:#fff;
  background-repeat:no-repeat;background-position:center;background-size:15px 15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1204' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
  transition:transform .2s}
.ltopNav .lacctBtn:hover::after,
body.guestMode .gbNav .lacctBtn:hover::after{transform:translate(2px,-2px)}
/* saat dropdown login terbuka, panah menghadap ke atas-kanan → ke atas */
.lacct.open .lacctBtn::after{transform:rotate(-45deg)}

@media(max-width:520px){
  .ltopNav .lacctBtn,body.guestMode .gbNav .lacctBtn{height:32px;gap:7px;margin-left:4px;padding:0 4px 0 12px;min-width:0}
  .ltopNav .lacctTxt,body.guestMode .gbNav .lacctTxt{font-size:11px;letter-spacing:.06em}
  .ltopNav .lacctBtn::after,body.guestMode .gbNav .lacctBtn::after{width:22px;height:22px;background-size:12px 12px}
}
@media(max-width:400px){
  /* layar sempit: lingkaran panah disembunyikan, pil emas tetap tampil */
  .ltopNav .lacctBtn,body.guestMode .gbNav .lacctBtn{padding:0 12px}
  .ltopNav .lacctBtn::after,body.guestMode .gbNav .lacctBtn::after{display:none}
}
@media(min-width:900px){
  .ltopNav .lacctBtn,body.guestMode .gbNav .lacctBtn{height:46px;gap:14px;margin-left:14px;padding:0 6px 0 22px;min-width:0}
  .ltopNav .lacctTxt,body.guestMode .gbNav .lacctTxt{font-size:15px;letter-spacing:.12em}
  .ltopNav .lacctBtn::after,body.guestMode .gbNav .lacctBtn::after{width:34px;height:34px;background-size:17px 17px}
}

/* ═══ v276: logo login yang datanya terlambat (muncul setelah splash selesai) → fade-in halus, bukan loncat ═══ */
.lschLogo.lschLate{animation:lschLateIn .7s ease both}
@keyframes lschLateIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lschLogo.lschLate{animation:none}}

/* ═══ v277: logo halaman depan — lampu sorot yang berputar DIHAPUS, diganti kilauan lampu (bintang kecil berkedip) di sudut-sudut logo.
         Hapus blok ini untuk mengembalikan lampu berputar ═══ */
.lschLogo.l3d::before{display:none!important;animation:none!important}


/* ═══ v278: halaman depan — baris "Opening Hours: Everyday: 10:00 to 03:00" di atas copyright (data dari config.js → contact.hours) ═══ */
.lhours{margin:0 0 5px;font-size:12px;letter-spacing:.06em;line-height:1.4;color:rgba(232,220,200,.82)}
.lhours[hidden]{display:none}
.lhoursLbl{color:var(--gold2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lcard{padding-bottom:calc(64px + env(safe-area-inset-bottom))}   /* ruang tambahan untuk baris jam buka */
  .lhours{font-size:11.5px}
}

/* ═══ v279: saat masuk mode tamu (MORE EVENTS / Gallery / Contact / poster) → kursor tunggu, klik berikutnya diabaikan ═══ */
html.lEntering,html.lEntering *{cursor:progress!important}
html.lEntering .lschMore,html.lEntering .lschItem,html.lEntering .ltopBtn{pointer-events:none}
html.lEntering #loginPage *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ═══ v280: halaman depan — (1) jam buka dipindah ke strip tipis paling atas, (2) kilauan 4 titik di logo dihapus,
         (3) tombol Login: lingkaran putih berisi PLUS (bukan panah). Bar atas mode tamu tidak diubah ═══ */
.lhours{position:absolute;top:0;left:0;right:0;z-index:7;margin:0;padding:max(5px,env(safe-area-inset-top)) 12px 5px;
  text-align:center;font-size:11.5px;line-height:1.3;letter-spacing:.06em;color:rgba(232,220,200,.88);
  background:rgba(8,8,6,.55);border-bottom:1px solid rgba(201,168,76,.18);pointer-events:none}
.lhours[hidden]{display:none}
.lhoursLbl{font-size:10.5px}
.lhours:not([hidden]) ~ .ltop{padding-top:calc(max(8px,env(safe-area-inset-top)) + 24px)}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lcard{padding-bottom:calc(44px + env(safe-area-inset-bottom))}   /* ruang untuk copyright (jam buka sudah pindah ke atas) */
  .lhours{font-size:10.5px;padding-left:8px;padding-right:8px}
}
.ltopNav .lacctBtn::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1204' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.ltopNav .lacctBtn:hover::after{transform:rotate(90deg)}
.ltopNav .lacct.open .lacctBtn::after{transform:rotate(45deg)}   /* dropdown terbuka: plus jadi × */

/* ═══ v281: halaman depan — tulisan "CLUB KTV & RESTO" di kiri atas (menggantikan logo kecil) selama logo tengah tampil.
         Klik logo tengah → logo terbang ke kiri atas, tulisan memudar dan logo menggantikannya.
         Bila ada poster event (logo tengah tidak tampil) → logo kiri atas tampil biasa, tanpa tulisan ═══ */
.ltopLogo{position:relative}
.ltopWord{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:'Outfit','Raleway',sans-serif;font-weight:600;font-size:17px;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;
  color:var(--gold2);text-shadow:0 2px 12px rgba(0,0,0,.7);transition:opacity .3s ease}
.lcard.lWordMode .ltopLogo img{visibility:hidden}
.lcard.lWordMode .ltopLogo{pointer-events:none}
.lcard.lWordMode .ltopWord{display:block}
.lcard.lWordOut .ltopWord{opacity:0}
.lschLogo.l3d.lLogoLift{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
.lflyLogo{position:fixed;inset:0;z-index:9000;pointer-events:none;margin:0}
.lflyLogo i{position:absolute;backface-visibility:hidden;background-position:center;background-size:contain;background-repeat:no-repeat}
.lflyA{background-image:url('logo-emblem-hd.webp')}
.lflyB{background-image:url('logo.png');opacity:0}
@media(max-width:760px){
  .ltopWord{font-size:11px;letter-spacing:.14em}
  .ltopWord span{display:block}
}
@media(min-width:900px){ .ltopWord{font-size:20px} }

/* ═══ v283: halaman depan — tulisan "Login" di tombol diganti gambar kepala orang (ikon akun, tanpa lingkaran luar).
         Bar atas mode tamu tidak diubah. Hapus blok ini untuk kembali ke tulisan Login ═══ */
.ltopNav .lacctBtn .lacctTxt{display:none}
.ltopNav .lacctBtn .lacctIco{display:block;flex:none;width:24px;height:24px;stroke:#1a1204;stroke-width:1.9}
.ltopNav .lacctBtn .lacctIco circle:first-child{display:none}   /* buang lingkaran luar → kepala + bahu saja */
.ltopNav .lacctBtn{gap:8px;padding:0 5px 0 14px}
@media(max-width:520px){
  .ltopNav .lacctBtn{gap:6px;padding:0 4px 0 10px}
  .ltopNav .lacctBtn .lacctIco{width:20px;height:20px}
}
@media(max-width:400px){
  .ltopNav .lacctBtn{padding:0 11px}
}
@media(min-width:900px){
  .ltopNav .lacctBtn{gap:10px;padding:0 6px 0 18px}
  .ltopNav .lacctBtn .lacctIco{width:30px;height:30px}
}



/* ═══ v287: mode logo saja — tombol MORE EVENTS dihapus; logo tengah jadi tombol (klik = masuk halaman event) + transisi slide ═══ */
.lsch.lschEmpty .lschMore{display:none!important}
.lsch.lschEmpty .lschLogo{margin:auto}
.lschLogo[role=button]{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){.lschLogo[role=button]:hover{transform:scale(1.045)}}
.lschLogo[role=button]:active{transform:scale(.97)}
.lschLogo[role=button]:focus-visible{filter:drop-shadow(0 0 0 transparent);outline:2px solid rgba(201,168,76,.7);outline-offset:10px;border-radius:24px}
.lWipe{position:fixed;inset:0;z-index:9500;pointer-events:none;will-change:transform,opacity,clip-path;background:#080806}
html.lLeave-slide #loginPage{transform:translateX(-9%);opacity:.35;transition:transform .46s cubic-bezier(.7,0,.2,1),opacity .46s ease}
html.lLeave-iris #loginPage{transform:scale(1.06);opacity:.5;transition:transform .62s cubic-bezier(.65,0,.25,1),opacity .62s ease}
html.lLeave-zoom #loginPage{transform:scale(1.2);opacity:0;transition:transform .56s cubic-bezier(.5,0,.2,1),opacity .56s ease}

/* ═══ v288: tombol login halaman depan — hanya gambar orang, tanpa lingkaran putih berisi plus (tombol jadi bulat emas) ═══ */
.ltopNav .lacctBtn::after{display:none!important}
.ltopNav .lacctBtn{gap:0;width:40px;height:40px;min-width:40px;padding:0;justify-content:center}
.ltopNav .lacctBtn .lacctIco{width:22px;height:22px}
@media(max-width:520px){ .ltopNav .lacctBtn{width:36px;height:36px;min-width:36px;padding:0} .ltopNav .lacctBtn .lacctIco{width:20px;height:20px} }
@media(min-width:900px){ .ltopNav .lacctBtn{width:46px;height:46px;min-width:46px;padding:0} .ltopNav .lacctBtn .lacctIco{width:28px;height:28px} }

/* ═══ v290: animasi halaman Home — masuk berurutan, kartu statistik hidup, kartu muncul bertahap (js/home-anim.js) ═══ */
:root{--hvE:cubic-bezier(.2,.75,.2,1)}
@keyframes hvDown{from{opacity:0;transform:translate3d(0,-16px,0)}to{opacity:1;transform:none}}
@keyframes hvUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes hvPop{from{opacity:0;transform:translate3d(0,26px,0) scale(.94)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes hvSweep{from{transform:translate3d(-120%,0,0)}to{transform:translate3d(220%,0,0)}}
@keyframes hvTick{0%{transform:translate3d(0,0,0) scale(1)}35%{transform:translate3d(0,-3px,0) scale(1.12)}100%{transform:none}}
@keyframes hvLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* jika datang dari tirai transisi halaman depan, tunggu tirai lewat dulu */
html.hvSlideIn{--hvB:.35s}
html.hvAnim{--hvB:0s}

html.hvAnim #hdr{animation:hvDown .75s var(--hvE) both;animation-delay:var(--hvB,0s)}
html.hvAnim #hdr .hdrLogo{animation:hvPop .8s var(--hvE) both;animation-delay:calc(var(--hvB,0s) + .12s)}
html.hvAnim #hdrClock{animation:hvDown .7s var(--hvE) both;animation-delay:calc(var(--hvB,0s) + .22s)}
html.hvAnim #topNavBtns>*{animation:hvUp .6s var(--hvE) both}
html.hvAnim #topNavBtns>:nth-child(1){animation-delay:calc(var(--hvB,0s) + .20s)}
html.hvAnim #topNavBtns>:nth-child(2){animation-delay:calc(var(--hvB,0s) + .26s)}
html.hvAnim #topNavBtns>:nth-child(3){animation-delay:calc(var(--hvB,0s) + .32s)}
html.hvAnim #topNavBtns>:nth-child(4){animation-delay:calc(var(--hvB,0s) + .38s)}
html.hvAnim #topNavBtns>:nth-child(5){animation-delay:calc(var(--hvB,0s) + .44s)}
html.hvAnim #topNavBtns>:nth-child(n+6){animation-delay:calc(var(--hvB,0s) + .50s)}
html.hvAnim .homeInfo{animation:hvUp .75s var(--hvE) both;animation-delay:calc(var(--hvB,0s) + .35s)}
html.hvAnim .statCard{animation:hvPop .8s var(--hvE) both}
html.hvAnim .statCard.k1{animation-delay:calc(var(--hvB,0s) + .45s)}
html.hvAnim .statCard.k2{animation-delay:calc(var(--hvB,0s) + .55s)}
html.hvAnim .statCard.k3{animation-delay:calc(var(--hvB,0s) + .65s)}
html.hvAnim .statCard.k4{animation-delay:calc(var(--hvB,0s) + .75s)}
html.hvAnim .ctrlBar{animation:hvUp .7s var(--hvE) both;animation-delay:calc(var(--hvB,0s) + .85s)}

/* kilau emas menyapu kartu statistik sekali saat muncul */
.statCard{position:relative;overflow:hidden}
html.hvAnim .statCard::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(232,200,110,.22),transparent);transform:translate3d(-120%,0,0);
  animation:hvSweep 1.1s ease-out both;animation-delay:calc(var(--hvB,0s) + 1.0s)}
html.hvAnim .statCard.k2::after{animation-delay:calc(var(--hvB,0s) + 1.12s)}
html.hvAnim .statCard.k3::after{animation-delay:calc(var(--hvB,0s) + 1.24s)}
html.hvAnim .statCard.k4::after{animation-delay:calc(var(--hvB,0s) + 1.36s)}

/* angka berubah → melonjak sedikit */
.statCard .sv.hvTick{display:inline-block;animation:hvTick .45s var(--hvE)}

/* denah / kartu event: muncul bertahap sekali */
.hvReveal{animation:hvUp .6s var(--hvE) both;animation-delay:calc(var(--hvi,0)*38ms)}

/* sentuhan hover (perangkat dengan kursor saja) */
@media(hover:hover){
  .statCard{transition:transform .3s var(--hvE),box-shadow .3s ease,border-color .3s ease}
  .statCard:hover{transform:translate3d(0,-4px,0);box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 0 1px rgba(201,168,76,.28)}
  .statCard:hover .sico{transform:scale(1.08) rotate(-4deg)}
  .statCard .sico{transition:transform .3s var(--hvE)}
}
@media(prefers-reduced-motion:reduce){
  html.hvAnim *,.hvReveal,.statCard .sv.hvTick{animation:none!important}
}

/* ═══ v295: tombol login = kepala orang, bulat emas — berlaku juga di bar atas mode tamu (Gallery · Contact Us · Menu · semua tab) ═══ */
body.guestMode .gbNav .lacctTxt{display:none}
body.guestMode .gbNav .lacctBtn .lacctChev{display:none}
body.guestMode .gbNav .lacctBtn .lacctIco{display:block;flex:none;width:22px;height:22px;stroke:#1a1204;stroke-width:1.9;fill:none}
body.guestMode .gbNav .lacctBtn .lacctIco circle:first-child{display:none}   /* buang lingkaran luar → kepala + bahu saja */
body.guestMode .gbNav .lacctBtn::after{display:none!important}
body.guestMode .gbNav .lacctBtn{gap:0;width:40px;height:40px;min-width:40px;padding:0;justify-content:center}
@media(max-width:520px){ body.guestMode .gbNav .lacctBtn{width:36px;height:36px;min-width:36px;padding:0} body.guestMode .gbNav .lacctBtn .lacctIco{width:20px;height:20px} }
@media(min-width:900px){ body.guestMode .gbNav .lacctBtn{width:46px;height:46px;min-width:46px;padding:0} body.guestMode .gbNav .lacctBtn .lacctIco{width:28px;height:28px} }

/* ═══ Contact Us desktop — dirapikan: peta lebih lebar & tidak terlalu tinggi, info rata atas dengan peta,
       ikon Follow rata bawah dengan peta (tepi atas & bawah kedua kolom sejajar) ═══ */
@media(min-width:761px) and (orientation:landscape),(min-width:1101px){
  body.guestMode.gStageContact .gcBox{
    flex:1 1 0;max-height:460px;
    grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);
    column-gap:clamp(32px,4vw,72px);align-items:stretch;
  }
  body.guestMode.gStageContact .gcInfo{justify-content:flex-start;align-self:stretch;padding:2px 0 0;overflow:visible}
  body.guestMode.gStageContact .gcName{font-size:clamp(26px,2.4vw,36px);line-height:1.1}
  body.guestMode.gStageContact .gcName::after{margin-top:14px}
  body.guestMode.gStageContact .gcLbl{margin:clamp(22px,3.4vh,34px) 0 8px}
  body.guestMode.gStageContact .gcName + .gcLbl{margin-top:clamp(24px,4vh,38px)}
  body.guestMode.gStageContact .gcTxt{font-size:15.5px;line-height:1.55}
  body.guestMode.gStageContact .gcPh{margin-bottom:8px}
  body.guestMode.gStageContact .gcWa{margin-top:12px;font-size:15.5px}
  /* label + ikon "Follow" menempel ke dasar kolom (sejajar tepi bawah peta) */
  body.guestMode.gStageContact .gcInfo > .gcLbl:nth-last-child(2){margin-top:auto;padding-top:clamp(22px,3.4vh,34px)}
  body.guestMode.gStageContact .gcSoc{margin-top:0}
}
@media(min-width:761px) and (orientation:landscape) and (max-height:760px),(min-width:1101px) and (max-height:760px){
  body.guestMode.gStageContact .gcName{font-size:24px}
  body.guestMode.gStageContact .gcName::after{margin-top:8px}
  body.guestMode.gStageContact .gcLbl{margin:12px 0 4px}
  body.guestMode.gStageContact .gcName + .gcLbl{margin-top:16px}
  body.guestMode.gStageContact .gcTxt{font-size:13.5px;line-height:1.4}
  body.guestMode.gStageContact .gcPh{margin-bottom:3px}
  body.guestMode.gStageContact .gcInfo > .gcLbl:nth-last-child(2){padding-top:12px}
}

/* ═══ Contact Us desktop v2 — satu blok rapi di tengah layar: peta & info SAMA TINGGI (tepi atas/bawah sejajar),
       seluruh blok dipusatkan vertikal sehingga tidak ada ruang kosong menggantung di bawah ═══ */
@media(min-width:761px) and (orientation:landscape),(min-width:1101px){
  body.guestMode.gStageContact #guestContactView{justify-content:center;padding-bottom:clamp(12px,4vh,48px)}
  body.guestMode.gStageContact .gcBox{
    flex:0 0 auto;max-height:none;min-height:0;width:100%;
    grid-template-rows:auto;align-items:stretch;
  }
  body.guestMode.gStageContact .gcMap{height:auto;min-height:clamp(420px,56vh,540px)}
  body.guestMode.gStageContact .gcInfo{padding:0}
  body.guestMode.gStageContact .gcInfo > .gcLbl:nth-last-child(2){padding-top:clamp(18px,3vh,30px)}
}
/* laptop pendek: blok boleh menyusut mengikuti tinggi layar (tetap tanpa scroll) */
@media(min-width:761px) and (orientation:landscape) and (max-height:760px),(min-width:1101px) and (max-height:760px){
  body.guestMode.gStageContact .gcBox{flex:1 1 auto;min-height:0}
  body.guestMode.gStageContact .gcMap{min-height:0}
}

/* Jam header: lebar tiap digit tetap (angka tidak "menari" saat detik berganti, nama user tidak bergeser) */
#hClkTimeEl{font-variant-numeric:tabular-nums;white-space:nowrap}
#hClkTimeEl .cd,#hClkTimeEl .cc{display:inline-block;font-style:normal;text-align:center}
#hClkTimeEl .cd{width:.66em}
#hClkTimeEl .cc{width:.32em}

/* ═══ Tampilan PDF Menu: hanya menu — tanpa elemen lain ═══
   Latar penuh solid (logo/tulisan halaman di belakang tidak tembus) dan tulisan copyright
   halaman tamu disembunyikan selama menu terbuka, supaya tidak menimpa gambar menu. */
.lmenuBg,.lmenuBg:not([hidden]){background:#0b0b09!important}
html.lmenuOpen body::after,html.lmenuOpen body::before{display:none!important}
html.lmenuOpen .lcopy,html.lmenuOpen .appFoot,html.lmenuOpen .gevAddr{visibility:hidden!important}

/* ═══ Mode tamu: bar tab (Gallery · Contact Us · Menu · Login) tidak bergeser antar-halaman ═══
   Kalender (pendek) → denah meja (panjang) memunculkan/menghilangkan scrollbar sehingga lebar halaman
   berubah ±15px dan tab ikut bergeser. Ruang scrollbar dicadangkan tetap supaya posisinya konstan. */
html:has(body.guestMode){scrollbar-gutter:stable}

/* ═══ v311: Menu PDF — halaman berderet (scroll) + zoom (cubit / klik dua kali / Ctrl+roda / tombol) ═══ */
.lmenuBody.lmZoomOn{overflow:auto;touch-action:pan-x pan-y;overscroll-behavior:contain}
.lmZin{display:flex;flex-direction:column;align-items:center;width:max-content;min-width:100%;transform-origin:0 0}
.lmZin .lmenuPage{max-width:none;flex:none}
.lmZin .lmenuPage canvas{max-width:none}
.lmenuBar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.18);background:#0b0b09}
.lmenuBar[hidden]{display:none}
.lmBtn{width:40px;height:36px;border:1px solid rgba(255,255,255,.35);border-radius:3px;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.lmBtn:hover:not(:disabled){background:#fff;color:#080806}
.lmBtn:disabled{opacity:.3;cursor:default}
.lmBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lmZ{min-width:46px;text-align:center;font-family:'Outfit','Raleway',sans-serif;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75)}

/* ═══ v305: logo splash — HP sedikit lebih kecil, desktop menyesuaikan layar. Sumber gambar 1864px, jadi tetap tajam di layar retina.
   Rasio 233:169 tetap; animasi splash → login mengukur ukuran ini saat berjalan. ═══ */
#splashScreen .splash-logo-text img{
  width:min(80vw,330px,calc(46vh*1.379))!important;height:auto!important;max-width:none;
  image-rendering:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media(min-width:561px){
  #splashScreen .splash-logo-text img{width:min(44vw,460px,calc(52vh*1.379))!important}
}

/* ═══ v306: kalender tamu — alamat dihapus, judul & jarak dirapatkan, kalender dibesarkan (mengikuti tinggi layar) ═══ */
@media(min-width:561px){ body.guestMode.gStageEvents .gevAddr{display:none!important} }   /* alamat hanya tampil di HP */
body.guestMode.gStageEvents .gevCalHead{margin:8px 0 14px!important;top:0!important}
@media(min-width:561px){
  body.guestMode.gStageEvents .gtTile{aspect-ratio:1/1.18}
  /* 5 kolom × 3 baris: lebar dihitung dari tinggi layar agar 3 baris pas di antara judul dan copyright */
  body.guestMode.gStageEvents .gtWrap{width:min(100%,1180px,calc((100dvh - var(--gbH,72px) - 156px)*1.412 + 32px))}
}
@media(max-width:560px){
  body.guestMode.gStageEvents .gevCalHead{margin:6px 0 12px!important}
  body.guestMode.gStageEvents .gtGrid{grid-auto-rows:min(calc((100vh - 255px)/3),30cqw);grid-auto-rows:min(calc((100dvh - 255px)/3),30cqw)}
}

/* ═══ v307: kalender tamu HP = 4 kolom × 4 baris (16 kotak); desktop tetap 5 × 3 (15 kotak) ═══ */
@media(min-width:561px){ .gtGrid>.gtTile:nth-child(n+16){display:none} }
@media(max-width:560px){
  .gtGrid>.gtTile:nth-child(n+13){display:block}
  body.guestMode.gStageEvents .gtGrid{grid-auto-rows:min(calc((100vh - 255px)/4),30cqw);grid-auto-rows:min(calc((100dvh - 255px)/4),30cqw)}
}

/* ═══ v308: judul + kalender tepat di tengah (vertikal) antara bar atas dan copyright ═══ */
body.guestMode.gStageEvents #guestEventsView{justify-content:center;
  min-height:calc(100vh - var(--gbH,72px) - 40px);min-height:calc(100dvh - var(--gbH,72px) - 40px)}
body.guestMode.gStageEvents #content{padding-bottom:0!important}

/* ═══ v312: judul "Check Our Calendar" di HP dinaikkan sedikit (lebih dekat ke bar atas) ═══ */
@media(max-width:560px){ body.guestMode.gStageEvents .gevCalHead{position:relative;top:-22px!important} }

/* ═══ v313: kalender tamu HP kembali 4 kolom × 3 baris (12 kotak) ═══ */
@media(max-width:560px){
  .gtGrid>.gtTile:nth-child(n+13){display:none}
  body.guestMode.gStageEvents .gtGrid{grid-auto-rows:min(calc((100vh - 255px)/3),30cqw);grid-auto-rows:min(calc((100dvh - 255px)/3),30cqw)}
}

/* ═══ v314: HP — alamat tampil lagi di bawah kalender; kalender tetap di tengah ruang di atas alamat ═══ */
@media(max-width:560px){
  body.guestMode.gStageEvents #guestEventsView{min-height:calc(100vh - var(--gbH,72px) - 96px);min-height:calc(100dvh - var(--gbH,72px) - 96px)}
}

/* ── Pilihan bahasa ID | EN (halaman awal & bar tamu) ── */
.hvLang{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;letter-spacing:.08em}
.hvLang span{opacity:.45;font-weight:600;transition:opacity .2s,color .2s}
.hvLang span.on{opacity:1;font-weight:800}
.hvLang i{font-style:normal;opacity:.3}
body.guestMode .gbNav .hvLang span.on{color:var(--gold2)}

/* ── Halaman awal: poster event & judul "Event Mendatang" dikecilkan ── */
.lsch .lschTitle{font-size:clamp(22px,7vw,30px)}
@media(min-width:761px){
  .lsch .lschTitle{font-size:clamp(22px,2vw,32px)}
  .lsch .lschRow,.lsch .lschRow.single,.lsch .lschRow.fit{--pmax:min(330px,max(120px,calc((100dvh - 2*var(--gap,var(--top,150px)) - 150px) / 1.25)))}
}

/* ── Navigasi mobile layar penuh (js/mobnav.js) ── */
.hvBurger{display:none}
.mnavBg{display:block;position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0);visibility:hidden;pointer-events:none;
  color:#fff;font-family:'Montserrat','Outfit',sans-serif;transition:background .28s,visibility 0s linear .3s}
.mnavBg.on{background:rgba(0,0,0,.62);visibility:visible;pointer-events:auto;transition:background .28s}
/* laci dari kanan */
.mnavPanel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,380px);box-sizing:border-box;background:#282828;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 20px calc(32px + env(safe-area-inset-bottom,0px));
  border-left:1px solid rgba(255,255,255,.08);box-shadow:-14px 0 40px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mnavBg.on .mnavPanel{transform:none}
@media(prefers-reduced-motion:reduce){ .mnavBg,.mnavPanel{transition:none} }
.mnavTop{display:flex;align-items:center;gap:12px;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:6px}
.mnavLogo{line-height:0}
.mnavLogo img{height:60px;width:auto;display:block}
.mnavBook{margin-left:auto;border:2px solid #e3c46f;border-radius:999px;padding:12px 22px;color:#fff;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.mnavBook:active{background:rgba(227,196,111,.15)}
.mnavX{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer}
.mnavBook + .mnavX{margin-left:0}
.mnavTop > .mnavX:nth-child(2){margin-left:auto}
.mnavX svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.mnavList{margin-top:24px;display:flex;flex-direction:column;gap:2px}
.mnavList button{background:none;border:0;color:#fff;text-align:left;cursor:pointer;padding:3px 0;
  font:400 clamp(26px,8.2vw,34px)/1.25 'Montserrat','Outfit',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.mnavList button:active{color:#e3c46f}
.mnavSub{margin:30px 0 8px;color:#8d8d8d;font-size:20px;font-weight:400}
.mnavInfo a,.mnavInfo button{display:block;width:100%;background:none;border:0;text-align:left;cursor:pointer;color:#fff;
  font:400 17px/1.4 'Montserrat','Outfit',sans-serif;padding:8px 0;text-decoration:none}
.mnavInfo button.on{color:#e3c46f}
.mnavInfo button.on::after{content:' ✓'}
.hvBurger{background:none!important;border:0!important;color:#fff;width:44px;height:44px;padding:0!important;align-items:center;justify-content:center}
.hvBurger{color:#e3c46f}
.hvBurger svg{width:30px;height:30px;fill:currentColor;stroke:none}   /* tiga titik emas */
@media(max-width:760px){
  .ltopNav > .ltopBtn:not(.hvBurger),body.guestMode .gbNav > .ltopBtn:not(.hvBurger){display:none!important}
  .ltopNav > .hvBurger,body.guestMode .gbNav > .hvBurger{display:inline-flex!important}
}
@media(min-width:761px) and (pointer:fine){ .mnavBg{display:none!important} }   /* v336: layar sentuh (mode desktop di HP/tablet) tetap punya laci */
.mnavSoc{display:flex;gap:14px;margin-top:10px}
.mnavSoc a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;transition:border-color .2s,color .2s}
.mnavSoc a:active{border-color:#e3c46f;color:#e3c46f}
.mnavSoc svg{width:20px;height:20px;display:block}

/* ── Tombol Book Now (bar atas desktop & mode tamu) → WhatsApp ── */
.ltopBook{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;
  background:transparent;color:#fff;border:1px solid #e3c46f;border-radius:999px;padding:0 18px}
.ltopBook:hover{background:#e3c46f;color:#080806}
body.guestMode .gbNav .ltopBook{border:1px solid #e3c46f!important;border-radius:999px!important;color:#e3c46f!important;padding:0 14px!important}
body.guestMode .gbNav .ltopBook:hover{background:#e3c46f!important;color:#080806!important}

/* ── Tombol ⋯ (tiga titik emas) di semua navigasi mode tamu & halaman awal ── */
body.guestMode .gbNav .hvBurger,body.guestMode .gbNav .hvBurger:hover{color:#e3c46f!important}

/* ── Petunjuk "swipe" samar di tepi kanan (HP · halaman awal & mode tamu) ── */
.mnavHint{display:none;position:fixed;right:6px;top:50%;z-index:30;pointer-events:none;
  writing-mode:vertical-rl;transform:translateY(-50%);font:700 15px/1 'Montserrat','Outfit',sans-serif;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);text-shadow:0 1px 8px rgba(0,0,0,.7);
  animation:mnavHintNudge 2.6s ease-in-out infinite;transition:opacity .2s}
.mnavHint span{display:inline-block;margin-bottom:8px;font-size:22px;color:rgba(227,196,111,.85)}
.mnavHint.off{opacity:0;animation:none}
@media(max-width:760px){ body.guestMode .mnavHint,body:has(#loginPage) .mnavHint{display:block} }
@keyframes mnavHintNudge{0%,100%{opacity:.55;right:5px}50%{opacity:1;right:2px}}
@media(prefers-reduced-motion:reduce){ .mnavHint{animation:none} }

/* ── Pilihan bahasa di laci: ID · EN berdampingan ── */
.mnavInfo{display:flex;gap:22px}
.mnavInfo button{width:auto;font-weight:600;letter-spacing:.08em}

/* ═══ v288: halaman depan bersih — hanya logo besar + efek. Bila ada event ber-poster: geser/scroll ke bawah →
         panel Upcoming Events naik dari bawah (geser ke atas = kembali). Tanpa event/poster: tidak ada petunjuk & gestur ═══ */
.lpanel{transition:transform .65s cubic-bezier(.65,0,.25,1),opacity .5s ease,visibility 0s linear 0s}
.lpanel[data-pos="0"]{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.lpanel[data-pos="1"]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16vh);transition-delay:0s,0s,.65s}
.lpanel[data-pos="-1"]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-14vh) scale(.94);transition-delay:0s,0s,.65s}
.lpanel:not(#lsch){padding-top:26px;padding-bottom:26px}
.lgate{flex-direction:column;align-items:center;justify-content:center}
.lgateBtn{display:flex;align-items:center;gap:.35em;background:none;border:0;cursor:pointer;color:#fff;text-transform:uppercase;
  font-family:'Montserrat','Outfit',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:clamp(36px,9vw,60px);line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.65);-webkit-tap-highlight-color:transparent;padding:10px 16px}
.lgateBtn svg{width:.62em;height:.62em;fill:none;stroke:var(--gold2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.lgateBtn:active svg,.lgateBtn:hover svg{transform:translateX(6px)}
.lgateBtn:focus-visible{outline:2px solid var(--gold2);outline-offset:6px}
.lgate::after{content:'';width:44px;height:2px;background:var(--gold2);opacity:.85;margin-top:10px}
.lleft{transition:opacity .4s ease}
.lcard.lEv.lWordMode .ltopLogo img{visibility:visible}
.lcard.lEv.lWordMode .ltopLogo{pointer-events:auto}
.lcard.lEv.lWordMode .ltopWord{display:none}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lpanel:not(#lsch){position:absolute;left:0;right:0;top:calc(max(14px,env(safe-area-inset-top)) + 78px);
    bottom:calc(44px + env(safe-area-inset-bottom) + var(--lleft-h,110px) + 6px);flex:none;padding-top:34px}   /* tagline tetap tampil di bawah panel */
}
.lswipe{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;padding:8px 16px;cursor:pointer;color:var(--gold2);-webkit-tap-highlight-color:transparent;
  font:600 11px/1 'Outfit','Raleway',sans-serif;letter-spacing:.3em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.7);
  animation:lswipeIn .8s ease 1.2s both}
.lswipe[hidden]{display:none}
.lswipe svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:lswipeBob 1.8s ease-in-out infinite}
.lswipeUp{top:4px;bottom:auto;animation:none}
.lswipeUp svg{animation-name:lswipeBobUp}
@keyframes lswipeIn{from{opacity:0}to{opacity:1}}
@keyframes lswipeBob{0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(4px);opacity:1}}
@keyframes lswipeBobUp{0%,100%{transform:translateY(3px);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){#lsch,#lev,.lleft{transition:none}.lswipe,.lswipe svg{animation:none}}

/* ═══ v289: halaman depan — tanpa tulisan "CLUB KTV & RESTO" & tombol titik tiga (tampil lagi saat panel event terbuka); logo tengah lebih besar ═══ */
.lcard.lWordMode .ltopWord{display:none!important}
.lcard.lWordMode:not(.lEv) .hvBurger{visibility:hidden;pointer-events:none}
.lschLogo.l3d{width:min(82vw,560px,calc(54dvh*.796))}
@media(min-width:761px) and (orientation:landscape){ .lschLogo.l3d{width:min(560px,calc(48dvh*.796))} }
.lcard[data-lev] #lsch{padding-bottom:34px}

/* ═══ v290: performa — video latar tidak macet. Animasi drop-shadow (blur besar tiap frame) diganti denyut transform saja;
         animasi logo/glow dijeda saat panel event terbuka. Warna-warni glow (hue) tetap ═══ */
.lschLogo.l3d .l3dTilt>b.l3dFront{filter:drop-shadow(0 0 10px rgba(255,214,102,.8)) drop-shadow(0 0 22px rgba(201,168,76,.4));
  animation:clubLogoLite 1.9s ease-in-out infinite;will-change:transform}
@keyframes clubLogoLite{0%,100%{transform:scale(1)}12%,50%{transform:scale(1.04)}35%,75%{transform:scale(1.005)}}
.lschLogo.l3d .l3dGlow{will-change:transform,opacity}
.lcard.lEv .lschLogo .l3dFront,.lcard.lEv .lschLogo .l3dGlow,.lcard.lEv .lstreak,.lcard.lEv .lspark{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.lschLogo.l3d .l3dTilt>b.l3dFront{animation:none}}

/* ═══ v291: panel Event Mendatang dimaksimalkan — logo kiri atas & titik tiga disembunyikan di panel ini; judul, poster, tombol naik & lebih besar ═══ */
.lcard.lOnEv .ltopLogo img,.lcard.lOnEv .hvBurger{visibility:hidden!important;pointer-events:none}
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  #lev{top:max(6px,env(safe-area-inset-top));justify-content:flex-start;padding-top:36px}
  #lev .lschRow{--pmax:max(150px,min(78vw,360px,calc((100dvh - var(--lleft-h,110px) - 262px) / 1.25)))}
  #lev .lschName{font-size:13px}
  #lev .lschDate b{font-size:17px}
  #lev .lschMeta{margin-top:10px;min-height:44px}
  #lev .lschMore{height:34px;font-size:12px;padding:0 30px;margin-top:14px}
}

/* ═══ v292: logo kiri atas & titik tiga dihapus di SEMUA panel halaman depan (login). Hapus blok ini untuk mengembalikan ═══ */
#loginPage .ltopLogo,#loginPage .ltopLogo img,#loginPage .hvBurger{visibility:hidden!important;pointer-events:none!important}

/* ═══ v293: mode tamu (denah, kalender, gallery, contact) — logo kiri atas & titik tiga dihapus, sama seperti halaman depan. Hapus blok ini untuk mengembalikan.
         Menu tetap bisa dibuka dengan menggeser layar ke samping (HP) ═══ */
body.guestMode .gbNav .hvBurger{visibility:hidden!important;pointer-events:none!important}
/* v296: logo kiri atas disembunyikan hanya di HP; di desktop tetap tampil & bisa diklik untuk kembali ke halaman depan */
@media(max-width:760px){ body.guestMode .gbBrand,body.guestMode .gbBrand img{visibility:hidden!important;pointer-events:none!important} }
@media(min-width:761px){ body.guestMode .gbBrand,body.guestMode .gbBrand img{visibility:visible!important;pointer-events:auto!important} }

/* ═══ v289 — HP: panel Kalender/Galeri/Kontak tidak menumpuk dengan tagline di bawah ═══
   Ukuran poster mengikuti tinggi layar yang tersisa (dikurangi top bar, tagline, judul, info event, tombol MORE, panah swipe),
   dan panel diberi ruang bawah agar panah/label swipe tidak menimpa isi. */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .ltag{font-size:clamp(22px,6.6vw,32px);margin:0 0 10px}
  .lpanel:not(#lsch){padding-bottom:56px;overflow:hidden}
  .lschRow{--pmax:min(54vw,250px,max(84px,calc((100dvh - 78px - max(14px,env(safe-area-inset-top)) - 50px - env(safe-area-inset-bottom) - var(--lleft-h,96px) - 200px) / 1.25)))}
}

/* ═══ v294 — HP: panel Event — tab swipe (panah + label) selalu tampil di bawah, poster mengecil agar muat ═══
   (aturan #lev sebelumnya memberi poster terlalu besar sehingga isi menutupi/menimpa tab swipe) */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  #lev .lschRow{--pmax:max(110px,min(78vw,360px,calc((100dvh - var(--lleft-h,96px) - 300px - env(safe-area-inset-bottom)) / 1.25)))}
  #lev .lswipe:not(.lswipeUp){bottom:6px;z-index:6;opacity:1;animation:none}
  #lev .lswipe:not(.lswipeUp) svg{animation:lswipeBob 1.8s ease-in-out infinite}
}

/* ═══ v295 — HP: tab swipe (panah + label) tampil di SEMUA panel halaman depan: Event, Gallery, Contact ═══ */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  .lpanel:not(#lsch) .lswipe:not(.lswipeUp){bottom:6px;z-index:6;opacity:1;animation:none;visibility:visible}
  .lpanel:not(#lsch) .lswipe:not(.lswipeUp) svg{animation:lswipeBob 1.8s ease-in-out infinite}
  .lpanel:not(#lsch) .lswipeUp{z-index:6;opacity:1;visibility:visible}
  .lgate{padding-bottom:64px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){ .lpanel:not(#lsch) .lswipe svg{animation:none!important} }

/* ═══ v297 — halaman depan HP: judul "Upcoming Events" satu baris di atas poster; tidak ada tab swipe ke bawah setelah poster ═══ */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  #lev .lschTitle .utW{display:inline}
  #lev .lschTitle{margin-bottom:14px;font-size:clamp(20px,6.4vw,28px)}
  .lpanel#lev:not(#lsch){padding-bottom:16px}
  #lev .lschRow{--pmax:max(110px,min(78vw,360px,calc((100dvh - var(--lleft-h,96px) - 268px - env(safe-area-inset-bottom)) / 1.25)))}
}

/* ═══ v298 — desktop: logo kiri atas tampil di panel poster dan bisa diklik untuk kembali ke halaman depan (HP tetap tanpa logo) ═══ */
@media(min-width:761px){
  #loginPage .lcard.lEv .ltopLogo,#loginPage .lcard.lEv .ltopLogo img{visibility:visible!important;pointer-events:auto!important;cursor:pointer}
}

/* ═══ v299 — HP: poster event muat penuh — "EVENT LAINNYA" tidak kepotong tagline bawah ═══
   Panel event dimulai 78px + safe-area dari atas (bukan 6px) dan berakhir di atas tagline; ukuran poster dihitung dari sisa tinggi layar. */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  #lev .lschRow{--pmax:max(96px,min(78vw,360px,calc((100dvh - var(--lleft-h,96px) - 345px - max(0px,calc(env(safe-area-inset-top) - 14px)) - env(safe-area-inset-bottom)) / 1.25)))}
  #lev .lschTitle{margin-bottom:10px}
  #lev .lschMeta{margin-top:8px}
  #lev .lschMore{margin-top:10px}
}

/* ═══ v300 — judul "Upcoming Events / Event Mendatang": dua baris, font Montserrat ExtraBold seperti project hadesvip_updated_48 ═══ */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  #lev .lschTitle .utW{display:block}
  #lev .lschTitle{font-family:'Montserrat','Outfit',sans-serif;font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;
    font-size:clamp(28px,9vw,44px);margin-bottom:10px}
  #lev .lschRow{--pmax:max(96px,min(78vw,360px,calc((100dvh - var(--lleft-h,96px) - 386px - max(0px,calc(env(safe-area-inset-top) - 14px)) - env(safe-area-inset-bottom)) / 1.25)))}
}

/* ═══ v302 — halaman depan HP: logo tengah dinaikkan ke atas (± 3.5% tinggi layar; sebelumnya 7%) ═══ */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  #lsch .lschLogo.l3d{position:relative;top:-3.5dvh}
}

/* ═══ v309 — halaman depan desktop: (1) panel hero/event kembali selebar layar (sebelumnya ikut lebar 560px dari .lpanel sehingga logo besar
   terdorong ke kiri), (2) scrollbar emas (garis vertikal & horizontal) di hero dihilangkan, (3) logo kiri atas tampil lagi di desktop
   (sebelumnya disembunyikan v292 di semua panel). HP tidak diubah. ═══ */
.lsch.lpanel{width:auto;max-width:none}
#lsch.lpanel{overflow:visible}
#lev.lpanel{overflow-x:hidden}
@media(min-width:761px){
  #loginPage .lcard .ltopLogo,
  #loginPage .lcard .ltopLogo img{visibility:visible!important;pointer-events:auto!important;cursor:pointer}
  #loginPage .lcard .ltopWord{display:none!important}
}

/* ═══ v310 — desktop: judul "Upcoming Events" sama seperti di HP — dua baris, putih, Montserrat ExtraBold besar.
   Ukuran poster dikurangi sedikit supaya judul 2 baris tetap muat tanpa menabrak tombol MORE EVENTS. HP tidak diubah. ═══ */
@media(min-width:1101px),(min-width:761px) and (orientation:landscape){
  #lev .lschTitle .utW{display:block}
  #lev .lschTitle{font-family:'Montserrat','Outfit',sans-serif;font-weight:800;text-transform:uppercase;color:#fff;
    line-height:1.02;letter-spacing:-.01em;font-size:clamp(34px,3.4vw,54px);margin-bottom:clamp(12px,2vh,20px)}
  #lev .lschRow{--pmax:min(330px,max(110px,calc((100dvh - 2*var(--gap,150px) - 235px) / 1.25)))}
}

/* ═══ v315 — HP (≤760px): bar hitam di atas mode tamu (Gallery · Contact Us · Menu · bahasa · logo) dihapus di Kalender, Gallery & Contact Us.
   Navigasi diganti geser dari kanan (laci Beranda · Event · Gallery · Contact · Menu · ID/EN, js/mobnav.js) — petunjuk "‹ swipe" di tepi kanan.
   Desktop tidak diubah. Hapus blok ini untuk mengembalikan bar atas di HP. ═══ */
@media(max-width:760px){
  body.guestMode{--gbH:max(18px,env(safe-area-inset-top))}
  body.guestMode .guestBanner{display:none!important}
  body.guestMode #view-home{padding-top:var(--gbH)!important}
}

/* ═══ v316 — HP: glitch saat swipe dari kanan (laci menu) diperbaiki ═══
   • latar & panel laci tidak lagi melebar/menggeser halaman (overflow:hidden + isolasi layer, tanpa toggle overflow pada <html>)
   • gerakan geser horizontal tidak lagi "menarik" halaman / memicu bounce & navigasi balik browser (overscroll-behavior-x)
   • layer panel dipromosikan ke GPU supaya animasi masuk tidak berkedip ═══ */
.mnavBg{overflow:hidden;touch-action:none;overscroll-behavior:contain}
.mnavPanel{touch-action:pan-y;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:layout paint}
html.mnavOpen,html.mnavOpen body{overscroll-behavior:none}
.mnavHint{will-change:opacity,right}
@media(max-width:760px){
  html:has(body.guestMode),body.guestMode,html:has(#loginPage),body:has(#loginPage){overscroll-behavior-x:none}
}

/* v317 — laci menu HP: bingkai fokus putih di tombol × (muncul karena fokus otomatis saat laci dibuka) disembunyikan */
.mnavX:focus,.mnavX:focus-visible{outline:none;box-shadow:none}

/* ═══ v318 — halaman depan: transisi OMBAK saat geser naik/turun antar panel (logo ⇄ Upcoming Events), dan konten panel Event dinaikkan sedikit ═══
   Pita ombak (puncak bergelombang bergerak horizontal) melintas layar; panel berganti di balik ombak (js: lWave() di lPagerInit).
   Hapus blok ini untuk kembali ke transisi geser biasa (pemanggilan lWave tetap aman tanpa CSS ini — elemen akan hilang sendiri). ═══ */
.lWave{position:absolute;left:0;right:0;top:0;height:78dvh;z-index:5;pointer-events:none;will-change:transform;
  animation:lWaveUp 1.05s cubic-bezier(.5,.05,.3,1) forwards}
.lWave.down{animation-name:lWaveDown}
.lWb{position:absolute;inset:0;display:block;
  background:linear-gradient(180deg,rgba(18,26,70,.88) 0%,rgba(10,10,30,.94) 50%,rgba(60,38,10,.88) 100%)}
.lWc{position:absolute;left:0;width:200%;height:80px;display:block;animation:lWaveFlow 1.3s linear infinite}
.lWc.t{top:-79px}
.lWc.b{bottom:-79px;transform:scaleY(-1);animation-direction:reverse}
.lWf{fill:rgba(18,26,70,.88)}
.lWc.b .lWf{fill:rgba(60,38,10,.88)}
.lWs{fill:none;stroke:#f0d080;stroke-width:2.2;vector-effect:non-scaling-stroke;opacity:.9;filter:drop-shadow(0 0 6px rgba(240,208,128,.8))}
@keyframes lWaveFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lWc.b{animation-name:lWaveFlowB}
@keyframes lWaveFlowB{from{transform:scaleY(-1) translateX(-50%)}to{transform:scaleY(-1) translateX(0)}}
@keyframes lWaveUp{from{transform:translateY(calc(100dvh + 90px))}to{transform:translateY(calc(-78dvh - 90px))}}
@keyframes lWaveDown{from{transform:translateY(calc(-78dvh - 90px))}to{transform:translateY(calc(100dvh + 90px))}}
@media(prefers-reduced-motion:reduce){ .lWave{display:none} }

/* panel Event: poster + judul + tombol MORE EVENTS naik sedikit */
@media(max-width:760px),(max-width:1100px) and (orientation:portrait){
  #lev.lpanel:not(#lsch){padding-top:14px}
}
@media(min-width:1101px),(min-width:761px) and (orientation:landscape){
  #lev.lpanel:not(#lsch){top:calc(var(--gap,150px) - 26px);bottom:calc(var(--gap,150px) + 26px)}
}

/* ═══ v319 — layar logo: tulisan "UPCOMING EVENTS" + panah di bawah logo diganti ikon PIL (kapsul emas) yang melar naik-turun ═══
   Teks tetap ada di HTML untuk pembaca layar (disembunyikan secara visual). Hapus blok ini untuk kembali ke tulisan + panah. */
#lswipe{min-height:64px;justify-content:flex-start;gap:0;padding:10px 18px}
#lswipe>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#lswipe>svg{display:none}
#lswipe::before{content:'';display:block;box-sizing:border-box;width:22px;height:28px;border-radius:999px;
  border:2px solid var(--gold2);background:linear-gradient(180deg,rgba(240,208,128,.6),rgba(240,208,128,.12));
  box-shadow:0 0 14px rgba(240,208,128,.5),0 2px 10px rgba(0,0,0,.5);
  animation:lPillStretch 1.7s cubic-bezier(.45,.05,.4,1) infinite}
@keyframes lPillStretch{0%,100%{height:26px;opacity:.7}50%{height:48px;opacity:1}}
@media(prefers-reduced-motion:reduce){ #lswipe::before{animation:none;height:36px} }

/* ═══ v320 — panel Upcoming Events: tanda panah (^) di atas judul dihilangkan. Kembali ke logo tetap lewat geser turun / scroll / menu Beranda.
   Hapus blok ini untuk menampilkan panahnya lagi. ═══ */
.lpanel .lswipeUp,#lback{display:none!important}

/* ═══ v321 — ikon PIL layar logo disamakan dengan logo halaman depan: tempo (1.9s, denyut ganda di 12% & 50% — sama dengan clubLogoLite),
   warna (kuning-emas emblem #f9ca0b + cincin emas #d9a230), tekstur (gradasi mengkilap + brightness/saturate logo) dan glow emas yang sama. ═══ */
#lswipe::before{
  width:22px;height:26px;border-radius:999px;border:2px solid #d9a230;
  background:linear-gradient(180deg,#ffe94a 0%,#f9ca0b 42%,#e9ba18 72%,#c0913a 100%);
  filter:brightness(1.18) saturate(1.1);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 5px rgba(160,100,10,.35),0 0 10px rgba(255,214,102,.8),0 0 22px rgba(201,168,76,.4);
  opacity:1;will-change:height;
  animation:lPillBeat 1.9s ease-in-out infinite}
@keyframes lPillBeat{
  0%,100%{height:26px;box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 5px rgba(160,100,10,.35),0 0 6px rgba(201,168,76,.6),0 0 16px rgba(201,168,76,.3)}
  12%{height:48px;box-shadow:inset 0 2px 3px rgba(255,255,255,.6),inset 0 -3px 5px rgba(160,100,10,.35),0 0 12px rgba(255,214,102,.95),0 0 30px rgba(255,214,102,.55)}
  35%{height:29px;box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 5px rgba(160,100,10,.35),0 0 7px rgba(201,168,76,.65),0 0 18px rgba(201,168,76,.3)}
  50%{height:48px;box-shadow:inset 0 2px 3px rgba(255,255,255,.6),inset 0 -3px 5px rgba(160,100,10,.35),0 0 12px rgba(255,214,102,.95),0 0 30px rgba(255,214,102,.55)}
  75%{height:29px;box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 5px rgba(160,100,10,.35),0 0 7px rgba(201,168,76,.65),0 0 18px rgba(201,168,76,.3)}}
@media(prefers-reduced-motion:reduce){ #lswipe::before{animation:none;height:36px} }

/* ═══ v322 — HP & desktop (layar logo): ikon PIL diganti tulisan "SWIPE" transparan + panah ke bawah.
   Gaya disamakan dengan petunjuk "swipe" di tepi kanan (.mnavHint): Montserrat 700, huruf kapital, jarak huruf lebar, putih transparan, panah emas.
   Hapus blok ini untuk mengembalikan ikon pil. ═══ */
#lswipe{gap:6px;padding:10px 18px}
#lswipe::before{
  content:'swipe';display:block;box-sizing:content-box;width:auto;height:auto;border:0;border-radius:0;background:none;filter:none;
  padding-left:.3em;   /* mengimbangi jarak huruf terakhir agar tulisan tepat di tengah */
  font:700 15px/1 'Montserrat','Outfit',sans-serif;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.5);text-shadow:0 1px 8px rgba(0,0,0,.7);
  box-shadow:none;will-change:opacity;animation:lSwipeTxt 1.8s ease-in-out infinite}
#lswipe>svg{display:block;width:22px;height:22px;stroke:rgba(227,196,111,.85);stroke-width:2.2;filter:drop-shadow(0 1px 6px rgba(0,0,0,.7))}
@keyframes lSwipeTxt{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){ #lswipe::before{animation:none;height:auto} }

/* ═══ v323 — transisi halaman depan saat geser NAIK (logo → Upcoming Events): pita ZIG-ZAG menggantikan ombak (js: lWave di index.html). Geser turun juga zig-zag. ═══ */
.lWave .lWs{stroke-linejoin:miter;stroke-linecap:butt}

/* ═══ v324 — tulisan "SWIPE" layar logo: panah emas di sebelah kiri tulisan, menghadap ke KIRI, STATIS (tidak bergerak) — glyph "‹" yang sama dengan petunjuk swipe tepi kanan.
   Tulisan tetap di tengah (kolom kiri & kanan sama lebar); panah ke bawah di bawahnya tetap seperti sebelumnya. Hapus blok ini untuk menghilangkan panah kiri. ═══ */
#lswipe{display:grid;grid-template-columns:1fr auto 1fr;justify-items:center;align-items:center;align-content:start;gap:6px 0}
#lswipe[hidden]{display:none}
#lswipe::after{content:'\2039';grid-column:1;grid-row:1;justify-self:end;margin-right:10px;
  font:700 28px/1 'Montserrat','Outfit',sans-serif;color:rgba(227,196,111,.95);text-shadow:0 1px 8px rgba(0,0,0,.7);animation:none;
  transform:none}   /* ‹ menghadap ke KIRI, statis */
#lswipe::before{grid-column:2;grid-row:1}
#lswipe>svg{grid-column:1/-1;grid-row:2}

/* ═══ v325 — latar splash: gradasi emas diganti gelap netral agar kilatan kamera warna-warni (canvas, index.html initSplash) tampil jelas.
   Hapus blok ini + pulihkan partikel emas di initSplash untuk kembali ke latar lama. ═══ */
.splash-bg{background:radial-gradient(ellipse at 50% 42%,#15131d 0%,#0b0a10 45%,#060609 80%)}

/* ═══ v326 — layar logo: panah ke bawah (animasi) di bawah tulisan "SWIPE" dihilangkan. Panah "‹" statis di kiri tulisan tetap ada.
   Hapus blok ini untuk menampilkan panah bawah lagi. ═══ */
#lswipe>svg{display:none}

/* ═══ v327 — panah di sebelah tulisan "SWIPE" paling bawah: bentuk, ukuran & warna disamakan dengan panah petunjuk swipe di tepi kanan
   (glyph "‹" 22px tebal emas, tampil sebagai chevron menghadap atas karena diputar 90° seperti pada tulisan tegak). Statis. ═══ */
#lswipe::after{font:700 22px/1 'Montserrat','Outfit',sans-serif;color:rgba(227,196,111,.85);transform:rotate(90deg);margin-right:8px}

/* ═══ v328 — latar splash: efek PENDAR (cahaya emas lembut berdenyut di belakang logo + bola cahaya warna lembut melayang + kerlip). Mode diatur di index.html: SPLASH_FX = 'glow' | 'flash'.
   Dasar gelap dikembalikan ke nuansa emas-hangat agar pendar terasa menyala. ═══ */
.splash-bg{background:radial-gradient(ellipse at 50% 44%,#1a1306 0%,#0b0905 48%,#060606 82%)}

/* ═══ v329 — latar splash: gelap netral untuk efek blitz kamera wartawan (SPLASH_FX = 'press' di index.html). ═══ */
.splash-bg{background:radial-gradient(ellipse at 50% 44%,#14120f 0%,#0a0908 50%,#050505 82%)}

/* ═══ v331 — panah di sebelah tulisan "SWIPE" paling bawah: menghadap KIRI (tidak diputar lagi). Ukuran, ketebalan & warna tetap sama dengan panah swipe tepi kanan (22px, emas). ═══ */
#lswipe::after{transform:none;font:700 22px/1 'Montserrat','Outfit',sans-serif;color:rgba(227,196,111,.85);margin-right:8px}

/* ═══ v332 — judul "Upcoming Events / Event Mendatang" (halaman depan & mode tamu): font grotesk tebal Inter Tight 700 (mirip contoh "RESIDENTS 2026").
   Hapus blok ini untuk kembali ke Montserrat ExtraBold. ═══ */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/inter-tight-latin-700-normal.woff2') format('woff2'),url('fonts/inter-tight-latin-700-normal.woff') format('woff')}
#lev .lschTitle,.lschTitle{font-family:'Inter Tight','Helvetica Neue',Arial,sans-serif;font-weight:700;letter-spacing:-.015em}
/* v333 — judul "Upcoming Events" dinaikkan sedikit (geser visual saja, tata letak lain tidak ikut bergeser). Ubah angka -12px untuk atur jaraknya. */
#lev .lschTitle{transform:translateY(-12px)}

/* ═══ v334 — denah lantai (HP): halaman ikut TERGESER ke samping setelah ganti lantai.
   Penyebab: animasi geser lantai (translateX ±60px) melebarkan area gulir halaman, lalu browser HP membiarkan halaman digeser horizontal.
   Perbaikan: potong luapan horizontal di area denah & halaman, dan geseran horizontal di denah tidak dipakai untuk menggeser halaman. ═══ */
@media(max-width:760px),(orientation:landscape) and (max-height:500px) and (max-width:1100px){
  #guestLayoutView,.glvPager{overflow-x:clip}
  .glvPager{touch-action:pan-y}
  html:has(body.guestMode.gStageLayout),body.guestMode.gStageLayout{overflow-x:clip!important;max-width:100vw}
}

/* ═══ v335 — desktop: judul "Upcoming Events / Event Mendatang" satu baris panjang (bukan bertingkat). HP tetap dua baris.
   Di desktop judul tidak digeser naik lagi (v333) karena bisa terpotong tepi atas panel. ═══ */
@media(min-width:1101px),(min-width:761px) and (orientation:landscape){
  #lev .lschTitle .utW{display:inline}
  #lev .lschTitle{white-space:nowrap;transform:none}
}

/* ═══ v336 — mode desktop: petunjuk "‹ SWIPE" di TEPI KANAN tampil (halaman depan & mode tamu); petunjuk SWIPE di bawah logo disembunyikan.
   Hapus blok ini untuk mengembalikan: tepi kanan hanya di HP, SWIPE bawah tampil di desktop. ═══ */
@media(min-width:761px){
  body.guestMode .mnavHint,body:has(#loginPage) .mnavHint{display:block}
  #lswipe{display:none!important}
}