/* =====================================================================
   Website publik — hijau lumut, tosca, kuning, putih, hitam
   Mengikuti mockup beranda: header dua baris, banner gambar penuh,
   kartu menumpuk di bawah banner, band statistik hijau, ikon alur
   bulat bercincin emas, kartu event, testimoni balon percakapan.
   Ganti warna brand cukup di blok :root di bawah.
   ===================================================================== */
:root {
	--rs-primary: #224912;          /* hijau brand: tombol, judul, ikon */
	--rs-primary-rgb: 34, 73, 18;
	--rs-primary-dark: #17330C;
	--rs-primary-light: #3E7426;
	--rs-primary-soft: #E9F0E4;
	--rs-dark: #224912;             /* latar footer & band */
	--rs-moss: #3E7426;
	--rs-tosca: #0B8276;
	--rs-accent: #FFD131;           /* kuning brand */
	--rs-accent-dark: #E9B80F;
	--rs-accent-soft: #FFF5D1;
	--rs-gold: #E9B80F;
	--rs-danger: #D62839;           /* khusus gawat darurat */
	--rs-danger-dark: #A9172A;
	--rs-success: #1F9D6B;
	--rs-ink: #1A1A1A;              /* hitam */
	--rs-muted: #5C6356;
	--rs-soft: #F4F8EF;
	--rs-border: #E3EADB;
	--rs-radius: 14px;
	--rs-radius-sig: 16px;
	--rs-shadow: 0 10px 28px -12px rgba(34, 73, 18, .28);
	--rs-shadow-lg: 0 24px 60px -18px rgba(34, 73, 18, .38);
	--rs-font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--rs-font-head: var(--rs-font);
	--rs-font-brand: 'Libre Baskerville', Georgia, 'Times New Roman', serif;

	--bs-body-font-family: var(--rs-font);
	--bs-body-font-size: 1rem;
	--bs-body-color: var(--rs-ink);
	--bs-primary: var(--rs-primary);
	--bs-primary-rgb: var(--rs-primary-rgb);
	--bs-link-color-rgb: var(--rs-primary-rgb);
	--bs-link-hover-color-rgb: 23, 51, 12;
	--bs-border-radius: .7rem;
}

body { -webkit-font-smoothing: antialiased; background: #fff; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--rs-font); font-weight: 800; color: var(--rs-ink); }
a { text-decoration: none; }
img { max-width: 100%; }
::selection { background: rgba(var(--rs-primary-rgb), .18); }

.btn { font-weight: 700; border-radius: 999px; padding: .6rem 1.35rem; }
.btn-lg { padding: .8rem 1.7rem; }
.btn-primary {
	--bs-btn-bg: var(--rs-primary); --bs-btn-border-color: var(--rs-primary);
	--bs-btn-hover-bg: var(--rs-primary-dark); --bs-btn-hover-border-color: var(--rs-primary-dark);
	--bs-btn-active-bg: var(--rs-primary-dark); --bs-btn-active-border-color: var(--rs-primary-dark);
	--bs-btn-disabled-bg: var(--rs-primary); --bs-btn-disabled-border-color: var(--rs-primary);
}
.btn-outline-primary {
	--bs-btn-color: var(--rs-primary); --bs-btn-border-color: rgba(var(--rs-primary-rgb), .4);
	--bs-btn-hover-bg: var(--rs-primary); --bs-btn-hover-border-color: var(--rs-primary);
	--bs-btn-active-bg: var(--rs-primary-dark); --bs-btn-active-border-color: var(--rs-primary-dark);
}
.btn-accent { background: var(--rs-accent); border-color: var(--rs-accent); color: var(--rs-ink); }
.btn-accent:hover, .btn-accent:focus { background: var(--rs-accent-dark); border-color: var(--rs-accent-dark); color: var(--rs-ink); }
.btn-soft { background: #fff; color: var(--rs-primary); border: 1px solid var(--rs-border); border-radius: 8px; padding: .55rem 1.15rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .3); }
.btn-soft:hover { background: var(--rs-primary); border-color: var(--rs-primary); color: #fff; }
.form-select, .form-control { border-radius: .7rem; border-color: var(--rs-border); }
.form-select:focus, .form-control:focus { border-color: var(--rs-primary); box-shadow: 0 0 0 .2rem rgba(var(--rs-primary-rgb), .15); }

.skip-link { position: absolute; z-index: 2000; left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }
.bg-soft { background: var(--rs-soft); }
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
.title-caps {
	text-align: center; text-transform: uppercase; letter-spacing: .12em; font-weight: 900;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem); color: var(--rs-ink); margin-bottom: 2.25rem;
}
.section-head { max-width: 720px; margin: 0 auto 2.75rem; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; margin-bottom: .75rem; }
.section-head p { color: var(--rs-muted); margin: 0; }
.section-kicker {
	display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--rs-moss); margin-bottom: .75rem;
}
.section-kicker::before { content: ''; width: 24px; height: 3px; border-radius: 3px; background: var(--rs-accent); }
@media (min-width: 992px) {
	.pimpinan-section .section-kicker,
	.section-akreditasi .section-kicker {
		font-size: .95rem;
		letter-spacing: .12em;
	}
	.pimpinan-section .section-kicker::before,
	.section-akreditasi .section-kicker::before {
		width: 28px;
		height: 4px;
	}
}
.icon-badge { width: 48px; height: 48px; flex: 0 0 48px; display: inline-grid; place-items: center; border-radius: 14px; background: var(--rs-primary-soft); color: var(--rs-primary); font-size: 1.3rem; }
.icon-badge-lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.7rem; border-radius: 18px; }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--rs-muted); }
.empty-state i { font-size: 2.6rem; display: block; margin-bottom: .75rem; opacity: .45; }
.prose { color: #2B2F27; line-height: 1.85; }
.link-arrow { font-weight: 800; font-size: .92rem; color: var(--rs-primary); display: inline-flex; align-items: center; gap: .4rem; }
.link-arrow i { transition: transform .2s; }
.link-arrow:hover i { transform: translateX(4px); }


/* =============================== Header =============================== */
.header-top { background: #fff; padding: 1.15rem 0 .65rem; }
.header-top .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .9rem; min-width: 0; }
.brand-logo { height: 84px; width: auto; }
.brand-mark { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; display: grid; place-items: center; color: var(--rs-accent); font-size: 2rem; background: var(--rs-primary); box-shadow: 0 0 0 4px var(--rs-accent); }
.brand-name { font-family: var(--rs-font-brand); font-weight: 700; font-size: clamp(1.05rem, 2.1vw, 1.65rem); color: var(--rs-ink); text-transform: uppercase; line-height: 1.15; letter-spacing: -.01em; }
.header-actions { align-items: center; gap: 1.75rem; }
/* Gambar aset punya margin transparan + bayangan: lebar & margin negatif (dalam % lebar tombol) hasil ukur kotak isinya. */
.antrian-link { display: inline-block; width: 236px; transition: transform .15s, filter .15s; }
.antrian-link img { display: block; width: 125.95%; max-width: none; height: auto; margin: -13.35% 0 -13.66% -13.51%; }
.antrian-link:hover, .antrian-link:focus { transform: translateY(2px); filter: brightness(1.06); }
.social-circles { display: flex; flex-wrap: wrap; gap: .5rem; }
.social-circles a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: transform .2s; }
.social-circles a img { display: block; width: 100%; height: 100%; }
.social-circles a:hover { transform: translateY(-2px) scale(1.06); }
.social-circles a.social-bi { font-size: 1.05rem; background: var(--rs-accent); color: var(--rs-primary); border: 2px solid var(--rs-primary); }
.navbar-toggler { border: 0; font-size: 2rem; color: var(--rs-primary); padding: .2rem .4rem; }
.navbar-toggler:focus { box-shadow: none; }

.site-nav { background: #fff; padding: 0; transition: box-shadow .25s; }
.site-nav.is-scrolled { box-shadow: 0 10px 24px -14px rgba(34, 73, 18, .45); }
.site-nav .nav-link { position: relative; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: .95rem; color: var(--rs-ink); padding: 1rem .25rem !important; }
.site-nav .nav-link::after { content: ''; position: absolute; left: .25rem; right: .25rem; bottom: .55rem; height: 3px; border-radius: 3px; background: var(--rs-accent); transform: scaleX(0); transition: transform .25s; }
.site-nav .nav-link:hover, .site-nav .nav-link.active, .site-nav .nav-link.show { color: var(--rs-primary); }
.site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); }
/* ::after pada dropdown dipakai garis kuning (bukan panah caret Bootstrap): hapus gaya segitiga caret saja. */
.site-nav .dropdown-toggle::after { margin: 0; vertical-align: initial; border: 0; }
.site-nav .dropdown-menu { border: 0; border-radius: 12px; box-shadow: var(--rs-shadow-lg); padding: .5rem; margin-top: 0; }
.site-nav .dropdown-item { border-radius: 8px; font-weight: 700; padding: .55rem .9rem; }
.site-nav .dropdown-item.active, .site-nav .dropdown-item:active { background: var(--rs-primary-soft); color: var(--rs-primary); }
.mobile-actions { display: grid; justify-items: center; gap: .9rem; padding: .75rem 0 1.25rem; }
.mobile-actions .antrian-link { width: 210px; }
.mobile-actions .social-circles { justify-content: center; }

/* ============================ Banner beranda ============================ */
.hero-banner { position: relative; background: #fff; }
/* Banner diunggah dari Admin dengan rasio 3:1 (mis. 2172x724) dan ditampilkan utuh tanpa crop.
   Desktop: kartu jadwal menumpang di batas bawah banner, indikator di atas kartu.
   Tablet/HP: kartu di bawah banner, indikator di antara banner dan kartu. */
.banner-img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; background: var(--rs-primary-soft); }
.hero-banner .carousel-indicators { position: static; margin: .7rem 0 0; }
.hero-banner .carousel-indicators [data-bs-target] { width: 26px; height: 5px; border-radius: 5px; border: 0; background: var(--rs-primary); opacity: .25; }
.hero-banner .carousel-indicators .active { opacity: 1; width: 38px; }
.hero-banner .carousel-control-prev, .hero-banner .carousel-control-next { width: 5%; bottom: calc(.7rem + 5px); }

