/* Healthins Assist — tenang, klinis, satu aksen. */
:root{
  --kertas:#FBFBF9; --kartu:#FFFFFF; --tinta:#14171A; --tinta-2:#5A626B;
  --garis:#E6E5E0; --garis-2:#D8D7D1;
  --aksen:#0E7C66; --aksen-lembut:#E8F2EF; --aksen-tua:#0A5B4B;
  --bahaya:#9A3324; --bahaya-lembut:#FBEEEC;
  --r:14px; --lebar:44rem;
  --gerak:cubic-bezier(.22,.61,.36,1);
}
/* Tema TERANG saja — disengaja. Kesehatan identik dengan putih/bersih, dan
   halaman ini juga dibaca orang sakit yang sedang menunggu di rumah sakit:
   satu tampilan untuk semua orang lebih mudah dipercaya daripada berubah-ubah
   mengikuti setelan perangkat. 'color-scheme:light' WAJIB — tanpa itu, kotak
   tanggal/pilihan bawaan HP tetap ikut gelap walau latar halaman sudah putih. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--kertas);color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:var(--aksen);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
.lewati{position:absolute;left:-9999px}
.lewati:focus{left:1rem;top:1rem;background:var(--kartu);padding:.6rem 1rem;
  border:1px solid var(--garis);border-radius:8px;z-index:10}
:focus-visible{outline:2px solid var(--aksen);outline-offset:3px;border-radius:6px}

/* ── kepala & kaki ── */
.atas{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--lebar);margin:0 auto;padding:1.4rem 20px;
  position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--kertas) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--gerak)}
.atas.lengket{border-bottom-color:var(--garis)}
.merek{display:flex;align-items:center;gap:.6rem;color:var(--tinta);font-size:1rem;letter-spacing:-.02em}
.merek:hover{text-decoration:none}
.merek b{font-weight:600}
.tanda{width:20px;height:20px;border-radius:6px;background:var(--aksen);position:relative;flex:0 0 auto}
.tanda::before,.tanda::after{content:"";position:absolute;background:#fff;border-radius:2px}
.tanda::before{left:50%;top:5px;width:2.6px;height:10px;transform:translateX(-50%)}
.tanda::after{top:50%;left:5px;height:2.6px;width:10px;transform:translateY(-50%)}
.atas nav{display:flex;gap:1.2rem;font-size:.95rem}
.atas nav a{color:var(--tinta-2)}
.atas nav a:hover{color:var(--aksen)}
.bawah{max-width:var(--lebar);margin:6rem auto 0;padding:2rem 20px 3rem;
  border-top:1px solid var(--garis);font-size:.87rem;color:var(--tinta-2)}
.bawah p{margin:.4rem 0}

/* ── tipografi ── */
h1{text-wrap:balance;font-size:clamp(2rem,6vw,3.1rem);line-height:1.08;letter-spacing:-.035em;
   font-weight:600;margin:0 0 1rem}
h2{font-size:clamp(1.35rem,3.6vw,1.9rem);line-height:1.2;letter-spacing:-.025em;
   font-weight:600;margin:0 0 .6rem}
h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .2rem}
p{margin:0 0 1rem}
.utama{font-size:1.09rem;color:var(--tinta-2);max-width:34rem}
.kecil{font-size:.87rem}
.samar{color:var(--tinta-2)}
.tengah{text-align:center}
.tengah .utama{margin-inline:auto}

/* ── tata letak ── */
.kolom{max-width:var(--lebar);margin:0 auto;padding-inline:20px}
.pembuka{padding-block:clamp(3rem,10vw,6rem) clamp(2rem,7vw,4rem)}
.sempit{padding-block:clamp(2rem,7vw,3.5rem)}
section+section{margin-top:clamp(3rem,9vw,5.5rem)}

/* ── tombol ── */
.tombol{display:inline-block;background:var(--aksen);color:#fff;border:1px solid var(--aksen);
  padding:.82rem 1.4rem;border-radius:999px;font-size:1rem;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;transition:transform .18s var(--gerak),background .18s var(--gerak)}
.tombol:hover{background:var(--aksen-tua);border-color:var(--aksen-tua);
  text-decoration:none;transform:translateY(-1px)}
.tombol:active{transform:translateY(0)}
.tombol.garis{background:transparent;color:var(--aksen);border-color:var(--garis-2)}
.tombol.garis:hover{background:var(--aksen-lembut);border-color:var(--aksen)}
.tombol.lebar{width:100%;text-align:center}
.tombol-baris{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* ── tiga langkah ── */
.langkah-tiga{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0}
.langkah-tiga li{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;
  padding:1.6rem 0;border-top:1px solid var(--garis)}
.langkah-tiga li:last-child{border-bottom:1px solid var(--garis)}
.angka{font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:600;color:var(--aksen);
  border:1px solid var(--garis-2);border-radius:999px;width:2rem;height:2rem;
  display:grid;place-items:center;background:var(--kartu)}
.langkah-tiga li>div{min-width:0}
.langkah-tiga p{margin:0;color:var(--tinta-2);font-size:.97rem}

.kutip{border-left:2px solid var(--aksen);padding:.2rem 0 .2rem 1.2rem}
.kutip p{margin:0;color:var(--tinta-2)}
.ajakan{text-align:center;border-top:1px solid var(--garis);padding-top:clamp(2.5rem,7vw,4rem)}
.ajakan .kecil{margin-top:1.2rem}

/* ── borang ── */
.borang{margin-top:2rem}
fieldset{border:1px solid var(--garis);border-radius:var(--r);padding:1.3rem;margin:0 0 1.2rem;
  background:var(--kartu)}
legend{font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-2);padding:0 .45rem}
fieldset.opsional{background:transparent;border-style:dashed}
.tanda-opsional{font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinta-2);
  font-size:.78rem;margin-left:.3rem}
