:root {
    --navy: #0B3C5D;
    --navy-2: #082A43;
    --blue: #00A88F;
    --teal: #008672;
    --mint: #E6F7F5;
    --cream: #F4F7F9;
    --white: #ffffff;
    --ink: #1E293B;
    --muted: #64748B;
    --line: #E2E8F0;
    --gold: #d9b46c;
    --shadow: 0 18px 50px rgba(11, 60, 93, 0.08);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

button {
    font-family: inherit;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.section {
    padding: 110px 0;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    color: #fff;
    transition: .3s ease;
}

.site-header.scrolled {
    background: rgba(74, 10, 18, .98);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

.nav-wrap {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 27px;
    font-weight: 400;
    color: #fff;
}

.brand-text strong,
.footer-brand strong {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
}

.brand-text small {
    display: block;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    margin-top: 1px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-nav a {
    font-size: 13px;
    color: rgba(255,255,255,.75);
    transition: .25s;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
    color: #fff;
}

.main-nav .nav-button {
    padding: 11px 17px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
}

.main-nav .nav-button:hover {
    background: rgba(255,255,255,.10);
}

.menu-toggle {
    display: none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    min-height: 760px;
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
}

.hero-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 28%,
            rgba(0,168,143,.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(11,60,93,.28),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #0B3C5D 0%,
            #082A43 55%,
            #061F33 100%
        );
}

.hero-bg::after {
    content: "";
    position: absolute;
    right: -8%;
    top: 12%;
    width: 48vw;
    height: 48vw;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;

    box-shadow:
        0 0 0 90px rgba(255,255,255,.025),
        0 0 0 180px rgba(255,255,255,.018);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 75px;

    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 80px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #00A88F;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

.eyebrow.dark {
    color: var(--blue);
}

.hero h1 {
    margin: 20px 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.04;
    letter-spacing: -.055em;
    max-width: 780px;
}

.hero h1 em {
    color: #00A88F;
    font-style: normal;
}

.hero-copy > p {
    max-width: 610px;
    color: rgba(255,255,255,.68);
    font-size: 17px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin: 34px 0 24px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    border-radius: 999px;
    padding: 14px 22px;

    font-weight: 700;
    font-size: 14px;

    transition: .25s;
}

.btn-primary {
    background: #00A88F;
    color: #ffffff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,168,143,.25);
}

.btn-outline {
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
}

.btn-outline:hover {
    background: rgba(255,255,255,.08);
}

.btn-light {
    background: #fff;
    color: var(--navy);
}

.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.hero-note {
    display: flex;
    gap: 9px;
    align-items: center;

    color: rgba(255,255,255,.48);
    font-size: 11px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: #00A88F;
    box-shadow: 0 0 0 5px rgba(0,168,143,.12);
}

.hero-side {
    display: grid;
    gap: 16px;
}

.hero-card {
    position: relative;

    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.07);

    backdrop-filter: blur(16px);

    border-radius: 22px;
    padding: 24px;
}

.emergency-card {
    min-height: 210px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-icon {
    width: 45px;
    height: 45px;

    border-radius: 13px;

    display: grid;
    place-items: center;

    background: #00A88F;
    color: #ffffff;

    font-size: 26px;
}

.hero-card small {
    display: block;

    color: rgba(255,255,255,.46);
    font-size: 9px;
    letter-spacing: .15em;
}

.hero-card strong {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 28px;

    margin: 2px 0;
}

.hero-card span:not(.arrow) {
    color: rgba(255,255,255,.55);
    font-size: 11px;
}

.arrow {
    position: absolute;
    right: 22px;
    top: 22px;

    font-size: 22px;
    color: #00A88F;
}

.info-card {
    display: flex;
    gap: 15px;
    align-items: center;
}

.mini-icon {
    color: #00A88F;
    font-size: 22px;
}

.hero-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;

    border-top: 1px solid rgba(255,255,255,.10);
}

.trust-row {
    min-height: 82px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.trust-row div {
    display: flex;
    align-items: center;
    gap: 13px;

    border-right: 1px solid rgba(255,255,255,.10);

    padding: 0 25px;
}

.trust-row div:first-child {
    padding-left: 0;
}

.trust-row div:last-child {
    border: 0;
}

.trust-row strong {
    color: #00A88F;
    font-size: 11px;
}

.trust-row span {
    color: rgba(255,255,255,.60);
    font-size: 11px;
}


/* =========================================================
   PROFIL
   ========================================================= */

.intro {
    background: var(--cream);
}

.intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}


/* FOTO GEDUNG */

.intro-image {
    position: relative;

    padding: 10px;

    border-radius: 26px;
    background: #ffffff;

    box-shadow: 0 20px 50px rgba(11, 60, 93, .14);

    overflow: hidden;
}

.intro-image img {
    width: 100%;
    height: 380px;

    display: block;

    object-fit: cover;

    border-radius: 18px;
}

.intro-image::after {
    content: "";

    position: absolute;
    inset: 10px;

    border-radius: 18px;

    background:
        linear-gradient(
            to top,
            rgba(11, 60, 93, .70),
            transparent 55%
        );

    pointer-events: none;
}

.intro-image-caption {
    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 30px;

    z-index: 2;

    color: #ffffff;
}

.intro-image-caption span {
    display: block;

    font-size: 15px;
    letter-spacing: .15em;

    color: #ffffff !important;

    font-weight: 700;

    margin-bottom: 5px;
}

.intro-image-caption strong {
    display: block;

    font-family: "Manrope", sans-serif;
    font-size: 20px;

    color: #ffffff !important;

    opacity: 1 !important;
}


/* PROFIL TEXT */

.section-label {
    color: var(--muted);

    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.section-label span {
    font-size: 12px;
    color: var(--blue);
    font-weight: 700;
}

.section-label p {
    font-size: 11px;
    letter-spacing: .17em;
    font-weight: 700;
}

.intro h2,
.section-heading h2,
.schedule-header h2,
.commitment h2,
.contact h2 {
    font-family: "Manrope", sans-serif;

    font-size: clamp(38px, 4.8vw, 60px);

    line-height: 1.08;
    letter-spacing: -.045em;
}

.intro h2 span,
.section-heading h2 span,
.schedule-header h2 span,
.commitment h2 span,
.contact h2 span {
    color: var(--blue);
}

.lead {
    max-width: 720px;

    font-size: 19px;
    color: #40535c;

    margin: 28px 0;
}

.intro-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 45px;

    max-width: 780px;
}

.intro-columns p {
    color: var(--muted);
    font-size: 14px;
}

.text-link {
    display: inline-flex;

    gap: 15px;

    margin-top: 30px;

    font-weight: 700;
    color: var(--blue);
    font-size: 13px;
}


/* =========================================================
   LAYANAN
   ========================================================= */

.services {
    background: #fff;
}

.section-heading,
.schedule-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 50px;

    margin-bottom: 50px;
}

.section-heading > p,
.schedule-header > p {
    max-width: 380px;

    color: var(--muted);
    font-size: 14px;
}

.service-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;
}

.service-card {
    min-height: 310px;

    padding: 30px;

    border: 1px solid var(--line);

    border-radius: 20px;

    position: relative;

    overflow: hidden;

    transition: .3s;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.service-card.featured {
    background: var(--navy);
    color: #fff;

    border-color: var(--navy);
}

.service-number {
    position: absolute;

    right: 25px;
    top: 25px;

    color: #b6c3c7;
    font-size: 10px;
}

.featured .service-number {
    color: rgba(255,255,255,.35);
}

.service-icon {
    width: 52px;
    height: 52px;

    border-radius: 16px;

    display: grid;
    place-items: center;

    background: var(--mint);
    color: var(--blue);

    font-size: 23px;

    margin-bottom: 65px;
}

.featured .service-icon {
    background: rgba(0,168,143,.20);
    color: #00A88F;
}

.service-card h3 {
    font-family: "Manrope", sans-serif;

    font-size: 21px;

    margin-bottom: 8px;
}

.service-card p {
    color: var(--muted);

    font-size: 13px;

    max-width: 310px;
}

.featured p {
    color: rgba(255,255,255,.55);
}

.service-card a {
    display: inline-flex;

    gap: 12px;

    margin-top: 20px;

    font-size: 12px;

    color: var(--blue);

    font-weight: 700;
}

.featured a {
    color: #00A88F;
}


/* =========================================================
   PENDAFTARAN ONLINE
   ========================================================= */

.registration {
    background: var(--cream);

    padding-top: 30px;
}

.registration-box {
    min-height: 390px;

    background:
        linear-gradient(
            120deg,
            #0B3C5D,
            #082A43
        );
}

.registration .commitment-copy {
    max-width: 700px;
}

.registration .commitment-copy p {
    max-width: 590px;
}

.registration .btn {
    margin-top: 4px;
}


/* =========================================================
   INFORMASI & KEGIATAN
   ========================================================= */

.information {
    background: #ffffff;
}

.information-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.information-card {
    border: 1px solid var(--line);

    border-radius: 20px;

    overflow: hidden;

    background: #ffffff;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.information-card:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow);
}


/* FOTO INFORMASI */

.information-image {
    position: relative;

    width: 100%;

    height: 220px;

    background:
        linear-gradient(
            135deg,
            #0B3C5D,
            #082A43
        );

    overflow: hidden;
}

.information-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .4s ease;
}

.information-card:hover .information-image img {
    transform: scale(1.04);
}


/* PLACEHOLDER JIKA FOTO BELUM ADA */

.information-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    color: rgba(255,255,255,.70);

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(0,168,143,.18),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0B3C5D,
            #082A43
        );
}

.information-placeholder span {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    color: #00A88F;

    font-size: 30px;

    margin-bottom: 12px;
}

.information-placeholder small {
    font-size: 10px;

    letter-spacing: .15em;

    color: rgba(255,255,255,.55);
}


/* ISI INFORMASI */

.information-content {
    padding: 23px;
}

.information-meta {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.information-meta span {
    display: inline-flex;

    padding: 5px 9px;

    border-radius: 999px;

    background: var(--mint);

    color: var(--blue);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .06em;
}

.information-meta time {
    color: #8b9a9f;

    font-size: 10px;

    white-space: nowrap;
}

.information-content h3 {
    font-family: "Manrope", sans-serif;

    font-size: 19px;

    line-height: 1.3;

    margin-bottom: 10px;

    color: var(--navy);
}

.information-content p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    max-width: 100%;
    margin: 0;
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: break-word;
}


/* =========================================================
   DOKTER
   ========================================================= */

.doctors {
    background: var(--navy);
    color: #fff;
}

.doctors .section-heading > p,
.doctors .schedule-header > p {
    color: rgba(255,255,255,.55);
}

.doctor-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 14px;
}

.doctor-card {
    border: 1px solid rgba(255,255,255,.10);

    border-radius: 18px;

    overflow: hidden;

    background: rgba(255,255,255,.045);

    transition: .3s;
}

