/* Ruang Bestari Homepage
-------------------------------------------------------------- */

.rb-homepage {
width: 100%;
}

.rb-homepage__container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 32px 24px 64px;
box-sizing: border-box;
}


/* Hero: GSBSB + platform statistics
-------------------------------------------------------------- */

.rb-home-hero {
display: block;
width: 100%;
height: 360px;
}

.rb-home-banner {
position: relative;
min-width: 0;
height: 100%;
overflow: hidden;
border-radius: 16px;
background: var(--global-palette7);
}

.rb-home-banner__link {
position: relative;
display: block;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
}

.rb-home-banner__media,
.rb-home-banner__image {
width: 100%;
height: 100%;
}

.rb-home-banner__image {
display: block;
object-fit: cover;
transition: transform .4s ease;
}

.rb-home-banner__link:hover .rb-home-banner__image {
transform: scale(1.025);
}

.rb-home-banner__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(9, 11, 13, .80) 0%,
rgba(9, 11, 13, .57) 43%,
rgba(9, 11, 13, .12) 78%
),
linear-gradient(
0deg,
rgba(9, 11, 13, .52) 0%,
rgba(9, 11, 13, 0) 58%
);
}

.rb-home-banner__content {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: min(680px, 86%);
padding: 36px;
}

.rb-home-banner__badge {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
padding: 6px 10px;
border-radius: 999px;
background: var(--global-palette1);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .04em;
text-transform: uppercase;
}

.rb-home-banner__title {
margin: 0;
color: #fff;
font-size: clamp(27px, 2.25vw, 36px);
font-weight: 700;
line-height: 1.22;
letter-spacing: -.025em;
}

.rb-home-banner__excerpt {
max-width: 590px;
margin: 12px 0 0;
color: rgba(255,255,255,.86);
font-size: 14px;
line-height: 1.55;
}

.rb-home-banner__cta {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 20px;
padding: 10px 14px;
border-radius: 12px;
background: var(--global-palette1);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
transition:
background .2s ease,
transform .2s ease;
}

.rb-home-banner__link:hover .rb-home-banner__cta {
background: var(--global-palette2);
transform: translateY(-1px);
}


/* Statistics
-------------------------------------------------------------- */

.rb-home-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 12px;
min-width: 0;
height: 100%;
}

.rb-stat-card {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 0;
padding: 22px;
border: 1px solid var(--global-palette7);
border-radius: 14px;
background: var(--global-palette9);
}

.rb-stat-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 16px;
border-radius: 10px;
background: rgba(255,117,31,.10);
color: var(--global-palette1);
}

.rb-stat-card__icon svg {
width: 19px;
height: 19px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.rb-stat-card__value {
display: block;
color: var(--global-palette3);
font-size: clamp(23px, 2vw, 30px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.025em;
}

.rb-stat-card__label {
display: block;
margin-top: 7px;
color: var(--global-palette5);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
}


/* Homepage body
-------------------------------------------------------------- */

.rb-homepage__body {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 32px;
margin-top: 52px;
}

.rb-homepage__main,
.rb-homepage__sidebar {
min-width: 0;
}

.rb-homepage__feed,
.rb-homepage__sidebar {
margin: 0;
}

.rb-homepage h2 {
margin: 0;
}


/* Kadence cleanup for Beranda
-------------------------------------------------------------- */

.page-id-18832 .entry-hero.page-hero-section {
display: none;
}

.page-id-18832 .content-area {
margin-top: 0;
margin-bottom: 0;
}

.page-id-18832 .entry.single-entry {
background: transparent;
box-shadow: none;
border-radius: 0;
}

.page-id-18832 .entry-content-wrap {
padding: 0;
}

.page-id-18832 .entry-content {
margin: 0;
}


/* Dark mode
-------------------------------------------------------------- */

html[data-rb-theme="dark"] .rb-stat-card {
border-color: #2B3035;
background: #181B1E;
}

html[data-rb-theme="dark"] .rb-stat-card__icon {
background: rgba(255,117,31,.14);
color: #FF8A45;
}

html[data-rb-theme="dark"] .rb-stat-card__value {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-stat-card__label {
color: #A8AFB6;
}


/* Tablet
-------------------------------------------------------------- */

@media (max-width: 1199px) {

.rb-homepage__container {
padding-right: 20px;
padding-left: 20px;
}

.rb-home-hero {
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
height: 400px;
}

.rb-home-banner__content {
padding: 28px;
}

.rb-stat-card {
padding: 18px;
}

.rb-homepage__body {
grid-template-columns: minmax(0, 1fr) 300px;
gap: 24px;
}
}


/* Mobile
-------------------------------------------------------------- */

@media (max-width: 767px) {

.rb-homepage__container {
padding: 24px 16px 48px;
}

.rb-home-hero {
display: block;
height: auto;
}

.rb-home-banner {
height: 310px;
}

.rb-home-banner__overlay {
background:
linear-gradient(
to top,
rgba(9,11,13,.84) 0%,
rgba(9,11,13,.51) 50%,
rgba(9,11,13,.08) 82%
);
}

.rb-home-banner__content {
width: 100%;
padding: 20px;
}

.rb-home-banner__title {
font-size: 23px;
line-height: 1.28;
}

.rb-home-banner__excerpt {
display: -webkit-box;
margin-top: 9px;
overflow: hidden;
font-size: 13px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.rb-home-banner__cta {
margin-top: 14px;
padding: 9px 12px;
font-size: 12px;
}

.rb-home-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
gap: 10px;
height: auto;
margin-top: 12px;
}

.rb-stat-card {
min-height: 128px;
padding: 16px;
}

.rb-stat-card__icon {
width: 34px;
height: 34px;
margin-bottom: 13px;
}

.rb-stat-card__value {
font-size: 23px;
}

.rb-stat-card__label {
margin-top: 5px;
font-size: 12px;
}

.rb-homepage__body {
display: block;
margin-top: 0;
}

.rb-homepage__sidebar {
margin-top: 44px;
}
}

/* Beranda single-gutter alignment
-------------------------------------------------------------- */

/*
 * Kadence already wraps page content in .content-container.site-container.
 * On Beranda the Ruang Bestari container owns the 1280px width and
 * responsive gutters, so remove the outer Kadence constraint here only.
 */
.page-id-18832 .content-container.site-container {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}



/* Compact sticky homepage sidebar
-------------------------------------------------------------- */

.rb-home-sidebar {
position: sticky;
top: 96px;
align-self: start;
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}

.rb-sidebar-slider {
min-width: 0;
}

.rb-sidebar-slider__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}

.rb-sidebar-slider__title {
margin: 0;
color: var(--global-palette4);
font-size: 12px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .07em;
text-transform: uppercase;
}

.rb-sidebar-slider__nav {
display: flex;
align-items: center;
gap: 6px;
}

.rb-sidebar-slider__counter {
min-width: 31px;
color: var(--global-palette5);
font-size: 11px;
font-weight: 600;
line-height: 1;
text-align: center;
}

.rb-sidebar-slider__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0;
padding: 0;
border: 1px solid var(--global-palette7);
border-radius: 9px;
background: var(--global-palette9);
color: var(--global-palette4);
box-shadow: none;
cursor: pointer;
}

.rb-sidebar-slider__arrow svg {
width: 15px;
height: 15px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

.rb-sidebar-slider__arrow:hover:not(:disabled),
.rb-sidebar-slider__arrow:focus-visible:not(:disabled) {
border-color: rgba(255,117,31,.42);
background: rgba(255,117,31,.09);
color: var(--global-palette1);
box-shadow: none;
}

.rb-sidebar-slider__arrow:disabled {
opacity: .32;
cursor: default;
}

.rb-sidebar-slide {
display: none;
}

.rb-sidebar-slide.is-active {
display: block;
}

.rb-sidebar-card {
display: grid;
grid-template-columns: 116px minmax(0,1fr);
height: 148px;
overflow: hidden;
border: 1px solid var(--global-palette7);
border-radius: 14px;
background: var(--global-palette9);
color: inherit;
text-decoration: none;
}

.rb-sidebar-card__media {
height: 100%;
overflow: hidden;
background: var(--global-palette7);
}

.rb-sidebar-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease;
}

.rb-sidebar-card:hover .rb-sidebar-card__image {
transform: scale(1.035);
}

.rb-sidebar-card__body {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding: 14px 13px;
}

.rb-sidebar-card__category {
margin-bottom: 6px;
color: var(--global-palette1);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}

.rb-sidebar-card__title {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--global-palette3);
font-size: 14px;
font-weight: 700;
line-height: 1.38;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.rb-sidebar-card__author {
display: block;
width: 100%;
margin-top: 7px;
overflow: hidden;
color: var(--global-palette5);
font-size: 10.5px;
font-weight: 500;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}

.rb-sidebar-card__metric {
display: block;
margin-top: auto;
padding-top: 6px;
color: var(--global-palette1);
font-size: 10.5px;
font-weight: 700;
line-height: 1.2;
}


/* Dark sidebar */

html[data-rb-theme="dark"] .rb-sidebar-slider__title {
color: #D9DDE1;
}

html[data-rb-theme="dark"] .rb-sidebar-slider__counter {
color: #A8AFB6;
}

html[data-rb-theme="dark"] .rb-sidebar-slider__arrow,
html[data-rb-theme="dark"] .rb-sidebar-card {
border-color: #2B3035;
background: #181B1E;
}

html[data-rb-theme="dark"] .rb-sidebar-slider__arrow {
color: #D9DDE1;
}

html[data-rb-theme="dark"] .rb-sidebar-card__media {
background: #2B3035;
}

html[data-rb-theme="dark"] .rb-sidebar-card__title {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-sidebar-card__author {
color: #A8AFB6;
}


/* Mobile sidebar */

@media (max-width: 767px) {

.rb-home-sidebar {
position: static;
gap: 28px;
margin-top: 44px;
}

.rb-sidebar-card {
grid-template-columns: 120px minmax(0,1fr);
height: 148px;
}

}

/* Sidebar readability refinement
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-home-sidebar {
gap: 26px;
}

.rb-sidebar-slider__header {
margin-bottom: 11px;
}

.rb-sidebar-slider__title {
font-size: 12.5px;
}

.rb-sidebar-card {
grid-template-columns: 128px minmax(0, 1fr);
height: 165px;
}

.rb-sidebar-card__body {
padding: 15px;
}

.rb-sidebar-card__category {
margin-bottom: 7px;
font-size: 10.5px;
}

.rb-sidebar-card__title {
font-size: 14.5px;
line-height: 1.4;
}

.rb-sidebar-card__author {
margin-top: 8px;
font-size: 11px;
}

.rb-sidebar-card__metric {
padding-top: 7px;
font-size: 11px;
}

}

/* Unified hero and body columns
-------------------------------------------------------------- */

/*
 * Hero and body now share the exact same desktop column system:
 * fluid main column + 330px sidebar with a 32px gap.
 */
@media (min-width: 1200px) {

.rb-home-hero,
.rb-homepage__body {
grid-template-columns: minmax(0, 1fr) 330px;
gap: 32px;
}

}


/*
 * Tablet uses the same alignment principle with the narrower
 * sidebar and gutter already established for this breakpoint.
 */
@media (min-width: 768px) and (max-width: 1199px) {

.rb-home-hero,
.rb-homepage__body {
grid-template-columns: minmax(0, 1fr) 300px;
gap: 24px;
}

}



/* Homepage feed grid
-------------------------------------------------------------- */

.rb-feed-tabs {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 22px;
padding-bottom: 10px;
border-bottom: 1px solid var(--global-palette7);
}

.rb-feed-tab {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 8px 12px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--global-palette5);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
box-shadow: none;
}

.rb-feed-tab:disabled {
opacity: 1;
cursor: default;
}

.rb-feed-tab.is-active {
background: rgba(255,117,31,.10);
color: var(--global-palette1);
}

.rb-feed-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
column-gap: 20px;
row-gap: 34px;
}

.rb-feed-card {
min-width: 0;
}

.rb-feed-card__media {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 14px;
background: var(--global-palette7);
}

.rb-feed-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}

.rb-feed-card__media:hover .rb-feed-card__image {
transform: scale(1.025);
}

.rb-feed-card__body {
padding-top: 13px;
}

.rb-feed-card__category {
display: block;
margin-bottom: 7px;
color: var(--global-palette1);
font-size: 10.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .035em;
text-transform: uppercase;
}

.rb-feed-card__title {
display: -webkit-box;
min-height: 48px;
margin: 0;
overflow: hidden;
font-size: 17px;
font-weight: 700;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.rb-feed-card__title a {
color: var(--global-palette3);
text-decoration: none;
transition: color .18s ease;
}

.rb-feed-card__title a:hover,
.rb-feed-card__title a:focus-visible {
color: var(--global-palette1);
}

.rb-feed-card__meta {
display: flex;
align-items: center;
min-width: 0;
gap: 6px;
margin-top: 8px;
color: var(--global-palette5);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}

.rb-feed-card__author {
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.rb-feed-card__time {
white-space: nowrap;
}

.rb-feed-card__engagement {
display: flex;
align-items: center;
gap: 14px;
margin-top: 11px;
}

.rb-feed-card__engagement-item {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--global-palette5);
font-size: 11px;
font-weight: 600;
line-height: 1;
}

.rb-feed-card__engagement-item svg {
width: 15px;
height: 15px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}


/* Feed dark mode */

html[data-rb-theme="dark"] .rb-feed-tabs {
border-color: #2B3035;
}

html[data-rb-theme="dark"] .rb-feed-tab {
color: #A8AFB6;
}

html[data-rb-theme="dark"] .rb-feed-tab.is-active {
background: rgba(255,117,31,.14);
color: #FF8A45;
}

html[data-rb-theme="dark"] .rb-feed-card__media {
background: #2B3035;
}

html[data-rb-theme="dark"] .rb-feed-card__title a {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-feed-card__title a:hover,
html[data-rb-theme="dark"] .rb-feed-card__title a:focus-visible {
color: #FF8A45;
}

html[data-rb-theme="dark"] .rb-feed-card__meta,
html[data-rb-theme="dark"] .rb-feed-card__engagement-item {
color: #A8AFB6;
}


/* Feed mobile */

@media (max-width: 767px) {

.rb-feed-tabs {
gap: 4px;
overflow-x: auto;
margin-bottom: 20px;
scrollbar-width: none;
}

.rb-feed-tabs::-webkit-scrollbar {
display: none;
}

.rb-feed-tab {
flex: 0 0 auto;
padding: 8px 11px;
font-size: 12px;
}

.rb-feed-grid {
grid-template-columns: 1fr;
row-gap: 30px;
}

.rb-feed-card__title {
min-height: auto;
font-size: 17px;
}

}

/* Feed tablet: keep cards readable beside the 300px sidebar */
@media (min-width: 768px) and (max-width: 1199px) {

.rb-feed-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
column-gap: 20px;
}

}



/* Sidebar two-post slides
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-home-sidebar {
gap: 20px;
}

.rb-sidebar-slider__header {
margin-bottom: 9px;
}

.rb-sidebar-slider__title {
font-size: 13px;
}

.rb-sidebar-slide.is-active {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}

.rb-sidebar-card {
grid-template-columns: 92px minmax(0, 1fr);
height: 102px;
border-radius: 12px;
}

.rb-sidebar-card__body {
padding: 9px 10px;
}

.rb-sidebar-card__category {
margin-bottom: 4px;
font-size: 9px;
}

.rb-sidebar-card__title {
font-size: 12.5px;
line-height: 1.32;
-webkit-line-clamp: 2;
}

.rb-sidebar-card__author {
margin-top: 4px;
font-size: 9.5px;
}

.rb-sidebar-card__metric {
padding-top: 4px;
font-size: 9.5px;
}

}


/* Two-post sidebar on mobile */

@media (max-width: 767px) {

.rb-sidebar-slide.is-active {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}

.rb-sidebar-card {
grid-template-columns: 110px minmax(0,1fr);
height: 126px;
}

}


/* AJAX feed tabs
-------------------------------------------------------------- */

.rb-feed-tab:not(.is-active) {
cursor: pointer;
}

.rb-feed-tab:not(.is-active):hover,
.rb-feed-tab:not(.is-active):focus-visible {
background: var(--global-palette8);
color: var(--global-palette3);
}

.rb-feed-grid {
transition: opacity .18s ease;
}

.rb-feed-grid.is-loading {
opacity: .42;
pointer-events: none;
}

.rb-feed-tabs.is-loading .rb-feed-tab {
pointer-events: none;
}

html[data-rb-theme="dark"] .rb-feed-tab:not(.is-active):hover,
html[data-rb-theme="dark"] .rb-feed-tab:not(.is-active):focus-visible {
background: #2B3035;
color: #F5F6F7;
}


/* AJAX numbered feed pagination
-------------------------------------------------------------- */

.rb-feed-pagination-wrap {
margin-top: 42px;
}

.rb-feed-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}

