.rn-body,
body {
    --rn-dark: #143023;
    --rn-primary: #1E4635;
    --rn-accent: #357256;
    --rn-soft: #EBF2EE;
    --rn-warm: #FBF9F5;
    --rn-amber: #D97706;
    --rn-red: #DC2626;
    --rn-ink: #1e293b;
    --rn-ink-soft: #64748b;
    --rn-ink-faint: #94a3b8;
    --rn-line: #e2e8f0;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    background-color: var(--rn-warm);
    position: relative;
}

/* ── Hapus underline default dari semua link di area rn- ─────── */
.rn-body a,
body a {
    text-decoration: none;
}

.rn-body::before,
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .18;
    background-image: url('../images/ten1.png'), url('../images/ten1.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    background-size: 650px auto, 650px auto;
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 30%, transparent 70%, black 100%);
    mask-image: linear-gradient(to right, black 0%, transparent 30%, transparent 70%, black 100%);
}

@media (max-width: 768px) {
    .rn-body::before,
    body::before {
        background-size: 200px auto, 200px auto;
        background-repeat: repeat-y, repeat-y;
        opacity: .22;
        -webkit-mask-image: linear-gradient(to right, black 0%, transparent 45%, transparent 55%, black 100%);
        mask-image: linear-gradient(to right, black 0%, transparent 45%, transparent 55%, black 100%);
    }
}

.rn-serif {
    font-family: 'Instrument Serif', serif;
}

/* ── Topbar ───────────────────────────────────────────────────── */
.rn-topbar {
    background: var(--rn-dark);
    color: #cbd5e1;
    font-size: 12.5px;
    padding: 10px 0;
}

.rn-topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rn-topbar-contact {
    display: flex;
    align-items: center;
    gap: 24px;
}

.rn-topbar-contact a {
    color: #cbd5e1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
}

.rn-topbar-contact a i {
    color: #6ee7b7;
}

.rn-topbar-contact a:hover {
    color: #fff;
}

.rn-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rn-igd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(220, 38, 38, .9);
    color: #fff;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: .3px;
    animation: rn-pulse 2s infinite;
}

@keyframes rn-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

.rn-topbar-social {
    display: flex;
    gap: 12px;
}

.rn-topbar-social a {
    color: #94a3b8;
    transition: color .2s;
}

.rn-topbar-social a:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .rn-topbar-contact {
        gap: 14px;
        font-size: 11px;
    }

    .rn-topbar-contact a span {
        display: none;
    }
}

/* ── Navbar ───────────────────────────────────────────────────── */
.rn-navbar {
    background: #fff !important;
    padding: 14px 0;
    box-shadow: 0 1px 0 var(--rn-line);
}

.rn-navbar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 4px 16px rgba(20, 48, 35, .1);
}

.rn-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.rn-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--rn-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(30, 70, 53, .3);
}

.rn-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.rn-brand-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--rn-dark);
    letter-spacing: -.2px;
}

.rn-brand-sub {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--rn-ink-faint);
}

#mainNav .navbar-nav .nav-link {
    color: #334155;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    margin: 0 2px;
    border-radius: 6px;
    transition: all .2s ease;
}

#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active {
    color: var(--rn-primary);
    background-color: var(--rn-soft);
}
/* ── Dropdown Sub-menu ───────────────────────────────────────── */
.dropdown-submenu-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    border-radius: 10px;
    padding: 10px;
    min-width: 200px;
    border-top: 3px solid #10b981;
    z-index: 1050;
    max-height: 80vh;
    overflow-y: auto;
}

.dropdown-submenu-menu.flip-up {
    top: auto;
    bottom: 0;
}
/* Desktop: hover ATAU class .show */
@media (min-width:992px) {
    .dropdown-submenu:hover>.dropdown-submenu-menu,
    .dropdown-submenu-menu.show {
        display: block;
    }
}

/* Mobile: hanya class .show */
@media (max-width:991px) {
    .dropdown-submenu-menu {
        position: static;
        left: 0;
        box-shadow: none;
        border: none;
        border-top: none;
        background: #f0fdf4;
        margin-left: 16px;
        border-radius: 8px;
        padding: 6px;
    }

    .dropdown-submenu-menu.show {
        display: block;
    }
}

.dropdown-submenu>.dropdown-toggle::after {
    margin-left: auto;
    float: right;
    margin-top: 6px;
}


#mainNav .dropdown-menu {
    border: none;
    box-shadow: 0 12px 28px rgba(20, 48, 35, .12);
    border-radius: 10px;
    padding: 8px;
    margin-top: 8px;
    border-top: 3px solid var(--rn-primary);
}

#mainNav .dropdown-item {
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 13.5px;
    color: #334155;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all .15s ease;
}

#mainNav .dropdown-item i {
    width: 14px;
    text-align: center;
    color: var(--rn-primary);
    font-size: 12px;
}

#mainNav .dropdown-item:hover {
    background-color: var(--rn-soft);
    color: var(--rn-primary);
}

#mainNav .dropdown-item.active {
    background: var(--rn-primary);
    color: #fff;
}

#mainNav .dropdown-item.active i {
    color: #fff;
}

.dropdown-submenu-menu {
    border-top: 3px solid var(--rn-accent) !important;
}

.rn-navbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rn-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    margin-left: 20px;
    transition: background .2s;
    flex-shrink: 0;
}

.rn-navbar-cta:hover {
    background: var(--rn-dark);
    color: #fff;
}

@media (max-width: 991px) {
    .rn-navbar-cta {
        margin: 16px 0 0;
        justify-content: center;
    }

    .rn-brand-name {
        font-size: 14px;
    }
}

/* ── FAB (Floating Action Button) ────────────────────────────── */
.fab-wrap {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.fab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
    pointer-events: none;
}

.fab-item.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fab-label {
    background: #fff;
    color: var(--rn-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(20, 48, 35, .15);
    white-space: nowrap;
}

.fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(20, 48, 35, .2);
    transition: transform .2s;
}

.fab-btn:hover {
    transform: scale(1.08);
    color: #fff;
}

.fab-btn-primary {
    background: var(--rn-primary);
}

.fab-btn-wa {
    background: #25d366;
}

.fab-main {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--rn-primary);
    border: none;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 6px 20px rgba(30, 70, 53, .4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}

.fab-main:hover {
    transform: scale(1.05);
}

.fab-main.is-open {
    background: var(--rn-red);
}

@media (max-width: 768px) {
    .fab-wrap {
        bottom: 20px;
        right: 20px;
    }

    .fab-main {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .fab-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/* ── Footer ───────────────────────────────────────────────────── */
.rn-footer {
    background: var(--rn-dark);
    color: #cbd5e1;
    padding: 64px 0 24px;
}

.rn-footer-cols {
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(110, 231, 183, .12);
}

.rn-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.rn-footer-brand-icon img {
    height: 36px;
}

.rn-footer-brand-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.2px;
}

.rn-footer-desc {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.75;
    margin-bottom: 18px;
}

.rn-footer-contact-mini p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.rn-footer-contact-mini i {
    color: #6ee7b7;
    margin-top: 2px;
}

.rn-footer-heading {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .8px;
    border-bottom: 1px solid rgba(110, 231, 183, .2);
    padding-bottom: 10px;
    margin-bottom: 16px;
}

.rn-footer-hours {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rn-footer-hours li {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(110, 231, 183, .08);
    font-size: 12px;
}

.rn-footer-hours li span {
    color: #94a3b8;
}

.rn-footer-hours .rn-hl {
    color: #6ee7b7;
}

.rn-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rn-footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
}

.rn-footer-links a i {
    font-size: 10px;
    color: #6ee7b7;
}

.rn-footer-links a:hover {
    color: #6ee7b7;
}

.rn-footer-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rn-footer-social a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
}

.rn-footer-social a i {
    width: 16px;
}

.rn-footer-social a:hover {
    color: #6ee7b7;
}

.rn-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    font-size: 11px;
    color: #64748b;
}

.rn-footer-bottom i {
    color: #dc2626;
}

@media (max-width: 576px) {
    .rn-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ── Shared helpers (homepage) ───────────────────────────────── */
.rn-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--rn-primary);
    background: var(--rn-soft);
    padding: 5px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
}

.rn-title {
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--rn-ink);
    line-height: 1.25;
    margin-bottom: 0;
}

.rn-body-text {
    color: #475569;
    font-size: 15px;
    line-height: 1.85;
    margin: 18px 0;
}

.rn-section {
    padding: 88px 0 64px;
}

.rn-section-head {
    max-width: 640px;
    margin: 0 auto 44px;
}

.rn-section-sub {
    font-size: 13px;
    color: var(--rn-ink-faint);
    margin-top: 8px;
}

.rn-section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 44px;
}

.rn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rn-primary);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    transition: gap .2s, color .2s;
}

.rn-link i {
    font-size: 11px;
    transition: transform .2s;
}

.rn-link:hover {
    color: var(--rn-dark);
}

.rn-link:hover i {
    transform: translateX(3px);
}

/* ── HERO ─────────────────────────────────────────────────────── */
.rn-hero {
    position: relative;
    background: #fff;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 0;
}

@media (max-width: 480px) {
    .rn-hero {
        min-height: 480px;
    }
}
.rn-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.rn-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.rn-hero-slide.active {
    opacity: 1;
}

@media (max-width: 768px) {   

    .rn-hero-widget-wrap {
        margin-top: 24px;
    }

    .rn-hero-widget {
        padding: 12px;
        gap: 10px;
    }

    .rn-widget-card {
        padding: 10px;
        gap: 10px;
    }

    .rn-widget-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
        border-radius: 8px;
    }

    .rn-widget-label {
        font-size: 9px;
    }

    .rn-widget-text h3 {
        font-size: 12.5px;
        margin-bottom: 2px;
    }

    .rn-widget-text p {
        font-size: 10.5px;
    }
}

.rn-hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20, 48, 35, .95) 0%, rgba(20, 48, 35, .82) 45%, rgba(20, 48, 35, .35) 100%);
}

.rn-hero-inner {
    position: relative;
    z-index: 2;
    padding: 56px 0 100px;
}

.rn-hero-content {
    max-width: 640px;
    color: #fff;
}

.rn-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(6, 78, 59, .8);
    border: 1px solid rgba(110, 231, 183, .3);
    color: #6ee7b7;
    font-size: 12px;
    padding: 7px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.rn-hero-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ee7b7;
    animation: rn-ping 1.6s infinite;
}

@keyframes rn-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(110, 231, 183, .6);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(110, 231, 183, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(110, 231, 183, 0);
    }
}

.rn-hero-title {
    font-size: 5rem;
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #f1f5f9;
}

.rn-hero-sub {
    font-size: 16px;
    color: #cbd5e1;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .rn-hero-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 576px) {
    .rn-hero-title {
        font-size: 2rem;
    }
}

/* ── Hero floating widget ─────────────────────────────────────── */
.rn-hero-widget-wrap {
    position: relative;
    z-index: 3;
    margin-top: -10px;
}

.rn-hero-widget {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 20px 50px rgba(20, 48, 35, .25);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rn-widget-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #f8faf9;
    border: 1px solid #eef2f0;
    text-decoration: none;
    transition: all .2s;
}

.rn-widget-card:hover {
    background: var(--rn-soft);
    border-color: rgba(30, 70, 53, .2);
    transform: translateY(-2px);
}

.rn-widget-card-red {
    background: #fef2f2;
    border-color: #fee2e2;
}

.rn-widget-card-red:hover {
    background: #fee2e2;
    border-color: #fecaca;
}

.rn-widget-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    transition: all .2s;
}

.rn-widget-icon-green {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rn-widget-card:hover .rn-widget-icon-green {
    background: var(--rn-primary);
    color: #fff;
}

.rn-widget-icon-red {
    background: var(--rn-red);
    color: #fff;
    box-shadow: 0 3px 10px rgba(220, 38, 38, .3);
}

.rn-widget-text h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 4px;
}

.rn-widget-text p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

.rn-widget-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}

.rn-widget-label-green {
    color: var(--rn-accent);
}

.rn-widget-label-red {
    color: var(--rn-red);
}

@media (max-width: 992px) {
    .rn-hero-widget {
        grid-template-columns: 1fr;
    }

    .rn-hero-widget-wrap {
        margin-top: -20px;
    }
}

/* ── ABOUT ────────────────────────────────────────────────────── */
.rn-about {
    padding-top: 120px;
    background: transparent;
    position: relative;
    z-index: 1;
}

@media (max-width: 992px) {
    .rn-about {
        padding-top: 88px;
    }
}

.rn-about-photo-wrap {
    position: relative;
}

.rn-about-photo {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(20, 48, 35, .18);
    border: 4px solid #fff;
}

.rn-about-photo img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.rn-about-photo-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, .95);
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

.rn-about-photo-badge h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 3px;
    line-height: 1.3;
}

.rn-about-photo-badge p {
    font-size: 11.5px;
    color: var(--rn-primary);
    font-weight: 600;
    margin: 0;
}



.rn-quote {
    margin: 0 0 22px;
    padding: 16px 18px;
    background: rgba(53, 114, 86, .06);
    border-left: 3px solid var(--rn-primary);
    border-radius: 8px;
    font-style: italic;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.7;
}

.rn-stats-row {
    display: flex;
    gap: 32px;
    padding-top: 24px;
    margin-bottom: 24px;
    border-top: 1px solid #e2e8f0;
}

.rn-stat-item {
    display: flex;
    flex-direction: column;
}

.rn-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--rn-primary);
    line-height: 1;
    margin-bottom: 6px;
}

.rn-stat-label {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 500;
}

@media (max-width: 576px) {
    .rn-stats-row {
        gap: 20px;
        flex-wrap: wrap;
    }
}

/* ── DASHBOARD ────────────────────────────────────────────────── */
.rn-dashboard {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #e5eae7;
    border-bottom: 1px solid #e5eae7;
}

.rn-panel {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e5eae7;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .05);
    height: 100%;
}

