/*
  Halaman masuk. Berdiri sendiri dari app.css sebab ia dimuat sebelum
  aplikasinya, tapi palet warnanya sama persis supaya terasa satu rumah.

  Tidak ada gambar data: dan tidak ada pustaka dari luar, sebab halaman ini
  tunduk pada Content-Security-Policy default-src 'self' seperti sisa
  aplikasi. Foto klinik dan logo dilayani dari folder src sendiri.

  Hurufnya Plus Jakarta Sans, sama seperti panel Mitra RT, atas permintaan
  Putra 19 September 2026. Berkasnya disimpan sendiri di vendor/huruf sebab
  CSP yang sama menutup Google Fonts. Satu berkas variabel memuat seluruh
  bobot 400 sampai 800, jadi tidak ada unduhan kedua untuk huruf tebal.
*/

/* latin, cukup untuk bahasa Indonesia */
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/vendor/huruf/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("/vendor/huruf/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{
  --bg:#f7f9fa; --card:#fff; --line:#e4eaec; --tx:#14242c; --mut:#5d7480; --mut2:#8d9ca6;
  --acc:#0f5c7d; --acc2:#17789d; --accd:#0b4661; --accs:#e6f0f5;
  --red:#c23b2e; --reds:#fbeeec;
  --lbl:#3b525f;
  --emas:#e8a33d;
  --r:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--card);color:var(--tx);
  font:400 15px/1.55 "Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,
       "Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.masuk{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* ---------- sisi kiri, foto klinik ---------- */

.sisi{
  position:relative;overflow:hidden;
  padding:30px 38px 26px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:26px;
  color:#fff;
  background-image:url("/src/klinik-depan.webp");
  background-size:cover;background-position:52% 30%;background-repeat:no-repeat;
  background-color:#123040;
}
/*
  Lapis gelap bergradasi. Bagian atas dibiarkan agak terang supaya papan nama
  kliniknya tetap kelihatan, bagian bawah digelapkan supaya tulisan putihnya
  terbaca tanpa perlu kotak buram di belakangnya.
*/
.sisi::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,32,44,.55) 0%,
    rgba(10,32,44,.28) 32%,
    rgba(10,32,44,.72) 72%,
    rgba(8,26,36,.92) 100%);
}
.sisi > *{position:relative;z-index:1}