label{display:block;margin-bottom:1rem;font-size:.93rem;font-weight:500}
label:last-child{margin-bottom:0}
.wajib{font-weight:400;font-size:.76rem;color:var(--aksen);background:var(--aksen-lembut);
  padding:.1rem .45rem;border-radius:999px;margin-left:.35rem;letter-spacing:0}
input,select,textarea{display:block;width:100%;margin-top:.42rem;padding:.72rem .85rem;
  font:inherit;font-size:1rem;font-weight:400;color:var(--tinta);background:var(--kertas);
  border:1px solid var(--garis-2);border-radius:10px;
  transition:border-color .16s var(--gerak),box-shadow .16s var(--gerak)}
textarea{resize:vertical;min-height:5.2rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aksen);
  box-shadow:0 0 0 3px var(--aksen-lembut)}
input::placeholder,textarea::placeholder{color:var(--tinta-2);opacity:.62}
label small{display:block;margin-top:.35rem;font-weight:400;font-size:.82rem;color:var(--tinta-2)}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.huruf-besar{text-transform:uppercase}
.jebakan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.galat{background:var(--bahaya-lembut);color:var(--bahaya);border:1px solid currentColor;
  border-radius:10px;padding:.8rem 1rem;font-size:.93rem;margin-bottom:1.2rem}
.galat b{font-weight:600}
.galat ul{margin:.45rem 0 0;padding-left:1.15rem}
.galat li{margin:.25rem 0}
.galat a{color:inherit;text-decoration:underline}
input.salah,textarea.salah{border-color:var(--bahaya);box-shadow:0 0 0 3px var(--bahaya-lembut)}
label .pesan-salah{color:var(--bahaya)}
.opsional-chip{font-weight:400;font-size:.76rem;color:var(--tinta-2);background:var(--kertas);
  border:1px solid var(--garis);padding:.1rem .45rem;border-radius:999px;margin-left:.35rem;
  letter-spacing:0;text-transform:none}

/* ── kartu perjalanan ── */
.sukses{background:var(--aksen-lembut);border:1px solid var(--aksen);border-radius:var(--r);
  padding:1.3rem;margin-bottom:2.4rem}
.sukses h2{margin-bottom:.35rem}
.sukses p{margin:.2rem 0}
.ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.02em;letter-spacing:.02em}
.ref-besar{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.14rem;font-weight:600;
  letter-spacing:.03em;white-space:nowrap;margin:.15rem 0 .65rem}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);
  padding:1.5rem;margin-top:1.6rem}
.kartu.batal{opacity:.62}
.kartu-atas{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.kartu-atas .kecil{margin:0 0 .3rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.kartu-atas h2{margin-bottom:.15rem}
.kartu-atas .utama{font-size:1rem;margin:0}
.lencana{font-size:.76rem;padding:.22rem .6rem;border-radius:999px;white-space:nowrap;
  border:1px solid currentColor}
.lencana.batal{color:var(--bahaya);background:var(--bahaya-lembut)}
.lencana.status{color:var(--aksen-tua);background:var(--aksen-lembut)}
.rincian{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;margin:1.4rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--garis)}
.rincian dt{font-size:.78rem;color:var(--tinta-2);letter-spacing:.03em;text-transform:uppercase}
.rincian dd{margin:.15rem 0 0;font-size:.97rem}
.keluhan{margin:1.3rem 0 0;padding:.9rem 1.1rem;background:var(--kertas);border-radius:10px;
  font-size:.96rem;color:var(--tinta-2);font-style:italic}

/* ── linimasa ── */
.linimasa{list-style:none;margin:1.8rem 0 0;padding:0 0 0 1.6rem;position:relative}
.linimasa::before{content:"";position:absolute;left:5px;top:.55rem;bottom:.9rem;
  width:2px;background:var(--garis-2);border-radius:2px}
.linimasa::after{content:"";position:absolute;left:5px;top:.55rem;width:2px;border-radius:2px;
  background:var(--aksen);height:var(--isi,0%);transition:height 1.1s var(--gerak)}
.linimasa li{position:relative;padding:0 0 1.5rem}
.linimasa li:last-child{padding-bottom:0}
.titik{position:absolute;left:-1.6rem;top:.42rem;width:12px;height:12px;border-radius:50%;
  background:var(--kertas);border:2px solid var(--garis-2);box-sizing:border-box;z-index:1}
.linimasa li.selesai .titik{background:var(--aksen);border-color:var(--aksen)}
.linimasa li.sekarang .titik{border-color:var(--aksen);background:var(--kertas);
  box-shadow:0 0 0 4px var(--aksen-lembut)}
.linimasa li.nanti h3,.linimasa li.batal h3{color:var(--tinta-2);font-weight:500}
.linimasa li.nanti p,.linimasa li.batal p{color:var(--tinta-2);opacity:.75}
.linimasa li.batal .titik{border-style:dashed}
.linimasa h3{margin:0}
.linimasa p{margin:.1rem 0 0;font-size:.92rem;color:var(--tinta-2)}
.catatan-akhir{margin-top:2rem}
.langkah-tautan{margin:.9rem 0 0}

.bantuan{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--garis)}

