/* ============================================================
   z-lang.css - ZALIN LABS BAHASA (G469)
   Toggle pilihan bahasa [ID | EN] di navbar seluruh halaman
   zalinlabs.com. Warna mengikuti identitas site (#5a6af5).
   Berdiri sendiri; tidak menimpa styles.css / app.css / 3d.css.
   ============================================================ */

.z-lang-li { display: flex; align-items: center; margin-right: 0; }
.z-lang-m3d { display: inline-flex; align-items: center; margin-left: 6px; }

.z-lang {
  display: inline-flex; align-items: center;
  padding: 3px 6px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.z-lang-opt {
  appearance: none; border: 0; background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 6px; border-radius: 999px; cursor: pointer; min-height: 30px; min-width: 32px;
  transition: background 0.16s ease, color 0.16s ease;
}
.z-lang-opt:hover { color: #ffffff; background: rgba(255, 255, 255, 0.10); }
.z-lang-opt.is-active {
  background: #5a6af5; color: #ffffff;
  box-shadow: 0 2px 8px rgba(90, 106, 245, 0.4);
}
.z-lang-opt:focus-visible { outline: 2px solid rgba(90, 106, 245, 0.7); outline-offset: 1px; }

.z-lang-sep { color: rgba(255, 255, 255, 0.28); font-size: 0.74rem; user-select: none; }

/* Fallback: tak ada navbar (halaman tanpa nav) -> pill melayang */
.z-lang-float {
  position: fixed; right: 14px; bottom: 14px; z-index: 1300;
  background: rgba(10, 12, 30, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(5, 6, 15, 0.45);
}

/* Tema terang (member zone card putih / app terang bila ada) */
.light .z-lang, .z-lang.light {
  border-color: rgba(18, 21, 43, 0.12);
  background: rgba(18, 21, 43, 0.05);
}
.light .z-lang-opt, .z-lang.light .z-lang-opt { color: rgba(18, 21, 43, 0.7); }
.light .z-lang-opt:hover, .z-lang.light .z-lang-opt:hover { color: #12152b; background: rgba(18, 21, 43, 0.07); }
.light .z-lang-sep, .z-lang.light .z-lang-sep { color: rgba(18, 21, 43, 0.25); }

/* Mobile: pill tetap ringkas di dalam menu hamburger */
@media (max-width: 768px) {
  .z-lang-li { margin: 4px 0; }
  .z-lang-opt { min-height: 34px; }
}