.rb-feed-pagination__page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
margin: 0;
padding: 0 9px;
border: 1px solid var(--global-palette7);
border-radius: 10px;
background: var(--global-palette9);
color: var(--global-palette4);
font-size: 12px;
font-weight: 700;
line-height: 1;
box-shadow: none;
cursor: pointer;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease;
}

.rb-feed-pagination__page:hover,
.rb-feed-pagination__page:focus-visible {
border-color: rgba(255,117,31,.40);
background: rgba(255,117,31,.08);
color: var(--global-palette1);
box-shadow: none;
}

.rb-feed-pagination__page.is-active {
border-color: var(--global-palette1);
background: var(--global-palette1);
color: #fff;
cursor: default;
}

.rb-feed-pagination__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 36px;
color: var(--global-palette5);
font-size: 13px;
font-weight: 700;
}


/* Dark pagination */

html[data-rb-theme="dark"] .rb-feed-pagination__page {
border-color: #2B3035;
background: #181B1E;
color: #D9DDE1;
}

html[data-rb-theme="dark"] .rb-feed-pagination__page:hover,
html[data-rb-theme="dark"] .rb-feed-pagination__page:focus-visible {
border-color: rgba(255,117,31,.45);
background: rgba(255,117,31,.12);
color: #FF8A45;
}

html[data-rb-theme="dark"] .rb-feed-pagination__page.is-active {
border-color: #FF751F;
background: #FF751F;
color: #fff;
}

html[data-rb-theme="dark"] .rb-feed-pagination__ellipsis {
color: #A8AFB6;
}


/* Mobile pagination */

@media (max-width: 767px) {

.rb-feed-pagination-wrap {
margin-top: 34px;
}

.rb-feed-pagination {
gap: 5px;
}

.rb-feed-pagination__page {
min-width: 34px;
height: 34px;
font-size: 11px;
}

.rb-feed-pagination__ellipsis {
height: 34px;
}

}



/* Homepage YouTube — Tayangan Bestari
-------------------------------------------------------------- */

.rb-youtube {
margin-top: 52px;
padding-top: 28px;
border-top: 1px solid var(--global-palette7);
}

.rb-youtube__heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}

.rb-youtube__heading-copy {
min-width: 0;
}

.rb-youtube__eyebrow {
display: block;
margin-bottom: 5px;
color: var(--global-palette1);
font-size: 11px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .09em;
text-transform: uppercase;
}

.rb-youtube__title {
margin: 0;
color: var(--global-palette3);
font-size: clamp(22px, 2vw, 28px);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.025em;
}

.rb-youtube__subtitle {
margin: 7px 0 0;
color: var(--global-palette5);
font-size: 13px;
font-weight: 500;
line-height: 1.55;
}

.rb-youtube__all {
flex: 0 0 auto;
margin-bottom: 3px;
color: var(--global-palette1);
font-size: 12px;
font-weight: 750;
line-height: 1.4;
text-decoration: none;
}

.rb-youtube__all:hover,
.rb-youtube__all:focus-visible {
color: #E85F0B;
text-decoration: none;
}

.rb-youtube__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px 20px;
}

.rb-youtube-card {
min-width: 0;
}

.rb-youtube-card__link {
display: block;
color: inherit;
text-decoration: none;
}

.rb-youtube-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 14px;
background: var(--global-palette8);
}

.rb-youtube-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .24s ease;
}

.rb-youtube-card__play {
position: absolute;
left: 50%;
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
background: rgba(15,17,19,.74);
color: #fff;
box-shadow: 0 6px 24px rgba(0,0,0,.22);
transform: translate(-50%, -50%);
transition:
transform .18s ease,
background .18s ease;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

.rb-youtube-card__title {
display: -webkit-box;
overflow: hidden;
margin: 11px 2px 0;
color: var(--global-palette3);
font-size: 14px;
font-weight: 750;
line-height: 1.45;
letter-spacing: -.01em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

.rb-youtube-card__link:hover .rb-youtube-card__image,
.rb-youtube-card__link:focus-visible .rb-youtube-card__image {
transform: scale(1.025);
}

.rb-youtube-card__link:hover .rb-youtube-card__play,
.rb-youtube-card__link:focus-visible .rb-youtube-card__play {
background: #FF751F;
transform: translate(-50%, -50%) scale(1.06);
}

.rb-youtube-card__link:hover .rb-youtube-card__title,
.rb-youtube-card__link:focus-visible .rb-youtube-card__title {
color: var(--global-palette1);
}


/* Dark YouTube section */

html[data-rb-theme="dark"] .rb-youtube {
border-top-color: #2B3035;
}

html[data-rb-theme="dark"] .rb-youtube__title,
html[data-rb-theme="dark"] .rb-youtube-card__title {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-youtube__subtitle {
color: #A8AFB6;
}

html[data-rb-theme="dark"] .rb-youtube-card__media {
background: #181B1E;
}


/* Tablet */

@media (max-width: 1199px) {

.rb-youtube {
margin-top: 58px;
}

.rb-youtube__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px 20px;
}

}


/* Mobile */

@media (max-width: 767px) {

.rb-youtube {
margin-top: 48px;
padding-top: 28px;
}

.rb-youtube__heading {
align-items: flex-start;
margin-bottom: 18px;
}

.rb-youtube__subtitle {
font-size: 12px;
}

.rb-youtube__all {
margin-top: 4px;
font-size: 11px;
}

.rb-youtube__grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(245px, 82vw);
grid-template-columns: none;
gap: 14px;
overflow-x: auto;
padding-bottom: 8px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}

.rb-youtube__grid::-webkit-scrollbar {
display: none;
}

.rb-youtube-card {
scroll-snap-align: start;
}

.rb-youtube-card__title {
font-size: 13px;
}

.rb-youtube-card__play {
width: 42px;
height: 42px;
}

}




/* Tayangan Bestari slider — v0.1.52
-------------------------------------------------------------- */

.rb-youtube__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
flex: 0 0 auto;
}

.rb-youtube__actions .rb-youtube__all {
margin: 0;
}

.rb-youtube-slider__nav {
display: inline-flex;
align-items: center;
gap: 7px;
}

.rb-youtube-slider__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
border: 1px solid var(--global-palette7);
border-radius: 9px;
background: var(--global-palette9);
color: var(--global-palette4);
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 1;
box-shadow: none;
cursor: pointer;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease,
opacity .18s ease;
}

.rb-youtube-slider__button:hover:not(:disabled),
.rb-youtube-slider__button:focus-visible:not(:disabled) {
border-color: rgba(255,117,31,.38);
background: rgba(255,117,31,.08);
color: var(--global-palette1);
box-shadow: none;
}

.rb-youtube-slider__button:disabled {
opacity: .34;
cursor: default;
}

.rb-youtube-slider__counter {
min-width: 28px;
color: var(--global-palette5);
font-size: 11px;
font-weight: 750;
line-height: 1;
text-align: center;
}

.rb-youtube-slider__viewport {
min-width: 0;
}

.rb-youtube-slide {
display: none;
}

.rb-youtube-slide.is-active {
display: block;
animation: rbYoutubeSlideIn .20s ease;
}

@keyframes rbYoutubeSlideIn {
from {
opacity: .30;
transform: translateX(5px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

html[data-rb-theme="dark"] .rb-youtube-slider__button {
border-color: #2B3035;
background: #181B1E;
color: #D9DDE1;
}

html[data-rb-theme="dark"] .rb-youtube-slider__button:hover:not(:disabled),
html[data-rb-theme="dark"] .rb-youtube-slider__button:focus-visible:not(:disabled) {
border-color: rgba(255,117,31,.45);
background: rgba(255,117,31,.12);
color: #FF8A45;
}

html[data-rb-theme="dark"] .rb-youtube-slider__counter {
color: #A8AFB6;
}

@media (max-width: 767px) {

.rb-youtube__heading {
gap: 16px;
}

.rb-youtube__actions {
gap: 8px;
}

.rb-youtube__actions .rb-youtube__all {
display: none;
}

.rb-youtube-slider__button {
width: 30px;
height: 30px;
border-radius: 8px;
}

}

/* Homepage Instagram — Cerita dari Bestari */
.rb-instagram {
margin-top: 72px;
padding-top: 8px;
}

.rb-instagram__heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 28px;
}

.rb-instagram__heading-copy {
max-width: 720px;
}

.rb-instagram__eyebrow {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}

.rb-instagram__title {
margin: 0;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.08;
letter-spacing: -.03em;
}

.rb-instagram__subtitle {
max-width: 620px;
margin: 12px 0 0;
font-size: 15px;
line-height: 1.7;
opacity: .72;
}

.rb-instagram__all,
.rb-instagram__footer a {
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}

.rb-instagram__layout {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: 20px;
align-items: stretch;
}

.rb-instagram-featured {
display: grid;
grid-template-rows: 1fr auto;
min-width: 0;
overflow: hidden;
color: inherit;
text-decoration: none;
border-radius: 18px;
background: rgba(0, 0, 0, .035);
}

.rb-instagram-featured__media {
position: relative;
min-height: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
background:
linear-gradient(145deg, rgba(0, 0, 0, .035), rgba(0, 0, 0, .09));
}

.rb-instagram-featured__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 17px;
font-size: 13px;
line-height: 1.4;
}

.rb-instagram-featured__meta span:first-child {
font-weight: 700;
}

.rb-instagram-featured__meta span:last-child {
opacity: .65;
}

.rb-instagram__recent {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 20px;
min-width: 0;
}

.rb-instagram-card {
position: relative;
display: block;
min-width: 0;
min-height: 0;
overflow: hidden;
color: inherit;
text-decoration: none;
border-radius: 16px;
background: rgba(0, 0, 0, .035);
}

.rb-instagram-card__media {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
linear-gradient(145deg, rgba(0, 0, 0, .025), rgba(0, 0, 0, .085));
}

.rb-instagram__placeholder-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .48;
}

.rb-instagram__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(0, 0, 0, .09);
}

.rb-instagram__handle {
font-size: 14px;
font-weight: 700;
}

@media (hover: hover) {
.rb-instagram-featured,
.rb-instagram-card {
transition: transform .22s ease, opacity .22s ease;
}

.rb-instagram-featured:hover,
.rb-instagram-card:hover {
transform: translateY(-3px);
}
}

@media (max-width: 900px) {
.rb-instagram {
margin-top: 56px;
}

.rb-instagram__layout {
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 14px;
}

.rb-instagram__recent {
gap: 14px;
}
}

@media (max-width: 700px) {
.rb-instagram__heading {
display: block;
margin-bottom: 22px;
}

.rb-instagram__all {
display: inline-block;
margin-top: 16px;
}

.rb-instagram__layout {
grid-template-columns: 1fr;
}

.rb-instagram-featured {
max-width: 100%;
}

.rb-instagram-featured__media {
aspect-ratio: 4 / 5;
}

.rb-instagram__recent {
grid-template-rows: none;
}

.rb-instagram-card {
aspect-ratio: 1 / 1;
}

.rb-instagram__footer {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
}


/* Instagram live media */
.rb-instagram-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.rb-instagram-card__play {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #fff;
background: rgba(0, 0, 0, .58);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}

.rb-instagram-card__play svg {
display: block;
width: 24px;
height: 24px;
}

.rb-instagram-card__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0);
transition: background .2s ease;
pointer-events: none;
}

@media (hover: hover) {
.rb-instagram-card:hover .rb-instagram-card__media::after {
background: rgba(0, 0, 0, .08);
}
}

/* Instagram featured live media */
.rb-instagram-featured__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.rb-instagram-featured__media {
position: relative;
}

.rb-instagram-featured__media .rb-instagram-card__play {
z-index: 2;
}

/* Homepage CTA — Program Literasi Sekolah */
.rb-school-cta {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
min-height: 430px;
margin-top: 72px;
overflow: hidden;
border: 1px solid rgba(20, 28, 38, .08);
border-radius: 24px;
background:
radial-gradient(circle at 15% 15%, rgba(244, 143, 34, .10), transparent 32%),
#fffaf4;
}

.rb-school-cta__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 56px 48px;
}

.rb-school-cta__eyebrow {
display: inline-flex;
align-items: center;
margin-bottom: 16px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .12em;
text-transform: uppercase;
color: #e77b17;
}

.rb-school-cta__title {
max-width: 690px;
margin: 0;
font-size: clamp(32px, 4vw, 50px);
font-weight: 750;
line-height: 1.08;
letter-spacing: -.035em;
color: #16202d;
}

.rb-school-cta__description {
max-width: 650px;
margin: 20px 0 0;
font-size: 16px;
line-height: 1.75;
color: rgba(22, 32, 45, .72);
}

.rb-school-cta__actions {
margin-top: 30px;
}

.rb-school-cta__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 50px;
padding: 0 22px;
border-radius: 12px;
background: #17283a;
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition:
transform .2s ease,
background .2s ease,
box-shadow .2s ease;
}

.rb-school-cta__button span {
font-size: 18px;
transition: transform .2s ease;
}

.rb-school-cta__visual {
position: relative;
min-width: 0;
min-height: 430px;
overflow: hidden;
}

.rb-school-cta__visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
#fffaf4 0%,
rgba(255, 250, 244, .7) 7%,
rgba(255, 250, 244, 0) 28%
);
pointer-events: none;
}

.rb-school-cta__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

@media (hover: hover) {
.rb-school-cta__button:hover {
color: #fff;
background: #0f1d2b;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(22, 32, 45, .16);
}

.rb-school-cta__button:hover span {
transform: translateX(3px);
}
}

@media (max-width: 900px) {
.rb-school-cta {
grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
min-height: 390px;
margin-top: 56px;
}

.rb-school-cta__content {
padding: 42px 34px;
}

.rb-school-cta__visual {
min-height: 390px;
}
}

@media (max-width: 700px) {
.rb-school-cta {
grid-template-columns: 1fr;
}

.rb-school-cta__content {
padding: 34px 24px;
}

.rb-school-cta__title {
font-size: clamp(30px, 9vw, 40px);
}

.rb-school-cta__description {
font-size: 15px;
}

.rb-school-cta__visual {
min-height: 340px;
order: -1;
}

.rb-school-cta__visual::before {
background:
linear-gradient(
0deg,
#fffaf4 0%,
rgba(255, 250, 244, .65) 8%,
rgba(255, 250, 244, 0) 28%
);
}

.rb-school-cta__button {
width: 100%;
}
}


/* Homepage latest posts — discovery grid */
.rb-latest-posts {
margin-top: 76px;
}

.rb-latest-posts__heading {
max-width: 720px;
margin-bottom: 28px;
}

.rb-latest-posts__eyebrow {
display: block;
margin-bottom: 8px;
color: var(--global-palette1);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .12em;
text-transform: uppercase;
}

.rb-latest-posts__title {
margin: 0;
color: var(--global-palette3);
font-size: clamp(28px, 3vw, 40px);
font-weight: 750;
line-height: 1.1;
letter-spacing: -.03em;
}

.rb-latest-posts__subtitle {
max-width: 650px;
margin: 11px 0 0;
color: var(--global-palette5);
font-size: 14px;
line-height: 1.65;
}

.rb-latest-posts__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 18px;
row-gap: 34px;
}

/* Compact card treatment only inside latest posts */
.rb-latest-posts .rb-feed-card__media {
border-radius: 12px;
}

.rb-latest-posts .rb-feed-card__body {
padding-top: 11px;
}

.rb-latest-posts .rb-feed-card__category {
margin-bottom: 6px;
font-size: 9.5px;
}

.rb-latest-posts .rb-feed-card__title {
min-height: 58px;
font-size: 14px;
line-height: 1.38;
-webkit-line-clamp: 3;
}

.rb-latest-posts .rb-feed-card__meta {
gap: 5px;
margin-top: 7px;
font-size: 10px;
}

.rb-latest-posts .rb-feed-card__author {
max-width: 56%;
}

.rb-latest-posts .rb-feed-card__engagement {
gap: 12px;
margin-top: 9px;
}

.rb-latest-posts .rb-feed-card__engagement-item {
gap: 4px;
font-size: 10px;
}

.rb-latest-posts .rb-feed-card__engagement-item svg {
width: 14px;
height: 14px;
}

