/* Halaman log masuk — tema Ramadan (Emerald & Gold), sepadan dengan halaman awam */
body.bare {
  min-height: 100vh; margin: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(214,182,107,.18), transparent 35%),
    radial-gradient(circle at 90% 90%, rgba(214,182,107,.12), transparent 40%),
    linear-gradient(135deg, #0F2E24 0%, #173F32 50%, #285B42 100%);
}
body.bare::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .08; background-size: 70px 70px;
  background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 2L43 27L68 35L43 43L35 68L27 43L2 35L27 27Z' fill='none' stroke='%23D6B66B' stroke-width='1'/%3E%3Ccircle cx='35' cy='35' r='12' fill='none' stroke='%23D6B66B'/%3E%3C/svg%3E");
}
.bare-alert { position: relative; z-index: 2; max-width: 420px; margin: 16px auto -4px; }
.lm-latar { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 16px; box-sizing: border-box; }
.lm-kad { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 920px; background: #F8F3E8; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); border: 1px solid rgba(214,182,107,.45); }
.lm-gambar { display: none; position: relative; min-height: 520px;
  background: linear-gradient(180deg, rgba(15,46,36,.25) 0%, rgba(15,46,36,.55) 45%, rgba(15,46,36,.95) 100%), var(--foto) center / cover no-repeat; }
.lm-gambar::after { content: ""; position: absolute; inset: 16px; border: 1.5px solid rgba(214,182,107,.55); border-radius: 170px 170px 14px 14px; pointer-events: none; }
.lm-gambar-isi { position: absolute; left: 34px; right: 34px; bottom: 40px; color: #fff; text-align: center; }
.lm-bismillah { font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif; color: #E9CD84; font-size: 24px; margin: 0 0 6px; }
.lm-gambar h2 { font-family: Georgia, "Times New Roman", serif; color: #F3DFA6; font-size: 30px; margin: 0 0 8px; }
.lm-gambar p { margin: 0; font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.7; }
.lm-borang { padding: 34px 28px 28px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.lm-logo { width: 84px; height: 84px; object-fit: contain; align-self: center; background: #fff; border-radius: 50%; padding: 4px; border: 2px solid #E2C982; box-shadow: 0 6px 18px rgba(23,63,50,.15); }
.lm-label { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #285B42; background: #F5EEDC; padding: 4px 12px; border-radius: 20px; }
.lm-borang h1 { font-family: Georgia, "Times New Roman", serif; color: #173F32; font-size: 26px; text-align: center; margin: 0; }
.lm-org { text-align: center; color: #827966; margin: -8px 0 4px; font-size: 13px; }
.lm-borang label { color: #493D2B; font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 6px; }
.lm-borang input[type=text], .lm-borang input[type=password] { border: 1.5px solid #E2D7BF; border-radius: 12px; padding: 13px 14px; font-size: 15px; background: #fff; }
.lm-borang input:focus { outline: 3px solid rgba(214,182,107,.45); border-color: #D6B66B; }
.lm-butang { margin-top: 4px; border: 0; border-radius: 14px; min-height: 52px; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #2A6B4B, #173F32); box-shadow: 0 8px 20px rgba(23,63,50,.3); border: 2px solid rgba(214,182,107,.6); transition: transform .15s ease; }
.lm-butang:hover { transform: translateY(-2px); }
.lm-butang:active { transform: scale(.97); }
.lm-nota { font-size: 12px; color: #827966; text-align: center; margin: 0; line-height: 1.6; }
.lm-kembali { text-align: center; font-size: 13px; color: #285B42; font-weight: 700; text-decoration: none; }
.lm-kembali:hover { text-decoration: underline; }
@media (min-width: 780px) {
  .lm-kad { grid-template-columns: 1.05fr 1fr; }
  .lm-gambar { display: block; }
  .lm-borang { padding: 44px 40px 34px; justify-content: center; }
}