/* OTW Terapi Lombok — tampilan mobile-first */
:root {
  /* ===== PALET WARNA — ubah di sini saja untuk menyesuaikan dengan warna Instagram/logo ===== */
  --dasar: #FFFBF2;        /* latar krem hangat */
  --kartu: #FFFFFF;
  --tinta: #2B2350;        /* teks utama (biru-ungu tua) */
  --redup: #5A5478;        /* teks keterangan */
  --garis: #EDE4D3;
  --garis-input: #D9CDB8;
  --utama: #2B5FC4;        /* biru ceria: tombol & tautan */
  --utama-gelap: #1F4A9E;
  --utama-muda: #E6EEFF;
  --kuning: #6B4A00;
  --kuning-muda: #FFF4D6;
  --ceria-kuning: #FFC83D; /* aksen dekorasi */
  --ceria-koral: #FF7A66;
  --ceria-mint: #3CC4A0;
  --ceria-ungu: #7A5AC8;
  --bahaya: #8A2E0C;
  --bahaya-muda: #FDECE3;
  --abu-muda: #F3EEE4;
  --radius: 16px;
  --font-judul: 'Baloo 2', 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--dasar);
  color: var(--tinta);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
body.ada-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
a { color: var(--utama); }
a:hover { color: var(--utama-gelap); }
h1, h2, h3 { line-height: 1.2; margin: 0; font-family: var(--font-judul); }
h1 { font-size: 26px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 700; }
p { margin: 0; }

.ikon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- kerangka ---------- */
.wadah { width: 100%; max-width: 760px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.bar-atas { background: var(--kartu); border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 10; }
.bar-isi { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.merek { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; min-width: 0; }
.merek span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--utama); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.nav-bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--kartu); border-top: 1px solid var(--garis);
  display: flex; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1 1 0; max-width: 190px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--redup); text-decoration: none; font-size: 12px; font-weight: 600;
}
.nav-item.aktif { color: var(--utama); }
.nav-item.aktif .ikon { stroke-width: 2.4; }