.rn-panel-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rn-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f3f2;
}

.rn-panel-head h3 {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-panel-head h3 i {
    color: var(--rn-primary);
}

.rn-panel-head p {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0;
}

.rn-panel-head-simple {
    justify-content: space-between;
}

.rn-live-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--rn-accent);
    background: var(--rn-soft);
    padding: 3px 10px;
    border-radius: 6px;
}

.rn-search-box {
    position: relative;
}

.rn-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #94a3b8;
}

.rn-search-box input {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12.5px;
    padding: 9px 12px 9px 30px;
    width: 200px;
    outline: none;
    transition: border-color .2s;
}

.rn-search-box input:focus {
    border-color: var(--rn-primary);
}

.rn-table-wrap {
    overflow-x: auto;
}

.rn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rn-table thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94a3b8;
    padding: 10px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #eef1f0;
}

.rn-table tbody tr {
    border-bottom: 1px solid #f1f3f2;
    transition: background .15s;
}

.rn-table tbody tr:hover {
    background: #fafcfb;
}

.rn-table td {
    padding: 12px;
    vertical-align: middle;
    color: #475569;
}

.rn-td-name {
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-td-hari {
    font-size: 11.5px;
    color: #64748b;
}

.rn-bed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    .rn-bed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rn-bed-card {
    background: #fff;
    border: 1px solid #dde3df;
    border-radius: 8px;
    padding: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.rn-bed-card:hover {
    border-color: var(--rn-primary);
    box-shadow: 0 2px 8px rgba(20, 48, 35, .06);
}

.rn-bed-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 4px;
}

.rn-bed-kelas {
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-ink);
    letter-spacing: -.1px;
}

.rn-status-pill {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 7px;
    border-radius: 4px;
}

.rn-status-pill.rn-dot-green {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rn-status-pill.rn-dot-amber {
    background: #fef3e2;
    color: #92400e;
}

.rn-status-pill.rn-dot-red {
    background: #fbe9e7;
    color: #7f1d1d;
}

.rn-bed-stat-row {
    display: flex;
    align-items: stretch;
    border-top: 1px solid #eef1ef;
    border-bottom: 1px solid #eef1ef;
    padding: 10px 0;
}

.rn-bed-stat {
    flex: 1;
    text-align: center;
}

.rn-bed-stat-divider {
    width: 1px;
    background: #eef1ef;
    margin: 0 8px;
}

.rn-bed-stat-num {
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.rn-num-empty {
    color: var(--rn-primary);
}

.rn-num-full {
    color: #78350f;
}

.rn-bed-stat-label {
    display: block;
    font-size: 8px;
    color: #8a95a1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.rn-bed-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 10px;
    color: #64748b;
}

.rn-bed-total-row strong {
    color: var(--rn-ink);
    font-weight: 800;
    font-size: 12px;
}

.rn-panel-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1f3f2;
    text-align: center;
}

.rn-panel-footer a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rn-primary);
    text-decoration: none;
}

.rn-panel-footer a:hover {
    text-decoration: underline;
}

/* ── NEWS ─────────────────────────────────────────────────────── */
.rn-news-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef1f0;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .25s, transform .25s;
}

.rn-news-card:hover {
    box-shadow: 0 12px 28px rgba(20, 48, 35, .13);
    transform: translateY(-3px);
}

.rn-news-featured {
    margin-bottom: 20px;
    height: auto;
}

.rn-news-featured .rn-news-img {
    height: auto;
    aspect-ratio: 16 / 9;
    background: #f1f5f9;
}

.rn-news-featured .rn-news-img img {
    object-fit: contain;
}

.rn-home-list-wrap {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef1f0;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
    padding: 18px;
}
.rn-news-img {
    position: relative;
    height: 190px;
    background: var(--rn-soft);
    overflow: hidden;
}

.rn-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.rn-news-card:hover .rn-news-img img {
    transform: scale(1.06);
}

.rn-news-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(6, 78, 59, .9);
    color: #6ee7b7;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 6px;
}

.rn-news-body {
    padding: 20px;
    flex: 1;
}

.rn-news-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.rn-news-body h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rn-ink);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rn-news-footer {
    padding: 0 20px 18px;
}

.rn-news-footer span {
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-primary);
}

/* ── DOCTORS carousel ─────────────────────────────────────────── */
.rn-carousel-nav {
    display: flex;
    gap: 8px;
}

.rn-carousel-nav button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}

.rn-carousel-nav button:hover {
    background: var(--rn-primary);
    border-color: var(--rn-primary);
    color: #fff;
}

.rn-doc-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 12px;
}

.rn-doc-carousel::-webkit-scrollbar {
    display: none;
}

.rn-doc-card {
    min-width: 230px;
    max-width: 230px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef1f0;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
    padding: 18px;
    text-align: center;
    transition: box-shadow .2s, transform .2s;
}

.rn-doc-card:hover {
    box-shadow: 0 12px 26px rgba(20, 48, 35, .13);
    transform: translateY(-3px);
}

.rn-doc-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 14px;
    background: var(--rn-soft);
}

.rn-doc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.rn-doc-sps {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--rn-primary);
    background: var(--rn-soft);
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.rn-doc-card h3 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 6px;
    line-height: 1.35;
}

.rn-doc-sip {
    font-size: 10.5px;
    color: #94a3b8;
    margin: 0 0 14px;
}

.rn-doc-btn {
    display: block;
    width: 100%;
    padding: 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    transition: all .2s;
}

.rn-doc-btn:hover {
    background: var(--rn-primary);
    border-color: var(--rn-primary);
    color: #fff;
}

/* ================================================================
   RSUPP BETUN — DOKTER KAMI v2 (tab filter, no search)
   Tambahkan blok ini di akhir rn-theme.css, MENGGANTIKAN blok
   .rn-dok-search-card / .rn-dok-select / .rn-dok-reset-btn kalau
   sudah ada dari versi sebelumnya (boleh dibiarkan menumpuk, tidak
   akan konflik karena beda class, tapi lebih rapi kalau dihapus).
   ================================================================ */

.rn-dok-hero {
    background: var(--rn-dark);
    padding: 56px 0 40px;
    position: relative;
    overflow: hidden;
}

.rn-dok-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(20, 48, 35, .55) 0%, rgba(20, 48, 35, .75) 60%, rgba(20, 48, 35, .9) 100%);
    z-index: 1;
}
.rn-dok-hero-inner {
    position: relative;
    z-index: 2;
}

.rn-dok-hero-tag {
    display: block;
    width: fit-content;
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6ee7b7;
    background: rgba(6, 78, 59, .8);
    border: 1px solid rgba(110, 231, 183, .3);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.rn-dok-hero-title {
    font-size: 2.6rem;
    font-weight: 400;
    color: #f1f5f9;
    line-height: 1.2;
    margin-bottom: 14px;
    max-width: 720px;
    margin-left: auto;
    text-align: right;
}

.rn-dok-hero-sub {
    font-size: 14.5px;
    color: #cbd5e1;
    line-height: 1.7;
    max-width: 640px;
    margin-bottom: 0;
    margin-left: auto;
    text-align: right;
}

@media (max-width: 768px) {
    .rn-dok-hero-title {
        font-size: 2rem;
        text-align: left;
        margin-left: 0;
    }

    .rn-dok-hero-sub {
        text-align: left;
        margin-left: 0;
    }

    .rn-dok-hero-tag {
        margin-left: 0;
    }
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.rn-dok-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: wrap;
}

.rn-dok-tabs-boxed {
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .06);
    margin-bottom: 24px;
}

.rn-dok-tab {
    background: var(--rn-soft);
    border: none;
    color: var(--rn-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.rn-dok-tab span {
    color: inherit;
    font-weight: 500;
    opacity: .75;
}

.rn-dok-tab:hover {
    background: #dfe9e3;
}

.rn-dok-tab.active {
    background: var(--rn-primary);
    color: #fff;
}

.rn-dok-tab.active span {
    color: #fff;
    opacity: .85;
}
/* ── Body / grid ──────────────────────────────────────────────── */
.rn-dok-body {
    background: transparent;
    padding: 44px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-dok-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef1f0;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
    overflow: visible;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s, transform .25s;
    padding: 14px 14px 0;
}

.rn-dok-card:hover {
    box-shadow: 0 12px 26px rgba(20, 48, 35, .13);
    transform: translateY(-3px);
}

.rn-dok-photo-wrap {
    aspect-ratio: 1 / 1.22;
    height: auto;
    background: #fff;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.rn-dok-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .4s;
}

.rn-dok-card:hover .rn-dok-photo-wrap img {
    transform: scale(1.05);
}

.rn-dok-info {
    padding: 16px 6px 20px;
    flex: 1;
}

.rn-dok-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--rn-primary);
    background: var(--rn-soft);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.rn-dok-badge-umum {
    color: #64748b;
    background: #f1f5f9;
}

.rn-dok-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--rn-ink);
    margin: 0 0 8px;
    line-height: 1.35;
}

.rn-dok-sip {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rn-dok-footer {
    padding: 0 20px 18px;
}

.rn-dok-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rn-primary);
    text-decoration: none;
    transition: gap .2s;
}

.rn-dok-link i {
    font-size: 10px;
    transition: transform .2s;
}

.rn-dok-link:hover {
    gap: 10px;
    color: var(--rn-dark);
}

.rn-dok-empty {
    text-align: center;
    padding: 64px 20px;
    color: #94a3b8;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef1f0;
}

.rn-dok-empty i {
    font-size: 40px;
    display: block;
    margin-bottom: 16px;
    color: #cbd5e1;
}

.rn-dok-empty h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 8px;
}

.rn-dok-empty p {
    font-size: 12.5px;
    max-width: 380px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ================================================================
   RSUPP BETUN — JADWAL DOKTER v2 (listjadwaldokter.php)
   Hero pakai class .rn-dok-hero yang sudah ada (shared dengan
   halaman Dokter Kami) — tidak perlu duplikat CSS hero.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-jdw-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.rn-jdw-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #e2e8f0;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
}

.rn-jdw-stat-pill i {
    color: #6ee7b7;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.rn-jdw-filter {
    background: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .06);
    position: sticky;
    top: 0;
    z-index: 100;
}

.rn-jdw-filter-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--rn-ink);
    margin-bottom: 6px;
}

.rn-jdw-select {
    width: 100%;
    border: 1.5px solid var(--rn-line);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
    color: var(--rn-ink);
    background: #fff;
    outline: none;
    transition: border-color .2s;
}

.rn-jdw-select:focus {
    border-color: var(--rn-primary);
}

.rn-jdw-filter-btn {
    width: 100%;
    background: var(--rn-primary);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rn-jdw-filter-btn:hover {
    background: var(--rn-dark);
}

.rn-jdw-reset-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #94a3b8;
    text-decoration: none;
    padding: 12px 0;
    transition: color .2s;
}

.rn-jdw-reset-link:hover {
    color: var(--rn-red);
}

/* ── Content body ─────────────────────────────────────────────── */
.rn-jdw-body {
    background: transparent;
    padding: 40px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-jdw-poli-section {
    margin-bottom: 40px;
}

.rn-jdw-poli-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(90deg, var(--rn-primary) 0%, rgba(30, 70, 53, .75) 60%, rgba(30, 70, 53, .35) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(20, 48, 35, .1);
}
.rn-jdw-poli-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

.rn-jdw-poli-title-wrap {
    flex: 1;
    min-width: 0;
}

.rn-jdw-poli-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rn-jdw-poli-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .75);
    margin-top: 2px;
}

.rn-jdw-poli-count {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* ── Doctor card (vertical stack style) ───────────────────────── */
.rn-jdw-dok-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .06);
    border: 1px solid #eef1f0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow .2s;
}

.rn-jdw-dok-card:hover {
    box-shadow: 0 10px 26px rgba(20, 48, 35, .13);
}

.rn-jdw-dok-top {
    display: flex;
    gap: 14px;
    padding: 20px;
}

.rn-jdw-dok-photo {
    width: 72px;
    height: 88px;
    object-fit: cover;
    object-position: top center;
    border-radius: 10px;
    border: 1px solid var(--rn-line);
    flex-shrink: 0;
}

.rn-jdw-dok-sps {
    display: inline-block;
    background: var(--rn-soft);
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
}

.rn-jdw-dok-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rn-ink);
    line-height: 1.35;
    margin: 0 0 6px;
}

.rn-jdw-dok-poli {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

.rn-jdw-dok-poli i {
    color: #94a3b8;
    margin-right: 4px;
}

.rn-jdw-dok-schedules {
    background: var(--rn-warm);
    border-top: 1px solid var(--rn-line);
    padding: 16px 20px;
}

.rn-jdw-sched-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.rn-jdw-sched-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--rn-ink-soft);
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(30, 70, 53, .08);
}

.rn-jdw-sched-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.rn-jdw-sched-jam {
    color: var(--rn-primary);
    font-weight: 700;
}

/* ================================================================
   RSUPP BETUN — FASILITAS KAMAR v2 (listkamar.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   GANTIKAN seluruh blok CSS listkamar.php versi lama dengan ini.
   ================================================================ */

.rn-kmr-body {
    background: transparent;
    padding: 40px 0 72px;
    position: relative;
    z-index: 1;
}

/* ── Stat cards ringkasan ─────────────────────────────────────── */
.rn-kmr-stats-row {
    margin-bottom: 24px;
}

.rn-kmr-stat-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(20, 48, 35, .05);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rn-kmr-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.rn-kmr-stat-label-green {
    color: var(--rn-accent);
}

.rn-kmr-stat-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--rn-ink);
    margin-top: 4px;
}

.rn-kmr-stat-amber {
    color: var(--rn-amber);
}

.rn-kmr-stat-green {
    color: var(--rn-primary);
}

.rn-kmr-stat-note {
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 3px;
}

.rn-kmr-stat-note-green {
    color: var(--rn-accent);
}

