/* =====================================================================
   LAYAR MASUK — kartu login sederhana di atas Indonesia dari orbit malam

   Tata rupa mengikuti mock-up "Login Header.dc.html" (E:\2026\test\Login
   Page): panji AVENGERS raksasa dengan huruf Lora italic dan bayangan
   navy, kartu login gelap-transparan bersudut kecil, tombol utama sian
   #35e0c4, latar bumi diterangkan lewat filter brightness+saturate pada
   gambarnya sendiri (bukan overlay tebal seperti versi sebelumnya).

   Semua kelas berawalan `lm` (layar masuk). ID di kartu (iUser, iPass,
   btnMasuk, kmPanelMasuk, kmPanelDaftar, dst.) tidak disunting supaya JS
   di 07-kartu-masuk.js & 12-jembatan-elogbook.js jalan tanpa perubahan.
   ===================================================================== */

:root{
  --lm-sian:#35e0c4;
  --lm-sian-terang:#6ef0da;
  --lm-jingga:#f6971d;
  --lm-jingga-terang:#ffb52e;
  --lm-teks:#f2f6ff;
  --lm-teks-redup:#9fb0cd;
  --lm-teks-remang:#8fa2c4;
  --lm-teks-kabur:#6d7f9e;
  --lm-kartu-bg:rgba(9,17,33,.82);
  --lm-kartu-garis:rgba(90,130,190,.28);
  --lm-input-bg:rgba(16,27,49,.7);
  --lm-input-garis:rgba(100,135,195,.32);
}

#layarMasuk{
  position:fixed; inset:0; z-index:100; overflow-y:auto; overflow-x:hidden;
  color:var(--lm-teks);
  font-family:'Barlow','IBM Plex Sans',system-ui,sans-serif;
  min-height:100vh;
  transition:opacity .6s ease, visibility .6s ease;
  background:#04070f;
}
#layarMasuk.pergi{opacity:0; visibility:hidden; pointer-events:none;}

/* --- Latar bumi dari orbit. Gambarnya dipasang sebagai <img> di JS/CSS
   supaya bisa dicerahkan lewat filter (brightness/saturate/contrast) —
   overlay hitam di atasnya dibuat tipis, jadi warna aslinya keluar.  */
.lm-langit{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    url('/images/indonesia-orbit-bg.png') center center / cover no-repeat,
    #04070f;
  filter:brightness(1.35) saturate(1.12) contrast(1.02);
}
.lm-langit::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,12,26,.35) 0%,
    rgba(6,12,26,.15) 40%,
    rgba(4,7,16,.55) 100%);
}

/* --- Kepala: merek kiri, jam UTC kanan.  */
.lm-kanvas{
  position:relative; z-index:3;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:26px 34px;
}
.lm-merek{display:flex; align-items:center; gap:14px;}
.lm-tanda{
  width:54px; height:54px; flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  transition:transform .25s ease, filter .25s ease;
}
.lm-tanda img{
  width:100%; height:100%; object-fit:contain; display:block;
  /* "Timbul": bayangan gelap memberi kedalaman/mengangkat logo dari latar,
     lalu glow toska tipis menyatukannya dengan tema kartu. */
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,.55))
    drop-shadow(0 1px 2px rgba(0,0,0,.4))
    drop-shadow(0 0 12px rgba(53,224,196,.35));
}
.lm-tanda:hover{transform:translateY(-2px) scale(1.04);}
.lm-tanda:hover img{
  filter:
    drop-shadow(0 7px 16px rgba(0,0,0,.6))
    drop-shadow(0 1px 2px rgba(0,0,0,.45))
    drop-shadow(0 0 18px rgba(53,224,196,.5));
}
.lm-merek-teks{display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.35;}
.lm-merek-teks b{
  font-family:'Rajdhani','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:18px; letter-spacing:.12em; color:var(--lm-teks);
}
.lm-merek-teks span{
  font-family:'Share Tech Mono','IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.18em; color:var(--lm-teks-remang);
}
.lm-jam{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-align:right;
}
.lm-jam span{
  font-family:'Trebuchet MS','Barlow',sans-serif;
  font-weight:700; font-size:15px; letter-spacing:.3em;
  color:var(--lm-teks-remang);
}
.lm-jam b{
  font-family:'Poppins','Barlow',sans-serif;
  font-weight:600; font-size:23px; letter-spacing:.06em;
  color:var(--lm-sian);
  text-shadow:0 0 16px rgba(53,224,196,.5);
}

/* --- Panji AVENGERS. Judul memakai Lora italic tebal; isian huruf
   gradien kuning ke jingga; bayangan navy berlapis (drop-shadow) meniru
   poster film — dua lapis warna gelap kebiruan lalu satu blur lembut. */
