/*
 * Template 2098 Health — RS Karitas Waitabula
 * tooplate-style.css v5 — Refactored & Bug Fixed
 * ─────────────────────────────────────────────
 * Perbaikan:
 *   1. Kontras teks light mode & dark mode diperbaiki menyeluruh
 *   2. .rsk-photo-label (icon+teks kanan bawah banner) DIHAPUS
 *   3. .rsk-slide-counter DIHAPUS
 *   4. Footer quicklink diberi class tersendiri
 *   5. Duplikasi CSS dihapus & dikonsolidasikan
 *   6. Seluruh kode dirapihkan & dikelompokkan per blok
 */

@import url(tooplate.css);


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
    --primary:       #0b3d91;
    --accent:        #42b2a6;
    --soft-bg:       #e0f7ff;
    --text-dark:     #1a1a1a;
    --text-body:     #2d3748;
    --text-muted:    #555;
    --white:         #ffffff;
    --dark-bg:       #0d1117;
    --dark-surface:  #161d2b;
    --dark-card:     #1e2433;
    --dark-border:   #2c3347;
    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-pill:   50px;
    --shadow-sm:     0 4px 12px rgba(0,0,0,0.08);
    --shadow-md:     0 8px 25px rgba(0,0,0,0.12);
    --shadow-lg:     0 12px 35px rgba(0,0,0,0.15);
    --transition:    0.3s ease;
    --bounce:        0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}


/* ============================================================
   2. BASE & RESET
   ============================================================ */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

html {
    /* JANGAN overflow:hidden di sini — akan mematikan position:sticky navbar */
    /* Horizontal scroll dicegah via body saja */
    max-width: 100%;
}
body {
    background: var(--soft-bg);
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    overflow-x: clip;   /* clip lebih aman dari hidden — tidak mematikan sticky */
    max-width: 100%;
    padding-top: 104px; /* topbar(40px) + navbar(64px) */
}

/* Jika ada topbar (40px) + navbar (64px) = 104px */
body.has-topbar {
    padding-top: 104px;
}

/* Smooth transition untuk dark mode */
body,
.rsk-navbar,
.rsk-topbar,
section,
header,
footer {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Sembunyikan header lama (diganti rsk-topbar) */
header { display: none !important; }

/* ── Global: cegah horizontal overflow di semua section ── */
/* Section & container: cegah horizontal overflow
   PENTING: .rsk-navbar TIDAK boleh ada di sini — akan mematikan position:sticky */
section,
.rsk-hero,
.rsk-footer,
.rsk-topbar,
.rsk-list-section,
.rsk-jadwal-section,
.rsk-team-section,
#edukasi,
#about,
#appointment,
#news,
#service,
#google-map {
    overflow-x: hidden;
    max-width: 100%;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 6px; }

/* Mobile menu default */
.rsk-mobile-menu { display: none; }
.rsk-mobile-menu.open { display: block; }


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
}
h1 { font-size: 4.5em; color: var(--primary); }
h2 { font-size: 3em;   color: var(--primary); }
h3 { font-size: 1.8em; color: var(--text-dark); }
h4 { font-size: 1.6em; color: var(--text-dark); }
p  { font-size: 15px;  line-height: 1.8; color: var(--text-body); }

a { transition: color var(--transition); }
a:hover { color: var(--accent); text-decoration: underline; }


/* ============================================================
   4. UTILITIES
   ============================================================ */
.text-align-right  { text-align: right; }
.text-align-center { text-align: center; }

.section-title     { padding-bottom: 20px; }
.section-title h2  { margin-top: 0; }

.border-top {
    border-top: 1px solid #e0e8f0;
    margin-top: 4em;
    padding-top: 2.5em;
}

#google-map {
    margin: 30px 0;
    padding: 0;
    line-height: 0;
    background: #eaf4ff;
    border-top: 3px solid #1e90ff;
    border-bottom: 3px solid #1e90ff;
}

/* Slider Bootstrap lama — sembunyikan */
.slider { display: none !important; }


/* ============================================================
   5. TOPBAR — Frosted Glass
   ============================================================ */
.rsk-topbar {
    /* Kaca buram di atas gradien biru gelap */
    background: linear-gradient(90deg,
        rgba(5,18,46,0.88)   0%,
        rgba(11,61,145,0.82) 55%,
        rgba(13,77,184,0.86) 100%);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100;
}

/* Kilau halus atas */
.rsk-topbar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.20) 40%,
        rgba(66,178,166,0.40) 60%,
        transparent 100%);
    pointer-events: none;
}

.rsk-topbar .container { height: 100%; }
.rsk-topbar .row       { height: 100%; margin: 0; display: flex; align-items: center; }

.rsk-topbar-left,
.rsk-topbar-right {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
}
.rsk-topbar-right { justify-content: flex-end; }

.rsk-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: color 0.2s ease, background 0.2s ease;
}
.rsk-topbar-item:first-child { border-left: none; }
.rsk-topbar-item:last-child  { border-right: none; }
.rsk-topbar-item i           { color: #42b2a6; font-size: 11px; flex-shrink: 0; }
.rsk-topbar-item:hover       { color: #fff; background: rgba(255,255,255,0.07); text-decoration: none; }

.rsk-topbar-clock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    height: 100%;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.90);
    border-left: 1px solid rgba(255,255,255,0.08);
}
.rsk-topbar-clock i { color: #42b2a6; font-size: 11px; }


/* ============================================================
   6. NAVBAR — Premium Frosted Glass
   ============================================================ */

/* ── Variabel khusus navbar ── */
:root {
    --nav-blur:        24px;
    --nav-saturate:    1.8;
    --nav-bg-light:    rgba(255,255,255,0.72);
    --nav-border-light: rgba(11,61,145,0.12);
    --nav-bg-dark:     rgba(8,13,28,0.72);
    --nav-border-dark: rgba(66,178,166,0.14);
}

.rsk-navbar {
    /* Efek kaca buram — transparan dengan blur kuat */
    background: var(--nav-bg-light);
    backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
    -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
    border-bottom: 1px solid var(--nav-border-light);
    /* Shadow multi-layer untuk kesan mengambang */
    box-shadow:
        0 1px 0   rgba(255,255,255,0.60) inset,  /* highlight atas */
        0 4px 6   rgba(11,61,145,0.04),
        0 8px 28  rgba(11,61,145,0.08),
        0 20px 60 rgba(11,61,145,0.06);
    padding: 0;
    position: fixed;   /* fixed lebih andal dari sticky di Android WebView */
    top: 40px; /* di bawah topbar */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        backdrop-filter 0.35s ease;
}

/* Saat scroll — lebih gelap sedikit & shadow lebih kuat */
.rsk-navbar.scrolled {
    background: rgba(255,255,255,0.82);
    box-shadow:
        0 1px 0   rgba(255,255,255,0.70) inset,
        0 4px 8   rgba(11,61,145,0.06),
        0 12px 36 rgba(11,61,145,0.12),
        0 24px 64 rgba(11,61,145,0.08);
    border-bottom-color: rgba(11,61,145,0.16);
}

/* Garis pelangi tipis di bawah navbar */
.rsk-navbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(11,61,145,0)   0%,
        rgba(66,178,166,0.6) 30%,
        rgba(11,61,145,0.8)  60%,
        rgba(66,178,166,0.4) 80%,
        rgba(11,61,145,0)   100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.rsk-navbar.scrolled::after { opacity: 1; }

.rsk-navbar .container {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 0;
}

/* ── Brand ── */
.rsk-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 18px;
}
.rsk-brand:hover { text-decoration: none; }

.rsk-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0b3d91, #0d52c0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    /* Glassmorphism pada icon */
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.15) inset,
        0 4px 14px rgba(11,61,145,0.35);
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rsk-brand:hover .rsk-brand-icon {
    transform: scale(1.05) rotate(-3deg);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.25) inset,
        0 6px 20px rgba(11,61,145,0.45);
}

