.service-info-body {
    margin:0;
    color:#303f39;
    background:#f8faf8;
    font-family:'Montserrat','Segoe UI',sans-serif;
}

.service-info-body .main-navbar {
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 28px rgba(80,93,86,.08);
}

.service-info-page {
    min-height:100vh;
    background:linear-gradient(180deg,#fbfcfa 0%,#fff 48%,#f2f6f3 100%);
}

.service-info-hero {
    padding:54px 0 42px;
    background:
        radial-gradient(circle at 14% 18%,rgba(191,207,197,.32),transparent 28%),
        radial-gradient(circle at 88% 12%,rgba(218,184,109,.2),transparent 25%),
        linear-gradient(135deg,#fff,#eef4f0);
}

.service-info-hero span,
.online-tutorial-heading span {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    color:#6d7f74;
    background:#fff;
    border:1px solid #e6eee8;
    border-radius:12px;
    box-shadow:0 10px 22px rgba(83,101,91,.07);
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.service-info-hero span i {
    color:#c59a45;
}

.service-info-hero h1 {
    max-width:840px;
    margin:14px 0 10px;
    color:#303f39;
    font-size:clamp(1.85rem,3vw,3rem);
    font-weight:800;
    line-height:1.14;
}

.service-info-hero p {
    max-width:760px;
    margin:0;
    color:#68776f;
    font-size:.9rem;
    line-height:1.75;
}

.service-info-list {
    padding:34px 0 70px;
}

.poli-card,
.bed-card,
.tutorial-card,
.online-phone-card,
.service-empty {
    height:100%;
    background:#fff;
    border:1px solid #e6eee8;
    border-radius:18px;
    box-shadow:0 18px 38px rgba(84,101,91,.08);
}

.poli-card {
    overflow:hidden;
    transition:transform .25s ease,box-shadow .25s ease;
}

.poli-card:hover,
.bed-card:hover,
.tutorial-card:hover {
    transform:translateY(-5px);
    box-shadow:0 24px 48px rgba(84,101,91,.12);
}

.poli-card img {
    width:100%;
    height:250px;
    object-fit:cover;
    object-position:top;
    background:#eef3ef;
}

.poli-body {
    padding:17px;
}

.poli-status {
    display:inline-flex;
    padding:6px 9px;
    color:#4f7a62;
    background:#edf7f2;
    border-radius:999px;
    font-size:.62rem;
    font-weight:800;
    text-transform:uppercase;
}

.poli-status.tutup,
.poli-status.cuti-dokter,
.poli-status.libur-nasional {
    color:#9a742d;
    background:#fff6df;
}

.poli-body h2,
.bed-card h2 {
    margin:12px 0 6px;
    color:#303f39;
    font-size:1.05rem;
    font-weight:800;
}

.poli-body strong {
    display:block;
    color:#4b5e55;
    font-size:.86rem;
}

.poli-body p,
.bed-card p {
    margin:4px 0 12px;
    color:#728179;
    font-size:.78rem;
}

.poli-meta {
    display:grid;
    gap:8px;
    margin-top:12px;
}

.poli-meta span {
    display:flex;
    align-items:center;
    gap:8px;
    color:#5b6e65;
    background:#f8faf8;
    border:1px solid #edf2ee;
    border-radius:11px;
    padding:9px;
    font-size:.74rem;
    font-weight:700;
}

.poli-meta i {
    color:#c59a45;
}

.poli-body small {
    display:block;
    margin-top:10px;
    color:#8a9a92;
    font-size:.68rem;
}

.bed-summary {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.bed-summary div {
    min-width:145px;
    padding:14px;
    background:#fff;
    border:1px solid #e6eee8;
    border-radius:14px;
    box-shadow:0 12px 24px rgba(83,101,91,.07);
}

.bed-summary small,
.bed-numbers small {
    display:block;
    color:#78877f;
    font-size:.64rem;
    font-weight:800;
    text-transform:uppercase;
}

.bed-summary strong {
    display:block;
    color:#303f39;
    font-size:1.45rem;
    font-weight:800;
}

.bed-card {
    padding:18px;
    transition:transform .25s ease,box-shadow .25s ease;
}

.bed-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.bed-head span,
.bed-head b {
    padding:7px 10px;
    border-radius:999px;
    font-size:.65rem;
    font-weight:800;
}

.bed-head span {
    color:#6d7f74;
    background:#f2f6f3;
}

.bed-head b {
    color:#9a742d;
    background:#fff6df;
}

.bed-numbers {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:14px 0;
}

.bed-numbers div {
    padding:10px;
    background:#f8faf8;
    border:1px solid #edf2ee;
    border-radius:12px;
}

.bed-numbers strong {
    display:block;
    margin-top:3px;
    color:#303f39;
    font-weight:800;
}

.bed-progress {
    height:9px;
    overflow:hidden;
    background:#edf2ee;
    border-radius:999px;
}

.bed-progress span {
    display:block;
    height:100%;
    background:linear-gradient(135deg,#8fa196,#c8d5cc);
    border-radius:inherit;
}

.bed-note {
    display:block;
    margin-top:10px;
    color:#728179;
    font-size:.7rem;
}

.online-actions {
    margin-top:20px;
}

.online-actions a {
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:46px;
    padding:11px 16px;
    color:#fff;
    background:linear-gradient(135deg,#8fa196,#b9c8be);
    border-radius:999px;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 16px 30px rgba(143,161,150,.2);
}

.online-phone-card {
    display:grid;
    place-items:center;
    max-width:360px;
    margin-left:auto;
    padding:30px;
    text-align:center;
}

.online-phone-card > i {
    display:grid;
    width:86px;
    height:86px;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,#c59a45,#d8b66d);
    border-radius:24px;
    font-size:2.6rem;
    box-shadow:0 18px 34px rgba(197,154,69,.2);
}

.online-phone-card strong {
    margin-top:16px;
    color:#303f39;
    font-size:1.15rem;
    font-weight:800;
}

.online-phone-card small {
    margin-top:8px;
    color:#68776f;
    line-height:1.6;
}

.online-tutorial-heading {
    margin-bottom:18px;
}

.online-tutorial-heading h2 {
    margin:12px 0 0;
    color:#303f39;
    font-size:1.5rem;
    font-weight:800;
}

.tutorial-card {
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 46px;
    gap:14px;
    align-items:center;
    padding:20px;
    color:inherit;
    text-decoration:none;
    transition:transform .25s ease,box-shadow .25s ease;
}

.tutorial-card > i,
.tutorial-card > span {
    display:grid;
    place-items:center;
    border-radius:15px;
}

.tutorial-card > i {
    width:58px;
    height:58px;
    color:#fff;
    background:#8fa196;
    font-size:1.45rem;
}

.tutorial-card > span {
    width:46px;
    height:46px;
    color:#fff;
    background:#c59a45;
}

.tutorial-card small {
    color:#c59a45;
    font-size:.64rem;
    font-weight:800;
    text-transform:uppercase;
}

.tutorial-card h3 {
    margin:4px 0;
    color:#303f39;
    font-size:1rem;
    font-weight:800;
}

.tutorial-card p {
    margin:0;
    color:#728179;
    font-size:.78rem;
    line-height:1.55;
}

.service-empty {
    padding:30px;
    color:#728179;
    text-align:center;
}

@media (max-width:991.98px) {
    .online-phone-card {
        margin:0 auto;
    }
}

@media (max-width:575.98px) {
    .service-info-hero {
        padding:38px 0 32px;
    }

    .poli-card img {
        height:230px;
    }

    .bed-numbers {
        grid-template-columns:1fr;
    }

    .tutorial-card {
        grid-template-columns:48px minmax(0,1fr);
    }

    .tutorial-card > span {
        grid-column:1 / -1;
        width:100%;
    }
}