/* ===========================================================================
   Halaman depan dan halaman masuk.

   Dipisah dari app.css karena dua halaman ini berdiri sendiri — tanpa sidebar
   dan tanpa bilah atas. Warnanya tetap mengikuti palet aplikasi: mint, biru,
   dan ink, bukan warna baru.
   =========================================================================== */

:root{
  --biru:#1D9BF0; --biru-tua:#0B7DD1;
  --mint:#2DC5B6; --mint-tua:#14655D; --mint-muda:#DFF5F2;
  --ink:#233043; --ink-2:#67748A; --ink-3:#9AA5B5;
  --garis:#E6EAF0; --kartu:#FFFFFF;
  --merah:#FF4D6D; --merah-muda:#FFE9ED;
  --hijau:#3FB950; --hijau-muda:#E6F7E9;
  --lengkung:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',-apple-system,Segoe UI,sans-serif;color:var(--ink);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;background:#0E2A33}

/* ---------- latar foto rumah sakit, dipakai dua halaman ---------- */
.latar{position:fixed;inset:0;z-index:-2;
  background:url('../img/rsds-gerbang.jpg') center/cover no-repeat}
.selubung{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(14,70,80,.93) 0%,rgba(20,101,93,.90) 45%,
    rgba(11,125,209,.86) 100%)}

a{color:inherit;text-decoration:none}

/* ===================================================== halaman depan */
.depan{min-height:100vh;display:flex;flex-direction:column}

.depan-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 32px}
.merek-depan{display:flex;align-items:center;gap:13px;color:#fff}
.merek-depan img{width:46px;height:46px;object-fit:contain;background:#fff;
  border-radius:13px;padding:5px;flex:none}
.merek-depan b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.merek-depan span{display:block;font-size:11.5px;color:rgba(255,255,255,.78)}

.tombol{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:14px;font-weight:600;padding:12px 26px;border:none;
  border-radius:999px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.tombol svg{width:17px;height:17px}
.tombol:hover{transform:translateY(-1px)}
.tombol-utama{background:#fff;color:var(--mint-tua);
  box-shadow:0 6px 20px rgba(0,0,0,.22)}
.tombol-utama:hover{box-shadow:0 10px 28px rgba(0,0,0,.28)}
.tombol-garis{background:rgba(255,255,255,.08);color:#fff;
  border:1.5px solid rgba(255,255,255,.55)}
.tombol-garis:hover{background:rgba(255,255,255,.16)}

.depan-isi{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:40px 24px 56px;gap:4px}
.lambang-bulat{width:116px;height:116px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(3px);margin-bottom:26px}
.lambang-bulat img{width:72px;height:72px;object-fit:contain}

.depan-isi h1{font-size:clamp(34px,6vw,62px);font-weight:700;color:#fff;
  letter-spacing:-.02em;line-height:1.05}
.depan-isi h2{font-size:clamp(16px,2.4vw,23px);font-weight:600;color:#fff;
  margin-top:14px;line-height:1.35}
.depan-isi p{max-width:560px;font-size:14.5px;color:rgba(255,255,255,.82);
  margin-top:14px}
.depan-isi .tombol{margin-top:32px;padding:15px 40px;font-size:15px}
.depan-isi .ket{font-size:12px;color:rgba(255,255,255,.62);margin-top:14px}

.kartu-depan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  width:100%;max-width:880px;margin-top:52px}
.kartu-depan>div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--lengkung);padding:24px 20px;backdrop-filter:blur(4px)}
.kartu-depan .tanda{width:48px;height:48px;border-radius:14px;display:grid;
  place-items:center;margin:0 auto 14px;background:rgba(255,255,255,.17);color:#fff}
.kartu-depan .tanda svg{width:23px;height:23px}
.kartu-depan b{display:block;font-size:14.5px;font-weight:600;color:#fff}
.kartu-depan span{display:block;font-size:12.5px;color:rgba(255,255,255,.75);
  margin-top:6px;line-height:1.5}

.depan-kaki{text-align:center;padding:20px;font-size:12px;
  color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.14)}

/* ===================================================== halaman masuk */
.masuk{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 20px}
.kartu-masuk{width:100%;max-width:430px;background:var(--kartu);
  border-radius:24px;padding:34px 34px 28px;
  box-shadow:0 18px 60px rgba(8,30,40,.34)}

.kop-masuk{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--garis)}
.kop-masuk img{width:62px;height:62px;object-fit:contain}
.kop-masuk b{display:block;font-size:19px;font-weight:700;margin-top:12px;
  letter-spacing:-.01em}
.kop-masuk span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px}

.balik{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--ink-2);margin:20px 0 4px}
.balik:hover{color:var(--biru)}
.balik svg{width:15px;height:15px}

.kolom{margin-top:16px}
.kolom label{display:block;font-size:12.5px;font-weight:500;color:var(--ink);
  margin-bottom:7px}
.isian{position:relative;display:flex;align-items:center}
.isian svg{position:absolute;left:14px;width:17px;height:17px;color:var(--ink-3);
  pointer-events:none}
.isian input{width:100%;font:inherit;font-size:14px;padding:13px 14px 13px 42px;
  border:1px solid var(--garis);background:#FBFCFE;color:var(--ink);border-radius:12px}
.isian input:focus{outline:none;border-color:var(--biru);background:#fff;
  box-shadow:0 0 0 3px rgba(29,155,240,.14)}
.lihat{position:absolute;right:8px;left:auto;width:34px;height:34px;border:none;
  background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-3);
  border-radius:9px}
.lihat:hover{background:var(--garis);color:var(--ink)}
.lihat svg{position:static;width:18px;height:18px}

.tombol-masuk{width:100%;margin-top:24px;font-size:15px;font-weight:600;padding:14px;
  border:none;border-radius:12px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--mint) 0%,var(--biru) 100%);
  box-shadow:0 8px 22px rgba(29,155,240,.3)}
.tombol-masuk:hover{filter:brightness(1.05)}
.tombol-masuk:active{transform:translateY(1px)}

.aman{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;
  color:var(--ink-3);margin-top:14px}
.aman svg{width:14px;height:14px}

.pesan{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;padding:11px 14px;
  border-radius:12px;margin-top:18px;line-height:1.45}
.pesan svg{width:16px;height:16px;flex:none;margin-top:1px}
.pesan-galat{background:var(--merah-muda);color:#B3123A}
.pesan-sukses{background:var(--hijau-muda);color:#1C7A2B}

.bantuan{margin-top:22px;padding:15px 16px;border:1px solid var(--garis);
  border-radius:14px;background:#FBFCFE}
.bantuan b{display:block;font-size:12.5px;color:var(--mint-tua);margin-bottom:8px}
.bantuan div{display:flex;align-items:center;gap:9px;font-size:12.5px;
  color:var(--ink-2);padding:3px 0}
.bantuan svg{width:15px;height:15px;color:var(--ink-3);flex:none}

.masuk-kaki{text-align:center;font-size:11.5px;color:rgba(255,255,255,.72);
  margin-top:22px}

@media (max-width:760px){
  .kartu-depan{grid-template-columns:1fr}
  .depan-bar{padding:14px 18px}
  .merek-depan span{display:none}
}