/* Halaman masuk (keputusan pemilik 3 Nov 2026): form di kiri; maskot, jam, dan sapaan di kanan. Di HP, form lebih dulu. */
.mv {
  --mv-latar: #f1f2f9;
  --mv-jam: #27306f;
  --mv-kartu: rgba(255, 255, 255, .78);
  --mv-garis-kartu: rgba(255, 255, 255, .9);
  --mv-salam-gradasi: linear-gradient(95deg, #27306f 0%, #5a3aa6 52%, #e2566f 100%);
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  min-height: 100vh; min-height: 100dvh; padding: calc(28px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(52% 58% at 16% 12%, rgba(156, 164, 245, .5), transparent 72%),
    radial-gradient(46% 52% at 92% 78%, rgba(244, 170, 186, .55), transparent 72%),
    radial-gradient(44% 44% at 50% 100%, rgba(197, 178, 245, .42), transparent 72%),
    var(--mv-latar);
}
.mv-kiri { display: grid; gap: 24px; align-content: start; width: 100%; max-width: 480px; margin-inline: auto; }
.mv-kartu {
  padding: 28px 22px 24px; border-radius: 26px; background: var(--mv-kartu); border: 1px solid var(--mv-garis-kartu);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 2px rgba(31, 47, 107, .05), 0 24px 56px -18px rgba(31, 47, 107, .26);
}
.mv-kartu h1 { font: 760 28px/1.15 var(--huruf-judul); letter-spacing: -.02em; }
.mv-sub { margin-top: 6px; color: var(--redup); font-size: 15px; }
.mv-form { margin-top: 22px; gap: 16px; }
.mv-form .masukan { min-height: 54px; border-radius: 16px; padding-inline: 16px; font-size: 16px; }
.mv-sandi > .masukan { padding-left: 16px; padding-right: 52px; }
.mv-sandi > .tombol-dalam { right: 6px; }
.mv-form .centang { padding-block: 4px; }
.mv-tombol.tombol-utama {
  min-height: 56px; border-radius: 18px; font-size: 16px; font-weight: 720; color: #fff; border-color: transparent;
  background: linear-gradient(100deg, #27306f 0%, #34489a 62%, #6a4595 100%);
  box-shadow: 0 16px 28px -14px rgba(31, 47, 107, .65);
}
.mv-tombol.tombol-utama:hover { filter: brightness(1.08); }
.mv-kaki { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--garis); }
.mv-admin { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--redup); font-size: 14.5px; font-weight: 620; text-decoration: none; }
.mv-admin .i { flex: none; width: 19px; height: 19px; color: #21a366; }
a.mv-admin:hover { color: var(--teks); text-decoration: underline; }
.mv-catat { color: var(--redup); font-size: 13px; }

.mv-kanan { display: grid; justify-items: start; width: 100%; max-width: 480px; margin-inline: auto; }
.mv-maskot {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; margin-bottom: 18px;
  background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 8px rgba(255, 255, 255, .42), 0 18px 34px -14px rgba(31, 47, 107, .32);
}
.mv-maskot img { width: 72%; height: auto; }
.mv-jam { font: 200 56px/1 var(--huruf-judul); letter-spacing: -.03em; color: var(--mv-jam); font-variant-numeric: tabular-nums; }
.mv-tanggal { margin-top: 8px; color: var(--redup); font-size: 15px; font-weight: 620; }
.mv-salam { margin-top: 22px; font: 800 clamp(32px, 9vw, 40px)/1.08 var(--huruf-judul); letter-spacing: -.035em; color: var(--teks); text-wrap: balance; }
.mv-salam span { background: var(--mv-salam-gradasi); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mv-teks { margin-top: 14px; max-width: 34em; color: var(--redup); font-size: 16px; line-height: 1.6; text-wrap: pretty; }

@media (min-width: 960px) {
  .mv {
    grid-template-columns: minmax(380px, 550px) minmax(0, 1fr); gap: clamp(48px, 6vw, 115px); align-items: center;
    padding-inline: clamp(32px, 6vw, 114px); padding-block: 40px;
  }
  .mv-kiri, .mv-kanan { max-width: none; margin-inline: 0; }
  .mv-kiri { gap: 28px; }
  .mv-kartu { padding: 40px 38px 34px; border-radius: 30px; }
  .mv-form .masukan { min-height: 60px; }
  .mv-tombol.tombol-utama { min-height: 64px; font-size: 17px; }
  .mv-maskot { width: 134px; height: 134px; margin-bottom: 40px; }
  .mv-jam { font-size: clamp(76px, 7vw, 112px); }
  .mv-tanggal { font-size: 17px; }
  .mv-salam { margin-top: 44px; font-size: clamp(48px, 4.4vw, 76px); }
  .mv-teks { margin-top: 20px; max-width: 560px; font-size: 21px; line-height: 1.58; }
}

/* Tema gelap */
html[data-gelap] .mv {
  --mv-latar: #0b0e19; --mv-jam: #c7cffb; --mv-kartu: rgba(23, 29, 48, .82); --mv-garis-kartu: rgba(255, 255, 255, .08);
  --mv-salam-gradasi: linear-gradient(95deg, #aab6ff 0%, #c79bf2 52%, #ff93a8 100%);
  background:
    radial-gradient(52% 58% at 16% 12%, rgba(73, 86, 190, .34), transparent 72%),
    radial-gradient(46% 52% at 92% 78%, rgba(190, 72, 104, .26), transparent 72%),
    radial-gradient(44% 44% at 50% 100%, rgba(112, 78, 190, .22), transparent 72%),
    var(--mv-latar);
}
html[data-gelap] .mv-maskot { background: rgba(255, 255, 255, .86); box-shadow: 0 0 0 8px rgba(255, 255, 255, .08), 0 18px 34px -14px rgba(0, 0, 0, .7); }
html[data-gelap] .mv-kartu { box-shadow: 0 24px 56px -18px rgba(0, 0, 0, .7); }
html[data-gelap] .mv-tombol.tombol-utama { color: #fff; background: linear-gradient(100deg, #3a49a8 0%, #4a60c4 62%, #8458b5 100%); }

/* Logo sedikit lebih besar daripada di kepala halaman. */
.mv .merek { gap: 12px; }
.mv .merek-logo { width: 48px; height: 48px; }
.mv .merek-teks small { font-size: 12px; }
.mv .merek-teks b { font-size: 18px; }

/* HP dan tablet kecil: terpusat seperti halaman masuk WMS, tanpa jam dan sapaan (keputusan pemilik 3 Nov 2026). */
.mv-kepala-hp, .mv-kaki-hp { display: none; }
@media (max-width: 959.98px) {
  .mv { align-content: center; justify-items: center; gap: 0; }
  .mv-kiri > .merek, .mv-kanan, .mv-kaki { display: none; }
  .mv-kiri { gap: 22px; }
  .mv-kepala-hp { display: grid; justify-items: center; text-align: center; }
  .mv-kepala-hp .mv-maskot { width: 104px; height: 104px; margin-bottom: 18px; }
  .mv-nama { font: 760 26px/1.2 var(--huruf-judul); letter-spacing: -.02em; color: var(--teks); }
  .mv-nama span { color: var(--redup); font-weight: 650; }
  .mv-tagline { margin-top: 4px; font-size: 15px; color: var(--redup); }
  .mv-kaki-hp { display: grid; gap: 6px; justify-items: center; padding-inline: 12px; text-align: center; }
  .mv-kaki-hp .mv-admin { justify-content: center; }
}