/* ── Filter bar: tab + search ─────────────────────────────────── */
.rn-kmr-filter-bar {
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .06);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.rn-kmr-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rn-ink);
    flex-shrink: 0;
}

.rn-kmr-filter-label i {
    color: var(--rn-primary);
}

.rn-kmr-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.rn-kmr-tab {
    background: var(--rn-soft);
    border: none;
    color: var(--rn-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.rn-kmr-tab:hover {
    background: #dfe9e3;
}

.rn-kmr-tab.active {
    background: var(--rn-primary);
    color: #fff;
}

.rn-kmr-search-wrap {
    position: relative;
    min-width: 220px;
}

.rn-kmr-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
}

.rn-kmr-search-wrap input {
    width: 100%;
    background: var(--rn-warm);
    border: 1px solid var(--rn-line);
    border-radius: 20px;
    padding: 9px 14px 9px 36px;
    font-size: 12.5px;
    outline: none;
    transition: border-color .2s;
}

.rn-kmr-search-wrap input:focus {
    border-color: var(--rn-primary);
}

/* ── Card kelas kamar (langsung tampil tabel, tanpa accordion) ── */
.rn-kmr-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(20, 48, 35, .08);
    border: 1px solid var(--rn-line);
    margin-bottom: 24px;
}

.rn-kmr-card-head {
    background: var(--rn-primary);
    padding: 18px 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rn-kmr-card-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.rn-kmr-card-head-text {
    flex: 1;
    min-width: 0;
}

.rn-kmr-card-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.rn-kmr-card-sub {
    font-size: 11px;
    opacity: .8;
    margin-top: 2px;
}

.rn-kmr-status-badge {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.rn-kmr-no-bangsal {
    padding: 24px 20px;
    text-align: center;
    font-size: 12.5px;
    color: #94a3b8;
}

/* ── Table detail ruangan (tampil langsung) ───────────────────── */
.rn-kmr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rn-kmr-table thead th {
    background: var(--rn-soft);
    padding: 12px 20px;
    text-align: left;
    color: var(--rn-primary);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--rn-line);
}

.rn-kmr-table tbody tr {
    border-bottom: 1px solid var(--rn-line);
    transition: background .15s;
}

.rn-kmr-table tbody tr:last-child {
    border-bottom: none;
}

.rn-kmr-table tbody tr:hover {
    background: var(--rn-warm);
}

.rn-kmr-table td {
    padding: 14px 20px;
    color: var(--rn-ink-soft);
    vertical-align: middle;
}

.rn-kmr-nama-cell {
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-kmr-nama-cell-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    margin-top: 2px;
}

.rn-kmr-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
}

.rn-kmr-pill-green {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rn-kmr-tarif-cell {
    font-weight: 800;
    color: var(--rn-ink);
}

.rn-kmr-tarif-empty {
    color: #adb5bd;
    font-style: italic;
    font-weight: 400;
}

/* ================================================================
   RSUPP BETUN — FASILITAS PELAYANAN FINAL (pelayanan.php)
   5 section: poliklinik, rawat inap, IGD, penunjang medis/non-medis.
   Hero pakai .rn-dok-hero yang sudah ada.
   GANTIKAN semua CSS pelayanan.php versi sebelumnya dengan ini.
   Tambahkan di akhir rn-theme.css.
   ================================================================ */

/* ── Quick jump nav ───────────────────────────────────────────── */
.rn-pel-quicknav {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rn-line);
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 12px 0;
}

.rn-pel-quicknav-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.rn-pel-quicknav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: #f1f5f2;
    color: var(--rn-ink-soft);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}

.rn-pel-quicknav-item:hover,
.rn-pel-quicknav-item.active {
    background: var(--rn-primary);
    color: #fff;
}

/* ── Main content ─────────────────────────────────────────────── */
.rn-pel-main {
    background: transparent;
    padding: 48px 0 24px;
    position: relative;
    z-index: 1;
}

.rn-pel-section {
    margin-bottom: 64px;
    scroll-margin-top: 120px;
}

.rn-pel-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rn-line);
}

.rn-pel-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--rn-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.rn-pel-section-icon-red {
    background: var(--rn-red);
}

.rn-pel-section-icon-dark {
    background: var(--rn-ink);
}

.rn-pel-section-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0;
}

.rn-pel-section-sub {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 2px 0 0;
}

/* ── Mini card (poliklinik grid) ──────────────────────────────── */
.rn-pel-mini-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 12px;
    padding: 16px;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.rn-pel-mini-card:hover {
    border-color: var(--rn-primary);
    box-shadow: 0 6px 16px rgba(20, 48, 35, .08);
}

.rn-pel-mini-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--rn-soft);
    color: var(--rn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 10px;
}

.rn-pel-mini-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 4px;
    line-height: 1.35;
}

.rn-pel-mini-desc {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

/* ── Box (rawat inap: bangsal, bedah, intensif) ───────────────── */
.rn-pel-box {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
}

.rn-pel-box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rn-line);
}

.rn-pel-box-tag {
    font-size: 10.5px;
    font-weight: 500;
    color: #94a3b8;
}

.rn-pel-box-tag-red {
    color: var(--rn-red);
    font-weight: 700;
}

.rn-pel-box-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rn-pel-box-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--rn-warm);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11.5px;
    color: var(--rn-ink-soft);
    margin-bottom: 8px;
}

.rn-pel-box-list li:last-child {
    margin-bottom: 0;
}

.rn-pel-box-list li span:first-child {
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-pel-box-ket {
    color: #94a3b8;
    font-size: 11px;
}

.rn-pel-box-list-stacked li {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
}

.rn-pel-box-item-title {
    font-weight: 700;
    color: var(--rn-ink);
    font-size: 12px;
    margin-bottom: 3px;
}

.rn-pel-box-item-desc {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 400 !important;
}

.rn-pel-box-text {
    font-size: 12px;
    color: var(--rn-ink-soft);
    line-height: 1.7;
    margin-bottom: 14px;
}

.rn-pel-box-highlight {
    background: var(--rn-soft);
    border: 1px solid rgba(30, 70, 53, .15);
    border-radius: 12px;
    padding: 12px 14px;
}

.rn-pel-box-highlight > span {
    font-weight: 700;
    color: var(--rn-primary);
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
}

.rn-pel-box-highlight ul {
    margin: 0;
    padding-left: 18px;
    font-size: 11.5px;
    color: var(--rn-ink-soft);
}

.rn-pel-box-highlight li {
    margin-bottom: 4px;
}

/* ── IGD card ──────────────────────────────────────────────────── */
.rn-pel-igd-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
}

.rn-pel-igd-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--rn-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 0 0 0 10px;
}

.rn-pel-igd-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fee2e2;
    color: var(--rn-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.rn-pel-igd-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 8px;
}

.rn-pel-igd-desc {
    font-size: 12px;
    color: var(--rn-ink-soft);
    line-height: 1.7;
    margin: 0;
}

/* ── Simple card (penunjang medis) ────────────────────────────── */
.rn-pel-simple-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 12px;
    padding: 16px;
    height: 100%;
}

.rn-pel-simple-card i {
    color: var(--rn-primary);
    font-size: 19px;
    display: block;
    margin-bottom: 8px;
}

.rn-pel-simple-card h3 {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 4px;
}

.rn-pel-simple-card p {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

/* ── Tag card (penunjang non-medis) ───────────────────────────── */
.rn-pel-tag-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 12px;
    padding: 14px;
    height: 100%;
}

.rn-pel-tag-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.rn-pel-tag-head i {
    color: var(--rn-ink-soft);
    font-size: 13px;
}

.rn-pel-tag-head h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0;
}

.rn-pel-tag-card p {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}
/* ================================================================
   RSUPP BETUN — STOK DARAH v2 (liststokdarah.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   GANTIKAN blok CSS stok darah versi sebelumnya dengan ini.
   Tambahkan di akhir rn-theme.css.
   ================================================================ */

.rn-stk-search-section {
    background: #fff;
    padding: 24px 0;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .06);
}

.rn-stk-search-group {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--rn-line);
    border-radius: 10px;
    overflow: hidden;
}

.rn-stk-search-icon {
    background: #fff;
    color: #94a3b8;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
}

.rn-stk-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13.5px;
    padding: 12px 8px;
}

.rn-stk-search-btn {
    background: var(--rn-red);
    color: #fff;
    border: none;
    padding: 0 24px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
}

.rn-stk-search-btn:hover {
    background: #b91c1c;
}

.rn-stk-search-reset {
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-left: 1px solid var(--rn-line);
    text-decoration: none;
    transition: color .2s;
}

.rn-stk-search-reset:hover {
    color: var(--rn-red);
}

/* ── Body ─────────────────────────────────────────────────────── */
.rn-stk-body {
    background: transparent;
    padding: 40px 0 72px;
    position: relative;
    z-index: 1;
}

/* ── Summary cards ────────────────────────────────────────────── */
.rn-stk-summary-row {
    margin-bottom: 24px;
}
.rn-stk-sum-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .05);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}

.rn-stk-sum-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20, 48, 35, .1);
}

.rn-stk-sum-label {
    font-size: 12px;
    color: var(--rn-ink-soft);
    font-weight: 600;
    margin-bottom: 10px;
}

.rn-stk-sum-gol {
    font-size: 32px;
    font-weight: 800;
    color: var(--gol-color);
    line-height: 1;
    margin-bottom: 8px;
}

.rn-stk-sum-count {
    font-size: 32px;
    font-weight: 800;
    color: var(--rn-ink);
    line-height: 1;
    margin-bottom: 8px;
}

.rn-stk-sum-unit {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Card detail tabel ─────────────────────────────────────────── */
.rn-stk-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(20, 48, 35, .08);
    overflow: hidden;
    border: 1px solid var(--rn-line);
}

