/*
  Layar Masuk aplikasi pasien. Nilainya diambil dari mockup/pasien-masuk.html
  yang sudah disetujui Putra 22 September 2026: huruf Plus Jakarta Sans, biru
  #4C78CC, navy #22406B, kartu #F2F5F9.

  Berkas ini berdiri sendiri, tidak memuat apa pun dari aplikasi klinik. Huruf
  disimpan di folder src sendiri sebab CSP aplikasi pasien menutup Google Fonts,
  dan tidak ada gambar data: maupun blob: di sini.

  Bingkai ponsel, poni, bilah 9:41, dan garis beranda yang ada di mockup sengaja
  tidak ditiru: itu bingkai penilaian, bukan bagian layar. Yang ditiru isinya.
*/

/* latin, cukup untuk bahasa Indonesia */
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/src/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext, jaring pengaman untuk nama berhuruf khusus */
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/src/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --biru:#4C78CC;
  --biru-terang:#4E8BD8;
  --navy:#22406B;
  --kartu:#F2F5F9;
  --garis:#DCE5F0;
  --redup:#6B7A90;
  --redup-2:#8A93A2;
  --redup-3:#96A0B0;
  --merah:#B4434B;
  --merah-latar:#FDF0F0;
  --merah-teks:#8E3A41;
  --merah-teks-2:#7A3038;
  --merah-tepi:#D46A70;

  /* Mockup menggambar layar penuh 390x812 termasuk bilah jam palsu setinggi
     44px. Di HP sungguhan bilah jam dan bilah alamat milik sistem, di luar
     halaman, jadi ruang itu dibuang: semua angka atas di bawah sudah
     dikurangi 38px sehingga logo duduk 20px dari tepi, sama dengan Halaman
     Depan. Diperbaiki 26 September 2026 sesudah Putra melihat ruang kosong
     di atas logo. Saat dipasang di layar utama, safe-area menggeser isi ke
     bawah poni. */
  --geser:env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

/* Tombol bawaan peramban memakai line-height normal, jadi tinggi baris tautan
   berbentuk tombol meleset dari mockup bila tidak disamakan dengan badan teks. */
button{ line-height:1.55; }