.rsk-brand-text    { line-height: 1.2; }
.rsk-brand-name    { display: block; font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 700; color: #0b3d91; letter-spacing: -0.3px; }
.rsk-brand-tagline { display: block; font-size: 9.5px; color: #42b2a6; font-weight: 500; letter-spacing: 0.3px; }

/* ── Nav links desktop ── */
.rsk-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    gap: 1px;
}

.rsk-nav li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #3a4a6a;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: all 0.22s ease;
    /* Glassmorphism pada link saat hover */
    background: transparent;
}
.rsk-nav li a i { font-size: 12px; color: #42b2a6; transition: color 0.2s ease, transform 0.2s ease; }

.rsk-nav li a:hover {
    background: rgba(11,61,145,0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #0b3d91;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(11,61,145,0.10) inset;
    transform: translateY(-1px);
}
.rsk-nav li a:hover i { color: #0b3d91; transform: scale(1.15); }

/* ── Active: halaman/section yang sedang aktif ── */
.rsk-nav li.active > a {
    background: linear-gradient(135deg, rgba(11,61,145,0.10), rgba(66,178,166,0.10));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #0b3d91;
    font-weight: 600;
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(11,61,145,0.15) inset,
        0 3px 10px rgba(11,61,145,0.08);
}
.rsk-nav li.active > a i {
    color: #0b3d91;
    transform: scale(1.1);
}

/* Garis bawah gradien — satu-satunya indikator aktif */
.rsk-nav li.active > a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 10px;
    right: 10px;
    height: 2.5px;
    background: linear-gradient(90deg, #0b3d91, #42b2a6);
    border-radius: 2px;
    animation: rskNavActiveBar 0.25s ease forwards;
}
@keyframes rskNavActiveBar {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* Tidak ada dot */
.rsk-nav li.active > a::before { display: none; }

/* ── Dark mode navbar active/hover ── */
body.dark-mode .rsk-nav li a { color: #8aaccc; }
body.dark-mode .rsk-nav li a i { color: #42b2a6; }
body.dark-mode .rsk-nav li a:hover {
    background: rgba(66,178,166,0.10);
    color: #a8d4f8;
    box-shadow: 0 0 0 1px rgba(66,178,166,0.15) inset;
}
body.dark-mode .rsk-nav li a:hover i { color: #56c8bc; }
body.dark-mode .rsk-nav li.active > a {
    background: linear-gradient(135deg, rgba(66,178,166,0.15), rgba(100,160,255,0.12));
    color: #c4dff8;
    font-weight: 600;
    box-shadow:
        0 0 0 1px rgba(66,178,166,0.20) inset,
        0 3px 10px rgba(0,0,0,0.20);
}
body.dark-mode .rsk-nav li.active > a i { color: #42b2a6; }

/* ── Aksi navbar ── */
.rsk-navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Tombol dark mode — glass pill ── */
.rsk-dark-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(11,61,145,0.15);
    background: rgba(11,61,145,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #0b3d91;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.rsk-dark-btn:hover {
    background: #0b3d91;
    color: #fff;
    border-color: #0b3d91;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(11,61,145,0.35), 0 0 0 1px rgba(255,255,255,0.15) inset;
}

/* ── Hamburger ── */
.rsk-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(11,61,145,0.18);
    background: rgba(255,255,255,0.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-appearance: none;
    appearance: none;
    min-width: 44px;
    min-height: 44px;
    position: relative;
    z-index: 1001;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    pointer-events: auto;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
}
.rsk-hamburger:hover        { background: rgba(11,61,145,0.09); box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 4px 12px rgba(11,61,145,0.12); }
.rsk-hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rsk-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #0b3d91;
    border-radius: 2px;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease, width 0.28s ease;
}
.rsk-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.rsk-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.rsk-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile menu — full frosted glass ── */
.rsk-mobile-menu {
    display: none;
    position: fixed;
    top: 104px; /* topbar(40) + navbar(64) */
    left: 0;
    right: 0;
    /* Kaca buram penuh */
    background: rgba(240,247,255,0.82);
    backdrop-filter: blur(28px) saturate(2.0);
    -webkit-backdrop-filter: blur(28px) saturate(2.0);
    border-top: 1px solid rgba(11,61,145,0.10);
    border-bottom: 1px solid rgba(11,61,145,0.10);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.55) inset,
        0 8px 40px rgba(11,61,145,0.16),
        0 24px 80px rgba(11,61,145,0.10);
    padding: 8px 0;
    z-index: 1000;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}
.rsk-mobile-menu.open {
    display: block;
    animation: menuSlideDown 0.28s cubic-bezier(0.23,1,0.32,1) both;
}

@keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rsk-mobile-menu ul     { list-style: none; margin: 0; padding: 0; }
.rsk-mobile-menu li     { list-style: none; border-bottom: 1px solid rgba(11,61,145,0.06); }
.rsk-mobile-menu li:last-child { border-bottom: none; }
.rsk-mobile-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #3a4a6a;
    text-decoration: none;
    transition: all 0.2s ease;
}
.rsk-mobile-menu li a i  { color: #42b2a6; font-size: 14px; width: 18px; text-align: center; }
.rsk-mobile-menu li a:hover {
    background: rgba(11,61,145,0.06);
    color: #0b3d91;
    text-decoration: none;
    padding-left: 32px;
}
/* Mobile active */
.rsk-mobile-menu li.active > a {
    background: linear-gradient(90deg, rgba(11,61,145,0.08), rgba(66,178,166,0.06));
    color: #0b3d91;
    font-weight: 600;
    border-left: 3px solid #42b2a6;
    padding-left: 21px;   /* 24px - 3px border */
}
.rsk-mobile-menu li.active > a i {
    color: #0b3d91;
    transform: scale(1.12);
}
/* Dot kecil di kanan */
/* Panah kecil di kanan — pengganti dot */
.rsk-mobile-menu li.active > a::after {
    content: '›';
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #42b2a6;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}

body.dark-mode .rsk-mobile-menu li.active > a {
    background: linear-gradient(90deg, rgba(66,178,166,0.12), rgba(100,160,255,0.08));
    color: #c4dff8;
    border-left-color: #42b2a6;
}
body.dark-mode .rsk-mobile-menu li.active > a i { color: #42b2a6; }


/* ============================================================
   7. NAVBAR BOOTSTRAP (halaman non-rsk-navbar)
   ============================================================ */
.navbar-default {
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(11,61,145,0.09);
    border: none;
    border-bottom: 1px solid rgba(11,61,145,0.08);
    min-height: 72px;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
.navbar-default .container        { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.navbar-default .navbar-header    { display: flex; align-items: center; }
.navbar-default .navbar-brand     { color: var(--primary); font-weight: 600; font-size: 1.6em; padding: 0; line-height: 1.1; }
.navbar-default .navbar-brand .fa { color: var(--accent); margin-right: 10px; }

.navbar-default .navbar-nav li a {
    color: #3a4a6a;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    position: relative;
}
.navbar-default .navbar-nav li a::after {
    content: '';
    position: absolute;
    left: 15px;
    bottom: 5px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #42b2a6, #0b3d91);
    border-radius: 2px;
    transition: width var(--transition);
}
.navbar-default .navbar-nav li a:hover       { background: rgba(11,61,145,0.08); color: #0b3d91; }
.navbar-default .navbar-nav li a:hover::after { width: calc(100% - 30px); }
.navbar-default .navbar-toggle .icon-bar     { background: var(--primary); }
.navbar          { padding-top: 8px; padding-bottom: 8px; }
.navbar-nav > li { display: inline-flex; align-items: center; }

/* Dark toggle lama */
.dark-toggle {
    border: 1px solid rgba(11,61,145,0.15);
    background: rgba(11,61,145,0.06);
    color: #0b3d91;
    font-size: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.dark-toggle:hover { background: #0b3d91; color: #fff; border-color: #0b3d91; transform: scale(1.1); }


/* ============================================================
   8. SECTIONS UMUM
   ============================================================ */
#about, #team, #news, #news-detail {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
#news, #service { text-align: center; }

.profile img, .profile figcaption { display: inline-block; vertical-align: top; margin-top: 1em; }
.profile img      { border-radius: 100%; width: 65px; height: 65px; margin-right: 1em; }
.profile figcaption h3 { margin-top: 0; }
#about h6         { color: #858585; margin: 0; }


/* ============================================================
   9. CARDS
   ============================================================ */
.team-thumb,
.news-ads {
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}
.team-thumb:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.author {
    display: flex;
    align-items: center;
    border-top: 1px solid #e8f0f8;
    padding-top: 1.5em;
    margin-top: 2em;
}
.author img         { border-radius: 100%; width: 50px; height: 50px; margin-right: 10px; }
.author .author-info { flex: 1; }
.author-info h5      { margin-bottom: 0; }


/* ============================================================
   10. SERVICE
   ============================================================ */
#service { background: linear-gradient(135deg, #e0f7ff, #c0f0ff); }
#service h2, #service h4 { color: var(--primary); }
#service p  { color: var(--text-muted); }
#service .fa {
    background: rgba(255,255,255,0.3);
    color: var(--accent);
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    font-size: 48px;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}


/* ============================================================
   11. NEWS
   ============================================================ */
#news, #news-detail { background: #f9f9f9; }
#news-detail blockquote { margin: 30px 0; }

.news-detail-thumb .news-image img { border-radius: 10px; }
.news-detail-thumb h3  { margin-bottom: 8px; }
.news-image            { margin-bottom: 30px; position: relative; }
.news-image img        { width: 100%; }
.news-detail-thumb ul  { margin: 32px 12px 22px 0; }
.news-detail-thumb ul li { list-style: circle; font-weight: normal; padding: 6px 12px 6px 0; }
.news-sidebar          { margin-top: 16px; }

.news-social-share             { text-align: center; padding-top: 22px; }
.news-social-share .btn        { border-radius: 100px; font-size: 10px; font-weight: 600; margin: 2px 6px; padding: 8px 14px; }
.news-social-share .btn-primary { background: #3b5998 !important; }
.news-social-share .btn-success { background: #1da1f2 !important; }
.news-social-share .btn-danger  { background: #dd4b39 !important; }
.news-social-share a .fa       { padding-right: 4px; }

.recent-post              { padding: 2px 0 18px; }
.recent-post .media img   { border-radius: 100%; width: 80px; height: 80px; margin-right: 5px; }
.recent-post .media-heading { font-size: 16px; font-weight: 500; line-height: inherit; margin-top: 5px; }
.news-categories          { margin-top: 8px; }
.news-categories li a     { color: #2b2b2b; }

.news-ads             { background: #fff; border-right: 4px solid #2b2b2b; padding: 42px; text-align: center; margin: 26px 0; }
.news-ads.sidebar-ads { border-left: 4px solid #2b2b2b; border-right: 0; }
.news-ads h4          { font-size: 18px; }

.news-categories li, .news-tags li { list-style: none; display: inline-block; margin: 4px; }
.news-tags h4    { padding-bottom: 6px; }
.news-tags li a  { background: #393939; border-radius: 50px; color: #fff; display: inline-block; font-size: 12px; font-weight: 500; float: left; min-width: 30px; padding: 6px 12px; transition: all ease-in-out 0.4s; }
.news-tags li a:hover { background: #4267b2; }


/* ============================================================
   12. BUTTONS
   ============================================================ */
.btn {
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform var(--bounce), box-shadow var(--bounce), filter var(--transition);
}

/* Shine sweep */
.btn::after,
.section-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
    z-index: -1;
}
.btn:hover::after,
.section-btn:hover::after { left: 100%; }

/* Primary / section btn */
.btn-primary,
.section-btn,
#appointment button#cf-submit {
    background: linear-gradient(135deg, var(--accent), var(--primary)) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(11,61,145,0.2) !important;
}
.btn-primary:hover,
.section-btn:hover,
#appointment button#cf-submit:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 25px rgba(66,178,166,0.3), 0 8px 15px rgba(11,61,145,0.2) !important;
    filter: brightness(1.05);
    cursor: pointer;
}
.btn-primary:active,
.section-btn:active,
#appointment button#cf-submit:active {
    transform: translateY(-1px) scale(0.97);
    box-shadow: 0 4px 10px rgba(11,61,145,0.3) !important;
}

/* Danger / Success */
.btn-danger  { background: linear-gradient(135deg, #ff7675, #d63031) !important; border: none !important; color: var(--white) !important; border-radius: 10px; font-weight: 600; box-shadow: 0 4px 12px rgba(214,48,49,0.2) !important; }
.btn-success { background: linear-gradient(135deg, #55efc4, #00b894) !important; border: none !important; color: var(--white) !important; border-radius: 10px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,184,148,0.2) !important; }
.btn-danger:hover,
.btn-success:hover { transform: translateY(-4px) scale(1.03); filter: brightness(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important; }
.btn-danger:active,
.btn-success:active { transform: translateY(-1px) scale(0.97); }

/* Warning */
.btn-warning { background: linear-gradient(135deg, var(--accent), var(--primary)) !important; color: var(--white) !important; border: none !important; border-radius: var(--radius-pill) !important; padding: 12px 35px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 5px 15px rgba(11,61,145,0.2) !important; }
.btn-warning:hover  { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 20px rgba(11,61,145,0.3) !important; filter: brightness(1.1); }
.btn-warning:active { transform: scale(0.95) translateY(2px) !important; box-shadow: 0 2px 5px rgba(11,61,145,0.3) !important; filter: brightness(0.9); }

.btn-secondary { background: #e0e0e0; color: #333; }

/* News-info button */
.news-info .btn        { margin-top: 15px; border-radius: 10px; padding: 10px 24px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.news-info .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(66,178,166,0.3); }

/* Section buttons centered */
.text-align-center .section-btn {
    display: inline-block;
    margin: 0 10px 15px;
    padding: 14px 35px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.text-align-center .btn-default       { background: var(--white); color: var(--primary); border: 2px solid var(--primary); }
.text-align-center .btn-default:hover { background: var(--primary); color: var(--white); transform: translateY(-3px); }

/* Search dokter */
#doctor-praktek-pencarian .btn {
    background: linear-gradient(135deg, var(--primary), #082d6b) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 30px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(11,61,145,0.2) !important;
    transition: all var(--transition) !important;
}
#doctor-praktek-pencarian .btn:hover { transform: scale(1.05); filter: brightness(1.2); box-shadow: 0 6px 15px rgba(11,61,145,0.3) !important; }

#doctor-praktek-pencarian input[type="text"],
#carikeyword input[type="text"] {
    border-radius: var(--radius-pill) !important;
    padding-left: 20px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: all var(--transition);
}
#doctor-praktek-pencarian input[type="text"]:focus,
#carikeyword input[type="text"]:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 8px rgba(66,178,166,0.2) !important;
    outline: none;
}


/* ============================================================
   13. PRE-LOADER
   ============================================================ */
.preloader { position: fixed; inset: 0; z-index: 99999; display: flex; justify-content: center; align-items: center; background: #fff; }
.spinner   { border: 1px solid transparent; border-radius: 3px; position: relative; }
.spinner::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 1px solid #575757;
    border-top-color: #fff;
    animation: spinner 0.9s linear infinite;
}
@keyframes spinner { to { transform: rotate(360deg); } }


/* ============================================================
   14. APPOINTMENT
   ============================================================ */
#appointment              { padding-top: 100px; }
#appointment label        { color: #393939; font-weight: 500; }
#appointment .form-control { background: #f9f9f9; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; margin-bottom: 15px; transition: all ease-in-out 0.4s; }
#appointment input,
#appointment select       { height: 45px; }
#appointment button#cf-submit { height: 55px; }


/* ============================================================
   15. TEAM / DOKTER
   ============================================================ */
.team-thumb {
    background-color: #f9f9f9;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.team-thumb:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.team-thumb .foto-dokter-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.team-thumb .foto-dokter-wrap img,
.team-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.team-info              { padding: 20px 30px 0; }
.team-contact-info      { border-top: 1px solid #e9e9e9; padding-top: 1.2em; margin-top: 1.5em; }
.team-contact-info .fa  { margin-right: 5px; display: inline-block; }
.team-contact-info p    { margin-bottom: 2px; color: #555; }
.team-contact-info a    { color: #757575; }

.team-thumb .social-icon li   { font-weight: 500; }
.team-thumb .social-icon li a { background: #fff; border-radius: 100%; font-size: 20px; width: 50px; height: 50px; line-height: 50px; margin: 0 2px; }
.team-thumb .social-icon      { opacity: 0; transform: translateY(100%); transition: 0.5s 0.2s; text-align: center; position: relative; top: 0; }
.team-thumb:hover .social-icon { opacity: 1; transition-delay: 0.3s; transform: translateY(0); top: -22em; }

.card-dokter        { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease; }
.card-dokter:hover  { transform: translateY(-5px); }
.card-dokter img    { width: 100%; height: 260px; object-fit: contain; background: #f8f8f8; padding: 0; }
.card-body          { padding: 15px; }
.card-body h3       { margin-top: 0; font-size: 18px; font-weight: 600; color: #1a2a4a; }
.spesialis          { color: #00bcd4; font-weight: 500; }


/* ============================================================
   16. JADWAL PRAKTEK DOKTER — Elegant Professional
   ============================================================ */

/* ── Section wrapper ── */
.rsk-jadwal-section {
    padding: 100px 0 110px;
    background: linear-gradient(170deg, #eaf4ff 0%, #f0f9ff 40%, #eaf8f6 100%);
    position: relative;
    overflow: hidden;
}

/* Dekorasi latar */
.rsk-jadwal-bg-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 8%  30%, rgba(66,178,166,0.07) 0%, transparent 38%),
        radial-gradient(circle at 92% 70%, rgba(11,61,145,0.06)  0%, transparent 38%),
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.5) 0%, transparent 50%);
}

/* ── Header ── */
.rsk-jadwal-header {
    text-align: center;
    margin-bottom: 48px;
}

.rsk-jadwal-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #42b2a6;
    margin-bottom: 18px;
}
.rsk-jadwal-label-line {
    display: block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #42b2a6);
}
.rsk-jadwal-label-line--r {
    background: linear-gradient(90deg, #42b2a6, transparent);
}
.rsk-jadwal-label i { font-size: 12px; }

.rsk-jadwal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.8em;
    font-weight: 700;
    color: #0c1e3e;
    margin: 0 0 14px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.rsk-jadwal-title-accent {
    color: #0b3d91;
    position: relative;
}
.rsk-jadwal-title-accent::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0b3d91, #42b2a6);
    border-radius: 2px;
}

.rsk-jadwal-subtitle {
    font-size: 15px;
    color: #5a6a82;
    margin: 0;
    line-height: 1.7;
}

/* ── Stats bar ── */
.rsk-jadwal-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #fff;
    border-radius: 16px;
    padding: 20px 40px;
    margin-bottom: 36px;
    box-shadow: 0 4px 20px rgba(11,61,145,0.08), 0 0 0 1px rgba(11,61,145,0.06);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.rsk-jadwal-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 32px;
}

.rsk-stat-icon {
    font-size: 22px;
    color: #42b2a6;
    flex-shrink: 0;
}

.rsk-jadwal-stat div {
    display: flex;
    flex-direction: column;
}

.rsk-stat-num {
    font-size: 24px;
    font-weight: 800;
    color: #0b3d91;
    line-height: 1;
}

.rsk-stat-label {
    font-size: 11px;
    color: #8a9ab8;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.rsk-jadwal-stat-div {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(11,61,145,0.12), transparent);
}

/* ── Card tabel ── */
.rsk-jadwal-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 2px 8px  rgba(11,61,145,0.05),
        0 12px 40px rgba(11,61,145,0.10),
        0 0 0 1px  rgba(11,61,145,0.06);
}

.rsk-jadwal-card-bar {
    height: 4px;
    background: linear-gradient(90deg, #0b3d91 0%, #42b2a6 50%, #0b3d91 100%);
    background-size: 200% 100%;
    animation: rskBarShift 4s linear infinite;
}
@keyframes rskBarShift {
    0%   { background-position: 0%   0%; }
    100% { background-position: 200% 0%; }
}

/* ── Tabel — override & extend ── */
#news .table-jadwal,
#news .table-jadwal th,
#news .table-jadwal td { text-align: left; }

.table-jadwal {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.table-jadwal thead tr {
    background: linear-gradient(135deg, #0b3d91 0%, #1250c4 60%, #42b2a6 100%);
}
.table-jadwal thead th {
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 18px 22px;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
    text-align: left;
}
.table-jadwal thead th i {
    margin-right: 8px;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
}

.table-jadwal tbody tr {
    border-bottom: 1px solid #edf2fb;
    transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.table-jadwal tbody tr:last-child       { border-bottom: none; }
.table-jadwal tbody tr:nth-child(odd)   { background-color: #ffffff; }
.table-jadwal tbody tr:nth-child(even)  { background-color: #f5f9ff; }
.table-jadwal tbody tr:hover {
    background: linear-gradient(90deg, #eaf6ff, #f0faf8) !important;
    box-shadow: inset 4px 0 0 #42b2a6, 0 2px 12px rgba(11,61,145,0.07);
    transform: translateX(3px);
    position: relative;
    z-index: 1;
}

/* Kolom umum */
.table-jadwal tbody td {
    padding: 15px 22px;
    font-size: 13.5px;
    color: #2d3748;
    border: none;
    vertical-align: middle;
    text-align: left;
    line-height: 1.5;
}

/* Nama dokter */
.rsk-td-nama {
    font-weight: 700 !important;
    color: #0b3d91 !important;
    font-size: 14px !important;
}

/* Hari */
.rsk-td-hari {
    color: #4a5a7a !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Jam pagi */
.rsk-td-jam {
    font-weight: 700 !important;
    color: #0b3d91 !important;
    font-size: 13.5px !important;
    font-family: 'Courier New', monospace !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

/* Jam sore/malam — warna berbeda */
.rsk-td-jam.rsk-jam--sore {
    color: #c05a00 !important;
}

/* Badge poliklinik */
.rsk-poli {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.rsk-poli i { font-size: 10px; }

.rsk-poli--umum   { background: rgba(66,178,166,0.12);  color: #0a7a70; }
.rsk-poli--bedah  { background: rgba(220,50,50,0.10);   color: #b22020; }
.rsk-poli--dalam  { background: rgba(220,80,0,0.10);    color: #b24000; }
.rsk-poli--saraf  { background: rgba(100,60,200,0.10);  color: #5030a0; }
.rsk-poli--anak   { background: rgba(0,160,220,0.12);   color: #006fa0; }
.rsk-poli--obgyn  { background: rgba(220,60,150,0.10);  color: #a0206a; }
.rsk-poli--mata   { background: rgba(0,130,180,0.12);   color: #005f90; }
.rsk-poli--tht    { background: rgba(180,120,0,0.12);   color: #7a5000; }
.rsk-poli--gigi   { background: rgba(60,130,60,0.12);   color: #2a6a2a; }
.rsk-poli--fisio  { background: rgba(11,61,145,0.10);   color: #0b3d91; }

/* Footer kartu */
.rsk-jadwal-card-footer {
    padding: 14px 24px;
    background: linear-gradient(90deg, #f0f7ff, #f0faf8);
    border-top: 1px solid #e8f0fb;
    font-size: 12px;
    color: #7a8aaa;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rsk-jadwal-card-footer i { color: #42b2a6; font-size: 13px; }

/* ── Dark mode ── */
body.dark-mode .rsk-jadwal-section {
    background: linear-gradient(170deg, #080e1a 0%, #0a1018 40%, #080e14 100%) !important;
}
body.dark-mode .rsk-jadwal-title         { color: #dde8f8 !important; }
body.dark-mode .rsk-jadwal-title-accent  { color: #7ab8f7 !important; }
body.dark-mode .rsk-jadwal-title-accent::after {
    background: linear-gradient(90deg, #7ab8f7, #42b2a6);
}
body.dark-mode .rsk-jadwal-subtitle      { color: #88a4c0 !important; }
body.dark-mode .rsk-jadwal-label         { color: #42b2a6 !important; }

body.dark-mode .rsk-jadwal-stats {
    background: #1a2235;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
}
body.dark-mode .rsk-stat-num   { color: #7ab8f7; }
body.dark-mode .rsk-stat-label { color: #7a90a8 !important; }
body.dark-mode .rsk-stat-icon  { color: #42b2a6; }

body.dark-mode .rsk-jadwal-card {
    background: #1a2235;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4);
}
body.dark-mode .table-jadwal            { background: #1a2235; box-shadow: none; }
body.dark-mode .table-jadwal tbody tr   { border-bottom-color: rgba(255,255,255,0.05); }
body.dark-mode .table-jadwal tbody tr:nth-child(odd)  { background-color: #1a2235; }
body.dark-mode .table-jadwal tbody tr:nth-child(even) { background-color: #1e2840; }
body.dark-mode .table-jadwal tbody tr:hover {
    background: linear-gradient(90deg, #1e2e48, #1a2e30) !important;
    box-shadow: inset 4px 0 0 #42b2a6, 0 2px 12px rgba(0,0,0,0.3);
}
body.dark-mode .table-jadwal tbody td   { color: #b0c8e0 !important; }
body.dark-mode .rsk-td-nama             { color: #7ab8f7 !important; }
body.dark-mode .rsk-td-hari             { color: #8aaac8 !important; }
body.dark-mode .rsk-td-jam              { color: #7ab8f7 !important; }
body.dark-mode .rsk-td-jam.rsk-jam--sore { color: #e07a30 !important; }

body.dark-mode .rsk-poli--umum   { background: rgba(66,178,166,0.15);  color: #42b2a6; }
body.dark-mode .rsk-poli--bedah  { background: rgba(220,80,80,0.15);   color: #e08080; }
body.dark-mode .rsk-poli--dalam  { background: rgba(220,120,0,0.15);   color: #e09040; }
body.dark-mode .rsk-poli--saraf  { background: rgba(140,100,240,0.15); color: #b090e0; }
body.dark-mode .rsk-poli--anak   { background: rgba(0,180,240,0.15);   color: #60c8f0; }
body.dark-mode .rsk-poli--obgyn  { background: rgba(240,80,180,0.15);  color: #e080c0; }
body.dark-mode .rsk-poli--mata   { background: rgba(0,160,220,0.15);   color: #50b8e8; }
body.dark-mode .rsk-poli--tht    { background: rgba(200,160,0,0.15);   color: #c8a840; }
body.dark-mode .rsk-poli--gigi   { background: rgba(80,170,80,0.15);   color: #70c870; }
body.dark-mode .rsk-poli--fisio  { background: rgba(100,160,255,0.15); color: #80b0ff; }

body.dark-mode .rsk-jadwal-card-footer {
    background: linear-gradient(90deg, #141e30, #141e28);
    border-top-color: rgba(255,255,255,0.06);
    color: #7a90a8 !important;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .rsk-jadwal-title { font-size: 2.2em; }
    .rsk-jadwal-stats { padding: 16px 24px; gap: 0; }
    .rsk-jadwal-stat  { padding: 0 20px; }
    /* Grid edukasi: 2 kolom di tablet */
    .rsk-edu-grid--video,
    .rsk-edu-grid--artikel,
    .rsk-edu-grid--infografis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .rsk-jadwal-section { padding: 70px 0 80px; }
    .rsk-jadwal-title   { font-size: 1.9em; }
    .rsk-jadwal-stats   { flex-wrap: wrap; gap: 12px; padding: 16px 20px; width: auto; }
    .rsk-jadwal-stat-div { display: none; }
    .rsk-jadwal-stat    { padding: 0 12px; }
    .table-jadwal thead th,
    .table-jadwal tbody td { padding: 12px 14px; font-size: 12.5px; }
    .rsk-poli { font-size: 10.5px; padding: 3px 8px; }
}
@media (max-width: 575px) {
    .rsk-jadwal-title { font-size: 1.6em; }
    .rsk-stat-num     { font-size: 20px; }
}


/* ============================================================
   17. TABLE — FASILITAS & TARIF (Kamar / Laborat / Radiologi)
   ============================================================ */

/* ── Section wrapper untuk halaman list ── */
.rsk-list-section {
    padding: 80px 0 100px;
    background: linear-gradient(170deg, #eaf4ff 0%, #f0f9ff 40%, #eaf8f6 100%);
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    max-width: 100%;
}
.rsk-list-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 8%  30%, rgba(66,178,166,0.07) 0%, transparent 38%),
        radial-gradient(circle at 92% 70%, rgba(11,61,145,0.06)  0%, transparent 38%);
}

/* ── Header halaman list ── */
.rsk-list-header {
    margin-bottom: 40px;
    text-align: center;
}
.rsk-list-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #42b2a6;
    margin-bottom: 16px;
}
.rsk-list-label-line {
    display: block;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #42b2a6);
}
.rsk-list-label-line--r { background: linear-gradient(90deg, #42b2a6, transparent); }
.rsk-list-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    color: #0c1e3e;
    margin: 0 0 10px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.rsk-list-title span { color: #0b3d91; }
.rsk-list-subtitle {
    font-size: 15px;
    color: #5a6a82;
    margin: 0;
}

/* ── Kartu tabel ── */
.rsk-list-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 2px 8px  rgba(11,61,145,0.05),
        0 12px 40px rgba(11,61,145,0.10),
        0 0 0 1px  rgba(11,61,145,0.06);
    position: relative;
}
.rsk-list-card-bar {
    height: 4px;
    background: linear-gradient(90deg, #0b3d91 0%, #42b2a6 50%, #0b3d91 100%);
    background-size: 200% 100%;
    animation: rskBarShift 4s linear infinite;
}

/* ── Tabel — Precision Layout ── */
.table.table-hover {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    table-layout: fixed;        /* kunci: lebar kolom konsisten */
    border: none;
}

/* Header */
.table.table-hover thead tr {
    background: linear-gradient(135deg, #0b3d91 0%, #1250c4 60%, #42b2a6 100%);
}
.table.table-hover thead th {
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 16px 20px;
    border: none;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
}
.table.table-hover thead th i {
    margin-right: 7px;
    opacity: 0.8;
    font-size: 12px;
}

/* Header alignment per kolom */
.table.table-hover thead th.th-left   { text-align: left; }
.table.table-hover thead th.th-center { text-align: center; }
.table.table-hover thead th.th-right  { text-align: right; }

/* Body rows */
.table.table-hover tbody tr {
    border-bottom: 1px solid #edf2f7;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.table.table-hover tbody tr:last-child       { border-bottom: none; }
.table.table-hover tbody tr:nth-child(odd)  { background-color: #ffffff; }
.table.table-hover tbody tr:nth-child(even) { background-color: #f5f9ff; }
.table.table-hover tbody tr:hover {
    background: linear-gradient(90deg, #eaf6ff, #f0faf8) !important;
    box-shadow: inset 4px 0 0 #42b2a6, 0 2px 12px rgba(11,61,145,0.06);
    transform: translateX(3px);
    position: relative;
    z-index: 1;
}

/* Semua sel — reset dulu */
.table.table-hover tbody td {
    color: #2d3748;
    padding: 13px 20px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #edf2f7;
    font-size: 13.5px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Utility alignment — pakai class di HTML */
.table.table-hover td.td-left   { text-align: left !important; }
.table.table-hover td.td-center { text-align: center !important; }
.table.table-hover td.td-right  { text-align: right !important; }

/* Kolom nama/deskripsi */
.table.table-hover td.td-nama {
    font-weight: 600;
    color: #0c1e3e;
    text-align: left !important;
}

/* Kolom kelas */
.table.table-hover td.td-kelas {
    text-align: center !important;
    white-space: nowrap;
}

/* Kolom tarif/harga */
.table.table-hover td.td-tarif {
    text-align: right !important;
    font-weight: 700;
    color: #0b3d91;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    white-space: nowrap;
    font-size: 13px;
}

/* Row group label — separator antar kategori */
.table.table-hover tr.tr-group-header td {
    background: linear-gradient(90deg, #eef4ff, #f0faf8) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #0b3d91 !important;
    padding: 10px 20px !important;
    border-top: 2px solid rgba(11,61,145,0.12) !important;
    border-bottom: 1px solid rgba(11,61,145,0.08) !important;
}
.table.table-hover tr.tr-group-header td i {
    margin-right: 8px;
    color: #42b2a6;
    font-size: 11px;
}

/* Badge kelas */
.rsk-kelas-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 11px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    min-width: 60px;
}
.rsk-kelas-badge--vip { background: rgba(240,180,0,0.12);  color: #7a5c00; border: 1px solid rgba(240,180,0,0.28); }
.rsk-kelas-badge--1   { background: rgba(11,61,145,0.10);  color: #0b3d91; border: 1px solid rgba(11,61,145,0.22); }
.rsk-kelas-badge--2   { background: rgba(66,178,166,0.12); color: #0a7a70; border: 1px solid rgba(66,178,166,0.28); }
.rsk-kelas-badge--3   { background: rgba(100,120,160,0.10);color: #445577; border: 1px solid rgba(100,120,160,0.22); }
.rsk-kelas-badge--ods { background: rgba(220,60,150,0.10); color: #9a2060; border: 1px solid rgba(220,60,150,0.22); }

/* Footer info tabel */
.rsk-list-footer {
    padding: 14px 24px;
    background: linear-gradient(90deg, #f0f7ff, #f0faf8);
    border-top: 1px solid #e8f0fb;
    font-size: 12px;
    color: #7a8aaa;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rsk-list-footer i { color: #42b2a6; font-size: 13px; }

/* Rowspan — sel yang di-merge vertikal */
.table.table-hover tbody td[rowspan] {
    vertical-align: middle !important;
    font-weight: 600;
    color: #0c1e3e;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
    border-right: 2px solid #e0eaf8 !important;
    text-align: left !important;
    position: relative;
}
body.dark-mode .table.table-hover tbody td[rowspan] {
    color: #c8dcf4 !important;
    background: linear-gradient(180deg, #1e2840 0%, #1a2235 100%) !important;
    border-right-color: rgba(100,160,255,0.12) !important;
}

/* Catatan kaki */
.table.table-hover tbody td[colspan] {
    text-align: center !important;
    color: #8a9ab8 !important;
    font-size: 12px !important;
    font-style: italic;
    font-weight: 400 !important;
    padding: 14px 22px !important;
    font-family: inherit !important;
    background: linear-gradient(90deg, #f5f9ff, #f0faf8);
}

/* ── Dark mode tabel ── */
body.dark-mode .table.table-hover tr.tr-group-header td {
    background: linear-gradient(90deg, #1a2845, #1a2e30) !important;
    color: #7ab8f7 !important;
    border-top-color: rgba(100,160,255,0.15) !important;
    border-bottom-color: rgba(100,160,255,0.08) !important;
}
body.dark-mode .table.table-hover tr.tr-group-header td i { color: #42b2a6; }
body.dark-mode .table.table-hover td.td-nama   { color: #c8dcf4 !important; }
body.dark-mode .table.table-hover td.td-tarif  { color: #7ab8f7 !important; }
body.dark-mode .rsk-kelas-badge--vip { background: rgba(240,180,0,0.15);  color: #c8a040; border-color: rgba(240,180,0,0.28); }
body.dark-mode .rsk-kelas-badge--1   { background: rgba(100,160,255,0.15);color: #80b0ff; border-color: rgba(100,160,255,0.28); }
body.dark-mode .rsk-kelas-badge--2   { background: rgba(66,178,166,0.15); color: #42b2a6; border-color: rgba(66,178,166,0.28); }
body.dark-mode .rsk-kelas-badge--3   { background: rgba(140,160,200,0.12);color: #8090b0; border-color: rgba(140,160,200,0.22); }
body.dark-mode .rsk-kelas-badge--ods { background: rgba(220,80,180,0.15); color: #e080c0; border-color: rgba(220,80,180,0.28); }

/* ── Dark mode ── */
body.dark-mode .rsk-list-section {
    background: linear-gradient(170deg, #080e1a 0%, #0a1018 40%, #080e14 100%) !important;
}
body.dark-mode .rsk-list-title { color: #dde8f8 !important; }
body.dark-mode .rsk-list-title span { color: #7ab8f7 !important; }
body.dark-mode .rsk-list-subtitle { color: #6a88a8 !important; }
body.dark-mode .rsk-list-label { color: #42b2a6 !important; }

body.dark-mode .rsk-list-card {
    background: #1a2235;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4);
}

body.dark-mode .table.table-hover                     { background-color: #1a2235 !important; }
body.dark-mode .table.table-hover thead th            { color: #fff !important; border-color: transparent !important; }
body.dark-mode .table.table-hover tbody tr            { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
body.dark-mode .table.table-hover tbody tr:nth-child(odd)  { background-color: #1a2235 !important; }
body.dark-mode .table.table-hover tbody tr:nth-child(even) { background-color: #1e2840 !important; }
body.dark-mode .table.table-hover tbody tr:hover {
    background: linear-gradient(90deg, #1e2e48, #1a2e30) !important;
    box-shadow: inset 4px 0 0 #42b2a6, 0 2px 12px rgba(0,0,0,0.3);
}
body.dark-mode .table.table-hover tbody td            { color: #b0c8e0 !important; border-color: rgba(255,255,255,0.06) !important; }
body.dark-mode .table.table-hover tbody td:first-child { color: #c8dcf4 !important; }
body.dark-mode .table.table-hover tbody td:last-child  { color: #90c8ff !important; }
body.dark-mode .table.table-hover tbody td[colspan]    { color: #4a6080 !important; background: linear-gradient(90deg, #141e30, #141e28) !important; }

body.dark-mode .rsk-kelas-badge--vip { background: rgba(240,180,0,0.15); color: #c8a040; border-color: rgba(240,180,0,0.25); }
body.dark-mode .rsk-kelas-badge--1   { background: rgba(100,160,255,0.15); color: #80b0ff; border-color: rgba(100,160,255,0.25); }
body.dark-mode .rsk-kelas-badge--2   { background: rgba(66,178,166,0.15); color: #42b2a6; border-color: rgba(66,178,166,0.25); }
body.dark-mode .rsk-kelas-badge--3   { background: rgba(140,160,200,0.12); color: #8090b0; border-color: rgba(140,160,200,0.20); }

body.dark-mode .rsk-list-footer {
    background: linear-gradient(90deg, #141e30, #141e28);
    border-top-color: rgba(255,255,255,0.06);
    color: #7a90a8 !important;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .rsk-list-section  { padding: 60px 0 70px; }
    .rsk-list-title    { font-size: 1.9em; }
    .rsk-list-subtitle { font-size: 14px; }
    .rsk-list-card     { border-radius: 14px; }
    .table.table-hover thead th { padding: 14px 14px; font-size: 10.5px; }
    .table.table-hover tbody td { padding: 12px 14px; font-size: 12.5px; }
}
@media (max-width: 480px) {
    .rsk-list-title { font-size: 1.6em; }
    .table.table-hover thead th { padding: 12px 10px; font-size: 10px; }
    .table.table-hover tbody td { padding: 10px 10px; font-size: 12px; }
    .rsk-kelas-badge { font-size: 10px; padding: 2px 8px; }
}


/* ============================================================
   18. SOCIAL ICONS
   ============================================================ */
.social-icon                  { position: relative; padding: 0; margin: 0; }
.social-icon li               { display: inline-block; list-style: none; }
.social-icon li a             { background: rgba(255,255,255,0.25); color: var(--primary); border-radius: 50%; width: 35px; height: 35px; line-height: 35px; text-align: center; display: inline-block; margin: 0 4px; transition: all var(--transition); }
.social-icon li a:hover       { background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; }


/* ============================================================
   19. FOOTER (Bootstrap default — halaman lain)
   ============================================================ */
footer {
    background: rgba(240,255,255,0.5);
    backdrop-filter: blur(12px);
    color: var(--text-muted);
    padding: 80px 0 40px;
    border-radius: 15px;
}
footer h4  { color: var(--primary); font-weight: 600; margin-bottom: 15px; }
footer p   { color: #4a5568; }
footer a   { color: #4a5568; }
footer a:hover { color: var(--accent); }

.contact-info .fa { background: var(--accent); color: #fff; border-radius: 50%; width: 35px; height: 35px; line-height: 35px; text-align: center; margin-right: 5px; }

.latest-stories               { margin-bottom: 20px; }
.stories-image,
.stories-info                 { display: inline-block; vertical-align: top; }
.stories-image img            { border-radius: 100%; width: 65px; height: 65px; }
.stories-info                 { margin-left: 15px; }
.stories-info h5              { margin-bottom: 2px; color: #1a2a4a; }
.stories-info span            { color: #4a5568; font-size: 12px; }

.opening-hours p              { line-height: 18px; color: #4a5568; }
.opening-hours span           { font-weight: 500; display: inline-block; padding-left: 10px; color: #2d3748; }

.copyright-text p,
.footer-link a { color: #7a8a9e; font-size: 12px; font-weight: 500; }
.footer-link a { display: inline-block; padding: 0 10px; margin-top: 4px; }
.angle-up-btn  { position: relative; bottom: 4em; display: block; }
.angle-up-btn a { background: #fff; border: 1px solid #e0e8f0; border-radius: 3px; font-size: 20px; color: #393939; display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 38px; transition: transform 0.1s ease-in; }
.angle-up-btn a:hover { background: #4267b2; color: #fff; transform: translateY(-5px); }


/* ============================================================
   20. RSK-FOOTER (modern)
   ============================================================ */
.rsk-footer {
    background: linear-gradient(165deg, #05122e 0%, #0b2a6b 50%, #05122e 100%);
    color: rgba(255,255,255,0.75);
    padding: 70px 0 0;
    position: relative;
    overflow: hidden;
}
.rsk-footer::before { content: ''; position: absolute; top: -80px; right: 0; width: 280px; height: 280px; border-radius: 50%; background: rgba(66,178,166,0.06); pointer-events: none; overflow: hidden; }
.rsk-footer::after  { content: ''; position: absolute; bottom: 80px; left: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,0.03); pointer-events: none; }
.rsk-footer .container { position: relative; z-index: 2; }

.rsk-footer-brand         { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rsk-footer-brand-icon    { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #42b2a6, #0b3d91); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; flex-shrink: 0; }
.rsk-footer-brand-name    { display: block; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2; }
.rsk-footer-brand-tagline { display: block; font-size: 11px; color: #42b2a6; font-weight: 500; }
.rsk-footer-desc          { font-size: 13px; color: rgba(255,255,255,0.60); line-height: 1.8; margin-bottom: 22px; }

.rsk-social       { display: flex; gap: 10px; flex-wrap: wrap; }
.rsk-social-link  { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.80); font-size: 15px; text-decoration: none; transition: all 0.25s ease; }
.rsk-social-link:hover { background: #42b2a6; border-color: #42b2a6; color: #fff; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(66,178,166,0.35); text-decoration: none; }

.rsk-footer h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: center;
    gap: 8px;
}
.rsk-footer h5 i { color: #42b2a6; font-size: 13px; }

.rsk-footer-contact    { list-style: none; padding: 0; margin: 0; }
.rsk-footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; font-size: 13px; color: rgba(255,255,255,0.70); line-height: 1.55; }
.rsk-footer-contact li .rsk-fc-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: rgba(66,178,166,0.15); border: 1px solid rgba(66,178,166,0.2); display: flex; align-items: center; justify-content: center; color: #42b2a6; font-size: 12px; margin-top: 1px; }
.rsk-footer-contact li a           { color: rgba(255,255,255,0.70); text-decoration: none; transition: color 0.2s ease; }
.rsk-footer-contact li a:hover     { color: #42b2a6; }

/* Jam operasional */
.rsk-hours-table              { width: 100%; }
.rsk-hours-table tr td        { font-size: 13px; padding: 5px 0; color: rgba(255,255,255,0.70); vertical-align: top; }
.rsk-hours-table tr td:first-child { width: 50%; color: rgba(255,255,255,0.55); font-size: 12.5px; }
.rsk-hours-table tr td:last-child  { font-weight: 600; color: rgba(255,255,255,0.92); }
.rsk-hours-igd { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 50px; background: rgba(220,53,69,0.2); border: 1px solid rgba(220,53,69,0.3); color: #ff9999; font-size: 12px; font-weight: 700; }
.rsk-hours-igd i { font-size: 11px; }

/* Pengumuman */
.rsk-announcement        { background: rgba(66,178,166,0.10); border: 1px solid rgba(66,178,166,0.20); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.rsk-announcement-date   { font-size: 10.5px; color: #42b2a6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.rsk-announcement-text   { font-size: 12.5px; color: rgba(255,255,255,0.78); line-height: 1.6; margin: 0; }
.rsk-announcement-author { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* Quicklink footer */
.rsk-footer-quicklink {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: color 0.2s ease;
}
.rsk-footer-quicklink i       { color: #42b2a6; width: 14px; }
.rsk-footer-quicklink:hover   { color: #fff; text-decoration: none; }

/* Bottom bar */
.rsk-footer-bottom {
    margin-top: 50px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.rsk-footer-copy   { font-size: 12px; color: rgba(255,255,255,0.45); }
.rsk-footer-copy a { color: #42b2a6; text-decoration: none; }
.rsk-footer-copy a:hover { color: #fff; }
.rsk-footer-links  { display: flex; gap: 4px; flex-wrap: wrap; }
.rsk-footer-links a { padding: 4px 12px; border-radius: 50px; font-size: 11.5px; color: rgba(255,255,255,0.50); text-decoration: none; border: 1px solid rgba(255,255,255,0.10); transition: all 0.2s ease; }
.rsk-footer-links a:hover { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); }
.rsk-back-top { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.65); display: flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none; transition: all 0.25s ease; }
.rsk-back-top:hover { background: #42b2a6; border-color: #42b2a6; color: #fff; transform: translateY(-3px); }


/* ============================================================
   21. EDUKASI KESEHATAN — Elegant Modern Professional
   ============================================================ */

/* ── Section ── */
#edukasi {
    padding: 100px 0 110px;
    background: linear-gradient(170deg, #f0f9ff 0%, #eaf6ff 40%, #f0faf8 100%);
    position: relative;
    overflow: hidden;
}
#edukasi::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 10% 40%, rgba(66,178,166,0.07) 0%, transparent 40%),
        radial-gradient(circle at 90% 60%, rgba(11,61,145,0.06)  0%, transparent 40%);
}

/* ── Section header ── */
#edukasi .section-title {
    margin-bottom: 52px;
}
#edukasi .section-title h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.6em;
    font-weight: 700;
    color: #0c1e3e;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
#edukasi .section-title p {
    font-size: 15px;
    color: #5a6a82;
    text-align: center;
    margin-bottom: 0;
    line-height: 1.7;
}

/* ── Tab navigation — pill style ── */
.edukasi-tabs { margin-bottom: 44px; }
.edukasi-tabs .nav-tabs {
    border-bottom: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    background: rgba(255,255,255,0.80);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto;
    box-shadow: 0 2px 16px rgba(11,61,145,0.08), 0 0 0 1px rgba(11,61,145,0.07);
}
.edukasi-tabs .nav-tabs > li {
    margin-bottom: 0;
    flex: 0 1 auto;
}
.edukasi-tabs .nav-tabs > li > a {
    color: #4a5a7a;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 26px;
    border: none !important;
    border-radius: 50px;
    background: transparent;
    margin-right: 0;
    transition: all 0.28s cubic-bezier(0.23,1,0.32,1);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.edukasi-tabs .nav-tabs > li > a i {
    font-size: 15px;
    transition: transform 0.25s ease;
}
.edukasi-tabs .nav-tabs > li > a:hover {
    background: rgba(11,61,145,0.07);
    color: #0b3d91;
    border-color: transparent !important;
    transform: none;
}
.edukasi-tabs .nav-tabs > li.active > a,
.edukasi-tabs .nav-tabs > li.active > a:hover,
.edukasi-tabs .nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, #0b3d91, #42b2a6) !important;
    color: #fff !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 4px 16px rgba(11,61,145,0.28);
    transform: none;
}
.edukasi-tabs .nav-tabs > li.active > a i { color: #fff; transform: scale(1.1); }

/* ── Tab content ── */
.tab-content { padding-top: 8px; }

/* ── CSS Grid — otomatis rapi berapapun jumlah item ── */
.rsk-edu-grid {
    display: grid;
    gap: 22px;
    align-items: start;
}
/* Video & Infografis: 3 kolom */
.rsk-edu-grid--video,
.rsk-edu-grid--infografis {
    grid-template-columns: repeat(3, 1fr);
}
/* Artikel: 3 kolom juga (atau 2 kalau lebih nyaman — ganti ke repeat(2,1fr)) */
.rsk-edu-grid--artikel {
    grid-template-columns: repeat(3, 1fr);
}
/* Item wrapper */
.rsk-edu-item {
    display: flex;
    flex-direction: column;
}
.rsk-edu-item .news-thumb { flex: 1; }

/* Gambar artikel & infografis: rasio 16:9 konsisten */
.rsk-edu-grid--artikel .news-thumb > a,
.rsk-edu-grid--infografis .news-thumb > a {
    padding-top: 56%;
}
.rsk-edu-grid--artikel .news-thumb > a img,
.rsk-edu-grid--infografis .news-thumb > a img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Card konten (news-thumb) ── */
.news-thumb {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 2px 8px  rgba(11,61,145,0.04),
        0 8px 28px rgba(11,61,145,0.08);
    transition: transform 0.38s cubic-bezier(0.23,1,0.32,1), box-shadow 0.38s cubic-bezier(0.23,1,0.32,1), border-color 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(11,61,145,0.06);
    position: relative;
}
/* Garis aksen atas saat hover */
.news-thumb::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0b3d91, #42b2a6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.38s cubic-bezier(0.23,1,0.32,1);
    z-index: 2;
}
.news-thumb:hover::before { transform: scaleX(1); }
.news-thumb:hover {
    transform: translateY(-7px);
    box-shadow:
        0 4px 12px rgba(11,61,145,0.06),
        0 20px 50px rgba(11,61,145,0.13);
    border-color: rgba(66,178,166,0.22);
}

/* Gambar artikel */
.news-thumb > a {
    position: relative;
    display: block;
    padding-top: 58%;
    overflow: hidden;
}
.news-thumb > a img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.38s ease;
}
.news-thumb:hover > a img {
    transform: scale(1.06);
    filter: brightness(0.92);
}

/* Video embed */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #0a0f1a;
    border-radius: 0;
}
.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Info bawah kartu */
.news-info {
    padding: 20px 22px 22px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.news-info h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: #0c1e3e;
    margin: 6px 0 10px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-info h3 a { color: #0c1e3e; text-decoration: none; transition: color 0.2s ease; }
.news-info h3 a:hover { color: #42b2a6; }
.news-info p {
    font-size: 13.5px;
    color: #5a6a82;
    line-height: 1.7;
    margin-bottom: 14px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-info .author {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(11,61,145,0.07);
}
.news-info .author small {
    font-size: 11.5px;
    color: #8a9ab8;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
.news-info .author small i { color: #42b2a6; }

/* Badge kategori — pill */
.badge-kategori {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 6px 10px 0;
    box-shadow: none;
}
.badge-video     { background: rgba(238,90,82,0.12); color: #c42b22; }
.badge-artikel   { background: rgba(66,178,166,0.12); color: #0a7a70; }
.badge-infografis { background: rgba(240,140,0,0.12); color: #8a5000; }
.badge-topik {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(11,61,145,0.08);
    color: #0b3d91;
    border: 1px solid rgba(11,61,145,0.15);
    margin-bottom: 8px;
}

/* Tombol baca */
.news-info .btn.btn-primary {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50px;
    background: linear-gradient(135deg, #0b3d91, #42b2a6);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(11,61,145,0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-info .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11,61,145,0.32);
    color: #fff;
}
.news-info .btn.btn-primary i { font-size: 11px; transition: transform 0.2s ease; }
.news-info .btn.btn-primary:hover i { transform: translateX(3px); }

/* Infografis overlay */
.infografis-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,61,145,0.88), rgba(66,178,166,0.88));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.38s ease;
    border-radius: 0;
}
.news-thumb:hover .infografis-overlay { opacity: 1; }
.infografis-overlay i {
    color: #fff;
    font-size: 44px;
    animation: pulseZoom 2s infinite;
}
@keyframes pulseZoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Modal gambar */
.modal-gambar {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    padding-top: 50px;
    overflow: auto;
    background: rgba(0,0,0,0.96);
    backdrop-filter: blur(8px);
}
.modal-gambar-content {
    margin: auto;
    display: block;
    width: 85%;
    max-width: 1000px;
    border-radius: 16px;
    box-shadow: 0 15px 60px rgba(0,0,0,0.6);
    animation: zoomIn 0.38s cubic-bezier(0.23,1,0.32,1);
}
@keyframes zoomIn { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.close-gambar {
    position: absolute;
    top: 22px;
    right: 36px;
    color: #fff;
    font-size: 38px;
    font-weight: 300;
    cursor: pointer;
    background: rgba(255,255,255,0.10);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
}
.close-gambar:hover { background: #42b2a6; transform: rotate(90deg); }
#captionGambar {
    margin: auto;
    display: block;
    width: 85%;
    max-width: 800px;
    text-align: center;
    color: rgba(255,255,255,0.85);
    padding: 22px 0;
    font-size: 16px;
    font-weight: 500;
}

.edukasi-item        { transition: all var(--transition); }
.edukasi-item.hidden { display: none; }

/* ── Dark mode ── */
body.dark-mode #edukasi {
    background: linear-gradient(170deg, #080e1a 0%, #0a1018 40%, #080e14 100%) !important;
}
body.dark-mode #edukasi .section-title h2 { color: #dde8f8 !important; }
body.dark-mode #edukasi .section-title p  { color: #88a4c0 !important; }
body.dark-mode .rsk-section-label         { color: #42b2a6 !important; }

body.dark-mode .edukasi-tabs .nav-tabs {
    background: rgba(26,34,53,0.85);
    box-shadow: 0 2px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
}
body.dark-mode .edukasi-tabs .nav-tabs > li > a {
    color: #7a96b8;
    background: transparent;
    border-color: transparent !important;
}
body.dark-mode .edukasi-tabs .nav-tabs > li > a:hover {
    background: rgba(66,178,166,0.10);
    color: #a8c8e8;
}
body.dark-mode .edukasi-tabs .nav-tabs > li.active > a,
body.dark-mode .edukasi-tabs .nav-tabs > li.active > a:hover,
body.dark-mode .edukasi-tabs .nav-tabs > li.active > a:focus {
    background: linear-gradient(135deg, #0b3d91, #42b2a6) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(11,61,145,0.40);
}

body.dark-mode .news-thumb {
    background: #1a2235 !important;
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 8px 28px rgba(0,0,0,0.35);
}
body.dark-mode .news-thumb:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 20px 50px rgba(0,0,0,0.50);
    border-color: rgba(66,178,166,0.22);
}
body.dark-mode .news-info h3              { color: #d0e2f8 !important; }
body.dark-mode .news-info h3 a            { color: #d0e2f8 !important; }
body.dark-mode .news-info h3 a:hover      { color: #42b2a6 !important; }
body.dark-mode .news-info p               { color: #96b0cc !important; }
body.dark-mode .news-info .author         { border-top-color: rgba(255,255,255,0.06); }
body.dark-mode .news-info .author small   { color: #6a8aaa !important; }

body.dark-mode .badge-video      { background: rgba(238,90,82,0.18); color: #e88880; }
body.dark-mode .badge-artikel    { background: rgba(66,178,166,0.18); color: #42b2a6; }
body.dark-mode .badge-infografis { background: rgba(240,140,0,0.18);  color: #c89040; }

/* ── Header label edukasi ── */
.rsk-edukasi-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #42b2a6;
    margin-bottom: 18px;
}
.rsk-edukasi-label-line {
    display: block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #42b2a6);
}
.rsk-edukasi-label-line--r {
    background: linear-gradient(90deg, #42b2a6, transparent);
}
.rsk-edukasi-label i { font-size: 13px; }

#edukasi .section-title h2 .rsk-edukasi-h2-accent {
    display: block;
    color: #0b3d91;
    font-size: 0.86em;
    font-weight: 600;
    margin-top: 4px;
}

.rsk-edukasi-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
}
.rsk-edukasi-ornament span { display: block; border-radius: 50%; }
.rsk-edukasi-ornament span:nth-child(1) { width: 6px; height: 6px; background: rgba(11,61,145,0.20); }
.rsk-edukasi-ornament span:nth-child(2) { width: 36px; height: 2px; background: linear-gradient(90deg, #0b3d91, #42b2a6); border-radius: 2px; }
.rsk-edukasi-ornament span:nth-child(3) { width: 6px; height: 6px; background: rgba(66,178,166,0.20); }

body.dark-mode .rsk-edukasi-label { color: #42b2a6 !important; }
body.dark-mode #edukasi .section-title h2 .rsk-edukasi-h2-accent { color: #7ab8f7 !important; }

/* ============================================================
   22. HERO SLIDER — Split Layout
       .rsk-photo-label & .rsk-slide-counter DIHAPUS
   ============================================================ */
.rsk-hero {
    position: relative;
    background: #05122e;
    overflow: hidden;
    width: 100%;
    /* Force GPU render — fix black screen di Android WebView */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.rsk-hero .owl-carousel {
    margin: 0;
    /* Paksa render di Android */
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.rsk-hero .owl-nav      { display: none; }
/* Pastikan owl-stage dan item terlihat */
.rsk-hero .owl-stage-outer { overflow: hidden; position: relative; }
.rsk-hero .owl-stage        { display: flex !important; }
.rsk-hero .owl-item          { min-height: 1px; float: left; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Pastikan slide aktif selalu terlihat — prevent black screen Android */
.rsk-hero .owl-item.active   { visibility: visible !important; opacity: 1 !important; }
.rsk-hero .owl-item          { visibility: visible; }
/* Owl stage harus full width */
.rsk-hero .owl-stage-outer   { width: 100% !important; }
.rsk-hero .owl-stage         { will-change: transform; }

.rsk-hero .owl-dots { position: absolute; left: 52px; bottom: 28px; z-index: 30; display: flex; gap: 8px; }
.rsk-hero .owl-theme .owl-dots .owl-dot span { width: 6px; height: 6px; background: rgba(255,255,255,0.35); border-radius: 50%; margin: 0; display: block; transition: all 0.35s ease; }
.rsk-hero .owl-theme .owl-dots .owl-dot.active span { background: #fff; width: 28px; border-radius: 3px; }

.rsk-slide {
    display: flex !important;
    align-items: stretch;
    min-height: 560px;
    width: 100%;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Nomor slide & label foto kanan bawah: pastikan tersembunyi */
.rsk-slide-counter { display: none !important; }
.rsk-photo-label   { display: none !important; }

/* Panel kiri: teks */
.rsk-text {
    flex: 0 0 40%;
    max-width: 40%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 60px 50px 80px 56px;
    overflow: hidden;
    z-index: 2;
}
.rsk-text--blue { background: linear-gradient(145deg, #05122e 0%, #0b3d91 60%, #0d52c0 100%); }
.rsk-text--teal { background: linear-gradient(145deg, #041e1c 0%, #0a6b60 60%, #0d8a7c 100%); }
.rsk-text--gold { background: linear-gradient(145deg, #1a1000 0%, #7a4f00 60%, #a06700 100%); }
.rsk-text--red  { background: linear-gradient(145deg, #1a0505 0%, #7a1010 60%, #9e1515 100%); }

/* Diagonal separator */
.rsk-text::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background: inherit;
    clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
    z-index: 1;
}

/* Dekorasi */
.rsk-deco-circle      { position: absolute; border-radius: 50%; pointer-events: none; }
.rsk-deco-circle--1   { width: 220px; height: 220px; top: -80px; right: 0; background: rgba(255,255,255,0.04); }
.rsk-deco-circle--2   { width: 130px; height: 130px; bottom: -40px; left: 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.rsk-deco-dots        { position: absolute; bottom: 40px; right: 20px; width: 80px; height: 80px; background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1px); background-size: 12px 12px; pointer-events: none; }

.rsk-text-inner       { position: relative; z-index: 3; width: 100%; }

.rsk-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 12px;
    border-radius: 50px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.95);
    margin-bottom: 18px;
}
.rsk-badge i { font-size: 12px; }

.rsk-title      { font-family: 'Poppins', sans-serif; font-size: 2.5em; font-weight: 800; color: #fff !important; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.5px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.rsk-title-line { width: 48px; height: 3px; background: rgba(255,255,255,0.5); border-radius: 2px; margin-bottom: 20px; }
.rsk-desc       { font-size: 14px; color: rgba(255,255,255,0.88) !important; line-height: 1.8; margin: 0; }

/* Panel kanan: foto */
.rsk-photo {
    flex: 0 0 60%;
    max-width: 60%;
    background: #edf3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 40px 30px 70px;
    position: relative;
    overflow: hidden;
}
.rsk-photo::before { content: ''; position: absolute; top: -40px; right: 0; width: 180px; height: 180px; border-radius: 50%; background: rgba(11,61,145,0.06); pointer-events: none; }

.rsk-photo-inner { width: 100%; position: relative; z-index: 2; }
.rsk-photo img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(11,61,145,0.10), 0 16px 48px rgba(11,61,145,0.12);
    transition: transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
.rsk-photo img:hover { transform: scale(1.018); }

/* Arrow nav */
.rsk-arr       { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.10); backdrop-filter: blur(8px); color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
.rsk-arr:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); transform: translateY(-50%) scale(1.08); }
.rsk-arr--prev { left: 12px; }
.rsk-arr--next { right: 12px; }

/* Animasi masuk */
.owl-item.active .rsk-badge      { animation: rskFadeUp 0.5s ease 0.10s both; }
.owl-item.active .rsk-title      { animation: rskFadeUp 0.55s ease 0.18s both; }
.owl-item.active .rsk-title-line { animation: rskGrow 0.6s ease 0.28s both; }
.owl-item.active .rsk-desc       { animation: rskFadeUp 0.6s ease 0.32s both; }
.owl-item.active .rsk-photo img  { animation: rskFadeRight 0.7s ease 0.18s both; }

@keyframes rskFadeUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rskFadeRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rskGrow      { from { width: 0; opacity: 0; } to { width: 48px; opacity: 1; } }


/* ============================================================
   23. ABOUT SECTION
   ============================================================ */
.rsk-about {
    position: relative;
    padding: 100px 0 110px;
    background: linear-gradient(165deg, #f0f7ff 0%, #e6f2ff 40%, #f5fbf9 100%);
    overflow: hidden;
}
.rsk-about-bg-accent { position: absolute; top: 0; right: 0; width: 45%; height: 100%; background: linear-gradient(165deg, rgba(11,61,145,0.04) 0%, rgba(66,178,166,0.06) 100%); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%); pointer-events: none; }

.rsk-section-label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 50px; background: rgba(11,61,145,0.08); border: 1px solid rgba(11,61,145,0.15); color: #0b3d91; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 20px; }
.rsk-section-label i { font-size: 12px; color: #42b2a6; }

.rsk-about-title { font-family: 'Poppins', sans-serif; font-size: 2.4em; font-weight: 700; color: #1a2a4a !important; line-height: 1.2; margin: 0 0 20px; }
.rsk-about-em    { font-style: normal; color: #0b3d91; position: relative; }
.rsk-about-em::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: linear-gradient(90deg, #42b2a6, #0b3d91); border-radius: 2px; }
.rsk-about-bar   { width: 56px; height: 4px; background: linear-gradient(90deg, #42b2a6, #0b3d91); border-radius: 3px; margin: 0 0 28px; }
.rsk-about-lead  { font-size: 16px; font-weight: 600; color: #1a2a4a !important; line-height: 1.75; margin-bottom: 14px; }
.rsk-about-text  { font-size: 14.5px; color: #4a5568 !important; line-height: 1.85; margin-bottom: 32px; }

.rsk-philosophy  { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.rsk-phil-item   { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: #fff; border-radius: 14px; border: 1px solid rgba(11,61,145,0.08); box-shadow: 0 2px 12px rgba(11,61,145,0.06); transition: all 0.3s ease; }
.rsk-phil-item:hover { transform: translateX(6px); box-shadow: 0 6px 24px rgba(11,61,145,0.12); border-color: rgba(66,178,166,0.3); }
.rsk-phil-icon   { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #0b3d91, #1a5cb8); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; box-shadow: 0 4px 12px rgba(11,61,145,0.25); }
.rsk-phil-body strong { display: block; font-size: 14px; font-weight: 700; color: #1a2a4a; margin-bottom: 4px; }
.rsk-phil-body p      { font-size: 13px; color: #5a6a7e; margin: 0; line-height: 1.65; }

.rsk-director         { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: linear-gradient(135deg, #0b3d91, #0d52c0); border-radius: 16px; box-shadow: 0 8px 30px rgba(11,61,145,0.22); position: relative; overflow: hidden; }
.rsk-director::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,0.05); pointer-events: none; }
.rsk-director-photo   { flex-shrink: 0; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,0.3); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.rsk-director-photo img { width: 100%; height: 100%; object-fit: cover; }
.rsk-director-info    { flex: 1; }
.rsk-director-label   { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 4px; }
.rsk-director-label i { margin-right: 4px; }
.rsk-director-name    { display: block; font-size: 16px; font-weight: 700; color: #fff !important; margin-bottom: 4px; }
.rsk-director-quote   { font-size: 12px; color: rgba(255,255,255,0.78) !important; margin: 0; font-style: italic; line-height: 1.5; }
.rsk-director-icon    { flex-shrink: 0; color: rgba(255,255,255,0.15); font-size: 36px; align-self: flex-end; }

/* ── VMM Cards (Visi Misi Motto) — layout baru ── */
.rsk-vmm-row {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;  /* ← semua kolom tinggi sama */
}
/* Paksa Bootstrap col di dalam row ini stretch */
.rsk-vmm-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.rsk-vmm-card {
    flex: 1;               /* ← isi tinggi kolom penuh */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(11,61,145,0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rsk-vmm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 36px rgba(11,61,145,0.18);
}

/* ── Header strip dengan icon + label inline ── */
.rsk-vmm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}
/* Tampilkan label teks di dalam header */
.rsk-vmm-icon::after {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Poppins', sans-serif;
}
.rsk-vmm-card--visi  .rsk-vmm-icon { background: linear-gradient(135deg, #0b3d91, #1a6dd4); }
.rsk-vmm-card--misi  .rsk-vmm-icon { background: linear-gradient(135deg, #0d7a3e, #22b05a); }
.rsk-vmm-card--motto .rsk-vmm-icon { background: linear-gradient(135deg, #7a5c00, #c49a00); }

/* ── Body ── */
.rsk-vmm-body {
    flex: 1;
    padding: 20px 22px 22px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
/* Sembunyikan title karena sudah ada di header */
.rsk-vmm-title { display: none; }

.rsk-vmm-text {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.75;
    font-style: italic;
    margin: 0;
}
.rsk-vmm-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.rsk-vmm-list li {
    font-size: 12.5px;
    color: #4a5568;
    line-height: 1.55;
    padding: 7px 12px;
    background: rgba(13,122,62,0.04);
    border-left: 3px solid #22b05a;
    border-radius: 0 6px 6px 0;
    counter-increment: misi-counter;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.rsk-vmm-list li::before {
    content: counter(misi-counter);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: #0d7a3e;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.rsk-vmm-list { counter-reset: misi-counter; }

.rsk-vmm-motto {
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    color: #7a5c00;
    line-height: 1.4;
    margin: auto 0;       /* ← center vertikal di dalam card */
    text-align: center;
    padding: 8px 0;
}

/* ── Separator line antar card ── */
.rsk-vmm-row > [class*="col-"]:not(:last-child) .rsk-vmm-card {
    border-right: none;
}

/* ── Dark mode ── */
body.dark-mode .rsk-vmm-body      { background: #1a2235; }
body.dark-mode .rsk-vmm-text,
body.dark-mode .rsk-vmm-list li   { color: #a8c4dc; }
body.dark-mode .rsk-vmm-list li   { background: rgba(34,176,90,0.10); }
body.dark-mode .rsk-vmm-motto     { color: #d4a800; }
body.dark-mode .rsk-vmm-card      { box-shadow: 0 4px 20px rgba(0,0,0,0.35); }

/* ── Mobile: stack vertikal ── */
@media (max-width: 767px) {
    .rsk-vmm-row          { margin-top: 20px; flex-direction: column; }
    .rsk-vmm-row > [class*="col-"] { margin-bottom: 14px; }
    .rsk-vmm-icon         { height: 46px; font-size: 16px; }
    .rsk-vmm-body         { padding: 14px 16px 16px; }
    .rsk-vmm-motto        { font-size: 18px; margin: 8px 0 4px; }
    .rsk-vmm-list li      { font-size: 12px; }
}

/* ── Visi Misi Motto (lama — kept for compatibility) ── */
.rsk-visi-misi {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0 24px;
}
.rsk-vm-block {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(11,61,145,0.07);
}
.rsk-vm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
}
.rsk-vm-block--visi .rsk-vm-header  { background: linear-gradient(90deg, #0b3d91, #1a5bbf); }
.rsk-vm-block--misi .rsk-vm-header  { background: linear-gradient(90deg, #1a7a40, #28a05a); }
.rsk-vm-block--motto .rsk-vm-header { background: linear-gradient(90deg, #8a7000, #c4a300); }
.rsk-vm-text {
    margin: 0;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-dark);
    background: rgba(11,61,145,0.03);
    font-style: italic;
}
.rsk-vm-motto-text {
    font-size: 15px;
    font-weight: 600;
    font-style: italic;
    color: #0b3d91;
    text-align: center;
    padding: 14px 16px;
    background: rgba(196,163,0,0.06);
}
.rsk-vm-list {
    margin: 0;
    padding: 12px 16px 12px 32px;
    background: rgba(26,122,64,0.03);
}
.rsk-vm-list li {
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.6;
    padding: 3px 0;
}

/* ── Sejarah Singkat Timeline ── */
.rsk-sejarah {
    margin: 4px 0 20px;
    background: var(--card-bg, #fff);
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(11,61,145,0.07);
    overflow: hidden;
}
.rsk-sejarah-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: linear-gradient(90deg, #0b3d91, #42b2a6);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.rsk-sejarah-timeline {
    padding: 16px 18px 10px;
    display: flex;
    flex-direction: column;
}
/* Full-width grid: 5 kolom milestone berdampingan + connector line */
.rsk-sejarah-timeline--grid {
    flex-direction: row;
    gap: 0;
    padding: 28px 24px 24px;
    position: relative;
}
/* Garis horizontal penghubung semua milestone */
.rsk-sejarah-timeline--grid::before {
    content: '';
    position: absolute;
    top: 46px;   /* tepat di tengah badge tahun */
    left: 60px;
    right: 60px;
    height: 2px;
    background: linear-gradient(90deg, #0b3d91, #42b2a6, #0b3d91);
    opacity: 0.18;
    pointer-events: none;
}
.rsk-sejarah-timeline--grid .rsk-sj-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: none;
    border-right: none;
    padding: 0 14px;
    gap: 12px;
    position: relative;
}
.rsk-sejarah-timeline--grid .rsk-sj-year {
    width: 56px;
    font-size: 12.5px;
    padding: 6px 0;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(11,61,145,0.25);
    position: relative;
    z-index: 1;
}
.rsk-sejarah-timeline--grid .rsk-sj-desc {
    font-size: 12.5px;
    line-height: 1.6;
}
.rsk-sj-item {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11,61,145,0.06);
    align-items: flex-start;
}
.rsk-sj-item:last-child { border-bottom: none; }
.rsk-sj-year {
    flex-shrink: 0;
    width: 44px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0b3d91, #42b2a6);
    border-radius: 6px;
    padding: 3px 0;
    text-align: center;
    line-height: 1.7;
    margin-top: 1px;
}
.rsk-sj-desc {
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
}

/* Dark mode visi misi sejarah */
body.dark-mode .rsk-vm-text,
body.dark-mode .rsk-vm-list { background: rgba(255,255,255,0.04); }
body.dark-mode .rsk-vm-motto-text { background: rgba(196,163,0,0.08); color: #7ab3f5; }
body.dark-mode .rsk-vm-list li,
body.dark-mode .rsk-sj-desc { color: #c0d4e8; }
body.dark-mode .rsk-sejarah { background: #1a2235; box-shadow: 0 2px 14px rgba(0,0,0,0.3); }
body.dark-mode .rsk-vm-block { box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
body.dark-mode .rsk-sj-item { border-color: rgba(255,255,255,0.06); }
body.dark-mode .rsk-sejarah-timeline--grid .rsk-sj-item { border-color: rgba(255,255,255,0.06); }

/* Stats panel */
.rsk-stats-panel  { background: #fff; border-radius: 20px; padding: 30px 28px 24px; box-shadow: 0 8px 40px rgba(11,61,145,0.10), 0 2px 8px rgba(0,0,0,0.04); border: 1px solid rgba(11,61,145,0.08); position: sticky; top: 20px; }
.rsk-stats-header { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #0b3d91; letter-spacing: 0.5px; text-transform: uppercase; padding-bottom: 18px; border-bottom: 1px solid #edf2f7; margin-bottom: 20px; }
.rsk-stats-header i { color: #42b2a6; font-size: 16px; }

.rsk-stat-row   { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.rsk-stat-icon  { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; }
.rsk-stat-icon--blue { background: linear-gradient(135deg, #0b3d91, #1a5cb8); box-shadow: 0 3px 10px rgba(11,61,145,0.25); }
.rsk-stat-icon--teal { background: linear-gradient(135deg, #0a6b60, #42b2a6); box-shadow: 0 3px 10px rgba(66,178,166,0.25); }
.rsk-stat-icon--gold { background: linear-gradient(135deg, #7a4f00, #c47c00); box-shadow: 0 3px 10px rgba(180,120,0,0.25); }
.rsk-stat-icon--red  { background: linear-gradient(135deg, #7a1010, #c0392b); box-shadow: 0 3px 10px rgba(192,57,43,0.25); }

.rsk-stat-content { flex: 1; min-width: 0; }
.rsk-stat-top     { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.rsk-stat-num     { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 800; color: #1a2a4a; line-height: 1; }
.rsk-stat-label   { font-size: 11.5px; color: #6a7a8e; font-weight: 500; }
.rsk-stat-track   { width: 100%; height: 4px; background: #edf2f7; border-radius: 2px; overflow: hidden; }
.rsk-stat-fill    { height: 100%; border-radius: 2px; transition: width 1.2s cubic-bezier(0.23,1,0.32,1); }
.rsk-stat-fill--blue { background: linear-gradient(90deg, #0b3d91, #1a5cb8); }
.rsk-stat-fill--teal { background: linear-gradient(90deg, #0a6b60, #42b2a6); }
.rsk-stat-fill--gold { background: linear-gradient(90deg, #7a4f00, #c47c00); }
.rsk-stat-fill--red  { background: linear-gradient(90deg, #7a1010, #c0392b); }

.rsk-accred-row   { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid #edf2f7; margin-top: 4px; }
.rsk-accred-chip  { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 50px; font-size: 11px; font-weight: 700; background: rgba(66,178,166,0.10); border: 1px solid rgba(66,178,166,0.25); color: #0a6b60; }
.rsk-accred-chip i { font-size: 11px; color: #42b2a6; }


/* ============================================================
   24. DARK MODE — LENGKAP & KONSISTEN
   ============================================================ */

/* ── Base ── */
body.dark-mode { background-color: var(--dark-bg) !important; color: #c8d6e8 !important; }

/* ── Topbar dark — glass gelap ── */
body.dark-mode .rsk-topbar {
    background: linear-gradient(90deg,
        rgba(2,8,20,0.88)   0%,
        rgba(4,14,36,0.82)  55%,
        rgba(7,18,52,0.86) 100%);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom-color: rgba(66,178,166,0.10);
}
body.dark-mode .rsk-topbar::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(66,178,166,0.25) 40%,
        rgba(100,160,255,0.30) 60%,
        transparent 100%);
}
body.dark-mode .rsk-topbar-item         { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.08); }
body.dark-mode .rsk-topbar-item i       { color: #42b2a6; }
body.dark-mode .rsk-topbar-item:hover   { color: #fff; background: rgba(66,178,166,0.08); }
body.dark-mode .rsk-topbar-clock        { color: rgba(255,255,255,0.96); border-color: rgba(255,255,255,0.08); }

/* ── rsk-navbar dark — glass gelap ── */
body.dark-mode .rsk-navbar {
    background: var(--nav-bg-dark);
    backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
    -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(var(--nav-saturate));
    border-bottom-color: var(--nav-border-dark);
    box-shadow:
        0 1px 0   rgba(255,255,255,0.04) inset,
        0 4px 6   rgba(0,0,0,0.20),
        0 12px 40 rgba(0,0,0,0.40),
        0 24px 80 rgba(0,0,0,0.25);
}
body.dark-mode .rsk-navbar.scrolled {
    background: rgba(8,13,28,0.86);
    box-shadow:
        0 1px 0   rgba(255,255,255,0.06) inset,
        0 4px 8   rgba(0,0,0,0.30),
        0 16px 48 rgba(0,0,0,0.50),
        0 28px 80 rgba(0,0,0,0.30);
    border-bottom-color: rgba(66,178,166,0.20);
}
body.dark-mode .rsk-navbar::after {
    background: linear-gradient(90deg,
        rgba(66,178,166,0)    0%,
        rgba(66,178,166,0.5)  35%,
        rgba(100,160,255,0.6) 65%,
        rgba(66,178,166,0)    100%);
}
body.dark-mode .rsk-brand-name          { color: #7eb8f7 !important; }
body.dark-mode .rsk-brand-tagline       { color: #42b2a6 !important; }
body.dark-mode .rsk-brand-icon {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 4px 16px rgba(66,178,166,0.25);
}
body.dark-mode .rsk-nav li a            { color: #b8d0ea !important; }
body.dark-mode .rsk-nav li a i          { color: #42b2a6; }
body.dark-mode .rsk-nav li a:hover,
body.dark-mode .rsk-nav li.active a {
    background: rgba(66,178,166,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #e0efff !important;
    box-shadow: 0 0 0 1px rgba(66,178,166,0.15) inset;
}
body.dark-mode .rsk-dark-btn {
    background: rgba(255,215,0,0.08);
    color: #ffd43b;
    border-color: rgba(255,215,0,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
body.dark-mode .rsk-dark-btn:hover {
    background: #ffd43b;
    color: #1a1400;
    border-color: #ffd43b;
    box-shadow: 0 4px 16px rgba(255,212,59,0.35), 0 0 0 1px rgba(255,255,255,0.15) inset;
}

/* ── Hamburger dark ── */
body.dark-mode .rsk-hamburger {
    border-color: rgba(66,178,166,0.20);
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
body.dark-mode .rsk-hamburger span      { background: #7eb8f7; }
body.dark-mode .rsk-hamburger:hover     { background: rgba(66,178,166,0.12); border-color: rgba(66,178,166,0.35); }

/* ── Mobile menu dark — glass gelap ── */
body.dark-mode .rsk-mobile-menu {
    background: rgba(8,13,28,0.84);
    backdrop-filter: blur(32px) saturate(1.8);
    -webkit-backdrop-filter: blur(32px) saturate(1.8);
    border-color: rgba(66,178,166,0.12);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 8px 40px rgba(0,0,0,0.50),
        0 24px 80px rgba(0,0,0,0.35);
}
body.dark-mode .rsk-mobile-menu li      { border-color: rgba(255,255,255,0.05); }
body.dark-mode .rsk-mobile-menu li a    { color: #b8d0ea; }
body.dark-mode .rsk-mobile-menu li a i  { color: #42b2a6; }
body.dark-mode .rsk-mobile-menu li a:hover {
    background: rgba(66,178,166,0.10);
    color: #e0efff;
    padding-left: 30px;
}

/* ── Navbar Bootstrap ── */
body.dark-mode .navbar,
body.dark-mode .navbar-default          { background: rgba(10,14,26,0.97) !important; border-color: rgba(66,178,166,0.12) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.55); }
body.dark-mode .navbar-brand,
body.dark-mode .navbar-brand small      { color: #7eb8f7 !important; }
body.dark-mode .navbar-default .navbar-nav > li > a       { color: #8fa8c8 !important; }
body.dark-mode .navbar-default .navbar-nav > li > a:hover { color: #fff !important; background: rgba(66,178,166,0.10); }
body.dark-mode .navbar-default .navbar-nav > .active > a  { background: rgba(66,178,166,0.12) !important; color: #fff !important; }
body.dark-mode .dark-toggle             { background: rgba(255,215,0,0.10); color: #ffd43b; border-color: rgba(255,215,0,0.25); }
body.dark-mode .dark-toggle:hover       { background: #ffd43b; color: #1a1400; border-color: #ffd43b; }

/* ── Sections background ── */
body.dark-mode section                  { background-color: var(--dark-bg) !important; }
body.dark-mode #news                    { background-color: #0a0f1a !important; }
body.dark-mode #news-detail             { background-color: #0a0f1a !important; }
body.dark-mode #service                 { background: linear-gradient(135deg, #0a0f1a, #0d1423) !important; }

/* ── Typography — KONTRAS DIPERBAIKI ── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6                       { color: #dde8f8 !important; }
body.dark-mode p                        { color: #adc4d8 !important; }
body.dark-mode li                       { color: #adc4d8 !important; }
body.dark-mode a                        { color: #7ab8f5 !important; }
body.dark-mode a:hover                  { color: #a8d4ff !important; }
body.dark-mode small                    { color: #7a94ae !important; }

/* ── Header lama ── */
body.dark-mode header                   { background-color: #0a0f1a !important; border-bottom: 1px solid #1e2a3a; }
body.dark-mode header span,
body.dark-mode header a,
body.dark-mode header i                 { color: #8fa8c8 !important; }

/* ── Cards ── */
body.dark-mode .news-thumb              { background: var(--dark-card) !important; border-color: var(--dark-border); }
body.dark-mode .team-thumb              { background: var(--dark-card) !important; border: 1px solid var(--dark-border); }
body.dark-mode .news-ads                { background: var(--dark-card) !important; border-color: #3a4a62; }
body.dark-mode .team-thumb .foto-dokter-wrap { background: #252e40; }
body.dark-mode .news-thumb:hover        { box-shadow: 0 12px 35px rgba(66,178,166,0.18); }
body.dark-mode .news-info h3,
body.dark-mode .news-info h3 a          { color: #d0e2f8 !important; }
body.dark-mode .news-info h3 a:hover    { color: #42b2a6 !important; }
body.dark-mode .news-info p             { color: #7a96b4 !important; }

/* ── Forms ── */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control            { background-color: #18202e !important; color: #c0cce0 !important; border: 1px solid #354055 !important; }
body.dark-mode input::placeholder,
body.dark-mode .form-control::placeholder { color: #4a6080 !important; }
body.dark-mode select.form-control option { background-color: #18202e; color: #c0cce0; }
body.dark-mode #appointment label       { color: #8fa8c8 !important; }

/* ── Buttons ── */
body.dark-mode .btn                     { background: linear-gradient(135deg, var(--accent), var(--primary)) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(11,61,145,0.4) !important; }
body.dark-mode .btn-danger              { background: linear-gradient(135deg, #ff6b6b, #ee5253) !important; box-shadow: 0 4px 15px rgba(238,82,83,0.3) !important; }
body.dark-mode .btn-success             { background: linear-gradient(135deg, #2ecc71, #27ae60) !important; box-shadow: 0 4px 15px rgba(39,174,96,0.3) !important; }
body.dark-mode .btn-danger:hover,
body.dark-mode .btn-success:hover       { transform: translateY(-2px); filter: brightness(1.1); }
body.dark-mode .btn-warning             { background: linear-gradient(135deg, var(--accent), var(--primary)) !important; color: #fff !important; }
body.dark-mode .text-align-center .btn-default       { background: var(--dark-card); color: #42b2a6; border-color: #42b2a6; }
body.dark-mode .text-align-center .btn-default:hover { background: #42b2a6; color: #fff; }

/* ── Table jadwal dark mode ── sudah di section 16 */

/* ── Table fasilitas ── */
/* table-hover dark mode — sudah di section 17 */

/* ── Search ── */
body.dark-mode #doctor-praktek-pencarian .btn         { background: linear-gradient(135deg, var(--primary), #082d6b) !important; }
body.dark-mode #doctor-praktek-pencarian input[type="text"],
body.dark-mode #carikeyword input[type="text"]        { background: #18202e !important; border-color: #354055 !important; color: #c0cce0 !important; }

/* ── Edukasi ── */
body.dark-mode #edukasi                 { background: linear-gradient(135deg, #080d16, #0d1423) !important; }
body.dark-mode #edukasi .section-title h2 { color: #d8e6f8 !important; }
body.dark-mode #edukasi .section-title p  { color: #7a96b4 !important; }
body.dark-mode .edukasi-tabs .nav-tabs    { border-bottom: 3px solid #1e2b3e; }
body.dark-mode .edukasi-tabs .nav-tabs > li > a      { background: var(--dark-card); color: #9db8d8; border-color: transparent; }
body.dark-mode .edukasi-tabs .nav-tabs > li > a:hover { background: rgba(66,178,166,0.12); color: #c0d8f0; }
body.dark-mode .badge-topik             { background: rgba(66,178,166,0.15); color: #42b2a6; border-color: rgba(66,178,166,0.3); }
body.dark-mode .author                  { border-top-color: var(--dark-border); }
body.dark-mode .author-info h5          { color: #42b2a6 !important; }
body.dark-mode .author-info span        { color: #5a7090 !important; }

/* ── Footer bootstrap lama ── */
body.dark-mode footer                   { background: #080d16 !important; border-radius: 0; }
body.dark-mode footer h4                { color: #7ab8f5 !important; }
body.dark-mode footer p                 { color: #7a96b4 !important; }
body.dark-mode footer a                 { color: #7a96b4 !important; }
body.dark-mode footer a:hover           { color: #42b2a6 !important; }
body.dark-mode .stories-info h5         { color: #c0cce0 !important; }
body.dark-mode .stories-info span       { color: #7a96b4 !important; }
body.dark-mode .team-contact-info p     { color: #7a96b4 !important; }
body.dark-mode .team-contact-info a     { color: #7a96b4 !important; }
body.dark-mode .opening-hours p         { color: #7a96b4 !important; }
body.dark-mode .opening-hours span      { color: #b0c8e0 !important; }
body.dark-mode .border-top              { border-color: var(--dark-border) !important; }
body.dark-mode .copyright-text p,
body.dark-mode .footer-link a           { color: #404e62 !important; }
body.dark-mode .footer-link a:hover     { color: #42b2a6 !important; }

/* ── rsk-footer dark ── */
body.dark-mode .rsk-footer              { background: linear-gradient(165deg, #020812 0%, #060f20 50%, #020812 100%) !important; }
body.dark-mode .rsk-footer-desc         { color: rgba(255,255,255,0.72) !important; }
body.dark-mode .rsk-footer h5           { color: rgba(255,255,255,0.88) !important; border-color: rgba(255,255,255,0.08); }
body.dark-mode .rsk-footer-contact li   { color: rgba(255,255,255,0.80); }
body.dark-mode .rsk-footer-contact li a { color: rgba(255,255,255,0.80) !important; }
body.dark-mode .rsk-footer-contact li a:hover { color: #42b2a6 !important; }
body.dark-mode .rsk-hours-table tr td   { color: rgba(255,255,255,0.80); }
body.dark-mode .rsk-hours-table tr td:first-child { color: rgba(255,255,255,0.65); }
body.dark-mode .rsk-hours-table tr td:last-child  { color: rgba(255,255,255,0.88); }
body.dark-mode .rsk-footer-quicklink    { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.08); }
body.dark-mode .rsk-footer-quicklink:hover { color: #fff; }
body.dark-mode .rsk-announcement-text   { color: rgba(255,255,255,0.85) !important; }
body.dark-mode .rsk-footer-copy         { color: rgba(255,255,255,0.60); }
body.dark-mode .rsk-footer-links a      { color: rgba(255,255,255,0.65); }

/* ── Hero ── */
body.dark-mode .rsk-hero                { background: #020a1a; }
body.dark-mode .rsk-photo               { background: #0c1525; }
body.dark-mode .rsk-title               { color: #fff !important; }
body.dark-mode .rsk-desc                { color: rgba(255,255,255,0.88) !important; }
body.dark-mode .rsk-photo img           { box-shadow: 0 8px 40px rgba(0,0,0,0.55); }

/* ── About ── */
body.dark-mode .rsk-about               { background: linear-gradient(165deg, #0d1117 0%, #111827 50%, #0d1117 100%) !important; }
body.dark-mode .rsk-about-bg-accent     { background: linear-gradient(165deg, rgba(66,178,166,0.04) 0%, rgba(11,61,145,0.06) 100%); }
body.dark-mode .rsk-section-label       { background: rgba(66,178,166,0.10); border-color: rgba(66,178,166,0.20); color: #42b2a6 !important; }
body.dark-mode .rsk-section-label i     { color: #42b2a6 !important; }
body.dark-mode .rsk-about-title         { color: #e2e8f0 !important; }
body.dark-mode .rsk-about-em            { color: #7eb8f7 !important; }
body.dark-mode .rsk-about-lead          { color: #dce8f8 !important; }
body.dark-mode .rsk-about-text          { color: #a0b4c8 !important; }
body.dark-mode .rsk-phil-item           { background: var(--dark-card) !important; border-color: rgba(66,178,166,0.15) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
body.dark-mode .rsk-phil-item:hover     { border-color: rgba(66,178,166,0.35) !important; }
body.dark-mode .rsk-phil-body strong    { color: #e2e8f0 !important; }
body.dark-mode .rsk-phil-body p         { color: #9aacbe !important; }
body.dark-mode .rsk-stats-panel         { background: var(--dark-card) !important; border-color: rgba(66,178,166,0.15); box-shadow: 0 8px 40px rgba(0,0,0,0.4); }
body.dark-mode .rsk-stats-header        { color: #7eb8f7 !important; border-color: var(--dark-border); }
body.dark-mode .rsk-stats-header i      { color: #42b2a6 !important; }
body.dark-mode .rsk-stat-num            { color: #e2e8f0 !important; }
body.dark-mode .rsk-stat-label          { color: #7a90a8 !important; }
body.dark-mode .rsk-stat-track          { background: var(--dark-border); }
body.dark-mode .rsk-accred-row          { border-color: var(--dark-border); }
body.dark-mode .rsk-accred-chip         { background: rgba(66,178,166,0.12); border-color: rgba(66,178,166,0.20); color: #42b2a6 !important; }
body.dark-mode .rsk-accred-chip i       { color: #42b2a6 !important; }

/* ── Service ── */
body.dark-mode #service h2,
body.dark-mode #service h4              { color: #7ab8f5 !important; }
body.dark-mode #service p               { color: #7a96b4 !important; }




/* ============================================================
   24b. DOCTOR SECTION — Elegant Medical Professional
   ============================================================ */

/* ================================================================
   RSK DOCTOR SECTION — Elegant Medical Professional
   ================================================================ */

.rsk-team-section {
    position: relative;
    padding: 100px 0 110px;
    background: linear-gradient(175deg, #f0f7ff 0%, #e8f4ff 35%, #f0faf8 70%, #eef6ff 100%);
    /* overflow:visible agar gradient text pada judul tidak terpotong */
    overflow: visible;
}

/* Mesh background dekoratif */
.rsk-team-bg-mesh {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(66,178,166,0.07) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(11,61,145,0.06) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 60%);
    pointer-events: none;
}

.rsk-team-bg-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.rsk-team-bg-circle--1 {
    width: 500px; height: 500px;
    top: -180px; right: -150px;
    background: radial-gradient(circle, rgba(11,61,145,0.04) 0%, transparent 70%);
    border: 1px solid rgba(11,61,145,0.04);
    /* Clip sendiri, tidak bergantung pada parent overflow:hidden */
    clip-path: inset(0);
}
.rsk-team-bg-circle--2 {
    width: 360px; height: 360px;
    bottom: -100px; left: -80px;
    background: radial-gradient(circle, rgba(66,178,166,0.06) 0%, transparent 70%);
    clip-path: inset(0);
}

/* ── Header ── */
.rsk-team-header {
    text-align: center;
    margin-bottom: 64px;
}

.rsk-team-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #42b2a6;
    margin-bottom: 20px;
}
.rsk-team-label-line {
    display: block;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #42b2a6);
}
.rsk-team-label-line:last-child {
    background: linear-gradient(90deg, #42b2a6, transparent);
}
.rsk-team-label i { font-size: 13px; }

.rsk-team-title {
    font-family: 'DM Serif Display', 'Georgia', serif;
    font-size: 3.2em;
    font-weight: 400;
    color: #0c1e3e !important;
    margin: 0 0 16px;
    line-height: 1.3;
    letter-spacing: -0.5px;
}
.rsk-team-title em {
    font-style: normal;
    color: #42b2a6;
}

.rsk-team-subtitle {
    font-size: 15px;
    color: #5a6a82;
    line-height: 1.8;
    margin: 0 auto 28px;
    max-width: 500px;
}

.rsk-team-title-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rsk-team-title-ornament span {
    display: block;
    border-radius: 50%;
}
.rsk-team-title-ornament span:nth-child(1) { width: 6px; height: 6px; background: rgba(11,61,145,0.25); }
.rsk-team-title-ornament span:nth-child(2) { width: 32px; height: 2px; background: linear-gradient(90deg, #0b3d91, #42b2a6); border-radius: 2px; }
.rsk-team-title-ornament span:nth-child(3) { width: 6px; height: 6px; background: rgba(66,178,166,0.25); }

/* ── Grid Layout ── */
.rsk-doctor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* ── Kartu Dokter ── */
.rsk-doc-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(11,61,145,0.07);
    box-shadow:
        0 2px 8px rgba(11,61,145,0.04),
        0 8px 24px rgba(11,61,145,0.06);
    transition:
        transform 0.38s cubic-bezier(0.23,1,0.32,1),
        box-shadow 0.38s cubic-bezier(0.23,1,0.32,1),
        border-color 0.25s ease;
    animation: docCardIn 0.5s cubic-bezier(0.23,1,0.32,1) both;
    animation-delay: var(--delay, 0s);
}

@keyframes docCardIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rsk-doc-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 4px 12px rgba(11,61,145,0.06),
        0 20px 50px rgba(11,61,145,0.13),
        0 0 0 1px rgba(66,178,166,0.20);
    border-color: rgba(66,178,166,0.30);
}

/* Garis aksen atas saat hover */
.rsk-doc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0b3d91, #42b2a6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.38s cubic-bezier(0.23,1,0.32,1);
    z-index: 3;
    border-radius: 20px 20px 0 0;
}
.rsk-doc-card:hover::before { transform: scaleX(1); }

/* ── Foto wrap ── */
.rsk-doc-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3/3.5;
    overflow: hidden;
    background: linear-gradient(160deg, #dce8f8, #c8e0f4);
}

.rsk-doc-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.55s cubic-bezier(0.23,1,0.32,1), filter 0.38s ease;
}
.rsk-doc-card:hover .rsk-doc-photo-wrap img {
    transform: scale(1.06);
    filter: brightness(0.75) saturate(0.8);
}

/* Overlay info saat hover */
.rsk-doc-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11,61,145,0.0)  0%,
        rgba(11,61,145,0.82) 100%
    );
    display: flex;
    align-items: flex-end;
    padding: 20px 16px;
    opacity: 0;
    transition: opacity 0.38s ease;
}
.rsk-doc-card:hover .rsk-doc-photo-overlay { opacity: 1; }

.rsk-doc-sip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}
.rsk-doc-sip i {
    color: #42b2a6;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}
.rsk-doc-sip span {
    font-size: 10.5px;
    color: rgba(255,255,255,0.88);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* Badge spesialis / umum */
.rsk-doc-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #0b3d91, #0d52c0);
    color: #fff;
    box-shadow: 0 2px 8px rgba(11,61,145,0.35);
    z-index: 2;
    backdrop-filter: blur(4px);
}
.rsk-doc-badge--umum {
    background: linear-gradient(135deg, #42b2a6, #0a8c80);
    box-shadow: 0 2px 8px rgba(66,178,166,0.35);
}
.rsk-doc-badge--gigi {
    background: linear-gradient(135deg, #c47c00, #7a4f00);
    box-shadow: 0 2px 8px rgba(196,124,0,0.35);
}

/* ── Info bawah kartu ── */
.rsk-doc-info {
    padding: 18px 20px 20px;
}

.rsk-doc-specialty {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #0b3d91;
    margin: 0 0 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rsk-doc-specialty::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, #42b2a6, #0b3d91);
    border-radius: 2px;
    flex-shrink: 0;
}
.rsk-doc-specialty--umum        { color: #0a7a70; }
.rsk-doc-specialty--umum::before { background: linear-gradient(90deg, #0a8c80, #42b2a6); }
.rsk-doc-specialty--gigi        { color: #7a4f00; }
.rsk-doc-specialty--gigi::before { background: linear-gradient(90deg, #c47c00, #7a4f00); }

.rsk-doc-name {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #0c1e3e;
    margin: 0 0 12px;
    line-height: 1.4;
}

.rsk-doc-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(11,61,145,0.12), rgba(66,178,166,0.12), transparent);
}

/* ── Counter ── */
.rsk-doc-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 32px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #7a8a9e;
    font-weight: 500;
}
#rsk-doc-shown {
    font-size: 22px;
    font-weight: 800;
    color: #0b3d91;
    line-height: 1;
}
.rsk-doc-counter-sep { font-size: 16px; font-weight: 300; color: #b0bcc8; margin: 0 2px; }
.rsk-doc-counter > span:nth-child(3) { font-size: 18px; font-weight: 700; color: #42b2a6; }
.rsk-doc-counter-label { margin-left: 8px; font-size: 12px; color: #9aaab8; letter-spacing: 0.5px; }

/* ── Toggle button ── */
.rsk-doc-toggle-wrap {
    display: flex;
    justify-content: center;
}

.rsk-doc-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 36px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    background: linear-gradient(135deg, #0b3d91 0%, #0d52c0 50%, #42b2a6 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    box-shadow:
        0 4px 15px rgba(11,61,145,0.25),
        0 8px 30px rgba(11,61,145,0.15),
        0 0 0 1px rgba(255,255,255,0.10) inset;
    transition:
        background-position 0.4s ease,
        transform 0.3s cubic-bezier(0.23,1,0.32,1),
        box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Shine sweep */
.rsk-doc-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left 0.5s ease;
}
.rsk-doc-toggle-btn:hover::before { left: 100%; }

.rsk-doc-toggle-btn:hover {
    background-position: 100% 0%;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(11,61,145,0.30),
        0 14px 40px rgba(11,61,145,0.20),
        0 0 0 1px rgba(255,255,255,0.15) inset;
}
.rsk-doc-toggle-btn:active {
    transform: translateY(-1px) scale(0.99);
}

.rsk-doc-toggle-icon { font-size: 16px; transition: transform 0.3s ease; }
.rsk-doc-toggle-arrow { font-size: 12px; transition: transform 0.35s cubic-bezier(0.23,1,0.32,1); }
.rsk-doc-toggle-btn.expanded .rsk-doc-toggle-arrow { transform: rotate(180deg); }
.rsk-doc-toggle-btn.expanded .rsk-doc-toggle-icon  { transform: rotate(15deg); }

/* ── Hidden state ── */
.rsk-doc-hidden {
    display: none;
}
.rsk-doc-hidden.rsk-doc-visible {
    display: block;
    animation: docCardIn 0.45s cubic-bezier(0.23,1,0.32,1) both;
    animation-delay: var(--delay, 0s);
}

/* ================================================================
   DARK MODE
   ================================================================ */
body.dark-mode .rsk-team-section {
    background: linear-gradient(175deg, #0a0f1a 0%, #0d1320 35%, #0a1518 70%, #0a0f1a 100%) !important;
}
body.dark-mode .rsk-team-bg-mesh {
    background-image:
        radial-gradient(circle at 15% 25%, rgba(66,178,166,0.05) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(11,61,145,0.08) 0%, transparent 40%);
}
body.dark-mode .rsk-team-title  { color: #e2eeff !important; }
body.dark-mode .rsk-team-title em { color: #42b2a6; }
body.dark-mode .rsk-team-subtitle { color: #88a4c0 !important; }
body.dark-mode .rsk-team-label { color: #42b2a6 !important; }

body.dark-mode .rsk-doc-card {
    background: #1a2235;
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.35);
}
body.dark-mode .rsk-doc-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), 0 20px 50px rgba(0,0,0,0.50), 0 0 0 1px rgba(66,178,166,0.25);
    border-color: rgba(66,178,166,0.25);
}
body.dark-mode .rsk-doc-photo-wrap { background: linear-gradient(160deg, #1a2640, #111c30); }
body.dark-mode .rsk-doc-name       { color: #d8e6f8 !important; }
body.dark-mode .rsk-doc-specialty  { color: #7ab8f7 !important; }
body.dark-mode .rsk-doc-specialty--umum { color: #42b2a6 !important; }
body.dark-mode .rsk-doc-specialty--gigi { color: #c4901a !important; }
body.dark-mode .rsk-doc-divider {
    background: linear-gradient(90deg, rgba(66,178,166,0.15), rgba(11,61,145,0.15), transparent);
}
body.dark-mode #rsk-doc-shown  { color: #7ab8f7; }
body.dark-mode .rsk-doc-counter { color: #7a90a8 !important; }
body.dark-mode .rsk-doc-counter > span:nth-child(3) { color: #42b2a6; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1200px) {
    .rsk-doctor-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 900px) {
    .rsk-team-title  { font-size: 2.6em; }
    .rsk-doctor-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
    .rsk-team-section { padding: 70px 0 80px; }
    .rsk-team-header  { margin-bottom: 44px; }
    .rsk-team-title   { font-size: 2.1em; }
    .rsk-doctor-grid  { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .rsk-doc-name     { font-size: 12.5px; }
    .rsk-doc-info     { padding: 14px 14px 16px; }
}
@media (max-width: 480px) {
    .rsk-team-title   { font-size: 1.8em; }
    .rsk-doctor-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rsk-doc-name     { font-size: 11.5px; }
    .rsk-doc-specialty { font-size: 9.5px; letter-spacing: 0.8px; }
    .rsk-doc-badge    { font-size: 9px; padding: 3px 8px; }
    .rsk-doc-toggle-btn { padding: 12px 26px; font-size: 13px; }
}
@media (max-width: 360px) {
    .rsk-doctor-grid  { grid-template-columns: 1fr; gap: 12px; }
}


/* ============================================================
   25. RESPONSIVE
   ============================================================ */

/* 992px — Tablet landscape */
@media only screen and (max-width: 992px) {
    h1 { font-size: 3.5em; }
    h2 { font-size: 2.5em; }

    .rsk-topbar      { height: auto; min-height: 40px; padding: 4px 0; }
    .rsk-topbar-right { display: none; }
    .rsk-topbar-item  { font-size: 11px; padding: 3px 10px; border-right: none; }

    /* Navbar: tampilkan hamburger, sembunyikan nav desktop */
    .rsk-nav       { display: none; }
    .rsk-hamburger { display: flex; }
    .rsk-navbar .container { flex-wrap: wrap; height: auto; padding: 12px 16px; }
    .rsk-brand     { margin-right: auto; }
    .rsk-navbar-actions { gap: 8px; }
    .rsk-mobile-menu { top: 64px; }

    #about, #team, #news, #news-detail { padding-top: 70px; padding-bottom: 70px; }
    #appointment   { padding-top: 70px; }
    .dokter-item   { margin-bottom: 20px; }

    #edukasi       { padding: 60px 0; }
    #edukasi .section-title h2 { font-size: 2em; }
    .edukasi-tabs .nav-tabs > li > a { padding: 12px 20px; font-size: 14px; }
    .news-info h3  { font-size: 1.2em; min-height: auto; }

    .table-jadwal thead th  { padding: 14px 14px; font-size: 12px; }
    .table-jadwal tbody td  { padding: 12px 14px; font-size: 13px; }
    .table.table-hover thead th { padding: 12px 12px; font-size: 12px; }
    .table.table-hover tbody td { padding: 10px 12px; font-size: 13px; }

    .rsk-slide       { min-height: 500px; }
    .rsk-title       { font-size: 2.1em; }
    .rsk-text        { padding: 50px 40px 70px 44px; }
    .rsk-photo       { padding: 24px 28px 24px 60px; }
    .rsk-photo img   { max-height: 420px; }
    .rsk-about       { padding: 80px 0 90px; }
    .rsk-about-title { font-size: 2.1em; }
}

/* 900px — Slider susun vertikal */
@media (max-width: 900px) {
    .rsk-slide { flex-direction: column; min-height: auto; }
    .rsk-text, .rsk-photo { flex: none; max-width: 100%; width: 100%; }
    .rsk-text   { order: 2; padding: 36px 30px 52px; }
    .rsk-text::after { display: none; }
    .rsk-photo  { order: 1; padding: 20px 20px 14px; }
    .rsk-photo img { max-height: 320px; border-radius: 12px; }
    .rsk-hero .owl-dots { left: 30px; bottom: 16px; }
    .rsk-arr--prev { left: 6px; }
    .rsk-arr--next { right: 6px; }
    .rsk-about       { padding: 60px 0; }
    .rsk-stats-panel { margin-top: 36px; position: static; }
}

/* ============================================================
   25b. MOBILE — Comprehensive Fix (≤767px)
   ============================================================ */

/* ── 767px: Tablet portrait + semua HP ── */
@media only screen and (max-width: 767px) {

    /* === OVERFLOW FIX — paling utama === */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    /* Cegah overflow — kecualikan Owl Carousel & tabel */
    body *:not(.owl-stage):not(.owl-item):not(.owl-stage-outer):not(.rsk-slide):not(.table-responsive):not(.table-responsive *) {
        max-width: 100%;
        box-sizing: border-box;
    }
    .owl-stage, .owl-item, .owl-stage-outer, .rsk-slide { max-width: none !important; }
    .table-responsive, .table-responsive * { max-width: none; }
    /* Pastikan semua section terkunci — JANGAN masukkan .rsk-navbar & .container */
    section, .rsk-hero,
    .rsk-footer, .rsk-list-section,
    .rsk-jadwal-section, .rsk-team-section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* === TIPOGRAFI === */
    h1 { font-size: 2.2em; line-height: 1.2; }
    h2 { font-size: 1.9em; line-height: 1.25; }
    h3 { font-size: 1.4em; }
    p  { font-size: 14px; }

    /* === TOPBAR === */
    .rsk-topbar { display: none; }
    /* Karena topbar hilang, navbar geser ke atas */
    .rsk-navbar { top: 0 !important; }
    body { padding-top: 64px !important; }
    /* Mobile menu juga ikut ke atas */
    .rsk-mobile-menu { top: 64px !important; max-height: calc(100vh - 64px) !important; }

    /* === NAVBAR (bootstrap lama) === */
    .navbar-default { min-height: 60px; padding: 0 15px; }
    .navbar-default .navbar-brand { font-size: 1.3em; }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form   { border-color: transparent; }
    .navbar-default .navbar-nav    { margin: 0; width: 100%; }
    .navbar-default .navbar-nav > li     { display: block; width: 100%; }
    .navbar-default .navbar-nav li a     { display: block; padding: 12px 15px; border-bottom: 1px solid rgba(11,61,145,0.08); border-radius: 0; }
    .navbar-toggle  { margin-top: 12px; margin-bottom: 12px; }
    .rsk-mobile-menu { top: 62px; max-height: calc(100vh - 62px); }

    /* === SECTION PADDING === */
    #about, #team, #news, #news-detail,
    #edukasi, #appointment { padding-top: 55px; padding-bottom: 55px; }

    /* === HERO SLIDER === */
    .rsk-slide       { flex-direction: column; min-height: auto; }
    .rsk-text        { padding: 32px 20px 28px; flex: none; }
    .rsk-title       { font-size: 1.75em; line-height: 1.2; }
    .rsk-desc        { font-size: 13.5px; }
    .rsk-badge       { font-size: 10.5px; padding: 5px 12px; }
    .rsk-photo       { flex: none; }
    .rsk-photo img   { max-height: 220px; border-radius: 0; }
    .rsk-hero .owl-dots { left: 20px; bottom: 12px; }

    /* === ABOUT === */
    .rsk-about-title { font-size: 1.75em; }
    .rsk-about-lead  { font-size: 14.5px; }
    .rsk-about-text  { font-size: 13.5px; }
    .rsk-vm-text     { font-size: 12.5px; }
    .rsk-vm-list li  { font-size: 12px; }
    .rsk-vm-motto-text { font-size: 13.5px; }
    .rsk-sj-desc     { font-size: 12px; }
    .rsk-sj-year     { width: 40px; font-size: 11px; }
    .rsk-sejarah-timeline--grid {
        flex-direction: column;
        padding: 14px 14px 10px;
    }
    .rsk-sejarah-timeline--grid .rsk-sj-item {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        border-right: none;
        border-bottom: 1px solid rgba(11,61,145,0.07);
        padding: 10px 0;
    }
    .rsk-sejarah-timeline--grid .rsk-sj-year { margin: 2px 0 0; }
    .rsk-about-em    { display: block; }
    .rsk-about-bar   { margin: 16px 0; }
    .rsk-phil-item   { padding: 14px 16px; gap: 12px; }
    .rsk-phil-icon   { width: 38px; height: 38px; font-size: 16px; flex-shrink: 0; }
    .rsk-director    { padding: 16px 18px; gap: 12px; }
    .rsk-director-name { font-size: 14px; }
    .rsk-director-photo { width: 50px; height: 50px; flex-shrink: 0; }
    .rsk-stats-panel { padding: 22px 18px 18px; border-radius: 14px; margin-top: 30px; }
    .rsk-stat-row    { gap: 10px; padding: 12px 0; }

    /* === SECTION LABEL === */
    .rsk-section-label { font-size: 10px; letter-spacing: 1.8px; }

    /* === EDUKASI — MOBILE FIX === */
    #edukasi { padding: 60px 0 70px; }
    #edukasi .section-title { margin-bottom: 36px; }
    #edukasi .section-title h2 { font-size: 2em; }
    #edukasi .section-title p  { font-size: 14px; }

    /* Tab nav: scroll horizontal, tidak wrap */
    .edukasi-tabs { margin-bottom: 28px; }
    .edukasi-tabs .nav-tabs {
        /* Ubah dari pill centered ke scroll row */
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
        padding: 5px;
        gap: 6px;
        width: 100%;
        scrollbar-width: none; /* Firefox: hilangkan scrollbar */
        -ms-overflow-style: none;
    }
    .edukasi-tabs .nav-tabs::-webkit-scrollbar { display: none; }
    .edukasi-tabs .nav-tabs > li { flex-shrink: 0; margin-bottom: 0; }
    .edukasi-tabs .nav-tabs > li > a {
        padding: 10px 18px;
        font-size: 13px;
        gap: 6px;
        white-space: nowrap;
    }
    .edukasi-tabs .nav-tabs > li > a i { font-size: 14px; }

    /* Grid edukasi: 1 kolom di HP */
    .tab-content { padding-top: 4px; }
    .rsk-edu-grid--video,
    .rsk-edu-grid--artikel,
    .rsk-edu-grid--infografis { grid-template-columns: 1fr; gap: 16px; }

    /* Kartu news-thumb lebih compact */
    .news-thumb { border-radius: 14px; }
    .news-info  { padding: 16px 18px 18px; }
    .news-info h3 { font-size: 14px; margin: 4px 0 8px; min-height: auto; }
    .news-info p  { font-size: 13px; -webkit-line-clamp: 2; }

    /* === DOKTER === */
    .rsk-team-section { padding: 60px 0 70px; }
    .rsk-team-header  { margin-bottom: 36px; }
    .rsk-team-title   { font-size: 2em; }
    .rsk-team-subtitle { font-size: 13.5px; }
    .rsk-doctor-grid  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rsk-doc-name     { font-size: 12.5px; }
    .rsk-doc-info     { padding: 12px 14px 14px; }
    .rsk-doc-specialty { font-size: 10px; letter-spacing: 0.8px; }
    .rsk-doc-badge    { font-size: 9.5px; padding: 3px 8px; top: 10px; right: 10px; }
    .rsk-doc-toggle-btn { padding: 12px 28px; font-size: 13px; }
    .rsk-doc-counter  { font-size: 12px; margin-bottom: 24px; }

    /* === JADWAL === */
    .rsk-jadwal-section { padding: 60px 0 70px; }
    .rsk-jadwal-header  { margin-bottom: 28px; }
    .rsk-jadwal-title   { font-size: 1.9em; }
    .rsk-jadwal-stats   {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        padding: 14px 16px;
        border-radius: 14px;
        width: 100%;
    }
    .rsk-jadwal-stat    { padding: 6px 12px; flex: 1; min-width: 0; }
    .rsk-jadwal-stat-div { height: 30px; }
    .rsk-stat-num       { font-size: 20px; }
    .rsk-stat-label     { font-size: 10px; }
    .rsk-stat-icon      { font-size: 18px; }

    /* Tabel jadwal: sembunyikan kolom Hari di 767px, tunjukkan Poliklinik & Jam */
    .rsk-tbl thead th:nth-child(3),
    .rsk-tbl tbody td:nth-child(3) { display: none; }
    .table-jadwal thead th { padding: 13px 12px; font-size: 10.5px; }
    .table-jadwal tbody td { padding: 11px 12px; font-size: 12.5px; }
    .rsk-poli  { font-size: 10.5px; padding: 3px 8px; }
    .rsk-poli i { display: none; }
    .rsk-jadwal-card-footer { font-size: 11px; padding: 12px 16px; }
    .rsk-jadwal-card  { border-radius: 14px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* === TOMBOL === */
    .btn         { padding: 10px 20px; font-size: 13px; }
    .btn-warning { padding: 10px 25px !important; font-size: 13px !important; }
    .text-align-center .section-btn { display: block; margin: 8px auto; max-width: 300px; width: 100%; }
    #btn-toggle-dokter { width: 100%; max-width: 320px; }

    /* === FOOTER === */
    footer { padding-top: 50px; padding-bottom: 20px; border-radius: 10px; }
    .footer-thumb { padding-bottom: 15px; text-align: center; }
    .footer-thumb h4  { margin-top: 20px; }
    .contact-info     { text-align: left; }
    .border-top, .copyright-text, .footer-link { text-align: center; }
    .copyright-text   { margin-top: 10px; }
    .angle-up-btn     { bottom: 6em; }
    .social-icon li a { width: 30px; height: 30px; line-height: 30px; font-size: 13px; }
    .news-ads         { padding: 25px; }

    .rsk-footer { padding: 50px 0 0; }
    .rsk-footer .col-md-4,
    .rsk-footer .col-sm-4 { margin-bottom: 32px; }
    .rsk-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .rsk-footer-links  { display: none; }
    .rsk-brand-icon    { width: 40px; height: 40px; font-size: 18px; }
    .rsk-brand-name    { font-size: 13.5px; }

    /* === MISC === */
    .profile img { width: 50px; height: 50px; }
    .col-sm-6.dokter-item { margin-bottom: 18px; }
    .news-sidebar { margin-top: 2em; }
    #appointment .form-control { font-size: 13px; }
    .table-jadwal-wrapper { border-radius: 12px; margin-bottom: 25px; }
    .table.table-hover    { min-width: 480px; }
}

/* ── 575px: HP besar ── */
@media only screen and (max-width: 575px) {
    h1 { font-size: 1.9em; line-height: 1.2; }
    h2 { font-size: 1.7em; }
    h3 { font-size: 1.35em; }
    h4 { font-size: 1.15em; }

    .container { padding-left: 14px; padding-right: 14px; }
    .rsk-topbar { display: none; }

    /* Hero */
    .rsk-title  { font-size: 1.45em; }
    .rsk-text   { padding: 24px 18px 30px; }
    .rsk-photo img  { max-height: 200px; }
    .rsk-hero .owl-dots { bottom: 10px; left: 16px; }

    /* About */
    .rsk-about       { padding: 50px 0; }
    .rsk-about-title { font-size: 1.5em; }
    .rsk-director    { flex-wrap: wrap; }
    .rsk-director-icon { display: none; }
    .rsk-stat-row    { gap: 10px; }
    .rsk-stat-num    { font-size: 15px; }

    /* Edukasi */
    #edukasi .section-title h2  { font-size: 1.75em; }
    .rsk-edukasi-h2-accent      { font-size: 0.9em !important; }
    .edukasi-tabs .nav-tabs > li > a { padding: 9px 14px; font-size: 12.5px; }
    /* Grid edukasi: 1 kolom, lebih compact */
    .rsk-edu-grid { gap: 14px; }
    .news-info h3  { font-size: 13.5px; }
    .news-info p   { font-size: 12.5px; }
    .badge-kategori { font-size: 10px; padding: 3px 10px; }

    /* Dokter */
    .rsk-team-title   { font-size: 1.75em; }
    .rsk-doctor-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rsk-doc-name     { font-size: 11.5px; }
    .rsk-doc-specialty { font-size: 9.5px; }

    /* Jadwal: sembunyikan kolom Poliklinik juga */
    .rsk-tbl thead th:nth-child(2),
    .rsk-tbl tbody td:nth-child(2),
    .rsk-tbl thead th:nth-child(3),
    .rsk-tbl tbody td:nth-child(3) { display: none; }
    .rsk-jadwal-title   { font-size: 1.7em; }
    .rsk-jadwal-stats   { gap: 0; }
    .rsk-jadwal-stat    { padding: 4px 8px; }
    .rsk-stat-num       { font-size: 18px; }
    .table-jadwal thead th  { font-size: 10px; padding: 11px 10px; letter-spacing: 0.4px; }
    .table-jadwal tbody td  { font-size: 12px; padding: 10px 10px; }
    .table.table-hover      { min-width: 420px; }
    .rsk-td-jam         { font-size: 12px !important; }

    /* Misc */
    .btn      { font-size: 12px; padding: 9px 18px; }
    #google-map iframe { height: 250px; }
    .rsk-footer-copy { font-size: 11px; }
    .team-thumb .foto-dokter-wrap { aspect-ratio: 4/3; }
    .team-info h3  { font-size: 15px; }
    .spesialis     { font-size: 13px; }
}

/* ── 480px: HP standar (iPhone SE, Galaxy A) ── */
@media only screen and (max-width: 480px) {
    /* Grid edukasi tetap 1 kolom */
    .rsk-edu-grid { gap: 14px; }

    /* Dokter: tetap 2 kolom tapi lebih compact */
    .rsk-doctor-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Jadwal stats: wrap jadi 3 baris kalau perlu */
    .rsk-jadwal-stats { padding: 12px 14px; }

    /* Hero sedikit lebih kecil */
    .rsk-title    { font-size: 1.5em; }
    .rsk-text     { padding: 22px 16px 28px; }
    .rsk-photo img { max-height: 190px; }

    /* Tab edukasi: icon + teks singkat */
    .edukasi-tabs .nav-tabs > li > a { padding: 9px 14px; font-size: 12.5px; }
    .news-thumb   { border-radius: 12px; }
    .news-info    { padding: 14px 15px 16px; }
}

/* ── 400px: HP kecil ── */
@media only screen and (max-width: 400px) {
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.2em; }
    .navbar-default .navbar-brand { font-size: 1.1em; }
    .rsk-brand-name { font-size: 12px; }

    /* Hero */
    .rsk-title  { font-size: 1.25em; }
    .rsk-text   { padding: 18px 14px 28px; }
    .rsk-photo img { max-height: 175px; }
    .rsk-badge  { font-size: 9.5px; padding: 4px 10px; }

    /* About */
    .rsk-about-title { font-size: 1.3em; }
    .rsk-stats-panel { padding: 18px 14px 14px; }

    /* Edukasi */
    #edukasi .section-title h2  { font-size: 1.55em; }
    .edukasi-tabs .nav-tabs > li > a { padding: 8px 12px; font-size: 12px; }
    .edukasi-tabs .nav-tabs > li > a span { display: none; } /* icon saja di HP kecil */
    .edukasi-tabs .nav-tabs > li > a i { font-size: 16px; }

    /* Dokter */
    .rsk-team-title { font-size: 1.6em; }
    .rsk-doctor-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .rsk-doc-info   { padding: 10px 10px 12px; }
    .rsk-doc-name   { font-size: 11px; }
    .rsk-doc-specialty { display: none; } /* hemat ruang */
    .rsk-doc-badge  { font-size: 8.5px; padding: 2px 6px; top: 8px; right: 8px; }
    .rsk-doc-toggle-btn { width: 100%; justify-content: center; }
    #btn-toggle-dokter { max-width: 100%; }

    /* Jadwal */
    .rsk-jadwal-title   { font-size: 1.55em; }
    .rsk-jadwal-stats   { padding: 12px 12px; }
    .rsk-stat-num       { font-size: 16px; }
    .rsk-stat-label     { font-size: 9px; }
    .table-jadwal thead th  { font-size: 10px; padding: 10px 8px; }
    .table-jadwal tbody td  { font-size: 11.5px; padding: 9px 8px; }
    .rsk-td-jam         { font-size: 11px !important; letter-spacing: 0 !important; }
    .rsk-poli           { font-size: 10px; padding: 2px 6px; }
    .table.table-hover  { min-width: 360px; }
    .rsk-jadwal-card-footer { display: none; } /* hemat ruang */

    /* Misc */
    .team-info    { padding: 12px 15px 0; }
    .team-info h3 { font-size: 14px; }
    .team-contact-info p { font-size: 11px; }
    .btn-warning  { padding: 8px 18px !important; font-size: 11px !important; }
    .news-info h3 { font-size: 13px; }
    .news-info p  { font-size: 12px; }
}


/* ============================================================
   26. ACCESSIBILITY
   ============================================================ */
.edukasi-tabs .nav-tabs > li > a:focus,
.news-info .btn:focus,
.section-btn:focus,
.dark-toggle:focus,
.rsk-dark-btn:focus {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}


/* ============================================================
   27. PRINT
   ============================================================ */
@media print {
    .rsk-topbar,
    .rsk-navbar,
    .rsk-hero,
    .rsk-arr,
    .edukasi-tabs,
    .text-align-center { display: none !important; }

    #edukasi { background: white; }
    .news-thumb { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    .table-jadwal { box-shadow: none; border: 1px solid #ccc; }
    .table-jadwal thead tr { background: #0b3d91; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table-jadwal tbody tr:nth-child(even) { background-color: #f4fbff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   DARK MODE TAMBAHAN — Kontras Rating CTA & Misc Icons
   ============================================================ */

/* Rating CTA dark */
body.dark-mode .rsk-rating-cta-inner {
    background: linear-gradient(135deg, #1c1400, #1f1200) !important;
    border-color: #d97706 !important;
}
body.dark-mode .rsk-rating-cta-text strong { color: #fef3c7 !important; }
body.dark-mode .rsk-rating-cta-text span   { color: #fde68a !important; }
body.dark-mode .rsk-rating-cta-icon        { color: #fbbf24 !important; }

/* Icon topbar lebih terang */
body.dark-mode .rsk-topbar-item i { color: #56c8bc !important; }
body.dark-mode .rsk-topbar-clock i { color: #56c8bc !important; }

/* Icon footer lebih terang */
body.dark-mode .rsk-footer h5 i       { color: #56c8bc !important; }
body.dark-mode .rsk-fc-icon           { background: rgba(66,178,166,0.18) !important; border-color: rgba(66,178,166,0.25) !important; }
body.dark-mode .rsk-fc-icon i         { color: #56c8bc !important; }

/* Sejarah header icon */
body.dark-mode .rsk-sejarah-header    { background: linear-gradient(90deg, #0b3d91, #42b2a6); }

/* Jadwal card footer icon */
body.dark-mode .rsk-jadwal-card-footer i { color: #56c8bc !important; }
body.dark-mode .rsk-jadwal-card-footer   { color: #7a90a8 !important; }

/* Stats panel header */
body.dark-mode .rsk-stats-header i  { color: #56c8bc !important; }

/* Accred chip icon */
body.dark-mode .rsk-accred-chip i   { color: #56c8bc !important; }

/* Team label icon */
body.dark-mode .rsk-team-label i    { color: #56c8bc !important; }

/* Jadwal label icon */
body.dark-mode .rsk-jadwal-label    { color: #56c8bc !important; }
body.dark-mode .rsk-jadwal-label i  { color: #56c8bc !important; }

/* ============================================================
   TOMBOL RATING — Halaman Home
   Tambahkan ke bagian akhir file CSS utama (main.css / style.css)
   atau buat file terpisah dan include di <head>
   ============================================================ */

/* ── 1. Tombol di dalam slide hero ──
   Menggunakan base .btn-rating-hero dari hcstyle.css,
   ditambah sedikit override agar sesuai konteks slider
*/
.btn-rating-home-hero {
    margin-top: 20px;
    font-size: 13.5px;
    padding: 10px 22px;
    /* Subtle amber glow agar beda dari badge slide */
    border-color: rgba(251, 191, 36, 0.55);
}

.btn-rating-home-hero i {
    color: #fbbf24;
    font-size: 14px;
}

.btn-rating-home-hero:hover,
.btn-rating-home-hero:focus {
    background: rgba(245, 158, 11, 0.30);
    border-color: #fbbf24;
    color: #fff;
}

/* ── 2. CTA Banner di section About ──
   Box bergaya card yang memuat teks ajakan + tombol rating
*/
.rsk-rating-cta {
    margin-top: 28px;
}

.rsk-rating-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #fffbeb, #fff7ed);
    border: 1.5px solid #fcd34d;
    border-radius: 16px;
    padding: 16px 20px;
    flex-wrap: wrap;
}

.rsk-rating-cta-text {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.rsk-rating-cta-icon {
    font-size: 26px;
    color: #f59e0b;
    flex-shrink: 0;
}

.rsk-rating-cta-text div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rsk-rating-cta-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    line-height: 1.3;
}

.rsk-rating-cta-text span {
    font-size: 12.5px;
    color: #b45309;
    line-height: 1.5;
}

/* Tombol di dalam CTA banner — sama persis .btn-rating-form dari hcstyle.css */
.btn-rating-about {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Dark mode ── */
body.dark-mode .rsk-rating-cta-inner {
    background: linear-gradient(135deg, #1c1400, #1f1200);
    border-color: #d97706;
}

body.dark-mode .rsk-rating-cta-text strong { color: #fde68a; }
body.dark-mode .rsk-rating-cta-text span   { color: #fcd34d; }

/* ── Responsive ── */
@media (max-width: 576px) {
    .rsk-rating-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .btn-rating-about {
        width: 100%;
        justify-content: center;
    }
    .btn-rating-home-hero {
        font-size: 12.5px;
        padding: 9px 18px;
    }
}

.rating-page {
    padding-top: 120px !important;
}
 
@media (max-width: 767px) {
    .rating-page {
        padding-top: 80px !important;
    }
}