/* ── info lembut (catatan 'login di akhir') ── */
.info{background:var(--aksen-lembut);border:1px solid var(--aksen);color:var(--aksen-tua);
  border-radius:10px;padding:.8rem 1rem;font-size:.92rem;margin:0 0 1.4rem}

/* ── masuk dengan Google ── */
.masuk-google{margin:2rem auto 0;max-width:24rem}
.masuk-google .kecil{margin-top:1rem}
.tombol.google{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--kartu);color:var(--tinta);border-color:var(--garis-2)}
.tombol.google:hover{background:var(--kertas);border-color:var(--aksen);color:var(--tinta)}
.tombol.google .g{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--aksen);color:#fff;font-weight:700;font-size:.9rem;flex:0 0 auto}

/* ── gerak ── */
/* Urutan penting: .tampil harus SETELAH .naik/.muncul (spesifisitas sama,
   yang belakangan menang). html:not(.js) menjaga isi tetap terlihat kalau
   JavaScript gagal dimuat — halaman tidak boleh pernah kosong. */
.naik,.muncul{opacity:0;transform:translateY(14px)}
.tampil{opacity:1;transform:none;transition:opacity .7s var(--gerak),transform .7s var(--gerak)}
html:not(.js) .naik,html:not(.js) .muncul{opacity:1;transform:none}
.tunda-1{transition-delay:.08s}.tunda-2{transition-delay:.16s}.tunda-3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .naik,.muncul,.tampil{opacity:1;transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .linimasa::after{transition:none}
}

@media (max-width:560px){
  body{font-size:16px}
  h1{font-size:clamp(1.75rem,7.5vw,2.35rem)}
  .dua{grid-template-columns:1fr}
  .rincian{gap:.8rem .9rem}
  .kartu{padding:1.15rem}
  fieldset{padding:1.05rem}
  .tombol-baris .tombol{flex:1 1 100%;text-align:center}
  .atas{padding:1rem 18px}
}

/* ── Panduan klaim (Journey Card) ── */
.panduan-kisi{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.panduan-ubin{position:relative;display:block;background:var(--kartu);border:1px solid var(--garis);
  border-radius:var(--r);padding:1.2rem 1.2rem 1.5rem;color:var(--tinta)}
.panduan-ubin:hover{text-decoration:none;border-color:var(--aksen)}
.panduan-ubin h2{font-size:1.15rem;margin:0 0 .35rem}
.panduan-ubin p{margin:0;font-size:.9rem;color:var(--tinta-2)}
.panduan-ubin .panah{position:absolute;right:1.1rem;bottom:.8rem;color:var(--aksen)}
.fase-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0}
.fase-nav a{font-size:.85rem;border:1px solid var(--garis-2);border-radius:999px;
  padding:.35rem .8rem;color:var(--tinta-2)}
.fase-nav a:hover{border-color:var(--aksen);color:var(--aksen);text-decoration:none}
.fase{margin-top:2.6rem;scroll-margin-top:1rem}
.fase h2{display:flex;align-items:center;gap:.6rem}
.fase-no{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--aksen);color:#fff;font-size:.9rem;flex:0 0 auto}
.langkah{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);
  padding:1.1rem 1.2rem;margin-top:1rem}
