:root { --mframe-w: 430px; } /* ubah 390/414/430 sesuai selera */

/* Background luar (di desktop/tablet) jadi abu-abu lembut */
html, body { height: 100%; }
body { background: #e5e7eb !important; }

/* Frame aplikasi mobile yang di-center */
.mframe {
  width: 100%;
  max-width: var(--mframe-w);
  min-height: 100svh;
  margin: 0 auto;
  background: #f6f8fb; /* selaras var(--bg) */
  position: relative;
  box-shadow:
    0 10px 30px rgba(2, 6, 23, .06),
    0 0 0 1px rgba(2, 6, 23, .04);
}

/* Pastikan header sticky dan section mengikuti lebar frame */
.mframe .header-grad,
.mframe .section,
.mframe .containerx { width: 100%; margin: 0 auto; }

/* Modal juga jangan melebar di desktop */
.modal-dialog {
  max-width: var(--mframe-w);
  margin-left: auto;
  margin-right: auto;
}