.rn-stk-card-header {
    background: linear-gradient(135deg, var(--rn-red), #b91c1c);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.rn-stk-card-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

.rn-stk-card-header h4 {
    color: #fff;
    font-weight: 700;
    margin: 0;
    font-size: 15px;
}

.rn-stk-card-header p {
    color: rgba(255, 255, 255, .8);
    font-size: 11.5px;
    margin: 0;
}

.rn-stk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rn-stk-table thead th {
    background: var(--rn-soft);
    color: var(--rn-primary);
    padding: 12px 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border: none;
    text-align: left;
}

.rn-stk-table tbody tr {
    border-bottom: 1px solid var(--rn-line);
    transition: background .15s;
}

.rn-stk-table tbody tr:hover {
    background: var(--rn-warm);
}

.rn-stk-table td {
    padding: 13px 20px;
    font-size: 13px;
    vertical-align: middle;
    border: none;
}

.rn-stk-komponen-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rn-stk-komponen-icon {
    width: 32px;
    height: 32px;
    background: #fee2e2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rn-red);
    font-size: 13px;
    flex-shrink: 0;
}

.rn-stk-komponen-nama {
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-stk-badge-gol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.rn-stk-badge-rhesus {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.rhesus-pos {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rhesus-neg {
    background: #fee2e2;
    color: var(--rn-red);
}

.rn-stk-badge-stok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 10px;
    background: var(--rn-ink);
    color: #fff;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
}

.rn-stk-empty {
    text-align: center;
    padding: 56px 20px;
    color: #94a3b8;
}

.rn-stk-empty i {
    font-size: 42px;
    display: block;
    margin-bottom: 14px;
    color: #dde3ec;
}

.rn-stk-footer {
    background: var(--rn-warm);
    border-top: 1px solid var(--rn-line);
    padding: 12px 20px;
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================================================================
   RSUPP BETUN — CEK STATUS PASIEN (cekpasien.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-cek-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

/* ── Info card ────────────────────────────────────────────────── */
.rn-cek-info-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(20, 48, 35, .06);
    margin-bottom: 24px;
    border-left: 5px solid var(--rn-primary);
    padding: 20px 24px;
    display: flex;
    gap: 14px;
}

.rn-cek-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--rn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    flex-shrink: 0;
}

.rn-cek-info-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rn-ink);
    margin-bottom: 5px;
}

.rn-cek-info-text {
    font-size: 13px;
    color: var(--rn-ink-soft);
    line-height: 1.7;
    margin: 0;
}

.rn-cek-info-text strong {
    color: var(--rn-ink);
}

/* ── Form card ────────────────────────────────────────────────── */
.rn-cek-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(20, 48, 35, .08);
    overflow: hidden;
    margin-bottom: 24px;
}

.rn-cek-form-header {
    background: var(--rn-primary);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rn-cek-form-header-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.rn-cek-form-header-title {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

.rn-cek-form-header-sub {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}

.rn-cek-form-body {
    padding: 24px;
}

.rn-cek-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.rn-cek-required {
    color: #ef4444;
}

.rn-cek-input-group {
    display: flex;
    border: 1.5px solid var(--rn-line);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
    margin-bottom: 6px;
}

.rn-cek-input-group.rn-cek-warn {
    border-color: #d97706;
}

.rn-cek-input-group.rn-cek-valid {
    border-color: var(--rn-primary);
}

.rn-cek-input-group.rn-cek-invalid {
    border-color: #dc2626;
}

.rn-cek-input-icon {
    background: var(--rn-soft);
    padding: 0 14px;
    display: flex;
    align-items: center;
    color: var(--rn-primary);
    font-size: 16px;
    border-right: 1px solid var(--rn-line);
}

.rn-cek-input {
    flex: 1;
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    letter-spacing: 1px;
}

.rn-cek-hint {
    font-size: 12px;
    min-height: 18px;
    margin-bottom: 16px;
}

.rn-cek-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.rn-cek-captcha-img {
    height: 50px;
    border-radius: 8px;
    border: 1.5px solid var(--rn-line);
}

.rn-cek-captcha-refresh {
    background: var(--rn-soft);
    border: 1.5px solid var(--rn-line);
    border-radius: 8px;
    width: 38px;
    height: 50px;
    cursor: pointer;
    color: var(--rn-primary);
    font-size: 15px;
}

.rn-cek-captcha-input {
    flex: 1;
    border: 1.5px solid var(--rn-line);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    letter-spacing: 2px;
}

.rn-cek-privacy-note {
    background: var(--rn-soft);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #065f46;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-cek-privacy-note i {
    color: var(--rn-primary);
    flex-shrink: 0;
}

.rn-cek-submit-btn {
    width: 100%;
    padding: 13px;
    background: var(--rn-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(20, 48, 35, .25);
    transition: background .2s;
}

.rn-cek-submit-btn:hover {
    background: var(--rn-dark);
}

/* ── Error card ───────────────────────────────────────────────── */
.rn-cek-error-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .07);
    border-left: 4px solid var(--rn-red);
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
}

.rn-cek-error-card > i {
    font-size: 24px;
    color: var(--rn-red);
    flex-shrink: 0;
    margin-top: 2px;
}

.rn-cek-error-title {
    font-weight: 700;
    color: var(--rn-ink);
    margin-bottom: 6px;
}

.rn-cek-error-text {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
}

.rn-cek-error-note {
    font-size: 12px;
    color: #aaa;
    margin-top: 10px;
}

/* ── Result card ──────────────────────────────────────────────── */
.rn-cek-result-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(20, 48, 35, .15);
}

.rn-cek-result-header {
    background: linear-gradient(135deg, var(--rn-primary), var(--rn-accent));
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.rn-cek-result-header-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.rn-cek-result-header-label {
    font-size: 11px;
    color: rgba(255, 255, 255, .8);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.rn-cek-result-header-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.rn-cek-result-body {
    padding: 24px;
}

.rn-cek-result-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.rn-cek-result-key {
    padding: 8px 0;
    color: #888;
    width: 45%;
}

.rn-cek-result-val {
    padding: 8px 0;
    color: #444;
}

.rn-cek-result-mono {
    font-weight: 800;
    color: var(--rn-ink);
    font-family: monospace;
    font-size: 14px;
}

.rn-cek-result-strong {
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-cek-icon-blue {
    color: #0369a1;
}

.rn-cek-icon-pink {
    color: #e91e8c;
}

.rn-cek-icon-green {
    color: var(--rn-primary);
    margin-right: 4px;
}

.rn-cek-status-badge {
    background: var(--rn-soft);
    color: var(--rn-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.rn-cek-result-footer {
    background: var(--rn-soft);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 12px;
    color: #065f46;
    display: flex;
    gap: 8px;
}

.rn-cek-result-footer i {
    color: var(--rn-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ================================================================
   RSUPP BETUN — TARIF DOKTER RAWAT JALAN (listtarifdokter.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-trf-body {
    background: transparent;
    padding: 56px 0 64px;
    position: relative;
    z-index: 1;
}

/* ── Judul ────────────────────────────────────────────────────── */
.rn-trf-heading {
    text-align: center;
    margin-bottom: 44px;
}

.rn-trf-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.rn-trf-heading-sub-row {
    margin-bottom: 0;
}

.rn-trf-plus {
    color: var(--rn-red);
    font-size: 20px;
}

.rn-trf-plus-sm {
    color: var(--rn-primary);
    font-size: 14px;
}

.rn-trf-title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 800;
    color: var(--rn-ink);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0;
}

.rn-trf-subtitle {
    font-size: 14px;
    color: var(--rn-ink-soft);
    font-weight: 600;
    margin: 0;
}

/* ── Cards kategori ───────────────────────────────────────────── */
.rn-trf-cards-row {
    margin-bottom: 48px;
}

.rn-trf-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(20, 48, 35, .12);
    height: 100%;
}

.rn-trf-card-head {
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.rn-trf-card-head::before {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.rn-trf-card-head-green {
    background: linear-gradient(135deg, var(--rn-accent), var(--rn-primary));
}

.rn-trf-card-head-blue {
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
}

.rn-trf-card-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .3);
    position: relative;
    z-index: 1;
}

.rn-trf-card-label {
    font-size: 11px;
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.rn-trf-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.rn-trf-card-body {
    padding: 32px 28px;
    text-align: center;
}

.rn-trf-card-price {
    font-size: clamp(32px, 6vw, 44px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.rn-trf-price-green {
    color: var(--rn-primary);
}

.rn-trf-price-blue {
    color: #0369a1;
}

.rn-trf-card-unit {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 20px;
}

.rn-trf-card-contact {
    font-size: 22px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 20px;
}

.rn-trf-card-list {
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 13px;
    color: var(--rn-ink-soft);
    line-height: 1.8;
    text-align: left;
}

.rn-trf-card-list-green {
    background: var(--rn-soft);
}

.rn-trf-card-list-green i {
    color: var(--rn-primary);
    margin-right: 8px;
}

.rn-trf-card-list-blue {
    background: #e0f2fe;
}

.rn-trf-card-list-blue i {
    color: #0ea5e9;
    margin-right: 8px;
}

.rn-trf-card-note {
    margin-top: 16px;
    font-size: 12px;
    color: #94a3b8;
}

/* ── Detail tabel ─────────────────────────────────────────────── */
.rn-trf-detail-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(20, 48, 35, .08);
    margin-bottom: 32px;
}

.rn-trf-detail-header {
    background: var(--rn-dark);
    padding: 16px 24px;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

.rn-trf-detail-header i {
    color: var(--rn-accent);
    margin-right: 8px;
}

.rn-trf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.rn-trf-table thead th {
    padding: 12px 20px;
    color: var(--rn-ink);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: #f8fafc;
    border-bottom: 2px solid var(--rn-line);
    text-align: left;
}

.rn-trf-table tbody tr {
    border-bottom: 1px solid #f0f2f5;
    transition: background .15s;
}

.rn-trf-table tbody tr:hover {
    background: var(--rn-warm);
}

.rn-trf-table td {
    padding: 12px 20px;
    border: none;
    vertical-align: middle;
}

.rn-trf-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.rn-trf-nama-cell {
    font-weight: 600;
    color: var(--rn-ink);
}

.rn-trf-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.rn-trf-badge-green {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rn-trf-badge-blue {
    background: #e0f2fe;
    color: #0369a1;
}

.rn-trf-price-text {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.rn-trf-price-text-green {
    color: var(--rn-primary);
}

.rn-trf-price-text-blue {
    color: #0369a1;
}

.rn-trf-price-empty {
    color: #adb5bd;
    font-style: italic;
    font-size: 13px;
}

/* ── Info bar & catatan ───────────────────────────────────────── */
.rn-trf-info-bar {
    background: var(--rn-dark);
    border-radius: 14px;
    padding: 16px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.rn-trf-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.rn-trf-info-item i {
    color: var(--rn-accent);
    font-size: 16px;
}

.rn-trf-info-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, .2);
}

@media (max-width: 576px) {
    .rn-trf-info-divider {
        display: none;
    }
}
.rn-trf-catatan {
    margin-top: 20px;
    background: rgba(255, 255, 255, .7);
    border-radius: 10px;
    padding: 14px 20px;
    border-left: 4px solid var(--rn-amber);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.rn-trf-catatan i {
    color: var(--rn-amber);
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}

.rn-trf-catatan div {
    font-size: 12px;
    color: #64748b;
    line-height: 1.7;
}

.rn-trf-catatan strong {
    color: var(--rn-ink);
}

/* ================================================================
   RSUPP BETUN — TARIF LABORATORIUM (listlaborat.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

/* ── Search ───────────────────────────────────────────────────── */
.rn-lab-search-section {
    background: transparent;
    padding: 40px 0 0;
    position: relative;
    z-index: 2;
}

.rn-lab-input-group {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(20, 48, 35, .12);
    background: #fff;
    border: 1.5px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}

.rn-lab-input-group.rn-lab-valid {
    border-color: var(--rn-primary);
    box-shadow: 0 0 0 2px rgba(30, 70, 53, .15);
}

.rn-lab-input-group.rn-lab-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}

.rn-lab-search-icon {
    background: #fff;
    padding: 0 16px;
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-size: 14px;
}

.rn-lab-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 8px;
    font-size: 14px;
}

.rn-lab-search-btn {
    background: var(--rn-primary);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 0 24px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
}

.rn-lab-search-btn:hover {
    background: var(--rn-dark);
}

.rn-lab-search-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.rn-lab-hint {
    font-size: 12px;
    margin-top: 8px;
    min-height: 16px;
    padding-left: 4px;
}

.rn-lab-bad-char {
    background: #fee2e2;
    padding: 1px 5px;
    border-radius: 4px;
    color: #dc2626;
    font-weight: 700;
}

/* ── Table wrap ───────────────────────────────────────────────── */
.rn-lab-table-wrap {
    background: transparent;
    padding: 32px 0 64px;
    position: relative;
    z-index: 1;
}

.rn-lab-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--rn-line);
    box-shadow: 0 2px 12px rgba(20, 48, 35, .05);
}
 
.rn-lab-card-header {
    background: var(--rn-primary);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
 
.rn-lab-card-header-title {
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
 
.rn-lab-card-header-note {
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
}
 
.rn-lab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
 
.rn-lab-table thead th {
    background: var(--rn-soft);
    color: var(--rn-ink);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 14px 24px;
    border: none;
    border-bottom: 1px solid var(--rn-line);
    text-align: left;
}
 
.rn-lab-col-no {
    width: 50px;
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
}
 
.rn-lab-table tbody tr {
    border-bottom: 1px solid var(--rn-line);
    transition: background .15s;
}
 
.rn-lab-table tbody tr.rn-lab-has-detail {
    cursor: pointer;
}
 
.rn-lab-table tbody tr:hover {
    background: var(--rn-warm);
}
 
.rn-lab-table td {
    padding: 16px 24px;
    vertical-align: middle;
    border: none;
    font-size: 14px;
}
 
.rn-lab-name {
    font-weight: 700;
    color: var(--rn-ink);
}
 
.rn-lab-name-bullet {
    display: inline-block;
    width: 18px;
    height: 6px;
    background: #dee2e6;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}
 
.rn-lab-toggle-icon {
    color: var(--rn-ink-soft);
    font-size: 10px;
    transition: transform .25s ease;
    margin-right: 8px;
}
 
.rn-lab-price {
    font-weight: 800;
    color: var(--rn-ink);
    font-size: 14px;
    white-space: nowrap;
}
 
.rn-lab-price-free {
    color: #adb5bd;
    font-weight: 400;
    font-style: italic;
}
 
.rn-lab-detail-row td {
    padding: 0 !important;
    border: none !important;
    background: var(--rn-warm);
}
 
.rn-lab-detail-inner {
    border-left: 2px solid var(--rn-primary);
    margin: 0 24px 0 74px;
}
 
.rn-lab-detail-table {
    width: 100%;
}
 
.rn-lab-detail-table td {
    padding: 9px 16px;
    font-size: 13px;
    color: #555;
    border-top: 1px solid #eef0f3;
}
 
.rn-lab-detail-name i {
    color: var(--rn-ink-soft);
    margin-right: 8px;
    font-size: 11px;
}
 
.rn-lab-detail-price {
    color: var(--rn-ink);
    font-weight: 600;
    white-space: nowrap;
}
 
.rn-lab-footer {
    background: var(--rn-soft);
    border-top: 1px solid var(--rn-line);
    padding: 14px 24px;
    font-size: 12.5px;
    color: var(--rn-ink-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
 
.rn-lab-footer-left strong {
    color: var(--rn-ink);
}
 
.rn-lab-footer-right {
    text-align: right;
    color: #94a3b8;
}
 
.rn-lab-reset-link {
    color: var(--rn-primary);
    font-size: 12px;
    text-decoration: none;
    margin-left: 6px;
}
 
.rn-lab-reset-link:hover {
    text-decoration: underline;
}
 
@media (max-width: 768px) {
    .rn-lab-footer {
        flex-direction: column;
        align-items: flex-start;
    }
 
    .rn-lab-footer-right {
        text-align: left;
    }
}

/* ================================================================
   RSUPP BETUN — PAGINATION (dipakai listoperasi.php, reusable)
   Tambahkan blok ini di akhir rn-theme.css, SETELAH blok tarif lab.
   ================================================================ */

.rn-lab-pagination {
    padding: 14px 20px;
    border-top: 1px solid var(--rn-line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rn-lab-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: var(--rn-warm);
    color: var(--rn-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
}

.rn-lab-page-link:hover {
    background: var(--rn-primary);
    color: #fff;
}

.rn-lab-page-active {
    background: var(--rn-ink);
    color: #fff;
    font-weight: 700;
}

.rn-lab-page-active:hover {
    background: var(--rn-ink);
    color: #fff;
}

.rn-lab-page-ellipsis {
    color: #94a3b8;
    font-size: 13px;
    padding: 0 4px;
}

/* ================================================================
   RSUPP BETUN — CEK SURAT KETERANGAN SEHAT (ceksurat.php)
   Gaya dokumen resmi: border tegas, tanpa gradient/shadow melayang.
   Hero pakai .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-vrf-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-vrf-form-row {
    margin-bottom: 32px;
}

/* ── Form card ────────────────────────────────────────────────── */
.rn-vrf-form-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 6px;
    padding: 28px;
}

.rn-vrf-form-header {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rn-line);
}

.rn-vrf-form-icon {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: var(--rn-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.rn-vrf-form-header h5 {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--rn-ink);
    margin: 0 0 4px;
}

.rn-vrf-form-header p {
    font-size: 12.5px;
    color: var(--rn-ink-soft);
    margin: 0;
}

.rn-vrf-input-group {
    display: flex;
    border: 1.5px solid var(--rn-line);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color .2s;
}

.rn-vrf-input-group.rn-vrf-valid {
    border-color: var(--rn-primary);
}

.rn-vrf-input-group.rn-vrf-invalid {
    border-color: #dc2626;
}

.rn-vrf-input-icon {
    background: var(--rn-warm);
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--rn-ink-soft);
    border-right: 1px solid var(--rn-line);
}

.rn-vrf-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 10px;
    font-size: 13.5px;
}

.rn-vrf-submit-btn {
    background: var(--rn-ink);
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 0 22px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rn-vrf-submit-btn:hover {
    background: var(--rn-primary);
}

.rn-vrf-submit-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.rn-vrf-hint {
    font-size: 12px;
    margin-top: 8px;
    min-height: 18px;
}

.rn-vrf-bad-char {
    background: #fee2e2;
    padding: 1px 6px;
    border-radius: 3px;
    color: #dc2626;
    font-weight: 700;
}

/* ── Error card ───────────────────────────────────────────────── */
.rn-vrf-error-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-left: 3px solid #dc2626;
    border-radius: 4px;
    padding: 22px 24px;
    display: flex;
    gap: 14px;
}

.rn-vrf-error-card > i {
    font-size: 20px;
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 2px;
}

.rn-vrf-error-title {
    font-weight: 700;
    color: var(--rn-ink);
    margin-bottom: 4px;
    font-size: 13.5px;
}

.rn-vrf-error-text {
    font-size: 13px;
    color: var(--rn-ink-soft);
}

.rn-vrf-error-note {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 8px;
}

.rn-vrf-error-note code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Result card ──────────────────────────────────────────────── */
.rn-vrf-result-card {
    background: #fff;
    border: 1px solid var(--rn-line);
    border-radius: 6px;
    overflow: hidden;
}

.rn-vrf-result-header {
    background: var(--rn-ink);
    padding: 22px 26px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
}

.rn-vrf-result-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rn-vrf-result-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .6);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.rn-vrf-result-nosurat {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    font-family: monospace;
    letter-spacing: .3px;
}

.rn-vrf-result-date {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.rn-vrf-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

.rn-vrf-status-ok {
    background: var(--rn-primary);
    color: #fff;
}

.rn-vrf-status-bad {
    background: #dc2626;
    color: #fff;
}

.rn-vrf-result-body {
    padding: 26px;
}

.rn-vrf-section-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--rn-ink-soft);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rn-ink);
}

.rn-vrf-result-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.rn-vrf-result-key {
    padding: 8px 0;
    color: #94a3b8;
    width: 40%;
}

.rn-vrf-result-val {
    padding: 8px 0;
    color: var(--rn-ink-soft);
}

.rn-vrf-result-strong {
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-vrf-result-footer {
    background: var(--rn-warm);
    padding: 14px 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--rn-line);
}

.rn-vrf-result-footer i {
    color: var(--rn-ink-soft);
    font-size: 14px;
    flex-shrink: 0;
}

.rn-vrf-result-footer span {
    font-size: 12px;
    color: var(--rn-ink-soft);
}

.rn-vrf-result-footer strong {
    color: var(--rn-ink);
}

/* ================================================================
   RSUPP BETUN — CEK SURAT KETERANGAN SAKIT v2 (perbaikan)
   Tambahan kecil: nama pasien pakai font monospace sesuai kode asli.
   Tambahkan di akhir rn-theme.css.
   ================================================================ */

.rn-vrf-result-mono {
    font-weight: 700;
    color: var(--rn-ink);
    font-family: monospace;
    letter-spacing: .5px;
}

/* ================================================================
   RSUPP BETUN — CEK SURAT KETERANGAN KEMATIAN
   Tambahan kecil untuk layout 2 kolom (Identitas + Keterangan).
   Tambahkan di akhir rn-theme.css.
   ================================================================ */

.rn-vrf-section-label-accent {
    border-bottom-color: var(--rn-accent);
}

.rn-vrf-result-key-top {
    vertical-align: top;
}

/* ================================================================
   RSUPP BETUN — JADWAL KUNJUNGAN
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-jam-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-jam-heading {
    text-align: center;
    margin-bottom: 40px;
}

.rn-jam-heading-title {
    font-size: clamp(20px, 4vw, 30px);
    font-weight: 800;
    color: var(--rn-ink);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 12px;
}

.rn-jam-heading-sub {
    font-size: 14px;
    color: var(--rn-ink-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ── Card ─────────────────────────────────────────────────────── */
.rn-jam-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(20, 48, 35, .08);
    height: 100%;
}

.rn-jam-card-head {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rn-jam-head-icon {
    color: #fcd34d;
    font-size: 16px;
}

.rn-jam-head-green {
    background: linear-gradient(135deg, var(--rn-accent), var(--rn-primary));
}

.rn-jam-head-blue {
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
}

.rn-jam-head-purple {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.rn-jam-card-body {
    padding: 24px;
}

.rn-jam-card-body-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rn-jam-card-intro {
    font-size: 13px;
    color: var(--rn-ink-soft);
    margin-bottom: 16px;
    text-align: center;
}

/* ── Sesi box (kolom 1) ───────────────────────────────────────── */
.rn-jam-sesi-box {
    background: linear-gradient(135deg, var(--rn-dark), var(--rn-primary));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.rn-jam-sesi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rn-jam-sesi-text {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

.rn-jam-sesi-spacer {
    margin-top: 8px;
}

.rn-jam-sesi-icon {
    color: rgba(255, 255, 255, .4);
    font-size: 40px;
}

.rn-jam-warning-box {
    background: #fff5f5;
    border: 2px solid #fca5a5;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.rn-jam-warning-title {
    font-weight: 800;
    color: var(--rn-red);
    font-size: 13px;
    margin-bottom: 8px;
}

.rn-jam-warning-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
    margin: 0;
}

.rn-jam-warning-text strong {
    color: var(--rn-red);
    font-size: 14px;
}

/* ── List item (kolom 2 & 3) ──────────────────────────────────── */
.rn-jam-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.rn-jam-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.rn-jam-icon-blue {
    background: #f0f9ff;
    color: #0ea5e9;
}

.rn-jam-icon-red {
    background: #fee2e2;
    color: var(--rn-red);
}

.rn-jam-icon-green {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rn-jam-icon-purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.rn-jam-item-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
}

.rn-jam-divider {
    border-top: 1px solid #f1f5f9;
}

/* ── Footer tagline ───────────────────────────────────────────── */
.rn-jam-tagline {
    margin-top: 40px;
    background: linear-gradient(135deg, var(--rn-accent), var(--rn-primary));
    border-radius: 50px;
    padding: 16px 32px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(30, 70, 53, .3);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
}

.rn-jam-tagline i {
    color: #fcd34d;
    margin-right: 8px;
}

/* ================================================================
   RSUPP BETUN — KONTAK (kontak.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-kon-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-kon-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rn-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-kon-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rn-line);
}

/* ── Info cards ───────────────────────────────────────────────── */
.rn-kon-info-row {
    margin-bottom: 32px;
}

.rn-kon-info-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
    padding: 28px 24px;
    height: 100%;
    border-top: 4px solid var(--card-color);
    transition: transform .2s, box-shadow .2s;
}

.rn-kon-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(20, 48, 35, .12);
}

.rn-kon-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    margin-bottom: 16px;
    background: var(--card-color);
}

.rn-kon-info-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 6px;
}

.rn-kon-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--rn-ink);
    line-height: 1.6;
    margin: 0;
}

.rn-kon-info-value a {
    color: var(--rn-ink);
    text-decoration: none;
    transition: color .2s;
}

.rn-kon-info-value a:hover {
    color: var(--rn-primary);
}

.rn-kon-jam-highlight {
    color: var(--rn-primary);
    font-size: 15px;
}

/* ── Sosmed card ──────────────────────────────────────────────── */
.rn-kon-cta-row {
    margin-bottom: 32px;
}

.rn-kon-sosmed-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
    padding: 28px 24px;
    height: 100%;
}

.rn-kon-sosmed-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--rn-ink);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--rn-warm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-kon-sosmed-title i {
    color: #3498db;
}

.rn-kon-sosmed-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rn-kon-sosmed-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: opacity .2s, transform .2s;
    flex: 1;
    min-width: 140px;
}

.rn-kon-sosmed-btn:hover {
    opacity: .88;
    transform: translateY(-2px);
    color: #fff;
}

.rn-kon-sosmed-fb {
    background: #1877f2;
}

.rn-kon-sosmed-ig {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.rn-kon-sosmed-wa {
    background: #25d366;
}

.rn-kon-sosmed-yt {
    background: #ff0000;
}

/* ── WA CTA ───────────────────────────────────────────────────── */
.rn-kon-wa-cta {
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 14px;
    padding: 24px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .25);
}

.rn-kon-wa-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    flex-shrink: 0;
}

.rn-kon-wa-text h5 {
    color: #fff;
    font-weight: 700;
    margin: 0 0 4px;
    font-size: 15px;
}

.rn-kon-wa-text p {
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    margin: 0;
}

.rn-kon-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    background: #fff;
    color: #128c7e;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow .2s;
    flex-shrink: 0;
}