html,body{ height:100%; }
body{
  margin:0; overflow:hidden; background:#F4F7FB; color:var(--navy);
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* Sprite ikon. Nol tinggi, jadi ia tidak ikut mendorong tata letak. */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.lbl-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- kerangka layar ---------- */
.layar{
  position:relative; height:100vh; height:100dvh;
  max-width:430px; margin:0 auto; overflow:hidden;
  background:linear-gradient(180deg, #F2F5FA 0%, #FBFCFE 40%, #FFFFFF 100%);
}

/* Semua panel hidup bersamaan di DOM, yang tampak hanya yang berkelas .on. */
.scr{ position:absolute; inset:0; display:none; flex-direction:column; }
.scr.on{ display:flex; }

/* ---------- hiasan, diturunkan dari Halaman Depan ---------- */
.logo{
  position:absolute; left:24px; top:20px; top:calc(20px + var(--geser));
  height:28px; width:auto; z-index:6;
}
.blob{
  position:absolute; right:-96px; top:14px; top:calc(14px + var(--geser));
  width:190px; height:224px; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 34% 30%, #DCE8FA, #EDF3FC 62%, rgba(237,243,252,0) 72%);
}
.blob-besar{
  right:-84px; top:26px; top:calc(26px + var(--geser)); width:224px;
}
.gigi-kecil{
  position:absolute; right:2px; top:54px; top:calc(54px + var(--geser));
  width:96px; height:auto; z-index:1;
}

/* ---------- isi ---------- */
.isi{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:none;
  padding:58px 24px 0; padding-top:calc(58px + var(--geser));
  display:flex; flex-direction:column; position:relative; z-index:5;
}
/* Blok isi dipusatkan lewat margin otomatis, bukan justify-content, supaya
   bagian atasnya tidak terpotong saat papan ketik HP naik dan isi menggulir. */
/* Tumpukan lentur, sama seperti .isi di mockup. Bukan sekadar selera: di
   kotak blok, margin bawah judul dan margin atas tetangganya akan saling
   melebur, dan seluruh isi naik beberapa piksel dari yang disetujui. */
.blok{
  margin-block:auto; margin-inline:auto; width:100%; max-width:342px;
  display:flex; flex-direction:column;
}

.judul-l{
  font-size:25px; font-weight:700; line-height:1.2; margin:0 0 8px;
  letter-spacing:-.01em; max-width:258px;
}
.terang{ color:var(--biru-terang); }
.sub-l{
  font-size:13px; color:var(--redup); line-height:1.5; margin:0 0 26px;
  font-weight:400; max-width:262px;
}
.sub-l b{ color:var(--navy); font-weight:600; }

.tengah{ text-align:center; }
.tengah .judul-l, .tengah .sub-l, .tengah .tera{ max-width:none; }

/* ---------- isian nomor ---------- */
.isian{
  background:var(--kartu); border-radius:14px; padding:11px 14px;
  display:flex; align-items:center; gap:10px;
}
.isian:focus-within{ background:#FFFFFF; box-shadow:0 0 0 2px var(--biru); }
.isian .kode-neg{
  font-size:15px; font-weight:600; color:var(--navy); padding-right:10px;
  border-right:1px solid var(--garis); display:flex; align-items:center; gap:6px;
  flex:none;
}
.isian .nilai{
  flex:1; min-width:0; border:0; background:transparent; padding:0; margin:0;
  font-family:inherit; font-size:16px; font-weight:600; color:var(--navy);
  /* 16px, bukan 15px: di bawah itu iPhone memperbesar layar saat kolom diketuk. */
  letter-spacing:.02em; outline:none; line-height:23px; height:23px;
}
.isian .nilai::placeholder{ color:#A9B4C4; font-weight:500; }

.tera{
  font-size:10.5px; font-weight:600; color:var(--redup-2); margin:8px 2px 0;
  max-width:262px; line-height:1.5;
}
.tera-tengah{ margin-top:18px; }

/* ---------- tombol utama ---------- */
.tombol{
  width:100%; margin-top:18px; height:48px; border:0; border-radius:14px;
  display:grid; place-items:center; font-family:inherit;
  background:linear-gradient(120deg, #5C88DC, #4069C0); color:#fff;
  font-size:14.5px; font-weight:600; cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(64,105,192,.75);
}
.tombol.mati{ background:var(--garis); color:#9AA7B8; box-shadow:none; cursor:default; }
.tombol:focus-visible, .balik:focus-visible, .tautan-kecil:focus-visible,
.hitung button:focus-visible, .papan button:focus-visible{
  outline:2px solid var(--biru); outline-offset:2px;
}

/* Jarak 41px, bukan 30px seperti tertulis di mockup: di sana margin bawaan
   paragraf ikut terhitung, dan yang jadi kontrak adalah rupa yang dinilai
   Putra, bukan angka di berkasnya. */
.kaki-l{
  position:absolute; left:24px; right:24px; bottom:41px;
  bottom:max(41px, calc(env(safe-area-inset-bottom, 0px) + 25px));
  font-size:11px; color:var(--redup-3); text-align:center; line-height:1.6;
  font-weight:400; z-index:5; margin:0;
}

/* ---------- tautan balik ---------- */
.balik{
  display:flex; width:fit-content; align-items:center; gap:7px; font-size:13px;
  font-weight:600; color:var(--biru); margin:0 0 20px; padding:0;
  background:none; border:0; font-family:inherit; cursor:pointer;
}
.balik svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- kotak kode enam angka ---------- */
.kotak-kode{ display:flex; gap:9px; }
.kotak-kode input{
  flex:1; min-width:0; width:100%; height:54px; border:0; border-radius:13px;
  background:var(--kartu); text-align:center; font-family:inherit;
  font-size:21px; font-weight:700; color:var(--navy); outline:none;
  padding:0; appearance:none;
}
.kotak-kode input:focus{ background:#FFFFFF; box-shadow:0 0 0 2px var(--biru); }
.kotak-kode.salah input{ background:var(--merah-latar); color:var(--merah); }
.kotak-kode.salah input:focus{ background:#FFFFFF; box-shadow:0 0 0 2px var(--merah-tepi); }

.hitung{
  font-size:11.5px; color:var(--redup-2); margin:16px 0 0; text-align:center;
  font-weight:400; min-height:18px;
}
.hitung b{ color:var(--navy); font-weight:600; }
.hitung button{
  background:none; border:0; padding:0; font-family:inherit; font-size:inherit;
  color:var(--biru); font-weight:600; cursor:pointer;
}

/* ---------- pita galat ---------- */
.galat{
  display:flex; align-items:flex-start; gap:8px; margin:14px 0 0;
  padding:10px 12px; border-radius:12px; background:var(--merah-latar);
  text-align:left;
}
.galat svg{
  width:15px; height:15px; flex:none; margin-top:1px; fill:none;
  stroke:var(--merah); stroke-width:2; stroke-linecap:round;
}
.galat p{ margin:0; font-size:11.5px; line-height:1.5; color:var(--merah-teks); font-weight:400; }
.galat p b{ font-weight:600; color:var(--merah-teks-2); }

/* ---------- PIN: titik, foto, papan angka ---------- */
.titik-pin{ display:flex; gap:14px; justify-content:center; margin:4px 0 0; }
.titik-pin i{ width:13px; height:13px; border-radius:50%; background:var(--garis); display:block; }
.titik-pin i.penuh{ background:var(--biru); }

.foto-sapa{
  width:58px; height:58px; border-radius:50%; object-fit:cover;
  display:block; margin:0 auto 12px;
}
.foto-kosong{ display:grid; place-items:center; background:#E7EEF8; }
.foto-kosong svg{
  width:28px; height:28px; fill:none; stroke:#8FA6C8; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

.papan{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 14px; margin-top:26px; }
.papan button, .papan span{
  height:52px; border:0; border-radius:14px; background:var(--kartu);
  display:grid; place-items:center; font-family:inherit; font-size:22px;
  font-weight:600; color:var(--navy); cursor:pointer;
}
.papan span.polos{ background:transparent; cursor:default; }
.papan button.ikon{ background:transparent; }
.papan button.ikon svg{
  width:26px; height:26px; fill:none; stroke:var(--biru); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.papan button:active{ background:#E4EBF4; }
.papan button.ikon:active{ background:transparent; opacity:.6; }

.tautan-kecil{
  display:block; width:100%; text-align:center; margin-top:20px; font-size:12px;
  font-weight:600; color:var(--biru); background:none; border:0; padding:0;
  font-family:inherit; cursor:pointer;
}

/* ---------- layar pendek: kaki turun ke aliran, isi tidak tertimpa ---------- */
@media (max-height: 700px){
  .kaki-l{ position:static; padding:12px 24px 20px; }
}

/* ---------- HP sempit 360px ---------- */
@media (max-width: 374px){
  .isi{ padding-left:20px; padding-right:20px; }
  .kaki-l{ left:20px; right:20px; }
  .kotak-kode{ gap:7px; }
  .papan{ gap:10px; }
}

/* Ketuk dua kali tidak memperbesar layar, keputusan Putra 26 September 2026. */
html{ touch-action:manipulation; }