/* GAMELAND — Edge Panel (mendorong konten, bukan menimpa) */
:root { --ep-w: 68px; }

body { transition: padding-left .32s cubic-bezier(.22,.8,.3,1); }
body.ep-open { padding-left: var(--ep-w); }

.edge-panel {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--ep-w);
  z-index: 60; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 84px 0 20px;
  background: var(--bg-elevated); border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.22,.8,.3,1);
  touch-action: pan-y;
}
body.ep-open .edge-panel { transform: translateX(0); }

.ep-btn {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  display: grid; place-items: center; position: relative;
  color: var(--text-muted); transition: background .2s, color .2s;
}
.ep-btn:hover, .ep-btn:focus-visible { background: var(--card-hover); color: var(--text); outline: none; }
.ep-btn.active { background: var(--accent-glow); color: #fff; box-shadow: inset 0 0 0 1px var(--border-accent); }
.ep-btn svg { width: 22px; height: 22px; }
.ep-btn::after {
  content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: var(--radius-sm);
  opacity: 0; transition: opacity .15s;
}
.ep-btn:hover::after, .ep-btn:focus-visible::after { opacity: 1; }
.ep-sep { width: 28px; height: 1px; background: var(--border); margin: 6px 0; }

/* Gagang di tepi layar */
.ep-handle {
  position: absolute; top: 50%; left: 100%; width: 22px; height: 64px;
  transform: translateY(-50%); display: grid; place-items: center;
  background: var(--bg-elevated); color: var(--text-muted);
  border: 1px solid var(--border); border-left: none; border-radius: 0 12px 12px 0;
}
.ep-handle:hover { color: #fff; background: var(--accent); }
.ep-handle svg { width: 14px; height: 14px; transition: transform .32s; }
body.ep-open .ep-handle svg { transform: rotate(180deg); }
/* Saat tertutup, gagang tetap terlihat di tepi kiri */
.edge-panel:not(.is-open) .ep-handle { box-shadow: 4px 0 16px rgba(0,0,0,.35); }

/* Zona sentuh tak terlihat untuk swipe dari tepi */
.ep-edge-zone { position: fixed; top: 0; left: 0; bottom: 0; width: 18px; z-index: 59; }
body.ep-open .ep-edge-zone { display: none; }

@media (max-width: 640px) {
  :root { --ep-w: 58px; }
  .ep-btn { width: 42px; height: 42px; }
  .ep-btn::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body, .edge-panel, .ep-handle svg { transition: none; }
}

/* Halaman belum tersedia */
.ep-btn.soon { opacity: .5; cursor: default; }
.ep-btn.soon:hover { background: transparent; color: var(--text-muted); }