/* =====================================================================
   RSUD JATISARI — TEMA DI ATAS BOOTSTRAP 5
   Semua warna diatur lewat variabel CSS di :root agar mudah diganti.
   ===================================================================== */

:root {
  /* Palet utama */
  --rs-primary:        #1a56db;
  --rs-primary-600:    #1e4fc4;
  --rs-primary-700:    #17439f;
  --rs-primary-050:    #eef4ff;
  --rs-primary-100:    #dbe7ff;

  --rs-accent:         #0d9aa8;
  --rs-accent-050:     #e8fafb;
  --rs-accent-100:     #cbf1f4;

  --rs-ink:            #0f1b2d;
  --rs-ink-700:        #33415c;
  --rs-ink-500:        #64748b;
  --rs-ink-300:        #94a3b8;

  --rs-line:           #e4eaf3;
  --rs-surface:        #f5f8fc;
  --rs-danger:         #dc2626;

  --rs-radius:         16px;
  --rs-radius-sm:      12px;
  --rs-radius-lg:      24px;

  --rs-shadow-sm:      0 1px 2px rgba(15,27,45,.05), 0 6px 18px -10px rgba(15,27,45,.16);
  --rs-shadow:         0 2px 6px rgba(15,27,45,.05), 0 14px 34px -14px rgba(15,27,45,.22);
  --rs-shadow-lg:      0 24px 56px -22px rgba(15,27,45,.35);

  /* Override variabel Bootstrap */
  --bs-primary:        #1a56db;
  --bs-primary-rgb:    26, 86, 219;
  --bs-body-color:     #33415c;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-border-color:   #e4eaf3;
  --bs-border-radius:  12px;
  --bs-link-color:     #1a56db;
  --bs-link-hover-color: #17439f;
}

/* ---------------------------------------------------------------------
   DASAR
   ------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--bs-body-font-family);
  color: var(--rs-ink-700);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-head {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  color: var(--rs-ink);
  letter-spacing: -.02em;
}

a { text-decoration: none; }
.text-ink   { color: var(--rs-ink) !important; }
.text-muted2{ color: var(--rs-ink-500) !important; }
.bg-surface { background: var(--rs-surface) !important; }
.bg-ink     { background: var(--rs-ink) !important; }
.rounded-xl { border-radius: var(--rs-radius) !important; }
.rounded-2xl{ border-radius: var(--rs-radius-lg) !important; }
.shadow-soft{ box-shadow: var(--rs-shadow-sm) !important; }
.shadow-lift{ box-shadow: var(--rs-shadow) !important; }

.section     { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-sm  { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rs-primary); background: var(--rs-primary-050);
  padding: .45rem .9rem; border-radius: 999px;
}
.eyebrow-light { color: var(--rs-accent-100); background: rgba(255,255,255,.12); }

.section-title { font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.2; }
.lead-sm { color: var(--rs-ink-500); font-size: 1.02rem; line-height: 1.75; }

.ic { flex: none; vertical-align: -.15em; }

/* ---------------------------------------------------------------------
   TOMBOL
   ------------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 999px; padding: .68rem 1.4rem; transition: .18s ease; }
.btn-lg { padding: .85rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: .45rem 1rem; font-size: .875rem; }

.btn-primary {
  background: var(--rs-primary); border-color: var(--rs-primary);
  box-shadow: 0 8px 20px -10px rgba(26,86,219,.9);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--rs-primary-700); border-color: var(--rs-primary-700); transform: translateY(-1px);
}
.btn-outline-primary { border-color: var(--rs-primary); color: var(--rs-primary); }
.btn-outline-primary:hover { background: var(--rs-primary); border-color: var(--rs-primary); }
.btn-glass {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255,255,255,.24); color: #fff; }
.btn-emergency { background: var(--rs-danger); border-color: var(--rs-danger); color: #fff; }
.btn-emergency:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--rs-primary);
}
.link-arrow .ic { transition: transform .18s ease; }
.link-arrow:hover .ic { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   TOP BAR & NAVBAR
   ------------------------------------------------------------------- */
.topbar {
  background: var(--rs-ink); color: rgba(255,255,255,.82);
  font-size: .84rem; padding: .45rem 0;
}
.topbar a { color: rgba(255,255,255,.82); }
.topbar a:hover { color: var(--rs-accent-100); }
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--rs-line);
}
/* Efek buram hanya dipakai di layar besar.
   Di layar kecil, backdrop-filter membuat panel menu geser (position: fixed)
   terkurung di dalam header sehingga tingginya hanya setinggi header. */