.rn-kon-wa-btn:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    color: #128c7e;
}

/* ── Pengaduan card ───────────────────────────────────────────── */
.rn-kon-pengaduan-card {
    background: var(--rn-primary);
    border-radius: 14px;
    padding: 24px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.rn-kon-pengaduan-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, .2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

.rn-kon-pengaduan-title {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 6px;
}

.rn-kon-pengaduan-text {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    margin: 0;
    line-height: 1.6;
}

.rn-kon-pengaduan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--rn-primary);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 50px;
    text-decoration: none;
    transition: background .2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.rn-kon-pengaduan-btn:hover {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

/* ── Map ──────────────────────────────────────────────────────── */
.rn-kon-map-wrap {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
}

.rn-kon-map-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--rn-line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.rn-kon-map-header i {
    color: #3498db;
    font-size: 16px;
}

.rn-kon-map-header span {
    font-size: 14px;
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-kon-map-wrap iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: none;
}

/* ================================================================
   RSUPP BETUN — BERITA (berita.php + beritadetail.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-brt-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-brt-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rn-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-brt-section-label i {
    color: var(--rn-accent);
}

/* ── Berita card (grid) ───────────────────────────────────────── */
.rn-brt-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
    overflow: hidden;
    height: 100%;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}

.rn-brt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(20, 48, 35, .13);
}

.rn-brt-thumb {
    height: 190px;
    overflow: hidden;
    position: relative;
    background: var(--rn-soft);
}

.rn-brt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.rn-brt-card:hover .rn-brt-thumb img {
    transform: scale(1.06);
}

.rn-brt-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--rn-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rn-brt-card-body {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rn-brt-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rn-ink);
    line-height: 1.5;
    margin-bottom: 10px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rn-brt-title a {
    color: inherit;
    text-decoration: none;
}

.rn-brt-title a:hover {
    color: var(--rn-primary);
}

.rn-brt-meta {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rn-brt-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rn-primary);
    text-decoration: none;
    margin-top: 12px;
    transition: gap .2s;
}

.rn-brt-readmore:hover {
    gap: 10px;
    color: var(--rn-dark);
}

/* ── Pagination ───────────────────────────────────────────────── */
.rn-brt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.rn-brt-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--rn-warm);
    color: var(--rn-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
}

.rn-brt-page-link:hover {
    background: var(--rn-primary);
    color: #fff;
}

.rn-brt-page-active {
    background: var(--rn-ink);
    color: #fff;
    font-weight: 700;
}

.rn-brt-page-active:hover {
    background: var(--rn-ink);
    color: #fff;
}

.rn-brt-page-ellipsis {
    color: #94a3b8;
    font-size: 13px;
}

.rn-brt-page-info {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 8px;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.rn-brt-sidebar-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
    overflow: hidden;
}

.rn-brt-sidebar-spacer {
    margin-bottom: 20px;
}

.rn-brt-sidebar-header {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--rn-line);
}

.rn-brt-sidebar-header span {
    font-size: 13px;
    font-weight: 700;
    color: var(--rn-ink);
}

.rn-brt-sidebar-link {
    margin-left: auto;
    font-size: 11px;
    color: var(--rn-primary);
    text-decoration: none;
    font-weight: 600;
}

.rn-brt-sidebar-link:hover {
    text-decoration: underline;
}

.rn-brt-dir-wrap {
    padding: 16px;
}

.rn-brt-dir-card {
    text-align: center;
}

.rn-brt-dir-card img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    border: 3px solid var(--rn-soft);
}

.rn-brt-dir-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 3px;
}

.rn-brt-dir-card p {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

.rn-brt-fb-wrap {
    padding: 12px;
    display: flex;
    justify-content: center;
}

/* ================================================================
   BERITA DETAIL (beritadetail.php)
   ================================================================ */

.rn-brtd-breadcrumb {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0 0 8px;
    font-size: 12px;
}

.rn-brtd-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: rgba(255, 255, 255, .4);
}

.rn-brtd-breadcrumb a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}

.rn-brtd-breadcrumb-active {
    color: #fff;
}

.rn-brtd-title {
    font-size: clamp(20px, 3vw, 30px);
    line-height: 1.4;
    color: #f1f5f9;
    font-weight: 400;
    margin: 0;
}

.rn-brtd-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-brtd-article {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
}

.rn-brtd-article-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: var(--rn-warm);
}

.rn-brtd-article-body {
    padding: 28px 32px;
}

.rn-brtd-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rn-brtd-cat-badge {
    background: var(--rn-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rn-brtd-meta-item {
    font-size: 12px;
    color: #94a3b8;
}

.rn-brtd-content {
    font-size: 14px;
    color: var(--rn-ink-soft);
    line-height: 1.9;
}

.rn-brtd-tags-row {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rn-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rn-brtd-tags-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

.rn-brtd-tag {
    background: var(--rn-warm);
    color: #555;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--rn-line);
}

.rn-brtd-navrow {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.rn-brtd-nav-link {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(20, 48, 35, .06);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rn-ink);
    font-size: 13px;
    font-weight: 600;
}

.rn-brtd-nav-link i {
    color: var(--rn-primary);
    flex-shrink: 0;
}

.rn-brtd-nav-link-right {
    justify-content: flex-end;
    text-align: right;
}

.rn-brtd-nav-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rn-brtd-back-row {
    margin-top: 16px;
}

.rn-brtd-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rn-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.rn-brtd-back-link:hover {
    text-decoration: underline;
}

.rn-brtd-sidebar-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
}

.rn-brtd-sidebar-spacer {
    margin-bottom: 20px;
}

.rn-brtd-sidebar-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rn-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rn-soft);
}