.doctor-card:hover {
    transform: translateY(-5px);

    background: rgba(255,255,255,.075);
}

.doctor-photo {
    aspect-ratio: 1 / 1.08;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(0,168,143,.15),
            transparent 28%
        ),
        #082A43;

    color: rgba(255,255,255,.30);

    font-size: 10px;

    text-align: center;

    padding: 20px;
}

.doctor-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.doctor-placeholder {
    width: 70px;
    height: 70px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 28px;

    color: #00A88F;
}

.doctor-info {
    padding: 18px;
}

.doctor-info h3 {
    font-family: "Manrope", sans-serif;

    font-size: 16px;

    line-height: 1.35;
}

.doctor-info p {
    color: #00A88F;

    font-size: 12px;

    margin-top: 6px;
}


/* =========================================================
   TAMPILAN JADWAL TERANG & JAM TANPA BOX (MINIMALIS)
   ========================================================= */

/* 1. Latar Belakang Seksi Jadwal (Soft Ice Blue) */
.schedule {
    background: #F0F6F9;
}

.schedule-header h2 {
    color: #0B3C5D;
}

.schedule-header h2 span {
    color: #00A88F;
}

/* 2. Pembungkus Tabel Putih Bersih */
.table-wrap {
    border: 1px solid #D6E4ED;
    border-radius: 16px;
    overflow-x: auto;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(11, 60, 93, 0.06);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 950px;
}

th, td {
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 13px;
    vertical-align: middle;
}

/* 3. Header Tabel (Soft Blue Background) */
th {
    background: #E1ECF4;
    color: #0B3C5D;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 2px solid #CBDCE7;
}

/* 4. Efek Baris Tabel */
tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover {
    background-color: #F8FAFC; /* Sorot lembut saat kursor diarahkan */
}

/* 5. Teks Dokter & Spesialis */
td:first-child {
    font-weight: 700;
    color: #0B3C5D;
    font-size: 14px;
}

td:nth-child(2) {
    font-weight: 700; /* Menambah ketebalan agar sama dengan nama dokter */
    color: #0B3C5D;
    font-size: 13px;
}

/* 6. Jam Praktik (Teks Polos Tanpa Box/Kotak) */
td span {
    display: inline;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #0B3C5D;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

/* 7. Catatan Dibawah Tabel */
.schedule-note {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748B;
    font-size: 12px;
}

.schedule-note > span {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 1px solid #00A88F;
    color: #00A88F;
    font-weight: bold;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
}


/* =========================================================
   KOMITMEN
   ========================================================= */

.commitment {
    background: var(--cream);

    padding-top: 20px;
}

.commitment-box {
    min-height: 390px;

    border-radius: 28px;

    overflow: hidden;

    position: relative;

    background:
        linear-gradient(
            120deg,
            #0B3C5D,
            #082A43
        );

    color: #fff;

    padding: 65px;
}

.commitment-copy {
    position: relative;

    z-index: 2;

    max-width: 620px;
}

.commitment-copy p {
    max-width: 520px;

    color: rgba(255,255,255,.58);

    margin: 22px 0 28px;

    font-size: 13px;
}

.commitment-shape {
    position: absolute;

    right: -30px;
    top: -100px;

    width: 500px;
    height: 500px;
}

.plus-large {
    position: absolute;

    right: 155px;
    top: 150px;

    color: rgba(0,168,143,.75);

    font-size: 150px;

    font-weight: 200;

    z-index: 3;
}

.circle-one,
.circle-two {
    position: absolute;

    border: 1px solid rgba(255,255,255,.13);

    border-radius: 50%;
}

.circle-one {
    width: 420px;
    height: 420px;

    top: 40px;
    right: 10px;
}

.circle-two {
    width: 280px;
    height: 280px;

    top: 110px;
    right: 80px;
}


/* =========================================================
   KONTAK
   ========================================================= */

.contact {
    background: #fff;
}

.contact-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;
}

.contact-copy p {
    margin-top: 22px;

    color: var(--muted);

    max-width: 420px;

    font-size: 14px;
}

.contact-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.contact-item {
    border: 1px solid var(--line);

    border-radius: 17px;

    padding: 22px;

    display: flex;

    gap: 15px;

    align-items: center;
}

.contact-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border-radius: 12px;

    background: var(--mint);

    color: var(--blue);

    display: grid;
    place-items: center;
}

/* =========================================================
   SVG IKON KONTAK
   ========================================================= */

.contact-icon svg {
    width: 24px;
    height: 24px;

    display: block;

    fill: none;
    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;

    color: inherit;
}

.contact-item small {
    display: block;

    color: #8b9a9f;

    font-size: 9px;

    letter-spacing: .15em;
}

.contact-item strong {
    display: block;

    margin-top: 2px;

    font-size: 13px;

    line-height: 1.45;
}

.contact-item a {
    color: var(--blue);

    transition: .2s;
}

.contact-item a:hover {
    color: var(--teal);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: #061F33;

    color: #fff;

    padding: 45px 0 20px;
}

.footer-top {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding-bottom: 35px;
}

.footer-brand {
    display: flex;

    align-items: center;

    gap: 12px;
}

.footer-brand p {
    color: rgba(255,255,255,.45);

    font-size: 9px;

    margin-top: 3px;
}

.footer-links {
    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    justify-content: flex-end;
}

.footer-links a {
    color: rgba(255,255,255,.55);

    font-size: 11px;

    transition: .2s;
}

.footer-links a:hover {
    color: #fff;
}

.footer-bottom {
    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.09);

    display: flex;

    justify-content: space-between;

    color: rgba(255,255,255,.35);

    font-size: 10px;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-top {
    position: fixed;

    right: 22px;
    bottom: 22px;

    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background: var(--navy);

    color: #fff;

    cursor: pointer;

    opacity: 0;

    transform: translateY(10px);

    transition: .3s;

    z-index: 900;
}

