/*
  Halaman Depan aplikasi pasien.

  KENAPA LAYAR INI DISKALAKAN, BUKAN DIALIRKAN.

  Mockup yang dikunci Putra 22 September 2026 menaruh tiap elemen di
  koordinat tetap pada kanvas 390x812, dan beberapa teksnya sengaja tidak
  boleh pecah baris. Mengubahnya jadi susunan mengalir berarti menggeser
  rupa yang sudah disetujui, dan Putra menilai sampai ke pikselnya.

  Jadi kanvas 390 dipertahankan apa adanya, lalu diskalakan mengikuti lebar
  layar pasien. Hasilnya rupanya sama persis di HP mana pun, cuma besar
  kecilnya berbeda. Ongkosnya: di HP yang sangat sempit hurufnya ikut
  mengecil. Ini layar etalase yang dibaca sekilas, bukan layar kerja, jadi
  ongkos itu dipilih sadar. Layar lain yang isinya data tidak memakai cara
  ini, lihat masuk.css yang memang mengalir.
*/

/* 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;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;background:#F2F5FA;}

/*
  Terkunci seperti aplikasi, keputusan Putra 26 September 2026. Dokumen
  tidak pernah menggulir, jadi bar gulir peramban tidak muncul. Yang
  menggulir body sebagai wadah, bar gulirnya disembunyikan, sama dengan
  wadah .isi di layar lain.
*/
html{ height:100%; overflow:hidden; touch-action:manipulation; }

body{
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color:#22406B;
  -webkit-font-smoothing:antialiased;
  height:100%;
  overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:none;
  scrollbar-width:none;
  -webkit-tap-highlight-color:transparent;
}
body::-webkit-scrollbar{ display:none; }

/*
  Wadah yang tingginya dihitung depan.js, sebab kanvas di dalamnya
  diskalakan dengan transform dan transform tidak menyumbang tinggi.
*/
.panggungan{
  position:relative;
  width:100%;
  max-width:430px;
  /* Dibuka dari ikon layar utama, isi tidak tertutup jam dan poni HP. */
  margin:env(safe-area-inset-top, 0px) auto 0;
  overflow:hidden;
}

