/* ============================================================
   KLINIK PRATAMA dr. JO — Design System
   Nuansa: Pink muda · Putih · Hijau muda
   ============================================================ */

:root {
  /* --- Palet utama (terinspirasi logo dr. Jo) --- */
  --pink-50:   #fdf2f7;
  --pink-100:  #fbe4ef;
  --pink-200:  #f8cfe2;
  --pink-300:  #f4a9cc;
  --pink-400:  #ee7fb0;
  --pink-500:  #e55d97;
  --pink-600:  #d13f7f;
  --pink-700:  #b02c67;

  --green-50:  #f0faf3;
  --green-100: #d9f2e2;
  --green-200: #b5e5c9;
  --green-300: #8ad4ac;
  --green-400: #5fbf8e;
  --green-500: #3fa573;
  --green-600: #2f8a5e;
  --green-700: #256e4c;

  --white:     #ffffff;
  --ink:       #3b2f38;
  --ink-soft:  #6d5f68;
  --ink-faint: #9c8f97;

  --bg:        #fffdfe;
  --bg-soft:   #fdf6f9;
  --line:      #f3e3ea;

  --grad-pink:  linear-gradient(135deg, #fbe4ef 0%, #fdf2f7 55%, #f0faf3 100%);
  --grad-hero:  linear-gradient(160deg, #fbe4ef 0%, #fffdfe 45%, #eaf7ef 100%);
  --grad-btn:   linear-gradient(135deg, #ee7fb0 0%, #e55d97 100%);
  --grad-green: linear-gradient(135deg, #8ad4ac 0%, #5fbf8e 100%);
  --grad-pill:  linear-gradient(90deg, #fbe4ef, #eaf7ef);

  --shadow-sm: 0 2px 10px rgba(209, 63, 127, 0.08);
  --shadow-md: 0 8px 28px rgba(209, 63, 127, 0.12);
  --shadow-lg: 0 18px 50px rgba(209, 63, 127, 0.16);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  --container: 1180px;
  --nav-h: 76px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }

::selection { background: var(--pink-200); color: var(--pink-700); }

/* ============================================================
   LAYOUT UTIL
   ============================================================ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.section { padding: 88px 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--green { background: var(--grad-pill); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pink-600); background: var(--pink-50);
  border: 1px solid var(--pink-200); padding: 7px 16px; border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-500); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--ink-soft); font-size: 17px; }

.lead { font-size: 18px; color: var(--ink-soft); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 15px; line-height: 1;
  padding: 15px 28px; border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn--primary {
  color: #fff; background: var(--grad-btn);
  box-shadow: 0 10px 24px rgba(229, 93, 151, 0.35);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(229, 93, 151, 0.45); }
.btn--green {
  color: #fff; background: var(--grad-green);
  box-shadow: 0 10px 24px rgba(63, 165, 115, 0.35);
}
.btn--green:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(63, 165, 115, 0.45); }
.btn--ghost {
  color: var(--pink-700); background: #fff;
  border: 2px solid var(--pink-200);
}
.btn--ghost:hover { border-color: var(--pink-400); background: var(--pink-50); transform: translateY(-3px); }
.btn--white { background: #fff; color: var(--pink-600); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.btn--white:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.16); }
.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.topbar {
  background: var(--ink);
  color: #f7eef2; font-size: 13px;
  padding: 8px 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar a { color: #fbe4ef; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.topbar a:hover { color: var(--pink-300); }
.topbar svg { width: 14px; height: 14px; }
.topbar__right { display: flex; gap: 20px; }

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 253, 254, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  height: var(--nav-h);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }

/* .brand JANGAN boleh menyusut: dulu ia terkompresi sampai teks "Klinik dr. Jo"
   terlipat 3 baris (tinggi 93px di dalam nav 76px) sehingga tampak bertumpuk
   dengan logo. flex:0 0 auto + nowrap membuat logo & teks selalu sejajar. */
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; border-radius: 10px; }
.brand__text { line-height: 1.1; }
.brand__text b { font-size: 18px; font-weight: 800; color: var(--pink-600); display: block; letter-spacing: -0.01em; white-space: nowrap; }
.brand__text span { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__menu a {
  position: relative;
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  padding: 10px 10px; border-radius: 999px;
  transition: color .2s, background .2s;
}
/* Tautan "Masuk Pasien" khusus menu burger (disuntik oleh klinik.js) —
   hanya tampil saat menu horizontal berganti burger. */
.nav__login-mobile { display: none; }
.nav__menu a:hover { color: var(--pink-600); background: var(--pink-50); }
.nav__menu a.active { color: var(--pink-600); background: var(--pink-50); }
.nav__menu a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 3px; background: var(--grad-btn);
}

.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 24px; height: 2.5px; border-radius: 3px; background: var(--ink); transition: transform .3s, opacity .3s; }
.nav__burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--grad-hero);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 127, 176, 0.16), transparent 65%);
  top: -160px; right: -120px;
}
.hero::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 212, 172, 0.2), transparent 65%);
  bottom: -140px; left: -100px;
}
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 72px 24px; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--pink-200);
  color: var(--pink-700); font-weight: 700; font-size: 13.5px;
  padding: 8px 18px; border-radius: 999px; margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.hero__badge svg { width: 15px; height: 15px; color: var(--green-500); }