.back-top.show {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(22px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .main-nav {
        gap: 14px;
    }

    .main-nav a {
        font-size: 12px;
    }

    .main-nav .nav-button {
        padding: 10px 13px;
    }

    .hero-content {
        gap: 45px;
    }

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

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

}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .container {
        width: min(100% - 32px, 700px);
    }

    .section {
        padding: 80px 0;
    }


        /* -------------------------
       MENU MOBILE
       ------------------------- */

    .nav-wrap {
        position: relative;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        border: 0;
        background: transparent;
        cursor: pointer;
        padding: 10px;
        margin-left: auto;
        position: relative;
        z-index: 1002;
        flex-shrink: 0;
    }

    .menu-toggle span {
        width: 24px;
        height: 2px;
        background: #fff;
        display: block;
        transition: transform .25s ease, opacity .25s ease;
    }

    .menu-toggle[aria-expanded="true"] span:first-child {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] span:last-child {
        transform: translateY(-7px) rotate(-45deg);
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 2px);
        left: auto;
        right: 0;
        width: min(340px, calc(100vw - 28px));
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px;
        background: #0B3C5D;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0,0,0,.30);
        z-index: 1001;
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav > a {
        display: block;
        width: 100%;
        padding: 13px 14px;
        color: #fff;
        font-size: 15px;
        text-align: left;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .main-nav > a:hover,
    .main-nav > a:focus-visible {
        color: #FFD166;
        background: rgba(255,255,255,.06);
    }

    .main-nav .nav-button {
        border-radius: 10px;
        text-align: center;
        margin-top: 10px;
        border-bottom: 0;
    }

    .main-nav .chat-rs-dropdown {
        width: 100%;
    }

    .main-nav .chat-rs-trigger {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 14px;
        color: #fff;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.10);
        font: inherit;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
    }

    .main-nav .chat-rs-menu {
        display: none;
        position: static;
        width: 100%;
        padding: 4px 0 8px 12px;
        background: rgba(0,0,0,.12);
        border: 0;
        box-shadow: none;
    }

    .main-nav .chat-rs-dropdown.open .chat-rs-menu {
        display: block;
    }

    .main-nav .chat-rs-menu a {
        display: block;
        padding: 11px 14px;
        color: #fff;
        font-size: 14px;
        text-decoration: none;
    }

    .main-nav .chat-rs-menu a:hover,
    .main-nav .chat-rs-menu a:focus-visible {
        color: #FFD166;
    }


    /* -------------------------
       HERO
       ------------------------- */

    .hero {
        min-height: 850px;
    }

    .hero-content {
        grid-template-columns: 1fr;

        padding-top: 120px;
    }

    .hero-side {
        display: none;
    }

    .hero h1 {
        font-size: clamp(45px, 12vw, 68px);
    }

    .hero-copy > p {
        font-size: 16px;
    }

    .hero-bottom {
        display: none;
    }


    /* -------------------------
       PROFIL
       ------------------------- */

    .intro-grid,
    .contact-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .intro-image img {
        height: 360px;
    }


    /* -------------------------
       HEADING
       ------------------------- */

    .section-heading,
    .schedule-header {
        display: block;
    }

    .section-heading > p,
    .schedule-header > p {
        margin-top: 20px;
    }

    .intro h2,
    .section-heading h2,
    .schedule-header h2,
    .commitment h2,
    .contact h2 {
        font-size: clamp(36px, 9vw, 52px);
    }

    .lead {
        font-size: 17px;
    }


    /* -------------------------
       LAYANAN
       ------------------------- */

    .service-grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-card h3 {
        font-size: 20px;
    }

    .service-card p {
        font-size: 14px;
    }


    /* -------------------------
       INFORMASI
       ------------------------- */

    .information-grid {
        grid-template-columns: 1fr 1fr;
    }

    .information-image {
        height: 210px;
    }


    /* -------------------------
       DOKTER
       ------------------------- */

    .doctor-grid {
        grid-template-columns: 1fr 1fr;
    }

    .doctors {
        background: var(--navy);
        color: #ffffff !important;
    }

    .doctors .section-heading > p,
    .doctors .schedule-header > p {
        color: rgba(255, 255, 255, 0.85);
    }

/* 1. Teks pada Placeholder / Foto Dokter */
    .doctor-photo {
        aspect-ratio: 1 / 1.08;
        display: grid;
        place-items: center;
        background:
            radial-gradient(
                circle at 50% 35%,
                rgba(0,168,143,.15),
                transparent 28%
            ),
            #082A43;
        color: #ffffff !important; /* Paksa teks di foto jadi putih */
        font-size: 11px;
        text-align: center;
        padding: 20px;
    }

    .doctor-placeholder {
        width: 70px;
        height: 70px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 28px;
        color: #ffffff !important; /* Simbol '+' jadi putih */
    }

/* 2. Teks Nama dan Spesialisasi di Bawah Foto */
    .doctor-info {
        padding: 18px;
    }

    .doctor-info h3,
    .doctor-info h3 * {
        color: #ffffff !important;
        font-weight: 700;
    }

    .doctor-info p,
    .doctor-info p * {
        color: #ffffff !important;
        opacity: 0.9;
    }

/* Teks Placeholder jika Foto Belum Dimuat */
    .doctor-photo,
    .doctor-placeholder {
        color: #ffffff !important;
    }


    /* -------------------------
       JADWAL
       ------------------------- */

    th,
    td {
        font-size: 12px;

        padding: 16px 14px;
    }

    td:first-child {
        font-size: 13px;
    }

    td span {
        font-size: 11px;
    }


    /* -------------------------
       PENDAFTARAN
       ------------------------- */

    .registration-box {
        min-height: 430px;
    }


    /* -------------------------
       KOMITMEN
       ------------------------- */

    .commitment-box {
        padding: 45px 30px;
    }

    .commitment-shape {
        opacity: .45;
    }


    /* -------------------------
       KONTAK
       ------------------------- */

    .contact-copy p {
        font-size: 14px;
    }

    .contact-item strong {
        font-size: 13px;
    }


    /* -------------------------
       FOOTER
       ------------------------- */

    .footer-top {
        flex-direction: column;

        align-items: flex-start;
    }

    .footer-links {
        justify-content: flex-start;
    }

}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 540px) {

    .container {
        width: calc(100% - 28px);
    }

    .section {
        padding: 70px 0;
    }


    /* -------------------------
       HEADER
       ------------------------- */

    .nav-wrap {
        min-height: 76px;
    }

    .brand-mark {
        width: 39px;
        height: 39px;

        font-size: 24px;
    }

    .brand-text strong {
        font-size: 12px;
    }

    .brand-text small {
        display: none;
    }


    /* -------------------------
       HERO
       ------------------------- */

    .hero {
        min-height: 760px;
    }

    .hero-content {
        padding-top: 105px;
    }

    .hero-copy > p {
        font-size: 15px;
    }

    .hero-actions {
        align-items: stretch;

        flex-direction: column;

        max-width: 250px;
    }

    .btn {
        justify-content: center;

        font-size: 14px;
    }


    /* -------------------------
       PROFIL
       ------------------------- */

    .intro-image {
        padding: 8px;

        border-radius: 20px;
    }

    .intro-image img {
        height: 280px;

        border-radius: 14px;
    }

    .intro-image::after {
        inset: 8px;

        border-radius: 14px;
    }

    .intro-image-caption {
        left: 25px;
        right: 25px;
        bottom: 22px;
    }

    .intro-image-caption span {
        font-size: 11px;
    }

    .intro-image-caption strong {
        font-size: 17px;
    }


    /* -------------------------
       JUDUL
       ------------------------- */

    .intro h2,
    .section-heading h2,
    .schedule-header h2,
    .commitment h2,
    .contact h2 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .lead {
        font-size: 16px;
    }

    .intro-columns {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    /* -------------------------
       LAYANAN
       ------------------------- */

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 270px;

        padding: 25px;
    }

    .service-icon {
        margin-bottom: 45px;
    }

    .service-card h3 {
        font-size: 20px;
    }

    .service-card p {
        font-size: 14px;
    }


    /* -------------------------
       PENDAFTARAN
       ------------------------- */

    .registration {
        padding-top: 20px;
    }

    .registration-box {
        min-height: 470px;

        padding: 40px 25px;
    }

    .registration .commitment-copy p {
        font-size: 14px;
    }

    .registration .btn {
        width: 100%;
    }


    /* -------------------------
       INFORMASI
       ------------------------- */

    .information-grid {
        grid-template-columns: 1fr;
    }

    .information-card {
        width: 100%;
    }

    .information-image {
        height: 220px;
    }

    .information-content {
        padding: 20px;
    }

    .information-meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;
    }

    .information-content h3 {
        font-size: 19px;
    }

    .information-content p {
        font-size: 14px;
    }


    /* -------------------------
       DOKTER
       ------------------------- */

    .doctor-grid {
        grid-template-columns: 1fr;
    }

    .doctor-card {
        max-width: 360px;

        margin: auto;

        width: 100%;
    }

    .doctor-info h3 {
        font-size: 16px;
    }

    .doctor-info p {
        font-size: 12px;
    }


    /* -------------------------
       JADWAL
       ------------------------- */

    th,
    td {
        font-size: 12px;

        padding: 15px 12px;
    }

    td:first-child {
        font-size: 13px;
    }

    td span {
        font-size: 11px;
    }

    .schedule-note {
        align-items: flex-start;

        font-size: 11px;
    }


    /* -------------------------
       KOMITMEN
       ------------------------- */

    .commitment-box {
        min-height: 460px;

        padding: 40px 25px;
    }

    .commitment-shape {
        right: -150px;
    }


    /* -------------------------
       KONTAK
       ------------------------- */

    .contact-list {
        grid-template-columns: 1fr;
    }

    .contact-item {
        padding: 18px;
    }

    .contact-item strong {
        font-size: 13px;

        overflow-wrap: anywhere;
    }


    /* -------------------------
       FOOTER
       ------------------------- */

    .footer-links {
        gap: 12px 18px;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 8px;
    }


    /* -------------------------
       BACK TOP
       ------------------------- */

    .back-top {
        right: 15px;
        bottom: 15px;
    }

}


/* =========================================================
   AKSESIBILITAS / REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   POPUP / GALERI FOTO INFORMASI
   ========================================================= */

.information-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 60px 80px;

    background: rgba(11, 60, 93, 0.92);
}

.information-lightbox.show {
    display: flex;
}

.lightbox-content {
    position: relative;

    width: min(900px, 100%);
    max-height: 85vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    display: block;
    max-width: 95%;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    background: #ffffff;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

/* TOMBOL TUTUP */
.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #0b2438;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.lightbox-close:hover {
    transform: scale(1.05);
}

/* TOMBOL SEBELUMNYA & BERIKUTNYA */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #0b2438;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.lightbox-prev:hover,
.lightbox-next:hover {
    transform: translateY(-50%) scale(1.1);
}
.lightbox-prev {
    left: -60px;
}
.lightbox-next {
    right: -60px;
}

.lightbox-counter {
    position: absolute;

    bottom: -45px;

    left: 50%;

    transform: translateX(-50%);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
}

.information-image img {
    cursor: pointer;
}

@media (max-width: 540px) {

    .information-lightbox {
        padding: 55px 15px 50px;
    }

    .lightbox-content {
        width: 100%;
        max-height: 80vh;
    }

    .lightbox-image {
        display: block;
        max-width: 90%;
        max-height: 80vh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        background: #ffffff;
    }

    .lightbox-close {
        top: -48px;
        right: 0;

        width: 40px;
        height: 40px;

        font-size: 26px;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 42px;
        height: 42px;

        font-size: 28px;
    }

    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }

    .lightbox-counter {
        bottom: -35px;
        font-size: 13px;
    }
}

/* =========================================================
   SUSUNAN BANYAK FOTO DALAM SATU KEGIATAN
   ========================================================= */
.galeri-foto-kegiatan {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
    width: 100%;
}

.galeri-foto-kegiatan img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.galeri-foto-kegiatan img:hover {
    transform: scale(1.05);
}

/* Tampilan di HP: 1 kolom */
@media (max-width: 540px) {
    .galeri-foto-kegiatan {
        grid-template-columns: 1fr;
    }
}

/* === KHUSUS HP === */
@media (max-width: 540px) {
    .information-lightbox {
        padding: 50px 10px 30px;
    }

    .lightbox-content {
        width: 100%;
        padding: 0;
    }

    .lightbox-image {
        max-width: 100%;
        max-height: 70vh;
        border-radius: 8px;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .lightbox-prev {
        left: 5px;
    }

    .lightbox-next {
        right: 5px;
    }

    .lightbox-close {
        top: -40px;
        right: 10px;
        font-size: 12px;
        padding: 6px 12px;
    }
}

a.link-berita-terkini {
    color: #087f9b !important;
    text-decoration: none !important;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.25s ease;
}

a.link-berita-terkini:hover {
    color: #e53935 !important;
    text-decoration: underline !important;
}

/* =========================================================
   ICON LAYANAN - TANPA KOTAK
   ========================================================= */

.service-card .service-icon {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #087f9b;

    transition: transform 0.25s ease, color 0.25s ease;
}

.service-card .service-icon svg {
    display: block;

    width: 42px;
    height: 42px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    color: inherit;

    transition: transform 0.25s ease, color 0.25s ease;
}

.service-card:hover .service-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #00A88F;
    transform: translateY(-3px);
}

.service-card:hover .service-icon svg {
    transform: scale(1.10);
}

/* KARTU IGD / FEATURED */
.service-card.featured .service-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #00A88F;
}

.service-card.featured:hover .service-icon {
    background: transparent !important;
    color: #ffffff;
}

@media (max-width: 820px) {

    .service-card .service-icon {
        margin-bottom: 22px;
    }

    .service-card .service-icon svg {
        width: 36px;
        height: 36px;
    }
}

/* =========================================================
   LINK INFORMASI PADA KARTU LAYANAN
   ========================================================= */

.service-card a {
    color: #087f9b;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.25s ease, text-decoration 0.25s ease;
}

.service-card a:hover {
    color: #e53935;
    text-decoration: underline;
    cursor: pointer;
}

/* =========================================================
   HEADER - TEMA MERAH PROFESIONAL
   ========================================================= */

.site-header {
    background: #8B1A1A !important;
    border-bottom: 1px solid #E87582;
}

/* Logo / nama rumah sakit */
.site-header .brand {
    color: #FFF1F3 !important;
}

/* Semua menu */
.site-header .nav-link {
    color: #FFF1F3 !important;
    transition: color 0.25s ease, background 0.25s ease;
}

/* Saat mouse diarahkan ke menu */
.site-header .nav-link:hover {
    color: #FFB3BA !important;
}

/* Menu aktif */
.site-header .nav-link.active {
    color: #FF8A93 !important;
}

/* Tombol utama */
.site-header .btn,
.site-header .button {
    background: #D94355 !important;
    color: #FFF5F6 !important;
    border-color: #D94355 !important;
}

/* Tombol saat mouse */
.site-header .btn:hover,
.site-header .button:hover {
    background: #F05A67 !important;
    border-color: #F05A67 !important;
    color: #ffffff !important;
}

/* Hamburger HP */
.site-header .menu-toggle {
    color: #FF8A93 !important;
}

/* Hilangkan tulisan SELAMAT DATANG dan garis di depannya */
.hero .eyebrow {
    display: none !important;
}

/* Ukuran tulisan VISI dan MISI */
.hero-copy h1 {
    font-size: 30px;
    line-height: 1.1;
}

@media (max-width: 820px) {
    .hero-copy h1 {
        font-size: 20px;
    }
}

/* =========================================================
   JARAK HEADER MERAH KE TULISAN VISI - KOMPUTER
   ========================================================= */

@media (min-width: 821px) {
    .hero-copy {
        padding-top: 60px;
    }
}