.langkah header{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.langkah h3{margin:0;font-size:1.02rem}
.langkah>p{margin:.5rem 0 0;font-size:.95rem;color:var(--tinta-2)}
.cap{font-size:.72rem;padding:.14rem .55rem;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.cap.lapangan{color:var(--aksen-tua);background:var(--aksen-lembut)}
.cap.internal{color:var(--tinta-2);background:var(--kertas);border:1px solid var(--garis)}
.tenggat{margin:.6rem 0 0;font-size:.88rem;color:var(--aksen-tua);font-weight:500}
.dok{list-style:none;margin:.7rem 0 0;padding:0}
.dok li{margin:.3rem 0}
.dok label{display:flex;gap:.55rem;align-items:flex-start;font-weight:400;font-size:.92rem;margin:0}
.dok input{display:inline-block;width:auto;margin:.22rem 0 0;padding:0;box-shadow:none;
  accent-color:var(--aksen);flex:0 0 auto}
.awas{margin:.7rem 0 0;padding:0 0 0 1.4rem;font-size:.88rem;color:var(--bahaya)}
.awas li{margin:.3rem 0}
.cta-lekat{position:sticky;bottom:0;display:flex;gap:.7rem;margin-top:2.5rem;
  padding:.8rem 0 calc(.8rem + env(safe-area-inset-bottom));
  background:var(--kertas);border-top:1px solid var(--garis)}
.cta-lekat .tombol{flex:1;text-align:center}

@media (max-width:560px){
  .panduan-kisi{grid-template-columns:1fr}
  .atas nav{gap:.75rem;font-size:.9rem}
  .merek span{font-size:.95rem}
  .cta-lekat{flex-direction:column;gap:.5rem}
}

/* ── wiki dokter ── */
/* Empat nada status. 'abu' (belum diperiksa) sengaja TIDAK memakai hijau:
   64 dari 83 RS belum diverifikasi ke daftar resmi, dan membuatnya terlihat
   aman adalah persis kesalahan yang membuat nasabah menalangi biaya di loket. */
:root{
  --hati:#8A5A00; --hati-lembut:#FBF3E4;
  --abu-teks:#5A626B; --abu-lembut:#F2F2EF;
}
.wiki-cari{display:flex;gap:.6rem;margin:1.8rem 0 1.2rem}
.wiki-cari input{flex:1;min-width:0;font:inherit;padding:.8rem .95rem;color:var(--tinta);
  background:var(--kartu);border:1px solid var(--garis-2);border-radius:10px}
.wiki-cari input::placeholder{color:var(--tinta-2)}
.wiki-cari input:focus{outline:none;border-color:var(--aksen);
  box-shadow:0 0 0 3px var(--aksen-lembut)}
.wiki-cari .tombol{flex:0 0 auto}
.wiki-angka{margin:0 0 2rem;font-variant-numeric:tabular-nums}
.wiki-judul-hasil{font-size:1.05rem;letter-spacing:-.01em;margin:2.4rem 0 .7rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--garis);color:var(--tinta-2);font-weight:600}

/* daftar hasil — satu baris = satu ketukan, nyaman di HP */
.wiki-daftar{list-style:none;margin:0;padding:0}
.wiki-daftar li{border-bottom:1px solid var(--garis)}
.wiki-daftar a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;
  padding:.85rem .2rem;color:var(--tinta)}
.wiki-daftar a:hover{text-decoration:none;background:var(--aksen-lembut)}
.wiki-daftar .nm{font-weight:600;letter-spacing:-.012em}
.wiki-daftar .sp{color:var(--tinta-2);font-size:.9rem}
.wiki-daftar .kecil{flex:1 0 100%;color:var(--tinta-2)}
.wiki-hari-mini{font-variant-numeric:tabular-nums}

/* titik status kecil untuk baris daftar */
/* 🪤 JANGAN beri nama `.titik` — nama itu SUDAH dipakai titik bulat linimasa
   kartu panduan (position:absolute; left:-1.6rem; 12x12px). Memakainya ulang
   membuat lencana ini jadi absolut dan terbang ke pojok kiri atas halaman
   (terukur 14 Okt 2026: left:-26px, lebar 20px dari seharusnya 180px) —
   rusak diam-diam, tanpa galat apa pun. */
.lencana-kecil{display:inline-block;flex:0 0 auto;font-size:.74rem;padding:.12rem .5rem;
  border-radius:999px;white-space:nowrap}
.wiki-daftar .nm,.wiki-daftar .sp{min-width:0;overflow-wrap:anywhere}
.lk-aman{color:var(--aksen-tua);background:var(--aksen-lembut)}
.lk-hati{color:var(--hati);background:var(--hati-lembut)}
.lk-bahaya{color:var(--bahaya);background:var(--bahaya-lembut)}
.lk-abu{color:var(--abu-teks);background:var(--abu-lembut)}

/* lencana besar di kartu RS */
.lencana.nada-aman{color:var(--aksen-tua);background:var(--aksen-lembut)}
.lencana.nada-hati{color:var(--hati);background:var(--hati-lembut)}
.lencana.nada-bahaya{color:var(--bahaya);background:var(--bahaya-lembut)}
.lencana.nada-abu{color:var(--abu-teks);background:var(--abu-lembut)}

/* sorotan: dokter sama, ada RS cashless -> ini yang menghemat uang nasabah */
.wiki-emas{margin:0 0 1rem;padding:1.3rem 1.4rem;background:var(--aksen-lembut);
  border:1px solid var(--aksen);border-radius:var(--r)}
.wiki-emas h2{font-size:1.12rem;margin-bottom:.2rem}
.wiki-emas .wiki-daftar{margin-top:.8rem}
.wiki-emas .wiki-daftar li{border-bottom-color:color-mix(in srgb,var(--aksen) 22%,transparent)}
.wiki-emas .wiki-daftar li:last-child{border-bottom:0}
.wiki-emas .wiki-daftar a:hover{background:color-mix(in srgb,var(--aksen) 9%,transparent)}
.wiki-hemat{margin:1.6rem 0 0;padding:1.3rem 1.4rem;background:var(--aksen-lembut);
  border:1px solid var(--aksen);border-radius:var(--r)}
.wiki-hemat h2{font-size:1.12rem;margin-bottom:.35rem}
.wiki-hemat p{margin:0;font-size:.97rem}
/* Nama-nama RS dulu dirangkai di dalam kalimat ("praktek di A dan B, yang
   cashless, artinya…"). Dengan 3 RS kalimat itu jadi tiga baris yang harus
   dibaca utuh untuk menemukan namanya. Sebagai butir, namanya langsung terlihat. */
.hemat-daftar{list-style:none;margin:.6rem 0 .8rem;padding:0;font-size:.97rem}
.hemat-daftar li{position:relative;padding-left:1.1rem;margin:.28rem 0}
/* Kotanya diberi barisnya sendiri. Disambung dengan titik tengah, ia patah
   jadi "· Kota / Surabaya" begitu namanya panjang — titik yatim di awal baris. */