.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.hero h1 .hl { color: var(--pink-500); }
.hero h1 .hl-green { color: var(--green-500); }
.hero p { font-size: 18px; color: var(--ink-soft); max-width: 480px; margin-bottom: 32px; }

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }

.hero__stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero__stats b { font-size: 30px; font-weight: 800; color: var(--ink); display: block; line-height: 1.1; }
.hero__stats b em { font-style: normal; color: var(--pink-500); }
.hero__stats span { font-size: 13.5px; color: var(--ink-faint); font-weight: 600; }

.hero__visual { position: relative; }
.hero__img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
  border: 8px solid #fff;
}
.hero__card {
  position: absolute; background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  animation: float 5s ease-in-out infinite;
}
.hero__card .ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
}
.hero__card .ic svg { width: 20px; height: 20px; }
.hero__card b { font-size: 14px; display: block; line-height: 1.2; }
.hero__card span { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.hero__card--1 { top: -18px; left: -28px; animation-delay: 0s; }
.hero__card--1 .ic { background: var(--pink-100); color: var(--pink-600); }
.hero__card--2 { bottom: 30px; right: -20px; animation-delay: 1.6s; }
.hero__card--2 .ic { background: var(--green-100); color: var(--green-600); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============================================================
   CARDS / GRID UMUM
   ============================================================ */
.grid { display: grid; gap: 24px; }
/* Kotak grid/flex TIDAK boleh dipaksa melebar oleh isinya (gambar berukuran
   besar, <select> dengan teks opsi panjang, atau tabel). Tanpa min-width:0,
   min-content isi itulah yang membuat halaman melebihi lebar layar sehingga
   bisa digeser ke samping di ponsel. */
.grid > *, .features > *, .split > *, .form-grid > *, .footer__grid > *, .hist-stats > *, .badges-list > * { min-width: 0; }

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.card__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 20px;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 18.5px; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 15px; }

/* ============================================================
   FEATURE LIST (About / Layanan)
   ============================================================ */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 34px 30px; transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative;
  /* .feature__tint menjulur 30px ke kanan/bawah; di layar sempit tint itu
     dulu menambah lebar halaman sehingga bisa digeser ke samping. */
  overflow: hidden;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.feature__num {
  font-size: 44px; font-weight: 800; letter-spacing: -0.04em;
  background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1; margin-bottom: 16px;
}
.feature h3 { font-size: 18.5px; margin-bottom: 10px; }
.feature p { color: var(--ink-soft); font-size: 15px; }
.feature__tint { position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; opacity: .55; }

/* ============================================================
   PRODUCT & TREATMENT CARD
   ============================================================ */
.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column;
}
.pcard:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
.pcard__img {
  aspect-ratio: 1 / 1; background: var(--bg-soft);
  display: grid; place-items: center; overflow: hidden;
  position: relative; padding: 20px;
}
.pcard__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease; }
.pcard:hover .pcard__img img { transform: scale(1.08); }
.pcard__tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--grad-btn); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(229,93,151,.4);
}
.pcard__tag--green { background: var(--grad-green); box-shadow: 0 4px 12px rgba(63,165,115,.4); }
.pcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard__name { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.4; }
.pcard__cat { font-size: 12px; color: var(--pink-500); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.pcard__price { font-size: 18px; font-weight: 800; color: var(--pink-600); margin-top: auto; }
.pcard__price small { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }

/* ============================================================
   FILTER / SEARCH BAR
   ============================================================ */
.filterbar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-sm);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-bottom: 36px; position: sticky; top: calc(var(--nav-h) + 12px); z-index: 50;
}
.search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 12px 18px; transition: border-color .2s;
}
.search:focus-within { border-color: var(--pink-400); background: #fff; }
.search svg { width: 18px; height: 18px; color: var(--ink-faint); flex-shrink: 0; }
.search input { border: none; background: none; outline: none; width: 100%; font-size: 15px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 13.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--bg-soft); border: 1.5px solid var(--line);
  padding: 10px 18px; border-radius: 999px; transition: all .2s ease;
}
.chip:hover { border-color: var(--pink-300); color: var(--pink-600); }
.chip.active { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(229,93,151,.35); }
.chip.active--green { background: var(--grad-green); box-shadow: 0 6px 16px rgba(63,165,115,.35); }