.lm-panji{
  position:relative; z-index:2;
  text-align:center;
  margin:44px auto 0;
  padding:0 22px;
  user-select:none;
}
.lm-panji-judul{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic; font-weight:800;
  /* Lantai clamp dibuat kecil (40px) supaya judul menyusut mengikuti lebar
     layar di HP — dengan lantai 76px lama, judul membeku terlalu besar dan
     meluber keluar layar di bawah ~600px. Faktor vw menjaganya tetap gagah
     di tablet/desktop, dan atap 176px tak berubah. */
  font-size:clamp(40px, 13.2vw, 176px);
  line-height:.9; letter-spacing:.015em;
  background:linear-gradient(180deg,
    #ffd257 0%,
    #ffb52e 42%,
    #f6971d 62%,
    #e07d10 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:
    drop-shadow(2px 3px 0 #2f4a70)
    drop-shadow(4px 6px 0 #223449)
    drop-shadow(6px 8px 6px rgba(0,0,0,.6));
}
.lm-panji-anak{
  margin:14px 0 0;
  font-family:'Barlow Semi Condensed','Barlow',sans-serif;
  font-style:italic; font-weight:800;
  font-size:clamp(16px, 2.2vw, 30px); letter-spacing:.02em; line-height:1.2;
  color:var(--lm-jingga-terang);
  text-decoration:none;
  text-shadow:
    2px 2px 0 #24384f,
    3px 3px 6px rgba(0,0,0,.6),
    0 0 24px rgba(246,151,29,.4);
}

/* --- Tengah: pemusat kartu login (panji berdiri sendiri di baris atasnya
   pada grid #layarMasuk). Padding atas 56px = jarak dari sub-judul panji
   ke kartu, persis seperti mock-up. */
.lm-tengah{
  position:relative; z-index:3;
  display:flex; justify-content:center;
  padding:56px 24px 40px;
}

/* --- Kartu login. Panel gelap navy, sudut kecil, tepi tipis biru.
   Kesan "timbul": gradien vertikal halus (atas sedikit terang) + bingkai
   ganda (garis biru + garis highlight putih tipis di dalam), bayangan
   dua-lapis (bayangan jauh besar untuk kedalaman + ambient dekat untuk
   pijakan), dan sorotan lampu lembut di tepi atas. */
.lm-kartu{
  width:100%; max-width:400px; position:relative;
  padding:34px 34px 38px;
  background:
    linear-gradient(180deg, rgba(28,44,74,.32) 0%, rgba(9,17,33,0) 45%),
    var(--lm-kartu-bg);
  border:1px solid var(--lm-kartu-garis);
  border-radius:6px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(0,0,0,.45) inset,
    0 0 0 1px rgba(53,224,196,.08),
    0 40px 100px -20px rgba(0,0,0,.85),
    0 18px 40px -18px rgba(0,0,0,.7),
    0 0 60px -20px rgba(53,224,196,.25);
  animation:lm-datang .5s ease both;
}
.lm-kartu::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(53,224,196,.12) 0%, rgba(53,224,196,0) 70%);
}
@keyframes lm-datang{
  from{opacity:0; transform:translateY(12px);}
  to  {opacity:1; transform:none;}
}
.lm-eyebrow{
  font-family:'Share Tech Mono','IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.3em;
  color:var(--lm-jingga); text-transform:uppercase;
  margin-bottom:14px;
}
.lm-kartu h2{
  margin:0 0 16px;
  font-family:'Rajdhani','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:30px; line-height:1.1;
  color:var(--lm-teks);
}
.lm-sub{
  margin:0 0 18px;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:14px; line-height:1.65;
  color:var(--lm-teks-redup); text-wrap:pretty;
}
/* Status sambungan server duduk di posisi paragraf ke-2 milik mock
   (empty placeholder). Diberi margin bawah 26px agar jarak ke kolom
   USERNAME persis. */
.lm-sumber-ket + .lm-kolom{margin-top:0;}

/* --- Kolom isian.  */
.lm-kolom{margin-bottom:20px;}
.lm-kolom + .lm-kolom{margin-top:0;}
.lm-kolom label{
  display:block; margin-bottom:6px;
  font-family:Helvetica,'Barlow',sans-serif;
  font-size:11px; letter-spacing:.2em;
  color:var(--lm-teks-remang); text-transform:uppercase;
}
.lm-kolom input{
  width:100%; box-sizing:border-box;
  padding:13px 15px;
  background:var(--lm-input-bg);
  border:1px solid var(--lm-input-garis);
  border-radius:3px;
  color:#eef3ff;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:15px;
  outline:0;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.lm-kolom input::placeholder{color:#54677a;}
.lm-kolom input:focus{
  border-color:var(--lm-sian);
  box-shadow:0 0 0 3px rgba(53,224,196,.18);
}

/* --- Pemilih unit pada formulir daftar. Meniru kolom isian, hanya menukar
   kursor teks dengan tanda panah dan menyisakan ruang untuknya di kanan. */
.lm-kolom select{
  width:100%; box-sizing:border-box;
  padding:13px 40px 13px 15px;
  background:var(--lm-input-bg);
  border:1px solid var(--lm-input-garis);
  border-radius:3px;
  color:#eef3ff;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:15px;
  outline:0; cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  /* Panah sian digambar sendiri — appearance:none menghapus panah bawaan. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2335e0c4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.lm-kolom select:focus{
  border-color:var(--lm-sian);
  box-shadow:0 0 0 3px rgba(53,224,196,.18);
}
/* Daftar buka biasanya digambar sistem, tetapi paksa warna gelap di peramban
   yang menghormatinya supaya tidak menyilaukan di kartu bertema malam. */
.lm-kolom select option{background:#0d1a26; color:#eef3ff;}

/* --- Tombol utama.  */
.lm-tombol{
  width:100%; margin-top:6px; padding:15px;
  background:var(--lm-sian); color:#04231e;
  border:0; border-radius:3px;
  font-family:'Rajdhani','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:16px; letter-spacing:.22em;
  text-transform:uppercase; cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(53,224,196,.6);
  transition:filter .16s, transform .16s, box-shadow .16s;
}
.lm-tombol:hover{filter:brightness(1.08); box-shadow:0 12px 34px -10px rgba(53,224,196,.75);}
.lm-tombol:active{transform:translateY(1px);}

/* --- Kaki kartu: tautan pindah tab (masuk / daftar).  */
.lm-kaki-tautan{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 14px; margin-top:20px;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:13px; color:var(--lm-teks-remang);
  line-height:1;
}
.lm-tautan{
  background:transparent; border:0; padding:0; cursor:pointer;
  color:var(--lm-sian); font:inherit;
  text-decoration:underline; text-underline-offset:3px;
}
.lm-tautan:hover{color:var(--lm-sian-terang);}
.lm-tautan:disabled{opacity:.5; cursor:progress; text-decoration:none;}
.lm-tautan[hidden]{display:none;}

/* --- Baris status sambungan server. Titik kecil di kiri, teks di kanan.  */
.lm-sumber-ket{
  display:flex; align-items:flex-start; gap:8px; margin:0 0 26px;
  font-family:'Barlow','IBM Plex Sans',sans-serif;
  font-size:12px; line-height:1.55; letter-spacing:.02em; font-weight:600;
  color:#d7e2f4;
}
/* Ketika status baik & pesan sengaja dikosongkan (lihat srvKet di
   12-jembatan-elogbook.js), baris ini disembunyikan biar tidak menyisakan
   jarak kosong sebelum label USERNAME. */
.lm-sumber-ket:has(span:empty){display:none;}
.lm-sumber-ket i{
  margin-top:5px; width:6px; height:6px; flex:none; border-radius:50%;
  background:var(--lm-teks-remang);
}
.lm-sumber-ket.lm-baik i{background:var(--lm-sian);}
.lm-sumber-ket.lm-awas i{background:var(--lm-jingga-terang);}
.lm-sumber-ket.lm-sibuk i{animation:lm-kedip 1s steps(2,end) infinite;}
@keyframes lm-kedip{50%{opacity:.25;}}
/* Kelas versi lama (km-*) — 12-jembatan-elogbook.js masih membubuhkannya
   pada elemen yang sama. Ditulis biar berkas JS-nya tidak perlu ikut disunting. */
.lm-sumber-ket.km-baik i{background:var(--lm-sian);}
.lm-sumber-ket.km-awas i{background:var(--lm-jingga-terang);}
.lm-sumber-ket.km-sibuk i{animation:lm-kedip 1s steps(2,end) infinite;}

/* --- Kaki halaman: dua baris pendek, transparan.  */
.lm-kaki{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:22px 34px;
  font-family:'Share Tech Mono','IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.12em;
  color:var(--lm-teks-kabur);
}

/* --- Layar kecil.  */
@media (max-width:640px){
  .lm-kanvas{padding:18px 20px;}
  .lm-merek-teks b{font-size:14px; letter-spacing:.1em;}
  .lm-merek-teks span{display:none;}
  .lm-jam span{font-size:11px; letter-spacing:.22em;}
  .lm-jam b{font-size:18px;}
  .lm-panji{margin-top:24px;}
  .lm-tengah{padding:36px 18px 28px;}
  .lm-kartu{padding:26px 22px 28px;}
  .lm-kartu h2{font-size:24px;}
  .lm-kaki{padding:14px 20px; flex-wrap:wrap; justify-content:center; text-align:center;}
}

@media (prefers-reduced-motion:reduce){
  .lm-kartu{animation:none;}
  .lm-sumber-ket.lm-sibuk i, .lm-sumber-ket.km-sibuk i{animation:none;}
}