/* ===================== Kartu menumpuk di bawah banner ===================== */
/* overflow-x: clip memotong bayangan transparan gambar kartu yang menjorok ke luar layar HP (tanpa membuat area scroll). */
.hero-cards { position: relative; z-index: 3; padding: 1.4rem 0 .5rem; overflow-x: clip; }
.hero-cards-grid { display: grid; grid-template-columns: 1fr 2.03fr 1fr; gap: 1.6rem; max-width: 1000px; margin: 0 auto; align-items: center; }
.hc-img { display: block; transition: transform .2s; }
.hc-img:hover, .hc-img:focus { transform: translateY(-3px); }
.hc-disabled, .hc-disabled:hover { cursor: not-allowed; transform: none; }
.hc-img img { display: block; max-width: none; height: auto; }
.hc-promo img { width: 112.46%; margin: -10.77% 0 -9.38% -6%; }
.hc-igd img { width: 115.74%; margin: -10.49% 0 -7.15% -9.38%; }
.hc-jadwal { position: relative; padding: .85rem 1.4rem 1.75rem; background: linear-gradient(115deg, #E4EAE1 0%, #EDF1EB 45%, #FBFBFA 100%); box-shadow: 9px 10px 8px -2px rgba(0, 0, 0, .2); }
.hc-jadwal h2 { font-size: 1.12rem; font-weight: 900; color: #000; text-align: center; margin-bottom: .7rem; }
.hc-selects { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hc-selects .form-select { height: 34px; padding: .2rem 2.4rem .2rem .9rem; font-size: .9rem; font-weight: 600; color: var(--rs-primary); background: url('../img/aset-13.png') center / 100% 100% no-repeat; border: 0; border-radius: 5px; box-shadow: none; }
.hc-selects .form-select:focus { box-shadow: 0 0 0 .2rem rgba(var(--rs-primary-rgb), .25); }
/* Dropdown kustom poli & dokter (initPilih di public.js). Tombol memakai latar aset-13 seperti desain;
   <select> asli disembunyikan dan tetap dipakai untuk submit. */
.pilih { position: relative; min-width: 0; }
.pilih-btn { display: flex; align-items: center; width: 100%; height: 34px; padding: .2rem 2.4rem .2rem .9rem; border: 0; border-radius: 5px; background: url('../img/aset-13.png') center / 100% 100% no-repeat; color: var(--rs-primary); font-size: .9rem; font-weight: 700; text-align: left; cursor: pointer; transition: filter .15s; }
.pilih-btn:hover { filter: brightness(.97); }
.pilih-btn:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(var(--rs-primary-rgb), .3); }
.pilih-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilih.is-placeholder .pilih-label { color: #4D5A47; font-weight: 600; }
.pilih-panel { position: absolute; z-index: 30; top: calc(100% + .45rem); left: 0; min-width: 100%; width: max-content; max-width: min(340px, 86vw); padding: .45rem; background: #fff; border: 1px solid rgba(34, 73, 18, .1); border-radius: 14px; box-shadow: 0 22px 44px -18px rgba(18, 40, 8, .45), 0 4px 12px -6px rgba(18, 40, 8, .2); animation: pilih-masuk .16s ease-out; }
.hc-selects > .pilih:last-child .pilih-panel { left: auto; right: 0; }
.pilih-cari { position: relative; margin: .1rem .1rem .45rem; }
.pilih-cari i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--rs-muted); font-size: .85rem; pointer-events: none; }
.pilih-cari input { width: 100%; height: 36px; padding: .3rem .75rem .3rem 2.1rem; border: 1px solid var(--rs-border); border-radius: 10px; background: #F5F8F3; font-size: .88rem; color: var(--rs-ink); }
.pilih-cari input:focus { outline: 0; border-color: var(--rs-primary); background: #fff; box-shadow: 0 0 0 .18rem rgba(var(--rs-primary-rgb), .15); }
.pilih-cari input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23224912' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pilih-list { position: relative; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; outline: 0; }
.pilih-item { position: relative; display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border-radius: 10px; color: var(--rs-ink); cursor: pointer; }
.pilih-item.is-active { background: #EEF4E9; }
.pilih-item[aria-selected="true"] { background: var(--rs-primary-soft); }
.pilih-item.is-semua { margin-bottom: .45rem; }
.pilih-item.is-semua::after { content: ''; position: absolute; left: .55rem; right: .55rem; bottom: -.25rem; height: 1px; background: var(--rs-border); }
.pilih-ikon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--rs-primary-soft); color: var(--rs-primary); font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.pilih-ikon .bi { font-size: 1.05rem; }
.pilih-item.is-semua .pilih-ikon { background: var(--rs-accent); }
.pilih-item[aria-selected="true"] .pilih-ikon { background: var(--rs-primary); color: #fff; }
/* Foto dokter (data-foto): bulat penuh, dipotong dari atas karena foto dokter berasio potret 3:4. */
.pilih-ikon.has-foto { overflow: hidden; }
.pilih-ikon img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pilih-item[aria-selected="true"] .pilih-ikon.has-foto { box-shadow: 0 0 0 2px var(--rs-primary); }
.pilih-teks { display: grid; min-width: 0; line-height: 1.25; }
.pilih-teks strong { font-size: .9rem; font-weight: 700; }
.pilih-teks small { font-size: .74rem; color: var(--rs-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilih-item.is-semua strong { color: var(--rs-primary); }
.pilih-cek { margin-left: auto; padding-left: .5rem; color: var(--rs-primary); font-size: 1.15rem; visibility: hidden; }
.pilih-item[aria-selected="true"] .pilih-cek { visibility: visible; }
.pilih-kosong { margin: 0; padding: .9rem .75rem; text-align: center; font-size: .85rem; color: var(--rs-muted); }
@keyframes pilih-masuk { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.btn-cari-img { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: 128px; padding: 0; border: 0; background: none; transition: filter .15s; }
.btn-cari-img img { display: block; width: 118.09%; max-width: none; height: auto; margin: -11.95% 0 -13.31% -9.56%; }
.btn-cari-img:hover, .btn-cari-img:focus { filter: brightness(1.08); }

/* ============================ Selamat datang ============================ */
.welcome { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 500px; padding: 6.5rem 0 4rem; }
.welcome-media { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
.welcome-media img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
.welcome .container { position: relative; z-index: 1; width: 100%; }
.welcome-copy { width: 52%; margin-left: auto; }
.welcome-copy h2 { color: var(--rs-primary); font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 1.85rem); margin-bottom: 1.4rem; }
.welcome-copy p { color: var(--rs-ink); font-size: 1rem; line-height: 1.55; margin-bottom: 1.1rem; max-width: 520px; }
.welcome-copy .btn-soft { margin-top: .9rem; border-radius: 4px; font-size: .9rem; font-weight: 700; padding: .5rem 1rem; }
/* Semua slide Tentang Kami bergantian (initWelcomeRotator), bukan bergeser seperti banner:
   gambar saling memudar (crossfade); teks lama memudar hilang dulu, lalu teks berikutnya muncul perlahan.
   Semua teks ditumpuk di sel grid yang sama, jadi tinggi blok = teks terpanjang dan tombol tidak melompat. */
.welcome-media img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.welcome-media img.is-active { opacity: 1; }
.welcome-stack { display: grid; }
.welcome-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.welcome-text.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease .7s, visibility 0s linear .7s; }

/* ============================ Band statistik ============================ */
.stats-band { position: relative; color: #fff; padding: 2.75rem 0; background: linear-gradient(100deg, #163009 0%, var(--rs-primary) 38%, var(--rs-primary-light) 75%, #6E9E4F 100%); }
.leaf { position: absolute; width: 170px; height: 85px; border-radius: 0 100% 0 100%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.leaf-1 { left: 26%; top: 10px; transform: rotate(-18deg); }
.leaf-2 { right: 7%; bottom: 8px; transform: rotate(14deg); background: rgba(255, 209, 49, .12); }
.leaf-3 { right: 2%; top: 12px; width: 120px; height: 60px; transform: rotate(-40deg); }
.stats-band .container { position: relative; z-index: 1; }
.stats-inner { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; }
.stats-inner-no-mascot { grid-template-columns: 1fr; }
.stats-maskot { position: relative; height: 180px; }
.stats-maskot img { position: absolute; left: 50%; bottom: -2.75rem; transform: translateX(-50%); height: 270px; width: auto; max-width: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.stats-grid-no-mascot { grid-column: 1 / -1; }
.stat strong { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: .55rem; white-space: nowrap; }
.stat p { font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .92); margin: 0; max-width: 190px; }

/* ============================ Layanan unggulan ============================ */
.title-caps { font-size: clamp(1.4rem, 2.3vw, 1.75rem); letter-spacing: .1em; }
.layanan-section { padding-top: 5rem; }
/* 4 kartu per baris (2 di HP, lihat RESPONSIF); baris terakhir yang tidak penuh ditaruh di tengah. */
.layanan-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 1060px; margin: 0 auto; }
.layanan-card { flex: 0 0 calc((100% - 6rem) / 4); display: block; border-radius: 12px; overflow: hidden; background: var(--rs-primary); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .45); }
.layanan-img { display: block; aspect-ratio: 13 / 10; overflow: hidden; background: var(--rs-primary-soft); }
.layanan-img img { width: 100%; height: 100%; object-fit: cover; }
.layanan-name { display: block; padding: .8rem .75rem .9rem; text-align: center; font-size: 1.22rem; font-weight: 700; color: #fff; background: var(--rs-primary); }

/* ============================ Alur pelayanan ============================ */
.alur-section { background: radial-gradient(ellipse at 50% 0, #DDE9D3 0%, #EEF4E9 45%, #F8FBF5 80%, #fff 100%); box-shadow: inset 0 12px 18px -16px rgba(0, 0, 0, .25), inset 0 -12px 18px -16px rgba(0, 0, 0, .15); }
.alur-subtitle { text-align: center; font-size: .95rem; color: var(--rs-ink); margin-bottom: 2.25rem; }
.alur-circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 1.25rem; }
.alur-circle-item { display: flex; flex-direction: column; align-items: center; width: 200px; color: var(--rs-ink); }
.alur-circle {
	position: relative; z-index: 0; width: 98px; height: 98px; margin: 4px; border-radius: 50%; display: grid; place-items: center; font-size: 2.7rem; color: #fff;
	background: radial-gradient(circle at 35% 30%, #3E7426, var(--rs-primary) 60%, #17330C 100%);
	border: 4px solid var(--rs-gold); box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0, 0, 0, .08), 0 12px 20px -8px rgba(0, 0, 0, .5); transition: transform .25s;
}
.alur-circle-item:hover .alur-circle { transform: translateY(-4px) scale(1.05); }
.alur-art { display: block; width: 106px; height: 106px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .28)); transition: transform .25s; }
.alur-art img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.alur-circle-item:hover .alur-art { transform: translateY(-4px) scale(1.05); }
/* Label lebih dari dua kata dipecah dua baris oleh label_dua_baris() (<br>). Semua pill berukuran sama
   seperti mockup: selebar kolom item dan setinggi dua baris; label satu baris berada di tengah. */
.alur-pill { position: relative; z-index: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: calc(2.6em + 1.2rem); margin-top: .7rem; padding: .6rem .6rem; border-radius: 999px; text-align: center; font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--rs-primary); background: var(--rs-accent); box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .35); }
.alur-circle-item:hover .alur-pill { background: var(--rs-primary); color: #fff; }

/* =============================== Event =============================== */
.event-section { padding: 4.5rem 0 3.5rem; overflow: hidden; }
.event-wrap { display: flex; align-items: center; gap: 2.25rem; padding-left: max(1rem, calc((100vw - var(--rs-content, 1200px)) / 2)); }
.event-head { flex: 0 0 auto; text-align: right; }
.event-title { text-transform: uppercase; letter-spacing: .06em; font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; margin: 0 0 .75rem; }
.event-all { font-weight: 800; font-size: .88rem; color: var(--rs-primary); display: inline-flex; gap: .35rem; align-items: center; }
.event-track { flex: 1; min-width: 0; display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 1rem 1rem .25rem; scrollbar-width: thin; }
.event-card { position: relative; flex: 0 0 430px; aspect-ratio: 430 / 235; display: block; overflow: hidden; border-radius: 4px; scroll-snap-align: start; background: var(--rs-primary-soft); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }
.event-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.event-card:hover img { transform: scale(1.05); }
.event-overlay { position: absolute; inset: auto 0 0 0; padding: 3rem 1rem .85rem; color: #fff; background: linear-gradient(to top, rgba(12, 24, 6, .95) 0%, rgba(12, 24, 6, .65) 50%, transparent 100%); }
.event-overlay strong { display: block; font-size: .98rem; font-weight: 800; line-height: 1.3; }
.event-overlay small { display: block; margin-top: .3rem; font-size: .72rem; line-height: 1.4; opacity: .9; }

/* ============================== Testimoni ============================== */
.testi-section { --testi-w: 236px; padding: 1rem 0 3.5rem; }
.testi-track { position: relative; display: flex; align-items: flex-start; gap: .4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 1rem 1rem; scrollbar-width: thin; }
.testi-track > :first-child { margin-left: auto; }
.testi-track > :last-child { margin-right: auto; }
/* Balon = gambar aset-25 (543x508; 5 bintang tercetak, bayangan transparan ±21px di tepi).
   Padding (pecahan lebar kartu) menaruh teks di bawah bintang (y 62-98) dan di dalam kotak (y 23-450).
   position: relative wajib: teks .visually-hidden (absolute) di dalamnya harus ikut terpotong deret yang di-scroll,
   kalau tidak ia melebarkan halaman dan browser HP memperkecil seluruh tampilan. */
.testi-bubble { position: relative; flex: 0 0 var(--testi-w); aspect-ratio: 543 / 508; overflow: hidden; margin: 0; padding: calc(var(--testi-w) * .206) calc(var(--testi-w) * .085) calc(var(--testi-w) * .15); text-align: center; background: url('../img/aset-25.png') center / 100% 100% no-repeat; scroll-snap-align: start; }
.testi-bubble figcaption { margin: 0 0 .3rem; font-size: .74rem; font-weight: 900; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; color: #000; }
.testi-bubble blockquote { margin: 0; font-size: .7rem; line-height: 1.45; color: var(--rs-ink); display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.testi-slider { position: relative; }
/* Tombol sebelumnya/berikutnya hanya tampil di HP (lihat RESPONSIF). */
.testi-nav { display: none; }

/* ============================ Halaman dalam ============================ */
.page-hero {
	position: relative; overflow: hidden; padding: 3.75rem 0 3.25rem; color: #fff;
	background: radial-gradient(circle at 88% 18%, rgba(255, 209, 49, .25) 0, transparent 30%), linear-gradient(115deg, #163009 0%, var(--rs-primary) 55%, var(--rs-primary-light) 100%);
}
.page-hero::after { content: ''; position: absolute; right: -40px; bottom: -50px; width: 260px; height: 130px; border-radius: 0 100% 0 100%; background: rgba(255, 255, 255, .07); transform: rotate(-20deg); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-weight: 900; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: .8rem 0 .5rem; }
.page-hero .lead { color: rgba(255, 255, 255, .85); max-width: 680px; margin: 0; }
.page-hero .breadcrumb { margin: 0; display: inline-flex; padding: .35rem .95rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .85rem; --bs-breadcrumb-divider-color: rgba(255, 255, 255, .55); --bs-breadcrumb-item-active-color: var(--rs-accent); }
.page-hero .breadcrumb a { color: #fff; }

/* ---------- Kartu fasilitas & filter ---------- */
.fasilitas-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--rs-radius); overflow: hidden; box-shadow: var(--rs-shadow); color: var(--rs-ink); transition: transform .3s, box-shadow .3s; }
.fasilitas-card:hover { transform: translateY(-6px); box-shadow: var(--rs-shadow-lg); color: var(--rs-ink); }
.fasilitas-thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; overflow: hidden; background: var(--rs-primary-soft); }
.fasilitas-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.fasilitas-card:hover .fasilitas-thumb img { transform: scale(1.07); }
.fasilitas-thumb .badge-kategori { position: absolute; left: 1rem; top: 1rem; z-index: 2; background: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.thumb-placeholder { width: 100%; height: 100%; min-height: 160px; display: grid; place-items: center; font-size: 3rem; color: var(--rs-primary); background: linear-gradient(140deg, var(--rs-primary-soft), var(--rs-accent-soft)); }
.thumb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; color: #fff; font-weight: 700; background: rgba(34, 73, 18, .6); opacity: 0; transition: opacity .25s; }
.fasilitas-thumb:hover .thumb-overlay, .fasilitas-thumb:focus-visible .thumb-overlay { opacity: 1; }
.fasilitas-body { padding: 1.3rem 1.35rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.fasilitas-body h2, .fasilitas-body h3 { font-size: 1.1rem; margin: 0 0 .5rem; line-height: 1.35; }
.fasilitas-body p { color: var(--rs-muted); font-size: .95rem; flex: 1; line-height: 1.6; }
.badge-kategori { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--rs-primary); background: var(--rs-primary-soft); padding: .35rem .75rem; border-radius: 999px; }
.link-more { font-weight: 800; color: var(--rs-primary); font-size: .88rem; display: inline-flex; align-items: center; gap: .4rem; }
.link-more i { transition: transform .2s; }
.fasilitas-card:hover .link-more i, .link-more:hover i { transform: translateX(4px); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-pill { border: 1px solid var(--rs-border); background: #fff; color: #2B2F27; font-weight: 700; font-size: .86rem; padding: .5rem 1rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .45rem; transition: all .2s; }
.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; box-shadow: 0 10px 20px -10px rgba(var(--rs-primary-rgb), .7); }
.filter-pill .count { font-size: .7rem; background: rgba(0, 0, 0, .06); border-radius: 999px; padding: .1rem .5rem; }
.filter-pill.active .count { background: var(--rs-accent); color: var(--rs-ink); }
.filter-search { position: relative; min-width: 280px; }
.filter-search i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--rs-muted); }
.filter-search .form-control { padding-left: 2.75rem; border-radius: 999px; }
.filter-result { min-height: 1.5rem; }
.filter-item { transition: opacity .3s, transform .3s; }
.filter-item.is-hiding { opacity: 0; transform: scale(.96); }
.filter-item.is-hidden { display: none; }
.modal-content { border: 0; border-radius: 18px; }
.modal-media { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--rs-primary-soft); }
.modal-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Detail fasilitas ---------- */
.detail-media { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--rs-shadow-lg); background: var(--rs-primary-soft); }
.detail-media img { width: 100%; height: 100%; object-fit: cover; }
.side-card { background: #fff; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: 1.6rem; }
.side-card-dark { background: var(--rs-dark); border-color: var(--rs-dark); color: rgba(255, 255, 255, .85); }
.side-card-dark h2 { color: #fff; }
@media (min-width: 992px) { aside .side-card:first-child { position: sticky; top: 90px; } }
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li + li { border-top: 1px solid var(--rs-border); }
.related-list a { display: flex; gap: .9rem; align-items: center; padding: .8rem 0; color: var(--rs-ink); }
.related-list a:hover strong { color: var(--rs-primary); }
.related-list strong { display: block; font-size: .92rem; }
.related-list small { color: var(--rs-muted); font-size: .82rem; }
.related-thumb { width: 68px; height: 54px; flex: 0 0 68px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--rs-primary-soft); color: var(--rs-primary); }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Alur layanan (halaman) ----------
   Satu palet untuk semua alur: --alur-color = hijau brand #224912 (tab terpilih, stepper, tombol);
   kotak keterangan alur kuning brand #FFD131. */
.alur-tabs { display: flex; flex-wrap: nowrap; gap: .6rem; overflow-x: auto; padding: .25rem .25rem 1rem; margin-bottom: 1.75rem; border: 0; scrollbar-width: thin; }
.alur-tabs .nav-link { --alur-color: var(--rs-primary); display: flex; align-items: center; gap: .6rem; white-space: nowrap; border: 1px solid var(--rs-border); border-radius: 999px; padding: .7rem 1.25rem; font-weight: 700; font-size: .92rem; color: #2B2F27; background: #fff; transition: all .2s; }
.alur-tabs .nav-link i { color: var(--alur-color); font-size: 1.1rem; }
.alur-tabs .nav-link img { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.alur-tabs .nav-link:hover { border-color: var(--alur-color); }
.alur-tabs .nav-link.active { background: var(--alur-color); border-color: var(--alur-color); color: #fff; box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--alur-color) 70%, transparent); }
.alur-tabs .nav-link.active i { color: #fff; }
.tab-pane { --alur-color: var(--rs-primary); }
.alur-intro { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--rs-accent); border-radius: var(--rs-radius); padding: 1.6rem; margin-bottom: 2rem; }
.alur-intro h2 { font-size: 1.45rem; margin-bottom: .4rem; }
.alur-intro p { color: rgba(26, 26, 26, .78); margin: 0; }
.alur-intro-icon { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff; background: var(--alur-color); box-shadow: 0 0 0 4px var(--rs-gold); }
.alur-intro-icon.has-img { background: none; box-shadow: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.alur-intro-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.alur-count { margin-left: auto; text-align: center; color: rgba(26, 26, 26, .78); font-size: .8rem; white-space: nowrap; }
.alur-count strong { display: block; font-size: 2rem; line-height: 1; color: var(--alur-color); }
@media (max-width: 575.98px) { .alur-intro { flex-wrap: wrap; } .alur-count { margin-left: 0; } }

.stepper { background: #fff; border: 1px solid var(--rs-border); border-radius: 18px; padding: 2.25rem 1.75rem 1.75rem; box-shadow: var(--rs-shadow); }
.stepper-nav-wrap { position: relative; overflow-x: auto; padding: .4rem 0 .5rem; }
/* Garis abu-abu (::before) dari titik pertama ke terakhir; garis progres (::after) diatur JS lewat --progress (0..1). */
.stepper-nav { --step-w: 120px; --dot: 48px; --progress: 0; position: relative; display: flex; justify-content: space-between; gap: 1rem; list-style: none; padding: 0; margin: 0; min-width: max-content; }
/* Maskot berangka (alur icon (1..6).png) butuh lingkaran lebih besar; garis tetap di tengah lingkaran. */
.stepper-nav:has(.stepper-dot.has-img) { --dot: 70px; }
.stepper-nav::before, .stepper-nav::after { content: ''; position: absolute; top: calc(var(--dot) / 2 - 2px); left: calc(var(--step-w) / 2); height: 4px; border-radius: 4px; }
.stepper-nav::before { right: calc(var(--step-w) / 2); background: var(--rs-border); }
.stepper-nav::after { width: calc((100% - var(--step-w)) * var(--progress)); background: var(--alur-color); transition: width .45s ease; }
.stepper-nav li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: var(--step-w); }
/* Isi titik = maskot berangka (.has-img) atau ikon langkah. Langkah berikutnya: maskot abu-abu pudar;
   langkah aktif & yang sudah dilewati: maskot berwarna. Titik ikon yang sudah dilewati terisi hijau. */
.stepper-dot { position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; border: 3px solid var(--rs-border); background: #fff; color: var(--rs-muted); display: grid; place-items: center; transition: all .3s; cursor: pointer; }
.stepper-dot.has-img { padding: 3px; overflow: hidden; }
.stepper-dot.has-img img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.stepper-dot.has-img:hover img, .stepper-dot.has-img.active img, .stepper-dot.has-img.done img { filter: none; opacity: 1; }
.stepper-dot i { font-size: 1.3rem; line-height: 1; }
.stepper-dot:hover { border-color: var(--alur-color); color: var(--alur-color); }
.stepper-dot:focus-visible { outline: 3px solid color-mix(in srgb, var(--alur-color) 40%, transparent); outline-offset: 2px; }
.stepper-dot.done { background: var(--alur-color); border-color: var(--alur-color); color: #fff; }
.stepper-dot.has-img.done { background: #fff; }
.stepper-dot.active { border-color: var(--alur-color); background: #fff; color: var(--alur-color); transform: scale(1.12); box-shadow: 0 0 0 7px color-mix(in srgb, var(--alur-color) 15%, transparent); }
.stepper-label { margin-top: .65rem; font-size: .78rem; font-weight: 700; color: var(--rs-muted); line-height: 1.3; }
.stepper-nav li:has(.stepper-dot.active) .stepper-label { color: var(--rs-ink); }
.stepper-panels { margin-top: 2.25rem; }
.stepper-panel { animation: panelIn .4s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.step-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--alur-color); }
.stepper-panel h3 { font-size: 1.5rem; margin: .45rem 0 .85rem; }
.stepper-panel h3 i { color: var(--alur-color); }
.step-desc { color: #2B2F27; line-height: 1.85; }
.step-meta { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; background: var(--rs-soft); padding: .4rem .9rem; border-radius: 999px; }
.step-requirements { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--alur-color); background: color-mix(in srgb, var(--alur-color) 6%, #fff); border-radius: 0 12px 12px 0; }
.step-requirements strong { font-size: .92rem; }
.step-requirements ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.step-requirements li { margin-bottom: .25rem; }
.step-visual { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #fff 0, transparent 50%), color-mix(in srgb, var(--alur-color) 13%, #fff); }
.step-visual img { width: 100%; height: 100%; object-fit: cover; }
.step-visual i { font-size: 5rem; color: var(--alur-color); }
.step-visual span { position: absolute; right: 1.25rem; bottom: .25rem; font-size: 5rem; font-weight: 900; color: color-mix(in srgb, var(--alur-color) 22%, transparent); }
.stepper-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rs-border); }
.stepper-counter { font-weight: 800; color: var(--rs-muted); }
/* Ringkasan semua langkah: tidak tampil di layar, hanya saat dicetak (lihat @media print). */
.alur-summary { display: none; margin-top: 1.5rem; }
.alur-summary-title { font-size: 1.1rem; font-weight: 800; margin: 0; }
.timeline { list-style: none; padding: 0; margin: 1.25rem 0 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px; background: var(--rs-border); }
.timeline li { position: relative; display: flex; gap: 1rem; padding-bottom: 1rem; }
.timeline-dot { position: relative; z-index: 1; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--alur-color); color: var(--alur-color); }
.timeline p { margin: .2rem 0 0; color: var(--rs-muted); font-size: .92rem; }

/* ---------- Tentang kami ---------- */
.about-carousel { padding-bottom: 2.25rem; }
.about-carousel .carousel-control-prev, .about-carousel .carousel-control-next { top: 50%; bottom: auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--rs-primary); opacity: .92; transform: translateY(-50%); }
/* Menonjol sejauh padding container (.75rem); lebih dari itu tombol kanan melewati layar HP. */
.about-carousel .carousel-control-prev { left: -.75rem; }
.about-carousel .carousel-control-next { right: -.75rem; }
.about-carousel-indicators { bottom: 0; margin-bottom: 0; }
.about-carousel-indicators [data-bs-target] { background-color: var(--rs-primary); }
.about-media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--rs-shadow-lg); background: var(--rs-primary-soft); }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media .thumb-placeholder { font-size: 6rem; }
.about-badge { position: absolute; left: 1.25rem; bottom: 1.25rem; background: var(--rs-dark); color: #fff; border-radius: 14px; padding: .95rem 1.3rem; box-shadow: var(--rs-shadow); }
.about-badge strong { display: block; font-size: 1.7rem; color: var(--rs-accent); line-height: 1; }
.about-badge span { font-size: .8rem; color: rgba(255, 255, 255, .8); }
/* Kartu Visi (hijau), Misi (putih), Motto & Value (kuning); ikon maskot assets/img/icon {visi,misi,motto}.png.
   Bayangan gelap ke kanan-bawah mengikuti mockup. Judul & ikon di atas; isi di tengah kartu (mendatar & tegak).
   Judul 1,6rem agar "Motto & Value" muat satu baris di kartu 310px. */
.nilai-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem; }
.nilai-card { display: flex; flex-direction: column; flex: 0 1 310px; min-height: 260px; padding: 1.5rem 1.6rem; border-radius: 30px; background: #fff; color: var(--rs-ink); box-shadow: 6px 8px 10px -2px rgba(0, 0, 0, .38); }
/* Penyeimbang tak terlihat di bawah isi, maksimal setinggi blok judul (ikon 68px + jarak 1,1rem): isi jadi tepat
   di tengah kartu, bukan di tengah sisa ruang di bawah judul (yang membuatnya tampak terlalu turun).
   Dasarnya 0 sehingga hanya memakai sisa ruang dan tidak ikut menambah tinggi kartu; kartu dengan isi terpanjang
   menentukan tinggi baris. Faktor tumbuh besar = penyeimbang diisi lebih dulu, baru sisanya ke .nilai-isi. */
.nilai-card::after { content: ''; flex: 1000 1 0; max-height: calc(68px + 1.1rem); }
.nilai-visi { background: linear-gradient(155deg, #234E18 0%, #3A6A26 50%, #9CC587 100%); color: #fff; }
.nilai-motto { background: var(--rs-accent); }
.nilai-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.nilai-head img { width: 68px; height: 68px; flex: 0 0 68px; }
.nilai-head h2 { margin: 0; font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: inherit; }
.nilai-isi { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; }
.nilai-isi p { margin: 0; font-size: .88rem; line-height: 1.5; }

/* Pendiri: foto menindih tepi kiri kartu hijau berisi kisah. Ukuran diukur dari mockup: bingkai foto
   ±34% lebar komposisi, kartu ±88% tinggi bingkai, foto menonjol lebih banyak ke atas daripada ke bawah.
   Foto bawaan / PNG transparan sudah berbingkai dan punya ruang bayangan transparan di sekelilingnya
   (kiri 6,3%, kanan 8,9%, atas 7,6%, bawah 9,1%); foto biasa diberi bingkai dengan geometri yang sama
   lewat .is-bingkai, sehingga jarak ke kartu tetap sama. */
.pendiri-section { padding-bottom: 2.5rem; }
.pendiri-title { margin: 0 0 2.5rem; text-align: center; color: var(--rs-primary); font-weight: 900; font-size: clamp(1.5rem, 2.9vw, 2.25rem); }
.pendiri-wrap { display: grid; grid-template-columns: minmax(0, 39.5%) minmax(0, 1fr); align-items: center; }
.pendiri-foto { position: relative; z-index: 1; }
/* Bayangan gelap mengikuti bentuk bingkai, jatuh ke kartu: kartu tampak tertindih foto seperti mockup.
   (Bayangan bawaan di gambar berwarna abu-abu terang, di atas hijau tua justru tampak seperti garis terang.) */
.pendiri-foto img { display: block; width: 100%; height: auto; filter: drop-shadow(6px 2px 10px rgba(0, 0, 0, .35)); }
.pendiri-foto.is-bingkai { padding: 8% 8.9% 9.6% 6.3%; }
.pendiri-foto.is-bingkai img { aspect-ratio: 27 / 28; object-fit: cover; border: 11px solid #fff; border-radius: 30px; filter: drop-shadow(6px 8px 14px rgba(0, 0, 0, .38)); }
/* Hijau tua rata sampai ±45% tinggi, lalu memudar ke hijau muda di bawah (warna diambil dari mockup).
   Tepi kiri kartu masuk ±40px ke bawah bingkai foto, jadi sudutnya tersembunyi; padding kiri menjaga
   teks tetap ±44px dari bingkai. */
.pendiri-card { margin: 1rem 3.5% 0 -5rem; padding: 1.1rem 2.5rem 1.1rem 5.2rem; border-radius: 22px; background: linear-gradient(180deg, #476839 0%, #4A6B3C 45%, #688858 70%, #8FAF7D 89%, #B1CAA2 100%); color: #fff; font-size: .75rem; line-height: 1.5; }
.pendiri-card p { margin: 0; text-align: justify; }
.pendiri-card p + p { margin-top: .4rem; }
/* Pendiri berikutnya (master Profil Pendiri): blok berjarak, foto genap di kanan menindih tepi kanan kartu. */
.pendiri-blok + .pendiri-blok { margin-top: -5.5rem; }
.pendiri-wrap.is-balik { grid-template-columns: minmax(0, 1fr) minmax(0, 39.5%); }
.pendiri-wrap.is-balik .pendiri-foto { order: 2; }
.pendiri-wrap.is-balik .pendiri-card { margin: 1rem -5rem 0 2.5%; padding: 1.1rem 5.9rem 1.1rem 2.5rem; }
.pendiri-wrap.is-balik .pendiri-foto img { filter: drop-shadow(-6px 2px 10px rgba(0, 0, 0, .35)); }
.pendiri-wrap.is-balik .pendiri-foto.is-bingkai img { filter: drop-shadow(-6px 8px 14px rgba(0, 0, 0, .38)); }
/* Ukuran huruf kartu mengikuti lebar konten, supaya tinggi kartu tetap ±88% tinggi foto seperti mockup. */
@media (min-width: 1600px) {
	.pendiri-card { font-size: .85rem; line-height: 1.6; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
	.pendiri-card { font-size: .72rem; line-height: 1.5; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.pendiri-card { font-size: .68rem; line-height: 1.45; }
	.pendiri-card p + p { margin-top: .4rem; }
	/* Tiga kartu nilai menyempit (±288px): judul diperkecil agar "Motto & Value" tetap satu baris. */
	.nilai-head h2 { font-size: 1.45rem; }
}

/* Jajaran direksi: kartu ringkas, dibagi per baris di controller (Tentang::baris_pimpinan),
   mis. 4 = 2 + 2, 5 = 2 + 3, 6 = 3 + 3; tiap baris di tengah. */
.pendiri-section + .pimpinan-section { padding-top: 2rem; }
.pimpinan-section .section-head h2 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); }
.pimpinan-grid { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.pimpinan-row { display: flex; justify-content: center; gap: 1.1rem; }
.person-card { flex: 0 0 190px; text-align: center; background: #fff; border-radius: 10px; padding: 1.6rem .9rem 1.4rem; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .22); transition: transform .3s; }
.person-card:hover { transform: translateY(-4px); }
.person-photo { width: 92px; height: 92px; margin: 0 auto .95rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #F3F1DC; color: var(--rs-primary); font-size: 1.65rem; font-weight: 900; border: 3px solid var(--rs-gold); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-card h3 { font-size: .8rem; font-weight: 800; line-height: 1.3; margin-bottom: .3rem; }
.person-role { margin: 0; color: var(--rs-primary); font-weight: 600; font-size: .72rem; line-height: 1.4; }
.person-desc { margin: .5rem 0 0; color: var(--rs-muted); font-size: .72rem; }

/* Tablet & HP (<= 991px): kolom terlalu sempit untuk foto di samping kartu (kartu jadi jauh lebih tinggi
   dari foto), jadi foto di atas dan kartu kisah naik sedikit ke bawah foto. */
@media (max-width: 991.98px) {
	.pendiri-wrap, .pendiri-wrap.is-balik { grid-template-columns: 1fr; }
	.pendiri-wrap.is-balik .pendiri-foto { order: 0; }
	.pendiri-foto { width: min(340px, 85%); margin: 0 auto; }
	.pendiri-card, .pendiri-wrap.is-balik .pendiri-card { margin: -3rem 0 0; padding: 4rem 2rem 1.8rem; font-size: .92rem; line-height: 1.65; }
	.pendiri-blok + .pendiri-blok { margin-top: 1.5rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.nilai-grid { gap: 1.75rem; }
}
@media (max-width: 767.98px) {
	.nilai-grid { gap: 1.4rem; }
	.nilai-card { flex: 1 1 100%; max-width: 420px; min-height: 0; border-radius: 24px; }
	/* HP: tinggi kartu mengikuti isi, penyeimbang hanya menambah ruang kosong. */
	.nilai-card::after { display: none; }
	.nilai-head img { width: 60px; height: 60px; flex-basis: 60px; }
	.nilai-head h2 { font-size: 1.6rem; }
	.pendiri-foto { width: min(320px, 85%); }
	.pendiri-card, .pendiri-wrap.is-balik .pendiri-card { padding: 4rem 1.4rem 1.6rem; font-size: .88rem; }
	/* HP: pembagian baris diabaikan, kartu mengalir 2 per baris (sisa ganjil di tengah). */
	.pimpinan-grid { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; }
	.pimpinan-row { display: contents; }
	.person-card { flex-basis: calc(50% - .55rem); }
}
/* ---------- Akreditasi Carousel ---------- */
.section-akreditasi { position: relative; }
.akreditasi-carousel-wrap {
	position: relative;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 3.75rem;
}
.akreditasi-viewport {
	overflow: hidden;
	width: 100%;
	padding: 1.25rem 0.25rem 1.75rem;
}
.akreditasi-track {
	--akreditasi-gap: 2rem;
	display: flex;
	gap: var(--akreditasi-gap);
	will-change: transform;
	transition: transform .6s cubic-bezier(.25, 1, .5, 1);
}
/* Desktop / Laptop: 2 kartu per tampilan (besarkan ukurannya) */
.akreditasi-slide {
	flex: 0 0 calc((100% - var(--akreditasi-gap)) / 2);
	max-width: calc((100% - var(--akreditasi-gap)) / 2);
	box-sizing: border-box;
	display: flex;
}
/* HP / layar kecil (< 768px): 1 kartu per tampilan */
@media (max-width: 767.98px) {
	.akreditasi-carousel-wrap { padding: 0 2.5rem; }
	.akreditasi-track { --akreditasi-gap: 1.25rem; }
	.akreditasi-slide { flex: 0 0 100%; max-width: 100%; }
	.akreditasi-logo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
@media (max-width: 480px) {
	.akreditasi-carousel-wrap { padding: 0 2.1rem; }
}

.akreditasi-card {
	position: relative;
	width: 100%;
	text-align: center;
	background: #fff;
	border: 1.5px solid var(--rs-border);
	border-radius: 20px;
	padding: clamp(1.35rem, 2.5vw, 2.25rem);
	box-shadow: 0 12px 36px -12px rgba(34, 73, 18, .12);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.akreditasi-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 50px -14px rgba(34, 73, 18, .22);
	border-color: rgba(62, 116, 38, .4);
}
.akreditasi-logo {
	--akreditasi-image-height: clamp(145px, 18vw, 205px);
	width: 100%;
	height: var(--akreditasi-image-height);
	min-height: var(--akreditasi-image-height);
	flex: 0 0 var(--akreditasi-image-height);
	display: grid;
	place-items: center;
	margin-bottom: 1.35rem;
	padding: 0;
}
.akreditasi-logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--akreditasi-image-height);
	object-fit: contain;
	transition: transform .35s ease;
}
.akreditasi-card:hover .akreditasi-logo img {
	transform: scale(1.05);
}
.akreditasi-logo i {
	font-size: 4.75rem;
	color: var(--rs-moss);
	filter: drop-shadow(0 4px 12px rgba(62, 116, 38, .2));
}
.akreditasi-card h3 {
	width: 100%;
	font-size: clamp(1.08rem, 1.6vw, 1.35rem);
	font-weight: 800;
	color: var(--rs-ink);
	margin-bottom: .55rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
.akreditasi-level-badge {
	margin-bottom: .75rem;
}
.akreditasi-level {
	display: inline-block;
	padding: .3rem .9rem;
	font-size: .88rem;
	font-weight: 900;
	letter-spacing: .02em;
	color: #6d4f00;
	background: linear-gradient(135deg, #FFF9E6 0%, var(--rs-accent-soft) 100%);
	border: 1px solid rgba(233, 184, 15, .5);
	border-radius: 50px;
	box-shadow: 0 2px 8px -2px rgba(233, 184, 15, .25);
}
.akreditasi-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .45rem;
	width: 100%;
	margin: 0 0 .85rem;
}
.akreditasi-meta-item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	padding: .28rem .7rem;
	border-radius: 50px;
	background: var(--rs-soft);
	color: var(--rs-muted);
	font-size: .95rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.akreditasi-berlaku {
	font-weight: 600;
	color: var(--rs-primary-light);
}
.akreditasi-desc {
	width: 100%;
	font-size: .98rem;
	color: #4a5445;
	line-height: 1.7;
	text-align: left;
	overflow-wrap: anywhere;
	margin-top: .1rem;
	margin-bottom: 0;
	max-width: 560px;
}

@media (max-width: 767.98px) {
	.akreditasi-logo { --akreditasi-image-height: 175px; }
	.akreditasi-card h3 { font-size: 1.12rem; }
	.akreditasi-desc { font-size: .93rem; }
}
@media (max-width: 480px) {
	.akreditasi-card { padding: 1.1rem; }
	.akreditasi-logo { --akreditasi-image-height: 150px; }
	.akreditasi-meta-item { font-size: .85rem; }
}

/* Tombol Next & Previous Akreditasi */
.akreditasi-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid var(--rs-border);
	color: var(--rs-primary);
	display: grid;
	place-items: center;
	font-size: 1.35rem;
	cursor: pointer;
	box-shadow: 0 8px 24px -4px rgba(34, 73, 18, .18);
	transition: all .25s ease;
	outline: none;
}
.akreditasi-prev { left: 0; }
.akreditasi-next { right: 0; }
.akreditasi-nav-btn:hover {
	background: var(--rs-primary);
	color: #fff;
	border-color: var(--rs-primary);
	box-shadow: 0 12px 28px -4px rgba(34, 73, 18, .35);
	transform: translateY(-50%) scale(1.08);
}
.akreditasi-nav-btn:active {
	transform: translateY(-50%) scale(.95);
}
.akreditasi-nav-btn:focus-visible {
	outline: 3px solid var(--rs-accent);
	outline-offset: 2px;
}
@media (max-width: 767.98px) {
	.akreditasi-nav-btn {
		width: 42px;
		height: 42px;
		font-size: 1.15rem;
	}
}

/* Indikator Dots Akreditasi */
.akreditasi-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .55rem;
	margin-top: 2rem;
}
.akreditasi-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50px;
	border: none;
	background: rgba(34, 73, 18, .22);
	cursor: pointer;
	transition: all .35s cubic-bezier(.25, 1, .5, 1);
}
.akreditasi-dot:hover {
	background: rgba(34, 73, 18, .5);
}
.akreditasi-dot.is-active {
	width: 32px;
	background: var(--rs-primary);
	box-shadow: 0 2px 8px -1px rgba(34, 73, 18, .4);
}
.akreditasi-dot:focus-visible {
	outline: 2px solid var(--rs-accent);
	outline-offset: 2px;
}
.akreditasi-dots[hidden], .akreditasi-nav-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.akreditasi-track { transition: none; }
}

/* ---------- Jadwal dokter ---------- */
.schedule-filter { background: #fff; border-radius: var(--rs-radius); padding: 1.5rem; margin-bottom: 2.5rem; box-shadow: var(--rs-shadow-lg); }
.schedule-filter .form-label { font-size: .75rem !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-muted); }
/* Dropdown kustom (initPilih): isi panel sama dengan kartu jadwal beranda; tombol pemicunya berupa kolom
   isian putih (bukan gambar latar kartu beranda). Opsi "Semua …" adalah pilihan biasa, bukan placeholder. */
.schedule-filter .pilih-btn { height: 40px; padding: .375rem 2.25rem .375rem .85rem; border: 1px solid var(--rs-border); border-radius: .7rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23224912' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / 14px 10px; color: var(--rs-ink); font-size: .95rem; font-weight: 600; }
.schedule-filter .pilih-btn:hover { filter: none; border-color: rgba(var(--rs-primary-rgb), .45); }
.schedule-filter .pilih.is-open .pilih-btn, .schedule-filter .pilih-btn:focus-visible { border-color: var(--rs-primary); box-shadow: 0 0 0 .2rem rgba(var(--rs-primary-rgb), .15); }
.schedule-filter .pilih.is-placeholder .pilih-label { color: var(--rs-ink); font-weight: 600; }
.doctor-card { background: #fff; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); padding: 1.5rem; height: 100%; transition: box-shadow .3s; }
.doctor-card:hover { box-shadow: var(--rs-shadow-lg); border-color: transparent; }
.doctor-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.doctor-head h2 { font-size: 1rem !important; }
.doctor-photo { width: 68px; height: 68px; flex: 0 0 68px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(140deg, var(--rs-primary-soft), var(--rs-accent-soft)); color: var(--rs-primary); font-weight: 900; font-size: 1.2rem; border: 3px solid var(--rs-gold); }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-schedule { list-style: none; padding: 0; margin: 0; }
.doctor-schedule li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding: .6rem .85rem; border-radius: 10px; font-size: .93rem; }
.doctor-schedule li:nth-child(odd) { background: var(--rs-soft); }
.doctor-schedule li.is-today { background: var(--rs-accent-soft); outline: 1px solid rgba(255, 209, 49, .7); }
.doctor-schedule .day { font-weight: 800; font-size: .9rem; }
.doctor-schedule .time { font-weight: 800; font-size: .9rem; color: var(--rs-primary); }
.doctor-schedule small { width: 100%; color: var(--rs-muted); }
.doctor-card-schedule-wrap { width: 100%; }
.doctor-card .doctor-card-schedule { font-size: .78rem; }
.doctor-card .doctor-card-schedule thead th { padding: .4rem .55rem; }
.doctor-card .doctor-card-schedule thead th:first-child { width: 27%; }
.doctor-card .doctor-card-schedule tbody th, .doctor-card .doctor-card-schedule tbody td { padding: .35rem .55rem; }
.doctor-card .doctor-card-schedule .doctor-detail-session { gap: .15rem .4rem; min-height: 1.15rem; }
.doctor-card .doctor-card-schedule .doctor-detail-session + .doctor-detail-session { margin-top: .12rem; }
.doctor-card .doctor-card-schedule .doctor-detail-session small { font-size: .72rem; }
.doctor-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.doctor-card-link:hover { color: inherit; }
.doctor-card-link .doctor-card { display: flex; flex-direction: column; }
.doctor-card-more { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; margin-top: auto; padding-top: 1rem; color: var(--rs-primary); font-size: .82rem; font-weight: 800; }
.doctor-card-link:hover .doctor-card-more { color: var(--rs-moss); }
.doctor-card-link:focus-visible { outline: 3px solid var(--rs-accent); outline-offset: 4px; border-radius: var(--rs-radius); }

/* ---------- Detail dokter satu layar ---------- */
.doctor-detail-section { min-height: calc(100vh - 170px); min-height: calc(100dvh - 170px); display: flex; align-items: center; padding: .7rem 0; background: linear-gradient(135deg, #F5FAF7 0%, #EAF3F7 100%); }
.doctor-detail-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .7rem; font-size: .82rem; }
.doctor-detail-back { color: var(--rs-primary); font-weight: 800; text-decoration: none; }
.doctor-detail-back:hover { color: var(--rs-moss); }
.doctor-detail-note { color: var(--rs-muted); font-size: .78rem; }
.doctor-detail-grid { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.55fr); gap: 1.1rem; align-items: stretch; }
.doctor-profile-panel, .doctor-schedule-panel, .doctor-detail-summary { background: #fff; border: 1px solid rgba(34, 73, 18, .08); border-radius: 1.1rem; box-shadow: var(--rs-shadow); }
.doctor-profile-panel { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.2rem; text-align: center; }
.doctor-profile-photo { width: min(100%, 300px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: .8rem; background: linear-gradient(145deg, var(--rs-primary-soft), #EEF2F4); color: var(--rs-primary); font-size: 3rem; font-weight: 900; }
.doctor-profile-photo img { width: 100%; height: 100%; object-fit: contain; }
.doctor-profile-info { width: 100%; padding-top: .75rem; }
.doctor-detail-kicker { display: block; margin-bottom: .2rem; color: var(--rs-moss); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.doctor-profile-info h1 { margin: 0 0 .3rem; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.2; }
.doctor-profile-specialty { margin: 0 0 .35rem; color: var(--rs-muted); font-size: .91rem; font-weight: 700; }
.doctor-profile-clinic { display: inline-flex; align-items: center; gap: .4rem; color: var(--rs-primary); font-size: .83rem; font-weight: 800; }
.doctor-appointment { display: flex; width: 100%; max-width: 300px; justify-content: center; align-items: center; gap: .5rem; margin-top: auto; padding: .7rem 1rem; font-weight: 800; }
.doctor-detail-content { display: flex; min-width: 0; flex-direction: column; gap: .8rem; }
/* Kolom kiri: kartu profil + tombol "Lihat dokter lain di poli ini" di luar kartu, rata kanan. */
.doctor-profile-col { display: flex; min-width: 0; flex-direction: column; gap: .6rem; }
.doctor-profile-col .doctor-profile-panel { flex: 1; }
.doctor-other-btn { align-self: flex-end; display: inline-flex; align-items: center; gap: .4rem; box-shadow: var(--rs-shadow); }
/* Popup daftar dokter lain di poli yang sama. */
.doctor-other-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.doctor-other-list a { display: flex; align-items: center; gap: .75rem; padding: .55rem .65rem; border-radius: 12px; color: var(--rs-ink); text-decoration: none; transition: background .15s; }
.doctor-other-list a:hover, .doctor-other-list a:focus-visible { background: var(--rs-primary-soft); }
.doctor-other-photo { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--rs-gold); border-radius: 50%; background: #F3F1DC; color: var(--rs-primary); font-size: .85rem; font-weight: 900; }
.doctor-other-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doctor-other-text { display: grid; min-width: 0; line-height: 1.3; }
.doctor-other-text strong { font-size: .95rem; }
.doctor-other-text small { overflow: hidden; color: var(--rs-muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.doctor-other-list .bi-chevron-right { margin-left: auto; color: var(--rs-primary); }
.doctor-schedule-panel { min-height: 0; padding: 1rem 1.2rem .75rem; }
.doctor-detail-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .55rem; }
.doctor-detail-heading h2 { margin: 0; font-size: 1.15rem; }
.doctor-schedule-today { padding: .35rem .65rem; border-radius: 2rem; background: var(--rs-accent-soft); color: var(--rs-primary); font-size: .74rem; font-weight: 800; white-space: nowrap; }
.doctor-detail-table-wrap { width: 100%; }
.doctor-detail-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.doctor-detail-table thead { background: #45485F; color: #fff; }
.doctor-detail-table thead th { padding: .55rem .85rem; font-weight: 800; text-align: left; }
.doctor-detail-table thead th:first-child { width: 34%; border-radius: .55rem 0 0 0; }
.doctor-detail-table thead th:last-child { border-radius: 0 .55rem 0 0; }
.doctor-detail-table tbody tr { border-bottom: 1px solid #E9EDF0; }
.doctor-detail-table tbody tr:last-child { border-bottom: 0; }
.doctor-detail-table tbody tr.is-today { background: var(--rs-accent-soft); }
.doctor-detail-table tbody th, .doctor-detail-table tbody td { padding: .38rem .85rem; vertical-align: middle; }
.doctor-detail-table tbody th { color: var(--rs-moss); font-weight: 800; }
.doctor-detail-session { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; min-height: 1.35rem; }
.doctor-detail-session span { color: var(--rs-ink); font-weight: 700; }
.doctor-detail-session small { color: var(--rs-muted); }
.doctor-detail-unavailable { color: var(--rs-muted); }
.doctor-detail-summary { display: flex; align-items: flex-start; gap: .85rem; padding: .85rem 1.1rem; }
.doctor-detail-summary > i { color: var(--rs-moss); font-size: 1.25rem; }
.doctor-detail-summary h2 { margin: 0 0 .2rem; color: var(--rs-moss); font-size: .96rem; }
.doctor-detail-summary p { margin: 0; color: var(--rs-ink); font-size: .84rem; line-height: 1.45; }
@media (min-width: 992px) {
	body.doctor-detail-screen .site-footer, body.doctor-detail-screen .wa-float { display: none; }
}
@media (max-width: 991.98px) {
	.doctor-detail-section { min-height: 0; padding: 1.5rem 0 2rem; }
	.doctor-detail-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
@media (max-width: 767.98px) {
	.doctor-detail-top { align-items: flex-start; flex-direction: column; }
	.doctor-detail-grid { grid-template-columns: 1fr; }
	.doctor-profile-panel { padding: 1rem; }
	.doctor-appointment { margin-top: .8rem; }
	.doctor-schedule-panel { padding: .85rem; }
	.doctor-detail-heading { align-items: flex-start; }
	.doctor-schedule-today { font-size: .68rem; }
	.doctor-detail-table tbody th, .doctor-detail-table tbody td { padding: .45rem .6rem; }
}

/* ---------- Artikel, event, pengumuman ---------- */
.post-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--rs-radius); overflow: hidden; box-shadow: var(--rs-shadow); color: var(--rs-ink); transition: transform .3s, box-shadow .3s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--rs-shadow-lg); color: var(--rs-ink); }
.post-thumb { aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: linear-gradient(140deg, var(--rs-primary-soft), var(--rs-accent-soft)); color: var(--rs-primary); font-size: 2.8rem; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-date { font-size: .8rem; font-weight: 700; color: var(--rs-moss); margin-bottom: .4rem; }
.post-body h2 { font-size: 1.08rem; line-height: 1.35; margin-bottom: .5rem; }
.post-body p { color: var(--rs-muted); font-size: .93rem; flex: 1; }
.post-cover { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--rs-shadow-lg); margin-bottom: 2rem; background: var(--rs-primary-soft); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-content { font-size: 1.05rem; line-height: 1.9; color: #2B2F27; }
.post-content p { margin-bottom: 1.25rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: 3rem; font-weight: 700; }

/* ---------- CTA (halaman dalam) ---------- */
.cta-band { padding: 0 0 4.5rem; }
.cta-inner { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; color: #fff; border-radius: 18px; padding: 2.5rem 2.75rem; background: linear-gradient(115deg, var(--rs-dark), var(--rs-primary-light)); }
.cta-inner::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 240px; height: 120px; border-radius: 0 100% 0 100%; background: rgba(255, 209, 49, .15); transform: rotate(-20deg); pointer-events: none; }
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner h2 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 900; }
.cta-inner p { color: rgba(255, 255, 255, .85); }
.cta-inner .section-kicker { color: var(--rs-accent) !important; }
@media (max-width: 575.98px) { .cta-inner { padding: 2rem 1.5rem; } }

/* =============================== Footer =============================== */
.site-footer { background: var(--rs-primary); color: #fff; padding: 2.4rem 0; font-size: .82rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--rs-accent); }
/* Kolom footer yang isinya kosong tidak dirender: desktop memakai satu kolom per elemen yang ada. */
.footer-grid { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; gap: 1.75rem 2rem; align-items: start; }
.footer-brand { display: inline-flex; align-items: center; gap: .6rem; align-self: center; }
.footer-brand .brand-logo { height: 76px; width: auto; max-width: none; }
.footer-brand .brand-name { color: #fff; font-size: 1.4rem; white-space: nowrap; }
.footer-title { color: #fff; font-weight: 800; font-size: 1.4rem; margin: 0 0 .55rem; }
.footer-text { margin: 0; line-height: 1.45; }
.footer-alamat { transition: color .15s; }
/* Popup peta lokasi (klik alamat). Tulisan "Memuat peta…" tertutup iframe begitu peta tergambar. */
.lokasi-pin { color: var(--rs-primary); }
.lokasi-map { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--rs-primary-soft); }
.lokasi-map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--rs-primary); font-weight: 700; font-size: .9rem; }
.lokasi-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lokasi-info { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1rem; }
.lokasi-alamat { margin: 0; color: var(--rs-muted); font-size: .92rem; line-height: 1.45; }
.lokasi-info .btn { flex-shrink: 0; }
.footer-contact { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .1rem 2rem; margin: 0; }
.footer-contact dt { font-weight: 800; }
.footer-contact dd { margin: 0; white-space: nowrap; }
.site-footer .social-circles { flex-wrap: nowrap; gap: .55rem; }
.site-footer .social-circles a { box-shadow: 0 0 0 2px #fff; }

/* ===================== Tombol WhatsApp melayang (icon wa maskot baru.png) =====================
   Gambar 851×804 dengan ruang transparan (kiri 81, atas 111, kanan 50, bawah 53 px) dipotong lewat
   margin negatif, jadi lebar tombol = lebar bagian gambar yang terlihat (720 px) dan area klik pas. */
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; display: block; width: 138px; transition: transform .2s; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.wa-float img { display: block; width: 118.19%; max-width: none; height: auto; margin: -15.42% 0 -7.36% -11.25%; }
.wa-float:hover, .wa-float:focus { transform: translateY(-3px) scale(1.03); }

@media (max-width: 767.98px) {
	.section { padding: 3.25rem 0; }
	.stepper { padding: 1.5rem 1rem 1rem; }
	.stepper-nav { --step-w: 92px; }
	.stepper-actions .btn { padding-inline: .9rem; font-size: .86rem; }
}

/* =====================================================================
   RESPONSIF — beranda + header, footer & tombol WA (tiga terakhir berlaku di semua halaman)

   Kelas perangkat:
     Desktop layar besar   >= 1400px   (Full HD >= 1600px: konten dilebarkan ke 1320px)
     Desktop layar kecil   992–1399px  (laptop; 992–1199px = laptop kecil)
     Tablet                768–991px
     HP besar              400–767px
     HP kecil              <= 399px

   Blok "bersama" berlaku untuk beberapa kelas sekaligus; blok yang lebih sempit
   ditulis sesudahnya sehingga menimpa nilai di atasnya.
   ===================================================================== */

/* ---------- Desktop layar besar (>= 1400px): lebar konten mengikuti mockup (artboard 1440, konten ±1180px) ---------- */
@media (min-width: 1400px) {
	.container { max-width: 1200px; }
}

/* ---------- Desktop layar besar, Full HD (>= 1600px): konten 1320px, komponen sedikit diperbesar ---------- */
@media (min-width: 1600px) {
	:root { --rs-content: 1320px; }
	.container { max-width: 1320px; }
	.brand-logo { height: 92px; }
	.antrian-link { width: 256px; }
	.header-top .social-circles a { width: 42px; height: 42px; }
	.site-nav .nav-link { font-size: 1rem; }
	.hero-cards-grid { max-width: 1100px; }
	.hc-jadwal h2 { font-size: 1.22rem; }
	.hc-selects .form-select, .pilih-btn { height: 38px; font-size: .95rem; }
	.btn-cari-img { width: 140px; }
	.welcome { min-height: 580px; }
	.welcome-copy h2 { font-size: 2.05rem; }
	.welcome-copy p { font-size: 1.06rem; max-width: 580px; }
	.stat strong { font-size: 1.8rem; }
	.stat p { font-size: .84rem; max-width: 230px; }
	.layanan-grid { max-width: 1180px; }
	.layanan-name { font-size: 1.32rem; }
	.alur-circles { gap: 2rem 1.5rem; }
	.alur-circle-item { width: 220px; }
	.event-card { flex-basis: 480px; }
	.testi-section { --testi-w: 256px; }
	.testi-bubble figcaption { font-size: .8rem; }
	.testi-bubble blockquote { font-size: .76rem; }
	.site-footer { font-size: .88rem; }
}

/* ---------- Semua desktop (>= 992px): menu terbuka penuh, kartu menempel di batas banner ---------- */
@media (min-width: 992px) {
	.nav-spread { width: 100%; justify-content: space-between; }
	/* Kartu menempel di perbatasan banner & "Selamat Datang": tinggi section 0, grid digeser naik setengah tingginya. */
	.hero-cards { height: 0; padding: 0; }
	.hero-cards-grid { transform: translateY(-50%); }
	.hero-banner .carousel-indicators { position: absolute; margin: 0 0 4.75rem; }
	.hero-banner .carousel-indicators [data-bs-target] { background: #fff; opacity: .7; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
	.hero-banner .carousel-indicators .active { background: var(--rs-accent); opacity: 1; }
	.hero-banner .carousel-control-prev, .hero-banner .carousel-control-next { bottom: 0; }
}

/* ---------- Desktop layar kecil (992–1399px, laptop) ---------- */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.header-actions { gap: 1.25rem; }
	.alur-circles { gap: 1.75rem 1.1rem; }
}

/* ---------- Desktop layar kecil, laptop kecil (992–1199px) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
	/* Konten 936px: lima kolom alur lebih sempit agar tetap satu baris. */
	.alur-circle-item { width: 172px; }
	.alur-circles { column-gap: .75rem; }
	.alur-pill { font-size: .86rem; padding: .55rem .5rem; }
	.brand-logo { height: 72px; }
	.antrian-link { width: 210px; }
	.site-nav .nav-link { font-size: .86rem; letter-spacing: .05em; }
	.hero-cards-grid { gap: 1.1rem; }
	.hc-jadwal { padding-inline: 1rem; }
	.hc-jadwal h2 { font-size: 1rem; }
	.welcome { min-height: 460px; }
	/* Statistik 2x2 di samping maskot: 4 kolom terlalu sempit untuk deskripsi panjang. */
	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem; }
	.stat p { max-width: none; }
	.layanan-grid { gap: 1.5rem; }
	.layanan-card { flex-basis: calc((100% - 4.5rem) / 4); }
	.layanan-name { font-size: 1.1rem; }
	.footer-grid { grid-auto-flow: row; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 3.5rem; }
	.footer-brand { grid-column: 1 / -1; }
}

/* ---------- Tablet & HP (<= 991px): menu jadi tombol, kartu di bawah banner, bagian tersusun ke bawah ---------- */
@media (max-width: 991.98px) {
	.header-top { padding: .75rem 0; }
	.brand-logo { height: 54px; }
	.brand-mark { width: 50px; height: 50px; flex-basis: 50px; font-size: 1.4rem; }
	.site-nav .navbar-collapse { border-top: 1px solid var(--rs-border); }
	.site-nav .nav-link { padding: .7rem 0 !important; }
	.site-nav .nav-link::after { display: none; }

	.hero-cards-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; max-width: 640px; }
	.hc-jadwal { grid-column: 1 / -1; grid-row: 2; margin-bottom: 1rem; }

	.welcome { display: block; min-height: 0; padding: 0 0 3.25rem; }
	.welcome-media { position: relative; width: 100%; height: 300px; }
	.welcome-media img { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
	.welcome-copy { width: 100%; }

	.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; }
	.stat p { max-width: none; }

	.footer-grid { grid-auto-flow: row; grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 2.5rem; }
	.footer-brand { grid-column: 1 / -1; }
}

/* ---------- Tablet (768–991px) ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
	/* Maskot di kiri, statistik 2x2 di kanan; maskot berdiri di dasar band. */
	.stats-inner:not(.stats-inner-no-mascot) { grid-template-columns: 170px 1fr; gap: 1.75rem; }
	.stats-maskot { align-self: end; height: 200px; }
	.stats-maskot img { bottom: -2.75rem; height: 230px; }
	.layanan-grid { gap: 1rem; }
	.layanan-card { flex-basis: calc((100% - 3rem) / 4); }
	.layanan-name { font-size: 1rem; padding: .65rem .5rem .75rem; }
	.alur-circles { gap: 1.75rem; }
	.alur-circle-item { width: calc((100% - 3.5rem) / 3); }
	/* Popup Bootstrap di bawah 992px selebar 500px; 16:9 terlalu pipih. */
	.lokasi-map { aspect-ratio: 4 / 3; }
	.wa-float { width: 112px; }
}

/* ---------- HP besar & HP kecil (<= 767px); nilai di sini untuk HP besar (400–767px) ---------- */
@media (max-width: 767.98px) {
	.title-caps { margin-bottom: 1.6rem; }
	.welcome-media { height: 230px; }
	.welcome-copy h2 { margin-bottom: 1rem; }
	/* Enter manual di deskripsi disusun untuk lebar desktop; di HP teks dibiarkan mengalir agar tidak ada kata yatim. */
	.welcome-copy p br { display: none; }
	.stats-band { padding: 2.25rem 0; }
	.stats-inner { grid-template-columns: 1fr; gap: 1.25rem; }
	.stats-maskot { height: 160px; }
	.stats-maskot img { bottom: 0; height: 160px; }
	.stat strong { font-size: 1.4rem; margin-bottom: .4rem; }
	.layanan-section { padding-top: 3.25rem; }
	.layanan-grid { gap: .9rem; }
	.layanan-card { flex-basis: calc((100% - .9rem) / 2); }
	.layanan-name { font-size: 1.05rem; padding: .65rem .5rem .75rem; }
	/* Alur: 2 ikon per baris (5 ikon = 3 baris), label boleh dua baris. */
	.alur-circles { gap: 1.5rem .75rem; }
	.alur-circle-item { width: calc(50% - .375rem); }
	.alur-art { width: 92px; height: 92px; }
	.alur-circle { width: 84px; height: 84px; font-size: 2.3rem; }
	.alur-pill { line-height: 1.25; min-height: calc(2.5em + 1rem); font-size: .82rem; padding: .5rem .6rem; }
	.event-section { padding: 3.25rem 0 2.5rem; }
	.event-wrap { flex-direction: column; align-items: stretch; gap: 1.25rem; }
	.event-head { text-align: left; }
	.event-card { flex-basis: 82vw; }
	/* Testimoni: satu balon per tampilan (geser otomatis tiap 3 detik, initTestiSlider) + tombol < >.
	   Tiap slide selebar layar; gambar balon tetap selebar --testi-w di tengah slide. */
	.testi-section { --testi-w: min(300px, calc(100vw - 92px)); }
	.testi-track { gap: 0; padding: .25rem 0 1rem; scrollbar-width: none; }
	.testi-track::-webkit-scrollbar { display: none; }
	.testi-bubble { flex: 0 0 100%; aspect-ratio: auto; height: calc(var(--testi-w) * 508 / 543); padding: calc(var(--testi-w) * .206) calc((100% - var(--testi-w)) / 2 + var(--testi-w) * .085) calc(var(--testi-w) * .15); background-size: var(--testi-w) 100%; background-position: center top; scroll-snap-align: center; scroll-snap-stop: always; }
	.testi-bubble figcaption { font-size: .82rem; }
	.testi-bubble blockquote { font-size: .8rem; }
	.testi-nav { position: absolute; z-index: 2; top: calc(.25rem + var(--testi-w) * .44); transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--rs-primary); font-size: 1.1rem; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35); }
	.testi-nav:active { transform: translateY(-50%) scale(.92); }
	.testi-nav:focus-visible { outline: 3px solid var(--rs-accent); outline-offset: 2px; }
	.testi-prev { left: max(.25rem, calc((100% - var(--testi-w)) / 2 - 46px)); }
	.testi-next { right: max(.25rem, calc((100% - var(--testi-w)) / 2 - 46px)); }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-brand { flex-wrap: wrap; max-width: 100%; }
	.footer-brand .brand-logo { height: auto; max-height: 76px; max-width: 100%; }
	.footer-brand .brand-name { white-space: normal; }
	/* Popup peta: lebih tinggi agar area peta tidak terlalu pipih di layar sempit. */
	.lokasi-map { aspect-ratio: 4 / 5; max-height: 60vh; }
	.lokasi-info { flex-direction: column; align-items: stretch; }
	.wa-float { width: 93px; right: .75rem; bottom: .75rem; }
}

/* ---------- HP kecil (<= 399px) ---------- */
@media (max-width: 399.98px) {
	.brand-logo { height: 46px; }
	.hero-cards-grid { gap: .9rem 1rem; }
	.hc-jadwal { padding: .75rem .9rem 1.6rem; }
	.hc-jadwal h2 { font-size: 1rem; }
	.hc-selects { grid-template-columns: 1fr; gap: .6rem; }
	.welcome-media { height: 200px; }
	.welcome-copy p { font-size: .95rem; }
	.stats-grid { gap: 1.5rem 1.25rem; }
	.stat strong { font-size: 1.25rem; }
	.stat p { font-size: .74rem; }
	.layanan-name { font-size: .95rem; }
	.alur-art { width: 80px; height: 80px; }
	.alur-circle { width: 72px; height: 72px; font-size: 2rem; }
	.alur-pill { font-size: .76rem; padding: .45rem .5rem; }
	.event-card { flex-basis: 86vw; }
	.wa-float { width: 77px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	.header-top, .site-nav, .site-footer, .wa-float, .cta-band, .alur-tabs, .stepper { display: none !important; }
	.tab-pane { display: block !important; opacity: 1 !important; }
	.alur-summary { display: block !important; }
}