/* =========================================================
   TULISAN HEADER MERAH - PUTIH & TEBAL
   ========================================================= */

/* Nama RS */
.site-header .brand-text strong {
    color: #ffffff !important;
    font-weight: 800;
}

/* Keterangan di bawah nama RS */
.site-header .brand-text small {
    color: #ffffff !important;
    font-weight: 600;
}

/* Menu navigasi */
.site-header .main-nav > a {
    color: #ffffff !important;
    font-weight: 700;
}

/* Saat mouse diarahkan ke menu */
.site-header .main-nav > a:hover {
    color: #FFE1E5 !important;
}

/* Menu yang sedang aktif */
.site-header .main-nav > a.active {
    color: #ffffff !important;
    font-weight: 800;
}

/* Tombol Pendaftaran Online */
.site-header .main-nav > a.nav-button {
    color: #ffffff !important;
    font-weight: 800;
}

/* =========================================================
   FOOTER - TULISAN PUTIH & TEBAL
   ========================================================= */

.site-footer {
    color: #ffffff !important;
}

/* Judul/footer heading */
.site-footer h2,
.site-footer h3,
.site-footer h4 {
    color: #ffffff !important;
    font-weight: 800;
}

/* Semua tulisan footer */
.site-footer p,
.site-footer li,
.site-footer span {
    color: #ffffff !important;
    font-weight: 600;
}

/* Link di footer */
.site-footer a {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
}

/* Saat mouse diarahkan ke link footer */
.site-footer a:hover {
    color: #FFE1E5 !important;
    text-decoration: underline;
}

/* Copyright */
.site-footer .copyright {
    color: #ffffff !important;
    font-weight: 600;
}

/* =========================================================
   NAVIGASI MOBILE - LATAR MERAH
   ========================================================= */

@media (max-width: 820px) {

    .site-header .main-nav {
        background-color: #00A88F !important;
    }

}

/* =========================================================
   NAVIGASI MOBILE - TEAL MODERN
   ========================================================= */

@media (max-width: 820px) {

    /* Warna dasar menu */
    .site-header .main-nav {
        background-color: #00A88F !important;
    }

    /* Tulisan menu */
    .site-header .main-nav > a {
        color: #ffffff !important;
        font-weight: 700;
        transition: all 0.25s ease;
    }

    /* Saat disentuh / hover */
    .site-header .main-nav > a:hover {
        background-color: #008F7A !important;
        color: #ffffff !important;
    }

    /* Menu yang sedang aktif */
    .site-header .main-nav > a.active {
        background-color: #008F7A !important;
        color: #ffffff !important;
    }

    /* Tombol pendaftaran */
    .site-header .main-nav > a.nav-button {
        background-color: #F4B942 !important;
        color: #ffffff !important;
        font-weight: 800;
    }

    .site-header .main-nav > a.nav-button:hover {
        background-color: #D99A20 !important;
    }

}

/* Tulisan navigasi mobile */
@media (max-width: 820px) {
    .site-header .main-nav > a {
        color: #FFFFFF !important;
        font-weight: 800 !important;
        opacity: 1 !important;
    }
}

/* =========================================================
   NAVIGASI MOBILE - MODEL KOTAK
   ========================================================= */

@media (max-width: 820px) {

    .site-header .main-nav > a {
        color: #FFFFFF !important;
        font-weight: 800 !important;
        background-color: #00A88F !important;
        border-radius: 6px;
        padding: 12px 16px;
        margin: 4px 0;
        transition: background-color 0.25s ease;
    }

    /* Saat disentuh */
    .site-header .main-nav > a:hover {
        background-color: #008F7A !important;
        color: #FFFFFF !important;
    }

    /* Menu aktif */
    .site-header .main-nav > a.active {
        background-color: #008F7A !important;
        color: #FFFFFF !important;
    }

}

/* Kotak / garis menu navigasi mobile */
@media (max-width: 820px) {

    .site-header .main-nav > a {
        color: #FFFFFF !important;
        font-weight: 800 !important;
        background-color: #00A88F !important;

        border: 1px solid rgba(255, 255, 255, 0.7);
        border-radius: 6px;

        padding: 12px 16px;
        margin: 4px 0;

        transition: all 0.25s ease;
    }

    /* Saat disentuh */
    .site-header .main-nav > a:hover {
        background-color: #008F7A !important;
        border-color: #FFFFFF;
        color: #FFFFFF !important;
    }

    /* Menu aktif */
    .site-header .main-nav > a.active {
        background-color: #008F7A !important;
        border-color: #FFFFFF;
        color: #FFFFFF !important;
    }

}

.brand-mark img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    display: block;
}

@media (max-width: 820px) {
    .brand-mark img {
        width: 42px;
        height: 42px;
    }
}

/* Logo rumah sakit */
.brand-mark {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.brand-mark img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    display: block;
}

@media (max-width: 820px) {
    .brand-mark img {
        width: 60px;
        height: 60px;
    }
}

/* Nomor HP dokter */
.doctor-phone {
    font-size: 12px !important;
    color: rgba(255,255,255,.75) !important;
    margin-top: 4px;
}

@media (max-width: 540px) {
    .doctor-phone {
        font-size: 14px !important;
        line-height: 1.4;
    }
}

/* =========================================================
   POPUP PILIHAN HUBUNGI DOKTER
   ========================================================= */

.doctor-contact-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;

    z-index: 9999;
}

.doctor-contact-box {
    width: 100%;
    max-width: 340px;

    background: #ffffff;

    border-radius: 18px;

    padding: 24px 20px;

    text-align: center;

    box-sizing: border-box;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.doctor-contact-title {
    font-family: "Manrope", sans-serif;

    font-size: 20px;
    font-weight: 700;

    color: #0b2438;

    margin-bottom: 8px;
}

.doctor-contact-number {
    font-size: 14px;

    color: #666666;

    margin-bottom: 20px;
}


/* =========================================================
   TOMBOL TELEPON & WHATSAPP
   ========================================================= */

.doctor-contact-btn {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    margin-top: 10px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: 0.2s ease;
}


/* TELEPON LANGSUNG */

.doctor-call {
    background: #087f9b;

    color: #ffffff !important;
}

.doctor-call:hover {
    background: #066b82;
}


/* WHATSAPP */

.doctor-wa {
    background: #10a8a0;

    color: #ffffff !important;
}

.doctor-wa:hover {
    background: #0d8f89;
}


/* =========================================================
   TOMBOL BATAL
   ========================================================= */

.doctor-contact-cancel {
    width: 100%;

    margin-top: 12px;

    padding: 11px 15px;

    border: none;

    border-radius: 10px;

    background: #eeeeee;

    color: #333333;

    font-size: 14px;

    cursor: pointer;

    transition: 0.2s ease;
}

.doctor-contact-cancel:hover {
    background: #dddddd;
}


/* =========================================================
   NOMOR DOKTER
   ========================================================= */

.doctor-phone {
    text-decoration: none;

    cursor: pointer;
}


/* =========================================================
   TAMPILAN HP / ANDROID
   ========================================================= */

@media (max-width: 540px) {

    .doctor-contact-overlay {
        padding: 18px;
    }

    .doctor-contact-box {
        max-width: 320px;

        padding: 22px 18px;

        border-radius: 16px;
    }

    .doctor-contact-title {
        font-size: 18px;
    }

    .doctor-contact-number {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .doctor-contact-btn {
        padding: 12px 14px;

        font-size: 14px;
    }

    .doctor-contact-cancel {
        padding: 10px 14px;

        font-size: 13px;
    }
}

/* =========================================================
   NOMOR HP DOKTER
   Putih + Tebal - Komputer dan HP
   ========================================================= */

.doctor-info .doctor-phone {
    display: inline-block;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}

.doctor-info .doctor-phone:hover {
    color: #ffffff !important;
    text-decoration: underline;
}


/* =========================================================
   HP
   Ukuran tetap 12px, sama seperti komputer
   ========================================================= */

@media (max-width: 540px) {

    .doctor-info .doctor-phone {
        color: #ffffff !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
    }

}

/* =========================================================
   PERBESAR SEDIKIT TULISAN ISI PROFIL & LAYANAN
   KOMPUTER + HP
   ========================================================= */

/* =========================================================
   TULISAN ISI LEBIH BESAR DI HP
   ========================================================= */

@media (max-width: 540px) {

    /* Tentang Kami / Profil */
    .intro .lead {
        font-size: 18px;
        line-height: 1.8;
    }

    .intro-columns p {
        font-size: 16px;
        line-height: 1.8;
    }

    /* Layanan Kami */
    .service-card p {
        font-size: 16px;
        line-height: 1.8;
    }

}


/* -------------------------
   LAYANAN KAMI
   ------------------------- */

.service-card p {
    font-size: 15px;
    line-height: 1.7;
}


/* -------------------------
   KHUSUS HP
   ------------------------- */

@media (max-width: 540px) {

    .intro .lead {
        font-size: 17px;
        line-height: 1.75;
    }

    .intro-columns p {
        font-size: 15px;
        line-height: 1.75;
    }

    .service-card p {
        font-size: 15px;
        line-height: 1.7;
    }

}

/* =========================================================
   LINK DETAIL PADA LAYANAN
   ========================================================= */

.service-card > a {
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.5;
}


/* =========================================================
   KHUSUS HP
   ========================================================= */

@media (max-width: 540px) {

    .service-card > a {
        font-size: 17px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.5;
    }

}

/* =========================================================
   JUDUL LAYANAN - LEBIH BESAR DI HP
   ========================================================= */

@media (max-width: 540px) {

    .service-card h3 {
        font-size: 25px;
        line-height: 1.3;
    }

}

css
/* =========================================================
   PREVIEW FOTO ICU
   ZOOM + DRAG
   Tidak mengganggu galeri informasi lainnya
   ========================================================= */

/* Gambar ICU normal */
#lightbox .lightbox-image {
    display: block;

    max-width: 100%;
    max-height: 75vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

    /* Kursor kaca pembesar + */
    cursor: zoom-in;

    /* Tidak bisa diseleksi browser */
    user-select: none;
    -webkit-user-select: none;

    /* Tidak bisa ditarik oleh browser */
    -webkit-user-drag: none;

    /* Posisi zoom */
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;

    transition: transform 0.2s ease;

    touch-action: none;
}


/* =========================================================
   FOTO ICU SAAT ZOOM
   ========================================================= */

#lightbox .lightbox-image.zoomed {
    max-width: none;
    max-height: none;

    cursor: grab;

    transition: none;
}


/* =========================================================
   FOTO ICU SAAT SEDANG DIGESER
   ========================================================= */

#lightbox .lightbox-image.dragging {
    cursor: grabbing;

    transition: none;
}


/* =========================================================
   TOMBOL LIGHTBOX ICU
   ========================================================= */

#lightbox .lightbox-button {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

#lightbox .lightbox-close {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}