.select {
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); padding: 11px 16px; font-weight: 600; font-size: 14px;
  color: var(--ink-soft); outline: none; transition: border-color .2s;
}
.select:focus { border-color: var(--pink-400); }

.count { font-size: 13.5px; color: var(--ink-faint); font-weight: 600; margin-top: -22px; margin-bottom: 18px; }
.count b { color: var(--pink-600); }

/* ============================================================
   MARQUEE / BANNER
   ============================================================ */
.banner {
  background: var(--ink); color: #fff;
  padding: 18px 0; overflow: hidden; position: relative;
}
.banner__track { display: flex; gap: 48px; white-space: nowrap; animation: marquee 30s linear infinite; width: max-content; }
.banner__track span { font-size: 14px; font-weight: 600; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 12px; }
.banner__track svg { width: 16px; height: 16px; color: var(--pink-300); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta {
  background: var(--grad-btn);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  color: #fff; position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,.12); top: -120px; right: -80px;
}
.cta::after {
  content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.1); bottom: -80px; left: -40px;
}
.cta__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta h2 { color: #fff; font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 10px; }
.cta p { color: #ffe9f3; font-size: 17px; max-width: 520px; }
.cta .btn--white { color: var(--pink-600); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #2d232b; color: #cbb9c2; padding-top: 72px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.footer h4 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.footer__brand p { font-size: 14.5px; margin: 16px 0 20px; color: #b9a6b0; }
.footer__brand img { height: 48px; border-radius: 10px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #f0dbe6; transition: all .25s;
}
.footer__social a:hover { background: var(--grad-btn); transform: translateY(-3px); color: #fff; }
.footer__social svg { width: 18px; height: 18px; }
.footer__links li { margin-bottom: 11px; }
.footer__links a { font-size: 14.5px; color: #cbb9c2; transition: color .2s, padding-left .2s; }
.footer__links a:hover { color: var(--pink-300); padding-left: 5px; }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 14.5px; }
.footer__contact svg { width: 18px; height: 18px; color: var(--pink-300); flex-shrink: 0; margin-top: 3px; }
.footer__contact a:hover { color: var(--pink-300); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; text-align: center; font-size: 13.5px; color: #9c8894; }
.footer__bottom b { color: var(--pink-300); }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
  transition: transform .3s ease, box-shadow .3s ease;
}
.wa-float:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 18px 40px rgba(37, 211, 102, 0.55); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* ============================================================
   PAGE HERO (halaman dalam)
   ============================================================ */
.page-hero {
  background: var(--grad-hero);
  padding: 64px 0 56px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238,127,176,.14), transparent 60%);
  top: -120px; left: -100px;
}
.page-hero::after {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143,212,172,.18), transparent 60%);
  bottom: -120px; right: -80px;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(30px, 4.6vw, 46px); margin-bottom: 12px; }
.page-hero p { color: var(--ink-soft); font-size: 17px; max-width: 560px; margin: 0 auto; }
.crumbs { font-size: 13px; color: var(--ink-faint); font-weight: 600; margin-bottom: 14px; }
.crumbs a { color: var(--pink-600); }
.crumbs span { margin: 0 6px; color: var(--pink-300); }

/* ============================================================
   ABOUT / MISC LAYOUT
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split__visual { position: relative; }
.split__visual img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.split__visual::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border-radius: var(--radius-xl); background: var(--grad-pill); z-index: -1;
}
.split h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 18px; }
.split p { color: var(--ink-soft); margin-bottom: 16px; font-size: 16.5px; }

.badges-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.badges-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); padding: 12px 16px; border-radius: 12px; }
.badges-list svg { width: 18px; height: 18px; color: var(--green-500); flex-shrink: 0; }

/* ============================================================
   DOKTER CARDS (Jadwal)
   ============================================================ */
.dcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s;
}
.dcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.dcard__avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: var(--grad-pill); border: 3px solid #fff; box-shadow: var(--shadow-sm);
  font-size: 28px; font-weight: 800; color: var(--pink-600);
}
/* Foto profil dokter (slot Foto Website) */
.dcard__avatar.has-foto { background: #fff; overflow: hidden; }
.dcard__avatar.has-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.dcard h3 { font-size: 17.5px; margin-bottom: 4px; }
.dcard .dcard__role { font-size: 13px; color: var(--pink-500); font-weight: 700; margin-bottom: 10px; display: block; }
.dcard .dcard__poli { font-size: 13.5px; color: var(--ink-soft); background: var(--bg-soft); border-radius: 999px; padding: 7px 14px; display: inline-block; font-weight: 600; }

/* ============================================================
   TABLE (Jadwal)
   ============================================================ */
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
thead th {
  background: var(--grad-pill); text-align: left; padding: 16px 20px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 800;
}
tbody td { padding: 15px 20px; border-top: 1px solid var(--line); color: var(--ink-soft); }
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--pink-50); }
tbody td b { color: var(--ink); }

/* ============================================================
   FORM
   ============================================================ */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field label b { color: var(--pink-500); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 13px 16px; font-size: 15px; outline: none; background: var(--bg-soft);
  transition: border-color .2s, background .2s, box-shadow .2s;
  /* min-width:0 + max-width:100%: kontrol form tidak boleh lebih lebar dari
     kotaknya (penyebab utama halaman form bisa digeser ke samping). */
  min-width: 0; max-width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pink-400); background: #fff; box-shadow: 0 0 0 4px rgba(238,127,176,.12);
}
.field textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 13px; color: var(--ink-faint); margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.form-note svg { width: 15px; height: 15px; color: var(--green-500); }

/* ============================================================
   TESTIMONI
   ============================================================ */
.tcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-sm); position: relative;
}
.tcard__quote { position: absolute; top: 22px; right: 26px; font-size: 60px; line-height: 1; font-family: Georgia, serif; color: var(--pink-200); }
.tcard p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 20px; }
.tcard__stars { display: flex; gap: 3px; margin-bottom: 14px; }
.tcard__stars svg { width: 16px; height: 16px; color: #ffb84d; }
.tcard__who { display: flex; align-items: center; gap: 12px; }
.tcard__who .ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-btn); font-size: 15px; }
.tcard__who b { font-size: 15px; display: block; }
.tcard__who span { font-size: 12.5px; color: var(--ink-faint); }

/* ============================================================
   CABANG / BRANCH — Selector & Detail Panel
   ============================================================ */
.branch-selector {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 36px;
}
.branch-selector .chip { font-size: 14px; padding: 12px 20px; }

.branch-panel {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px;
  align-items: stretch;
}

.branch-info {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 30px 28px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 16px;
}
.branch-info__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px dashed var(--line);
}
.branch-info__head h3 { font-size: 21px; margin: 8px 0 0; }
.branch-info__head .pin {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--grad-btn); color: #fff; box-shadow: 0 6px 16px rgba(229,93,151,.35);
}
.branch-info__head .pin svg { width: 22px; height: 22px; }

.bcard__label {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--pink-100); color: var(--pink-600);
  padding: 5px 12px; border-radius: 999px;
}

.bcard__row { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); }
.bcard__row svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.bcard__row .ic-pink { color: var(--pink-500); }
.bcard__row .ic-green { color: var(--green-500); }
.bcard__row a { font-weight: 700; color: var(--pink-600); transition: color .2s; }
.bcard__row a:hover { color: var(--pink-700); }

.branch-info__social { display: flex; gap: 10px; margin-top: 4px; }
.branch-info__social a {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line);
  transition: all .25s ease;
}
.branch-info__social a:hover { background: var(--grad-btn); color: #fff; border-color: transparent; transform: translateY(-3px); }
.branch-info__social svg { width: 19px; height: 19px; }

.bcard__maps {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--bg-soft); border: 1.5px dashed var(--pink-300);
  color: var(--pink-600); font-weight: 700; font-size: 14.5px;
  padding: 14px 20px; border-radius: 999px;
  transition: all .25s ease;
}
.bcard__maps:hover { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(229,93,151,.35); }
.bcard__maps svg { width: 17px; height: 17px; }