@media (min-width: 992px) {
  .site-header { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
}

/* Saat panel menu geser terbuka: naikkan header di atas tombol melayang,
   lalu sembunyikan tombol WhatsApp & dock agar tidak menutupi isi menu. */
body.nav-open .site-header { z-index: 1050; }
body.nav-open .fab-wa,
body.nav-open .qa-dock { display: none !important; }
.offcanvas-nav .offcanvas-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.site-header.is-scrolled { box-shadow: var(--rs-shadow-sm); }

.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, var(--rs-primary), var(--rs-accent));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 18px -8px rgba(26,86,219,.8);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 13px; }
.brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.06rem; color: var(--rs-ink); line-height: 1.15; }
.brand-sub  { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-ink-300); }

.navbar-nav .nav-link {
  font-weight: 600; font-size: .95rem; color: var(--rs-ink-700);
  padding: .55rem .85rem !important; border-radius: 10px; transition: .15s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: var(--rs-primary); background: var(--rs-primary-050); }
.navbar-nav .nav-link.active { color: var(--rs-primary); background: var(--rs-primary-050); }

.dropdown-menu {
  border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
  box-shadow: var(--rs-shadow); padding: .5rem; min-width: 15rem; margin-top: .4rem;
}
.dropdown-item { border-radius: 9px; padding: .58rem .8rem; font-size: .92rem; font-weight: 500; color: var(--rs-ink-700); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--rs-primary-050); color: var(--rs-primary); }
.dropdown-item.active { background: var(--rs-primary-050); color: var(--rs-primary); font-weight: 700; }

/* Submenu tingkat 3 */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -.5rem; }

/* Animasi buka/tutup dropdown & submenu — layar besar (hover) */
@media (min-width: 992px) {
  .navbar-nav .dropdown-menu {
    display: block; visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .dropdown-submenu > .dropdown-menu { transform: translateY(-4px) translateX(10px); }

  .navbar-nav .dropdown:hover > .dropdown-menu,
  .navbar-nav .dropdown > .dropdown-menu.show,
  .dropdown-submenu:hover > .dropdown-menu,
  .dropdown-submenu > .dropdown-menu.show {
    visibility: visible; opacity: 1; pointer-events: auto;
    transform: translateY(0) translateX(0);
  }

  /* Panah menu berputar saat submenu terbuka */
  .navbar-nav .dropdown-toggle::after { transition: transform .25s ease; }
  .navbar-nav .dropdown:hover > .dropdown-toggle::after,
  .navbar-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-180deg); }

  .dropdown-submenu > .dropdown-toggle::after { transition: transform .25s ease; transform: rotate(-90deg); }
  .dropdown-submenu:hover > .dropdown-toggle::after,
  .dropdown-submenu > .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-90deg) translateX(2px); }
}

/* Item menu bergeser halus saat disentuh kursor */
.dropdown-item { transition: background .18s ease, color .18s ease, transform .18s ease; }
.dropdown-item:hover, .dropdown-item:focus { transform: translateX(4px); }

@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu { position: static; box-shadow: none; border: 0; padding-left: .75rem; }
}

/* Offcanvas menu di layar kecil */
/* PENTING: hanya berlaku di layar kecil. Bila dipakai juga di layar besar,
   dropdown akan ikut mendorong isi navbar sehingga tata letaknya berantakan. */
@media (max-width: 991.98px) {
  .offcanvas-nav .nav-link { padding: .7rem .9rem !important; font-size: 1rem; }
  .offcanvas-nav .dropdown-menu {
    display: block !important; position: static !important; box-shadow: none; border: 0;
    padding: 0 0 0 .75rem; margin-top: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .32s ease, opacity .28s ease, padding .28s ease;
  }
  .offcanvas-nav .dropdown-menu.show {
    max-height: 60vh; opacity: 1; padding: 0 0 .25rem .75rem;
  }
  /* Panah menu berputar saat submenu terbuka (klik di layar kecil) */
  .offcanvas-nav .dropdown-toggle::after { transition: transform .25s ease; }
  .offcanvas-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-180deg); }
}

/* Layar besar: navbar tetap satu baris walau dropdown terbuka */
@media (min-width: 992px) {
  .site-header .navbar > .container { flex-wrap: nowrap; }
  .site-header .btn { white-space: nowrap; }
  .offcanvas-nav .offcanvas-body { min-width: 0; }
  .offcanvas-nav .navbar-nav { flex-wrap: nowrap; justify-content: center; }
  .navbar-nav .nav-link { white-space: nowrap; }
}