/* =========================================================
   HP
   ========================================================= */

@media (max-width: 540px) {

    #lightbox {
        padding: 20px;
    }

    #lightbox .lightbox-image {
        max-width: 100%;
        max-height: 70vh;

        width: auto;
        height: auto;

        border-radius: 8px;

        cursor: zoom-in;
    }

    #lightbox .lightbox-image.zoomed {
        max-width: none;
        max-height: none;

        cursor: grab;
    }

    #lightbox .lightbox-button {
        width: 42px;
        height: 42px;

        font-size: 24px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 540px) {

    #lightbox {
        padding: 20px;
    }

    #lightbox .lightbox-image {
        max-width: 100%;
        max-height: 70vh;

        border-radius: 8px;

        cursor: zoom-in;
    }

    #lightbox .lightbox-image.zoomed {
        max-width: none;
        max-height: none;

        cursor: grab;
    }

    #lightbox .lightbox-button {
        width: 42px;
        height: 42px;

        font-size: 24px;
    }

}

/* =========================================================
   FOTO ICU - ZOOM DAN DRAG
   ========================================================= */

#lightbox .lightbox-image {
    display: block;

    max-width: 100%;
    max-height: 75vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

    cursor: zoom-in;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;

    transition: transform 0.2s ease;

    touch-action: none;
}


/* FOTO SUDAH DIPERBESAR */
#lightbox .lightbox-image.zoomed {
    max-width: none;
    max-height: none;

    cursor: grab;

    transition: none;
}


/* FOTO SEDANG DIGESER */
#lightbox .lightbox-image.dragging {
    cursor: grabbing;

    transition: none;
}

/* =========================================================
   ISI PROFIL DARI CMS
========================================================= */

.profil-isi {
    color: var(--muted);
    line-height: 1.8;
}

.profil-isi p {
    margin-top: 0;
    margin-bottom: 18px;
}

.profil-isi strong {
    color: var(--ink);
    font-weight: 700;
}

.profil-isi em {
    font-style: italic;
}

.profil-isi ul,
.profil-isi ol {
    padding-left: 22px;
    margin-bottom: 18px;
}

.profil-isi li {
    margin-bottom: 7px;
}

.profil-isi h2,
.profil-isi h3,
.profil-isi h4 {
    color: var(--navy);
    margin-top: 24px;
    margin-bottom: 12px;
}

.profil-isi a {
    color: var(--blue);
    text-decoration: underline;
}

.profil-isi img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Jarak judul Profil dengan isi Profil */
#profilJudul {
    margin-bottom: 25px !important;
}

/* =========================================================
   TULISAN FOOTER - GERAK KIRI DAN KANAN
   KOMPUTER + HP
   ========================================================= */

.site-footer .footer-running {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 7px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.site-footer .footer-running .footer-running-text {
    display: inline-block;
    white-space: nowrap;
    color: #00A88F !important;
    -webkit-text-fill-color: #00A88F !important;
    font-family: "Segoe Print", "Lucida Handwriting", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    animation: footerRunningBounce 18s ease-in-out infinite alternate;
}

@keyframes footerRunningBounce {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(100vw - 100%));
    }
}

@media (max-width: 540px) {
    .site-footer .footer-running {
        padding: 6px 0;
    }

    .site-footer .footer-running .footer-running-text {
        color: #00A88F !important;
        -webkit-text-fill-color: #00A88F !important;
        font-family: "Segoe Print", "Lucida Handwriting", Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        animation-duration: 11s;
    }
}

/* =========================================================
   KONTAK RS - TELEPON / WHATSAPP
   ========================================================= */

.hospital-contact-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.hospital-contact-link:hover {
    color: var(--blue, #00A88F);
    text-decoration: underline;
}


/* =========================================================
   MODAL KONTAK RS
   ========================================================= */

.contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(3, 20, 32, .62);

    backdrop-filter: blur(4px);
}

.contact-modal.show {
    display: flex;
}


/* Kotak modal */

.contact-modal-box {
    width: min(390px, 100%);

    background: #ffffff;

    border-radius: 20px;

    padding: 26px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .25);

    text-align: center;

    animation: hospitalContactIn .18s ease-out;
}


/* Judul */

.contact-modal-box h3 {
    margin: 0 0 8px;

    color: #0B3C5D;

    font-size: 20px;

    font-weight: 800;
}


/* Keterangan */

.contact-modal-box p {
    margin: 0 0 20px;

    color: #64748B;

    font-size: 14px;
}


/* Area tombol */

.contact-modal-actions {
    display: grid;
    gap: 10px;
}


/* Semua tombol */

.contact-modal-btn {
    width: 100%;

    border: 0;

    border-radius: 12px;

    padding: 13px 16px;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

    text-decoration: none;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    box-sizing: border-box;
}


/* Tombol Telepon */

.contact-modal-btn.phone {
    background: #0B3C5D;
    color: #ffffff;
}


/* Tombol WhatsApp */

.contact-modal-btn.whatsapp {
    background: #00A88F;
    color: #ffffff;
}


/* Tombol Batal */

.contact-modal-btn.cancel {
    background: #F1F5F9;
    color: #475569;
}


/* Hover */

.contact-modal-btn:hover {
    opacity: .9;
}


/* Animasi */

@keyframes hospitalContactIn {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   TAMPILAN HP
   ========================================================= */

@media (max-width: 540px) {
    .site-footer .footer-running {
        padding: 6px 0;
    }

    .site-footer .footer-running .footer-running-text {
        color: #00A88F !important;
        -webkit-text-fill-color: #00A88F !important;
        font-family: "Segoe Print", "Lucida Handwriting", Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
        animation-duration: 2s;
    }
}

/* =========================================================
   MENU MOBILE - COMPACT SEPERTI RUMWEB
   KHUSUS HP / TABLET
   ========================================================= */

@media (max-width: 820px) {

    /* -----------------------------------------
       KOTAK MENU UTAMA
       ----------------------------------------- */

    .site-header .main-nav {
        position: absolute !important;

        top: 70px !important;

        left: auto !important;
        right: 0 !important;

        width: fit-content !important;
        max-width: calc(100% - 20px) !important;

        display: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 3px !important;

        padding: 6px !important;
        margin: 0 !important;

        background: #00A88F !important;

        border: 1px solid rgba(255,255,255,.45) !important;

        border-radius: 12px !important;

        box-shadow:
            0 10px 25px rgba(0,0,0,.20) !important;

        box-sizing: border-box !important;

        z-index: 10004 !important;
    }


    /* -----------------------------------------
       SAAT MENU DIBUKA
       ----------------------------------------- */

    .site-header .main-nav.open {
        display: flex !important;

        position: absolute !important;

        top: 70px !important;

        left: auto !important;
        right: 0 !important;

        width: fit-content !important;
        max-width: calc(100% - 20px) !important;
    }


    /* -----------------------------------------
       ITEM MENU
       ----------------------------------------- */

    .site-header .main-nav > a {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 150px !important;

        min-height: 40px !important;

        padding: 9px 16px !important;

        margin: 0 !important;

        color: #ffffff !important;

        background: transparent !important;

        border: 1px solid rgba(255,255,255,.60) !important;

        border-radius: 8px !important;

        font-size: 13px !important;

        font-weight: 800 !important;

        line-height: 1.2 !important;

        text-align: center !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;

        opacity: 1 !important;

        transition:
            color .25s ease,
            background .25s ease,
            border-color .25s ease,
            transform .20s ease !important;
    }


    /* -----------------------------------------
       SAAT MOUSE / SENTUH MENU
       ----------------------------------------- */

    .site-header .main-nav > a:hover {
        background: #ffffff !important;

        color: #1479AD !important;

        border-color: #ffffff !important;
    }


    /* -----------------------------------------
       MENU AKTIF
       ----------------------------------------- */

    .site-header .main-nav > a.active {
        background: #ffffff !important;

        color: #1479AD !important;

        border-color: #ffffff !important;
    }


    /* -----------------------------------------
       TOMBOL PENDAFTARAN ONLINE
       ----------------------------------------- */

    .site-header .main-nav > a.nav-button {

        min-width: 150px !important;

        margin-top: 2px !important;

        background: #F4B942 !important;

        color: #ffffff !important;

        border-color: #ffffff !important;

        border-radius: 999px !important;

        font-weight: 800 !important;
    }


    /* -----------------------------------------
       HOVER PENDAFTARAN
       ----------------------------------------- */

    .site-header .main-nav > a.nav-button:hover {

        background: #ffffff !important;

        color: #1479AD !important;

        border-color: #ffffff !important;
    }

}


/* =========================================================
   MENU MOBILE LEBIH KECIL DI HP
   ========================================================= */

@media (max-width: 540px) {

    .site-header .main-nav {
        top: 66px !important;

        right: 0 !important;
        left: auto !important;

        max-width: calc(100% - 14px) !important;

        padding: 5px !important;

        border-radius: 11px !important;

        gap: 2px !important;
    }


    .site-header .main-nav.open {
        top: 66px !important;

        right: 0 !important;
        left: auto !important;
    }


    .site-header .main-nav > a {

        min-width: 145px !important;

        min-height: 38px !important;

        padding: 8px 14px !important;

        font-size: 12px !important;

        border-radius: 7px !important;
    }


    .site-header .main-nav > a.nav-button {
        min-width: 145px !important;
    }

}

/* =========================================================
   CHAT RS DROPDOWN - SIMPLE
   ========================================================= */

.chat-rs-dropdown {
    position: relative;
    display: inline-block;
}

.chat-rs-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: #fff !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.chat-rs-trigger span {
    font-size: 10px;
}

.chat-rs-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    padding: 6px;
    background: #00A88F;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    z-index: 10010;
}

.chat-rs-dropdown.open .chat-rs-menu {
    display: block;
}

.chat-rs-menu a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px 10px !important;
    margin: 0 !important;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-decoration: none;
    white-space: nowrap;
}

.chat-rs-menu a:hover {
    background: rgba(255,255,255,.18) !important;
    color: #fff !important;
}


/* MOBILE */

@media (max-width: 820px) {

    .chat-rs-dropdown {
        width: 100%;
    }

    .chat-rs-trigger {
        width: 100%;
        min-width: 150px;
        min-height: 40px;
        padding: 9px 16px;
        justify-content: center;
        border: 1px solid rgba(255,255,255,.60);
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 13px;
    }

    .chat-rs-menu {
        position: absolute;
        top: calc(100% + 5px);
        left: 50%;
        transform: translateX(-50%);
        width: 190px;
        padding: 5px;
    }

    .chat-rs-menu a {
        padding: 8px 10px !important;
        font-size: 12px !important;
        text-align: left !important;
    }
}

@media (max-width: 540px) {

    .chat-rs-trigger {
        min-width: 145px;
        min-height: 38px;
        padding: 8px 14px;
        font-size: 12px;
    }

    .chat-rs-menu {
        width: 180px;
    }

    .chat-rs-menu a {
        padding: 7px 9px !important;
        font-size: 11px !important;
    }
}

