/* Port dari app/globals.css FE Next.js + kelas komponen bersama supaya Blade
   tidak dipenuhi inline style seperti JSX aslinya. Palet: #425FAD (primer),
   #1E2A52 (panel gelap), #E9ECF5 (latar). */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CDD3E4; border-radius: 99px; }

@keyframes rtup { from { transform: translateY(10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes rtpop { 0% { transform: scale(.7); opacity: 0 } 60% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }
@keyframes pqup { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes pqfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pqtoast { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg); } }

.anim-up { animation: pqup .25s ease; }
.anim-rtup { animation: rtup .3s ease; }

/* focus rings */
.inp-blue:focus { border-color: #425FAD !important; box-shadow: 0 0 0 3px rgba(66,95,173,.12); }
.inp-green:focus { border-color: #1F6F63 !important; box-shadow: 0 0 0 3px rgba(31,111,99,.12); }
.fw-blue:focus-within { border-color: #425FAD !important; box-shadow: 0 0 0 3px rgba(66,95,173,.12); }
.fw-green:focus-within { border-color: #1F6F63 !important; box-shadow: 0 0 0 3px rgba(31,111,99,.12); }

.card-hover { transition: transform .15s, box-shadow .15s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(66,95,173,.4); }

/* ── input dasar ── */
.inp { width: 100%; padding: 14px 16px; border: 1.5px solid #DDE1EC; border-radius: 13px; font-size: 14.5px; font-family: inherit; color: #1E2236; outline: none; background: #fff; }
.inp-sm { width: 100%; padding: 12px 14px; border: 1.5px solid #DDE1EC; border-radius: 11px; font-size: 14px; font-family: inherit; color: #1E2236; outline: none; background: #fff; }
.lbl { font-size: 12.5px; font-weight: 600; color: #4A4F6B; display: block; margin-bottom: 7px; }

/* ── auth ── */
.auth-wrap { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: #E9ECF5; padding: 40px; }
.auth-card { width: 100%; max-width: 1100px; height: 720px; background: #fff; border-radius: 28px; overflow: hidden; display: flex; box-shadow: 0 40px 90px -30px rgba(30,42,82,.4); }
.auth-brand { width: 452px; flex: none; background: #1E2A52; padding: 48px 46px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.auth-form-pad { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 48px 56px; }
@media (max-width: 1000px) {
  .auth-wrap { padding: 0; align-items: stretch; }
  .auth-card { flex-direction: column; width: 100%; height: auto; min-height: 100vh; border-radius: 0; box-shadow: none; }
  .auth-brand { width: 100%; flex: none; padding: 30px 28px; }
  .auth-brand-detail { display: none; }
  .auth-form-pad { padding: 38px 26px; justify-content: flex-start; }
}
@media (max-width: 440px) {
  .auth-form-pad { padding: 30px 18px; }
  .auth-brand { padding: 24px 20px; }
}

/* ── dashboard ── */
.dash { display: flex; min-height: 100vh; background: #F5F6FA; }
.pq-sidebar { width: 266px; flex: none; background: #fff; border-right: 1px solid #ECEEF3; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; }
.pq-content { flex: 1; padding: 26px 32px 44px; }
/* Lebarnya beranimasi supaya perpindahan lebar/kuncup terbaca sebagai satu
   gerakan, bukan layar yang tiba-tiba melompat. */
.pq-sidebar { transition: width .18s ease; }
.pq-head { padding: 22px 20px 10px; display: flex; align-items: center; gap: 10px; }
.pq-logo { flex: none; }
.pq-mini-btn { margin-left: auto; width: 34px; height: 34px; flex: none; display: flex; align-items: center;
               justify-content: center; border: 1px solid #E9EBF3; border-radius: 10px; background: #fff;
               color: #9499AE; cursor: pointer; }
.pq-mini-btn:hover { border-color: #C8CDDE; color: #4A4F6B; background: #F7F8FC; }

/* ── sidebar kuncup: ikon saja ──
   Hanya di layar lebar. Di bawah 980px sidebar ini SUDAH jadi laci geser yang
   menutup penuh, dan mengecilkannya jadi ikon di sana cuma menambah keadaan
   ketiga yang tidak menolong siapa pun. */
@media (min-width: 981px) {
  .pq-sidebar.mini { width: 76px; }
  .pq-sidebar.mini .pq-logo,
  .pq-sidebar.mini .pq-clinic-wrap,
  .pq-sidebar.mini .section-label,
  .pq-sidebar.mini .nav-text,
  .pq-sidebar.mini .nav-chev,
  .pq-sidebar.mini .pq-user-text { display: none; }
  .pq-sidebar.mini .pq-head { justify-content: center; padding: 22px 0 10px; }
  .pq-sidebar.mini .pq-mini-btn { margin-left: 0; }
  .pq-sidebar.mini .pq-nav { padding-left: 8px; padding-right: 8px; }
  /* Ikonnya di tengah, dan kotak sentuhnya tetap selebar item — bukan sekadar
     ikon 19px yang harus dibidik. */
  .pq-sidebar.mini .nav-item { justify-content: center; gap: 0; padding: 11px 0; }
  /* Jarak antar kelompok tetap terbaca walau labelnya hilang; tanpa ini seluruh
     menu jadi satu kolom ikon tanpa batas yang bisa dibaca mata. */
  .pq-sidebar.mini .section-label + .nav-item { margin-top: 14px; }
  .pq-sidebar.mini .pq-foot { justify-content: center; padding: 14px 8px; }
}

/* Topbar hanya ada di layar sempit — di layar lebar sidebar-nya sudah permanen
   dan sebuah tombol menu cuma akan menduplikasi navigasi yang sudah terlihat. */
.pq-topbar { display: none; }
/* Keduanya mati di luar media query di bawah. Penting untuk scrim: Alpine tetap
   merendernya kalau laci sempat dibuka lalu jendelanya dilebarkan, dan tanpa
   aturan ini ia jadi div polos yang ikut memakan ruang di baris flex. */
.pq-scrim { display: none; }

/* Di bawah 980px sidebar dulu sekadar `display: none` TANPA pengganti apa pun:
   tidak ada hamburger, tidak ada drawer. Akibatnya staf yang membuka dashboard
   dari ponsel kehilangan seluruh navigasi — ia terkunci di halaman yang
   kebetulan sedang terbuka dan satu-satunya jalan pindah adalah memutar layar
   atau membuka laptop. Sekarang sidebar yang sama dipakai ulang sebagai laci
   geser; tidak ada menu kedua yang harus dijaga agar tetap sinkron. */
@media (max-width: 980px) {
  .pq-topbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 40;
    padding: 12px 16px; background: #fff; border-bottom: 1px solid #ECEEF3;
  }
  .pq-burger {
    width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 1px solid #E3E6EF; border-radius: 11px; background: #fff; color: #4A4F6B; cursor: pointer;
  }
  .pq-burger:active { background: #F4F5F9; }

  .dash { flex-direction: column; }

  .pq-sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; z-index: 60;
    width: min(286px, 86vw);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 20px 60px -20px rgba(30, 42, 82, .45);
  }
  .pq-sidebar.open { transform: translateX(0); }

  .pq-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 50;
    background: rgba(24, 30, 56, .42);
  }

  .pq-content { padding: 20px 18px 36px; }
}

/* Hormati "kurangi gerak": lacinya tetap bekerja, cuma tidak meluncur. */
@media (prefers-reduced-motion: reduce) {
  .pq-sidebar { transition: none; }
}
.section-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #AEB2C4; text-transform: uppercase; padding: 0 12px; margin: 18px 0 8px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 11px; color: #6B7186; font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; margin-top: 3px; transition: all .15s; }
.nav-item.active { background: #ECEFFB; color: #425FAD; font-weight: 600; }
.card { background: #fff; border: 1px solid #ECEEF3; border-radius: 18px; padding: 18px; box-shadow: 0 1px 2px rgba(30,40,80,.04); }
.card22 { background: #fff; border: 1px solid #ECEEF3; border-radius: 18px; padding: 22px; box-shadow: 0 1px 2px rgba(30,40,80,.04); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { background: #4E5DA5; color: #fff; font-size: 13px; font-weight: 600; text-align: left; padding: 14px 16px; }
.tbl th:first-child { border-radius: 10px 0 0 10px; }
.tbl th:last-child { border-radius: 0 10px 10px 0; }
.tbl td { padding: 14px 16px; border-bottom: 1px solid #F0F1F6; font-size: 13px; color: #5A6076; vertical-align: middle; }
.tbl .empty { padding: 30px; text-align: center; color: #9499AE; font-size: 13px; }
.avatar { border-radius: 99px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.badge { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; display: inline-block; }
.badge.green { background: #E6F4EE; color: #1F8A5B; }
.badge.salmon { background: #FDEDE6; color: #DC7A4E; }
.badge.blue { background: #E8EFFB; color: #3B6FD0; }
.badge.red { background: #FCE9E7; color: #E0594E; }
.btn-red { background: #F2756A; color: #fff; border: none; border-radius: 11px; padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.btn-blue { background: #4E5DA5; color: #fff; border: none; border-radius: 11px; padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.btn-white { background: #fff; color: #3A3F5C; border: 1px solid #E4E6EF; border-radius: 11px; padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.btn-primary { background: #425FAD; color: #fff; border: none; border-radius: 11px; padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer; }
.filter-pill { border: 1px solid #E4E6EF; border-radius: 11px; padding: 11px 14px; font-size: 13.5px; color: #9499AE; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
/* Kembaran .filter-pill untuk kontrol yang BENAR-BENAR menyaring. Bentuknya
   sengaja sama persis supaya baris saringan tetap satu bahasa visual; bedanya
   ini <select>/<input> sungguhan, bukan div berhias chevron. */
.filter-select { height: 42px; border: 1px solid #E4E6EF; border-radius: 11px; padding: 0 34px 0 14px; font-family: inherit; font-size: 13.5px; color: #1E2236; cursor: pointer; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239499AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center; }
.filter-date { height: 42px; border: 1px solid #E4E6EF; border-radius: 11px; padding: 0 12px; font-family: inherit; font-size: 13.5px; color: #1E2236; background: #fff; cursor: pointer; }
.filter-select:focus, .filter-date:focus { outline: none; border-color: #425FAD; }
.seg-wrap { display: flex; background: #fff; border: 1px solid #E7E9F2; border-radius: 13px; padding: 4px; gap: 2px; }
.seg { background: transparent; color: #6B7186; font-weight: 500; border-radius: 9px; padding: 9px 16px; font-size: 13.5px; border: none; cursor: pointer; white-space: nowrap; transition: all .15s; }
.seg.active { background: #425FAD; color: #fff; font-weight: 600; }
.toggle { width: 40px; height: 22px; border-radius: 99px; padding: 2px; display: flex; align-items: center; background: #CBD2E0; cursor: pointer; transition: all .15s; }
.toggle.on { background: #425FAD; justify-content: flex-end; }
.toggle .knob { width: 18px; height: 18px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.day-chip { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; background: #F4F5F9; color: #B8BDCE; border: 1px solid #EDEFF4; }
.day-chip.on { background: #ECEFFB; color: #425FAD; border-color: #D5DCF5; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin-bottom: 16px; color: #9499AE; }
.breadcrumb b { color: #1E2236; font-weight: 700; }
.page-title { font-size: 25px; font-weight: 800; color: #1E2236; letter-spacing: -.02em; }
.search-box { border: 1px solid #E4E6EF; border-radius: 11px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; background: #fff; min-width: 200px; }
.search-box input { border: none; outline: none; font-family: inherit; font-size: 13.5px; color: #1E2236; width: 100%; background: transparent; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 60; background: #1E2236; color: #fff; font-size: 13.5px; font-weight: 600; padding: 13px 22px; border-radius: 12px; box-shadow: 0 14px 34px -10px rgba(20,30,70,.5); animation: pqtoast .2s ease; }
.modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20,26,50,.45); display: flex; align-items: center; justify-content: center; padding: 24px; animation: pqfade .15s ease; }
.modal-card { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(20,30,70,.5); animation: pqup .2s ease; }
/* Form yang barisnya memuat beberapa kolom sekaligus — Tambah Sesi, dengan
   jam mulai, jam selesai, panjang slot, dan tombol hapus dalam satu baris.
   Di 480px kotak menitnya terpotong sampai "60" terbaca "6C". */
.modal-card.modal-lebar { max-width: 640px; }

/* ── kartu klinik ──
   Nama & alamat panjangnya beda-beda per klinik, jadi tiap baris ditahan:
   nama dan alamat dipotong 2 baris (teks penuh tetap ada di tooltip) dan
   blok bawah didorong `margin-top:auto`. Hasilnya badge, garis, telepon, dan
   pil link berdiri sejajar di semua kartu, bukan bergelombang. */
.clinic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.clinic-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #ECEEF3; border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(30,40,80,.04); }
.clinic-head { display: flex; align-items: flex-start; gap: 13px; }
.clinic-avatar { width: 48px; height: 48px; border-radius: 13px; font-size: 15px; object-fit: cover; flex: none; }
.clinic-id { flex: 1; min-width: 0; }
.clinic-name { font-size: 15.5px; font-weight: 700; color: #1E2236; line-height: 1.32; min-height: 2.64em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.clinic-addr { margin-top: 14px; font-size: 12.5px; color: #8A90A6; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clinic-addr.kosong { color: #B8BDCE; font-style: italic; }
.clinic-foot { margin-top: auto; padding-top: 16px; }
.clinic-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #F0F1F6; padding-top: 13px; }
.clinic-phone { font-size: 12.5px; color: #5A6076; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clinic-dokter { flex: none; font-size: 12px; font-weight: 700; color: #425FAD; background: #ECEFFB; border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.clinic-dokter.nol { color: #9499AE; background: #F4F5F9; }
/* nowrap + min-width:0 pada URL: tanpa ini slug panjang mendorong tombol
   Salin/Preview turun ke baris kedua dan meluber keluar pil. */
.clinic-link { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin-top: 12px; background: #F5F7FC; border: 1px solid #E4E8F4; border-radius: 10px; padding: 5px 6px 5px 11px; }
/* Domainnya sama persis di semua kartu, jadi yang ditampilkan cukup path-nya.
   Kalau host ikut dicetak, ia memakan lebar sampai slug — satu-satunya bagian
   yang membedakan satu klinik dari yang lain — tinggal "terpadu.praktiqu.c…".
   URL utuh tetap ada di tooltip dan itu juga yang disalin tombol Salin. */
.clinic-url { flex: 1 1 auto; display: flex; min-width: 0; margin-right: 4px; font-size: 12px; }
.clinic-url .garis { flex: none; color: #A2A8BC; font-weight: 600; }
.clinic-url .slug { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #425FAD; font-weight: 700; }
.clinic-act { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: 8px; color: #7A8098; cursor: pointer; transition: background .15s, color .15s; }
.clinic-act:hover { background: #E1E7F6; color: #425FAD; }

/* ── booking ── */
.bk-wrap { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: #E9ECF5; padding: 40px; }
.bk-card { width: 1180px; max-width: 100%; height: 760px; background: #fff; border-radius: 28px; overflow: hidden; display: flex; box-shadow: 0 40px 90px -30px rgba(30,42,82,.4); }
.bk-side { flex: none; background: #1E2A52; display: flex; flex-direction: column; }
.bk-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.logo-chip { align-self: flex-start; display: inline-flex; align-items: center; background: #fff; border-radius: 11px; padding: 8px 14px; }
.step-row { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: all .15s; }
.step-row.active { background: rgba(66,95,173,.22); }
.step-row.todo { cursor: default; }
.step-circle { width: 28px; height: 28px; border-radius: 99px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: all .15s; background: transparent; color: #8B95C0; border: 1.5px solid #3A3F5C; }
.step-row.done .step-circle { background: #425FAD; color: #fff; border: none; }
.step-row.active .step-circle { background: #fff; color: #1E2A52; border: none; }
.step-lbl { font-size: 14px; font-weight: 500; color: #8B95C0; transition: all .15s; }
.step-row.done .step-lbl { color: #AAB4DC; }
.step-row.active .step-lbl { color: #fff; font-weight: 700; }
.svc-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: #fff; border: 1.5px solid #DDE1EC; box-shadow: 0 1px 2px rgba(30,42,82,.04); cursor: pointer; transition: all .15s; }
.svc-card.sel { background: #ECEFFB; border-color: #425FAD; box-shadow: 0 0 0 1.5px #425FAD; }
.radio { width: 22px; height: 22px; border-radius: 99px; flex: none; border: 2px solid #C8CDDE; background: #fff; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.svc-card.sel .radio { border-color: #425FAD; background: #425FAD; }
.radio-dot { width: 10px; height: 10px; border-radius: 99px; background: #fff; }
.date-card { flex: none; width: 62px; padding: 13px 0; border-radius: 14px; text-align: center; cursor: pointer; background: #fff; color: #4A4F6B; border: 1.5px solid #DDE1EC; transition: all .15s; }
.date-card.sel { background: #425FAD; color: #fff; border-color: #425FAD; }
.date-card.off { cursor: not-allowed; background: #F4F5F9; color: #C3C7D6; opacity: .6; }
.time-card { padding: 13px 0; border-radius: 12px; text-align: center; cursor: pointer; font-size: 14px; font-weight: 600; background: #fff; color: #4A4F6B; border: 1.5px solid #DDE1EC; transition: all .15s; }
.time-card.sel { background: #ECEFFB; color: #425FAD; border-color: #425FAD; }
.choice-pill { flex: 1; padding: 13px 8px; border-radius: 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; background: #fff; color: #4A4F6B; border: 1.5px solid #DDE1EC; transition: all .15s; }
.choice-pill.active { background: #ECEFFB; color: #425FAD; border-color: #425FAD; }
/* Grid langkah pembayaran: pertahankan 2 kolom (metode | ringkasan) sampai
   layar cukup sempit, baru menumpuk — supaya ringkasan tidak jadi blok tinggi
   di bawah yang memaksa scroll & memotong judul/ringkasan. */
.pay-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 560px) { .pay-grid { grid-template-columns: 1fr; } }
.dark-pill { font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); padding: 7px 13px; border-radius: 99px; }
.btn-next { padding: 14px 34px; border-radius: 13px; border: none; font-size: 15px; font-weight: 700; cursor: pointer; background: #425FAD; color: #fff; transition: background .2s; box-shadow: 0 8px 20px -8px rgba(66,95,173,.6); margin-left: auto; }
.btn-next:disabled { background: #C3C9DD; cursor: not-allowed; box-shadow: none; }
.btn-back { padding: 13px 22px; border-radius: 13px; border: 1.5px solid #DDE1EC; background: #fff; font-size: 14px; font-weight: 600; color: #4A4F6B; cursor: pointer; }
.bk-foot-pad { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }

/* ── ubah status janji temu manual ── */
.st-cell { position: relative; display: inline-block; }
.st-btn { border: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
          -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Baris yang tidak punya perpindahan sah tetap tampil sebagai badge biasa —
   bukan tombol mati yang mengundang klik lalu diam. */
.st-btn:disabled { cursor: default; }
.st-car { font-size: 9px; opacity: .7; }
.st-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 232px;
           background: #fff; border: 1px solid #E1E5F0; border-radius: 13px; padding: 6px;
           box-shadow: 0 20px 40px -18px rgba(19,25,48,.5); text-align: left; }
.st-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
           border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 13px;
           font-weight: 600; color: #1E2236; }
.st-item:hover { background: #F2F4FA; }
.st-item:disabled { opacity: .5; cursor: wait; }
.st-item small { display: block; font-size: 11.5px; font-weight: 500; color: #8A90A6;
                 line-height: 1.45; margin-top: 2px; white-space: normal; }

/* Kotak alasan menggantikan daftar aksi di dalam menu yang sama, bukan membuka
   modal: yang diketik menempel pada satu baris, dan admin tidak kehilangan
   baris mana yang sedang ia tutup. */
.st-alasan { padding: 4px 5px 5px; }
.st-alasan label { display: block; font-size: 11.5px; font-weight: 600; color: #6B7090; margin-bottom: 6px; }
.st-alasan textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit;
                      font-size: 13px; line-height: 1.5; color: #1E2236; background: #fff;
                      border: 1px solid #E1E5F0; border-radius: 9px; padding: 8px 10px; }
.st-alasan textarea:focus { outline: none; border-color: #425FAD; }
.st-alasan-aksi { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.st-alasan-aksi button { padding: 7px 14px; font-size: 12.5px; border-radius: 9px; }
.st-alasan-aksi button:disabled { opacity: .5; cursor: default; }

@media (max-width: 560px) {
  /* Tabelnya menggulir mendatar; menu yang menggantung di dalamnya akan
     terpotong. Di layar sempit ia menempel ke tepi kanan sel dan menyempit. */
  .st-menu { min-width: 190px; }
}

/* ── log waktu sesi & kartu bukti pelaksanaan ── */
.log-jadwal { background: #F6F8FE; border: 1px solid #E3E8F6; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.log-jadwal > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: #6B7090; }
.log-jadwal > div + div { margin-top: 5px; }
.log-jadwal b { color: #1E2236; font-weight: 700; text-align: right; }
.log-paket { color: #8A90A6; font-weight: 500; }
.log-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.log-jam { display: flex; gap: 6px; align-items: center; }
.log-jam .inp-sm { flex: 1; min-width: 0; }
/* Tombol "Sekarang": jam realisasi paling sering diisi TEPAT saat kejadian,
   dan mengetik empat digit di ponsel sambil menyambut klien adalah cara log
   ini tidak pernah terisi. */
.log-now { flex: none; border: 1.5px solid #E3E6F0; background: #fff; color: #425FAD; border-radius: 9px;
           padding: 9px 10px; font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; }
.log-now:hover { border-color: #425FAD; background: #F6F8FE; }
.log-saran { margin-top: 10px; background: #FFF6E5; border: 1px solid #F3E2BE; color: #8A6100;
             font-size: 12px; line-height: 1.55; padding: 9px 12px; border-radius: 10px; }
.log-hitung { margin-top: 14px; background: #F1F3FA; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #4A4F6B; }
.log-hitung b { color: #1E2236; }
.log-hitung .over { color: #8A6100; margin-top: 4px; }
.log-hitung .pas { color: #1B7F4B; margin-top: 4px; }

/* Kartu bukti. Kontras tinggi dan padat dengan sengaja: ia dibaca dari FOTO
   layar, sering di ponsel lain, sering di bawah cahaya yang buruk. */
.bukti { border: 2px solid #1E2A52; border-radius: 14px; overflow: hidden; background: #fff; }
.bukti-head { background: #1E2A52; color: #fff; padding: 13px 16px; }
.bukti-brand { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #AAB4DC; }
.bukti-judul { font-size: 14.5px; font-weight: 800; margin-top: 3px; }
.bukti-list { margin: 0; padding: 12px 16px; }
.bukti-list > div { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; line-height: 1.5; }
.bukti-list > div + div { margin-top: 6px; }
.bukti-list dt { color: #6B7090; flex: none; }
.bukti-list dd { margin: 0; color: #1E2236; font-weight: 600; text-align: right; }
.bukti-over { color: #B3261E !important; font-weight: 800 !important; }
.bukti-sep { background: #F1F3FA; border-top: 1px solid #E3E6F0; border-bottom: 1px solid #E3E6F0;
             padding: 7px 16px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
             text-transform: uppercase; color: #6B7090; }
.bukti-catatan { border-top: 1px solid #ECEEF3; padding: 12px 16px; }
.bukti-catatan dt { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A90A6; }
.bukti-catatan p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: #1E2236; }
.bukti-kaki { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
              border-top: 1px solid #ECEEF3; padding: 10px 16px; font-size: 11.5px; color: #8A90A6; }
.bukti-kaki b { color: #4A4F6B; }
.bukti-hint { margin-top: 12px; font-size: 12px; color: #8A90A6; line-height: 1.55; }

@media (max-width: 560px) {
  .log-grid { grid-template-columns: 1fr; }
}

/* ── legenda arti status janji temu ── */
.status-help { flex: none; }
.status-help summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: #425FAD;
                       padding: 9px 13px; border: 1.5px solid #E3E6F0; border-radius: 11px; background: #fff;
                       -webkit-tap-highlight-color: transparent; }
.status-help summary::-webkit-details-marker { display: none; }
.status-help summary:hover { border-color: #C6CEE8; background: #FAFBFE; }
.status-help[open] summary { border-color: #425FAD; }
.status-help-body { margin-top: 10px; padding: 14px 16px; border: 1.5px solid #ECEEF3; border-radius: 13px;
                    background: #FAFBFE; font-size: 12.5px; color: #4A4F6B; line-height: 1.7; }
.status-help-body > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.status-help-body > div + div { margin-top: 7px; }
.status-help-body b { color: #1E2236; }
@media (max-width: 640px) {
  /* Barisnya sendiri di bawah saringan: berbagi baris dengan select status dan
     dua input tanggal akan menyisakan lebar yang tidak cukup untuk apa pun. */
  .status-help { flex: 1 1 100%; order: 9; }
}

/* ── penanda klinik aktif (dashboard admin & psikolog) ── */
.pq-clinic { display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
             background: #F1F3FA; border: 1px solid #E3E6F0; border-radius: 10px;
             padding: 7px 11px 7px 7px; font-size: 12.5px; font-weight: 700; color: #1E2236;
             overflow: hidden; }
.pq-clinic > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-clinic-ini { flex: none; width: 22px; height: 22px; border-radius: 7px; background: #425FAD; color: #fff;
                 display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }
/* Di topbar ponsel ia berbagi baris dengan tombol menu dan logo, jadi ia yang
   mengalah: menyusut lebih dulu, dan namanya dipotong dengan elipsis alih-alih
   mendorong logo keluar layar. */
.pq-clinic.mini { margin-left: auto; min-width: 0; flex: 0 1 auto; padding: 5px 9px 5px 5px; font-size: 12px; }
.pq-clinic.mini .pq-clinic-ini { width: 20px; height: 20px; font-size: 10px; }

/* ── blok waktu praktik (form Tambah Sesi) ── */
.blok-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.blok-row .inp-sm { width: auto; flex: 1 1 0; min-width: 0; }
.blok-sep { color: #9BA0B8; font-weight: 700; flex: none; }
.blok-slot { display: flex; align-items: center; gap: 6px; flex: 0 0 134px; }
.blok-slot .inp-sm { width: 80px; flex: none; }
.blok-slot span { font-size: 11.5px; color: #8A90A6; white-space: nowrap; }
.blok-del { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid #F3D9D7;
            background: #fff; color: #B3261E; font-size: 17px; line-height: 1; cursor: pointer; }
.blok-del:hover { background: #FDF5F4; }
.blok-add { margin-top: 4px; border: 1.5px dashed #C8CDDE; background: #fff; color: #425FAD;
            border-radius: 11px; padding: 9px 14px; font-size: 12.5px; font-weight: 700;
            font-family: inherit; cursor: pointer; }
.blok-add:hover { border-color: #425FAD; background: #F6F8FE; }
/* Hitungan slot yang akan dibuat, ditampilkan SEBELUM Simpan: satu blok
   09:00-17:00 dengan slot 60 menit di lima hari adalah 40 baris jadwal, dan
   angka itu pantas dilihat sebelum dikirim, bukan sesudah. */
.blok-note { font-size: 11.5px; color: #6B7090; margin: 2px 0 8px; min-height: 15px; }

@media (max-width: 560px) {
  .blok-row { flex-wrap: wrap; gap: 8px 6px; }
  .blok-row .inp-sm { flex: 1 1 40%; }
  .blok-slot { flex: 1 1 100%; }
  .blok-slot .inp-sm { flex: 0 0 72px; }
}

/* ── log sistem ── */
.log-row { background: #fff; border: 1px solid #ECEEF3; border-radius: 12px; overflow: hidden; }
.log-head { display: flex; align-items: baseline; gap: 12px; padding: 11px 14px; cursor: pointer; }
.log-head:hover { background: #FAFBFE; }
.log-lvl { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; border: 1px solid;
           border-radius: 99px; padding: 2px 9px; }
.log-time { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #9BA0B8; }
/* Satu baris, dipotong: pesan galat bisa sepanjang paragraf, dan daftar yang
   tiap barisnya setinggi lima baris tidak bisa dipindai mata. */
.log-msg { flex: 1; min-width: 0; font-size: 13px; color: #1E2236; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.log-more { flex: none; color: #9BA0B8; font-size: 15px; line-height: 1; }
.log-detail { margin: 0; padding: 12px 14px 14px; border-top: 1px solid #F0F1F6; background: #FAFBFE;
              font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
              line-height: 1.6; color: #4A4F6B; white-space: pre-wrap; word-break: break-word;
              max-height: 420px; overflow: auto; }

/* ── penanda halaman daftar ── */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px;
         flex-wrap: wrap; margin-top: 14px; }
.pager-info { font-size: 12.5px; color: #8A90A6; }
.pager-nav { display: flex; align-items: center; gap: 10px; }
.pager-nav .btn-white { padding: 8px 14px; font-size: 13px; }
.pager-nav .btn-white:disabled { opacity: .45; cursor: default; }
.pager-page { font-size: 12.5px; font-weight: 600; color: #4A4F6B; white-space: nowrap; min-width: 128px; text-align: center; }
.pager-error { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 11px 13px;
               border: 1px solid #F3D9D7; background: #FCE9E7; border-radius: 11px;
               font-size: 12.5px; color: #B3261E; line-height: 1.55; }
.pager-error button { border: none; background: none; color: #B3261E; font-size: 15px; line-height: 1;
                      cursor: pointer; flex: none; }

/* ── layanan klinik ── */
.svc-tag { background: #EEF1FA; color: #425FAD; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.svc-mati { background: #FBECEA; color: #B3261E; }
/* Pilihan psikolog: chip yang bisa ditekan, bukan <select multiple> — daftar
   berisi 5–22 nama, dan multi-select bawaan menuntut orang menahan Ctrl untuk
   memilih dua, yang tidak pernah ditemukan sendiri oleh siapa pun. */
.svc-pick { border: 1.5px solid #E1E5F0; background: #fff; color: #4A4F6B; border-radius: 99px;
            padding: 7px 13px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.svc-pick:hover { border-color: #C3CBE6; }
.svc-pick.on { background: #425FAD; border-color: #425FAD; color: #fff; }

/* ── riwayat klien ── */
/* Nomor register bukan lagi label: ia pintu ke riwayat orangnya. Digarisbawahi
   putus-putus, bukan solid — cukup untuk terbaca sebagai bisa-diklik tanpa
   berteriak seperti tautan di tengah tabel yang penuh angka. */
.reg-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700;
            color: #425FAD; background: none; border: none; padding: 0; cursor: pointer;
            text-decoration: underline dotted; text-underline-offset: 3px; }
.reg-link:hover { text-decoration: underline solid; }
.riw-stat { background: #F2F5FD; border: 1px solid #DDE3F2; border-radius: 10px; padding: 7px 12px;
            font-size: 12.5px; color: #42496B; }
.riw-stat b { color: #1E2236; font-weight: 800; }
.riw-sesi { border: 1px solid #ECEEF3; border-radius: 13px; padding: 13px 15px; }
.riw-sesi + .riw-sesi { margin-top: 10px; }
.riw-berkas { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px;
              border: 1px solid #DDE3F2; border-radius: 9px; background: #F6F8FE; color: #425FAD;
              font-size: 12px; font-weight: 700; text-decoration: none; }
.riw-berkas:hover { border-color: #425FAD; background: #ECEFFB; }

/* ── dokumen encounter ── */
.doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1.5px solid #ECEEF3;
           border-radius: 13px; background: #fff; }
/* Berkas yang hilang tetap ditampilkan, tapi jelas-jelas redup dan tanpa aksi:
   kliennya mengirim sesuatu yang sekarang tidak ada lagi, dan daftar yang
   diam-diam lebih pendek lebih menyesatkan daripada celah yang terlihat. */
.doc-row.gone { background: #FAFAFC; border-style: dashed; }
.doc-row.gone .doc-name { color: #9BA0B8; }
.doc-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: #F1F3FA; color: #6B7186;
          display: flex; align-items: center; justify-content: center; }
.doc-name { font-size: 13.5px; font-weight: 700; color: #1E2236; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: 11.5px; color: #8A90A6; margin-top: 2px; }
.doc-gone { color: #B3261E; font-weight: 600; }
.doc-act { display: flex; align-items: center; gap: 6px; flex: none; }
.doc-btn { border: 1.5px solid #E3E6F0; background: #fff; color: #4A4F6B; border-radius: 9px;
           padding: 7px 10px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
           text-decoration: none; line-height: 1; white-space: nowrap;
           -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.doc-btn:hover { border-color: #C6CEE8; background: #FAFBFE; }
.doc-btn:active { transform: scale(.97); }
.doc-btn:disabled { opacity: .5; cursor: wait; }
.doc-btn.danger { color: #B3261E; border-color: #F3D9D7; }
.doc-btn.danger:hover { background: #FDF5F4; border-color: #E9BDB9; }

@media (max-width: 640px) {
  /* Di ponsel baris dokumen menumpuk: tiga tombol + nama berkas di satu baris
     360px memaksa namanya jadi tiga huruf lalu elipsis. */
  .doc-row { flex-wrap: wrap; }
  .doc-act { width: 100%; padding-left: 50px; }
  .doc-btn { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── booking: chrome ala aplikasi ──
   Elemen di bawah ini punya bentuk desktop yang netral dan bentuk penuhnya di
   media query layar sentuh. Bagian hero sengaja disembunyikan di desktop:
   di sana sidebar gelap sudah mengerjakan tugas yang sama dengan lebih baik. */
.bk-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-open-eyebrow { display: none; }
.bk-hero-staff { display: none; }
.bk-hero-id, .bk-hero-trust { display: none; }

/* Kartu profesional. Dulu <div> polos tanpa satu pun tanda bahwa ia membuka
   halaman berikutnya — sekarang tombol sungguhan, dengan chevron dan status
   tekan yang membalas sentuhan. */
.psy-card {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px; border: 1.5px solid #E6E9F2; border-radius: 14px; background: #fff;
  font-family: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.psy-card:hover { border-color: #C6CEE8; box-shadow: 0 6px 16px -10px rgba(30,42,82,.45); }
.psy-card:active { transform: scale(.985); background: #FAFBFE; }
.psy-card:focus-visible { outline: none; border-color: #425FAD; box-shadow: 0 0 0 3px rgba(66,95,173,.18); }
.psy-card:disabled { opacity: .55; cursor: wait; }
.psy-card-av {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex;
  align-items: center; justify-content: center; background: #ECEFFB; color: #425FAD;
  font-weight: 800; font-size: 14px;
}
.psy-card-txt { min-width: 0; flex: 1; }
.psy-card-name { font-size: 14.5px; font-weight: 700; color: #1E2236; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psy-card-spec { font-size: 12.5px; color: #8A90A6; margin-top: 2px; }
.psy-card-go { flex: none; color: #C3C9DD; transition: color .15s, transform .15s; }
.psy-card:hover .psy-card-go { color: #425FAD; transform: translateX(2px); }

/* Sentuhan harus terasa dibalas. Tanpa ini setiap kartu & pil di alur ini
   diam saja saat ditekan, dan di jaringan lambat orang menekannya berkali-kali
   karena mengira tekanannya tidak masuk. */
.svc-card, .date-card, .time-card, .choice-pill, .btn-next, .btn-back, .step-row {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.svc-card:active, .date-card:not(.off):active, .time-card:active, .choice-pill:active { transform: scale(.98); }
.btn-next:not(:disabled):active { transform: scale(.985); background: #37509A; }
.btn-back:active { transform: scale(.985); background: #F4F6FB; }

/* Bar progres langkah — hanya untuk layar kecil, dinyalakan di media query. */
.bk-progress { display: none; height: 5px; border-radius: 99px; background: #E7EAF4; margin-top: 12px; overflow: hidden; }
.bk-progress-fill { height: 100%; border-radius: 99px; background: #425FAD; transition: width .28s ease; }

/* booking responsif: sidebar gelap disembunyikan, kartu jadi satu kolom penuh */
@media (max-width: 900px) {
  .bk-wrap { padding: 0; align-items: stretch; }
  /* overflow: visible — BUKAN kelalaian. `overflow: hidden` menjadikan kartu
     ini wadah gulir tersendiri, dan footer position: sticky di dalamnya akan
     menempel pada dasar KARTU (yang lebih tinggi dari layar) alih-alih pada
     dasar layar — artinya tidak menempel sama sekali. Sudutnya sudah lurus di
     sini, jadi tidak ada yang perlu dipotong. */
  .bk-card { flex-direction: column; height: auto; min-height: 100vh; border-radius: 0; box-shadow: none; width: 100%; overflow: visible; }
  /* Kepala gelap ini terulang di SETIAP langkah. Di layar 844px ia dulu
     memakan seperlima layar sebelum satu baris isi pun terlihat — dirampingkan
     tanpa menghilangkan yang berguna: siapa psikolognya tetap terbaca, karena
     itulah satu-satunya konfirmasi bahwa orang memesan ke orang yang benar. */
  .bk-side { width: 100% !important; padding: calc(14px + env(safe-area-inset-top)) 20px 14px !important; }
  .bk-side .logo-chip { padding: 6px 11px; }
  .bk-side .logo-chip img { height: 18px !important; }
  .bk-psy-chip { margin-top: 12px !important; padding: 9px 10px !important; }
  .bk-psy-chip .avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; border-radius: 10px !important; }
  /* !important wajib: dua di antara blok ini memakai `display:flex` sebaris
     (avatar besar + nama di layar pembuka, daftar langkah di wizard), dan
     style sebaris mengalahkan stylesheet. Tanpa ini aturannya tidak pernah
     bekerja — blok gelap dekoratif tetap memakan hampir 60% layar pertama
     sebelum ada satu pun hal yang bisa ditekan. */
  .bk-side .bk-side-detail { display: none !important; }
  /* Halaman digulir sebagai satu kesatuan. Sebelumnya area isi punya
     `overflow-y: auto` sendiri di dalam kartu setinggi layar: di ponsel itu
     berarti dua daerah gulir bersarang — jari yang menggulir di dekat tepi
     menggerakkan yang salah, dan bar alamat peramban tidak pernah menyusut. */
  /* justify-content juga dipaksa: layar pembuka memusatkan isinya secara
     vertikal (masuk akal pada kartu setinggi 760px di desktop), tapi di ponsel
     itu menyisakan rongga 180px antara hero dan judul, dan kartu pertama
     terdorong ke separuh bawah layar. */
  .bk-main-pad { padding: 20px 20px 24px !important; overflow: visible !important;
                 flex: 1 1 auto !important; justify-content: flex-start !important; }
  .bk-head-pad { padding: 22px 20px 14px !important; }
  .grid-2col { grid-template-columns: 1fr !important; }
  .bk-progress { display: block; }

  /* Tombol lanjut menempel di dasar layar.

     Sebelumnya ia duduk di ujung halaman. Pada langkah Data Diri dan Detail
     Keluhan itu berarti menggulir melewati seluruh form untuk menemukannya,
     dan sampai saat itu layarnya terbaca seperti form tanpa tombol kirim —
     kegagalan yang paling mahal justru bagi pengguna yang paling awam. */
  .bk-foot-pad {
    position: sticky; bottom: 0; z-index: 5;
    background: #fff;
    flex-wrap: wrap;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -10px 24px -18px rgba(30,42,82,.65);
  }
  /* Aksi utama mengisi sisa lebar; "Kembali" menyusut jadi pendamping di kiri.
     Keduanya tetap setinggi jempol (>=48px) dan aksi utamanya duduk di kanan,
     tempat ibu jari berada pada genggaman satu tangan. */
  .bk-foot-pad .btn-next { flex: 1 1 auto; min-height: 50px; padding: 15px 20px; font-size: 15.5px; }
  .bk-foot-pad .btn-back { flex: 0 0 auto; min-height: 50px; padding: 15px 18px; }
  /* Galat mendapat barisnya sendiri di ATAS tombol. Terjepit di antara dua
     tombol pada layar 360px, kalimatnya pecah jadi satu kata per baris. */
  .bk-foot-err { order: -1; flex: 0 0 100% !important; text-align: left !important; }

  /* iOS Safari memperbesar seluruh halaman begitu fokus masuk ke kolom yang
     fontnya di bawah 16px, lalu tidak pernah mengembalikannya: kolom
     berikutnya sudah setengah di luar layar sebelum orang sempat mengetik.
     Sebagian kolom di sini memakai style sebaris, yang mengalahkan aturan
     biasa — karena itu !important. */
  .bk-card input, .bk-card textarea, .bk-card select { font-size: 16px !important; }

  /* Strip tanggal dibiarkan menyentuh kedua tepi layar supaya terlihat masih
     ada lanjutannya, dan berhenti pas di kartu, bukan di antara dua kartu. */
  .date-strip {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin-left: -20px; margin-right: -20px;
    padding-left: 20px; padding-right: 20px;
    scrollbar-width: none;
  }
  .date-strip::-webkit-scrollbar { display: none; }
  .date-strip .date-card { scroll-snap-align: center; width: 68px; padding: 14px 0; }

  /* Kolom jam 96px menyisakan lajur ketiga yang terpotong di layar 360px.
     88px memuat tiga penuh, dan tiap kartunya tetap setinggi jempol. */
  .time-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; max-width: none !important; }
  .time-card { padding: 15px 0; }

  .svc-card { padding: 16px 14px; }

  /* Hero layar pembuka: identitas klinik di kepala gelap, lalu isi putih yang
     menumpang naik di atasnya. Sebelumnya kepala itu berisi logo lalu ruang
     kosong, dan halaman terbaca rata tanpa kedalaman sama sekali. */
  /* TANPA lengkung bawah: lembar putih di bawahnya yang melengkung dan naik
     menutupi hero. Melengkungkan keduanya menyisakan dua "kuping" navy di
     sudut kiri-kanan — dua segitiga kecil yang terbaca seperti cacat render. */
  /* Padding atas-bawah dibuat setara (18/18). Sebelumnya 14 atas dan 22 bawah:
     selisih delapan piksel itu tidak terbaca sebagai "atasnya lebih rapat",
     melainkan sebagai blok yang miring — dan logonya mepet ke tepi layar.

     Bawahnya 32, bukan 18, karena lembar putih di bawahnya menumpang naik
     14px menutupi hero (lihat .bk-side-open + .bk-main). Angka 18 yang ditulis
     apa adanya di sini menyisakan celah nyata 4px, dan baris "Data Anda
     rahasia" nyaris tersenggol lengkung lembar itu. 32 − 14 = 18 yang benar-
     benar terlihat. */
  .bk-side-open { padding: calc(18px + env(safe-area-inset-top)) 20px 32px !important;
                  background: linear-gradient(160deg, #24336180 0%, transparent 60%), #1E2A52; }
  /* padding untuk jempol, margin negatif untuk mata.
     Tanpa margin itu tepi huruf "Masuk" berhenti 24px dari tepi layar
     sementara plakat logo bermula di 20px — kolom kanan dan kiri tidak
     segaris, dan itu terbaca sebagai kesalahan meski tidak ada yang bisa
     menunjuk apa. Daerah sentuhnya tetap melebar sampai 24px. */
  .bk-hero-staff { display: inline-flex; align-items: center; color: #8B95C0;
                   font-size: 12.5px; font-weight: 600; text-decoration: none;
                   padding: 10px 4px; margin-right: -4px; min-height: 36px;
                   -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .bk-hero-staff:active { color: #fff; }
  /* Irama vertikal, bukan jarak seragam.
     Sebelumnya 18 / 16 / 22 — tiga jeda yang hampir sama besar, sehingga baris
     logo, identitas klinik, dan jaminan kerahasiaan terbaca sebagai tiga hal
     setara. Padahal dua yang terakhir satu kesatuan: yang kedua menerangkan
     yang pertama. Jadi jeda besar SEBELUM identitas, jeda kecil sesudahnya. */
  .bk-hero-id { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
  .bk-hero-avatar { width: 46px; height: 46px; border-radius: 14px; flex: none; display: flex;
                    align-items: center; justify-content: center; background: #425FAD; color: #fff;
                    font-weight: 800; font-size: 17px; box-shadow: 0 10px 22px -10px rgba(0,0,0,.55); }
  .bk-hero-name { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bk-hero-sub { font-size: 12.5px; color: #AAB4DC; margin-top: 2px; }
  .bk-hero-trust { display: flex; align-items: center; gap: 7px; margin-top: 10px;
                   color: #8B95C0; font-size: 12px; font-weight: 500; }
  /* Ikon gemboknya digambar dengan inset ~2px di dalam viewBox-nya sendiri,
     jadi meski kotaknya bermula di x=20 seperti avatar dan plakat logo, GARIS
     yang terlihat mata bermula di x=22. Dua piksel itu justru yang membuat
     kolomnya terasa tidak lurus — mata membaca tepi tinta, bukan tepi kotak. */
  .bk-hero-trust > svg { margin-left: -2px; }
  /* Isi putih menumpang naik menutupi lengkung hero — inilah yang memberi
     halaman ini satu lapisan kedalaman, bukan sekadar dua blok bertumpuk. */
  .bk-side-open + .bk-main { margin-top: -14px; background: #fff;
                             border-top-left-radius: 22px; border-top-right-radius: 22px;
                             position: relative; z-index: 1; }
  /* Pintu staf yang lama sudah pindah ke hero; yang di sini tinggal dibuang. */
  .bk-staff-link { display: none !important; }
  .bk-open-chip, .bk-open-lead { display: none !important; }
  /* Bukan serif.
     Aturannya sudah ditulis di berkas ini untuk .lp-h1: "landing dan dashboard
     harus terbaca sebagai satu produk", dan judul ini melanggarnya sendirian —
     satu-satunya Newsreader di seluruh alur pemesanan, tepat di layar pertama
     yang dilihat pasien. Yang tersisa dari serif cuma kesan bahwa halaman ini
     dirakit dari dua desain berbeda. */
  .bk-open-title { font-family: inherit !important; font-size: 25px !important; font-weight: 800 !important;
                   letter-spacing: -.025em !important; margin: 2px 0 4px !important; line-height: 1.22 !important; }
  /* Label bagian: memberi daftar di bawahnya awalan yang jelas, dan mengisi
     jarak yang tadinya kosong antara judul dan kartu pertama. */
  .bk-open-eyebrow { display: flex !important; align-items: center; gap: 8px;
                     font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
                     color: #8A90A6; margin: 22px 0 11px; }
  .bk-open-eyebrow::after { content: ""; flex: 1; height: 1px; background: #ECEEF3; }
  /* Jarak judul→daftar dijepit: dua margin bertumpuk (pembungkus daftar 22px
     + label bagian 22px) menyisakan 60px kosong di layar pertama, dan setiap
     piksel di situ adalah satu kartu profesional yang tidak terlihat. */
  .bk-open-list { margin-top: 0 !important; }
  .bk-open-eyebrow { margin-top: 20px !important; }
  .psy-card { padding: 15px 14px; border-radius: 15px; }
  .psy-card-av { width: 46px; height: 46px; }
  .bk-staff-link-off { padding: 14px 20px 0 !important; }
  .bk-staff-link a { background: transparent !important; color: #8A90A6 !important; font-size: 12.5px !important; padding: 6px 0 !important; }
  .choice-pill { min-height: 48px; }
}

@media (max-width: 380px) {
  .bk-main-pad { padding: 18px 16px 22px !important; }
  .bk-head-pad { padding: 20px 16px 12px !important; }
  .bk-side { padding: 16px 16px !important; }
  .bk-foot-pad { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; }
  .date-strip { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* ── landing publik ('/') ──
   Halaman ini tidak memakai .auth-wrap/.bk-wrap: keduanya mengunci tinggi ke
   satu kartu layar penuh, sedangkan landing memang perlu di-scroll. */
/* z-index 60, bukan 30: dropdown "Masuk" menggantung keluar dari navbar, dan
   kartu mockup di hero (z-index 1 di dalam .lp-hero) menimpanya kalau navbar
   tidak duduk di atas seluruh isi halaman. */
.lp-nav { position: sticky; top: 0; z-index: 60; background: rgba(30,42,82,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
/* padding-inline, BUKAN shorthand `padding: 0 24px`.
   .lp-in dipakai bersamaan dengan kelas lain yang mengatur padding atas-bawah
   sendiri (.lp-hero-row, .lp-foot-row). Shorthand di sini menghapus keduanya
   jadi 0 kapan pun aturan .lp-in kebetulan berada LEBIH BELAKANG di berkas —
   spesifisitasnya sama, jadi urutan yang menentukan. Persis itu yang terjadi
   di layar sempit: padding bawah hero hilang, dan baris statistik menempel
   rapat ke batas seksi berikutnya sehingga terbaca seperti terpotong. */
.lp-in { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 24px; }
.lp-nav-row { display: flex; align-items: center; gap: 18px; height: 72px; }
.lp-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 11px; padding: 8px 14px; flex: none; }
.lp-logo img { height: 26px; width: auto; display: block; }
.lp-links { display: flex; align-items: center; gap: 26px; margin-left: 14px; }
.lp-link { font-size: 14px; font-weight: 500; color: #AAB4DC; text-decoration: none; transition: color .15s; }
.lp-link:hover { color: #fff; }
.lp-nav-act { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Pemilih bahasa landing. Dua TAUTAN biasa (?lang=en / ?lang=id), bukan tombol
   JavaScript: pilihan bahasa harus tetap bekerja sebelum Alpine dimuat, dan
   alamatnya bisa dibagikan apa adanya ke orang lain. */
.lp-lang { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 3px; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.lp-lang a { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #AAB4DC; text-decoration: none; transition: all .15s; }
.lp-lang a:hover { color: #fff; }
.lp-lang a[aria-current="true"] { background: #fff; color: #1E2A52; }
.lp-btn { display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 12px; padding: 11px 18px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: all .15s; white-space: nowrap; }
.lp-btn.ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.lp-btn.ghost:hover { background: rgba(255,255,255,.18); }
.lp-btn.solid { background: #425FAD; color: #fff; box-shadow: 0 8px 20px -8px rgba(66,95,173,.7); }
.lp-btn.solid:hover { background: #3A54A0; }
.lp-btn.green { background: #1F6F63; color: #fff; box-shadow: 0 8px 20px -8px rgba(31,111,99,.7); }
.lp-btn.green:hover { background: #1A5E54; }
.lp-btn.light { background: #fff; color: #1E2A52; }
.lp-btn.light:hover { background: #EEF1F9; }
.lp-btn.lg { padding: 15px 26px; font-size: 15px; border-radius: 14px; }

/* Dropdown "Masuk" di navbar landing. Satu tombol, peran dipilih di dalamnya. */
.lp-menu { position: relative; }
/* Label panjang/pendek tombol Masuk — ditukar di media query layar sempit. */
.lp-sign-short { display: none; }
.lp-menu-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 288px; background: #fff; border: 1px solid #E1E5F0; border-radius: 16px; padding: 7px; box-shadow: 0 24px 48px -20px rgba(19,25,48,.55); }
.lp-menu-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; text-decoration: none; transition: background .13s; }
.lp-menu-item:hover { background: #F2F4FA; }
.lp-menu-item strong { display: block; font-size: 14px; font-weight: 700; color: #1E2236; }
.lp-menu-item small { display: block; font-size: 12px; color: #6B7090; margin-top: 2px; line-height: 1.4; }
.lp-menu-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #ECEFFB; color: #425FAD; display: flex; align-items: center; justify-content: center; }
.lp-menu-ico.teal { background: #E4F3F1; color: #1F6F63; }
@media (max-width: 640px) { .lp-menu-pop { width: 260px; } }

.lp-hero { background: #1E2A52; position: relative; overflow: hidden; }
.lp-hero .blob { position: absolute; border-radius: 99px; pointer-events: none; }
.lp-hero-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; padding: 74px 0 86px; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #C6CEEC; font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 99px; }
/* Judul memakai keluarga yang sama dengan seluruh produk (Plus Jakarta Sans),
   bukan serif display: landing dan dashboard harus terbaca sebagai satu produk. */
.lp-h1 { font-weight: 800; font-size: 50px; line-height: 1.08; color: #fff; letter-spacing: -.035em; }
.lp-h1 em { font-style: normal; color: #5BC4BC; }
.lp-lead { font-size: 15.5px; line-height: 1.7; color: #AAB4DC; margin-top: 20px; max-width: 480px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lp-stats { display: flex; gap: 34px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.lp-stat b { display: block; font-size: 24px; font-weight: 800; color: #fff; }
.lp-stat span { display: block; font-size: 12px; color: #8B95C0; margin-top: 3px; }

/* Pratinjau alur booking yang berjalan sendiri. Isinya sengaja berupa batang
   abu (skeleton), bukan nama klinik/psikolog karangan: yang diperagakan adalah
   ALURNYA, dan data aslinya ada di daftar klinik sungguhan di bawah. */
.lp-demo { background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 40px 90px -30px rgba(10,18,45,.7); }
.lp-demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-demo-title { font-size: 15px; font-weight: 800; color: #1E2236; letter-spacing: -.01em; }
.lp-demo-count { font-size: 12px; font-weight: 700; color: #A3A9C0; }
.lp-rail { display: flex; gap: 6px; margin-top: 14px; }
.lp-rail i { flex: 1; height: 4px; border-radius: 99px; background: #EDEFF6; transition: background .4s ease; }
.lp-rail i.on { background: #425FAD; }
/* Panel langkah ditumpuk absolut supaya kartunya tidak melonjak tinggi tiap
   pergantian. Pergantiannya transisi CSS biasa yang digerakkan satu kelas —
   BUKAN x-transition: mesin transisi Alpine berjalan di atas rAF, dan di tab
   yang tidak aktif rAF dibekukan browser sehingga panel bisa tertinggal
   setengah tampil (dua langkah terlihat sekaligus saat tab dibuka lagi). */
.lp-demo-body { position: relative; margin-top: 20px; min-height: 262px; }
.lp-pane { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .38s ease, transform .38s ease; }
.lp-pane.on { opacity: 1; transform: none; }
.lp-row { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1.5px solid #E7EAF3; border-radius: 14px; transition: border-color .3s, background .3s, box-shadow .3s; }
.lp-row + .lp-row { margin-top: 10px; }
.lp-row.sel { border-color: #425FAD; background: #F6F8FE; box-shadow: 0 0 0 1.5px #425FAD; }
.lp-thumb { width: 40px; height: 40px; border-radius: 13px; background: #ECEFFB; flex: none; }
.lp-thumb.bulat { border-radius: 99px; }
.lp-fill { flex: 1; min-width: 0; }
.sk { height: 9px; border-radius: 6px; background: #E4E8F4; }
.sk.s2 { height: 8px; margin-top: 8px; background: #EFF1F8; }
.lp-tick { width: 22px; height: 22px; border-radius: 99px; border: 2px solid #D8DDEC; flex: none; display: flex; align-items: center; justify-content: center; color: transparent; transition: all .3s; }
.lp-row.sel .lp-tick, .lp-pro.sel .lp-tick { border-color: #425FAD; background: #425FAD; color: #fff; }
.lp-pros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-pro { border: 1.5px solid #E7EAF3; border-radius: 14px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: border-color .3s, background .3s, box-shadow .3s; }
.lp-pro.sel { border-color: #425FAD; background: #F6F8FE; box-shadow: 0 0 0 1.5px #425FAD; }
.lp-meta { font-size: 12.5px; font-weight: 700; color: #6B7090; white-space: nowrap; }
.lp-demo-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A3A9C0; }
.lp-chips { display: flex; gap: 8px; margin-top: 10px; }
.lp-chip { flex: 1; text-align: center; padding: 11px 0; border-radius: 12px; border: 1.5px solid #E7EAF3; font-size: 12.5px; font-weight: 700; color: #4A4F6B; line-height: 1.35; transition: all .3s; }
.lp-chip.sel { background: #425FAD; border-color: #425FAD; color: #fff; }
.lp-chip.soft.sel { background: #ECEFFB; border-color: #425FAD; color: #425FAD; }
.lp-done { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; }
.lp-done-ring { width: 62px; height: 62px; border-radius: 99px; background: #E6F4EE; color: #1F8A5B; display: flex; align-items: center; justify-content: center; animation: rtpop .45s ease; }

/* nav-nya sticky, jadi lompatan #anchor harus menyisakan ruang setinggi nav
   supaya judul seksi tidak tersembunyi di baliknya. */
.lp-sec { padding: 76px 0; scroll-margin-top: 72px; }

/* daftar klinik di landing = langkah "pilih klinik" milik pasien */
.lp-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.lp-head-row .lp-sec-head { margin-bottom: 0; }
.lp-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #DDE1EC; border-radius: 14px; padding: 0 16px; height: 50px; width: 340px; max-width: 100%; color: #9BA0B8; }
.lp-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 14.5px; color: #1E2236; }
.lp-clinic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.lp-clinic { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #E4E8F4; border-radius: 18px; padding: 22px; text-decoration: none; box-shadow: 0 1px 2px rgba(30,40,80,.04); transition: transform .15s, box-shadow .15s, border-color .15s; }
.lp-clinic:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(30,42,82,.5); border-color: #C9D3EE; }
.lp-clinic-name { font-size: 16px; font-weight: 700; color: #1E2236; line-height: 1.35; margin-top: 14px; }
.lp-clinic-addr { font-size: 13px; line-height: 1.6; color: #8A90A6; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-clinic-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lp-tag { font-size: 11.5px; font-weight: 700; color: #425FAD; background: #ECEFFB; border-radius: 7px; padding: 4px 9px; }
.lp-clinic-foot { margin-top: auto; padding-top: 16px; }
.lp-clinic-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #F0F1F6; padding-top: 14px; font-size: 13.5px; font-weight: 700; color: #425FAD; }
.lp-empty { grid-column: 1 / -1; text-align: center; color: #9499AE; font-size: 14px; background: #fff; border: 1px dashed #DDE1EC; border-radius: 16px; padding: 40px 20px; }
.lp-sec.alt { background: #F5F6FA; }
.lp-sec-head { max-width: 660px; margin: 0 0 38px; }
.lp-kicker { font-size: 13px; font-weight: 700; color: #425FAD; }
.lp-h2 { font-size: 30px; font-weight: 800; color: #1E2236; letter-spacing: -.03em; margin-top: 8px; line-height: 1.2; }
.lp-p { font-size: 15px; line-height: 1.7; color: #6B7090; margin-top: 12px; }
.lp-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.lp-card { background: #fff; border: 1px solid #ECEEF3; border-radius: 18px; padding: 26px; box-shadow: 0 1px 2px rgba(30,40,80,.04); }
.lp-ico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #ECEFFB; color: #425FAD; }
.lp-ico.teal { background: #E4F5F3; color: #1F6F63; }
.lp-ico.sand { background: #FDEDE6; color: #DC7A4E; }
.lp-card h3 { font-size: 16.5px; font-weight: 700; color: #1E2236; margin-top: 18px; }
.lp-card p { font-size: 14px; line-height: 1.65; color: #6B7090; margin-top: 8px; }

.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: lp; }
.lp-step { background: #fff; border: 1px solid #ECEEF3; border-radius: 18px; padding: 24px; }
.lp-step-no { width: 34px; height: 34px; border-radius: 99px; background: #1E2A52; color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.lp-portals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-portal { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E8F4; border-radius: 20px; padding: 30px; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.lp-portal:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(30,42,82,.55); border-color: #C9D3EE; }
.lp-portal h3 { font-size: 19px; font-weight: 800; color: #1E2236; margin-top: 18px; }
.lp-portal p { font-size: 14px; line-height: 1.65; color: #6B7090; margin-top: 8px; }
.lp-portal-go { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #425FAD; }
.lp-portal.doc .lp-portal-go { color: #1F6F63; }

.lp-foot { background: #1E2A52; color: #8B95C0; padding: 46px 0 38px; }
.lp-foot-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.lp-foot a { color: #AAB4DC; text-decoration: none; font-size: 13.5px; }
.lp-foot a:hover { color: #fff; }
/* Lima tautan sejajar berukuran 371px dan tidak pernah membungkus, jadi di
   layar 360px kaki halaman mendorong SELURUH halaman melebar — dan yang
   terpotong bukan cuma footernya, tapi setiap seksi di atasnya ikut bergeser. */
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 14px 22px; }

@media (max-width: 900px) {
  .lp-hero-row { grid-template-columns: 1fr; gap: 40px; padding: 54px 0 62px; }
  .lp-h1 { font-size: 36px; }
  .lp-head-row { align-items: flex-start; }
  .lp-search { width: 100%; }
  .lp-demo { display: none; }
  .lp-links { display: none; }
  .lp-portals { grid-template-columns: 1fr; }
  .lp-sec { padding: 56px 0; }
  .lp-h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .lp-in { padding-inline: 18px; }
  .lp-nav-row { height: 64px; gap: 10px; }
  .lp-nav-act { gap: 8px; }
  .lp-nav-act .lp-btn { padding: 10px 13px; font-size: 13px; }
  .lp-lang a { padding: 5px 8px; font-size: 12px; }
  /* "Masuk / Cek Hasil" utuh berukuran 188px dan ber-white-space:nowrap.
     Bersama logo dan pemilih bahasa, navbar jadi 425px di layar 390px —
     tombolnya sendiri terpotong di tepi kanan, yang berarti pintu masuk satu-
     satunya di halaman ini setengah tidak terlihat. Menu yang terbuka tepat di
     bawahnya toh langsung menyebut kedua pintunya ("Cek Hasil" dan
     "Psikolog"), jadi label pendek di sini tidak menjanjikan lebih sedikit. */
  .lp-sign-long { display: none; }
  .lp-sign-short { display: inline; }
  /* Tiga kolom sejajar menyisakan 50px untuk yang pertama: "Clinics listed"
     pecah jadi dua baris di sebelah angka yang tingginya satu baris. Grid dua
     kolom memberi tiap butir lebar yang cukup untuk dibaca sekali lihat. */
  .lp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 34px; }
  .lp-stat b { font-size: 21px; }
  .lp-cta .lp-btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 400px) {
  /* Logo boleh menyusut lebih dulu daripada tombolnya: ia dekorasi, tombolnya
     jalan masuk. */
  .lp-logo { padding: 7px 10px; }
  .lp-logo img { height: 22px; }
  .lp-in { padding-inline: 14px; }
}

/* ── display untuk elemen ber-x-show ──
   Alpine menampilkan elemen dengan MENGHAPUS properti `display` dari style
   inline-nya (`el.style.removeProperty('display')`), bukan mengembalikan nilai
   semula. Akibatnya `style="display:flex"` pada elemen ber-`x-show` ikut lenyap
   begitu elemen itu ditampilkan, dan tata letaknya jatuh ke `block`: footer
   harga/CTA di halaman booking menumpuk & mepet, grid jam dan grid pembayaran
   berubah jadi tumpukan. Karena itu `display` untuk elemen ber-x-show wajib
   datang dari kelas — hanya style inline yang bisa dihapus Alpine. */
.fx { display: flex; }
.fx-col { display: flex; flex-direction: column; }
.gr { display: grid; }

/* Tombol unduh laporan (halaman Reports). Warnanya sama dengan tombol Export
   lama supaya tidak terbaca sebagai tombol yang berbeda oleh orang yang sudah
   terbiasa dengan letaknya. */
.btn-export { display: inline-flex; align-items: center; gap: 8px; background: #1F8A5B; color: #fff; border: none; border-radius: 11px; padding: 11px 18px; font-size: 14px; font-weight: 600; font-family: inherit; }

/* Peringatan "saringan ini hanya atas baris yang termuat". Sengaja sewarna
   dengan kotak peringatan di halaman Appointments — orang yang sudah pernah
   membacanya di sana tidak perlu membaca ulang untuk tahu artinya. */
.filter-warn { font-size: 12.5px; color: #9A6B00; background: #FFF6E5; border: 1px solid #F3E2BE; border-radius: 10px; padding: 9px 13px; margin-bottom: 14px; line-height: 1.5; }