.rn-brtd-related-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    text-decoration: none;
    align-items: flex-start;
}

.rn-brtd-related-item:last-child {
    margin-bottom: 0;
}

.rn-brtd-related-img {
    width: 72px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.rn-brtd-related-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0 0 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rn-brtd-related-date {
    font-size: 11px;
    color: #94a3b8;
}

/* ================================================================
   RSUPP BETUN — SEJARAH (sejarah.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-sjr-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-sjr-intro-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .06);
}

.rn-sjr-intro-card p {
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--rn-ink-soft);
    margin-bottom: 20px;
    text-align: justify;
}

.rn-sjr-intro-card p:last-child {
    margin-bottom: 0;
}

.rn-sjr-intro-card em {
    color: var(--rn-primary);
    font-style: italic;
}

.rn-sjr-section-title {
    text-align: center;
    margin-bottom: 44px;
}

.rn-sjr-section-title h2 {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0;
}

/* ── Timeline ─────────────────────────────────────────────────── */
.rn-sjr-timeline {
    position: relative;
    padding: 20px 0;
}

.rn-sjr-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--rn-primary), var(--rn-accent));
    border-radius: 3px;
}

.rn-sjr-timeline-item {
    position: relative;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rn-sjr-timeline-item:last-child {
    margin-bottom: 0;
}

.rn-sjr-timeline-item:nth-child(odd) .rn-sjr-timeline-content {
    margin-right: auto;
    margin-left: 0;
    text-align: right;
    padding-right: 50px;
}

.rn-sjr-timeline-item:nth-child(even) .rn-sjr-timeline-content {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
    padding-left: 50px;
}

.rn-sjr-timeline-content {
    width: 45%;
    background: #fff;
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(20, 48, 35, .08);
    transition: transform .2s, box-shadow .2s;
}

.rn-sjr-timeline-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(20, 48, 35, .12);
}

.rn-sjr-timeline-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: var(--rn-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    box-shadow: 0 4px 12px rgba(30, 70, 53, .35);
    z-index: 2;
}

.rn-sjr-timeline-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--rn-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-sjr-timeline-item:nth-child(odd) .rn-sjr-timeline-date {
    justify-content: flex-end;
}

.rn-sjr-timeline-item:nth-child(even) .rn-sjr-timeline-date {
    justify-content: flex-start;
}

.rn-sjr-timeline-desc {
    font-size: 13.5px;
    color: var(--rn-ink-soft);
    line-height: 1.7;
}

.rn-sjr-source {
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    margin-top: 32px;
}

.rn-sjr-source i {
    margin-right: 6px;
}

@media (max-width: 768px) {
    .rn-sjr-intro-card {
        padding: 24px;
    }

    .rn-sjr-timeline::before {
        left: 24px;
    }

    .rn-sjr-timeline-item {
        margin-bottom: 40px;
    }

    .rn-sjr-timeline-item:nth-child(odd) .rn-sjr-timeline-content,
    .rn-sjr-timeline-item:nth-child(even) .rn-sjr-timeline-content {
        width: calc(100% - 64px);
        margin-left: 64px;
        margin-right: 0;
        text-align: left;
        padding: 20px;
    }

    .rn-sjr-timeline-icon {
        left: 24px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .rn-sjr-timeline-item:nth-child(odd) .rn-sjr-timeline-date,
    .rn-sjr-timeline-item:nth-child(even) .rn-sjr-timeline-date {
        justify-content: flex-start;
    }
}

/* ================================================================
   RSUPP BETUN — VISI, MISI & MOTTO (visimisi.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-vm-body {
    background: transparent;
    padding: 48px 0 24px;
    position: relative;
    z-index: 1;
}

.rn-vm-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 45px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .06);
}

.rn-vm-card-flush {
    padding: 0;
    overflow: hidden;
}

.rn-vm-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--rn-warm);
}

.rn-vm-motto-head {
    margin: 0;
    border: none;
    padding: 30px 45px 20px;
}

.rn-vm-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.rn-vm-icon-purple {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.rn-vm-icon-green {
    background: var(--rn-primary);
}

.rn-vm-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0;
}

/* ── Visi ─────────────────────────────────────────────────────── */
.rn-vm-visi-content {
    text-align: center;
    padding: 10px 20px;
}

.rn-vm-visi-text {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--rn-ink);
    line-height: 1.8;
    margin: 0;
    position: relative;
    display: inline-block;
    font-family: 'Instrument Serif', serif;
}

.rn-vm-visi-text::before,
.rn-vm-visi-text::after {
    content: '"';
    font-size: 3rem;
    color: var(--rn-soft);
    font-weight: 700;
    position: absolute;
    font-family: Georgia, serif;
}

.rn-vm-visi-text::before {
    top: -20px;
    left: -40px;
}

.rn-vm-visi-text::after {
    bottom: -30px;
    right: -40px;
}

/* ── Misi ─────────────────────────────────────────────────────── */
.rn-vm-misi-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rn-vm-misi-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--rn-warm);
    border-radius: 12px;
    transition: all .2s ease;
}

.rn-vm-misi-item:last-child {
    margin-bottom: 0;
}

.rn-vm-misi-item:hover {
    background: var(--rn-soft);
    transform: translateX(4px);
}

.rn-vm-misi-num {
    width: 38px;
    height: 38px;
    background: var(--rn-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.rn-vm-misi-text {
    font-size: 14.5px;
    color: var(--rn-ink-soft);
    line-height: 1.6;
    margin: 0;
    padding-top: 6px;
}

/* ── Motto ────────────────────────────────────────────────────── */
.rn-vm-motto-box {
    background: linear-gradient(135deg, var(--rn-dark), var(--rn-primary));
    color: #fff;
    text-align: center;
    padding: 48px 40px;
    position: relative;
}

.rn-vm-motto-icon {
    font-size: 24px;
    color: rgba(255, 255, 255, .3);
    margin-bottom: 16px;
    display: block;
}

.rn-vm-motto-text {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    font-family: 'Instrument Serif', serif;
}

.rn-vm-source {
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    padding: 8px 0 40px;
}

.rn-vm-source i {
    margin-right: 6px;
}

@media (max-width: 768px) {
    .rn-vm-card {
        padding: 28px 24px;
    }

    .rn-vm-motto-head {
        padding: 24px 24px 16px;
    }

    .rn-vm-motto-box {
        padding: 36px 24px;
    }

    .rn-vm-visi-text {
        font-size: 1.1rem;
    }

    .rn-vm-motto-text {
        font-size: 1.35rem;
    }
}

/* ================================================================
   RSUPP BETUN — TUGAS & FUNGSI (tugasfungsi.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-tf-body {
    background: transparent;
    padding: 48px 0 24px;
    position: relative;
    z-index: 1;
}

.rn-tf-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 45px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .06);
}

.rn-tf-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--rn-warm);
}

.rn-tf-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.rn-tf-icon-purple {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.rn-tf-icon-blue {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.rn-tf-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0;
}

/* ── Tugas ────────────────────────────────────────────────────── */
.rn-tf-tugas-box {
    padding: 24px;
    background: var(--rn-warm);
    border-radius: 12px;
    border-left: 4px solid #667eea;
}

.rn-tf-tugas-text {
    font-size: 15px;
    color: var(--rn-ink-soft);
    line-height: 1.9;
    margin: 0;
    text-align: justify;
}

/* ── Fungsi ───────────────────────────────────────────────────── */
.rn-tf-fungsi-intro {
    font-size: 15px;
    color: var(--rn-ink-soft);
    line-height: 1.9;
    margin-bottom: 24px;
    text-align: justify;
    padding: 16px;
    background: var(--rn-warm);
    border-radius: 12px;
}

.rn-tf-fungsi-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rn-tf-fungsi-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--rn-warm);
    border-radius: 12px;
    transition: all .2s ease;
    border-left: 3px solid transparent;
}

.rn-tf-fungsi-item:last-child {
    margin-bottom: 0;
}

.rn-tf-fungsi-item:hover {
    background: #e3f2fd;
    border-left-color: #4facfe;
    transform: translateX(4px);
}

.rn-tf-fungsi-letter {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #4facfe, #00b4d8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    text-transform: lowercase;
}

.rn-tf-fungsi-text {
    font-size: 14.5px;
    color: var(--rn-ink-soft);
    line-height: 1.6;
    margin: 0;
    padding-top: 6px;
}

.rn-tf-source {
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
    padding: 8px 0 40px;
}

.rn-tf-source i {
    margin-right: 6px;
}

@media (max-width: 768px) {
    .rn-tf-card {
        padding: 28px 24px;
    }
}

/* ================================================================
   RSUPP BETUN — STRUKTUR ORGANISASI (strukturorganisasi.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-so-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-so-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 45px;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .06);
}

.rn-so-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--rn-warm);
}

.rn-so-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background: var(--rn-primary);
}

.rn-so-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0;
}

/* ── Image container ──────────────────────────────────────────── */
.rn-so-image-wrap {
    position: relative;
    width: 100%;
    background: var(--rn-warm);
    border-radius: 12px;
    overflow: hidden;
    padding: 20px;
    border: 2px solid var(--rn-line);
    transition: all .3s ease;
}

.rn-so-image-wrap:hover {
    border-color: var(--rn-primary);
    box-shadow: 0 4px 16px rgba(30, 70, 53, .15);
}

.rn-so-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: zoom-in;
    transition: all .3s ease;
}

.rn-so-image-wrap:hover img {
    transform: scale(1.02);
}

.rn-so-zoom-hint {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(30, 70, 53, .9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: all .3s ease;
    pointer-events: none;
    z-index: 2;
}

.rn-so-image-wrap:hover .rn-so-zoom-hint {
    opacity: 1;
}

.rn-so-download-section {
    margin-top: 16px;
}

.rn-so-info-text {
    text-align: center;
    color: var(--rn-ink-soft);
    font-size: .95rem;
    margin: 0;
    font-style: italic;
}

.rn-so-info-text i {
    margin-right: 6px;
}

/* ── Fullscreen modal ─────────────────────────────────────────── */
.rn-so-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .95);
    z-index: 9999;
    cursor: zoom-out;
}

.rn-so-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10000;
}

.rn-so-modal-img {
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .rn-so-card {
        padding: 28px 24px;
    }

    .rn-so-image-wrap {
        padding: 15px;
    }

    .rn-so-zoom-hint {
        display: none;
    }
}
/* ── Fix khusus: gambar SI GESIT resolusi rendah (1000x666),
   pakai contain supaya tidak di-upscale dan terlihat blur ────── */
.rn-hero-slide[style*="hero-1789610528-194.webp"] {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
}
/* ================================================================
   RSUPP BETUN — LAYANAN PENGADUAN (pengaduan.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-pgd-body {
    background: transparent;
    padding: 48px 0 80px;
    position: relative;
    z-index: 1;
}

/* ── Success state ────────────────────────────────────────────── */
.rn-pgd-success-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(20, 48, 35, .1);
    padding: 48px 36px;
    text-align: center;
}

.rn-pgd-check-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--rn-primary);
    box-shadow: 0 8px 24px rgba(30, 70, 53, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 36px;
    color: #fff;
}

.rn-pgd-success-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--rn-ink);
    margin-bottom: 10px;
}

.rn-pgd-success-text {
    font-size: 14px;
    color: var(--rn-ink-soft);
    margin-bottom: 28px;
    line-height: 1.7;
}

.rn-pgd-summary-card {
    background: var(--rn-warm);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: left;
    margin-bottom: 28px;
    border: 1px solid var(--rn-line);
}

.rn-pgd-summary-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--rn-primary);
    margin-bottom: 14px;
}

.rn-pgd-summary-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.rn-pgd-summary-key {
    padding: 5px 0;
    color: #94a3b8;
    width: 45%;
}

.rn-pgd-summary-key-top {
    vertical-align: top;
}

.rn-pgd-summary-val {
    padding: 5px 0;
    color: #475569;
    line-height: 1.6;
}

.rn-pgd-summary-mono {
    font-weight: 700;
    color: var(--rn-ink);
    font-family: monospace;
    font-size: 12px;
}

.rn-pgd-summary-strong {
    font-weight: 600;
    color: var(--rn-ink);
}

.rn-pgd-privacy-note {
    background: var(--rn-soft);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #065f46;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-pgd-privacy-note i {
    color: var(--rn-primary);
    flex-shrink: 0;
}

.rn-pgd-privacy-note-form {
    margin-bottom: 24px;
}

.rn-pgd-home-btn {
    background: var(--rn-primary);
    color: #fff;
    padding: 12px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(30, 70, 53, .3);
    transition: background .2s;
}

.rn-pgd-home-btn:hover {
    background: var(--rn-dark);
    color: #fff;
}

/* ── Error banner ──────────────────────────────────────────────── */
.rn-pgd-error-banner {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.rn-pgd-error-title {
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-pgd-error-list {
    margin: 0;
    padding-left: 20px;
    color: #991b1b;
    font-size: 14px;
}

/* ── Info card ─────────────────────────────────────────────────── */
.rn-pgd-info-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(20, 48, 35, .06);
    margin-bottom: 24px;
    overflow: hidden;
    border-left: 5px solid var(--rn-primary);
    padding: 22px 26px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.rn-pgd-info-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--rn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.rn-pgd-info-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--rn-ink);
    margin-bottom: 6px;
}

.rn-pgd-info-text {
    font-size: 13px;
    color: var(--rn-ink-soft);
    line-height: 1.8;
    margin: 0;
}

.rn-pgd-info-text strong {
    color: var(--rn-ink);
}

/* ── Form card ─────────────────────────────────────────────────── */
.rn-pgd-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(20, 48, 35, .08);
    overflow: hidden;
}