.hemat-daftar .kota{display:block;font-size:.88em;margin-top:.02rem}
.hemat-daftar li::before{content:"";position:absolute;left:.12rem;top:.6rem;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--aksen)}

/* peringatan jujur: nama sama belum tentu orang yang sama */
.wiki-waspada{margin:1.4rem 0 0;padding:1rem 1.2rem;background:var(--abu-lembut);
  border:1px solid var(--garis-2);border-radius:var(--r)}
.wiki-waspada p{margin:.3rem 0 0;color:var(--tinta-2)}

.wiki-nama{font-size:clamp(1.6rem,4.6vw,2.3rem)}

/* ── daftar rumah sakit tempat praktek: BUTIR, bukan kartu ──
   Dulu tiap RS adalah kartu berbingkai bertumpuk. Untuk dokter dengan 3 RS,
   halamannya jadi 2.952px di HP dan nasabah harus menggulir melewati tiga
   kotak besar hanya untuk menjawab satu pertanyaan: "yang mana yang cashless".
   Sekarang satu butir per RS, titiknya berwarna menurut status — jawabannya
   terbaca tanpa menggulir. Tidak ada isi yang dibuang: jadwal, catatan, dan
   tombol pengajuan tetap ada di dalam butirnya. */
.praktek-daftar{list-style:none;margin:1.1rem 0 0;padding:0}
/* Titiknya MENGGANTUNG keluar (margin kiri negatif) dan seluruh isi butir
   menjorok 1,2rem. Dengan begitu lencana status yang terpaksa turun ke baris
   kedua (nama RS panjang) tetap lurus di bawah nama, bukan melompat ke tepi. */
.praktek-baris{padding:1.25rem 0 1.5rem 1.2rem;border-top:1px solid var(--garis-2)}
.praktek-baris:first-child{border-top:0;padding-top:.5rem}
.praktek-baris:last-child{padding-bottom:.4rem}
.praktek-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem}
.praktek-kepala h3{font-size:1.06rem;margin:0}
.praktek-kepala h3 a{color:var(--tinta)}
/* 🪤 JANGAN beri nama `.titik` — nama itu sudah dipakai titik linimasa
   (position:absolute;left:-1.6rem) dan butir ini akan terbang ke pojok. */
.praktek-titik{flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;
  margin-left:-1.2rem;background:var(--abu-teks)}
.praktek-titik.nada-aman{background:var(--aksen)}
.praktek-titik.nada-hati{background:var(--hati)}
.praktek-titik.nada-bahaya{background:var(--bahaya)}
.praktek-titik.nada-abu{background:var(--garis-2)}
/* margin bawah WAJIB ada: kalau RS belum punya jadwal, kalimat
   "Jam praktik belum kami catat" menempel 0px di bawah baris kota dan
   keduanya terbaca sebagai satu paragraf nyasar. 877 dari 3.106 baris
   praktek (28%) jatuh ke cabang itu. */
.praktek-tempat{margin:.3rem 0 .6rem}
.wiki-status-rinci{margin:.5rem 0 0}
.wiki-catatan-rs{margin:.55rem 0 0;color:var(--hati);background:var(--hati-lembut);
  padding:.5rem .7rem;border-radius:8px}
.wiki-status-besar{margin-top:1.4rem}
.wiki-status-besar p{margin:.6rem 0 0}
.wiki-status-besar.nada-aman{border-color:var(--aksen)}
.wiki-status-besar.nada-bahaya{border-color:var(--bahaya)}

/* jadwal: hari sejajar, jam angka tabular supaya kolomnya rapi */
.wiki-jadwal{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.1rem}
.wiki-jadwal li{display:grid;grid-template-columns:3.1rem 1fr;gap:.6rem;
  padding:.3rem 0;border-top:1px solid var(--garis)}
.wiki-jadwal .hari{font-size:.82rem;font-weight:600;color:var(--aksen);padding-top:.1rem}
.wiki-jadwal .jam{font-variant-numeric:tabular-nums;font-size:.95rem}
.wiki-jadwal-teks{margin:.9rem 0 0;padding:.5rem .7rem;background:var(--kertas);
  border:1px solid var(--garis);border-radius:8px}

.wiki-bidang{margin-top:1.8rem}
.wiki-bidang-judul{font-size:.76rem;letter-spacing:.08em;color:var(--tinta-2);margin-bottom:.3rem}
.wiki-nihil{margin-top:2rem;padding:1.6rem 1.4rem;background:var(--kartu);
  border:1px solid var(--garis);border-radius:var(--r)}
.wiki-nihil h2{font-size:1.15rem}
.wiki-nihil p:last-child{margin-bottom:0}
.wiki-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:2.2rem}

@media (max-width:480px){
  .wiki-cari{flex-wrap:wrap}
  .wiki-cari .tombol{width:100%;text-align:center}
}

/* lompatan cepat antar spesialisasi — halaman RS bisa memuat 176 dokter */
.wiki-lompat{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0 0;padding:0;list-style:none}
.wiki-lompat a{font-size:.78rem;padding:.26rem .66rem;border-radius:999px;color:var(--tinta-2);
  background:var(--kartu);border:1px solid var(--garis)}