.layar{
  position:absolute; top:0; left:0;
  width:390px; height:812px;
  transform-origin:top left;
  background:linear-gradient(180deg,#F2F5FA 0%,#FBFCFE 40%,#FFFFFF 100%);
  overflow:hidden;
}

/* ---------- latar dekoratif ---------- */

.hias-blob{
  position:absolute; right:-36px; top:150px;
  width:206px; height:206px; border-radius:50%;
  background:#E4EEF9; z-index:1;
}
.hias-cincin{
  position:absolute; right:10px; top:250px;
  width:176px; height:176px; border-radius:50%;
  border:1.5px solid #D3E2F5; z-index:2;
}

/* ---------- kepala ---------- */

.logo{
  position:absolute; left:24px; top:64px;
  height:30px; width:auto; display:block; z-index:6;
}

.pintu-masuk{
  position:absolute; right:22px; top:64px; height:30px; z-index:6;
  display:inline-flex; align-items:center; gap:4px;
  padding:0 12px; border-radius:999px;
  background:rgba(76,120,204,.09);
  font-size:12.5px; font-weight:600; color:#4C78CC; letter-spacing:.01em;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.pintu-masuk:active{background:rgba(76,120,204,.18);}
.pintu-masuk svg{
  width:13px; height:13px; fill:none; stroke:#4C78CC;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- judul ---------- */

.judul{
  position:absolute; left:24px; top:124px; z-index:5;
  font-size:31px; font-weight:500; line-height:1.22; letter-spacing:0;
  color:#22406B; margin:0; width:280px; white-space:nowrap;
}
.judul .terang{color:#4E8BD8;}

.sub-hero{
  position:absolute; left:24px; top:258px; z-index:5;
  font-size:12px; font-weight:400; color:#7A8089; line-height:1.5;
  margin:0; width:176px;
}

/* ---------- gigi di atas podium ---------- */

.panggung{position:absolute; right:2px; top:214px; width:184px; z-index:5;}
.gigi{
  display:block; width:146px; height:auto; margin:0 auto;
  position:relative; z-index:2;
  transform:scaleX(-1);
  filter:drop-shadow(0 18px 18px rgba(40,76,130,.22));
}
.podium{
  position:relative; z-index:1; width:150px; height:34px; margin:-8px auto 0;
  background:linear-gradient(180deg,#C9DDF4 0%,#AFCBEE 100%);
  border-radius:0 0 75px 75px / 0 0 20px 20px;
  box-shadow:0 24px 26px -20px rgba(40,76,130,.45);
}
.podium .tutup{
  position:absolute; left:0; top:-10px; width:150px; height:20px;
  border-radius:50%; background:#DAE8F9;
}

/* ---------- pita penilaian ---------- */

.pita{
  position:absolute; left:22px; right:0; top:380px; height:102px; z-index:4;
  background:linear-gradient(120deg,#5C88DC 0%,#4C78CC 55%,#4069C0 100%);
  border-radius:24px 0 0 24px;
  color:#FFFFFF;
  padding:0 22px 0 20px;
  overflow:hidden;
  box-shadow:0 16px 30px -18px rgba(64,105,192,.6), inset 0 1px 0 rgba(255,255,255,.22);
}
.pita::before{
  content:""; position:absolute; left:-40px; top:-70px;
  width:220px; height:160px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}
.pita::after{
  content:""; position:absolute; right:-50px; bottom:-70px;
  width:170px; height:170px; border-radius:50%;
  background:rgba(255,255,255,.07);
  pointer-events:none;
}
.pita .kiri{position:relative; z-index:1; display:flex; align-items:center; gap:14px; height:100%;}
.pita .orang,.pita .orang-label{z-index:1;}

.bulat-limau{
  width:46px; height:46px; border-radius:50%; background:#CFE083;
  display:grid; place-items:center; flex:none;
}
.bulat-limau svg{width:24px; height:24px; stroke:#4C78CC; fill:none; stroke-width:1.6; stroke-linecap:round;}

.angka{font-size:22px; font-weight:700; line-height:1.05; letter-spacing:0;}
.angka-ket{
  font-size:10.5px; font-weight:400; line-height:1.35; opacity:.95;
  width:150px; margin-top:2px; white-space:nowrap;
}

.orang{position:absolute; right:20px; top:32px; display:flex; align-items:center;}
.orang img,.orang .plus{
  width:36px; height:36px; border-radius:50%;
  border:0; object-fit:cover; margin-left:-10px;
}
.orang img:first-child{margin-left:0;}
.orang .plus{
  background:#DCE8F8; color:#22406B; display:grid; place-items:center;
  font-size:11px; font-weight:600;
}
.orang-label{
  position:absolute; right:20px; top:74px;
  font-size:10.5px; font-weight:400; color:#FFFFFF;
}

/* ---------- perawatan ---------- */

.judul-bagian{
  position:absolute; left:24px; top:512px; z-index:5;
  font-size:16px; font-weight:700; color:#1D2433;
  margin:0; letter-spacing:0;
}

.kartu-baris{
  position:absolute; left:20px; right:20px; top:546px; z-index:5;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}
.kartu{
  background:#F2F5F9; border:0; border-radius:14px;
  padding:13px 8px 13px 10px; min-height:128px;
  overflow:hidden; overflow-wrap:break-word; hyphens:none;
}
.kartu .ikon-k{width:30px; height:30px; object-fit:contain; display:block; margin:0 auto 10px;}
.kartu b{
  display:block; font-size:10.5px; font-weight:600; color:#1D2433;
  line-height:1.3; letter-spacing:0; white-space:nowrap;
}
.kartu span{
  display:block; font-size:9px; white-space:nowrap; font-weight:400;
  color:#8E9BAE; line-height:1.4; margin-top:6px;
}

/* ---------- pita ajakan ---------- */

.ajakan{
  position:absolute; left:16px; right:16px; top:714px; height:68px; z-index:5;
  background:linear-gradient(120deg,#ECF5CC 0%,#E5F0C0 55%,#DCE9B0 100%);
  border-radius:20px;
  padding:0 22px 0 16px;
  display:flex; align-items:center; gap:12px;
  overflow:hidden;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 14px 26px -16px rgba(150,175,90,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.ajakan:active{filter:brightness(.97);}
.ajakan::before{
  content:""; position:absolute; left:-30px; top:-60px;
  width:200px; height:130px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.5), rgba(255,255,255,0));
  pointer-events:none;
}
.ajakan::after{
  content:""; position:absolute; right:-40px; bottom:-60px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.22);
  pointer-events:none;
}
.ajakan > *{position:relative; z-index:1;}
.ajakan svg.kal{
  width:30px; height:30px; stroke:#1E261A; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none;
}
.ajakan b{display:block; font-size:14.5px; font-weight:700; color:#1E261A; letter-spacing:0; line-height:1.25;}
.ajakan span{display:block; font-size:11px; font-weight:400; color:#4A5340; margin-top:3px;}

.panah{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:50%;
  background:#FFFFFF; border:1.5px solid #3B6FD1;
  display:grid; place-items:center;
  box-shadow:0 6px 14px -6px rgba(59,111,209,.45);
}
.panah svg{width:14px; height:14px; stroke:#1E261A; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}

/* Pasien yang mematikan animasi tidak dipaksa melihat efek tekan. */
@media (prefers-reduced-motion: reduce){
  .ajakan:active,.pintu-masuk:active{filter:none; background:rgba(76,120,204,.09);}
}