/* ============================================================
   RSU WAJAK HUSADA — BOOKING ONLINE (hub, registrasi, login, booking)
   Melengkapi assets/css/patient.css. Oranye · biru tua · putih.
   ============================================================ */
.bk-main{padding:28px 0 60px;overflow:hidden}
/* Reset ringan (halaman ini tidak memuat reset.css) */
.bk-main a{text-decoration:none;color:inherit}
.bk-main .breadcrumb a{color:#6b7480}
.bk-main .breadcrumb a:hover{color:var(--p-orange)}
.bk-main .bk-switch a,.bk-main .bk-alert a{text-decoration:underline}
.bk-main .bk-switch a{color:var(--p-orange)}
.bk-main input,.bk-main select,.bk-main textarea,.bk-main button{font-family:'Roboto',Arial,sans-serif}
.bk-main .secondary-btn{color:var(--p-orange)}
.bk-main .primary-btn,.bk-main .wa-btn{color:#fff}
.bk-main .radio{line-height:1.3}
.bk-wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.bk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- HUB ---------- */
.bk-hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:center;margin-bottom:34px}
.bk-hero h1{font-family:'Oswald',sans-serif;font-size:clamp(32px,4.6vw,52px);line-height:1.06;color:var(--p-navy);margin:10px 0 14px;text-transform:uppercase}
.bk-hero h1 span{color:var(--p-orange);display:block}
.bk-hero p{color:#526071;font-size:15.5px;line-height:1.7;margin:0 0 22px;max-width:520px}
.bk-illus{position:relative;border-radius:24px;padding:26px;background:linear-gradient(140deg,#fff3ea,#eef7fc);border:1px solid #edf0f3;overflow:hidden;min-height:260px}
.bk-illus::after{content:"";position:absolute;right:-80px;top:-90px;width:260px;height:260px;border-radius:50%;border:44px solid var(--p-orange);opacity:.08}
.bk-illus-card{position:relative;z-index:1;background:#fff;border-radius:16px;box-shadow:0 14px 34px rgba(23,34,53,.10);padding:16px 18px;display:flex;gap:12px;align-items:center;max-width:300px}
.bk-illus-card+.bk-illus-card{margin:14px 0 0 auto}
.bk-illus-card i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--p-orange-soft);color:var(--p-orange);font-size:19px;flex:none}
.bk-illus-card strong{display:block;color:var(--p-navy);font-size:14px}
.bk-illus-card span{font-size:12px;color:var(--p-muted)}
.bk-illus-big{position:relative;z-index:1;display:grid;place-items:center;margin:18px auto 4px;width:120px;height:120px;border-radius:50%;background:#fff;box-shadow:0 14px 34px rgba(255,101,15,.18);color:var(--p-orange);font-size:52px}

.bk-options{display:flex;flex-direction:column;gap:14px}
.bk-option{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:#fff;border:1px solid var(--p-line);border-radius:18px;padding:18px 20px;cursor:pointer;text-decoration:none;color:inherit;font:inherit;
  box-shadow:0 6px 20px rgba(23,34,53,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.bk-option:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(23,34,53,.12);border-color:#ffc9a6}
.bk-option:focus-visible{outline:3px solid #ffb98e;outline-offset:2px}
.bk-option-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:24px;flex:none}
.bk-option-icon.new{background:var(--p-orange-soft);color:var(--p-orange)}
.bk-option-icon.old{background:#e8f2fd;color:#168bea}
.bk-option-icon.jkn{background:#e6f7ee;color:#0b8f55}
.bk-option-body{flex:1;min-width:0}
.bk-option-body strong{display:block;font-size:17px;color:var(--p-navy);margin-bottom:3px}
.bk-option-body span{display:block;font-size:13px;color:var(--p-muted);line-height:1.5}
.bk-option-go{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--p-orange);color:#fff;font-weight:700;font-size:13px;border-radius:24px;padding:10px 16px;white-space:nowrap}
.bk-option-go.alt{background:#0b8f55}

.bk-prep{padding:24px;margin-bottom:22px}
.bk-prep h2{font-size:19px;color:var(--p-navy);margin:0 0 16px;display:flex;gap:10px;align-items:center}
.bk-prep h2 i{color:var(--p-orange)}
.bk-prep-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bk-prep-item{display:flex;gap:11px;align-items:flex-start;background:var(--p-soft);border-radius:14px;padding:14px}
.bk-prep-item i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--p-orange);flex:none}
.bk-prep-item strong{display:block;font-size:13px;color:var(--p-navy);margin-bottom:3px}
.bk-prep-item span{display:block;font-size:12px;color:var(--p-muted);line-height:1.5}
.bk-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- Form pages ---------- */
.bk-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.bk-card{padding:26px}
.bk-card h2{font-size:20px;color:var(--p-navy);margin:0 0 6px;display:flex;align-items:center;gap:10px}
.bk-card h2 i{color:var(--p-orange)}
.bk-card .bk-lead{color:var(--p-muted);font-size:13.5px;margin:0 0 18px;line-height:1.6}
.bk-alert{border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.55;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.bk-alert i{margin-top:2px}
.bk-alert.err{background:#fdecec;color:#a52f2f;border:1px solid #f4caca}
.bk-alert.warn{background:#fff7e8;color:#8a5a00;border:1px solid #ffe0a3}
.bk-alert.ok{background:#eafaf2;color:#106b46;border:1px solid #c9eedb}
.bk-alert.info{background:#eef6ff;color:#235a8a;border:1px solid #cfe3f8}
.bk-alert a{font-weight:700;text-decoration:underline;color:inherit}
.field small.field-help{font-size:11.5px;color:var(--p-muted)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#e05252;box-shadow:0 0 0 3px rgba(224,82,82,.1)}
.bk-btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px;border-top:1px solid #edf0f3;padding-top:18px}
.bk-btn-row .primary-btn,.bk-btn-row .secondary-btn{min-height:46px;padding:0 22px}
.primary-btn[disabled]{opacity:.6;cursor:not-allowed}
.bk-switch{text-align:center;font-size:13px;color:var(--p-muted);margin-top:16px}
.bk-switch a,.bk-linkbtn{color:var(--p-orange);font-weight:700;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;text-decoration:underline}
.bk-forgot{margin-top:18px;border:1px dashed #dfe4ea;border-radius:14px;padding:16px;background:var(--p-soft)}
.bk-forgot h3{font-size:15px;color:var(--p-navy);margin:0 0 10px}

/* Kartu identitas pasien */
.bk-patient{display:flex;align-items:center;gap:14px;background:linear-gradient(110deg,#17304d,#24476e);color:#fff;border-radius:16px;padding:16px 18px;margin-bottom:18px}
.bk-patient-avatar{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:20px;flex:none}
.bk-patient strong{display:block;font-size:16px}
.bk-patient span{font-size:12.5px;opacity:.85}
.bk-patient .bk-logout{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:20px;padding:8px 14px;font-weight:700;font-size:12px;cursor:pointer}
.bk-patient .bk-logout:hover{background:rgba(255,255,255,.24)}
.bk-rm{display:inline-block;font-family:'Oswald',sans-serif;font-size:26px;letter-spacing:1px;color:#087d5a;background:#eaf8f1;border-radius:12px;padding:8px 16px;margin:6px 0 10px}

/* Pilihan jadwal */
.bk-days{font-size:12px;color:var(--p-muted);margin-top:4px}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.bk-slot{position:relative;display:block;cursor:pointer}
.bk-slot input{position:absolute;opacity:0;pointer-events:none}
.bk-slot-box{display:flex;flex-direction:column;gap:4px;border:1.5px solid #dfe4ea;border-radius:12px;padding:12px 14px;background:#fff;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;min-height:72px}
.bk-slot-box strong{font-size:15px;color:var(--p-navy)}
.bk-slot-box small{font-size:12px;color:var(--p-muted)}
.bk-slot-box .bk-quota{font-weight:700;color:#0b8f55}
.bk-slot input:checked+.bk-slot-box{border-color:var(--p-orange);background:var(--p-orange-soft);box-shadow:0 0 0 3px rgba(255,101,15,.12)}
.bk-slot input:focus-visible+.bk-slot-box{outline:3px solid #ffb98e;outline-offset:2px}
.bk-slot.full{cursor:not-allowed}
.bk-slot.full .bk-slot-box{opacity:.55;background:#f5f6f8}
.bk-slot.full .bk-quota{color:#c23b3b}
.bk-slots-empty{grid-column:1/-1;font-size:13px;color:var(--p-muted);background:var(--p-soft);border-radius:12px;padding:14px}

/* Ringkasan konfirmasi */
.bk-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.bk-summary div{background:var(--p-soft);border-radius:12px;padding:12px 14px}
.bk-summary small{display:block;font-size:11px;color:#7a8590;text-transform:uppercase;letter-spacing:.4px}
.bk-summary strong{display:block;font-size:14px;color:var(--p-navy);margin-top:3px;word-break:break-word}
.bk-summary .full{grid-column:1/-1}

/* ---------- Modal Mobile JKN ---------- */
.bk-modal{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,28,45,.55)}
.bk-modal.open{display:flex}
.bk-modal-box{background:#fff;border-radius:20px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.bk-modal-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #edf0f3;position:sticky;top:0;background:#fff}
.bk-modal-head h2{margin:0;font-size:18px;color:var(--p-navy);flex:1}
.bk-modal-close{width:38px;height:38px;border-radius:50%;border:0;background:#f1f3f5;cursor:pointer;color:#526071;font-size:16px}
.bk-modal-close:focus-visible{outline:3px solid #ffb98e;outline-offset:2px}
.bk-modal-body{padding:20px}
.bk-store{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.bk-store a,.bk-store-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:12px;background:#111;color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:0 14px}
.bk-store a i{font-size:22px}
.bk-store a small{display:block;font-size:10px;font-weight:400;opacity:.8;line-height:1}
.bk-store a:focus-visible{outline:3px solid #ffb98e;outline-offset:2px}
.bk-open-app{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;border-radius:12px;background:#0b8f55;color:#fff;font-weight:700;font-size:15px;text-decoration:none;margin-bottom:6px}
.bk-steps{margin:10px 0 0;padding-left:20px;color:#3d4a5c;font-size:13.5px;line-height:1.7}
.bk-note{font-size:12px;color:var(--p-muted);margin-top:10px;line-height:1.55}

/* ---------- Responsif ---------- */
@media (max-width:900px){
  .bk-hub{grid-template-columns:1fr;gap:22px}
  .bk-illus{display:none}
  .bk-form-grid{grid-template-columns:1fr}
  .bk-prep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .bk-wrap{width:calc(100% - 24px)}
  .bk-main{padding-top:18px}
  .bk-option{flex-wrap:wrap;padding:16px}
  .bk-option-go{width:100%;justify-content:center;min-height:46px}
  .bk-prep-grid,.bk-summary,.bk-store{grid-template-columns:1fr}
  .bk-summary .full{grid-column:auto}
  .bk-card{padding:18px}
  .bk-btn-row{flex-direction:column-reverse}
  .bk-btn-row .primary-btn,.bk-btn-row .secondary-btn{width:100%}
  .bk-patient{flex-wrap:wrap}
  .bk-patient .bk-logout{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.bk-option{transition:none}}

.bk-hero-banner{margin:6px 0 0}
.bk-hero-banner img{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:24px;border:1px solid #edf0f3}