/* =========================================================
   CHAT RS DROPDOWN - HP WARNA MERAH
   ========================================================= */

@media (max-width: 820px) {

    .site-header .chat-rs-dropdown .chat-rs-menu {
        background: #8B1A1A !important;
        border: 1px solid rgba(255,255,255,.40) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.25) !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a {
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a:hover,
    .site-header .chat-rs-dropdown .chat-rs-menu a:active {
        background: rgba(255,255,255,.18) !important;
        color: #ffffff !important;
    }

}

/* =========================================================
   CHAT RS HP - UKURAN MENYESUAIKAN NAVIGASI UTAMA
   ========================================================= */

@media (max-width: 820px) {

    .site-header .chat-rs-dropdown .chat-rs-menu {
        width: 175px !important;
        min-width: 175px !important;
        padding: 4px !important;
        border-radius: 7px !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a {
        min-height: 34px !important;
        padding: 7px 9px !important;

        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        border-radius: 5px !important;
    }

}

@media (max-width: 540px) {

    .site-header .chat-rs-dropdown .chat-rs-menu {
        width: 165px !important;
        min-width: 165px !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a {
        min-height: 32px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

}

/* =========================================================
   CHAT RS HP - DROPDOWN SAMPING KIRI
   SEJAJAR DENGAN CHAT RS
   ========================================================= */

@media (max-width: 820px) {

    .site-header .chat-rs-dropdown .chat-rs-menu {
        position: absolute !important;

        top: 0 !important;
        right: calc(100% + 14px) !important;
        left: auto !important;

        transform: none !important;

        margin: 0 !important;
    }

}

/* =========================================================
   CHAT RS - SAMAKAN DENGAN NAVIGASI UTAMA
   ========================================================= */

@media (max-width: 820px) {

    .site-header .chat-rs-dropdown .chat-rs-menu {
        width: 150px !important;
        min-width: 150px !important;

        padding: 6px !important;
        margin: 0 !important;

        box-sizing: border-box;
        border-radius: 8px !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 150px !important;
        min-height: 40px !important;

        padding: 9px 16px !important;
        margin: 0 !important;

        box-sizing: border-box;

        color: #fff !important;
        background: transparent !important;

        border: 1px solid rgba(255,255,255,.60) !important;
        border-radius: 8px !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        white-space: nowrap;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a:hover,
    .site-header .chat-rs-dropdown .chat-rs-menu a:active {
        background: #fff !important;
        color: #1479AD !important;
        border-color: #fff !important;
    }
}


@media (max-width: 540px) {

    .site-header .chat-rs-dropdown .chat-rs-menu {
        width: 145px !important;
        min-width: 145px !important;
        padding: 5px !important;
        border-radius: 7px !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a {
        min-width: 145px !important;
        min-height: 38px !important;

        padding: 8px 14px !important;

        font-size: 12px !important;
        font-weight: 800 !important;

        border-radius: 7px !important;
    }

}

/* Efek pergantian foto slideshow Profil */
#profilGambar {
    opacity: 1;
    transition: opacity 2.5s ease-in-out;
    will-change: opacity;
}

#profilGambar.fade-out {
    opacity: 0;
}

/* Efek slideshow Profil khusus HP */
@media (max-width: 768px) {
    #profilGambar {
        transition: opacity 2.5s ease-in-out;
    }
}

/* HEADER BERGANTI WARNA OTOMATIS */
.site-header {
    background-color: #111111;
    transition: background-color 2s ease-in-out;
}

/* Warna hitam */
.site-header.header-hitam {
    background-color: #111111 !important;
}

/* Warna hijau */
.site-header.header-hijau {
    background-color: #008000 !important;
}

/* Warna merah terang */
.site-header.header-merah {
    background-color: #FF2020 !important;
}

/* Pastikan menu tetap putih */
.site-header .nav-link,
.site-header nav a {
    color: #FFFFFF;
}

/* Header merah dengan pola kotak-kotak */
.site-header.header-merah {
    background-color: #FF2020 !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.20) 1px,
            transparent 2px
        ),
        linear-gradient(
            rgba(120,0,0,0.20) 1px,
            transparent 2px
        ) !important;
    background-size: 18px 18px !important;
    background-position: 0 0;
}

/* =========================================================
   PERBAIKAN AKHIR MENU HP RS BUKIT LEWOLEBA
   Kotak kecil mengikuti tulisan, tepat di bawah header
   ========================================================= */

@media (max-width: 820px) {

    /* Menjadi acuan posisi menu */
    .site-header .nav-wrap {
        position: relative !important;
    }

    /* Panel menu utama */
    .site-header .main-nav {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;

        width: max-content !important;
        max-width: calc(100vw - 28px) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;

        display: none !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 5px !important;

        padding: 8px !important;
        margin: 0 !important;

        background-color: #FF2020 !important;
        background-image:
            linear-gradient(
                90deg,
                rgba(255,255,255,.18) 1px,
                transparent 1px
            ),
            linear-gradient(
                rgba(120,0,0,.18) 1px,
                transparent 1px
            ) !important;
        background-size: 12px 12px !important;

        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 0 0 9px 9px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,.25) !important;
        z-index: 10004 !important;
    }

    /* Menu muncul saat tombol tiga garis diklik */
    .site-header .main-nav.open {
        display: flex !important;
    }

    /* Kotak menu mengikuti panjang tulisan */
    .site-header .main-nav > a {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 8px 10px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        white-space: nowrap !important;

        background: rgba(145,0,0,.78) !important;
        color: #FFFFFF !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 5px !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    .site-header .main-nav > a:hover,
    .site-header .main-nav > a.active {
        background: #FFFFFF !important;
        color: #1479AD !important;
    }

    /* Pendaftaran Online juga menyesuaikan tulisan */
    .site-header .main-nav > a.nav-button {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 5px !important;
        background: #B5121B !important;
        color: #FFFFFF !important;
    }

    /* Kotak Chat RS */
    .site-header .main-nav .chat-rs-dropdown {
        position: relative !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .site-header .main-nav .chat-rs-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;

        padding: 8px 10px !important;
        margin: 0 !important;

        background: rgba(145,0,0,.78) !important;
        color: #FFFFFF !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 5px !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    .site-header .main-nav .chat-rs-trigger:hover {
        background: #FFFFFF !important;
        color: #1479AD !important;
    }

    /* Pilihan Chat RS muncul di bawah tombol Chat RS */
    .site-header .main-nav .chat-rs-dropdown .chat-rs-menu {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: max-content !important;
        min-width: 175px !important;
        max-width: calc(100vw - 40px) !important;

        display: none;
        padding: 5px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        background: #B5121B !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 6px !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.25) !important;

        z-index: 10010 !important;
    }

    /* Tampilkan pilihan jika Chat RS dibuka */
    .site-header .main-nav .chat-rs-dropdown.open .chat-rs-menu {
        display: block !important;
    }

    /* Tautan di dalam menu Chat RS */
    .site-header .main-nav .chat-rs-dropdown .chat-rs-menu a {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        padding: 8px 9px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        background: transparent !important;
        color: #FFFFFF !important;

        border: 0 !important;
        border-radius: 4px !important;

        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .site-header .main-nav .chat-rs-dropdown .chat-rs-menu a:hover {
        background: #FFFFFF !important;
        color: #1479AD !important;
    }
}

/* LINK BERITA & INFORMASI - WEBSITE UTAMA */
.berita-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #0B3C5D;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;

    padding: 8px 0;
    border-bottom: 3px solid #00A88F;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}

.berita-link-arrow {
    display: inline-block;
    color: #008672;
    font-size: 22px;
    font-weight: 800;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.berita-link:hover {
    color: #008672;
    border-bottom-color: #F4B942;
}

.berita-link:hover .berita-link-arrow {
    color: #8B1A1A;
    transform: translateX(6px);
}

.berita-link:focus-visible {
    outline: 3px solid #F4B942;
    outline-offset: 4px;
    border-radius: 3px;
}

@media (max-width: 820px) {
    .berita-link {
        font-size: 15px;
        gap: 7px;
    }

    .berita-link-arrow {
        font-size: 20px;
    }
}

/* =========================================================
   PERBAIKAN MENU CHAT RS DI HP
   SUBMENU TETAP DI DALAM KOTAK MENU MERAH
   DAN MENU BISA DIGULIR
   ========================================================= */

@media (max-width: 820px) {

    /* Kotak merah menu utama */
    .site-header .main-nav {
        max-height: calc(100dvh - 90px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        align-items: stretch !important;
    }

    /* Chat RS menggunakan lebar penuh di dalam panel */
    .site-header .main-nav .chat-rs-dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
    }

    /* Tombol Chat RS */
    .site-header .main-nav .chat-rs-trigger {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Submenu menjadi bagian dari kotak merah utama */
    .site-header .main-nav .chat-rs-dropdown .chat-rs-menu {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;

        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 5px 0 4px !important;
        padding: 5px !important;

        box-sizing: border-box !important;
        background: #8B1A1A !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 7px !important;
        box-shadow: none !important;
    }

    /* Munculkan submenu setelah tombol Chat RS diklik */
    .site-header .main-nav .chat-rs-dropdown.open .chat-rs-menu {
        display: block !important;
    }

    /* Pilihan submenu */
    .site-header .main-nav .chat-rs-dropdown .chat-rs-menu a {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;

        padding: 9px 10px !important;
        margin: 3px 0 !important;

        box-sizing: border-box !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;

        color: #ffffff !important;
        background: transparent !important;
        border: 1px solid rgba(255,255,255,.45) !important;
        border-radius: 5px !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    .site-header .main-nav .chat-rs-dropdown .chat-rs-menu a:hover,
    .site-header .main-nav .chat-rs-dropdown .chat-rs-menu a:active {
        background: #ffffff !important;
        color: #8B1A1A !important;
    }
}

/* FORMULIR RESPON MASYARAKAT */
.respon-form-group {
    margin-bottom: 16px;
}

.respon-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #0B3C5D;
    font-size: 14px;
    font-weight: 700;
}

.respon-form-group input,
.respon-form-group select,
.respon-form-group textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #CBD5E1;
    border-radius: 9px;
    background: #FFFFFF;
    color: #1E293B;
    font: inherit;
    font-size: 14px;
}

.respon-form-group input:focus,
.respon-form-group select:focus,
.respon-form-group textarea:focus {
    outline: 2px solid rgba(0, 168, 143, .25);
    border-color: #00A88F;
}

.respon-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.respon-privasi {
    color: #64748B;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.respon-kirim {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 13px 18px;
    background: #0B3C5D;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.respon-kirim:hover {
    background: #00A88F;
}

.respon-pesan {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================
   PANEL RESPON RS BUKIT LEWOLEBA
   ========================================= */

.panel-respon-isi {
    padding: 24px;
    overflow-y: auto;
    color: #1E293B;
    background: #F4F7F9;
}

.respon-bagian {
    padding: 22px;
    margin-bottom: 22px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(11, 60, 93, 0.06);
}

.respon-heading {
    margin-bottom: 22px;
}

.respon-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #008672;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.respon-heading h3 {
    margin: 0 0 9px;
    color: #0B3C5D;
    font-size: 23px;
    line-height: 1.35;
    font-weight: 800;
}

.respon-heading p {
    margin: 0;
    color: #64748B;
    font-size: 14px;
    line-height: 1.7;
}

.respon-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.respon-form-group {
    min-width: 0;
    margin-bottom: 16px;
}

.respon-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.respon-form-group label span {
    color: #B91C1C;
}

.respon-form-group input,
.respon-form-group select,
.respon-form-group textarea {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #CBD5E1;
    border-radius: 9px;
    background: #FFFFFF;
    color: #1E293B;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color .2s, box-shadow .2s;
}

.respon-form-group input:focus,
.respon-form-group select:focus,
.respon-form-group textarea:focus {
    outline: none;
    border-color: #00A88F;
    box-shadow: 0 0 0 3px rgba(0, 168, 143, .13);
}

.respon-form-group textarea {
    min-height: 135px;
    resize: vertical;
}

.respon-full {
    grid-column: 1 / -1;
}

.respon-privasi {
    margin: 0 0 16px;
    color: #64748B;
    font-size: 12px;
    line-height: 1.7;
}

.respon-kirim {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    background: #0B3C5D;
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.respon-kirim:hover {
    background: #008672;
    transform: translateY(-1px);
}

.respon-pesan {
    margin: 12px 0 0;
    color: #B45309;
    font-size: 13px;
    line-height: 1.6;
}

/* FILTER STATISTIK */

.respon-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #F0F6F9;
}

.respon-filter .respon-form-group {
    margin-bottom: 8px;
}

.respon-filter [hidden] {
    display: none !important;
}

/* KARTU ANGKA STATISTIK */

.respon-statistik-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.respon-stat-card {
    min-width: 0;
    padding: 17px 13px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}

.respon-stat-icon {
    display: block;
    margin-bottom: 12px;
    font-size: 23px;
}

.respon-stat-card p {
    margin: 0 0 9px;
    color: #64748B;
    font-size: 12px;
    line-height: 1.5;
}

.respon-stat-card strong {
    display: block;
    overflow-wrap: anywhere;
    color: #0B3C5D;
    font-size: 27px;
    font-weight: 800;
}

.respon-stat-card small {
    display: block;
    margin-top: 5px;
    color: #64748B;
    font-size: 11px;
    line-height: 1.5;
}

.respon-stat-info {
    padding: 15px;
    margin-top: 16px;
    border-left: 4px solid #D9B46C;
    border-radius: 8px;
    background: #FFFBEB;
}

.respon-stat-info strong {
    color: #92400E;
    font-size: 13px;
}

.respon-stat-info p {
    margin: 6px 0 0;
    color: #78350F;
    font-size: 12px;
    line-height: 1.7;
}

/* TAMPILAN HP */

@media (max-width: 600px) {
    .panel-respon-isi {
        padding: 12px;
    }

    .respon-bagian {
        padding: 16px;
        margin-bottom: 14px;
        border-radius: 12px;
    }

    .respon-heading h3 {
        font-size: 20px;
    }

    .respon-heading p {
        font-size: 13px;
    }

    .respon-form-grid,
    .respon-filter {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .respon-full {
        grid-column: auto;
    }

    .respon-statistik-grid {
        grid-template-columns: 1fr;
    }

    .respon-stat-card {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 10px;
        align-items: center;
        padding: 14px;
    }

    .respon-stat-icon {
        grid-column: 1;
        grid-row: 1 / span 3;
        margin: 0;
    }

    .respon-stat-card p {
        margin: 0 0 4px;
    }

    .respon-stat-card strong {
        font-size: 23px;
    }

    .respon-stat-card small {
        margin-top: 3px;
    }
}

/* MENU RESPON - SAMA SEPERTI MENU NAVIGASI LAIN */
.site-header .main-nav .nav-respon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.site-header .main-nav .nav-respon-link:hover,
.site-header .main-nav .nav-respon-link:focus-visible {
    color: #D9B46C;
}

/* HP: Respon mengikuti bentuk menu Kontak */
@media (max-width: 820px) {
    .site-header .main-nav .nav-respon-link {
        display: flex;
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
        justify-content: center;
        padding: 10px 12px;
        margin: 0;
        background: transparent;
        color: #FFFFFF;
        border: none;
        border-radius: 0;
        text-align: center;
    }

    .site-header .main-nav .nav-respon-link:hover,
    .site-header .main-nav .nav-respon-link:active {
        background: transparent;
        color: #D9B46C;
    }
}

/* ==========================================
   PANEL RESPON - MERAH MAROON
   GARIS PUTIH SEDIKIT LEBIH TEBAL
   RS BUKIT LEWOLEBA
   ========================================== */

/* Latar utama panel */
.panel-respon-isi {
    background: #6F1725 !important;
    color: #FFFFFF !important;
}

/* Kotak bagian formulir dan statistik */
.panel-respon-isi .respon-bagian {
    background: transparent !important;
    border: 0.3px solid #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* Judul bagian */
.panel-respon-isi h2,
.panel-respon-isi h3,
.panel-respon-isi .respon-heading h3 {
    color: #FFFFFF !important;
}

/* Label kecil */
.panel-respon-isi .respon-label {
    color: #FFFFFF !important;
}

/* Keterangan dan teks */
.panel-respon-isi .respon-heading p,
.panel-respon-isi .respon-privasi,
.panel-respon-isi .respon-form-group label {
    color: #FFFFFF !important;
}

/* Tanda wajib diisi */
.panel-respon-isi .respon-form-group label span {
    color: #FFD8A8 !important;
}

/* Kolom isian tetap putih agar mudah dibaca */
.panel-respon-isi .respon-form-group input,
.panel-respon-isi .respon-form-group select,
.panel-respon-isi .respon-form-group textarea {
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF !important;
    color: #242424 !important;
    border: 0.3px solid #D7A6AD !important;
    border-radius: 8px !important;
}

.panel-respon-isi .respon-form-group input::placeholder,
.panel-respon-isi .respon-form-group textarea::placeholder {
    color: #707070 !important;
    opacity: 1;
}

/* Sorotan kolom ketika dipilih */
.panel-respon-isi .respon-form-group input:focus,
.panel-respon-isi .respon-form-group select:focus,
.panel-respon-isi .respon-form-group textarea:focus {
    outline: 1px solid #FFFFFF !important;
    border-color: #D94F20 !important;
}

/* Tombol kirim tanggapan */
.panel-respon-isi .respon-kirim {
    background: #D94F20 !important;
    color: #FFFFFF !important;
    border: 0.3px solid #FFFFFF !important;
    border-radius: 9px !important;
    font-weight: 800;
}

.panel-respon-isi .respon-kirim:hover,
.panel-respon-isi .respon-kirim:focus-visible {
    background: #B93818 !important;
    color: #FFFFFF !important;
}

/* Filter tanggal, bulan, dan tahun */
.panel-respon-isi .respon-filter {
    background: transparent !important;
    border: 0.3px solid #FFFFFF !important;
    border-radius: 12px !important;
    padding: 15px;
}

/* Kartu statistik tetap putih */
.panel-respon-isi .respon-stat-card {
    background: #FFFFFF !important;
    border: 0.3px solid #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.panel-respon-isi .respon-stat-card p {
    color: #5A2630 !important;
}

.panel-respon-isi .respon-stat-card strong {
    color: #6F1725 !important;
}

.panel-respon-isi .respon-stat-card small {
    color: #5F5F5F !important;
}

/* Kotak informasi statistik */
.panel-respon-isi .respon-stat-info {
    background: transparent !important;
    border: 0.3px solid #FFFFFF !important;
    border-left: 5px solid #FFFFFF !important;
    border-radius: 10px !important;
}

.panel-respon-isi .respon-stat-info strong,
.panel-respon-isi .respon-stat-info p {
    color: #FFFFFF !important;
}

/* Pesan formulir */
.panel-respon-isi .respon-pesan {
    color: #FFFFFF !important;
}

/* Garis pemisah */
.panel-respon-isi hr {
    border: none !important;
    border-top: 2px solid #FFFFFF !important;
    margin: 22px 0;
}

/* ==========================================
   TAMPILAN HP
   ========================================== */

@media (max-width: 820px) {
    .panel-respon-isi {
        background: #6F1725 !important;
        padding: 12px;
    }

    .panel-respon-isi .respon-bagian {
        background: transparent !important;
        border: 0.3px solid #FFFFFF !important;
        border-radius: 12px !important;
        padding: 15px;
        margin-bottom: 15px;
    }

    .panel-respon-isi .respon-heading h3 {
        color: #FFFFFF !important;
        font-size: 20px;
    }

    .panel-respon-isi .respon-heading p {
        color: #FFFFFF !important;
        font-size: 13px;
        line-height: 1.7;
    }

    .panel-respon-isi .respon-kirim {
        width: 100%;
        min-height: 46px;
    }

    .panel-respon-isi .respon-statistik-grid {
        grid-template-columns: 1fr;
    }
}

/* HEADER PANEL RESPON TETAP DI ATAS */
.panel-respon {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
}

/* BAGIAN JUDUL, LOGO, DAN TOMBOL TUTUP TIDAK IKUT SCROLL */
.panel-respon .panel-respon-header {
    position: sticky !important;
    top: 0;
    z-index: 10;
    flex: 0 0 auto !important;
    background: #6F1725 !important;
}

/* HANYA ISI PANEL YANG BISA DIGULIR */
.panel-respon .panel-respon-isi {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================
   MENU KOMPUTER - DUA BARIS
   RS BUKIT LEWOLEBA
   ========================================== */

@media (min-width: 821px) {

    /* Pertahankan tinggi header yang sudah tepat */
    .site-header .nav-wrap {
        min-height: 105px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 18px;
    }

    /* Logo dan nama rumah sakit */
    .site-header .brand {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 250px;
        max-width: 340px;
        gap: 10px;
    }

    .site-header .brand-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        white-space: normal;
        line-height: 1.25;
    }

    /* Menu mengambil area kanan dan dibuat dua baris */
    .site-header .main-nav {
        margin-left: auto !important;
        flex: 1 1 500px;
        min-width: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 7px;
        padding: 8px 0;
        box-sizing: border-box;
    }

    /* Semua tautan menu, termasuk Chat RS */
    .site-header .main-nav a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 38px;
        padding: 9px 12px;
        margin: 0;
        box-sizing: border-box;

        background: #176184 !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 4px !important;

        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Hover dan menu aktif */
    .site-header .main-nav a:hover,
    .site-header .main-nav a.active {
        background: #D9B46C !important;
        color: #082A43 !important;
        border-color: #D9B46C !important;
    }

    /* Tombol hamburger tidak ditampilkan di komputer */
    .site-header .menu-toggle {
        display: none;
    }
}

/* PERBAIKAN KOTAK RESPONS DAN CHAT RS */
@media (min-width: 821px) {

    /* Samakan ukuran semua kotak menu */
    .site-header .main-nav a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        line-height: 1.2 !important;
        vertical-align: middle;
    }

    /* Samakan kotak Respons */
    .site-header .main-nav a[href*="respons"],
    .site-header .main-nav a.nav-button {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    /* Kotak Chat RS */
    .site-header .main-nav a[href*="chat"],
    .site-header .main-nav a[href*="whatsapp"],
    .site-header .main-nav a[href*="wa.me"],
    .site-header .main-nav a[aria-label*="Chat RS"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        background: #176184 !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }
}

/* ==========================================
   CHAT RS - BARIS BAWAH, TANPA KOTAK
   KHUSUS KOMPUTER
   ========================================== */

@media (min-width: 821px) {

    /* Letakkan Chat RS pada baris baru */
    .site-header .chat-rs-dropdown {
        order: 99;
        flex: 0 0 auto;
        align-self: center;
        margin: 0 0 0 8px;
        padding: 0;
        position: relative;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* Hilangkan kotak pada tombol Chat RS */
    .site-header .chat-rs-dropdown .chat-rs-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        height: 38px;
        padding: 0 8px;
        margin: 0;

        background: transparent !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        font: inherit;
        cursor: pointer;
        white-space: nowrap;
    }

    /* Hilangkan efek kotak saat mouse diarahkan */
    .site-header .chat-rs-dropdown .chat-rs-trigger:hover,
    .site-header .chat-rs-dropdown .chat-rs-trigger:focus {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #D9B46C !important;
        outline-offset: 3px;
    }

    /* Pertahankan fungsi dropdown dua submenu */
    .site-header .chat-rs-dropdown .chat-rs-menu {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 1005;
        min-width: 190px;
    }
}

/* PERBAIKAN SUBMENU CHAT RS MENJADI HORIZONTAL */
@media (min-width: 821px) {

    .site-header .chat-rs-dropdown {
        position: relative !important;
        overflow: visible !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu {
        position: absolute !important;
        top: 50% !important;
        right: calc(100% + 6px) !important;
        left: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;

        width: max-content !important;
        min-width: max-content !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 99999 !important;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;

        padding: 9px 10px !important;
        color: #fff !important;
        background: #176184 !important;
        text-decoration: none !important;
        border-radius: 4px;
    }

    .site-header .chat-rs-dropdown .chat-rs-menu a:hover {
        background: #D9B46C !important;
        color: #082A43 !important;
    }
}
/* CHAT RS - SEMBUNYIKAN SUBMENU SAAT AWAL */
@media (min-width: 821px) {
    .site-header .chat-rs-dropdown .chat-rs-menu {
        display: none !important;
    }

    .site-header .chat-rs-dropdown.open .chat-rs-menu,
    .site-header .chat-rs-dropdown.active .chat-rs-menu,
    .site-header .chat-rs-dropdown.show .chat-rs-menu {
        display: flex !important;
    }
}

/* CHAT RS - SUBMENU TEKS SAJA */
@media (min-width: 821px) {
    .site-header .chat-rs-dropdown .chat-rs-menu a {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;

        color: #ffffff !important;
        text-decoration: none !important;
        padding: 9px 10px !important;
    }

    /* Warna teks berubah saat mouse diarahkan */
    .site-header .chat-rs-dropdown .chat-rs-menu a:hover {
        background: transparent !important;
        color: #D9B46C !important;
    }
}

/* =====================================
   MENU KHUSUS HP - RS BUKIT LEWOLEBA
   ===================================== */

.mobile-nav {
    display: none;
}

@media (max-width: 820px) {
    .site-header .nav-wrap {
        position: relative;
    }

    /* Menu komputer disembunyikan di HP */
    .site-header #mainNav {
        display: none !important;
    }

    /* Tombol hamburger tetap terlihat */
    .site-header #menuToggle {
        display: flex !important;
        position: relative;
        z-index: 1002;
        flex-shrink: 0;
    }

    /* Panel menu HP */
    .site-header #mobileNav:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        width: min(350px, calc(100vw - 24px));
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 10px;
        gap: 2px;
        background: #0B3C5D;
        color: #fff;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0,0,0,.28);
        z-index: 1001;
        box-sizing: border-box;
    }

    .site-header #mobileNav a,
    .site-header #mobileNav summary {
        display: block;
        padding: 13px 14px;
        color: #fff;
        font-size: 15px;
        line-height: 1.4;
        text-decoration: none;
        cursor: pointer;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .site-header #mobileNav a:hover,
    .site-header #mobileNav summary:hover {
        background: rgba(255,255,255,.12);
        color: #FFD700;
    }

    .site-header #mobileNav summary {
        list-style: none;
        font-weight: 700;
        position: relative;
        padding-right: 36px;
    }

    .site-header #mobileNav summary::-webkit-details-marker {
        display: none;
    }

    .site-header #mobileNav summary::after {
        content: "+";
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #FFD700;
        font-size: 20px;
    }

    .site-header #mobileNav details[open] > summary::after {
        content: "";
    }

    .site-header #mobileNav .mobile-submenu {
        margin: 0 0 6px 10px;
        padding-left: 8px;
        border-left: 2px solid rgba(255,215,0,.65);
    }

    .site-header #mobileNav .mobile-submenu a {
        padding: 10px 12px;
        font-size: 14px;
        color: #E6F7F5;
    }
}