.wiki-lompat a:hover{text-decoration:none;color:var(--aksen-tua);background:var(--aksen-lembut);
  border-color:var(--aksen)}
.wiki-bidang{scroll-margin-top:5rem}

/* ── penyaring wiki (tanpa JavaScript: formulir GET biasa, CSP tetap ketat) ── */
.wiki-saring{margin:1.8rem 0 1.2rem;padding:1.1rem 1.2rem;background:var(--kartu);
  border:1px solid var(--garis);border-radius:var(--r)}
.saring-cari{display:flex;gap:.6rem}
.saring-cari input{flex:1;min-width:0;font:inherit;padding:.8rem .95rem;color:var(--tinta);
  background:var(--kertas);border:1px solid var(--garis-2);border-radius:10px}
.saring-cari input::placeholder{color:var(--tinta-2)}
.saring-cari input:focus{outline:none;border-color:var(--aksen);
  box-shadow:0 0 0 3px var(--aksen-lembut)}
.saring-cari .tombol{flex:0 0 auto}
.saring-kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.1rem .9rem;margin-top:1rem}
.saring-kolom{margin:0 0 .7rem}
.saring-kolom label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta-2);margin-bottom:.22rem}
.saring-kolom select{width:100%;font:inherit;font-size:.95rem;padding:.55rem .7rem;
  color:var(--tinta);background:var(--kertas);border:1px solid var(--garis-2);border-radius:9px}
.saring-kolom select:focus{outline:none;border-color:var(--aksen);
  box-shadow:0 0 0 3px var(--aksen-lembut)}
.saring-sakelar{display:flex;align-items:flex-end}
/* 🪤 ditulis sebagai `.saring-kolom label.saring-centang`, BUKAN `.saring-centang`:
   aturan `.saring-kolom label` di atas lebih kuat (dua kelas vs satu), jadi
   `text-transform:none` terabaikan dan labelnya jadi HURUF BESAR SEMUA. */
.saring-kolom label.saring-centang{display:flex;align-items:center;gap:.5rem;font-size:.95rem;
  font-weight:400;text-transform:none;letter-spacing:0;color:var(--tinta);cursor:pointer;
  padding:.55rem .7rem;border:1px solid var(--garis-2);border-radius:9px;width:100%;
  margin-bottom:0}
.saring-centang input{width:17px;height:17px;accent-color:var(--aksen);flex:0 0 auto}
.saring-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.wiki-ingat{margin:0 0 1.2rem;padding:.6rem .8rem;color:var(--hati);
  background:var(--hati-lembut);border-radius:9px}
.nihil-jalan{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 .8rem}

/* tombol "ajukan di sini" pada tiap kartu RS di halaman dokter */
/* Dulu selebar kartu. Tiga tombol hijau selebar layar adalah bagian
   terbesar dari 'berat'-nya halaman dokter; sekarang selebar teksnya. */
.tombol-pilih{margin-top:1.1rem;display:inline-block}

/* kartu "pilihan Anda" di atas formulir */
.pilih-kartu{margin:0 0 1.8rem;padding:1.2rem 1.3rem;background:var(--aksen-lembut);
  border:1px solid var(--aksen);border-radius:var(--r)}
