/* Stage & BG */
/* Stage & BG */
/* ===== HERO STAGE & BACKGROUND ===== */
.hero-art .stage {
  position: relative;
  aspect-ratio: 4/3;     /* ukuran panggung = rasio 4:3 */
  max-height: 70vh;      /* tinggi maksimal 70% layar */
  overflow: hidden;
}

/* Background belakang & depan */
.bg.back,
.bg.front {
  position: absolute;
  inset: 0;              /* isi penuh stage */
}

.bg.back img,
.bg.front img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* cover = isi penuh (bisa crop) */
  /* pakai contain kalau mau gambar tidak ter-crop */
}

/* Layer urutan */
.bg.back   { z-index: 1; }   /* belakang */
.char-sprite-wrap { z-index: 3; } /* karakter */
.bg.front  { 
  z-index: 5; 
  pointer-events: none;  /* biar tidak menghalangi klik */
}

/* ===== KARAKTER ===== */
.char-sprite-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.char-sprite {
  max-height: 380px;
  width: auto;
  transform: translateY(40px);
}

/* ===== HIT ZONES ===== */
.hit { 
  position: absolute; 
  z-index: 6; /* di atas bg & karakter */
  /* outline:2px dashed rgba(0,0,0,.2); */ 
}
.hit.board  { left:40%; top:10%; width:22%; height:16%; } /* papan menu */
.hit.open   { left:10%; top:12%; width:12%; height:12%; } /* OPEN sign */
.hit.machine{ left:10%; top:60%; width:20%; height:20%; } /* mesin kopi */

/* ===== HOTSPOT TOOLTIP ===== */
.hotspot {
  position: absolute; 
  z-index: 7; /* paling atas */
  transform: translate(-50%, calc(-100% - 8px));
  background: var(--secondary);
  color: #fff; 
  font-weight: 800; 
  font-size: .92rem;
  padding: .38rem .64rem; 
  border-radius: .6rem;
  opacity: 0; 
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.stage.show-board  .hotspot.menu,
.stage.show-open   .hotspot.open,
.stage.show-machine .hotspot.machine { 
  opacity: 1; 
  pointer-events: auto; 
}

/* ===== OUTLET SLIDER ===== */
.outlet-slider { position: relative; padding: 12px; }
.outlet-slider .track-wrap { overflow: hidden; }
.outlet-slider .track { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  gap: 12px; 
  will-change: transform; 
  transition: transform .25s ease; 
}
.outlet-slider .outlet { min-width: 260px; max-width: 260px; overflow: hidden; }
.outlet-slider .outlet img { width: 100%; height: 160px; object-fit: cover; display: block; }
.outlet-slider .outlet .meta { padding: 10px 12px; }
.outlet-slider .nav { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  z-index: 3;
  width: 36px; 
  height: 36px; 
  border-radius: 999px; 
  border: 1px solid rgba(255,255,255,.25);
  background: var(--secondary); 
  color: #fff; 
  font-size: 22px; 
  font-weight: 800; 
  cursor: pointer;
}
.outlet-slider .nav.prev { left: 8px; }
.outlet-slider .nav.next { right: 8px; }
.outlet-slider .nav:hover { filter: brightness(1.1); }

:root{
  --brand:#1e2c73;
  --elev:0 8px 24px rgba(0,0,0,.18);
  --elev-soft:0 4px 14px rgba(0,0,0,.12);
}

/* pastikan tombol selalu fixed */
.fab-wrap{
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2147483000; /* sangat tinggi, di atas widget lain */
  pointer-events: auto;
}

/* sisanya tetap sama */
.fab-btn{
  width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--elev);transition:transform .2s, box-shadow .2s;
}
.fab-wrap .fab-menu{
  position:absolute;right:0;bottom:70px;display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.fab-wrap.open .fab-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.fab-item{ display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 14px;box-shadow:var(--elev-soft); }

  /* Overlay full viewport */
  .intro-modal{
    position: fixed;
    inset: 0;
    display: none;                  /* dibuka via JS */
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    z-index: 2147483600;
  }
  /* Kartu kecil di tengah (bukan fullscreen) */
  .intro-card{
    position: relative;
    width: min(92vw, 520px);
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    text-align: center;
    cursor: pointer;                /* klik kartu juga menutup */
  }
  .intro-title{ margin:0 0 8px; font-size:1.6rem; color:#1e2c73; }
  .intro-sub{ margin:0 0 18px; color:#555; }

  /* Blur & kunci klik di belakang saat popup aktif */
  body.intro-open > *:not(#intro-modal){
    filter: blur(6px);
    pointer-events: none !important;
    user-select: none;
    transition: filter .2s ease;
  }
  body.intro-open{ overflow: hidden; }