/* NAVIGASI KHUSUS HP */
.mobile-nav {
    display: none;
}

@media screen and (max-width: 820px) {
    .site-header .nav-wrap {
        position: relative;
    }

    .site-header #mainNav {
        display: none !important;
    }

    .site-header #menuToggle {
        display: flex !important;
        position: relative;
        z-index: 1002;
        flex-shrink: 0;
    }

    .site-header #mobileNav:not([hidden]) {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 1001;
        width: min(350px, calc(100vw - 24px));
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        box-sizing: border-box;
        padding: 12px;
        border-radius: 12px;
        background: #bf2496 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .site-header #mobileNav a,
    .site-header #mobileNav summary {
        display: block;
        padding: 12px;
        color: #ffffff !important;
        text-decoration: none;
        cursor: pointer;
    }

    .site-header #mobileNav .mobile-submenu {
        padding-left: 12px;
        background: #a91c82;
    }

    .site-header #mobileNav a:hover,
    .site-header #mobileNav summary:hover {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* =====================================
   MEDIA SOSIAL RS BUKIT LEWOLEBA
===================================== */

.hospital-social {
    margin-top: 28px;
}

.hospital-social h3 {
    margin: 0 0 8px;
    color: #0B3C5D;
    font-size: 20px;
    font-weight: 800;
}