.rn-pgd-form-header {
    background: var(--rn-primary);
    padding: 20px 26px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rn-pgd-form-header-icon {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.rn-pgd-form-header-title {
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}

.rn-pgd-form-header-sub {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}

.rn-pgd-form-body {
    padding: 28px 28px 32px;
}

.rn-pgd-field {
    margin-bottom: 22px;
}

.rn-pgd-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.rn-pgd-required {
    color: #ef4444;
}

.rn-pgd-input-group {
    display: flex;
    border: 1.5px solid var(--rn-line);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s;
}

.rn-pgd-input-icon {
    background: var(--rn-soft);
    padding: 0 14px;
    display: flex;
    align-items: center;
    color: var(--rn-primary);
    font-size: 15px;
    border-right: 1px solid var(--rn-line);
}

.rn-pgd-input {
    flex: 1;
    border: none;
    padding: 11px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
}

.rn-pgd-hint {
    font-size: 12px;
    margin-top: 5px;
    min-height: 16px;
}

.rn-pgd-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--rn-line);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    resize: vertical;
    transition: border-color .2s;
    box-sizing: border-box;
    font-family: inherit;
}

.rn-pgd-textarea:focus {
    border-color: var(--rn-primary);
}

.rn-pgd-counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.rn-pgd-hint-inline {
    color: #94a3b8;
}

.rn-pgd-char-counter {
    font-size: 12px;
    color: #94a3b8;
}

.rn-pgd-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rn-pgd-captcha-img {
    height: 50px;
    border-radius: 8px;
    border: 1.5px solid var(--rn-line);
}

.rn-pgd-captcha-refresh {
    background: var(--rn-soft);
    border: 1.5px solid var(--rn-line);
    border-radius: 8px;
    width: 38px;
    height: 50px;
    cursor: pointer;
    color: var(--rn-primary);
    font-size: 15px;
}

.rn-pgd-captcha-input {
    flex: 1;
    border: 1.5px solid var(--rn-line);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    letter-spacing: 2px;
}

.rn-pgd-submit-btn {
    width: 100%;
    padding: 13px;
    background: var(--rn-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(30, 70, 53, .3);
    transition: background .2s;
}

.rn-pgd-submit-btn:hover {
    background: var(--rn-dark);
}
/* ================================================================
   RSUPP BETUN — SURVEI KEPUASAN PASIEN (surveikepuasan.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-skp-body {
    background: transparent;
    padding: 40px 0 100px;
    position: relative;
    z-index: 1;
}

.rn-skp-success-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(20, 48, 35, .1);
    padding: 48px 36px;
    text-align: center;
}

.rn-skp-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 36px;
    color: #fff;
}

.rn-skp-icon-ok {
    background: var(--rn-primary);
    box-shadow: 0 8px 24px rgba(30, 70, 53, .3);
}

.rn-skp-icon-warn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 8px 24px rgba(245, 158, 11, .3);
}

.rn-skp-success-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--rn-ink);
    margin-bottom: 10px;
}

.rn-skp-success-text {
    font-size: 14px;
    color: var(--rn-ink-soft);
    margin-bottom: 24px;
    line-height: 1.7;
}

.rn-skp-error-note {
    background: #fee2e2;
    color: #b91c1c;
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.rn-skp-status-badge-wrap {
    margin-bottom: 28px;
}

.rn-skp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
}

.rn-skp-badge-ok {
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rn-skp-badge-bad {
    background: #fee2e2;
    color: #991b1b;
}

.rn-skp-success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.rn-skp-btn-home {
    background: var(--rn-primary);
    color: #fff;
    padding: 11px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s;
}

.rn-skp-btn-home:hover {
    background: var(--rn-dark);
    color: #fff;
}

.rn-skp-btn-retry {
    background: #f1f5f9;
    color: #0f172a;
    padding: 11px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rn-skp-error-banner {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.rn-skp-error-title {
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-skp-error-list {
    margin: 0;
    padding-left: 20px;
    color: #991b1b;
    font-size: 14px;
}

.rn-skp-intro-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(20, 48, 35, .06);
    margin-bottom: 24px;
    overflow: hidden;
    border-left: 5px solid var(--rn-primary);
}

.rn-skp-intro-body {
    padding: 24px 28px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.rn-skp-intro-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--rn-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.rn-skp-intro-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--rn-ink);
    margin-bottom: 8px;
}

.rn-skp-intro-text {
    font-size: 13px;
    color: var(--rn-ink-soft);
    line-height: 1.8;
    margin: 0;
}

.rn-skp-intro-text strong {
    color: var(--rn-ink);
}

.rn-skp-intro-thanks {
    font-size: 13px;
    color: var(--rn-ink-soft);
    line-height: 1.8;
    margin: 10px 0 0;
}

.rn-skp-intro-thanks strong {
    color: var(--rn-accent);
}

.rn-skp-section-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(20, 48, 35, .06);
    margin-bottom: 24px;
    overflow: hidden;
}

.rn-skp-section-header {
    background: var(--rn-primary);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rn-skp-header-blue {
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
}

.rn-skp-header-green {
    background: linear-gradient(135deg, var(--rn-accent), var(--rn-primary));
}

.rn-skp-section-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.rn-skp-section-title {
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}

.rn-skp-section-sub {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
}

.rn-skp-legend-row {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.rn-skp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
}

.rn-skp-legend-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--rn-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

.rn-skp-section-body {
    padding: 24px;
}

.rn-skp-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    display: block;
}

.rn-skp-required {
    color: #ef4444;
}

.rn-skp-optional {
    color: #94a3b8;
    font-weight: 400;
}

.rn-skp-input,
.rn-skp-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--rn-line);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    background: #fff;
}

.rn-skp-input:focus,
.rn-skp-select:focus {
    border-color: var(--rn-primary);
}

.rn-skp-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.rn-skp-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 50px;
    border: 1.5px solid var(--rn-line);
    background: #fff;
    color: #64748b;
    transition: all .2s;
}

.rn-skp-chip-layanan {
    padding: 10px 20px;
}

.rn-skp-chip:hover {
    border-color: var(--rn-primary);
    background: var(--rn-soft);
    color: var(--rn-primary);
}

.rn-skp-chip input {
    display: none;
}

.rn-skp-chip-active {
    border-color: var(--rn-primary) !important;
    background: var(--rn-soft) !important;
    color: var(--rn-primary) !important;
}

.rn-skp-igd-display {
    display: none;
    padding: 10px 14px;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    background: #fff5f5;
}

.rn-skp-unit-placeholder {
    padding: 10px 14px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    font-size: 13px;
    color: #94a3b8;
}

.rn-skp-seksi {
    margin-bottom: 28px;
}

.rn-skp-seksi-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rn-warm);
}

.rn-skp-seksi-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

.rn-skp-seksi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.rn-skp-seksi-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--rn-ink);
}

.rn-skp-q-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--rn-warm);
    border: 1.5px solid var(--rn-line);
    transition: border-color .2s, background .2s;
}

.rn-skp-q-row.answered {
    background: var(--rn-soft) !important;
    border-color: #6ee7b7 !important;
}

.rn-skp-q-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rn-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.rn-skp-q-body {
    flex: 1;
    min-width: 0;
}

.rn-skp-q-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 12px;
}

.rn-skp-dot {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 50px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.rn-skp-dot:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.rn-skp-dot-active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.rn-skp-dot-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.skp-dots-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .skp-dots-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .rn-skp-dot {
        justify-content: flex-start !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .rn-skp-dot .skp-dot-circle {
        flex-shrink: 0;
    }

    .rn-skp-dot .skp-dot-label-full {
        display: none;
    }

    .rn-skp-dot .skp-dot-label-short {
        display: inline;
    }
}

@media (min-width: 481px) {
    .rn-skp-dot .skp-dot-label-full {
        display: inline;
    }

    .rn-skp-dot .skp-dot-label-short {
        display: none;
    }
}

.rn-skp-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--rn-line);
    border-radius: 10px;
    font-size: 14px;
    color: #374151;
    outline: none;
    resize: vertical;
    transition: border-color .2s;
    line-height: 1.6;
}

.rn-skp-textarea:focus {
    border-color: var(--rn-accent);
}

.rn-skp-char-count {
    text-align: right;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.rn-skp-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 998;
    background: #fff;
    border-top: 1px solid var(--rn-line);
    padding: 12px 0;
    box-shadow: 0 -4px 16px rgba(20, 48, 35, .1);
}

.rn-skp-sticky-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.rn-skp-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
}

.rn-skp-progress-count {
    font-size: 13px;
    font-weight: 800;
    color: var(--rn-ink);
    white-space: nowrap;
}

.rn-skp-progress-total {
    color: #94a3b8;
    font-weight: 400;
}

.rn-skp-progress-track {
    flex: 1;
    background: var(--rn-line);
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
}

.rn-skp-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--rn-primary), var(--rn-accent));
    border-radius: 99px;
    transition: width .3s ease;
}

.rn-skp-progress-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--rn-primary);
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}

.rn-skp-submit-btn {
    background: #cbd5e1;
    color: #94a3b8;
    border: none;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 800;
    cursor: not-allowed;
    transition: all .3s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rn-skp-submit-btn:not(:disabled) {
    background: linear-gradient(135deg, var(--rn-accent), var(--rn-primary)) !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(30, 70, 53, .4);
}

.rn-skp-submit-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(30, 70, 53, .5);
}

@media (max-width: 575px) {
    .rn-skp-submit-btn {
        padding: 11px 24px !important;
        font-size: 14px !important;
    }
}

@keyframes skpSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* ================================================================
   RSUPP BETUN — GRAFIK SURVEI KEPUASAN (grafiksurvei.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-grf-body {
    background: var(--rn-warm);
    padding: 24px 0 60px;
    position: relative;
    z-index: 1;
}

.rn-grf-mb-4 {
    margin-bottom: 16px;
}

.rn-grf-p-0 {
    padding: 0 !important;
}

/* ── KPI Grid ─────────────────────────────────────────────────── */
.rn-grf-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (min-width: 640px) {
    .rn-grf-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rn-grf-kpi-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(20, 48, 35, .07);
    border-bottom: 3px solid var(--rn-line);
}

.rn-grf-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin: 0 auto 12px;
}

.rn-grf-kpi-val {
    font-size: 26px;
    font-weight: 800;
    color: var(--rn-ink);
    line-height: 1.1;
}

.rn-grf-kpi-lbl {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 600;
}

.rn-grf-kpi-sub {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ── Layout rows ──────────────────────────────────────────────── */
.rn-grf-row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.rn-grf-row-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .rn-grf-row-2 {
        grid-template-columns: 2fr 1fr;
    }

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

/* ── Card ─────────────────────────────────────────────────────── */
.rn-grf-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(20, 48, 35, .07);
    overflow: hidden;
}

.rn-grf-card-head {
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--rn-ink);
    border-bottom: 1px solid var(--rn-warm);
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rn-grf-head-green {
    background: linear-gradient(135deg, var(--rn-accent), var(--rn-primary));
    color: #fff;
}

.rn-grf-head-red {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
}

.rn-grf-card-body {
    padding: 16px;
}

.rn-grf-radar-body {
    max-width: 500px;
    margin: 0 auto;
}

/* ── Rank rows ────────────────────────────────────────────────── */
.rn-grf-rank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rn-warm);
}

.rn-grf-rank-row:last-child {
    border-bottom: none;
}

.rn-grf-rank-no {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rn-grf-rank-info {
    flex: 1;
    min-width: 0;
}

.rn-grf-rank-kode {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-right: 6px;
}

.rn-grf-rank-lbl {
    font-size: 12px;
    color: #374151;
}

.rn-grf-rank-val {
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.rn-grf-all-good {
    padding: 20px;
    text-align: center;
    color: var(--rn-accent);
    font-size: 13px;
}

/* ── Alert ────────────────────────────────────────────────────── */
.rn-grf-alert {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 24px;
}

.rn-grf-alert i {
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

.rn-grf-alert-info {
    background: var(--rn-soft);
    border-color: #bbf7d0;
    border-left-color: var(--rn-primary);
    color: #065f46;
}

.rn-grf-alert-sub {
    font-size: 12px;
}

.rn-grf-alert-note {
    font-size: 12px;
    color: #92400e;
}

/* ================================================================
   RSUPP BETUN — GALERI VIDEO (galerivideo.php)
   Hero pakai class .rn-dok-hero yang sudah ada.
   Tambahkan blok ini di akhir rn-theme.css.
   ================================================================ */

.rn-gv-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-gv-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(20, 48, 35, .07);
    height: 100%;
    transition: transform .2s, box-shadow .2s;
}

.rn-gv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(20, 48, 35, .13);
}

.rn-gv-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.rn-gv-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.rn-gv-card-body {
    padding: 16px 18px;
}

.rn-gv-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rn-ink);
    margin: 0;
    line-height: 1.4;
}

/* ================================================================
   RSUPP BETUN — GALERI FOTO (galerifoto.php)
   ================================================================ */

.rn-gf-body {
    background: transparent;
    padding: 48px 0 72px;
    position: relative;
    z-index: 1;
}

.rn-gf-intro {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(20, 48, 35, .06);
    margin-bottom: 32px;
    border-left: 5px solid var(--rn-primary);
    padding: 22px 26px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.rn-gf-intro i {
    font-size: 28px;
    color: #E1306C;
    flex-shrink: 0;
    margin-top: 2px;
}

.rn-gf-intro-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--rn-ink);
    margin-bottom: 6px;
}

.rn-gf-intro-text {
    font-size: 13px;
    color: var(--rn-ink-soft);
    line-height: 1.7;
    margin: 0;
}

.rn-gf-intro-text a {
    color: var(--rn-primary);
    font-weight: 600;
    text-decoration: none;
}

.rn-gf-intro-text a:hover {
    text-decoration: underline;
}

.rn-gf-embed-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.rn-gf-cta {
    text-align: center;
}

.rn-gf-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    padding: 12px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: opacity .2s, transform .2s;
}

