/* ===== Foto Tour — Nambo Motor Virtual Showroom (scene-graph) ===== */
html,body{width:100%;height:100%;overflow:hidden;background:#0b0d10;}
#tour-app{position:fixed;inset:0;overflow:hidden;}

/* Photo stage */
#tour-stage{position:absolute;inset:0;background:#0b0d10;touch-action:none;cursor:grab;}

/* Tiap scene punya viewport tetap (full-bleed); cuma 1 yang aktif/keliatan, ganti pakai fade */
.tour-viewport{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;
  transform:scale(.94);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
.tour-viewport.active{opacity:1;pointer-events:auto;transform:scale(1);}
.tour-viewport.leaving{transform:scale(1.12);}

.tour-layer{position:absolute;inset:0;background:#000;will-change:transform;}
.tour-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;}

/* ===== Hotspot dasar (area klik), 3 gaya ===== */
.scene-hotspot{position:absolute;transform:translate(-50%,-50%);z-index:20;cursor:pointer;}

/* 1) invisible -- dipakai di scene mockup yg tombolnya SUDAH digambar di foto.
      Area klik transparan, cuma kasih afeksi tipis pas hover/tap biar user yakin itu bisa diklik. */
.scene-hotspot-invisible{border-radius:999px;background:rgba(255,255,255,0);
  box-shadow:0 0 0 0 rgba(255,255,255,0);transition:background .15s,box-shadow .15s;}
.scene-hotspot-invisible:hover{background:rgba(255,255,255,.08);box-shadow:0 0 0 2px rgba(255,255,255,.35) inset;}
.scene-hotspot-invisible:active{background:rgba(255,255,255,.16);}
.scene-hotspot-invisible.shape-card{border-radius:14px;}

/* 2) marker -- dot "+" merah + label on hover, dipakai buat hotspot motor di scene foto asli (belum ada tombol digambar) */
.marker-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:#e11d2a;border:2.5px solid rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.4);animation:hotspot-pulse 2.2s ease-in-out infinite;}
.scene-hotspot-marker:active .marker-dot{transform:translate(-50%,-50%) scale(.92);}
@keyframes hotspot-pulse{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 0 0 rgba(225,29,42,.5);}
  50%{box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 0 8px rgba(225,29,42,0);}}
.marker-label{position:absolute;left:50%;bottom:calc(50% + 26px);transform:translateX(-50%);
  background:rgba(16,18,22,.9);color:#fff;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;}
.scene-hotspot-marker:hover .marker-label{opacity:1;}

/* 3) pill -- tombol merah bulat lengkap (dipakai di scene yg backgroundnya foto polos, belum ada tombol digambar) */
.scene-hotspot-pill{width:auto !important;height:auto !important;white-space:nowrap;
  display:flex;align-items:center;gap:7px;padding:11px 20px;border-radius:999px;
  background:linear-gradient(180deg,#e11d2a,#b3121d);color:#fff;font-size:14px;font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .12s,box-shadow .12s;}
.scene-hotspot-pill:hover{transform:translate(-50%,-50%) translateY(-1px);}
.scene-hotspot-pill:active{transform:translate(-50%,-50%) scale(.97);}
.pill-icon{font-size:15px;}

/* Drag hint */
#tour-draghint{position:absolute;bottom:24px;left:24px;z-index:15;background:rgba(16,18,22,.65);
  color:#fff;padding:10px 14px;border-radius:12px;font-size:12px;display:flex;align-items:center;gap:8px;}
#tour-draghint .ic{font-size:16px;}

/* HUD button (WA) */
#tour-app .hud-btn{position:absolute;right:16px;top:14px;z-index:40;}

@media(max-width:520px){
  .scene-hotspot-pill{padding:9px 16px;font-size:12.5px;}
  #tour-draghint{bottom:16px;left:16px;font-size:11px;padding:8px 12px;}
}

/* Badge BETA */
#beta-badge{position:absolute;top:16px;left:16px;z-index:45;padding:5px 11px;border-radius:999px;
  background:rgba(16,18,22,.72);color:#fff;font:700 11px/1 system-ui,sans-serif;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);pointer-events:none;}
#beta-badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#e11d2a;margin-right:7px;vertical-align:1px;}