/* =========================================================================
   Tema tampilan publik RSUD Kepahiang — terinspirasi rsudpasarminggu.jakarta.go.id
   File ini dimuat SETELAH bundel Tailwind (app.css), jadi override warna di
   bawah ini otomatis berlaku ke seluruh kelas Tailwind yang sudah ada
   (bg-brand, text-brand, dst) tanpa perlu build ulang npm.
   ========================================================================= */

:root {
    /* Aksen utama diganti dari merah menjadi biru, mengikuti RSUD Pasar Minggu. */
    --color-brand: #1a77cc;
    --color-brand-dark: #145a99;

    --site-blue: #1a77cc;
    --site-blue-dark: #145a99;
    --site-blue-light: #eaf3fc;
    --site-navy: #213360;
}

/* ---------- Top bar kontak ---------- */
.top-bar { background: var(--site-blue-dark); color: #fff; font-size: .8rem; }
.top-bar-inner { max-width: 80rem; margin: 0 auto; padding: .45rem 1rem; display: flex;
    flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.top-bar-contact { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
.top-bar-contact a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; opacity: .95; }
.top-bar-contact a:hover { opacity: 1; text-decoration: underline; }
.top-bar-contact svg { width: .9rem; height: .9rem; flex: none; }
.top-bar-social { display: flex; gap: .6rem; }
.top-bar-social a { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255,255,255,.15);
    display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.top-bar-social a:hover { background: rgba(255,255,255,.3); }
.top-bar-social svg { width: .85rem; height: .85rem; }
@media (max-width: 640px) { .top-bar-contact span.tb-full { display: none; } }

/* ---------- Aksi cepat di navigasi ---------- */
.nav-actions { display: flex; align-items: center; gap: .6rem; }
.btn-quick { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 999px;
    background: var(--site-blue); color: #fff !important; font-weight: 600; font-size: .8125rem; text-decoration: none !important;
    white-space: nowrap; transition: background-color .15s, transform .15s; }
.btn-quick:hover { background: var(--site-blue-dark); transform: translateY(-1px); }
.btn-quick.btn-quick-outline { background: #fff; color: var(--site-blue) !important; border: 1.5px solid var(--site-blue); }
.btn-quick.btn-quick-outline:hover { background: var(--site-blue-light); }
.btn-quick svg { width: 1rem; height: 1rem; }

/* ---------- Banner judul halaman dalam ---------- */
.page-banner { background: linear-gradient(115deg, var(--site-navy) 0%, var(--site-blue-dark) 65%, var(--site-blue) 130%);
    color: #fff; padding: 2.5rem 0; position: relative; overflow: hidden; }
.page-banner::after { content: ""; position: absolute; inset: 0; background-image:
    radial-gradient(circle at 88% -10%, rgba(255,255,255,.16) 0%, transparent 45%); pointer-events: none; }

/* ---------- Widget "Cari Dokter" ---------- */
.hero-search-wrap { position: relative; z-index: 3; max-width: 72rem; margin: -2rem auto 0; padding: 0 1rem; }
.hero-search { background: #fff; border-radius: .6rem; box-shadow: 0 20px 40px -20px rgba(23,35,67,.45);
    padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.hero-search-title { flex: 1 1 100%; display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--site-navy); font-size: 1.0625rem; margin: 0 0 .25rem; }
.hero-search-title svg { width: 1.35rem; height: 1.35rem; color: var(--site-blue); flex: none; }
.hero-search-field { flex: 1 1 16rem; }
.hero-search-field label { display: block; font-size: .75rem; font-weight: 600; color: #6b7280; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: .3rem; }
.hero-search-field select { width: 100%; padding: .65rem .8rem; border: 1px solid #d1d5db; border-radius: .45rem; font: inherit;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .75rem center/1rem; appearance: none; }
.hero-search-field select:focus { outline: 2px solid var(--site-blue); outline-offset: -1px; border-color: var(--site-blue); }
.hero-search .btn-quick { flex: none; padding: .68rem 1.6rem; }
.hero-search-note { flex: 1 1 100%; margin: 0; font-size: .8rem; color: var(--site-blue-dark); background: var(--site-blue-light);
    border-radius: .4rem; padding: .5rem .75rem; }

/* ---------- Kartu bergaya seragam (layanan / dokter / berita) ---------- */
.card-grid { display: grid; gap: 1.75rem; }
.service-card, .post-card-v2 { background: #fff; border: 1px solid #eef0f4; border-radius: .7rem; overflow: hidden;
    transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; }
.service-card:hover, .post-card-v2:hover { box-shadow: 0 16px 32px -18px rgba(23,35,67,.35); transform: translateY(-3px); }
.service-card-media { height: 9rem; background: var(--site-blue-light); display: flex; align-items: center; justify-content: center; }
.service-card-media img { max-height: 5rem; max-width: 70%; object-fit: contain; }
.service-card-body, .post-card-v2-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.service-card-title, .post-card-v2-title { font-weight: 700; color: var(--site-navy); line-height: 1.35; margin: 0; }
.service-card-title a, .post-card-v2-title a { color: inherit; text-decoration: none; }
.service-card-title a:hover, .post-card-v2-title a:hover { color: var(--site-blue); }
.service-card-meta { font-size: .8125rem; color: #6b7280; margin: 0; }
.card-link { margin-top: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 700;
    color: var(--site-blue); text-decoration: none; }
.card-link:hover { color: var(--site-blue-dark); text-decoration: underline; }
.post-card-v2-media { display: block; position: relative; height: 11rem; overflow: hidden; background: #eef0f4; }
.post-card-v2-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.post-card-v2:hover .post-card-v2-media img { transform: scale(1.06); }
.post-card-v2-date { font-size: .75rem; color: var(--site-blue-dark); font-weight: 600; }

.doctor-card-v2 { text-align: center; }
.doctor-card-v2-photo { display: block; position: relative; border-radius: .7rem; overflow: hidden; aspect-ratio: 3/4; background: #eef0f4; margin-bottom: .75rem; }
.doctor-card-v2-photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-card-v2-name { font-weight: 700; color: var(--site-navy); font-size: .875rem; line-height: 1.3; }
.doctor-card-v2-name a { color: inherit; text-decoration: none; }
.doctor-card-v2-name a:hover { color: var(--site-blue); }
.doctor-card-v2-spec { font-size: .75rem; color: var(--site-blue-dark); font-weight: 600; }

.section-eyebrow { color: var(--site-blue); font-weight: 700; text-align: center; margin: 0 0 .35rem;
    text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; }

/* ---------- Pita CTA bantuan sebelum footer ---------- */
.help-strip { background: linear-gradient(120deg, var(--site-blue-dark), var(--site-blue)); color: #fff; }
.help-strip-inner { max-width: 80rem; margin: 0 auto; padding: 2.5rem 1.5rem; display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between; gap: 1.5rem; }
.help-strip h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.help-strip p { margin: 0; color: rgba(255,255,255,.85); font-size: .9rem; }
.help-strip-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.help-strip .btn-quick { background: #fff; color: var(--site-blue-dark) !important; }
.help-strip .btn-quick:hover { background: #f1f5f9; }
.help-strip .btn-quick.btn-quick-outline { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.6); }
.help-strip .btn-quick.btn-quick-outline:hover { background: rgba(255,255,255,.15); }

/* ---------- Footer ---------- */
.footer-v2 { position: relative; }
.footer-v2::before { content: ""; display: block; height: 4px;
    background: linear-gradient(90deg, var(--site-blue), var(--site-navy)); }
.footer-v2-social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer-v2-social a { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255,255,255,.08);
    display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.footer-v2-social a:hover { background: var(--site-blue); }
.footer-v2-social svg { width: 1rem; height: 1rem; }

/* ---------- Menu akses cepat mengambang ---------- */
.quicklinks { position: fixed; right: 0; top: 45%; transform: translateY(-50%); z-index: 45;
    display: flex; flex-direction: column; box-shadow: -6px 0 18px -8px rgba(23,35,67,.3); }
.quicklink { display: flex; align-items: center; gap: .5rem; background: var(--site-navy); color: #fff;
    text-decoration: none; padding: .7rem .9rem; font-size: .75rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.12);
    max-width: 3rem; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, background-color .2s; }
.quicklink:last-child { border-bottom: 0; }
.quicklink svg { width: 1.15rem; height: 1.15rem; flex: none; }
.quicklink span { opacity: 0; transition: opacity .15s; }
.quicklink:hover { max-width: 12rem; background: var(--site-blue); }
.quicklink:hover span { opacity: 1; }
.quicklink.is-alert { background: var(--site-blue-dark); }
@media (max-width: 640px) {
    .quicklinks { top: auto; bottom: 0; transform: none; flex-direction: row; width: 100%; }
    .quicklink { flex: 1; max-width: none; justify-content: center; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.12); padding: .55rem .3rem; }
    .quicklink:last-child { border-right: 0; }
    .quicklink span { display: none; }
}

/* ---------- Judul section bergaris (ala rsudpasarminggu) ---------- */
.section-title-lined { text-align: center; margin: 0 0 .6rem; }
.section-title-lined .rule { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .6rem; }
.section-title-lined .rule::before, .section-title-lined .rule::after { content: ""; height: 1px; width: 3rem; background: #d1d5db; }
.section-title-lined .rule .dash { height: 3px; width: 2.25rem; background: var(--site-blue); border-radius: 2px; }
.section-subtitle { text-align: center; color: #6b7280; font-style: italic; margin: .75rem 0 2.25rem; }

/* ---------- Carousel generik (dipakai di beberapa section) ---------- */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; gap: 1.75rem; transition: transform .35s ease; }
.carousel-track > * { flex: 0 0 calc(100% - 0px); }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: #e5e7eb; color: #4b5563; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.carousel-arrow:hover { background: var(--site-blue); color: #fff; }
.carousel-arrow.prev { left: -1.1rem; }
.carousel-arrow.next { right: -1.1rem; }
.carousel-arrow svg { width: 1.1rem; height: 1.1rem; }
.carousel-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.5rem; }
.carousel-dots button { width: .5rem; height: .5rem; border-radius: 50%; border: 0; background: #d1d5db; padding: 0; cursor: pointer; }
.carousel-dots button.active { background: var(--site-blue); width: 1.4rem; border-radius: 999px; }
@media (min-width: 640px) { .carousel-track > * { flex-basis: calc(50% - .875rem); } }
@media (min-width: 1024px) { .carousel-track[data-per-view="3"] > * { flex-basis: calc(33.333% - 1.166rem); }
    .carousel-track[data-per-view="4"] > * { flex-basis: calc(25% - 1.3125rem); } }

/* ---------- Tab Fasilitas & Layanan ---------- */
.facility-tabs { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.facility-tab-list { display: flex; flex-direction: column; gap: .1rem; }
.facility-tab-btn { text-align: left; background: none; border: 0; border-left: 3px solid transparent; padding: .6rem .9rem;
    font: inherit; font-size: .9375rem; color: #4b5563; cursor: pointer; border-radius: 0 .3rem .3rem 0; }
.facility-tab-btn:hover { background: var(--site-blue-light); }
.facility-tab-btn.active { border-left-color: var(--site-blue); background: var(--site-blue-light); color: var(--site-blue-dark); font-weight: 700; }
.facility-panel { display: none; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.facility-panel.active { display: grid; }
.facility-panel h3 { margin: 0 0 .5rem; font-size: 1.25rem; color: var(--site-navy); }
.facility-panel p { margin: 0; color: #4b5563; line-height: 1.65; }
.facility-panel-icon { width: 3.5rem; height: 3.5rem; border-radius: .6rem; background: var(--site-blue-light); color: var(--site-blue);
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.facility-panel-icon svg { width: 1.75rem; height: 1.75rem; }
@media (min-width: 768px) { .facility-tabs { grid-template-columns: 16rem 1fr; } }

/* ---------- FAQ akordeon ---------- */
.faq-list { max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item { border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #fff; border: 0;
    padding: 1.1rem 1.25rem; font: inherit; font-weight: 700; color: var(--site-navy); text-align: left; cursor: pointer; }
.faq-q:hover { background: #f9fafb; }
.faq-q svg { flex: none; width: 1.1rem; height: 1.1rem; color: #9ca3af; transition: transform .2s; }
.faq-item.open .faq-q svg { transform: rotate(90deg); color: var(--site-blue); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: #fff; }
.faq-item.open .faq-a { max-height: 20rem; }
.faq-a-inner { padding: 0 1.25rem 1.1rem; color: #4b5563; font-size: .9rem; line-height: 1.65; }

/* ---------- Footer: link terkait & lokasi ---------- */
.footer-links-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.footer-link-badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.06); color: #d1d5db;
    padding: .4rem .8rem; border-radius: .4rem; font-size: .8125rem; text-decoration: none; }
.footer-link-badge:hover { background: rgba(255,255,255,.14); color: #fff; }
.footer-map { border-radius: .5rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.footer-map iframe { width: 100%; height: 11rem; border: 0; display: block; filter: grayscale(.15); }

.active-filter { display: inline-flex; align-items: center; gap: .4rem; background: var(--site-blue-light);
    color: var(--site-blue-dark); border-radius: 999px; padding: .35rem .9rem; font-size: .8125rem; font-weight: 600; }
.active-filter a { color: inherit; margin-left: .3rem; text-decoration: none; font-weight: 700; }
.active-filter a:hover { text-decoration: underline; }