/* Layar 992–1279 px: rapatkan jarak menu agar tetap muat satu baris */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .navbar-nav .nav-link { padding: .5rem .5rem !important; font-size: .875rem; }
  .brand-name { font-size: .98rem; }
  .brand-sub  { font-size: .62rem; letter-spacing: .06em; }
}

/* Layar kecil: nama tetap dua baris, ukurannya dikecilkan agar muat */
@media (max-width: 575.98px) {
  .brand-name { font-size: .92rem; }
  .brand-sub  { font-size: .58rem; letter-spacing: .05em; }
}

/* ---------------------------------------------------------------------
   HERO / CAROUSEL SLIDER
   ------------------------------------------------------------------- */
.hero { position: relative; background: #0b1729; }
.hero .carousel, .hero .carousel-inner, .hero .carousel-item { height: 100%; }

.hero-slide {
  position: relative; min-height: clamp(430px, 68vh, 640px);
  display: flex; align-items: center;
}
.hero-slide .hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-slide .hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  animation: heroZoom 14s ease-out both;
}
.carousel-item.active .hero-bg img { animation: heroZoom 14s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }

.hero-slide .hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,20,38,.94) 0%, rgba(9,20,38,.86) 34%, rgba(9,20,38,.45) 66%, rgba(9,20,38,.3) 100%),
    radial-gradient(circle at 82% 78%, rgba(13,154,168,.35), transparent 55%);
}
.hero-slide.no-photo .hero-bg {
  background:
    radial-gradient(circle at 14% 22%, rgba(26,86,219,.55), transparent 45%),
    radial-gradient(circle at 84% 76%, rgba(13,154,168,.5), transparent 48%),
    linear-gradient(135deg, #0b1729, #132845);
}
.hero-slide.no-photo .hero-bg::after { background: none; }

.hero-body { position: relative; z-index: 2; width: 100%; padding: clamp(2.75rem, 6vw, 4rem) 0 clamp(4rem, 8vw, 5.5rem); }
.hero-title {
  color: #fff; font-size: clamp(1.85rem, 4.6vw, 3.25rem); line-height: 1.12; margin: 1.1rem 0 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.3);
}
.hero-text { color: rgba(255,255,255,.86); font-size: clamp(.98rem, 1.4vw, 1.12rem); line-height: 1.75; max-width: 34rem; margin-top: 1.1rem; }

.hero .carousel-indicators { margin-bottom: clamp(3.25rem, 6vw, 4.25rem); }
.hero .carousel-indicators [data-bs-target] {
  width: 30px; height: 4px; border-radius: 4px; border: 0;
  background: rgba(255,255,255,.4); opacity: 1; transition: .25s;
}
.hero .carousel-indicators .active { background: #fff; width: 46px; }
.hero .carousel-control-prev, .hero .carousel-control-next { width: 5%; opacity: 0; transition: .2s; }
.hero:hover .carousel-control-prev, .hero:hover .carousel-control-next { opacity: .75; }


/* ---------------------------------------------------------------------
   QUICK ACTION
   ------------------------------------------------------------------- */
.quick-actions { position: relative; z-index: 5; margin-top: -2.5rem; }
@media (max-width: 767.98px) { .quick-actions { margin-top: -1.5rem; } }

.qa-card {
  display: flex; align-items: center; gap: .9rem; height: 100%;
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
  padding: 1.05rem 1.15rem; box-shadow: var(--rs-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qa-card:hover { transform: translateY(-3px); box-shadow: var(--rs-shadow); border-color: transparent; }
.qa-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.qa-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--rs-ink); font-size: .98rem; line-height: 1.25; }
.qa-sub { font-size: .78rem; color: var(--rs-ink-500); margin-top: .12rem; }

/* Di layar sangat kecil: ikon di atas, tulisan di bawah, agar tidak berdesakan */
@media (max-width: 575.98px) {
  .qa-card { flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem .8rem; }
  .qa-icon { width: 40px; height: 40px; border-radius: 11px; }
  .qa-label { font-size: .86rem; }
}

.qa-danger  .qa-icon { background: #fee2e2; color: #dc2626; }
.qa-primary .qa-icon { background: var(--rs-primary-050); color: var(--rs-primary); }
.qa-info    .qa-icon { background: var(--rs-accent-050); color: var(--rs-accent); }
.qa-success .qa-icon { background: #dcfce7; color: #16a34a; }
.qa-warning .qa-icon { background: #fef3c7; color: #d97706; }
.qa-dark    .qa-icon { background: #e2e8f0; color: var(--rs-ink); }
.qa-danger:hover  { box-shadow: 0 14px 34px -16px rgba(220,38,38,.7); }
.qa-primary:hover { box-shadow: 0 14px 34px -16px rgba(26,86,219,.7); }
.qa-info:hover    { box-shadow: 0 14px 34px -16px rgba(13,154,168,.7); }
.qa-success:hover { box-shadow: 0 14px 34px -16px rgba(22,163,74,.7); }

/* Quick action melayang di layar kecil */
.qa-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--rs-line); display: none;
  padding: .4rem .25rem calc(.4rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px -14px rgba(15,27,45,.4);
}
.qa-dock a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .35rem .2rem; font-size: .68rem; font-weight: 700; color: var(--rs-ink-500); text-align: center;
}
.qa-dock a .ic { color: var(--rs-primary); }
.qa-dock a.is-danger .ic { color: var(--rs-danger); }
@media (max-width: 767.98px) {
  .qa-dock { display: flex; }
  body { padding-bottom: 62px; }
  .fab-wa { bottom: 76px !important; }
}

/* ---------------------------------------------------------------------
   KARTU & MEDIA
   ------------------------------------------------------------------- */
/* CATATAN: JANGAN memberi `height: 100%` di sini.
   Bila kartu ini berada di dalam kolom Bootstrap bersama elemen lain,
   tingginya akan memenuhi seluruh kolom sehingga isi di bawahnya
   tertimpa CTA dan footer. Untuk kartu yang perlu sama tinggi
   dalam satu baris, tambahkan kelas `h-100` pada elemennya. */
.card-rs {
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
  box-shadow: var(--rs-shadow-sm); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-rs:hover { transform: translateY(-4px); box-shadow: var(--rs-shadow); }
.card-rs .card-body { padding: 1.35rem; }
.card-title-rs { font-size: 1.06rem; font-weight: 800; color: var(--rs-ink); line-height: 1.35; }

.icon-badge {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: var(--rs-primary-050); color: var(--rs-primary); transition: .2s;
}
.card-rs:hover .icon-badge { background: var(--rs-primary); color: #fff; }
.icon-badge-accent { background: var(--rs-accent-050); color: var(--rs-accent); }

.media-box { position: relative; width: 100%; overflow: hidden; background: var(--rs-surface); }
.media-box img { width: 100%; height: 100%; display: block; transition: transform .4s ease; }
.card-rs:hover .media-box img { transform: scale(1.05); }

.media-ph {
  position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.75);
}
.media-ph::after {
  content: ''; position: absolute; inset: 0; opacity: .28;
  background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 14px 14px;
}
.media-ph.v1 { background: linear-gradient(135deg, #1a56db, #38bdf8); }
.media-ph.v2 { background: linear-gradient(135deg, #0d9aa8, #34d399); }
.media-ph.v3 { background: linear-gradient(135deg, #17439f, #0d9aa8); }
.media-ph.v4 { background: linear-gradient(135deg, #334155, #1a56db); }

/* Kartu layanan dengan foto + overlay warna (seperti slider beranda) */
.card-service-media { position: relative; }
.card-service-media .icon-badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.card-service-media .chip {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
}
.chip-glass {
  background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.media-box.media-tint::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(165deg, rgba(15,27,45,.12) 0%, rgba(15,27,45,.62) 100%);
  transition: background .3s ease;
}
.card-rs:hover .media-box.media-tint::after {
  background: linear-gradient(165deg, rgba(26,86,219,.55) 0%, rgba(13,154,168,.62) 100%);
}
.card-rs.card-service:hover .card-service-media .icon-badge {
  background: rgba(255,255,255,.3); color: #fff;
}

/* -------------------------------------------------------------------
   MITRA — teks berjalan (marquee) dengan logo di samping tiap nama
   Isi digandakan dua kali di HTML, lalu track digeser -50% sehingga
   perputarannya menyambung tanpa terlihat melompat.
   ------------------------------------------------------------------- */
.mitra-marquee {
  position: relative; overflow: hidden; padding: .25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}
.mitra-track { display: flex; width: max-content; animation: mitra-scroll 38s linear infinite; }
.mitra-marquee:hover .mitra-track,
.mitra-marquee:focus-within .mitra-track { animation-play-state: paused; }

.mitra-list {
  display: flex; align-items: center; gap: .75rem;
  list-style: none; margin: 0; padding: 0 .375rem;
}
.mitra-item { flex: none; }
.mitra-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--rs-line);
  border-radius: 999px; padding: .5rem 1.1rem .5rem .55rem;
  text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.mitra-chip:hover { border-color: var(--rs-primary); box-shadow: var(--rs-shadow-sm); transform: translateY(-1px); }
.mitra-logo {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--rs-primary-050); color: var(--rs-primary); overflow: hidden;
}
.mitra-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.mitra-name { font-size: .86rem; font-weight: 700; color: var(--rs-ink); }

@keyframes mitra-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 575.98px) {
  .mitra-marquee { -webkit-mask-image: none; mask-image: none; }
  .mitra-track { animation-duration: 26s; }
  .mitra-name { font-size: .8rem; }
}

/* Hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
  .mitra-track { animation: none; }
  .mitra-marquee { overflow-x: auto; }
}

/* Galeri foto tambahan pada halaman detail layanan */
.svc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 575.98px) { .svc-gallery { grid-template-columns: repeat(2, 1fr); } }
.svc-gallery a { position: relative; display: block; border-radius: var(--rs-radius-sm); overflow: hidden; }
.svc-gallery .media-box { aspect-ratio: 4 / 3; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--rs-primary-050); color: var(--rs-primary);
  font-size: .74rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px;
}
.chip-accent { background: var(--rs-accent-050); color: var(--rs-accent); }
.chip-muted  { background: var(--rs-surface); color: var(--rs-ink-500); }
.chip-danger { background: #fee2e2; color: var(--rs-danger); }
.chip-success{ background: #dcfce7; color: #16a34a; }

.stars { display: inline-flex; gap: 1px; }
.star-on  { color: #f59e0b; }
.star-off { color: #d7dee9; }

/* Statistik */
.stat-strip {
  background: #fff; border: 1px solid var(--rs-line); border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow); overflow: hidden;
}
.stat-cell { padding: clamp(1.1rem, 2.5vw, 1.9rem) .75rem; text-align: center; border-right: 1px solid var(--rs-line); }
.stat-cell:last-child { border-right: 0; }
@media (max-width: 767.98px) {
  .stat-cell:nth-child(2n) { border-right: 0; }
  .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rs-line); }
}
.stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--rs-ink); }
.stat-label { font-size: .82rem; color: var(--rs-ink-500); }

/* Timeline profil */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before { content: ''; position: absolute; left: .6rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--rs-line); }
.timeline-item { position: relative; padding-bottom: 1.9rem; }
.timeline-item::before {
  content: ''; position: absolute; left: -1.94rem; top: .35rem; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--rs-primary);
}

/* Halaman judul */
.page-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0f1b2d, #17439f 60%, #0d9aa8 140%);
  color: #fff; padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.page-hero .container { position: relative; z-index: 2; }

/* Foto latar pada judul halaman, dengan overlay warna seperti slider beranda */
.page-hero-bg { position: absolute; inset: 0; z-index: 1; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,20,38,.94) 0%, rgba(9,20,38,.82) 45%, rgba(9,20,38,.55) 100%),
    radial-gradient(circle at 85% 80%, rgba(13,154,168,.35), transparent 55%);
}
.page-hero h1 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.page-hero p  { color: rgba(255,255,255,.78); max-width: 44rem; margin-bottom: 0; }
.breadcrumb-rs { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); font-size: .86rem; margin-bottom: .9rem; }
.breadcrumb-rs a { color: rgba(255,255,255,.75); }
.breadcrumb-rs a:hover { color: #fff; }
.breadcrumb-rs .breadcrumb-item.active { color: #fff; font-weight: 600; }
.breadcrumb-rs .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }

/* Accordion FAQ */
.accordion-rs .accordion-item { border: 1px solid var(--rs-line); border-radius: var(--rs-radius-sm) !important; margin-bottom: .75rem; overflow: hidden; }
.accordion-rs .accordion-button { font-weight: 700; color: var(--rs-ink); padding: 1.1rem 1.25rem; }
.accordion-rs .accordion-button:not(.collapsed) { background: var(--rs-primary-050); color: var(--rs-primary); box-shadow: none; }
.accordion-rs .accordion-button:focus { box-shadow: none; border-color: var(--rs-line); }
.accordion-rs .accordion-body { color: var(--rs-ink-500); line-height: 1.75; }

/* Filter pil */
.filter-pill {
  border: 1px solid var(--rs-line); background: #fff; color: var(--rs-ink-700);
  border-radius: 999px; padding: .45rem 1.05rem; font-size: .88rem; font-weight: 600; transition: .15s;
}
.filter-pill:hover { border-color: var(--rs-primary); color: var(--rs-primary); }
.filter-pill.active { background: var(--rs-primary); border-color: var(--rs-primary); color: #fff; }

/* Artikel */
.prose { color: var(--rs-ink-700); line-height: 1.85; font-size: 1.02rem; }
.prose p { margin-bottom: 1.15rem; }
.prose h2, .prose h3 { margin: 2rem 0 .75rem; }
.prose ul, .prose ol { margin-bottom: 1.15rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--rs-radius-sm); }

/* Jadwal dokter */
.sched-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem .9rem; border-radius: 10px; background: var(--rs-surface); margin-bottom: .5rem;
}
.sched-day { font-weight: 700; color: var(--rs-ink); min-width: 5rem; }
.sched-time { color: var(--rs-primary); font-weight: 600; }
.sched-loc { color: var(--rs-ink-500); font-size: .86rem; }

/* Footer */
.site-footer { background: var(--rs-ink); color: rgba(255,255,255,.7); }
.site-footer h5 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: var(--rs-accent-100); }
.footer-social {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: .18s;
}
.footer-social:hover { background: var(--rs-primary); color: #fff; transform: translateY(-2px); }

/* CTA */
.cta-band {
  background: linear-gradient(120deg, var(--rs-primary-700), var(--rs-primary) 45%, var(--rs-accent));
  color: #fff; border-radius: var(--rs-radius-lg); padding: clamp(1.75rem, 4vw, 3rem);
}
.cta-band h2 { color: #fff; }

/* Tombol WhatsApp melayang */
.fab-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 1040;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 12px 26px -10px rgba(37,211,102,.9);
  transition: transform .18s;
}
.fab-wa:hover { transform: scale(1.07); color: #fff; }

/* Penanda "klik untuk memperbesar" pada foto galeri */
.gal-zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(9,17,30,.34); color: #fff; opacity: 0; transition: opacity .18s ease;
}
.gal-zoom .ic { background: rgba(255,255,255,.2); border-radius: 50%; padding: 9px; width: 40px; height: 40px; }
.card-rs:hover .gal-zoom, .card-rs:focus-visible .gal-zoom { opacity: 1; }

/* -------------------------------------------------------------------
   Gambar isi halaman profil (potret, mis. lembar Maklumat Pelayanan)
   ------------------------------------------------------------------- */
.page-figure { margin: 0; text-align: center; }
.page-figure > a {
  position: relative; display: inline-block; max-width: 34rem; width: 100%;
  border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
  background: #fff; padding: .5rem; overflow: hidden;
  box-shadow: var(--rs-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.page-figure > a:hover { transform: translateY(-2px); box-shadow: var(--rs-shadow-lg, var(--rs-shadow-sm)); }
.page-figure img { display: block; width: 100%; height: auto; border-radius: var(--rs-radius-sm); }
.page-figure > a:hover .gal-zoom, .page-figure > a:focus-visible .gal-zoom { opacity: 1; }
.page-figure figcaption {
  margin-top: .75rem; font-size: .8rem; color: var(--rs-ink-300);
}

/* Lightbox galeri */
.lb-backdrop {
  position: fixed; inset: 0; z-index: 1080; background: rgba(9,17,30,.94);
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.lb-backdrop.show { display: flex; }
.lb-backdrop img { max-width: 100%; max-height: 84vh; border-radius: var(--rs-radius-sm); }
.lb-close { position: absolute; top: 18px; right: 20px; color: #fff; background: none; border: 0; }
.lb-caption { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: .9rem; }

/* Animasi muncul saat digulir */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide .hero-bg img { animation: none; }
  html { scroll-behavior: auto; }
  .navbar-nav .dropdown-menu, .dropdown-item, .navbar-nav .dropdown-toggle::after,
  .offcanvas-nav .dropdown-menu { transition: none !important; }
}

/* Cetak */
@media print {
  .site-header, .site-footer, .fab-wa, .qa-dock, .topbar, .quick-actions { display: none !important; }
}