.rb-latest-posts__more {
display: flex;
justify-content: center;
margin-top: 38px;
}

.rb-latest-posts__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 168px;
min-height: 46px;
padding: 0 20px;
border: 1px solid rgba(22, 32, 45, .16);
border-radius: 999px;
background: transparent;
color: var(--global-palette3);
font: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease;
}

.rb-latest-posts__button:disabled {
opacity: .6;
cursor: wait;
}

@media (hover: hover) {
.rb-latest-posts__button:hover:not(:disabled) {
background: rgba(255, 117, 31, .08);
border-color: rgba(255, 117, 31, .35);
transform: translateY(-2px);
}
}

/* Latest posts dark mode */
html[data-rb-theme="dark"] .rb-latest-posts__title {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-latest-posts__subtitle {
color: #A8AFB6;
}

html[data-rb-theme="dark"] .rb-latest-posts__button {
border-color: #3A4148;
color: #F5F6F7;
}

/* Latest posts responsive */
@media (max-width: 1100px) {
.rb-latest-posts__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 767px) {
.rb-latest-posts {
margin-top: 56px;
}

.rb-latest-posts__heading {
margin-bottom: 22px;
}

.rb-latest-posts__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 14px;
}

.rb-latest-posts .rb-feed-card__title {
font-size: 13.5px;
}

.rb-latest-posts .rb-feed-card__meta-separator,
.rb-latest-posts .rb-feed-card__time {
display: none;
}
}

@media (max-width: 480px) {
.rb-latest-posts__grid {
grid-template-columns: 1fr;
}

.rb-latest-posts .rb-feed-card__title {
min-height: 0;
font-size: 16px;
-webkit-line-clamp: 2;
}

.rb-latest-posts__button {
width: 100%;
}
}


/* CTA as homepage opening banner
-------------------------------------------------------------- */
.rb-homepage__container > .rb-school-cta:first-child {
margin-top: 0;
}


/* CTA opening banner — Bestari final brand
-------------------------------------------------------------- */
.rb-homepage {
--rb-brand-teal: #094C4E;
--rb-brand-turquoise: #0F9599;
--rb-brand-orange: #FDAA01;
--rb-brand-yellow: #FEC703;
--rb-brand-charcoal: #191C1F;
--rb-brand-muted: #687078;
--rb-brand-cream: #FFFAF4;
--rb-brand-border: rgba(25, 28, 31, .09);
--rb-radius-control: 12px;
--rb-radius-card: 16px;
--rb-radius-feature: 18px;
}