.pilih-judul{margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.pilih-kartu h2{font-size:1.12rem;margin:0 0 .1rem}
.pilih-kartu p{margin:.15rem 0}
.pilih-rs{margin:.6rem 0 .5rem!important}
.pilih-jadwal{margin-top:.5rem!important;font-variant-numeric:tabular-nums}

@media (max-width:480px){
  .saring-cari{flex-wrap:wrap}
  .saring-cari .tombol{width:100%;text-align:center}
  .saring-aksi .tombol{width:100%;text-align:center}
}

/* ── latar: dua lapis warna merek di balik kertas putih ──
   Murni gradien, nol berkas tambahan. Tetap putih di tengah supaya teks
   gelap di atasnya tidak pernah kehilangan kontras. */
body{background:
  radial-gradient(68rem 38rem at 50% -16rem,#E6F1ED 0%,rgba(230,241,237,0) 70%),
  radial-gradient(46rem 30rem at 106% 2rem,#F7F3EA 0%,rgba(247,243,234,0) 72%),
  var(--kertas);
  background-repeat:no-repeat}

/* ── sampul: pita foto di kepala halaman ──
   Foto latar dekoratif (WEBP 23 KB; 10 KB di HP), suasana rumah sakit yang
   sengaja di luar fokus — BUKAN foto rumah sakit tertentu. Jangan pernah
   memasang foto gedung RS asli di halaman RS lain: nasabah membacanya
   sebagai janji tempat, dan itu menyesatkan.
   Kontras: di layar lebar, kolom teks berhenti di 44rem sehingga selalu berada
   di bagian paling putih. Di HP kolomnya selebar layar, jadi teks ikut melewati
   bagian foto yang lebih gelap — terukur 3,65:1 pada .utama, GAGAL WCAG AA.
   Karena itu di bawah 720px gradiennya diratakan jadi hampir putih seluruhnya
   (lihat @media di bawah). Foto tetap terasa di tepi, teks tetap terbaca. */
.sampul{position:relative;isolation:isolate;overflow:hidden;
  border-bottom:1px solid var(--garis)}
.sampul::before,.sampul::after{content:"";position:absolute;inset:0}
.sampul::before{z-index:-2;background-image:url("img/sampul-800.webp");
  background-size:cover;background-position:50% 64%}
.sampul::after{z-index:-1;background:
  linear-gradient(104deg,#fff 0%,rgba(255,255,255,.96) 36%,
                  rgba(255,255,255,.74) 68%,rgba(255,255,255,.5) 100%),
  linear-gradient(to bottom,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 34%,
                  rgba(255,255,255,.88) 100%)}
@media (min-width:720px){.sampul::before{background-image:url("img/sampul-1600.webp")}}
@media (max-width:719.98px){
  /* HP: scrim diratakan — kolom teks selebar layar, jadi tidak ada sisi aman. */
  .sampul::after{background:
    linear-gradient(104deg,#fff 0%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.82) 100%),
    linear-gradient(to bottom,rgba(255,255,255,.45) 0%,rgba(255,255,255,.08) 38%,
                    rgba(255,255,255,.9) 100%)}
  /* Fotonya dibiarkan terlihat; yang dinaikkan kontrasnya TEKSNYA, bukan
     scrim-nya — supaya latar tidak hilang sama sekali di HP. */
  .sampul .utama,.sampul .kecil{color:#3F4650}
}
/* Halaman RS TIDAK berfoto: halaman berjudul "Eka Hospital BSD" yang memakai
   foto koridor rumah sakit lain dibaca nasabah sebagai janji tempat. */
.sampul.polos::before{display:none}
.sampul.polos::after{background:linear-gradient(to bottom,var(--aksen-lembut),transparent)}
.sampul-isi{max-width:var(--lebar);margin:0 auto;
  padding:clamp(2.6rem,8vw,4.4rem) 20px clamp(2rem,6vw,3.2rem)}
.sampul-isi>.kecil:first-child{margin-bottom:.9rem}
.sampul.tipis .sampul-isi{padding-block:clamp(1.6rem,4.5vw,2.4rem) clamp(1.4rem,4vw,2rem)}
.sampul+.kolom>section:first-child{padding-top:clamp(1.8rem,5vw,2.6rem)}
.sampul-kepala{display:flex;align-items:center;gap:1rem}
.sampul-kepala>div{min-width:0}
.sampul-kepala h1{margin:0}
.sampul-kepala .utama{margin:.15rem 0 0;font-size:1.02rem}

/* ── rupa: lingkaran inisial, pengganti foto yang tidak kami miliki ── */
.rupa{flex:0 0 auto;display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border-radius:50%;font-size:.84rem;font-weight:600;line-height:1;
  border:1px solid transparent}
.rupa-besar{width:4rem;height:4rem;font-size:1.3rem;border-radius:50%}
.rupa.ubin{border-radius:13px}
.rupa-0{color:#0A5B4B;background:#E3F0EC;border-color:#C9E3DB}
.rupa-1{color:#1F4E79;background:#E6EEF7;border-color:#CEDFEF}
.rupa-2{color:#6B3F86;background:#F0E9F6;border-color:#E1D5EC}
.rupa-3{color:#8A5A00;background:#FAF1DF;border-color:#EEDFC1}
.rupa-4{color:#49681F;background:#EDF3E3;border-color:#DBE7CB}
.rupa-5{color:#9A3324;background:#F9EAE7;border-color:#F0D5D0}
.rupa.nada-aman{color:var(--aksen-tua);background:var(--aksen-lembut);border-color:#C9E3DB}
.rupa.nada-hati{color:var(--hati);background:var(--hati-lembut);border-color:#EEDFC1}
.rupa.nada-bahaya{color:var(--bahaya);background:var(--bahaya-lembut);border-color:#F0D5D0}
.rupa.nada-abu{color:var(--abu-teks);background:var(--abu-lembut);border-color:var(--garis-2)}

/* baris daftar: rupa di kiri, isinya tetap membungkus seperti semula */
.wiki-daftar a{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:.8rem}
.baris-isi{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;
  min-width:0;flex:1 1 auto}
.wiki-daftar .rupa{margin-top:.1rem}

/* kepala kartu RS: ubin inisial + nama */
.kartu-judul{display:flex;align-items:center;gap:.8rem;min-width:0}
.kartu-judul>div{min-width:0}
.kartu-judul .kecil{margin:.1rem 0 0}

@media (max-width:480px){
  .sampul-kepala{gap:.8rem}
  .rupa-besar{width:3.2rem;height:3.2rem;font-size:1.05rem}
}
.pilih-kepala{margin-bottom:.2rem}
.pilih-kepala h2{margin:0}
.pilih-kepala .kecil{margin:.1rem 0 0}
.pilih-kepala .rupa{background:#fff}

/* ── foto dokter di dalam lingkaran rupa ──
   Fotonya DITUMPUK di atas inisial, bukan menggantikannya: kalau rumah sakit
   mengganti nama berkasnya (dan itu pasti terjadi), gambarnya gagal dimuat —
   alt="" membuatnya tak terlihat, dan inisial di bawahnya langsung mengambil
   alih tanpa kotak rusak, tanpa JavaScript. */
.rupa{position:relative;overflow:hidden}
.rupa-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%;border-radius:inherit;display:block}
.foto-kredit{margin:1rem 0 0}

/* ── latar kepala halaman dokter: fotonya sendiri, dikaburkan ──
   Yang dicari BUKAN wajah besar di latar — itu mengganggu membaca nama dan
   terlihat murahan. Yang dicari warna: foto dikaburkan 28px lalu ditutup
   scrim putih, jadi yang tersisa hanya semburat warna dari fotonya sendiri.
   Tiap dokter punya kepala halaman yang sedikit berbeda, tanpa satu pun
   pertanyaan "ini foto siapa?".

   Dipasang sebagai <img>, BUKAN style="background-image:url(…)" per dokter:
   CSP kita style-src 'self' TANPA unsafe-inline, atribut style akan diblokir
   diam-diam — latarnya hilang begitu saja di produksi, tanpa galat.
   URL-nya sama persis dengan foto di lingkaran inisial, jadi browser memakai
   berkas yang sudah diunduh: nol permintaan tambahan. */
/* inset NEGATIF, bukan transform:scale — blur membuat tepi gambar meluruh
   jadi transparan sejauh ±radiusnya; kalau kotaknya pas selebar pita, tepi
   kiri & kanan pita jadi putih bersih dan semburatnya tampak seperti noda di
   tengah. Dengan kotak yang melebar 80px ke segala arah, tepi meluruh itu
   jatuh DI LUAR pita. 140px, bukan 80: blur(30px) berarti simpangan baku
   30px, jadi tepinya meluruh sejauh ±3σ = 90px.
   🪤 transform:scale(2.4) BUKAN hiasan. Tanpa itu, object-fit:cover
   menampilkan SELURUH lebar foto di dalam pita — termasuk latar studio di
   kiri-kanan potretnya. Terukur dari 637 foto kita: 30% berlatar putih (pita
   jadi putih polos di 41-54% lebarnya di laptop) dan 33% berlatar gelap (pita
   jadi slab abu di kedua tepi). Dengan scale 2,4 yang mengisi pita hanya
   bagian TENGAH foto — tempat orangnya berdiri — jadi warnanya rata.
   🪤 UKURANNYA WAJIB calc(), bukan inset + width:auto. Untuk elemen
   TERGANTI (<img>), width:auto berarti UKURAN ASLI GAMBAR — bukan ukuran
   yang dihitung dari left/right. Dengan inset:-80px + width:auto, latarnya
   diam-diam jadi gumpalan 200px di pojok kiri atas, bukan selebar pita.
   Terukur 15 Okt 2026: semburat hanya muncul di x=0..120, sisanya putih.
   max-width:none juga wajib: aturan global img{max-width:100%} memotongnya. */
.sampul-latar{position:absolute;left:-140px;top:-140px;max-width:none;
  width:calc(100% + 280px);height:calc(100% + 280px);
  z-index:-2;object-fit:cover;object-position:50% 30%;display:block;
  filter:blur(30px) saturate(1.7) brightness(1.12);transform:scale(2.4)}
.sampul.latar-dokter::before{display:none}
.sampul.latar-dokter .sampul-isi{padding-block:clamp(2rem,5.5vw,2.9rem) clamp(1.7rem,4.6vw,2.4rem)}
/* Pranala kembali dipekatkan ke hijau tua: hijau terang (#0E7C66) di atas
   semburat foto cuma mencapai 4,2:1 — di bawah ambang WCAG AA untuk teks
   kecil. Hijau tua lolos dengan jarak aman di semua foto yang kami punya. */
.sampul.latar-dokter a{color:var(--aksen-tua)}
/* Scrim versi dokter dibuat LEBIH tebal daripada sampul biasa: foto wajah
   punya bagian sangat gelap (rambut, jas), dan teks di atasnya harus tetap
   lolos WCAG AA. Terukur dari piksel hasil render, bukan dari perkiraan. */
/* Scrim versi dokter dibuat PITA: paling tipis di tengah pita (tempat nama —
   teksnya paling besar & paling gelap, jadi paling tahan), lalu menebal ke
   putih di atas dan di bawah. Hasilnya warna foto terasa sebagai semburat di
   belakang nama, dan teks kecil justru berada di bagian yang paling putih.
   Perhentian 24% sengaja ada: di situlah pranala "Cari dokter" duduk. Dengan
   .86 di sana, foto SEGELAP apa pun hanya menyumbang 13% — pranala tetap
   lolos AA walau suatu hari ada foto berlatar hitam. */
.sampul.latar-dokter::after{background:
  linear-gradient(to bottom,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 24%,
                  rgba(255,255,255,.66) 48%,rgba(255,255,255,.95) 100%),
  linear-gradient(104deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.1) 55%,
                  rgba(255,255,255,0) 100%)}
@media (max-width:719.98px){
  /* HP: kolom teks selebar layar, tidak ada sisi aman — lapisan mendatar
     dibuat rata supaya tak ada sudut yang lebih gelap dari yang lain. */
  .sampul.latar-dokter::after{background:
    linear-gradient(to bottom,rgba(255,255,255,.95) 0%,rgba(255,255,255,.87) 24%,
                    rgba(255,255,255,.7) 48%,rgba(255,255,255,.95) 100%),
    linear-gradient(104deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.1) 100%)}
}