/* ---------- kartu & teks ---------- */
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.kartu-sorot { border: 2px solid var(--utama); padding: 15px; }
.redup { color: var(--redup); }
.kecil { font-size: 13px; }
.mini { font-size: 12px; }
.tebal { font-weight: 700; }
.baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.baris-antara { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tumpuk { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pecah { white-space: pre-line; overflow-wrap: anywhere; }

.kepala-hal { display: flex; flex-direction: column; gap: 4px; }

/* ---------- pesan ---------- */
.pesan { border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.pesan-ok { background: var(--utama-muda); color: var(--utama-gelap); }
.pesan-galat, .pesan-bahaya { background: var(--bahaya-muda); color: var(--bahaya); }
.pesan-info { background: var(--abu-muda); color: var(--redup); }
.pesan ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- formulir ---------- */
.isian { display: flex; flex-direction: column; gap: 6px; }
.isian > label, .label { font-size: 13px; font-weight: 600; color: var(--redup); }
.isian .bantu { font-size: 12px; color: var(--redup); }
input[type=text], input[type=tel], input[type=date], input[type=time], input[type=password],
input[type=search], input[type=number], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--garis-input); border-radius: 10px;
  background: #fff; color: var(--tinta);
  font: inherit; font-size: 16px; /* 16px mencegah zoom otomatis di iPhone */
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(43, 95, 196, .25); border-color: var(--utama); }
.isian.galat input, .isian.galat textarea, .isian.galat select { border-color: #B4400F; }
.isian .pesan-isian { font-size: 12px; color: var(--bahaya); }

/* pilihan berbentuk pil (radio) */
.pil-grup { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.pil-grup legend { font-size: 13px; font-weight: 600; color: var(--redup); padding: 0; margin-bottom: 8px; }
.pil { position: relative; }
.pil input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pil span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--garis-input); background: #fff;
  font-weight: 600; font-size: 14px; cursor: pointer; user-select: none;
}
.pil input:checked + span { background: var(--utama); border-color: var(--utama); color: #fff; }
.pil input:focus-visible + span { outline: 3px solid rgba(43, 95, 196, .35); outline-offset: 2px; }
.pil input:disabled + span { background: var(--abu-muda); color: #8A9A96; border-color: #DCE4E2; cursor: not-allowed; }

.centang { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.centang input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--utama); flex-shrink: 0; }

.dua-kolom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  background: var(--utama); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.tombol:hover { background: var(--utama-gelap); color: #fff; }
.tombol:disabled { background: #DCE4E2; color: #6B7C78; cursor: not-allowed; }
.tombol-penuh { width: 100%; min-height: 52px; font-size: 16px; }
.tombol-garis { background: #fff; color: var(--tinta); border-color: var(--garis-input); }
.tombol-garis:hover { background: var(--abu-muda); color: var(--tinta); }
.tombol-bahaya { background: #fff; color: var(--bahaya); border-color: #E7B9A3; }
.tombol-bahaya:hover { background: var(--bahaya-muda); color: var(--bahaya); }
.tombol-kecil { min-height: 40px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.tombol-wa { background: #1E7A3C; }
.tombol-wa:hover { background: #165C2D; }
.tombol-ikon {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--garis-input);
  background: #fff; color: var(--tinta); display: inline-flex; align-items: center; justify-content: center;
}
.deret-tombol { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- lencana status ---------- */
.lencana { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.st-baru { background: var(--bahaya-muda); color: var(--bahaya); }
.st-dihubungi { background: var(--kuning-muda); color: var(--kuning); }
.st-terjadwal { background: var(--utama-muda); color: var(--utama-gelap); }
.st-selesai { background: var(--abu-muda); color: var(--redup); }
.st-batal { background: var(--abu-muda); color: #6B7C78; text-decoration: line-through; }

/* ---------- ringkasan angka ---------- */
.ringkas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ringkas a { text-decoration: none; color: inherit; }
.angka { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; height: 100%; }
.angka b { font-size: 24px; font-weight: 800; }
.angka span { font-size: 12px; color: var(--redup); font-weight: 600; }
.angka.sorot b { color: #B4400F; }

/* ---------- daftar kartu ---------- */
.daftar { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.item-tautan { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.item-tautan:hover h3 { color: var(--utama); }

/* slot & jadwal */
.slot { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px; background: var(--utama-muda); text-decoration: none; color: inherit; }
.slot.kosong { background: #fff; border: 1px dashed #A9BAB5; padding: 11px; }
.slot .waktu { font-weight: 800; min-width: 54px; }
.slot .tumpuk { flex: 1; }
.sesi { display: flex; gap: 12px; align-items: center; border: 1px solid var(--garis); border-radius: 12px; padding: 12px; background: #fff; text-decoration: none; color: inherit; }
.sesi.batal { opacity: .6; }
.sesi .waktu { font-weight: 800; min-width: 54px; }

/* navigasi tanggal */
.nav-tgl { display: flex; align-items: center; gap: 8px; }
.nav-tgl .tengah { flex: 1; text-align: center; font-weight: 700; }

/* filter */
.filter { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tab-status { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.tab-status a {
  flex-shrink: 0; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 999px; border: 1px solid var(--garis-input); background: #fff;
  color: var(--tinta); text-decoration: none; font-size: 13px; font-weight: 600;
}
.tab-status a.aktif { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* data detail */
.data { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.data div { display: flex; flex-direction: column; gap: 2px; }
.data dt { font-size: 12px; color: var(--redup); font-weight: 600; }
.data dd { margin: 0; overflow-wrap: anywhere; }

.catatan-sesi { border-left: 0; background: var(--dasar); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }

details.lipat > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; list-style: none; }
details.lipat > summary::-webkit-details-marker { display: none; }
details.lipat > summary::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--redup); }
details.lipat[open] > summary::after { content: '–'; }

/* halaman publik */
.sampul { background: var(--utama); color: #fff; padding: 28px 16px 24px; }
.sampul-isi { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.sampul .logo { background: #fff; color: var(--utama); width: 40px; height: 40px; }
.sampul p { color: #E6EEFF; }
.kode-besar { font-size: 28px; font-weight: 800; color: var(--utama); letter-spacing: .02em; text-align: center; }
.langkah { display: flex; gap: 12px; }
.langkah b { width: 26px; height: 26px; border-radius: 999px; background: var(--utama-muda); color: var(--utama); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.tengah-layar { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.kotak-login { width: 100%; max-width: 400px; }

.sembunyi { display: none !important; }
.hp-tersembunyi { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- layar lebih lebar ---------- */
@media (min-width: 640px) {
  .wadah { padding: 24px; gap: 20px; }
  h1 { font-size: 26px; }
  .ringkas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter { grid-template-columns: 2fr 1fr 1fr; }
  .data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data .lebar { grid-column: 1 / -1; }
}

/* =====================================================================
   HALAMAN MUKA (beranda)
   ===================================================================== */
.bm-atas { position: sticky; top: 0; z-index: 30; background: rgba(255, 251, 242, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--garis); }
.bm-atas .isi { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bm-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-family: var(--font-judul); font-weight: 800; font-size: 18px; line-height: 1.1; }
.bm-logo .lencana-logo { width: 42px; height: 42px; border-radius: 14px; background: var(--ceria-kuning); color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--utama); }
.bm-logo small { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 11px; color: var(--redup); }
.bm-tautan { display: none; gap: 20px; }
.bm-tautan a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px; }
.bm-tautan a:hover { color: var(--utama); }

.bm-isi { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.bm-seksi { padding: 40px 0 8px; display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 70px; }
.bm-seksi > header { display: flex; flex-direction: column; gap: 6px; }
.bm-label { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--utama-muda); color: var(--utama-gelap); }
.bm-seksi h2 { font-size: 28px; font-weight: 800; }

/* hero */
.bm-hero { position: relative; overflow: hidden; margin: 16px 0 0; border-radius: 28px; background: var(--utama); color: #fff; padding: 32px 22px 28px; }
.bm-hero h1 { font-size: 34px; line-height: 1.08; font-weight: 800; max-width: 15ch; position: relative; }
.bm-hero h1 span { color: var(--ceria-kuning); }
.bm-hero p { color: #E6EEFF; margin-top: 12px; max-width: 46ch; position: relative; font-size: 16px; }
.bm-hero .deret-tombol { margin-top: 20px; position: relative; }
.bm-hero .tombol-ceria { background: var(--ceria-kuning); color: var(--tinta); }
.bm-hero .tombol-ceria:hover { background: #FFD666; color: var(--tinta); }
.bm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-size: 13px; font-weight: 600; }
.bm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; }
.bm-gelembung { position: absolute; border-radius: 999px; pointer-events: none; }
.bm-gelembung.g1 { width: 150px; height: 150px; background: var(--ceria-kuning); right: -60px; bottom: -70px; }
.bm-gelembung.g2 { width: 64px; height: 64px; background: var(--ceria-koral); right: -18px; top: -18px; }
.bm-gelembung.g3 { width: 28px; height: 28px; background: var(--ceria-mint); right: 70px; bottom: 30px; }
.bm-gelembung.g4 { display: none; }
@media (min-width: 720px) {
  .bm-gelembung.g1 { width: 260px; height: 260px; right: -60px; top: -60px; bottom: auto; }
  .bm-gelembung.g2 { width: 110px; height: 110px; right: 160px; top: auto; bottom: -40px; }
  .bm-gelembung.g3 { width: 54px; height: 54px; right: 70px; bottom: auto; top: 230px; }
  .bm-gelembung.g4 { display: block; width: 24px; height: 24px; background: #fff; right: 240px; top: 70px; opacity: .8; }
}

/* kartu layanan */
.bm-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.bm-kartu { background: var(--kartu); border: 2px solid var(--garis); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.bm-kartu ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.bm-ikon-bulat { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta); }
.bm-ikon-bulat .ikon { width: 28px; height: 28px; }
.w-kuning { background: var(--ceria-kuning); }
.w-mint { background: var(--ceria-mint); }
.w-koral { background: var(--ceria-koral); }
.w-ungu { background: var(--ceria-ungu); color: #fff; }
.w-biru { background: var(--utama); color: #fff; }
.bm-kartu.aksen-kuning { border-color: var(--ceria-kuning); }
.bm-kartu.aksen-mint { border-color: var(--ceria-mint); }

/* terapis */
.bm-terapis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bm-t { background: var(--kartu); border: 2px solid var(--garis); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.bm-foto { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; border: 4px solid var(--ceria-kuning); background: var(--abu-muda); }
.bm-inisial { width: 96px; height: 96px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-judul); font-weight: 800; font-size: 32px; color: var(--tinta); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--garis); }
.bm-t h3 { font-size: 16px; }
.bm-t .gelar { font-size: 12px; color: var(--redup); }
.bm-t .bio { font-size: 13px; color: var(--redup); }
.bm-pita { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.pita-tw { background: #FFF1C7; color: #6B4A00; }
.pita-ot { background: #D6F5EC; color: #0B5A46; }

/* langkah daftar */
.bm-langkah { display: grid; grid-template-columns: 1fr; gap: 12px; counter-reset: lg; }
.bm-langkah li { list-style: none; background: var(--kartu); border: 2px dashed var(--garis-input); border-radius: 20px; padding: 16px 16px 16px 64px; position: relative; }
.bm-langkah li::before { counter-increment: lg; content: counter(lg); position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 12px; background: var(--ceria-koral); color: var(--tinta); font-family: var(--font-judul); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.bm-langkah li:nth-child(2)::before { background: var(--ceria-kuning); }
.bm-langkah li:nth-child(3)::before { background: var(--ceria-mint); }
.bm-langkah { padding: 0; margin: 0; }

/* ajakan & kaki */
.bm-ajakan { margin: 40px 0 0; border-radius: 28px; background: var(--ceria-kuning); padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.bm-ajakan h2 { font-size: 28px; }
.bm-ajakan .deret-tombol { position: relative; }
.bm-ajakan .bm-gelembung.g1 { background: var(--ceria-koral); width: 120px; height: 120px; right: -40px; top: -40px; }
.bm-kaki { margin-top: 40px; background: var(--tinta); color: #E9E5F7; padding: 32px 0 calc(96px + env(safe-area-inset-bottom)); }
.bm-kaki a { color: #fff; }
.bm-kaki .bm-isi { display: flex; flex-direction: column; gap: 14px; }
.bm-kontak { display: flex; flex-wrap: wrap; gap: 10px; }
.bm-kontak a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,.1); text-decoration: none; font-weight: 600; }
.tombol-ig { background: #C13584; }
.tombol-ig:hover { background: #A02C6E; }
.wa-melayang { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 58px; height: 58px; border-radius: 999px; background: #1E7A3C; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(30, 122, 60, .4); }
.wa-melayang .ikon { width: 30px; height: 30px; }

@media (min-width: 720px) {
  .bm-tautan { display: flex; }
  .bm-hero { padding: 56px 48px; }
  .bm-hero h1 { font-size: 52px; }
  .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-terapis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .bm-langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-seksi h2 { font-size: 34px; }
  .bm-ajakan { padding: 40px 48px; }
}