/* MBG366 Viewport Sync - CSS */

html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden !important;
}

/* Semua gambar agar tidak melebar keluar layar */
img,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Mobile stabil */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    min-width: 320px !important;
    overflow-x: hidden !important;
  }

  body {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }

  * {
    box-sizing: border-box;
  }

  .mbg-vp-safe {
    width: 100%;
    max-width: var(--mbg-mobile-max, 430px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mode debug viewport */
#mbgViewportDebug {
  position: fixed;
  right: 8px;
  top: 8px;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.82);
  color: #00e5ff;
  border: 1px solid #00e5ff;
  border-radius: 8px;
  padding: 6px 8px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
  pointer-events: none;
}