.branch-map {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); border: 6px solid #fff;
  min-height: 420px; background: var(--bg-soft);
}
/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .1s; }
.reveal--d2 { transition-delay: .2s; }
.reveal--d3 { transition-delay: .3s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .branch-panel { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero .container { grid-template-columns: 1fr; gap: 56px; }
  .hero__visual { max-width: 480px; margin: 0 auto; }
}

/* ≤1400px: menu horizontal (7 tautan) + brand + tombol CTA sudah tidak muat —
   butuh ±1360px setelah klinik.js menyuntik tombol "Masuk Pasien" (sebelumnya
   ambang 1200px, sehingga di layar 1201–1400px baris navbar melebihi container
   dan halaman bisa digeser ke samping). Beralih ke menu burger supaya logo,
   tulisan klinik, dan tautan masuk tetap utuh. */
@media (max-width: 1400px) {
  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; padding: 18px 20px 26px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 50px rgba(0,0,0,.12);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav__menu.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__menu a { padding: 13px 16px; border-radius: 12px; font-size: 15.5px; }
  .nav__menu a.active::after { display: none; }
  .nav__login-mobile { display: block; }
  /* "Booking Sekarang" disembunyikan, tombol Masuk Pasien tetap terlihat
     (dan pada ≤720px tombol itu pun disembunyikan — jalan masuknya lewat menu
     burger `.nav__login-mobile`) */
  .nav__cta .btn--primary { display: none; }
  .nav__burger { display: flex; }
}

@media (max-width: 720px) {
  /* di ponsel tombol CTA tidak muat — tautan login tetap ada di menu burger */
  .nav__cta .btn { display: none; }
  /* Tombol/chip yang DISUNTIK klinik.js TIDAK memakai kelas .btn, jadi harus
     disembunyikan sendiri. Tanpa ini baris navbar portal pasien (dan halaman
     lain) lebih lebar dari layar → halaman bisa digeser ke samping di ponsel.
     Tautan masuk penggantinya ada di menu burger (.nav__login-mobile). */
  .nav__cta .kl-login-btn { display: none; }
  .nav__cta .kl-user-chip { padding: 2px; text-decoration: none; }
  .nav__cta .kl-user-chip > span:not(.kl-ava) { display: none; } /* sisakan avatar saja */
}

/* ≤420px (mis. iPhone SE / ponsel 320–375px): logo + nama klinik tetap tampil,
   keterangan kecilnya disembunyikan supaya navbar + burger pasti muat. */
@media (max-width: 420px) {
  .nav .container { gap: 10px; padding: 0 16px; }
  .brand { gap: 9px; }
  .brand img { height: 38px; border-radius: 9px; }
  .brand__text b { font-size: 16px; }
  .brand__text span { display: none; }
  /* Dua kolom "keunggulan" tidak muat di 320–375px → satu kolom. */
  .badges-list { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .topbar__right { display: none; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  /* Bingkai foto pada .split__visual dulu menjulur 22px ke kanan & menggeser
     halaman di ponsel → rapatkan tanpa melewati tepi. */
  .split__visual::before { inset: 16px 0 -16px 16px; }
  /* Tabel (mis. jadwal poli) digulir di dalam kotaknya sendiri, bukan
     ditarik melebarkan seluruh halaman. */
  .table-wrap { overflow-x: auto; }
}

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .branch-panel { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 24px; }
  .hero__card--1 { left: 0; }
  .hero__card--2 { right: 0; }
  .cta { padding: 44px 28px; }
  .filterbar { position: static; }
  .topbar .container { justify-content: center; }
  .topbar__left { display: none; }
}

@media (max-width: 420px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ===== Badge Reservasi Online + tombol Masuk Pasien (halaman depan) ===== */
.hero__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.hero__badges .hero__badge { margin-bottom: 0; }
.hero__badge--online {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #a7f3d0; color: #065f46;
}
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #10b981; display: inline-block;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

/* ===== Kartu jadwal khusus mendatang (by-tanggal) ===== */
.jcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  transition: transform .3s, box-shadow .3s;
}
.jcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.jcard__date {
  width: 62px; height: 68px; border-radius: 16px; flex-shrink: 0;
  background: var(--grad-pill); color: var(--pink-600);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.jcard__date b { font-size: 22px; line-height: 1; }
.jcard__date span { font-size: 10.5px; font-weight: 700; margin-top: 3px; }
.jcard__info { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.jcard__info b { font-size: 15px; }
.jcard__info b small { font-weight: 600; color: var(--ink-soft); }
.jcard__info span { font-size: 13px; color: var(--ink-soft); }
.jcard__week { color: var(--pink-500); font-weight: 700; font-size: 12px; }