/* ============================================================
   HALAMAN MASUK DOsiS — tata rupa baru (dua kolom)

   Berkas ini dimuat SESUDAH login.css dan hanya mengurus layar
   masuk. login.css tetap dipakai karena hasil Lacak Surat
   bergantung penuh padanya (Font Awesome, Pe-icon-7-stroke,
   Linearicons, .vertical-timeline, .badge, .watermark_body).

   Semua kelas diberi awalan dm- (dosis masuk) supaya tidak
   bertabrakan dengan ribuan kelas di login.css.

   PENTING — login.css memasang aturan global yang agresif pada
   button, input, form, a, h1, h2. Itu sebabnya banyak sifat di
   sini ditulis eksplisit (margin, padding, border, text-transform)
   walau terlihat mubazir: tanpa itu, aturan globalnya yang menang.
   ============================================================ */

:root {
  --dm-teal-dalam: #063F5B;
  --dm-teal:       #0A6E96;
  --dm-teal-terang:#1D9CC4;
  --dm-kuning:     #FFC709;
  --dm-tinta:      #1F2A2E;
  --dm-tinta-lembut:#5E6B70;
  --dm-tinta-samar:#8B989D;
  --dm-garis:      #E3EAED;

  --dm-huruf:      'IBM Plex Sans', andick_buntu, system-ui, -apple-system, sans-serif;
  --dm-huruf-judul:'Plus Jakarta Sans', 'IBM Plex Sans', andick_buntu, sans-serif;
  --dm-huruf-angka:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Kelas dm-masuk dilepas oleh script.php begitu hasil Lacak Surat
   ditampilkan — supaya halaman hasil itu kembali memakai latar
   dan tata letak lama tanpa perlu disentuh sama sekali. */
body.dm-masuk {
  display: block;
  margin: 0;
  background: #fff;
  background-image: none;
  font-family: var(--dm-huruf);
  color: var(--dm-tinta);
  -webkit-font-smoothing: antialiased;
}
/* !important WAJIB di sini. Kaki lama membawa kelas Bootstrap .d-flex
   yang isinya "display: flex !important" — tanpa penanda yang sama,
   display:none ini kalah. Akibatnya bukan sekadar kaki lama ikut
   tampil: .footer itu position:fixed, tinggi 60px, z-index 999, jadi
   ia MENUTUPI bilah lambang RSUD BARI dan BSrE di dasar panel kiri. */
body.dm-masuk .footer { display: none !important; }

.dm-layar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: #fff;
}

/* ─────────────────── KOLOM KIRI: panel jati diri ─────────────── */
.dm-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, #0A6E96 0%, #063F5B 58%, #04314A 100%);
  display: flex;
  flex-direction: column;
  padding: 38px 40px 34px;
}
/* Cahaya lembut di pojok. Satu-satunya hiasan latar di panel ini —
   motif garis miring sempat dicoba dan justru terbaca seperti layar
   rusak, jadi dibuang. */
.dm-panel::before {
  content: '';
  position: absolute; top: -160px; right: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(29,156,196,.42) 0%, rgba(29,156,196,0) 68%);
  pointer-events: none;
}
.dm-panel > * { position: relative; z-index: 1; }

/* Logo DOsiS berwarna teal-kuning di latar bening. Ditempel langsung
   ke panel teal, huruf "DOSIS"-nya hilang ditelan latar — makanya
   diberi keping putih. */
.dm-keping {
  align-self: flex-start;
  background: #fff;
  border-radius: 12px;
  padding: 13px 18px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.42);
}
.dm-keping img { display: block; height: 38px; width: auto; margin: 0; }

.dm-panel-judul {
  font-family: var(--dm-huruf-judul);
  font-weight: 800;
  color: #fff;
  font-size: clamp(23px, 2.4vw, 33px);
  line-height: 1.16;
  letter-spacing: -.028em;
  margin: 30px 0 0;
  text-align: left;
  text-wrap: balance;
  max-width: 15ch;
}
.dm-panel-teks {
  color: rgba(255,255,255,.76);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 13px 0 0;
  max-width: 42ch;
}