.hospital-social > p {
    margin: 0 0 16px;
    color: #64748B;
    font-size: 14px;
    line-height: 1.7;
}

.hospital-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hospital-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hospital-social-link svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

.hospital-social-link.facebook {
    background: #1877F2;
}

.hospital-social-link.youtube {
    background: #FF0033;
}

.hospital-social-link.instagram {
    background: #C13584;
}

.hospital-social-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.hospital-social-link.disabled {
    cursor: default;
    opacity: 0.8;
    flex-wrap: wrap;
}

.hospital-social-link.disabled small {
    display: block;
    width: 100%;
    padding-left: 29px;
    font-size: 10px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .hospital-social {
        margin-top: 22px;
    }

    .hospital-social-links {
        gap: 9px;
    }

    .hospital-social-link {
        padding: 10px 12px;
    }
}

/* Ikon media sosial di dekat email */
.contact-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.contact-social-links .hospital-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 8px;
    box-sizing: border-box;
}

.contact-social-links svg {
    display: block;
    width: 20px;
    height: 20px;
}

.contact-social-links .disabled {
    opacity: 0.65;
    cursor: default;
}

.contact-social-links .disabled small {
    display: none;
}

/* =========================================
   KONTAK RS BUKIT LEWOLEBA
   Susunan ringkas dua kolom
========================================= */

/* Jarak antara kolom kiri dan kanan */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 36px;
    align-items: start;
}

/* Kolom kanan: dua kontak sejajar */
.contact-list.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 14px;
    align-items: start;
}

/* Setiap informasi kontak */
.contact-details-grid .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

/* Ikon kontak */
.contact-details-grid .contact-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}

/* Teks kontak */
.contact-details-grid .contact-detail-text {
    flex: 1;
    min-width: 0;
}

.contact-details-grid .contact-detail-text small {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.contact-details-grid .contact-detail-text strong {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.contact-details-grid .contact-detail-text a {
    overflow-wrap: anywhere;
}

/* Jarak nomor telepon */
.contact-details-grid .hospital-phone-row {
    margin-bottom: 3px;
}

/* Media sosial tetap di kolom kanan */
.contact-details-grid .contact-social-item {
    grid-column: 1 / -1;
}

.contact-social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.contact-social-links .hospital-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 8px;
    box-sizing: border-box;
}

.contact-social-links svg {
    display: block;
    width: 20px;
    height: 20px;
}

.contact-social-links .disabled {
    opacity: 0.65;
    cursor: default;
}

/* Tablet dan HP */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .contact-list.contact-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
        row-gap: 20px;
    }

    .contact-details-grid .contact-item {
        gap: 8px;
    }

    .contact-details-grid .contact-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .contact-details-grid .contact-detail-text strong {
        font-size: 12px;
    }
}

/* HP dengan layar kecil */
@media (max-width: 420px) {
    .contact-list.contact-details-grid {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }

    .contact-details-grid .contact-social-item {
        grid-column: auto;
    }
}

/* KHUSUS KOMPUTER - BERANDA TANPA KOTAK */
@media (min-width: 821px) {
    .site-header .main-nav > a[href="#beranda"].active {
        background: transparent !important;
        border: none !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: #FFFFFF !important;
        border-radius: 0 !important;
    }

    .site-header .main-nav > a[href="#beranda"]:hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #d9b46c !important;
    }
}

/* PANEL RESPON - KHUSUS KOMPUTER */
@media (min-width: 821px) {

    .site-header {
        z-index: 1000 !important;
    }

    #panelSuaraMasyarakat.panel-respon {
        position: fixed !important;
        top: var(--tinggi-header, 140px) !important;
        right: 0 !important;
        bottom: 0 !important;

        height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;

        overflow-y: auto !important;
        overscroll-behavior: contain;

        z-index: 999 !important;
    }

    #overlayRespon.panel-respon-overlay {
        position: fixed !important;
        inset: var(--tinggi-header, 140px) 0 0 0 !important;
        z-index: 998 !important;
    }
}