.rn-gf-cta-btn:hover {
    opacity: .9;
    transform: translateY(-2px);
    color: #fff;
}

/* ── Home Berita: kolom judul + featured/list layout ────────────── */
.rn-news-col-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--rn-ink);
    margin-bottom: 14px;
}

.rn-news-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eef1f0;
    box-shadow: 0 2px 10px rgba(20, 48, 35, .05);
    padding: 18px;
}


/* ── Hero homepage: satu rasio untuk semua layar ── */
.rn-hero {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
}

@media (max-width: 768px) {
    .rn-hero {
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }
}

.rn-hero-slide {
    background-size: cover !important;   /* rasio sama, jadi tidak ada yang terpotong */
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ── Hero homepage di HP: teks dikecilkan agar muat di tinggi gambar ── */
@media (max-width: 768px) {
    .rn-hero-inner {
        padding: 14px 0 34px;    /* sisakan ruang bawah untuk widget yang menimpa */
    }

    .rn-hero-badge {
        font-size: 9px;
        padding: 3px 9px;
        margin-bottom: 6px;
    }

    .rn-hero-title {
        font-size: 1.15rem;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .rn-hero-sub {
        font-size: 10.5px;
        line-height: 1.4;
        margin-bottom: 0;
    }
}

/* ── Navbar di HP: tombol hamburger tetap sejajar dengan logo ── */
@media (max-width: 991px) {
    #mainNav .rn-brand {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 8px;
        gap: 8px;
        white-space: normal;      /* menimpa nowrap bawaan Bootstrap */
    }

    #mainNav .rn-brand-text {
        min-width: 0;
    }

    #mainNav .rn-brand-name {
        font-size: 12.5px;
        line-height: 1.2;
        white-space: normal;
    }

    #mainNav .rn-brand-sub {
        font-size: 8px;
        letter-spacing: .4px;
        white-space: normal;
    }

    #mainNav .navbar-toggler {
        flex-shrink: 0;           /* tombol tidak boleh menyusut atau turun */
    }
}

@media (max-width: 360px) {
    #mainNav .rn-brand-sub {
        display: none;
    }
}

/* ── Hero: persempit ke 80%, motif tenun mengisi sisi kiri-kanan ── */
.rn-hero {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.rn-hero::before,
.rn-hero::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12.5%;
    background-image: url('../images/ten1.png');
    background-repeat: no-repeat;
    background-size: auto 100px;
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.rn-hero::before {
    right: 100%;
    background-position: right top;
}

.rn-hero::after {
    left: 100%;
    background-position: left top;
}


/* ═══ Galeri Foto (manual) ═══ */
.rn-gf-body{padding:40px 0 64px;background:#fff}
.rn-gf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rn-gf-item{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#e8efe9}
.rn-gf-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.rn-gf-item:hover img{transform:scale(1.06)}
.rn-gf-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:13px;line-height:1.3;
  background:linear-gradient(to top,rgba(20,48,35,.85),transparent);opacity:0;transition:opacity .25s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rn-gf-item:hover .rn-gf-cap,.rn-gf-item:focus .rn-gf-cap{opacity:1}
.rn-gf-empty{text-align:center;color:#64748b;padding:40px 0}
.rn-gf-cta{text-align:center;margin-top:36px}
.rn-gf-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;background:#1E4635;color:#fff;font-weight:600;text-decoration:none}
.rn-gf-btn:hover{background:#143023;color:#fff}
.rn-gf-lb{position:fixed;inset:0;z-index:2000;background:rgba(10,20,15,.92);display:flex;align-items:center;justify-content:center}
.rn-gf-lb[hidden]{display:none}
.rn-gf-lb figure{margin:0;max-width:90vw;text-align:center;color:#fff}
.rn-gf-lb figure img{max-width:90vw;max-height:78vh;border-radius:8px;object-fit:contain}
.rn-gf-lb figcaption{margin-top:10px;font-size:14px}
.rn-gf-lb figure a{display:inline-block;margin-top:8px;color:#fff;font-size:13px;opacity:.85}
.rn-gf-lb-x,.rn-gf-lb-nav{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer}
.rn-gf-lb-x{top:16px;right:16px;font-size:28px}
.rn-gf-lb-prev{left:12px}.rn-gf-lb-next{right:12px}
@media (max-width:991px){.rn-gf-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:575px){.rn-gf-grid{grid-template-columns:repeat(2,1fr);gap:8px}.rn-gf-cap{opacity:1;font-size:11px;padding:20px 8px 6px}}

/* ═══ Foto di dalam isi berita ═══ */
.rn-brtd-content img{max-width:100%;height:auto;border-radius:12px}
.rn-brtd-content figure.image{display:block;margin:24px auto;text-align:center;max-width:100%}
.rn-brtd-content figure.image img{display:block;margin:0 auto;box-shadow:0 2px 12px rgba(20,48,35,.12)}
.rn-brtd-content figure.image figcaption{margin-top:8px;font-size:13px;color:#64748b;font-style:italic;line-height:1.4}
.rn-brtd-content img.rn-img-full{width:100%}
.rn-brtd-content img.rn-img-md{width:70%}
.rn-brtd-content p>img{margin:8px 0}
@media (max-width:575px){.rn-brtd-content img.rn-img-md{width:100%}}

/* ═══ Galeri Foto — daftar album (tambahan) ═══ */
.rn-gf-albums{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rn-gf-album{display:block;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 2px 12px rgba(20,48,35,.08);transition:transform .25s,box-shadow .25s}
.rn-gf-album:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(20,48,35,.16)}
.rn-gf-album-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e8efe9}
.rn-gf-album-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.rn-gf-album:hover .rn-gf-album-img img{transform:scale(1.05)}
.rn-gf-album-count{position:absolute;right:10px;bottom:10px;background:rgba(20,48,35,.8);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px}
.rn-gf-album-info{padding:14px 16px 16px}
.rn-gf-album-info h3{margin:0 0 6px;font-size:17px;font-weight:700;color:#143023;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rn-gf-album-info span{font-size:13px;color:#64748b}
.rn-gf-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:#1E4635;font-weight:600;text-decoration:none;font-size:14px}
.rn-gf-back:hover{color:#143023}
.rn-gf-desc{color:#475569;margin:0 0 22px;max-width:760px}
@media (max-width:991px){.rn-gf-albums{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.rn-gf-albums{grid-template-columns:1fr}}

/* ═══ Home — Galeri Foto (carousel) ═══ */
.rn-gfh-wrap{position:relative}
.rn-gfh-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 8px}
.rn-gfh-track::-webkit-scrollbar{display:none}
.rn-gfh-slide{position:relative;flex:0 0 calc((100% - 48px) / 4);aspect-ratio:4/3;border-radius:16px;overflow:hidden;scroll-snap-align:start;background:#e8efe9;display:block}
.rn-gfh-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.rn-gfh-slide:hover img{transform:scale(1.06)}
.rn-gfh-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;font-size:14px;font-weight:600;line-height:1.3;
  background:linear-gradient(to top,rgba(20,48,35,.88),transparent);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rn-gfh-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#1E4635;
  box-shadow:0 4px 14px rgba(20,48,35,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.rn-gfh-nav:hover{background:#1E4635;color:#fff}
.rn-gfh-prev{left:-12px}.rn-gfh-next{right:-12px}
@media (max-width:991px){.rn-gfh-slide{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:575px){
  .rn-gfh-slide{flex-basis:82%}
  .rn-gfh-nav{display:none}
}
.rn-gfh-count{position:absolute;top:10px;right:10px;background:rgba(20,48,35,.8);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px}

/* ═══ Dashboard Poliklinik & Kamar — redesign v2 ═══ */
.rn-dashboard{background:#f3f5f1;border-top:1px solid #e1e8e2;border-bottom:1px solid #e1e8e2}
.rn-dashboard .rn-section-head{text-align:center!important;margin-bottom:34px}
.rn-dashboard .rn-section-sub{margin:8px auto 0!important;max-width:540px}

.rn-dash-panel{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid #dde5df;border-radius:12px;overflow:hidden}
.rn-dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:24px 28px 18px}
.rn-dash-head h3{margin:0;font-size:28px;font-weight:400;line-height:1.1;color:#143023}
.rn-dash-head p{margin:6px 0 0;font-size:13px;color:#6b7a70}

.rn-dash-tablewrap{flex:1;display:flex;flex-direction:column}
.rn-dash-tablewrap .rn-dash-table{flex:1}
.rn-dash-table{width:100%;border-collapse:collapse}
.rn-dash-table th{padding:14px 28px 10px;text-align:left;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#7b897f;border-bottom:1px solid #e8eee9}
.rn-dash-table td{padding:16px 28px;font-size:14.5px;color:#2c3a32;border-bottom:1px solid #eff3ef;vertical-align:middle}
.rn-dash-table tbody tr:last-child td{border-bottom:0}
.rn-dash-table tbody tr:hover td{background:#fafcfa}
.rn-dash-poli{font-weight:600;color:#143023;line-height:1.3}
.rn-dash-table th:nth-child(3),.rn-dash-table td:nth-child(3){padding-left:8px;padding-right:20px}
.rn-dash-jam{white-space:nowrap;font-variant-numeric:tabular-nums;color:#415247}
.rn-dash-days{display:flex;gap:3px;flex-wrap:nowrap}
.rn-day{min-width:27px;padding:3px 0;text-align:center;font-size:11px;font-weight:600;color:#c2ccc5;border-radius:5px}
.rn-day.on{color:#1E4635;background:#e6f0e9}

/* ── Kamar (panel gelap) ── */
.rn-dash-dark{background:#143023;border-color:#143023;color:#e8f0ea}
.rn-dash-motif{position:absolute;inset:0;background:url('../images/tenun.png') repeat;background-size:240px auto;opacity:.06;pointer-events:none}
.rn-dash-dark>*:not(.rn-dash-motif){position:relative;z-index:1}
.rn-dash-dark .rn-dash-head h3{color:#fff}
.rn-dash-dark .rn-dash-head p{color:#9db3a4}
.rn-dash-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#7ddba4;white-space:nowrap}
.rn-dash-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#7ddba4;animation:rnDashPulse 2s ease-in-out infinite}
@keyframes rnDashPulse{0%,100%{box-shadow:0 0 0 0 rgba(125,219,164,.5)}50%{box-shadow:0 0 0 6px rgba(125,219,164,0)}}

.rn-bed-sum{display:flex;align-items:center;gap:16px;margin:0 28px 10px;padding:16px 0 18px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.rn-bed-sum-num{font-size:56px;line-height:.9;color:#fff}
.rn-bed-sum-txt{font-size:13px;line-height:1.45;color:#b9cbbf}
.rn-bed-sum-txt b{display:block;font-size:15px;color:#fff;font-weight:600}

.rn-bed-list{flex:1;padding:4px 0}
.rn-bed-row{--c:#7ddba4;padding:13px 28px 12px}
.rn-bed-row:nth-child(6n+2){--c:#7cc4f0}
.rn-bed-row:nth-child(6n+3){--c:#f2c15b}
.rn-bed-row:nth-child(6n+4){--c:#b9a4f2}
.rn-bed-row:nth-child(6n+5){--c:#f2a0c4}
.rn-bed-row:nth-child(6n+6){--c:#5fd6d0}
.rn-bed-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rn-bed-name{font-size:15px;font-weight:600;color:#fff}
.rn-bed-free{font-size:26px;line-height:1;color:var(--c)}
.rn-bed-free small{font-family:inherit;font-size:12px;font-weight:500;color:#9db3a4;margin-left:5px}
.rn-bed-bar{height:5px;margin:10px 0 7px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
.rn-bed-bar span{display:block;height:100%;border-radius:99px;background:var(--c)}
.rn-bed-meta{display:flex;justify-content:space-between;font-size:12px;color:#9db3a4}
.rn-bed-row.is-low .rn-bed-meta span:last-child{color:#f2b84b;font-weight:600}
.rn-bed-row.is-full .rn-bed-meta span:last-child{color:#ff8f86;font-weight:600}

.rn-dash-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 28px;border-top:1px solid #e8eee9;background:#fafcfa;font-size:13px}
.rn-dash-foot a{font-weight:600;color:#1E4635;text-decoration:none}
.rn-dash-foot a:hover{text-decoration:underline}
.rn-dash-foot span{color:#7b897f}
.rn-dash-dark .rn-dash-foot{background:rgba(0,0,0,.18);border-top-color:rgba(255,255,255,.1)}
.rn-dash-dark .rn-dash-foot a{color:#fff}
.rn-dash-dark .rn-dash-foot span{color:#9db3a4}

@media (max-width:640px){
  .rn-dash-head,.rn-dash-foot,.rn-bed-row{padding-left:20px;padding-right:20px}
  .rn-bed-sum{margin-left:20px;margin-right:20px}
  .rn-dash-table thead{display:none}
  .rn-dash-table,.rn-dash-table tbody{display:block}
  .rn-dash-table tr{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:13px 20px;border-bottom:1px solid #eff3ef}
  .rn-dash-table td{padding:0;border:0}
  .rn-dash-table td.rn-dash-days-cell{grid-column:1/-1}
  .rn-dash-table td:nth-child(3){padding:0}
  .rn-dash-table tbody tr:hover td{background:none}
  .rn-day{flex:1}
  .rn-bed-sum-num{font-size:48px}
}

/* ═══ Judul semua section di tengah ═══ */
.rn-section-head-row{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center;
  gap:14px !important;
}
.rn-section-head-row .rn-title{margin-left:auto;margin-right:auto}
.rn-head-actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}

/* Motif tenun samping: ulangi ke bawah agar tidak terpotong di layar tinggi */
body::before,
.rn-body::before {
    background-repeat: repeat-y, repeat-y !important;
}

/* Hero kini 100% lebar: motif samping tidak punya ruang, matikan agar tidak melebarkan halaman */
.rn-hero::before,
.rn-hero::after {
    display: none !important;
}