/* ─────────────────── alur cerita ───────────────────
   Tiga ilustrasi berderet sebagai SATU cerita, bukan tiga hiasan:
   surat diatur, ditandatangani, lalu terkirim. Kuning muncul persis
   sekali di seluruh panel — di lencana centang gambar terakhir,
   yaitu titik "selesai"-nya cerita.

   Tanpa alas apa pun: gambarnya duduk langsung di atas gradasi teal.
   Sempat diberi kotak tipis sebagai tempat berpijak, dan kotak itu
   justru jadi bingkai yang tidak menerangkan apa-apa.

   Lebar tiap gambar dihitung dari nisbahnya sendiri, bukan disamakan
   — kalau lebarnya yang disamakan, tingginya yang loncat-loncat. */
.dm-alur {
  display: flex;
  align-items: flex-start;
  /* Menjorok 16px ke kiri-kanan, memakan sebagian bantalan panel.
     Yang membatasi besar gambar itu LEBAR panel, bukan tingginya —
     jadi satu-satunya cara membesarkannya adalah memberi tiap langkah
     ruang mendatar lebih banyak.

     Margin bawah `auto` memaku kaki lambang lembaga ke dasar panel,
     sementara isi di atasnya tetap mulai dari ATAS. Sempat dipasangkan
     dengan margin-atas auto pada .dm-keping sehingga seluruh isi panel
     jadi ketengah — dan panel yang isinya bacaan mestinya mulai dari
     atas, bukan mengambang di tengah. */
  margin: 22px -16px auto;
  position: relative;   /* jangkar bagi garis alur di belakangnya */
}
.dm-langkah { flex: 1 1 0; min-width: 0; text-align: center; position: relative; z-index: 1; }

/* ── lengkungan alur ──
   Ketiganya tidak lagi sejajar: tiap langkah naik sedikit ke kanan,
   sehingga ceritanya berakhir PALING TINGGI tepat di tanda tangan.
   Naiknya dipasang lewat margin-atas, bukan transform — margin ikut
   menghitung tinggi wadahnya, sedangkan transform tidak, dan langkah
   pertama yang paling rendah akan menyembul keluar panel.

   Angkanya menurun rata 26px supaya lengkungannya rata, dan panah
   duduk pas di tengah-tengah dua langkah yang diapitnya. */
.dm-l1 { margin-top: 52px; }
.dm-l2 { margin-top: 26px; }
.dm-l3 { margin-top: 0; }
.dm-p1 { margin-top: 39px; }
.dm-p2 { margin-top: 13px; }

/* Garis putus-putus yang mengalir di bawah ketiga adegan — gemanya
   diambil dari jejak pesawat kertas pada gambar "Terkirim". Digambar
   di lapis paling belakang dan tak bisa diklik. */