@media (min-width: 901px) {

.rb-homepage__container > .rb-school-cta:first-child {
height: 440px;
min-height: 0;
margin-top: 0;
border-color: var(--rb-brand-border);
border-radius: var(--rb-radius-feature);
background:
radial-gradient(
circle at 12% 12%,
rgba(253, 170, 1, .10),
transparent 34%
),
var(--rb-brand-cream);
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__content {
height: 100%;
min-height: 0;
box-sizing: border-box;
justify-content: center;
padding: 32px 46px;
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__eyebrow {
position: relative;
margin-bottom: 10px;
padding-left: 14px;
color: var(--rb-brand-teal);
font-size: 12px;
font-weight: 750;
letter-spacing: .11em;
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__eyebrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rb-brand-turquoise);
transform: translateY(-50%);
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__title {
max-width: 650px;
font-size: clamp(32px, 3.1vw, 44px);
line-height: 1.08;
letter-spacing: -.03em;
color: var(--rb-brand-charcoal);
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__description {
max-width: 620px;
margin-top: 14px;
font-size: 15px;
line-height: 1.55;
color: var(--rb-brand-muted);
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__actions {
margin-top: 18px;
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__button {
min-height: 46px;
padding: 0 20px;
border-radius: var(--rb-radius-control);
background: var(--rb-brand-teal);
color: #FFFFFF;
box-shadow: none;
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__visual {
height: 100%;
min-height: 0;
}

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__visual::before {
background:
linear-gradient(
90deg,
var(--rb-brand-cream) 0%,
rgba(255, 250, 244, .72) 8%,
rgba(255, 250, 244, 0) 29%
);
}

}

@media (hover: hover) and (min-width: 901px) {

.rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__button:hover {
background: var(--rb-brand-turquoise);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: none;
}

}

/* End CTA opening banner — Bestari final brand */


/* Sidebar statistics — Bestari brand
-------------------------------------------------------------- */

.rb-sidebar-stats {
padding: 18px 18px 16px;
border: 1px solid var(--rb-brand-border, rgba(25, 28, 31, .09));
border-radius: var(--rb-radius-card, 16px);
background: #FFFFFF;
}

.rb-sidebar-stats__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}

.rb-sidebar-stats__accent {
display: block;
flex: 0 0 7px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--rb-brand-turquoise, #0F9599);
}

.rb-sidebar-stats__title {
margin: 0;
color: var(--rb-brand-teal, #094C4E);
font-size: 11.5px;
font-weight: 750;
line-height: 1.3;
letter-spacing: .07em;
text-transform: uppercase;
}

.rb-sidebar-stats__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-sidebar-stat {
min-width: 0;
padding: 12px 10px;
}

.rb-sidebar-stat:nth-child(odd) {
padding-left: 0;
border-right: 1px solid rgba(25, 28, 31, .08);
}

.rb-sidebar-stat:nth-child(even) {
padding-right: 0;
padding-left: 16px;
}

.rb-sidebar-stat:nth-child(-n+2) {
border-bottom: 1px solid rgba(25, 28, 31, .08);
}

.rb-sidebar-stat__value {
display: block;
color: var(--rb-brand-charcoal, #191C1F);
font-size: 22px;
font-weight: 750;
line-height: 1.1;
letter-spacing: -.025em;
}

.rb-sidebar-stat__label {
display: block;
margin-top: 5px;
color: var(--rb-brand-muted, #687078);
font-size: 11px;
font-weight: 600;
line-height: 1.3;
}

html[data-rb-theme="dark"] .rb-sidebar-stats {
border-color: #2B3035;
background: #181B1E;
}

html[data-rb-theme="dark"] .rb-sidebar-stats__title {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-sidebar-stat:nth-child(odd),
html[data-rb-theme="dark"] .rb-sidebar-stat:nth-child(-n+2) {
border-color: #2B3035;
}

html[data-rb-theme="dark"] .rb-sidebar-stat__value {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-sidebar-stat__label {
color: #A8AFB6;
}



/* Sidebar statistics icon-card refinement
-------------------------------------------------------------- */

.rb-sidebar-stats__grid {
gap: 8px;
}

.rb-sidebar-stat,
.rb-sidebar-stat:nth-child(odd),
.rb-sidebar-stat:nth-child(even),
.rb-sidebar-stat:nth-child(-n+2) {
padding: 12px;
border: 1px solid rgba(25, 28, 31, .08);
border-radius: 12px;
background: #FFFFFF;
}

.rb-sidebar-stat__icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-bottom: 10px;
border-radius: 9px;
background: rgba(15, 149, 153, .10);
color: var(--rb-brand-turquoise, #0F9599);
}

.rb-sidebar-stat__icon svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.rb-sidebar-stat__value {
font-size: 21px;
}

.rb-sidebar-stat__label {
margin-top: 4px;
}

html[data-rb-theme="dark"] .rb-sidebar-stat,
html[data-rb-theme="dark"] .rb-sidebar-stat:nth-child(odd),
html[data-rb-theme="dark"] .rb-sidebar-stat:nth-child(even),
html[data-rb-theme="dark"] .rb-sidebar-stat:nth-child(-n+2) {
border-color: #2B3035;
background: #181B1E;
}

html[data-rb-theme="dark"] .rb-sidebar-stat__icon {
background: rgba(15, 149, 153, .14);
color: #38B8BA;
}

/* End sidebar statistics icon-card refinement */

/* Main feed frame — aligned with Bestari sidebar
-------------------------------------------------------------- */

.rb-homepage__feed {
padding: 18px;
border: 1px solid var(--rb-brand-border, rgba(25, 28, 31, .09));
border-radius: var(--rb-radius-card, 16px);
background: #FFFFFF;
}

.rb-homepage__feed .rb-feed-tabs {
margin-bottom: 22px;
}

html[data-rb-theme="dark"] .rb-homepage__feed {
border-color: #2B3035;
background: #181B1E;
}

@media (max-width: 767px) {

.rb-homepage__feed {
padding: 14px;
border-radius: 14px;
}

}


/* Feed tabs — Bestari brand
-------------------------------------------------------------- */

.rb-homepage__feed .rb-feed-tabs {
border-bottom-color: rgba(25, 28, 31, .09);
}

.rb-homepage__feed .rb-feed-tab {
border-radius: 10px;
color: var(--rb-brand-muted, #687078);
transition:
background-color .18s ease,
color .18s ease;
}

.rb-homepage__feed .rb-feed-tab:hover:not(:disabled) {
background: rgba(15, 149, 153, .07);
color: var(--rb-brand-teal, #094C4E);
}

.rb-homepage__feed .rb-feed-tab.is-active {
background: rgba(15, 149, 153, .11);
color: var(--rb-brand-teal, #094C4E);
font-weight: 700;
}

html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-tabs {
border-bottom-color: #2B3035;
}

html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-tab {
color: #A8AFB6;
}

html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-tab.is-active {
background: rgba(15, 149, 153, .16);
color: #55C5C7;
}



/* Sidebar finishing — Bestari visual system
-------------------------------------------------------------- */

/* Statistik */
.rb-sidebar-stats__header {
display: block;
margin-bottom: 14px;
}

.rb-sidebar-stats__accent {
display: none;
}

.rb-sidebar-stats__title {
color: var(--rb-brand-teal, #094C4E);
font-size: 13px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0;
text-transform: none;
}

.rb-sidebar-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

.rb-sidebar-stat__icon {
margin-left: auto;
margin-right: auto;
}

.rb-sidebar-stat__value,
.rb-sidebar-stat__label {
width: 100%;
text-align: center;
}

/* Heading slider sidebar */
.rb-sidebar-slider__title {
color: var(--rb-brand-teal, #094C4E);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .045em;
}

.rb-sidebar-slider__counter {
color: var(--rb-brand-muted, #687078);
}

/* Tombol navigasi slider */
.rb-sidebar-slider__arrow {
border-color: rgba(9, 76, 78, .12);
border-radius: 10px;
background: #FFFFFF;
color: var(--rb-brand-teal, #094C4E);
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease;
}

.rb-sidebar-slider__arrow:hover:not(:disabled),
.rb-sidebar-slider__arrow:focus-visible:not(:disabled) {
border-color: rgba(15, 149, 153, .30);
background: rgba(15, 149, 153, .09);
color: var(--rb-brand-turquoise, #0F9599);
}

/* Sedikit rapatkan ritme sidebar */
.rb-home-sidebar {
gap: 22px;
}

html[data-rb-theme="dark"] .rb-sidebar-stats__title,
html[data-rb-theme="dark"] .rb-sidebar-slider__title {
color: #55C5C7;
}

html[data-rb-theme="dark"] .rb-sidebar-slider__arrow {
border-color: #2B3035;
background: #181B1E;
color: #D9DDE1;
}

/* End sidebar finishing — Bestari visual system */


/* Sidebar final alignment — Bestari
-------------------------------------------------------------- */

/* Statistik: heading mengikuti komposisi simetris di bawahnya */
.rb-sidebar-stats__header {
text-align: center;
}

.rb-sidebar-stats__title {
width: 100%;
text-align: center;
font-size: 13px;
font-weight: 700;
}

/* Ritme vertikal sidebar */
.rb-home-sidebar {
gap: 20px;
}

/* Heading editorial tetap rata kiri tetapi tidak all caps */
.rb-sidebar-slider__title {
color: var(--rb-brand-teal, #094C4E);
font-size: 12.5px;
font-weight: 700;
line-height: 1.35;
letter-spacing: .01em;
text-transform: none;
}

/* Navigasi slider dibuat satu ritme */
.rb-sidebar-slider__nav {
gap: 4px;
}

.rb-sidebar-slider__counter {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 31px;
height: 28px;
font-size: 10.5px;
line-height: 1;
}

.rb-sidebar-slider__arrow {
flex: 0 0 28px;
width: 28px;
height: 28px;
}

/* Sedikit rapatkan heading dengan card */
.rb-sidebar-slider__header {
margin-bottom: 9px;
}

html[data-rb-theme="dark"] .rb-sidebar-slider__title {
color: #55C5C7;
}

/* End sidebar final alignment — Bestari */

/* Feed + sidebar final visual polish
-------------------------------------------------------------- */

/* Feed frame */
.rb-homepage__feed {
padding: 16px;
}

.rb-homepage__feed .rb-feed-tabs {
margin-bottom: 20px;
}

/* Feed cards */
.rb-feed-grid {
column-gap: 18px;
row-gap: 30px;
}

.rb-feed-card__media {
border-radius: 12px;
}

.rb-feed-card__body {
padding-top: 11px;
}

.rb-feed-card__category {
margin-bottom: 6px;
color: #D98200;
font-size: 10.25px;
font-weight: 700;
letter-spacing: .025em;
}

.rb-feed-card__title {
min-height: 42px;
font-size: 15.5px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -.012em;
}

.rb-feed-card__title a {
color: var(--rb-brand-charcoal, #191C1F);
}

.rb-feed-card__title a:hover,
.rb-feed-card__title a:focus-visible {
color: var(--rb-brand-teal, #094C4E);
}

.rb-feed-card__meta {
gap: 5px;
margin-top: 7px;
color: var(--rb-brand-muted, #687078);
font-size: 10.75px;
line-height: 1.35;
}

.rb-feed-card__engagement {
gap: 12px;
margin-top: 9px;
}

.rb-feed-card__engagement-item {
gap: 4px;
color: rgba(9, 76, 78, .62);
font-size: 10.75px;
font-weight: 600;
}

.rb-feed-card__engagement-item svg {
width: 14px;
height: 14px;
stroke-width: 1.7;
}

/* Statistics panel */
.rb-sidebar-stats {
padding: 16px;
border-color: rgba(25, 28, 31, .09);
}

.rb-sidebar-stats__header {
margin-bottom: 13px;
}

.rb-sidebar-stats__title {
font-size: 13px;
font-weight: 700;
color: var(--rb-brand-teal, #094C4E);
}

.rb-sidebar-stats__grid {
gap: 7px;
}

.rb-sidebar-stat,
.rb-sidebar-stat:nth-child(odd),
.rb-sidebar-stat:nth-child(even),
.rb-sidebar-stat:nth-child(-n+2) {
padding: 11px;
border-color: rgba(25, 28, 31, .075);
}

.rb-sidebar-stat__icon {
width: 29px;
height: 29px;
margin-bottom: 8px;
background: rgba(15, 149, 153, .085);
}

.rb-sidebar-stat__icon svg {
width: 15px;
height: 15px;
}

.rb-sidebar-stat__value {
font-size: 20.5px;
}

.rb-sidebar-stat__label {
margin-top: 3px;
font-size: 10.5px;
}

/* Editorial sidebar sections */
.rb-home-sidebar {
gap: 19px;
}

.rb-sidebar-slider__header {
min-height: 28px;
margin-bottom: 8px;
}

.rb-sidebar-slider__title {
color: var(--rb-brand-teal, #094C4E);
font-size: 13px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0;
}

.rb-sidebar-slider__nav {
gap: 3px;
}

.rb-sidebar-slider__counter {
color: var(--rb-brand-muted, #687078);
font-size: 10.25px;
}

.rb-sidebar-slider__arrow {
border-color: rgba(9, 76, 78, .10);
background: #FFFFFF;
color: var(--rb-brand-teal, #094C4E);
}

.rb-sidebar-slide.is-active {
gap: 7px;
}

.rb-sidebar-card {
border-color: rgba(25, 28, 31, .085);
border-radius: 12px;
background: #FFFFFF;
}

.rb-sidebar-card__category {
color: #D98200;
font-weight: 700;
}

.rb-sidebar-card__title {
color: var(--rb-brand-charcoal, #191C1F);
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
}

.rb-sidebar-card__author {
color: var(--rb-brand-muted, #687078);
font-size: 9.75px;
}

/* Dark mode */
html[data-rb-theme="dark"] .rb-feed-card__title a,
html[data-rb-theme="dark"] .rb-sidebar-card__title {
color: #F5F6F7;
}

html[data-rb-theme="dark"] .rb-feed-card__engagement-item {
color: #A8AFB6;
}

html[data-rb-theme="dark"] .rb-sidebar-card {
border-color: #2B3035;
background: #181B1E;
}


/* Feed + sidebar readability balance
-------------------------------------------------------------- */

/* Feed */
.rb-feed-card__title {
min-height: 45px;
font-size: 16.25px;
line-height: 1.38;
}

.rb-feed-card__meta {
font-size: 11px;
}

.rb-feed-card__engagement-item {
font-size: 11px;
color: rgba(9, 76, 78, .68);
}

.rb-feed-card__engagement-item svg {
width: 14.5px;
height: 14.5px;
}

/* Sidebar editorial cards */
@media (min-width: 768px) {

.rb-sidebar-card {
grid-template-columns: 96px minmax(0, 1fr);
height: 108px;
}

.rb-sidebar-card__body {
padding: 10px 11px;
}

.rb-sidebar-card__category {
font-size: 9.5px;
}

.rb-sidebar-card__title {
font-size: 13px;
line-height: 1.34;
font-weight: 600;
}

.rb-sidebar-card__author {
font-size: 10px;
}

}

.rb-sidebar-slider__title {
font-size: 13.25px;
}

/* Pagination is navigation: use Bestari teal */
.rb-feed-pagination .page-numbers.current,
.rb-feed-pagination button.is-active,
.rb-feed-pagination a.is-active {
border-color: var(--rb-brand-teal, #094C4E);
background: var(--rb-brand-teal, #094C4E);
color: #FFFFFF;
}



/* Sidebar Top 3 — Bestari
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-sidebar-slide.is-active {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}

.rb-sidebar-card {
grid-template-columns: 94px minmax(0, 1fr);
height: 100px;
}

.rb-sidebar-card__body {
padding: 8px 10px;
}

.rb-sidebar-card__category {
margin-bottom: 2px;
font-size: 9px;
line-height: 1.15;
}

.rb-sidebar-card__title {
font-size: 12.5px;
font-weight: 600;
line-height: 1.26;
-webkit-line-clamp: 2;
}

.rb-sidebar-card__author {
margin-top: 2px;
font-size: 9.5px;
line-height: 1.2;
}

.rb-sidebar-card__metric {
margin-top: auto;
padding-top: 2px;
font-size: 9.5px;
line-height: 1.15;
}

}

/* Ranking badge */
.rb-sidebar-card__media {
position: relative;
}

.rb-sidebar-card__rank {
position: absolute;
top: 6px;
left: 6px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 2px solid rgba(255,255,255,.92);
border-radius: 50%;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(0,0,0,.16);
}

.rb-sidebar-card__rank svg {
position: absolute;
inset: 4px;
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .32;
}

.rb-sidebar-card__rank strong {
position: relative;
z-index: 1;
font-size: 11px;
font-weight: 750;
line-height: 1;
}

/* Juara 1 */
.rb-sidebar-card__rank--1 {
background: var(--rb-brand-orange, #FDAA01);
}

/* Juara 2 */
.rb-sidebar-card__rank--2 {
background: var(--rb-brand-turquoise, #0F9599);
}

/* Juara 3 */
.rb-sidebar-card__rank--3 {
background: var(--rb-brand-teal, #094C4E);
}

/* Sedikit rapatkan dua ranking section */
.rb-home-sidebar {
gap: 18px;
}

.rb-sidebar-slider__header {
margin-bottom: 7px;
}

/* Metric menjadi aksen teal, bukan oranye */
.rb-sidebar-card__metric {
color: var(--rb-brand-teal, #094C4E);
}

/* Dark mode */
html[data-rb-theme="dark"] .rb-sidebar-card__metric {
color: #55C5C7;
}

/* End Sidebar Top 3 — Bestari */

/* Editorial titles — maximum 2 lines
-------------------------------------------------------------- */

.rb-feed-card__title,
.rb-sidebar-card__title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

/* Feed: tetap compact tanpa memaksa tinggi kosong */
.rb-feed-card__title {
min-height: 0;
}

/* Sidebar */
.rb-sidebar-card__title {
min-height: 0;
}


/* Ultra-compact feed + sidebar rhythm
-------------------------------------------------------------- */

/* ===== FEED UTAMA ===== */

.rb-feed-grid {
row-gap: 22px;
}

.rb-feed-card__body {
padding-top: 5px;
}

.rb-feed-card__category {
margin: 0;
line-height: 1;
}

.rb-feed-card__title {
margin: 2px 0 0;
min-height: 0;
line-height: 1.22;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.rb-feed-card__meta {
margin-top: 2px;
line-height: 1.1;
}

.rb-feed-card__engagement {
margin-top: 3px;
}

/* ===== SIDEBAR ===== */

.rb-sidebar-slide.is-active {
gap: 5px;
}

.rb-sidebar-card__body {
padding-top: 7px;
padding-bottom: 7px;
}

.rb-sidebar-card__category {
margin: 0;
line-height: 1;
}

.rb-sidebar-card__title {
margin: 2px 0 0;
line-height: 1.18;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.rb-sidebar-card__author {
margin-top: 1px;
line-height: 1.05;
}

.rb-sidebar-card__metric {
margin-top: 1px;
padding-top: 0;
line-height: 1.05;
}


/* Kill Kadence heading margins inside editorial cards
-------------------------------------------------------------- */

.rb-homepage__feed .rb-feed-card__title {
margin-top: 2px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-block-start: 2px !important;
margin-block-end: 0 !important;
}

.rb-home-sidebar .rb-sidebar-card__title {
margin-top: 2px !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-block-start: 2px !important;
margin-block-end: 0 !important;
}

.rb-homepage__feed .rb-feed-card__category,
.rb-home-sidebar .rb-sidebar-card__category {
margin-bottom: 0 !important;
}


/* Editorial spacing balance — compact but breathable
-------------------------------------------------------------- */

/* ===== FEED UTAMA ===== */

.rb-feed-card__body {
padding-top: 7px;
}

.rb-homepage__feed .rb-feed-card__category {
margin: 0 0 4px !important;
line-height: 1.1;
}

.rb-homepage__feed .rb-feed-card__title {
margin: 0 !important;
margin-block: 0 !important;
line-height: 1.28;
}

.rb-feed-card__meta {
margin-top: 5px;
line-height: 1.2;
}

.rb-feed-card__engagement {
margin-top: 6px;
}

.rb-feed-grid {
row-gap: 26px;
}


/* ===== SIDEBAR TOP 3 ===== */

.rb-sidebar-card__body {
padding: 9px 10px;
}

.rb-home-sidebar .rb-sidebar-card__category {
margin: 0 0 3px !important;
line-height: 1.1;
}

.rb-home-sidebar .rb-sidebar-card__title {
margin: 0 !important;
margin-block: 0 !important;
line-height: 1.24;
}

.rb-sidebar-card__author {
margin-top: 3px;
line-height: 1.15;
}

.rb-sidebar-card__metric {
margin-top: 2px;
padding-top: 0;
line-height: 1.1;
}


/* Top 3 sidebar final polish
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-sidebar-card {
height: 106px;
}

.rb-sidebar-card__body {
padding: 9px 10px 8px;
}

.rb-sidebar-card__title {
line-height: 1.26;
}

.rb-sidebar-card__author {
margin-top: 4px;
line-height: 1.15;
}

.rb-sidebar-card__metric {
margin-top: 3px;
padding-top: 0;
line-height: 1.1;
}

}

/* Ranking badge: slightly quieter */
.rb-sidebar-card__rank {
top: 6px;
left: 6px;
width: 25px;
height: 25px;
border-width: 2px;
}

.rb-sidebar-card__rank svg {
inset: 4px;
width: 14px;
height: 14px;
}

.rb-sidebar-card__rank strong {
font-size: 10px;
}


/* Top 3 precision layout
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-sidebar-slide.is-active {
gap: 8px;
}

.rb-sidebar-card {
grid-template-columns: 96px minmax(0, 1fr);
height: 112px;
border-radius: 12px;
}

.rb-sidebar-card__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto 1fr;
column-gap: 8px;
row-gap: 0;
min-width: 0;
padding: 10px 11px 9px;
}

.rb-sidebar-card__category {
grid-column: 1 / -1;
grid-row: 1;
margin: 0 0 4px !important;
font-size: 9.5px;
line-height: 1;
}

.rb-home-sidebar .rb-sidebar-card__title {
grid-column: 1 / -1;
grid-row: 2;
align-self: start;
margin: 0 !important;
font-size: 12.5px;
font-weight: 600;
line-height: 1.28;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.rb-sidebar-card__author {
grid-column: 1;
grid-row: 3;
align-self: end;
min-width: 0;
margin: 6px 0 0;
overflow: hidden;
color: var(--rb-brand-muted, #687078);
font-size: 9.5px;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}

.rb-sidebar-card__metric {
grid-column: 2;
grid-row: 3;
align-self: end;
margin: 6px 0 0;
padding: 0;
color: var(--rb-brand-teal, #094C4E);
font-size: 9.5px;
font-weight: 700;
line-height: 1.15;
white-space: nowrap;
}

}

/* Badge dibuat lebih menyatu dengan thumbnail */
.rb-sidebar-card__rank {
top: 7px;
left: 7px;
width: 24px;
height: 24px;
box-shadow: 0 1px 5px rgba(0,0,0,.14);
}

.rb-sidebar-card__rank strong {
font-size: 9.5px;
}


/* Top 3 natural editorial rhythm
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-sidebar-slide.is-active {
gap: 7px;
}

.rb-sidebar-card {
grid-template-columns: 96px minmax(0, 1fr);
height: 104px;
}

.rb-sidebar-card__body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
align-content: center;
column-gap: 8px;
row-gap: 0;
padding: 9px 10px;
}

.rb-sidebar-card__category {
grid-column: 1 / -1;
grid-row: 1;
margin: 0 0 4px !important;
font-size: 9px;
line-height: 1;
}

.rb-home-sidebar .rb-sidebar-card__title {
grid-column: 1 / -1;
grid-row: 2;
margin: 0 !important;
font-size: 12.5px;
font-weight: 600;
line-height: 1.25;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.rb-sidebar-card__author {
grid-column: 1;
grid-row: 3;
align-self: center;
min-width: 0;
margin: 5px 0 0;
overflow: hidden;
font-size: 9.5px;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}

.rb-sidebar-card__metric {
grid-column: 2;
grid-row: 3;
align-self: center;
margin: 5px 0 0;
padding: 0;
font-size: 9.5px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}

}

/* Ranking badge dibuat sedikit lebih ringan */
.rb-sidebar-card__rank {
top: 7px;
left: 7px;
width: 23px;
height: 23px;
}

.rb-sidebar-card__rank strong {
font-size: 9px;
}


/* Top 3 metadata — author + metric on one natural line
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-sidebar-card__body {
grid-template-columns: minmax(0, auto) auto;
justify-content: start;
column-gap: 5px;
}

.rb-sidebar-card__author {
grid-column: 1;
grid-row: 3;
max-width: 135px;
margin-top: 5px;
}

.rb-sidebar-card__metric {
grid-column: 2;
grid-row: 3;
justify-self: start;
margin-top: 5px;
color: var(--rb-brand-teal, #094C4E);
}

.rb-sidebar-card__metric::before {
content: "·";
margin-right: 5px;
color: var(--rb-brand-muted, #687078);
font-weight: 500;
}

}


/* Top 3 clean metadata
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-sidebar-card__body {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 9px 10px;
}

.rb-sidebar-card__category {
margin: 0 0 4px !important;
}

.rb-home-sidebar .rb-sidebar-card__title {
margin: 0 !important;
line-height: 1.25;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.rb-sidebar-card__author {
display: none;
}

.rb-sidebar-card__metric {
display: block;
margin: 5px 0 0;
padding: 0;
color: var(--rb-brand-teal, #094C4E);
font-size: 9.5px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}

.rb-sidebar-card__metric::before {
content: none;
}

}


/* Top 3 metadata — vertical author + metric
-------------------------------------------------------------- */

@media (min-width: 768px) {

.rb-sidebar-card__author {
display: block;
width: 100%;
max-width: 100%;
margin: 4px 0 0;
overflow: hidden;
color: var(--rb-brand-muted, #687078);
font-size: 9.5px;
font-weight: 500;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}

.rb-sidebar-card__metric {
display: block;
width: 100%;
margin: 2px 0 0;
padding: 0;
color: var(--rb-brand-teal, #094C4E);
font-size: 9.5px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}

.rb-sidebar-card__metric::before {
content: none;
}

}

/* Homepage archive CTA — Bestari
-------------------------------------------------------------- */

.rb-feed-archive-wrap {
display: flex;
justify-content: center;
margin-top: 26px;
}

.rb-feed-archive-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 9px 16px;
border: 1px solid rgba(9, 76, 78, .22);
border-radius: var(--rb-radius-control, 12px);
background: #fff;
color: var(--rb-brand-teal, #094C4E);
font-size: 12.5px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
transform .18s ease;
}

.rb-feed-archive-link:hover,
.rb-feed-archive-link:focus-visible {
border-color: rgba(15, 149, 153, .38);
background: rgba(15, 149, 153, .07);
color: var(--rb-brand-teal, #094C4E);
text-decoration: none;
}

.rb-feed-archive-link:active {
transform: translateY(1px);
}

.rb-feed-archive-link.is-loading {
pointer-events: none;
opacity: .55;
}

.rb-feed-archive-link__arrow {
font-size: 15px;
line-height: 1;
transition: transform .18s ease;
}

.rb-feed-archive-link:hover .rb-feed-archive-link__arrow {
transform: translateX(2px);
}


/* Dedicated all-posts archive
-------------------------------------------------------------- */

.rb-all-posts-archive {
width: 100%;
}

.rb-all-posts-archive .rb-feed-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 18px;
row-gap: 26px;
}

.rb-archive-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 32px;
}

.rb-archive-pagination__page,
.rb-archive-pagination__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 9px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
line-height: 1;
}

a.rb-archive-pagination__page {
border: 1px solid rgba(25, 28, 31, .10);
background: #fff;
color: var(--rb-brand-charcoal, #191C1F);
text-decoration: none;
}

a.rb-archive-pagination__page:hover {
border-color: rgba(15, 149, 153, .35);
background: rgba(15, 149, 153, .08);
color: var(--rb-brand-teal, #094C4E);
}

.rb-archive-pagination__page.is-active {
border: 1px solid var(--rb-brand-teal, #094C4E);
background: var(--rb-brand-teal, #094C4E);
color: #fff;
}

.rb-archive-pagination__ellipsis {
min-width: 24px;
padding: 0;
color: var(--rb-brand-muted, #687078);
}

@media (max-width: 1024px) {
.rb-all-posts-archive .rb-feed-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 640px) {
.rb-feed-archive-wrap {
margin-top: 22px;
}

.rb-feed-archive-link {
min-height: 40px;
padding: 9px 14px;
font-size: 12px;
}

.rb-all-posts-archive .rb-feed-grid {
grid-template-columns: 1fr;
}
}

/* Homepage archive navigation — final compact layout
-------------------------------------------------------------- */

.rb-homepage__feed .rb-feed-archive-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 26px;
}

.rb-homepage__feed .rb-feed-archive-title {
margin-right: 2px;
color: var(--rb-brand-muted, #687078);
font-size: 11.5px;
font-weight: 500;
line-height: 36px;
white-space: nowrap;
}

.rb-homepage__feed .rb-feed-archive-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 7px 12px;
border: 1px solid rgba(9, 76, 78, .18);
border-radius: 10px;
background: #fff;
color: var(--rb-brand-teal, #094C4E);
font-size: 11.5px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
transform .18s ease;
}

.rb-homepage__feed .rb-feed-archive-link:hover,
.rb-homepage__feed .rb-feed-archive-link:focus-visible {
border-color: rgba(15, 149, 153, .38);
background: rgba(15, 149, 153, .07);
color: var(--rb-brand-teal, #094C4E);
text-decoration: none;
}

.rb-homepage__feed .rb-feed-archive-link:active {
transform: translateY(1px);
}

.rb-homepage__feed .rb-feed-archive-link__arrow {
display: none;
}

@media (max-width: 640px) {

.rb-homepage__feed .rb-feed-archive-wrap {
gap: 6px;
margin-top: 22px;
}

.rb-homepage__feed .rb-feed-archive-title {
flex: 0 0 100%;
margin: 0 0 2px;
text-align: center;
line-height: 1.3;
}

.rb-homepage__feed .rb-feed-archive-link {
min-height: 34px;
padding: 7px 11px;
font-size: 11px;
}
}



/* Homepage archive navigation — micro polish
-------------------------------------------------------------- */

.rb-homepage__feed .rb-feed-archive-title {
margin-right: -1px;
color: #596267;
font-weight: 600;
}

/* Bestari unified multimedia — 1 + 2x2 + 2x2
-------------------------------------------------------------- */

.rb-multimedia {
margin-top: 36px;
padding: 18px;
border: 1px solid var(--rb-brand-border, rgba(25,28,31,.09));
border-radius: var(--rb-radius-card, 16px);
background: #fff;
}

.rb-multimedia__layout {
display: grid;
grid-template-columns:
minmax(0, .88fr)
minmax(0, 1.16fr)
minmax(0, 1.16fr);
gap: 18px;
align-items: start;
}

.rb-multimedia__column {
min-width: 0;
}

.rb-multimedia__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 28px;
margin-bottom: 10px;
}

.rb-multimedia__title {
margin: 0 !important;
color: var(--rb-brand-teal, #094C4E);
font-size: 15px;
font-weight: 700;
line-height: 1.25;
}

.rb-multimedia__heading-link {
flex: 0 0 auto;
color: var(--rb-brand-muted, #687078);
font-size: 10px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}

.rb-multimedia__heading-link:hover,
.rb-multimedia__heading-link:focus-visible {
color: var(--rb-brand-turquoise, #0F9599);
text-decoration: none;
}


/* Featured event
-------------------------------------------------------------- */

.rb-multimedia-featured {
display: block;
overflow: hidden;
border: 1px solid rgba(25, 28, 31, .08);
border-radius: 14px;
background: #fff;
color: inherit;
text-decoration: none;
}

.rb-multimedia-featured__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
background: #f3f5f5;
}

.rb-multimedia-featured__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .25s ease;
}

.rb-multimedia-featured:hover .rb-multimedia-featured__image {
transform: scale(1.018);
}

.rb-multimedia-featured__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: var(--rb-brand-muted, #687078);
font-size: 12px;
font-weight: 600;
}

.rb-multimedia-featured__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 10px;
color: var(--rb-brand-teal, #094C4E);
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
}


/* Instagram 2 × 2
-------------------------------------------------------------- */

.rb-multimedia-instagram {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.rb-multimedia-instagram__card {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: 12px;
background: #f3f5f5;
}

.rb-multimedia-instagram__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .22s ease;
}

.rb-multimedia-instagram__card::after {
content: "";
position: absolute;
inset: 0;
background: rgba(9, 76, 78, 0);
transition: background-color .22s ease;
}

.rb-multimedia-instagram__card:hover::after {
background: rgba(9, 76, 78, .07);
}

.rb-multimedia-instagram__card:hover
.rb-multimedia-instagram__image {
transform: scale(1.025);
}


/* YouTube 2 × 2
-------------------------------------------------------------- */

.rb-multimedia-youtube {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 10px;
}

.rb-multimedia-youtube__card {
display: block;
min-width: 0;
color: inherit;
text-decoration: none;
}

.rb-multimedia-youtube__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 12px;
background: #191c1f;
}

.rb-multimedia-youtube__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .22s ease;
}

.rb-multimedia-youtube__card:hover
.rb-multimedia-youtube__image {
transform: scale(1.025);
}

.rb-multimedia-youtube__title {
display: -webkit-box;
overflow: hidden;
margin: 6px 1px 0 !important;
color: var(--rb-brand-charcoal, #191C1F);
font-size: 11.25px;
font-weight: 600;
line-height: 1.28;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.rb-multimedia-youtube__card:hover
.rb-multimedia-youtube__title {
color: var(--rb-brand-teal, #094C4E);
}


/* Play icons
-------------------------------------------------------------- */

.rb-multimedia__play {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: inline-flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.92);
color: var(--rb-brand-teal, #094C4E);
transform: translate(-50%, -50%);
box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

.rb-multimedia__play--small {
width: 30px;
height: 30px;
}

.rb-multimedia__play--youtube {
width: 32px;
height: 32px;
}


/* Tablet
-------------------------------------------------------------- */

@media (max-width: 1024px) {

.rb-multimedia__layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rb-multimedia__column--event {
grid-row: span 2;
}

}


/* Mobile
-------------------------------------------------------------- */

@media (max-width: 767px) {

.rb-multimedia {
margin-top: 28px;
padding: 14px;
}

.rb-multimedia__layout {
grid-template-columns: 1fr;
gap: 24px;
}

.rb-multimedia__column--event {
grid-row: auto;
}

.rb-multimedia-featured {
max-width: 420px;
margin-inline: auto;
}

.rb-multimedia__heading {
margin-bottom: 9px;
}

}


@media (max-width: 440px) {

.rb-multimedia__title {
font-size: 14px;
}

.rb-multimedia-instagram {
gap: 7px;
}

.rb-multimedia-youtube {
gap: 12px 8px;
}

.rb-multimedia-youtube__title {
font-size: 10.5px;
}

}


/* Dark mode
-------------------------------------------------------------- */

html[data-rb-theme="dark"] .rb-multimedia,
html[data-rb-theme="dark"] .rb-multimedia-featured {
background: #191c1f;
border-color: rgba(255,255,255,.09);
}

html[data-rb-theme="dark"] .rb-multimedia__title,
html[data-rb-theme="dark"] .rb-multimedia-featured__meta {
color: #7dd9dc;
}

html[data-rb-theme="dark"] .rb-multimedia-youtube__title {
color: rgba(255,255,255,.88);
}

/* Bestari multimedia — aligned 1 + 2x2 square + 3 horizontal
-------------------------------------------------------------- */

@media (min-width: 1025px) {

/*
 * Kolom Instagram menjadi patokan tinggi.
 * Event ≈ rasio portrait 4:5 terhadap lebar Instagram.
 */
.rb-multimedia__layout {
display: grid;
grid-template-columns:
minmax(0, .88fr)
minmax(0, 1.08fr)
minmax(0, 1.08fr);
gap: 18px;
align-items: stretch;
}

/*
 * Semua kolom memakai dua baris:
 * heading + area konten.
 * Area konten ketiganya akan memiliki tinggi yang sama.
 */
.rb-multimedia__column {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-width: 0;
align-self: stretch;
}

.rb-multimedia__heading {
min-height: 28px;
margin-bottom: 10px;
align-items: baseline;
}

/* ======================================================
   EVENT
   ====================================================== */

.rb-multimedia-featured {
position: relative;
height: 100%;
min-height: 0;
overflow: hidden;
border-radius: 14px;
}

.rb-multimedia-featured__media {
width: 100%;
height: 100%;
aspect-ratio: auto;
}

.rb-multimedia-featured__image {
width: 100%;
height: 100%;
object-fit: cover;
}

/*
 * Meta putih di bawah dihilangkan agar tidak membuat
 * featured lebih tinggi daripada kolom lain.
 */
.rb-multimedia-featured__meta {
display: none;
}


/* ======================================================
   INSTAGRAM — 2 x 2 SQUARE
   Ini menjadi sumber tinggi alami layout.
   ====================================================== */

.rb-multimedia-instagram {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 10px;

width: 100%;
aspect-ratio: 1 / 1;
min-height: 0;
}

.rb-multimedia-instagram__card {
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
aspect-ratio: 1 / 1;
border-radius: 12px;
}

.rb-multimedia-instagram__image {
width: 100%;
height: 100%;
object-fit: cover;
}


/* ======================================================
   YOUTUBE — 3 horizontal cards
   ====================================================== */

.rb-multimedia-youtube {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 10px;

width: 100%;
height: 100%;
min-height: 0;
}

.rb-multimedia-youtube__card {
display: grid;
grid-template-columns: minmax(125px, 43%) minmax(0, 1fr);
align-items: stretch;

min-width: 0;
min-height: 0;
overflow: hidden;

border: 1px solid rgba(25, 28, 31, .08);
border-radius: 12px;
background: #fff;
}

.rb-multimedia-youtube__media {
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
border-radius: 0;
background: #191c1f;
}

.rb-multimedia-youtube__image {
width: 100%;
height: 100%;
object-fit: cover;
}

.rb-multimedia-youtube__title {
display: -webkit-box;
align-self: center;

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

color: var(--rb-brand-charcoal, #191C1F);
font-size: 11.5px;
font-weight: 600;
line-height: 1.3;

overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}

.rb-multimedia-youtube__card:hover {
border-color: rgba(15, 149, 153, .23);
}

.rb-multimedia-youtube__card:hover
.rb-multimedia-youtube__title {
color: var(--rb-brand-teal, #094C4E);
}

.rb-multimedia__play--youtube {
width: 30px;
height: 30px;
}

}


/* Tablet: tetap mudah dibaca, tidak dipaksa tiga kolom
-------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

.rb-multimedia__column--youtube {
grid-column: 1 / -1;
}

.rb-multimedia-youtube {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
}

.rb-multimedia-youtube__card {
display: block;
}

.rb-multimedia-youtube__media {
aspect-ratio: 16 / 9;
border-radius: 12px;
}

.rb-multimedia-youtube__title {
padding: 7px 2px 0;
}

}


/* Dark mode horizontal YouTube card
-------------------------------------------------------------- */

html[data-rb-theme="dark"]
.rb-multimedia-youtube__card {
background: #191c1f;
border-color: rgba(255,255,255,.09);
}



/* Bestari multimedia — final micro polish
-------------------------------------------------------------- */

@media (min-width: 1025px) {

/* Thumbnail YouTube sedikit lebih dominan,
   mengurangi ruang putih berlebih pada sisi judul. */
.rb-multimedia-youtube__card {
grid-template-columns: minmax(145px, 48%) minmax(0, 1fr);
}

.rb-multimedia-youtube__title {
padding: 10px 10px;
font-size: 11.25px;
line-height: 1.28;
}

}

/* Link kecil pada heading lebih rapat dengan kelompoknya */
.rb-multimedia__heading {
column-gap: 6px;
}

.rb-multimedia__heading-link {
margin-left: auto;
font-size: 9.5px;
white-space: nowrap;
opacity: .72;
}

.rb-multimedia__heading-link:hover,
.rb-multimedia__heading-link:focus-visible {
opacity: 1;
}


/* Multimedia heading links
-------------------------------------------------------------- */

.rb-multimedia__title-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: inherit;
text-decoration: none;
}

.rb-multimedia__title-link:hover,
.rb-multimedia__title-link:focus-visible {
color: var(--rb-brand-turquoise, #0F9599);
text-decoration: none;
}

.rb-multimedia__title-arrow {
display: inline-block;
font-size: .92em;
font-weight: 500;
line-height: 1;
transition: transform .18s ease;
}

.rb-multimedia__title-link:hover .rb-multimedia__title-arrow,
.rb-multimedia__title-link:focus-visible .rb-multimedia__title-arrow {
transform: translateX(2px);
}


/* Multimedia final safe polish
-------------------------------------------------------------- */

/* Ikon kecil — tidak mengubah tinggi heading */
.rb-multimedia__column--event .rb-multimedia__title {
display: inline-flex;
align-items: center;
gap: 6px;
}

.rb-multimedia__column--event .rb-multimedia__title::before {
content: "◫";
color: #D98200;
font-size: 12px;
font-weight: 500;
line-height: 1;
}

.rb-multimedia__column--instagram .rb-multimedia__title-link::before {
content: "◎";
color: var(--rb-brand-turquoise, #0F9599);
font-size: 13px;
font-weight: 600;
line-height: 1;
}

.rb-multimedia__column--youtube .rb-multimedia__title-link::before {
content: "▷";
color: var(--rb-brand-teal, #094C4E);
font-size: 13px;
font-weight: 700;
line-height: 1;
}

.rb-multimedia__title-link {
display: inline-flex;
align-items: center;
gap: 6px;
}


/* Desktop YouTube:
   ukuran kartu TIDAK diubah.
   Thumbnail hanya mengisi kotak kartu secara absolut.
-------------------------------------------------------------- */

@media (min-width: 1025px) {

.rb-multimedia-youtube__card {
position: relative;
display: block !important;
overflow: hidden;
min-width: 0;
min-height: 0;
border-radius: 12px;
background: #191C1F;
}

.rb-multimedia-youtube__media {
position: absolute;
inset: 0;
width: auto !important;
height: auto !important;
min-width: 0;
min-height: 0;
aspect-ratio: auto !important;
border-radius: 12px;
}

.rb-multimedia-youtube__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.rb-multimedia-youtube__title {
display: none !important;
}

.rb-multimedia__play--youtube {
z-index: 3;
}

}

/* Metadata judul juga tidak diperlukan pada layar kecil */
@media (max-width: 1024px) {
.rb-multimedia-youtube__title {
display: none !important;
}
}


/* Bestari multimedia — final heading & icon polish
-------------------------------------------------------------- */

/*
 * Hilangkan simbol teks lama tanpa mengubah geometri heading.
 */
.rb-multimedia__column--event .rb-multimedia__title::before {
content: none !important;
}


/* Tiga heading mempunyai pola interaksi yang sama */
.rb-multimedia__title-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rb-brand-teal, #094C4E);
text-decoration: none;
transition: color .18s ease;
}

.rb-multimedia__title-link:hover,
.rb-multimedia__title-link:focus-visible {
color: var(--rb-brand-turquoise, #0F9599);
text-decoration: none;
}


/* -----------------------------------------------------------
   Ikon outline asli
   ----------------------------------------------------------- */

.rb-multimedia__title-link::before {
content: "";
flex: 0 0 auto;
display: inline-block;
width: 14px;
height: 14px;
background-color: currentColor;
}


/* Event / calendar */
.rb-multimedia__column--event
.rb-multimedia__title-link::before {

background-color: #D98200;

-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5.5' width='17' height='15' rx='2.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7.5 3.5v4M16.5 3.5v4M3.5 10h17' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat;

mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5.5' width='17' height='15' rx='2.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M7.5 3.5v4M16.5 3.5v4M3.5 10h17' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat;
}


/* Instagram */
.rb-multimedia__column--instagram
.rb-multimedia__title-link::before {

background-color: var(--rb-brand-turquoise, #0F9599);

-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17.3' cy='6.7' r='1' fill='black'/%3E%3C/svg%3E")
center / contain no-repeat;

mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17.3' cy='6.7' r='1' fill='black'/%3E%3C/svg%3E")
center / contain no-repeat;
}


/* YouTube */
.rb-multimedia__column--youtube
.rb-multimedia__title-link::before {

width: 15px;
height: 15px;

background-color: var(--rb-brand-teal, #094C4E);

-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 9l5 3-5 3z' fill='black'/%3E%3C/svg%3E")
center / contain no-repeat;

mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 9l5 3-5 3z' fill='black'/%3E%3C/svg%3E")
center / contain no-repeat;
}


/* Saat hover, ketiga ikon mengikuti accent turquoise */
.rb-multimedia__title-link:hover::before,
.rb-multimedia__title-link:focus-visible::before {
background-color: var(--rb-brand-turquoise, #0F9599);
}


/* Arrow halus */
.rb-multimedia__title-arrow {
display: inline-block;
font-size: .92em;
font-weight: 500;
line-height: 1;
transition: transform .18s ease;
}

.rb-multimedia__title-link:hover
.rb-multimedia__title-arrow,
.rb-multimedia__title-link:focus-visible
.rb-multimedia__title-arrow {
transform: translateX(2px);
}


/* -----------------------------------------------------------
   Play button — sedikit lebih subtle
   ----------------------------------------------------------- */

.rb-multimedia__play--small {
width: 27px;
height: 27px;
}

.rb-multimedia__play--small svg {
width: 16px;
height: 16px;
}

.rb-multimedia__play--youtube {
width: 28px !important;
height: 28px !important;
}

.rb-multimedia__play--youtube svg {
width: 16px;
height: 16px;
}


/* Dark mode */
html[data-rb-theme="dark"]
.rb-multimedia__title-link {
color: #7dd9dc;
}

html[data-rb-theme="dark"]
.rb-multimedia__column--event
.rb-multimedia__title-link::before {
background-color: var(--rb-brand-orange, #FDAA01);
}

/* ==========================================================
   Penulis Paling Produktif
   ========================================================== */

.rb-productive-authors {
margin-top: 36px;
padding: 6px 2px 4px;
}

.rb-productive-authors__heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin-bottom: 20px;
}

.rb-productive-authors__eyebrow {
display: block;
margin-bottom: 4px;
color: #D98200;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .07em;
text-transform: uppercase;
}

.rb-productive-authors__title {
margin: 0 !important;
color: var(--rb-brand-teal, #094C4E);
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}

.rb-productive-authors__subtitle {
max-width: 390px;
margin: 0;
color: var(--rb-brand-muted, #687078);
font-size: 11.5px;
line-height: 1.5;
text-align: right;
}


/* Horizontal human-first leaderboard */
.rb-productive-authors__list {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 14px;
align-items: start;
}

.rb-productive-author {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
color: inherit;
text-align: center;
text-decoration: none;
}

.rb-productive-author:hover,
.rb-productive-author:focus-visible {
text-decoration: none;
}

.rb-productive-author__avatar-wrap {
position: relative;
width: 74px;
height: 74px;
margin-bottom: 8px;
}

.rb-productive-author__avatar {
display: block;
width: 74px;
height: 74px;
border: 3px solid #fff;
border-radius: 50%;
object-fit: cover;
background: #f1f4f4;
box-shadow: 0 0 0 1px rgba(9,76,78,.10);
transition:
transform .18s ease,
box-shadow .18s ease;
}

.rb-productive-author:hover .rb-productive-author__avatar,
.rb-productive-author:focus-visible .rb-productive-author__avatar {
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(15,149,153,.18),
0 5px 14px rgba(25,28,31,.08);
}


/* Rank badge */
.rb-productive-author__rank {
position: absolute;
right: -2px;
bottom: -1px;
z-index: 2;

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

min-width: 23px;
height: 23px;
padding: 0 5px;

border: 2px solid #fff;
border-radius: 999px;

background: #72797e;
color: #fff;

font-size: 9px;
font-weight: 700;
line-height: 1;
}

/* Top 3 mengikuti sistem warna Bestari */
.rb-productive-author__rank--1 {
background: #FDAA01;
color: #513700;
}

.rb-productive-author__rank--2 {
background: #0F9599;
}

.rb-productive-author__rank--3 {
background: #094C4E;
}


/* Name + count */
.rb-productive-author__name {
display: -webkit-box;
width: 100%;
overflow: hidden;

color: var(--rb-brand-charcoal, #191C1F);
font-size: 10.75px;
font-weight: 600;
line-height: 1.28;

-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}

.rb-productive-author:hover .rb-productive-author__name,
.rb-productive-author:focus-visible .rb-productive-author__name {
color: var(--rb-brand-teal, #094C4E);
}

.rb-productive-author__count {
margin-top: 3px;
color: var(--rb-brand-muted, #687078);
font-size: 9.75px;
font-weight: 500;
line-height: 1.2;
}


/* Tablet: horizontal scroll keeps the circular rhythm */
@media (max-width: 1024px) {

.rb-productive-authors__list {
display: flex;
gap: 18px;
overflow-x: auto;
padding: 2px 2px 10px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}

.rb-productive-author {
flex: 0 0 92px;
scroll-snap-align: start;
}

}


/* Mobile */
@media (max-width: 700px) {

.rb-productive-authors {
margin-top: 30px;
}

.rb-productive-authors__heading {
display: block;
margin-bottom: 17px;
}

.rb-productive-authors__subtitle {
max-width: none;
margin-top: 5px;
text-align: left;
}

.rb-productive-author {
flex-basis: 84px;
}

.rb-productive-author__avatar-wrap,
.rb-productive-author__avatar {
width: 68px;
height: 68px;
}

}


/* Dark mode */
html[data-rb-theme="dark"] .rb-productive-author__avatar {
border-color: #191C1F;
}

html[data-rb-theme="dark"] .rb-productive-author__rank {
border-color: #191C1F;
}

html[data-rb-theme="dark"] .rb-productive-author__name {
color: rgba(255,255,255,.88);
}



/* Penulis Produktif — final visual polish
-------------------------------------------------------------- */

.rb-productive-authors__heading {
    margin-bottom: 22px;
}

.rb-productive-authors__subtitle {
    max-width: 420px;
    color: #737B80;
    font-size: 11.75px;
    line-height: 1.45;
}

.rb-productive-author__avatar-wrap {
    width: 80px;
    height: 80px;
    margin-bottom: 9px;
}

.rb-productive-author__avatar {
    width: 80px;
    height: 80px;
}

.rb-productive-author__name {
    font-size: 11.25px;
    line-height: 1.3;
}

.rb-productive-author__count {
    margin-top: 3px;
    font-size: 10px;
    color: #7B8388;
}

@media (max-width: 700px) {

    .rb-productive-author__avatar-wrap,
    .rb-productive-author__avatar {
        width: 70px;
        height: 70px;
    }

    .rb-productive-authors__subtitle {
        font-size: 11px;
    }

}


/* Mobile main feed — editorial layout
-------------------------------------------------------------- */
@media (max-width: 767px) {

    .rb-homepage__feed {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    html[data-rb-theme="dark"] .rb-homepage__feed {
        border: 0;
        background: transparent;
    }

    .rb-homepage__feed .rb-feed-tabs {
        margin: 0 0 18px;
        padding: 10px;
        border: 1px solid var(--rb-brand-border, rgba(25, 28, 31, .09));
        border-radius: 14px;
        background: #FFFFFF;
    }

    html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-tabs {
        border-color: #2B3035;
        background: #181B1E;
    }

    .rb-homepage__feed .rb-feed-grid {
        row-gap: 34px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .rb-homepage__feed .rb-feed-card__media {
        border-radius: 15px;
    }

    .rb-homepage__feed .rb-feed-card__body {
        padding-top: 8px;
    }

    .rb-homepage__feed .rb-feed-card__category {
        margin-bottom: 3px !important;
    }

    .rb-homepage__feed .rb-feed-card__meta {
        margin-top: 3px;
    }

    .rb-homepage__feed .rb-feed-card__engagement {
        margin-top: 5px;
    }
}


/* Mobile main feed — compact 2/3 column grid
-------------------------------------------------------------- */
@media (max-width: 767px) {

    .rb-homepage__feed .rb-feed-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 26px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .rb-homepage__feed .rb-feed-card {
        min-width: 0;
    }

    .rb-homepage__feed .rb-feed-card__media {
        border-radius: 12px;
    }

    .rb-homepage__feed .rb-feed-card__body {
        padding-top: 7px;
    }

    .rb-homepage__feed .rb-feed-card__category {
        margin-bottom: 3px !important;
        font-size: 10px;
        line-height: 1.2;
    }

    .rb-homepage__feed .rb-feed-card__title {
        margin: 0;
        font-size: 14px;
        line-height: 1.25;
    }

    .rb-homepage__feed .rb-feed-card__title a {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .rb-homepage__feed .rb-feed-card__meta {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.3;
    }

    .rb-homepage__feed .rb-feed-card__engagement {
        margin-top: 5px;
        gap: 10px;
    }

    .rb-homepage__feed .rb-feed-card__engagement-item {
        font-size: 11px;
    }

    .rb-homepage__feed .rb-feed-card__engagement-item svg {
        width: 15px;
        height: 15px;
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .rb-homepage__feed .rb-feed-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 14px;
    }
}

/* Opening CTA — unified mobile layout
-------------------------------------------------------------- */
@media (max-width: 700px) {

    .rb-homepage__container > .rb-school-cta:first-child {
        width: calc(100% - 32px);
        min-height: 0;
        margin: 0 16px 14px;
        overflow: hidden;
        border-radius: 18px;
        box-sizing: border-box;
        background: var(--rb-brand-cream, #FFFAF4);
    }

    /* Square visual */
    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__visual {
        position: relative;
        order: -1;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__image {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 34%;
    }

    /* Soft transition into copy */
    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__visual::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(255, 250, 244, 0) 72%,
                rgba(255, 250, 244, .18) 82%,
                rgba(255, 250, 244, .78) 94%,
                var(--rb-brand-cream, #FFFAF4) 100%
            );
    }

    /* Compact editorial content */
    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__content {
        position: relative;
        z-index: 3;
        min-height: 0;
        margin-top: -26px;
        padding: 14px 18px 17px;
        justify-content: flex-start;
        border-radius: 18px 18px 0 0;
        background:
            linear-gradient(
                180deg,
                rgba(255, 250, 244, .97) 0%,
                var(--rb-brand-cream, #FFFAF4) 24%
            );
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__eyebrow {
        margin: 0 0 7px;
        padding: 0;
        font-size: 10px;
        line-height: 1.25;
        font-weight: 750;
        letter-spacing: .11em;
        color: var(--rb-brand-teal, #094C4E);
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__eyebrow::before {
        display: none;
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__title {
        max-width: none;
        margin: 0;
        font-size: 22px;
        line-height: 1.08;
        font-weight: 750;
        letter-spacing: -.026em;
        color: var(--rb-brand-charcoal, #191C1F);
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__description {
        max-width: none;
        margin: 8px 0 0;
        font-size: 13px;
        line-height: 1.48;
        color: var(--rb-brand-muted, #687078);
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__actions {
        margin-top: 12px;
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__button {
        width: auto;
        min-height: 38px;
        padding: 0 14px;
        gap: 7px;
        border-radius: 10px;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1;
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__button span {
        font-size: 15px;
    }
}

@media (max-width: 380px) {

    .rb-homepage__container > .rb-school-cta:first-child {
        width: calc(100% - 24px);
        margin-left: 12px;
        margin-right: 12px;
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__content {
        margin-top: -24px;
        padding: 13px 16px 16px;
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__title {
        font-size: 21px;
    }

    .rb-homepage__container > .rb-school-cta:first-child .rb-school-cta__description {
        font-size: 12.5px;
    }
}
/* End opening CTA — unified mobile layout */

/* RB CTA MOBILE FINAL */
@media (max-width: 700px) {

    .rb-school-cta {
        min-height: 0;
        border-radius: 18px;
    }

    /* Square image */
    .rb-school-cta__visual {
        min-height: 0;
        aspect-ratio: 1 / 1;
    }

    .rb-school-cta__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Compact copy area */
    .rb-school-cta__content {
        padding: 20px 20px 22px;
    }

    .rb-school-cta__eyebrow {
        margin-bottom: 8px;
        font-size: 10.5px;
        line-height: 1.2;
        letter-spacing: .11em;
    }

    /* Designed to stay on one line on common phone widths */
    .rb-school-cta__title {
        max-width: none;
        margin: 0;
        font-size: clamp(15px, 4.5vw, 18px);
        line-height: 1.15;
        letter-spacing: -.025em;
        white-space: nowrap;
    }

    .rb-school-cta__description {
        max-width: none;
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.55;
    }

    .rb-school-cta__actions {
        margin-top: 16px;
    }

    .rb-school-cta__button {
        min-height: 40px;
        padding: 0 14px;
        gap: 8px;
        border-radius: 10px;
        font-size: 13px;
    }

    .rb-school-cta__button span {
        font-size: 16px;
    }
}

/* Very narrow phones */
@media (max-width: 340px) {
    .rb-school-cta__title {
        font-size: 14px;
        letter-spacing: -.03em;
    }

    .rb-school-cta__content {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* END RB CTA MOBILE FINAL */



/* Mobile layout system — shared horizontal rhythm
-------------------------------------------------------------- */
@media (max-width: 767px) {

    :root {
        --rb-mobile-gutter: 16px;
        --rb-mobile-grid-gap: 12px;
    }

    /* Feed category panel follows the same outer gutter
       as the banner and article grid. */
    .rb-homepage__feed .rb-feed-tabs {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;

        width: auto;
        margin:
            0
            var(--rb-mobile-gutter)
            18px;

        padding: 8px;
    }

    .rb-homepage__feed .rb-feed-tab {
        width: 100%;
        min-width: 0;
        padding: 10px 3px;

        font-size: 13px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    /* Keep the two-column article grid on the same gutter line. */
    .rb-homepage__feed .rb-feed-grid {
        column-gap: var(--rb-mobile-grid-gap);
        padding-left: var(--rb-mobile-gutter);
        padding-right: var(--rb-mobile-gutter);
    }

}

/* Feed archive / "Lihat semua"
-------------------------------------------------------------- */
.rb-feed-archive-wrap {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    align-items: stretch;
}

.rb-feed-archive-title {
    grid-column: 1 / -1;
    display: block;
    margin: 0 0 4px;
    text-align: center;
}

.rb-feed-archive-link {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .rb-feed-archive-wrap {
        gap: 7px;
    }

    .rb-feed-archive-title {
        margin-bottom: 3px;
    }

    .rb-feed-archive-link {
        min-height: 42px;
        padding: 8px 3px;
        font-size: 12px;
        line-height: 1.1;
    }
}

/* Mobile feed archive navigation — definitive layout
-------------------------------------------------------------- */
@media (max-width: 767px) {

    .rb-homepage__feed .rb-feed-archive-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 34px 0 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .rb-homepage__feed .rb-feed-archive-title {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;

        color: #596267 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .rb-homepage__feed .rb-feed-archive-links {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;

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

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

        border: 1px solid #e1e5e7 !important;
        border-radius: 18px !important;
        background: #ffffff !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .rb-homepage__feed .rb-feed-archive-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;

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

        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        box-shadow: none !important;

        color: #4f595e !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1 !important;

        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
    }

    .rb-homepage__feed .rb-feed-archive-link:hover,
    .rb-homepage__feed .rb-feed-archive-link:focus-visible {
        background: #f1f7f7 !important;
        color: #15575a !important;
    }
}



/* Mobile "Lihat semua" — match main feed tabs exactly
-------------------------------------------------------------- */
@media (max-width: 767px) {

    .rb-homepage__feed .rb-feed-archive-wrap {
        display: block !important;
        width: 100% !important;
        margin: 34px 0 0 !important;
        padding: 0 !important;
    }

    .rb-homepage__feed .rb-feed-archive-title {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 0 !important;

        color: #596267 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Same outer gutter, border, radius and padding as top tabs */
    .rb-homepage__feed .rb-feed-archive-links {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 var(--rb-mobile-gutter, 16px) !important;
        padding: 8px !important;

        border: 1px solid var(--rb-brand-border, rgba(25, 28, 31, .09)) !important;
        border-radius: 14px !important;
        background: #FFFFFF !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Same typography and spacing as top category buttons */
    .rb-homepage__feed .rb-feed-archive-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

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

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

        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        box-shadow: none !important;

        color: var(--rb-brand-muted, #687078) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
    }

    /* "Tulisan" = equivalent of active "Terbaru" */
    .rb-homepage__feed .rb-feed-archive-link:first-child {
        background: rgba(15, 149, 153, .11) !important;
        color: var(--rb-brand-teal, #094C4E) !important;
        font-weight: 700 !important;
    }

    .rb-homepage__feed .rb-feed-archive-link:hover,
    .rb-homepage__feed .rb-feed-archive-link:focus-visible {
        background: rgba(15, 149, 153, .07) !important;
        color: var(--rb-brand-teal, #094C4E) !important;
    }

    .rb-homepage__feed .rb-feed-archive-link:first-child:hover,
    .rb-homepage__feed .rb-feed-archive-link:first-child:focus-visible {
        background: rgba(15, 149, 153, .11) !important;
    }

    html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-archive-links {
        border-color: #2B3035 !important;
        background: #181B1E !important;
    }

    html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-archive-link {
        color: #A8AFB6 !important;
    }

    html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-archive-link:first-child {
        background: rgba(15, 149, 153, .16) !important;
        color: #55C5C7 !important;
    }
}


/* ==========================================================
   Mobile sidebar — final layout
   ========================================================== */
@media (max-width: 767px) {

    /* Consistent page gutter */
    .rb-home-sidebar {
        width: 100%;
        margin-top: 18px;
        gap: 18px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .rb-home-sidebar > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* Bestari dalam Angka */
    .rb-sidebar-stats {
        margin: 0;
        padding: 14px;
        border-radius: 14px;
    }

    .rb-sidebar-stats__header {
        margin-bottom: 11px;
    }

    .rb-sidebar-stats__title {
        font-size: 13px;
        line-height: 1.3;
    }

    .rb-sidebar-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .rb-sidebar-stat,
    .rb-sidebar-stat:nth-child(odd),
    .rb-sidebar-stat:nth-child(even),
    .rb-sidebar-stat:nth-child(-n+2) {
        min-width: 0;
        padding: 10px;
        border-radius: 11px;
    }

    .rb-sidebar-stat__icon {
        width: 26px;
        height: 26px;
        margin-bottom: 6px;
    }

    .rb-sidebar-stat__icon svg {
        width: 14px;
        height: 14px;
    }

    .rb-sidebar-stat__value {
        font-size: 19px;
        line-height: 1.1;
    }

    .rb-sidebar-stat__label {
        margin-top: 3px;
        font-size: 10px;
        line-height: 1.25;
    }


    /* Paling Disukai / Paling Dikomentari */
    .rb-sidebar-slider {
        width: 100%;
        margin: 0;
    }

    .rb-sidebar-slider__header {
        min-height: 30px;
        margin-bottom: 10px;
        align-items: center;
    }

    .rb-sidebar-slider__title {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
    }

    .rb-sidebar-slider__nav {
        gap: 4px;
    }

    .rb-sidebar-slider__counter {
        min-width: 22px;
        font-size: 10px;
        text-align: center;
    }

    .rb-sidebar-slider__arrow {
        width: 27px;
        height: 27px;
        padding: 0;
    }

    .rb-sidebar-slider__viewport {
        width: 100%;
        overflow: hidden;
    }

    .rb-sidebar-slide.is-active {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }


    /* Compact editorial ranking cards */
    .rb-sidebar-card {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        width: 100%;
        min-height: 92px;
        height: 92px;
        overflow: hidden;
        border-radius: 12px;
    }

    .rb-sidebar-card__media {
        width: 88px;
        height: 92px;
        min-height: 92px;
        overflow: hidden;
        border-radius: 11px 0 0 11px;
    }

    .rb-sidebar-card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rb-sidebar-card__body {
        min-width: 0;
        height: 92px;
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .rb-sidebar-card__category {
        margin-bottom: 3px;
        font-size: 8.75px;
        line-height: 1.1;
    }

    .rb-sidebar-card__title {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.28;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .rb-sidebar-card__author {
        margin-top: 3px;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .rb-sidebar-card__metric {
        margin-top: auto;
        padding-top: 3px;
        font-size: 9px;
        line-height: 1.1;
    }

    .rb-sidebar-card__rank {
        top: 5px;
        left: 5px;
        width: 25px;
        height: 25px;
        border-width: 2px;
    }

    .rb-sidebar-card__rank svg {
        inset: 4px;
        width: 13px;
        height: 13px;
    }

    .rb-sidebar-card__rank strong {
        font-size: 9.5px;
    }



}


/* Mobile sidebar — popular content tabs
-------------------------------------------------------------- */

.rb-sidebar-popular__mobile-header {
    display: none;
}

@media (max-width: 767px) {

    .rb-sidebar-popular {
        width: 100%;
        margin-top: 0;
    }

    .rb-sidebar-popular__mobile-header {
        display: block;
        margin-bottom: 10px;
    }

    .rb-sidebar-popular__heading {
        margin: 0 0 8px;
        color: #145a58;
        font-size: 15px;
        line-height: 1.3;
        font-weight: 700;
    }

    .rb-sidebar-popular__tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
        padding: 4px;
        border: 1px solid #e3e8e8;
        border-radius: 14px;
        background: #fff;
    }

    .rb-sidebar-popular__tab {
        min-width: 0;
        min-height: 40px;
        margin: 0;
        padding: 7px 8px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #687078;
        font: inherit;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }

    .rb-sidebar-popular__tab.is-active {
        background: #e8f7f6;
        color: #145a58;
        font-weight: 700;
    }

    .rb-sidebar-popular__panel {
        display: none;
    }

    .rb-sidebar-popular__panel.is-active {
        display: block;
    }

    /*
     * Judul slider dan pagination desktop tidak dibutuhkan
     * karena digantikan tab di atas.
     */
    .rb-sidebar-popular .rb-sidebar-slider__header {
        display: none;
    }

    .rb-sidebar-popular .rb-sidebar-slider {
        margin: 0;
    }

    /*
     * Di mobile hanya 3 artikel pertama dari kategori aktif.
     */
    .rb-sidebar-popular .rb-sidebar-slide {
        display: none !important;
    }

    .rb-sidebar-popular .rb-sidebar-slide:first-child {
        display: grid !important;
    }
}

html[data-rb-theme="dark"] .rb-sidebar-popular__tabs {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
}

html[data-rb-theme="dark"] .rb-sidebar-popular__tab {
    color: rgba(255,255,255,.68);
}

html[data-rb-theme="dark"] .rb-sidebar-popular__tab.is-active {
    background: rgba(37, 160, 155, .16);
    color: #8ed8d4;
}

/* Productive Authors — mobile slider final
-------------------------------------------------------------- */
@media (max-width: 767px) {

    .rb-productive-authors {
        box-sizing: border-box;
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
        margin: 24px auto;
        padding: 20px 18px 16px;

        overflow: hidden;

        background: #fff8f1;
        border: 1px solid #f1ded0;
        border-radius: 22px;
        box-shadow: 0 8px 24px rgba(18, 42, 56, 0.035);
    }

    .rb-productive-authors__heading {
        display: block;
        margin: 0;
        padding: 0;
    }

    .rb-productive-authors__eyebrow {
        display: block;
        margin: 0 0 5px;

        font-size: 10px;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: .065em;
    }

    .rb-productive-authors__title {
        margin: 0;

        font-size: 17px;
        line-height: 1.22;
    }

    .rb-productive-authors__subtitle {
        max-width: none;
        margin: 5px 0 0;

        font-size: 10.5px;
        line-height: 1.42;
        text-align: left;
    }

    .rb-productive-authors__list {
        display: flex;
        width: 100%;
        max-width: 100%;

        margin: 17px 0 0;
        padding: 0;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        box-sizing: border-box;
    }

    .rb-productive-authors__list::-webkit-scrollbar {
        display: none;
    }

    /*
     * Tepat 4 penulis memenuhi satu halaman slider.
     * 3 gap x 12px = 36px.
     */
    .rb-productive-author {
        flex: 0 0 calc((100% - 36px) / 4);
        width: calc((100% - 36px) / 4);
        min-width: 0;

        text-align: center;
        scroll-snap-align: none;
    }

    .rb-productive-author.is-page-start {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .rb-productive-author__avatar-wrap,
    .rb-productive-author__avatar {
        width: 56px;
        height: 56px;
    }

    .rb-productive-author__avatar-wrap {
        margin: 0 auto 7px;
    }

    .rb-productive-author__rank {
        min-width: 20px;
        height: 20px;
        padding: 0 4px;

        font-size: 8px;
    }

    .rb-productive-author__name {
        display: -webkit-box;
        min-height: 2.5em;
        margin: 0;

        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        font-size: 10px;
        line-height: 1.25;
        text-align: center;
    }

    .rb-productive-author__count {
        margin-top: 3px;

        font-size: 8.75px;
        line-height: 1.3;
        text-align: center;
    }

    .rb-productive-authors__spacer {
        display: block;
        flex: 0 0 0;
        width: 0;
        height: 1px;
        pointer-events: none;
    }

    .rb-productive-authors__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        min-height: 18px;
        margin: 12px 0 0;
    }

    .rb-productive-authors__dot {
        width: 7px;
        height: 7px;
        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 999px;

        background: #d8c4b5;
        opacity: .72;

        cursor: pointer;
        transition:
            background-color 180ms ease,
            opacity 180ms ease,
            transform 180ms ease;
    }

    .rb-productive-authors__dot.is-active {
        background: var(--global-palette1, #ff751f);
        opacity: 1;
        transform: scale(1.16);
    }

    .rb-productive-authors__dot:focus-visible {
        outline: 2px solid var(--global-palette1, #ff751f);
        outline-offset: 3px;
    }

    html[data-rb-theme="dark"] .rb-productive-authors {
        background: rgba(255, 248, 241, 0.055);
        border-color: rgba(255, 255, 255, 0.09);
    }

    html[data-rb-theme="dark"] .rb-productive-authors__dot {
        background: rgba(255,255,255,.28);
    }

    html[data-rb-theme="dark"] .rb-productive-authors__dot.is-active {
        background: var(--global-palette1, #ff751f);
    }
}



/* ==========================================================
   FINAL MOBILE MULTIMEDIA
   Event + Instagram + YouTube tanpa outer frame.
   Seluruh section mengikuti gutter mobile 20px.
   ========================================================== */

@media (max-width: 767px) {

    .rb-multimedia {
        width: auto;
        margin-top: 28px;
        margin-left: 20px;
        margin-right: 20px;
        padding: 0;

        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .rb-multimedia__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        width: 100%;
    }

    .rb-multimedia__column {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .rb-multimedia__heading {
        margin: 0 0 10px;
        padding: 0;
    }

    /* EVENT */
    .rb-multimedia-featured {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* INSTAGRAM — 2 × 2 */
    .rb-multimedia-instagram {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
        gap: 8px;

        width: 100%;
        height: auto;
        aspect-ratio: auto;
        margin: 0;
        padding: 0;
    }

    .rb-multimedia-instagram__card {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* YOUTUBE — 2 × 2 */
    .rb-multimedia-youtube {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 14px 8px;

        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .rb-multimedia-youtube__card {
        display: block;
        min-width: 0;
        width: 100%;
        height: auto;

        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }

    .rb-multimedia-youtube__media {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;

        overflow: hidden;
        border-radius: 10px;
        background: #191c1f;
    }

    .rb-multimedia-youtube__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rb-multimedia-youtube__title {
        display: -webkit-box;
        margin: 7px 1px 0 !important;
        padding: 0;

        color: var(--rb-brand-charcoal, #191C1F);
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.35;

        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .rb-multimedia__play--youtube {
        width: 27px !important;
        height: 27px !important;
    }
}

/* ----------------------------------------------------------
   Final mobile multimedia polish
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    /* Baris metadata tambahan pada poster tidak diperlukan
       di mobile karena heading section sudah cukup jelas. */
    .rb-multimedia-featured__meta {
        display: none !important;
    }

    /* Ritme heading semua multimedia dibuat konsisten. */
    .rb-multimedia__heading {
        margin: 0 0 10px;
    }

    /* Poster event mengikuti bahasa visual thumbnail lainnya. */
    .rb-multimedia-featured,
    .rb-multimedia-featured__media,
    .rb-multimedia-featured__image {
        border-radius: 12px;
    }

    .rb-multimedia-featured {
        overflow: hidden;
    }

    /* Instagram dan YouTube memakai radius identik. */
    .rb-multimedia-instagram__card,
    .rb-multimedia-youtube__media {
        border-radius: 12px;
        overflow: hidden;
    }

    /* Jarak antaritem 2x2 dibuat sama. */
    .rb-multimedia-instagram,
    .rb-multimedia-youtube {
        gap: 8px;
    }

    /* Sedikit ruang sebelum footer. */
    .rb-multimedia {
        margin-bottom: 32px;
    }

    /* Play button sedikit lebih ringan secara visual. */
    .rb-multimedia__play--youtube {
        width: 26px !important;
        height: 26px !important;
    }

    .rb-multimedia__play--youtube svg {
        width: 14px;
        height: 14px;
    }
}


@media (max-width: 380px) {

    .rb-multimedia {
        margin-left: 16px;
        margin-right: 16px;
    }

}


/* ==========================================================
   DESKTOP — Feed archive / Lihat semua
   ========================================================== */

@media (min-width: 768px) {

    .rb-homepage__feed .rb-feed-archive-wrap {
        display: block;
        width: 100%;
        margin: 30px 0 0;
        padding: 0;
    }

    .rb-homepage__feed .rb-feed-archive-title {
        display: block;
        width: 100%;
        margin: 0 0 9px;
        color: var(--rb-brand-muted, #687078);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        text-align: center;
    }

    .rb-homepage__feed .rb-feed-archive-links {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;

        width: min(100%, 560px);
        margin: 0 auto;
        padding: 6px;

        border: 1px solid var(--rb-brand-border, rgba(25, 28, 31, .09));
        border-radius: 13px;
        background: #fff;
        box-sizing: border-box;
    }

    .rb-homepage__feed .rb-feed-archive-link {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;
        min-height: 38px;
        margin: 0;
        padding: 7px 8px;

        border: 0;
        border-radius: 9px;
        background: transparent;
        box-shadow: none;

        color: var(--rb-brand-muted, #687078);
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.2;

        text-decoration: none;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .rb-homepage__feed .rb-feed-archive-link:first-child {
        background: rgba(15, 149, 153, .11);
        color: var(--rb-brand-teal, #094C4E);
        font-weight: 700;
    }

    .rb-homepage__feed .rb-feed-archive-link:hover,
    .rb-homepage__feed .rb-feed-archive-link:focus-visible {
        background: rgba(15, 149, 153, .07);
        color: var(--rb-brand-teal, #094C4E);
    }

    html[data-rb-theme="dark"] .rb-homepage__feed .rb-feed-archive-links {
        border-color: #2B3035;
        background: #181B1E;
    }
}


/* ==========================================================
   DESKTOP — Paling Disukai / Paling Dikomentari
   ========================================================== */

@media (min-width: 768px) {

    /* Mobile tab header tidak ikut muncul di desktop. */
    .rb-sidebar-popular__mobile-header {
        display: none !important;
    }

    /* Kedua ranking tetap ditampilkan bersamaan di desktop. */
    .rb-sidebar-popular__panel,
    .rb-sidebar-popular__panel.is-active {
        display: block;
        width: 100%;
    }

    /* Beri pemisahan yang jelas sebelum Paling Dikomentari. */
    .rb-sidebar-popular__panel + .rb-sidebar-popular__panel {
        margin-top: 18px;
    }

    .rb-sidebar-popular .rb-sidebar-slider__header {
        margin-bottom: 9px;
    }

    .rb-sidebar-popular .rb-sidebar-slide.is-active {
        gap: 8px;
    }
}


/* ==========================================================
   DESKTOP — Multimedia YouTube 2 × 2
   ========================================================== */

@media (min-width: 1025px) {

    .rb-multimedia__column--youtube {
        min-width: 0;
    }

    .rb-multimedia-youtube {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;

        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    .rb-multimedia-youtube__card {
        position: relative;
        display: block !important;

        width: 100%;
        min-width: 0;
        min-height: 0;

        margin: 0;
        overflow: hidden;

        border-radius: 12px;
        background: #191C1F;
    }

    .rb-multimedia-youtube__media {
        position: absolute;
        inset: 0;

        width: 100% !important;
        height: 100% !important;

        border-radius: inherit;
        overflow: hidden;
    }

    .rb-multimedia-youtube__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* ==========================================================
   HOMEPAGE DESKTOP — SECTION RHYTHM FINAL TEST
   ========================================================== */

@media (min-width: 1025px) {

    .rb-productive-authors {
        margin-top: 26px !important;
    }

    .rb-multimedia {
        margin-top: 26px !important;
    }

}

/* END HOMEPAGE DESKTOP — SECTION RHYTHM FINAL TEST */

/* ==========================================================
   HOMEPAGE DESKTOP — HERO TO MAIN CONTENT GAP FINAL
   ========================================================== */

@media (min-width: 1025px) {

    .rb-homepage__body {
        margin-top: 24px !important;
    }

}

/* END HOMEPAGE DESKTOP — HERO TO MAIN CONTENT GAP FINAL */

/* ==========================================================
   HOMEPAGE DESKTOP — AUTHORS TO MULTIMEDIA GAP FINAL
   ========================================================== */

@media (min-width: 1025px) {

    .rb-multimedia {
        margin-top: 18px !important;
    }

}

/* END HOMEPAGE DESKTOP — AUTHORS TO MULTIMEDIA GAP FINAL */

/* ==========================================================
   HOMEPAGE FEED — TITLE + META ALIGNMENT FINAL
   ========================================================== */

.rb-homepage__feed
.rb-feed-card__title {
    min-height: 2.56em !important;

    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

/* END HOMEPAGE FEED — TITLE + META ALIGNMENT FINAL */


/* ==========================================================
   HOMEPAGE — PRODUCTIVE AUTHORS CTA V1

   Mengganti subtitle Penulis Paling Produktif menjadi CTA
   menuju direktori seluruh penulis.
   ========================================================== */

.rb-productive-authors__all-link {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 36px;

    margin: 0;
    padding: 8px 14px;

    border: 1px solid rgba(9, 76, 78, .18);
    border-radius: 999px;

    background: #FFFFFF;

    color: var(--rb-brand-teal, #094C4E);

    font-size: 11px;
    font-weight: 650;
    line-height: 1;

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(25, 28, 31, .025);

    transition:
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.rb-productive-authors__all-link span {
    transition: transform .18s ease;
}

.rb-productive-authors__all-link:hover,
.rb-productive-authors__all-link:focus-visible {
    border-color: rgba(9, 76, 78, .34);

    background: rgba(15, 149, 153, .055);

    color: var(--rb-brand-teal, #094C4E);

    text-decoration: none;

    transform: translateY(-1px);
}

.rb-productive-authors__all-link:hover span,
.rb-productive-authors__all-link:focus-visible span {
    transform: translateX(2px);
}


/* Mobile */
@media (max-width: 700px) {

    .rb-productive-authors__all-link {
        min-height: 34px;

        margin-top: 9px;
        padding: 8px 12px;

        font-size: 10.5px;
    }

}


/* Dark mode */
html[data-rb-theme="dark"]
.rb-productive-authors__all-link {
    border-color: rgba(255, 255, 255, .14);

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

    color: #7DD9DC;
}

/* END HOMEPAGE — PRODUCTIVE AUTHORS CTA V1 */


/* ==========================================================
   RUANG BESTARI — HOMEPAGE DESKTOP TYPOGRAPHY V1

   Primary hierarchy only.
   Desktop >= 1025px.

   Tidak mengubah:
   - layout
   - margin / padding
   - grid
   - width / height
   - radius
   - media
   - mobile / tablet
   ========================================================== */

@media (min-width: 1025px) {

    /* ======================================================
       01 — HERO
       ====================================================== */

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__title,

    .rb-home-banner__title {
        font-size: var(--rb-type-hero-size);
        font-weight: var(--rb-type-hero-weight);
        line-height: var(--rb-type-hero-line);
    }


    /* ======================================================
       03 — H2 / MAJOR SECTION TITLE
       ====================================================== */

    .rb-youtube__title,
    .rb-instagram__title,
    .rb-latest-posts__title,
    .rb-productive-authors__title {
        font-size: var(--rb-type-h2-size);
        font-weight: var(--rb-type-h2-weight);
        line-height: var(--rb-type-h2-line);
    }


    /* ======================================================
       04 — H3 / PRIMARY CARD TITLE
       ====================================================== */

    .rb-homepage__feed
    .rb-feed-card__title,

    .rb-latest-posts
    .rb-feed-card__title {
        font-size: var(--rb-type-h3-size);
        font-weight: var(--rb-type-h3-weight);
        line-height: var(--rb-type-h3-line);
    }


    /* ======================================================
       05 — BODY
       ====================================================== */

    .rb-home-banner__excerpt,

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__description,

    .rb-youtube__subtitle,
    .rb-instagram__subtitle,
    .rb-latest-posts__subtitle {
        font-size: var(--rb-type-body-size);
        font-weight: var(--rb-type-body-weight);
        line-height: var(--rb-type-body-line);
    }


    /* ======================================================
       06 — SMALL BODY / META
       ====================================================== */

    .rb-homepage__feed
    .rb-feed-card__meta,

    .rb-homepage__feed
    .rb-feed-card__engagement-item,

    .rb-latest-posts
    .rb-feed-card__meta,

    .rb-latest-posts
    .rb-feed-card__engagement-item,

    .rb-productive-authors__subtitle {
        font-size: var(--rb-type-small-size);
        font-weight: var(--rb-type-small-weight);
        line-height: var(--rb-type-small-line);
    }


    /* ======================================================
       07 — LABEL / EYEBROW
       ====================================================== */

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__eyebrow,

    .rb-youtube__eyebrow,
    .rb-instagram__eyebrow,
    .rb-latest-posts__eyebrow,
    .rb-productive-authors__eyebrow,

    .rb-homepage__feed
    .rb-feed-card__category,

    .rb-latest-posts
    .rb-feed-card__category {
        font-size: var(--rb-type-label-size);
        font-weight: var(--rb-type-label-weight);
        line-height: var(--rb-type-label-line);
    }


    /* ======================================================
       08 — BUTTON / NAVIGATION
       ====================================================== */

    .rb-home-banner__cta,

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__button,

    .rb-feed-tab,
    .rb-latest-posts__button,
    .rb-youtube__all,
    .rb-instagram__all,
    .rb-instagram__footer a,
    .rb-feed-archive-link,
    .rb-productive-authors__all-link {
        font-size: var(--rb-type-ui-size);
        font-weight: var(--rb-type-ui-weight);
        line-height: var(--rb-type-ui-line);
    }

}

/* END RUANG BESTARI — HOMEPAGE DESKTOP TYPOGRAPHY V1 */


/* ==========================================================
   RUANG BESTARI — HOMEPAGE MOBILE COMPACT TYPE V1

   FONT-SIZE ONLY.
   Tidak mengubah spacing, line-height, weight,
   grid, card, gambar, tinggi elemen, atau struktur.
   ========================================================== */

@media (max-width: 767px) {

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

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__eyebrow {
        font-size: var(--rb-type-mobile-label-size) !important;
    }

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__title {
        font-size: var(--rb-type-mobile-hero-size) !important;
    }

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__description {
        font-size: var(--rb-type-mobile-body-size) !important;
    }

    .rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__button {
        font-size: var(--rb-type-mobile-ui-size) !important;
    }


    /* ======================================================
       MAIN FEED
       ====================================================== */

    .rb-homepage__feed
    .rb-feed-tab {
        font-size: var(--rb-type-mobile-ui-size) !important;
    }

    .rb-homepage__feed
    .rb-feed-card__category {
        font-size: var(--rb-type-mobile-label-size) !important;
    }

    .rb-homepage__feed
    .rb-feed-card__title {
        font-size: var(--rb-type-mobile-h3-size) !important;
    }

    .rb-homepage__feed
    .rb-feed-card__meta,

    .rb-homepage__feed
    .rb-feed-card__engagement-item {
        font-size: var(--rb-type-mobile-small-size) !important;
    }


    /* ======================================================
       ARCHIVE NAVIGATION
       ====================================================== */

    .rb-homepage__feed
    .rb-feed-archive-title {
        font-size: var(--rb-type-mobile-body-size) !important;
    }

    .rb-homepage__feed
    .rb-feed-archive-link {
        font-size: var(--rb-type-mobile-ui-size) !important;
    }


    /* ======================================================
       SIDEBAR / POPULAR
       ====================================================== */

    .rb-sidebar-stats__title,

    .rb-sidebar-slider__title {
        font-size: var(--rb-type-mobile-body-size) !important;
    }

    .rb-sidebar-stat__value {
        font-size: var(--rb-type-mobile-h1-size) !important;
    }

    .rb-sidebar-stat__label,

    .rb-sidebar-slider__counter {
        font-size: var(--rb-type-mobile-label-size) !important;
    }

    .rb-sidebar-card__category {
        font-size: 9px !important;
    }

    .rb-sidebar-card__title {
        font-size: var(--rb-type-mobile-ui-size) !important;
    }

    .rb-sidebar-card__author,

    .rb-sidebar-card__metric {
        font-size: 9px !important;
    }

    .rb-sidebar-popular__heading {
        font-size: var(--rb-type-mobile-h3-size) !important;
    }

    .rb-sidebar-popular__tab {
        font-size: var(--rb-type-mobile-ui-size) !important;
    }


    /* ======================================================
       PRODUCTIVE AUTHORS
       ====================================================== */

    .rb-productive-authors__eyebrow {
        font-size: var(--rb-type-mobile-label-size) !important;
    }

    .rb-productive-authors__title {
        font-size: var(--rb-type-mobile-h2-size) !important;
    }

    .rb-productive-authors__subtitle {
        font-size: var(--rb-type-mobile-small-size) !important;
    }

    .rb-productive-author__name {
        font-size: 10px !important;
    }

    .rb-productive-author__count {
        font-size: 9px !important;
    }

    .rb-productive-authors__all-link {
        font-size: var(--rb-type-mobile-small-size) !important;
    }


    /* ======================================================
       MULTIMEDIA
       ====================================================== */

    .rb-multimedia__title {
        font-size: var(--rb-type-mobile-h3-size) !important;
    }

    .rb-multimedia__heading-link {
        font-size: 10px !important;
    }

    .rb-multimedia-featured__meta {
        font-size: 10px !important;
    }

    .rb-multimedia-youtube__title {
        font-size: 10.5px !important;
    }


    /* ======================================================
       SECONDARY SCHOOL CTA
       Bukan opening hero, jadi sengaja lebih kecil.
       ====================================================== */

    .rb-school-cta:not(:first-child)
    .rb-school-cta__eyebrow {
        font-size: var(--rb-type-mobile-label-size) !important;
    }

    .rb-school-cta:not(:first-child)
    .rb-school-cta__title {
        font-size: var(--rb-type-mobile-h2-size) !important;
    }

    .rb-school-cta:not(:first-child)
    .rb-school-cta__description {
        font-size: var(--rb-type-mobile-body-size) !important;
    }

    .rb-school-cta:not(:first-child)
    .rb-school-cta__button {
        font-size: var(--rb-type-mobile-ui-size) !important;
    }

}

/* END RUANG BESTARI — HOMEPAGE MOBILE COMPACT TYPE V1 */

/* ==========================================================
   RUANG BESTARI — MOBILE EMPHASIS V1
   Mobile only — font-weight normalization.
   Semantic strong/em inside article content is preserved.
   ========================================================== */

@media (max-width: 767px) {

.rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__eyebrow {
    font-weight: var(--rb-type-label-weight) !important;
}

.rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__description {
    font-weight: var(--rb-type-body-weight) !important;
}

.rb-homepage__container
    > .rb-school-cta:first-child
    .rb-school-cta__button {
    font-weight: var(--rb-type-ui-weight) !important;
}

.rb-homepage__feed
    .rb-feed-tab {
    font-weight: var(--rb-type-ui-weight) !important;
}

.rb-homepage__feed
    .rb-feed-card__category {
    font-weight: var(--rb-type-label-weight) !important;
}

.rb-homepage__feed
    .rb-feed-card__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-homepage__feed
    .rb-feed-card__meta,

    .rb-homepage__feed
    .rb-feed-card__engagement-item {
    font-weight: var(--rb-type-small-weight) !important;
}

.rb-homepage__feed
    .rb-feed-archive-title {
    font-weight: var(--rb-type-body-weight) !important;
}

.rb-homepage__feed
    .rb-feed-archive-link {
    font-weight: var(--rb-type-ui-weight) !important;
}

.rb-sidebar-stats__title,

    .rb-sidebar-slider__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-sidebar-stat__value {
    font-weight: var(--rb-type-h1-weight) !important;
}

.rb-sidebar-stat__label,

    .rb-sidebar-slider__counter {
    font-weight: var(--rb-type-label-weight) !important;
}

.rb-sidebar-card__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-sidebar-popular__heading {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-sidebar-popular__tab {
    font-weight: var(--rb-type-ui-weight) !important;
}

.rb-productive-authors__eyebrow {
    font-weight: var(--rb-type-label-weight) !important;
}

.rb-productive-authors__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-productive-authors__subtitle {
    font-weight: var(--rb-type-small-weight) !important;
}

.rb-productive-authors__all-link {
    font-weight: var(--rb-type-ui-weight) !important;
}

.rb-multimedia__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-school-cta:not(:first-child)
    .rb-school-cta__eyebrow {
    font-weight: var(--rb-type-label-weight) !important;
}

.rb-school-cta:not(:first-child)
    .rb-school-cta__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-school-cta:not(:first-child)
    .rb-school-cta__description {
    font-weight: var(--rb-type-body-weight) !important;
}

.rb-school-cta:not(:first-child)
    .rb-school-cta__button {
    font-weight: var(--rb-type-ui-weight) !important;
}

}

/* END RUANG BESTARI — MOBILE EMPHASIS V1 */


/* ==========================================================
   RUANG BESTARI — DESKTOP COLOR SYSTEM V1
   Homepage light desktop only.
   ========================================================== */

@media (min-width: 1025px) {

    html:not([data-rb-theme="dark"])
    .rb-feed-card__category,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__category,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__eyebrow {
        color: var(--rb-color-editorial) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-card__title a,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia-youtube__title,
    html:not([data-rb-theme="dark"])
    .rb-productive-author__name,
    html:not([data-rb-theme="dark"])
    .rb-latest-posts__title {
        color: var(--rb-color-text-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-card__meta,
    html:not([data-rb-theme="dark"])
    .rb-feed-card__engagement-item,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__author,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-slider__counter,
    html:not([data-rb-theme="dark"])
    .rb-productive-author__count {
        color: var(--rb-color-text-muted) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-homepage__feed .rb-feed-tab,
    html:not([data-rb-theme="dark"])
    .rb-feed-archive-title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__heading-link,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__subtitle {
        color: var(--rb-color-text-secondary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-sidebar-stats__title,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-slider__title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__title-link,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__title,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__metric,
    html:not([data-rb-theme="dark"])
    .rb-feed-archive-link,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__all-link {
        color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-card__title a:hover,
    html:not([data-rb-theme="dark"])
    .rb-feed-card__title a:focus-visible,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-slider__arrow:hover,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__heading-link:hover,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__title-link:hover {
        color: var(--rb-color-accent) !important;
    }


    /* PAGINATION */

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page,
    html:not([data-rb-theme="dark"])
    a.rb-archive-pagination__page {
        color: var(--rb-color-text-secondary) !important;
        background: var(--rb-color-surface) !important;
        border-color: var(--rb-color-border) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page:hover,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page:focus-visible,
    html:not([data-rb-theme="dark"])
    a.rb-archive-pagination__page:hover,
    html:not([data-rb-theme="dark"])
    a.rb-archive-pagination__page:focus-visible {
        color: var(--rb-color-primary) !important;
        background: var(--rb-color-surface-active) !important;
        border-color: var(--rb-color-accent) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page.is-active,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination .page-numbers.current,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination button.is-active,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination a.is-active,
    html:not([data-rb-theme="dark"])
    .rb-archive-pagination__page.is-active {
        color: #FFFFFF !important;
        background: var(--rb-color-primary) !important;
        border-color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__ellipsis,
    html:not([data-rb-theme="dark"])
    .rb-archive-pagination__ellipsis {
        color: var(--rb-color-text-muted) !important;
    }
}

/* END RUANG BESTARI — DESKTOP COLOR SYSTEM V1 */

/* ==========================================================
   RUANG BESTARI — MOBILE COLOR SYSTEM V1
   Homepage light desktop only.
   ========================================================== */

@media (max-width: 767px) {

    html:not([data-rb-theme="dark"])
    .rb-feed-card__category,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__category,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__eyebrow {
        color: var(--rb-color-editorial) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-card__title a,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia-youtube__title,
    html:not([data-rb-theme="dark"])
    .rb-productive-author__name,
    html:not([data-rb-theme="dark"])
    .rb-latest-posts__title {
        color: var(--rb-color-text-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-card__meta,
    html:not([data-rb-theme="dark"])
    .rb-feed-card__engagement-item,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__author,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-slider__counter,
    html:not([data-rb-theme="dark"])
    .rb-productive-author__count {
        color: var(--rb-color-text-muted) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-homepage__feed .rb-feed-tab,
    html:not([data-rb-theme="dark"])
    .rb-feed-archive-title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__heading-link,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__subtitle {
        color: var(--rb-color-text-secondary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-sidebar-stats__title,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-slider__title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__title,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__title-link,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__title,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-card__metric,
    html:not([data-rb-theme="dark"])
    .rb-feed-archive-link,
    html:not([data-rb-theme="dark"])
    .rb-productive-authors__all-link {
        color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-card__title a:hover,
    html:not([data-rb-theme="dark"])
    .rb-feed-card__title a:focus-visible,
    html:not([data-rb-theme="dark"])
    .rb-sidebar-slider__arrow:hover,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__heading-link:hover,
    html:not([data-rb-theme="dark"])
    .rb-multimedia__title-link:hover {
        color: var(--rb-color-accent) !important;
    }


    /* PAGINATION */

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page,
    html:not([data-rb-theme="dark"])
    a.rb-archive-pagination__page {
        color: var(--rb-color-text-secondary) !important;
        background: var(--rb-color-surface) !important;
        border-color: var(--rb-color-border) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page:hover,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page:focus-visible,
    html:not([data-rb-theme="dark"])
    a.rb-archive-pagination__page:hover,
    html:not([data-rb-theme="dark"])
    a.rb-archive-pagination__page:focus-visible {
        color: var(--rb-color-primary) !important;
        background: var(--rb-color-surface-active) !important;
        border-color: var(--rb-color-accent) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__page.is-active,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination .page-numbers.current,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination button.is-active,
    html:not([data-rb-theme="dark"])
    .rb-feed-pagination a.is-active,
    html:not([data-rb-theme="dark"])
    .rb-archive-pagination__page.is-active {
        color: #FFFFFF !important;
        background: var(--rb-color-primary) !important;
        border-color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-feed-pagination__ellipsis,
    html:not([data-rb-theme="dark"])
    .rb-archive-pagination__ellipsis {
        color: var(--rb-color-text-muted) !important;
    }
}

/* END RUANG BESTARI — MOBILE COLOR SYSTEM V1 */