.sisi-merek{display:flex;align-items:center;gap:11px}
.merek{height:38px;width:auto;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.merek-n{font-size:15px;font-weight:800;letter-spacing:-.018em;line-height:1.25}
.merek-s{font-size:12.5px;opacity:.78}

/* Didorong ke bawah, bukan dipusatkan, supaya judulnya duduk di bagian foto
   yang sudah digelapkan gradasi dan papan nama klinik di atas tetap lapang. */
.sisi-isi{max-width:480px;margin-top:auto}
.sisi-isi h2{
  font-size:34px;line-height:1.14;margin:0 0 12px;font-weight:800;letter-spacing:-.032em;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.tekan{color:var(--emas)}
.sisi-isi p{margin:0 0 20px;font-size:15px;line-height:1.6;opacity:.9;max-width:430px;
  text-shadow:0 1px 8px rgba(0,0,0,.4)}

.cip{display:flex;flex-wrap:wrap;gap:8px}
.cip span{
  font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(3px);
}
.sisi-kaki{font-size:12px;opacity:.72;letter-spacing:.02em;text-align:center}

/* ---------- sisi kanan, formulir ---------- */

.papan{display:flex;align-items:center;justify-content:center;padding:44px 24px}
.kotak{width:100%;max-width:380px}

/* Tiga ukuran di bawah ini diambil persis dari halaman masuk Mitra RT
   atas permintaan Putra 19 September 2026. */
.sapa{display:flex;align-items:center;gap:7px;color:var(--mut2);font-size:13px;
  font-weight:700;letter-spacing:.2px;margin:0 0 6px}
.sapa .ic{width:15px;height:15px;flex:0 0 15px;color:var(--emas)}

/*
  Judul kanan dipecah dua segmen, keputusan rapat 19 September 2026.
  Sapaannya lebih kecil dan lebih redup, nama kliniknya yang jadi judul.
*/
.jdl-atas{font-size:15px;font-weight:700;color:var(--mut);margin:0 0 1px;letter-spacing:-.01em}
h1{font-size:26px;margin:0 0 7px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
/* Judul dua warna seperti kepala bagian di rafgroup.id: baris pertama warna
   teks biasa, nama kliniknya memakai warna utama. */
.tekan-t{color:var(--acc)}
.panel-nama{display:inline-block;margin:2px 0 10px;padding:3px 9px;border-radius:99px;background:var(--accs);color:var(--acc);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
h2{font-size:16px;margin:26px 0 4px;font-weight:700;letter-spacing:-.015em}
.sub{color:var(--mut);font-size:13.5px;font-weight:600;line-height:1.5;margin:0 0 24px}
#kata-hari{min-height:1.55em}

/* Huruf biasa tebal, bukan huruf besar, mengikuti label formulir Mitra RT
   atas permintaan Putra 19 September 2026. */
label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1px;
  color:var(--lbl);margin:16px 0 7px}

/* Ikon duduk di dalam kotak isian, bukan di sebelahnya, supaya barisnya
   tetap satu dan tidak menambah tinggi. */
.medan{position:relative;display:flex;align-items:center}
.medan > .ic{position:absolute;left:13px;color:var(--mut2);pointer-events:none}
.inp{
  width:100%;height:50px;padding:0 14px 0 42px;border:1.5px solid var(--line);border-radius:14px;
  font:inherit;font-weight:600;font-size:15px;line-height:1;
  background:#fbfdfe;color:var(--tx);
  transition:border-color .12s,background .12s,box-shadow .12s;
}
.inp::placeholder{color:#b3c1cc}
.inp:focus{outline:none;border-color:var(--acc);background:#fff;box-shadow:0 0 0 3px rgba(18,107,145,.12)}
.medan:focus-within > .ic{color:var(--acc)}

.lihat{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;border-radius:9px;background:none;color:var(--mut2);cursor:pointer}
.lihat:hover{background:var(--accs);color:var(--acc)}

/*
  Tombol utama mengikuti panel Mitra RT atas permintaan Putra 19 September
  2026: pil penuh, gradasi menyudut 135 derajat, huruf tebal 800, dan
  bayangan yang mengambil warna tombolnya sendiri sehingga ia terlihat
  terangkat dari halaman, bukan ditempel. Warnanya tetap teal klinik.
*/
.btn{
  width:100%;margin-top:26px;padding:14px 18px;border:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,var(--acc) 0%,var(--acc2) 100%);
  color:#fff;font:inherit;font-weight:800;font-size:15px;letter-spacing:.005em;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(18,107,145,.35);
  transition:box-shadow .16s,transform .1s,filter .16s;
}
.btn .ic{width:17px;height:17px;flex:0 0 17px;stroke-width:2;
  transition:transform .16s}
.btn:hover{box-shadow:0 12px 24px rgba(18,107,145,.42);transform:translateY(-1px);
  filter:saturate(1.08)}
.btn:hover .ic{transform:translateX(3px)}
.btn:active{transform:translateY(1px);box-shadow:0 5px 12px rgba(18,107,145,.3)}
/* Sedang mengirim: bayangannya dilepas supaya jelas ia tidak bisa ditekan. */
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;filter:none}
.btn:disabled .ic{transform:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--acc)}

/* Kaki halaman, mengikuti ukuran kaki Mitra RT: kecil, tebal, rata tengah. */
.kaki{margin:28px 0 0;text-align:center;font-size:11px;font-weight:700;
  letter-spacing:.2px;color:var(--mut2)}

.galat{background:var(--reds);color:var(--red);border:1px solid #f3d2d2;border-radius:11px;
  padding:11px 13px;font-size:13.5px;margin:18px 0 0}


/*
  Layar sempit, misalnya tablet di meja depan. Foto kliniknya menciut jadi
  kepala halaman, bukan hilang, supaya staf tetap melihat ia membuka aplikasi
  kliniknya sendiri sebelum mengetik.
*/
@media (max-width: 920px){
  .masuk{grid-template-columns:1fr}
  .sisi{min-height:270px;padding:22px 24px 20px;gap:16px;background-position:52% 38%}
  .sisi-isi h2{font-size:25px;margin-bottom:8px}
  .sisi-isi p{font-size:14px;margin-bottom:14px}
  .sisi-kaki{display:none}
  .cip span{font-size:12px;padding:4px 10px}
  .papan{padding:32px 24px 44px}
}
@media (max-width: 560px){
  .sisi{min-height:210px}
  .sisi-isi p{display:none}
  .cip{display:none}
}