.dm-jalur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.dm-jalur path {
  fill: none; stroke: rgba(255,255,255,.2); stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 5 9;
  vector-effect: non-scaling-stroke;
}
.dm-gambar { height: 182px; display: flex; align-items: flex-end; justify-content: center; }
.dm-gambar img {
  width: 100%; height: auto; display: block; margin: 0;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.dm-g-atur  img { max-width: 178px; }  /* 865 × 644 → 133px */
.dm-g-kirim img { max-width: 146px; }  /* 670 × 800 → 174px */
.dm-g-ttd   img { max-width: 142px; }  /* 646 × 800 → 176px */
.dm-langkah b {
  display: block; margin-top: 13px;
  font-family: var(--dm-huruf-judul); font-weight: 700; font-size: 12.5px;
  color: #fff; letter-spacing: -.012em;
}
.dm-langkah i {
  display: block; font-style: normal; font-size: 10.5px;
  color: rgba(255,255,255,.56); margin-top: 2px; line-height: 1.4;
}
.dm-panah { flex: none; width: 22px; height: 182px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.dm-panah svg {
  width: 15px; height: 15px; stroke: var(--dm-kuning); fill: none;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8;
}

/* ── kaki panel: lambang lembaga ──
   Institusinya di atas produknya — RSUD BARI dan BSrE tetap tampil,
   bukan dibuang.

   TANPA ALAS. Sempat diberi bilah putih selebar panel, dan bilah itu
   memutus panel jadi dua.

   TANPA FILTER APA PUN. Sempat dipakai brightness(0) invert(1) —
   "versi putih polos" — dan itu keliru: ia meratakan SEMUA piksel
   jadi putih, sehingga lingkaran BSrE berubah jadi cakram putih
   kosong; gambar kunci dan bulunya lenyap. Lambang BSrE sendiri
   sebetulnya sudah 5,16:1 di atas teal, tidak pernah butuh apa-apa.

   Yang memang bermasalah cuma tulisan pada lambang RSUD BARI
   (#373737, hanya 1,14:1). Itu diselesaikan di berkasnya, bukan di
   sini — lihat keterangan pada login/index.php. */
.dm-kaki-panel {
  margin: 0;
  padding: 0;
  display: flex; align-items: center; gap: 18px;
}
.dm-kaki-panel img { margin: 0; opacity: .95; }
.dm-kaki-panel img.dm-bari { height: 32px; width: auto; }
.dm-kaki-panel img.dm-bsre { height: 26px; width: auto; }
.dm-kaki-garis { width: 1px; height: 26px; background: rgba(255,255,255,.2); flex: none; }
.dm-kaki-nota { margin-left: auto; font-size: 10.5px; color: rgba(255,255,255,.45); line-height: 1.35; text-align: right; }

/* ─────────────────── KOLOM KANAN: borang ─────────────── */
.dm-borang-kolom { display: flex; flex-direction: column; padding: 38px 40px 26px; background: #fff; }

/* form di login.css dipaksa flex + padding 0 50px + height 100% —
   semuanya harus dikembalikan di sini. */
.dm-borang {
  width: 100%; max-width: 372px; margin: auto;
  display: block; background: transparent;
  padding: 0; height: auto; text-align: left;
}
.dm-borang-kepala { margin-bottom: 26px; }
.dm-borang-kepala h2 {
  font-family: var(--dm-huruf-judul); font-weight: 800; font-size: 25px;
  letter-spacing: -.03em; margin: 0; color: var(--dm-tinta); text-align: left;
}
.dm-borang-kepala p { margin: 6px 0 0; font-size: 13.5px; color: var(--dm-tinta-lembut); line-height: 1.55; }

.dm-medan { margin-bottom: 15px; }
.dm-medan > label {
  display: block; font-size: 12px; font-weight: 600;
  color: #47555A; margin-bottom: 6px; letter-spacing: .008em;
}
.dm-kotak { position: relative; display: flex; align-items: center; }
.dm-kotak > svg.dm-ikon {
  position: absolute; left: 13px; width: 17px; height: 17px;
  stroke: #93A2A7; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; transition: stroke .18s;
}
.dm-kotak input {
  width: 100%; margin: 0;
  font-family: var(--dm-huruf); font-size: 14.5px; color: var(--dm-tinta);
  padding: 12px 14px 12px 40px;
  border: 1.5px solid #DDE5E8; border-radius: 10px;
  background: #FBFCFD;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.dm-kotak input::placeholder { color: #A8B4B8; }
.dm-kotak input:focus { outline: none; border-color: var(--dm-teal-terang); background: #fff; box-shadow: 0 0 0 3.5px rgba(29,156,196,.14); }
.dm-kotak:focus-within > svg.dm-ikon { stroke: var(--dm-teal-terang); }
/* is-invalid dipasang oleh validasi login yang sudah ada */
.dm-kotak input.is-invalid { border-color: #d92550; background: #fff; }
.dm-kotak input.is-invalid:focus { box-shadow: 0 0 0 3.5px rgba(217,37,80,.13); }
.dm-medan .invalid-feedback { display: block; font-size: 11.5px; color: #d92550; margin-top: 5px; }
.dm-medan .invalid-feedback:empty { display: none; }

.dm-kotak input#password { padding-right: 44px; }
.dm-mata {
  position: absolute; right: 6px; width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; border-radius: 7px;
  padding: 0; margin: 0; letter-spacing: 0; text-transform: none;
}
.dm-mata svg { width: 17px; height: 17px; stroke: #93A2A7; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dm-mata:hover { background: #F2F6F7; }
.dm-mata:hover svg { stroke: var(--dm-tinta-lembut); }
.dm-mata:focus-visible { outline: 2px solid var(--dm-teal-terang); outline-offset: 1px; }

.dm-baris-bantu { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
.dm-centang { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #47555A; cursor: pointer; user-select: none; margin: 0; }
.dm-centang input {
  width: 16px; height: 16px; margin: 0; padding: 0;
  border: 0; background: none; border-radius: 0;
  accent-color: var(--dm-teal); cursor: pointer;
}
.dm-tautan { font-size: 13px; font-weight: 600; color: var(--dm-teal); text-decoration: none; margin: 0; }
.dm-tautan:hover { text-decoration: underline; color: var(--dm-teal); }

.dm-tombol-utama {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--dm-huruf-judul); font-size: 14.5px; font-weight: 700;
  letter-spacing: -.01em; text-transform: none;
  color: #fff; background: linear-gradient(180deg, #0A7EAB, #0A6E96);
  border: 0; border-radius: 10px; padding: 13px; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(10,110,150,.6);
  transition: filter .18s, transform .12s, box-shadow .18s;
}
.dm-tombol-utama:hover { filter: brightness(1.07); box-shadow: 0 9px 22px -7px rgba(10,110,150,.7); background: linear-gradient(180deg, #0A7EAB, #0A6E96); }
.dm-tombol-utama:active { transform: translateY(1px); }
.dm-tombol-utama:focus-visible { outline: 2px solid var(--dm-teal-terang); outline-offset: 3px; }
.dm-tombol-utama svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

.dm-pemisah { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #A8B4B8; font-size: 11.5px; font-weight: 500; }
.dm-pemisah::before, .dm-pemisah::after { content: ''; flex: 1; height: 1px; background: #E7EDEF; }

.dm-tombol-garis {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--dm-huruf); font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--dm-teal); background: #fff; border: 1.5px solid #CFDDE2;
  border-radius: 10px; padding: 12px; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.dm-tombol-garis:hover { background: #F2F8FA; border-color: var(--dm-teal-terang); color: var(--dm-teal); }
.dm-tombol-garis:focus-visible { outline: 2px solid var(--dm-teal-terang); outline-offset: 2px; }
.dm-tombol-garis svg { width: 16px; height: 16px; stroke: var(--dm-teal); fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* ─────────────────── bagian unduh aplikasi ───────────────────
   Kartunya duduk di kolom KANAN, bukan di panel teal. Kolom ini
   tempat hal-hal yang bisa ditindak — isi NIP, tekan Masuk, lacak
   surat, unduh aplikasi. Panel kiri tugasnya bercerita, bukan
   menyodorkan tombol.

   Angkanya datang dari tabel api_versi_app — tabel yang sama yang
   dipakai aplikasi mobile untuk memberitahu penggunanya ada versi
   baru. Sekali UPDATE saat rilis mengurus dua-duanya.

   Tombolnya sengaja TIDAK berisi, supaya Masuk tetap satu-satunya
   tombol berisi di halaman ini. */
.dm-bagian-apk {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EDF1F3;
}
.dm-bagian-judul {
  display: block;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--dm-tinta-samar);
  margin-bottom: 10px;
}
.dm-apk {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; font-size: 14px;
  margin: 0; padding: 12px 13px;
  background: #F7FAFB; border: 1px solid var(--dm-garis); border-radius: 12px;
  transition: background .18s, border-color .18s;
}
.dm-apk:hover { background: #F1F6F8; border-color: #CFDDE2; text-decoration: none; }
.dm-apk:focus-visible { outline: 2px solid var(--dm-teal-terang); outline-offset: 2px; }
.dm-robot {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(61,220,132,.13); border: 1px solid rgba(61,220,132,.4);
  display: grid; place-items: center;
}
.dm-robot svg { width: 23px; height: 23px; fill: #3DDC84; }
.dm-apk-teks { flex: 1; min-width: 0; }
.dm-apk-teks b {
  display: block; font-family: var(--dm-huruf-judul); font-weight: 700;
  font-size: 14px; color: var(--dm-tinta); letter-spacing: -.015em;
}
.dm-apk-teks span {
  display: block; margin-top: 2px;
  font-family: var(--dm-huruf-angka); font-size: 11px;
  color: #7B888D; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-unduh-teks {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--dm-huruf); font-size: 13px; font-weight: 600; color: var(--dm-teal);
}
.dm-unduh-teks svg { width: 15px; height: 15px; stroke: var(--dm-teal); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.dm-kaki-borang {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid #EDF1F3;
  font-size: 12px; color: var(--dm-tinta-samar);
}
.dm-kaki-borang a { color: var(--dm-tinta-lembut); text-decoration: none; font-weight: 500; font-size: 12px; margin: 0; }
.dm-kaki-borang a:hover { color: var(--dm-teal); }
.dm-kaki-borang .dm-versi { font-family: var(--dm-huruf-angka); font-size: 11px; font-variant-numeric: tabular-nums; }
.dm-kaki-borang .dm-pisah { color: #CFDDE2; }

/* ─────────────────── dialog Lacak Surat ─────────────── */
.dm-tirai {
  position: fixed; inset: 0; z-index: 9000; display: none;
  background: rgba(6,63,91,.44); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 24px;
}
.dm-tirai.dm-buka { display: flex; animation: dmMasuk .2s ease-out; }
@keyframes dmMasuk { from { opacity: 0 } to { opacity: 1 } }
.dm-dialog {
  width: 100%; max-width: 400px; background: #fff; border-radius: 16px;
  box-shadow: 0 28px 70px -18px rgba(6,63,91,.5); overflow: hidden;
  animation: dmNaik .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes dmNaik { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
.dm-dialog-kepala { padding: 22px 24px 0; position: relative; }
.dm-dialog-kepala h3 {
  font-family: var(--dm-huruf-judul); font-weight: 800; font-size: 18px;
  letter-spacing: -.025em; margin: 0; color: var(--dm-tinta); text-align: left;
}
.dm-dialog-kepala p { margin: 7px 0 0; font-size: 13px; color: var(--dm-tinta-lembut); line-height: 1.55; }
.dm-tutup {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px;
  border: 0; background: #F2F6F7; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; padding: 0; margin: 0;
}
.dm-tutup svg { width: 15px; height: 15px; stroke: var(--dm-tinta-lembut); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.dm-tutup:hover { background: #E7EDEF; }
.dm-dialog-isi { padding: 18px 24px 24px; }
.dm-dialog-isi .dm-kotak input {
  font-family: var(--dm-huruf-angka); letter-spacing: .1em;
  text-transform: uppercase; font-size: 14px;
}
.dm-petunjuk { font-size: 11.5px; color: var(--dm-tinta-samar); margin: 8px 0 16px; display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }
.dm-petunjuk svg { width: 13px; height: 13px; flex: none; margin-top: 2px; stroke: #A8B4B8; fill: none; stroke-width: 2; }

/* ─────────────────── LAYAR SEMPIT ───────────────────
   Panel teal menyusut jadi pita pengenal di atas, borang masuk di
   bawahnya. Alur cerita dan paragrafnya disembunyikan: di ponsel
   yang dicari orang tombol masuk, bukan bacaan. Pitanya ditahan
   sekitar 165px supaya kolom NIP sudah kelihatan tanpa menggulung. */
@media (max-width: 1150px) {
  .dm-panel { padding: 32px 30px 28px; }

  .dm-borang-kolom { padding: 32px 30px 22px; }
  .dm-kaki-nota { display: none; }
}

@media (max-width: 980px) {
  .dm-layar { grid-template-columns: 1fr; min-height: 0; }

  .dm-panel { padding: 22px 22px 20px; }
  .dm-panel::before { width: 300px; height: 300px; top: -130px; right: -110px; }
  .dm-keping { padding: 10px 14px; border-radius: 10px; }
  .dm-keping img { height: 29px; }
  .dm-panel-judul { font-size: 20px; margin: 17px 0 0; max-width: none; }
  .dm-panel-teks, .dm-alur, .dm-kaki-nota { display: none; }

  .dm-kaki-panel { margin: 16px 0 0; gap: 13px; }
  .dm-kaki-panel img.dm-bari { height: 27px; }
  .dm-kaki-panel img.dm-bsre { height: 22px; }

  .dm-borang-kolom { padding: 26px 22px 20px; }
  .dm-borang { max-width: none; }
  .dm-borang-kepala { margin-bottom: 20px; }
  .dm-borang-kepala h2 { font-size: 22px; }
  .dm-borang-kepala p { font-size: 13px; }
  .dm-baris-bantu { margin-bottom: 18px; }
  .dm-kaki-borang { margin-top: 22px; padding-top: 16px; gap: 7px; font-size: 11.5px; }

  .dm-tirai { padding: 18px; }
}