/* ============================================================
   Berita Bertuah — Consolidated CSS
   Versi final, refactor dari V3 → BBC V4
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
    /* Warna utama — gunakan --accent sebagai satu-satunya merah aksen */
    --accent:        #b5122a;   /* gabungan --bbc-red (dipilih sebagai kanonikal) */
    --accent-dark:   #8f0d1e;

    /* Warna brand */
    --green:         #0a7a32;
    --green-dark:    #075c26;
    --gold:          #dfa400;
    --gold-dark:     #be8700;

    /* Header nav */
    --bbc-header-bg: #cde7fe;
    --bbc-nav-green: #055c1c;
    --bbc-nav-gold:  #eacb57;
    --bbc-nav-red:   #91322e;

    /* Tipografi & layout */
    --ink:     #15151a;
    --muted:   #6b6f7a;
    --line:    #e7e8ec;
    --soft:    #f7f7f9;
    --paper:   #ffffff;
    --shadow:  0 18px 60px rgba(20, 20, 30, .08);
    --radius:  16px;
    --radius-sm: 10px;
    --max:     1320px;

/* Tetap biarkan bagian ini karena ini mengatur posisi menu agar tidak bergeser */
--bbc-frame-edge: max(18px, calc((100vw - var(--max)) / 2 + 18px));
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    
    /* Gunakan shorthand background agar lebih kuat */
    background: url('../img/bg.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    
    line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

/* ============================================================
   3. BUTTONS & FORM ELEMENTS
   ============================================================ */
.btn {
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gold);
    color: #111;
}
.btn:hover          { background: var(--gold-dark); color: #111; }
.btn.secondary      { background: var(--green); color: #fff; }
.btn.secondary:hover { background: var(--green-dark); color: #fff; }
.btn.ghost          { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn.danger         { background: #b91c1c; color: #fff; }


/* ============================================================
   4. LAYOUT SHELL
   ============================================================ */
.page-shell {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px 18px 40px;
}
.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 10px;
}
.section-head h1,
.section-head h2 { margin: 0; font-size: clamp(1.45rem, 3vw, 2.3rem); letter-spacing: -.03em; }
.section-head p   { margin: 6px 0 0; color: var(--muted); max-width: 680px; }

.home-section-head {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 18px 0 10px;
}
.home-section-head::after {
    content: "";
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
    flex: 1 1 auto;
    min-width: 80px;
}
.home-section-head h2,
.related-box h3,
.article-share h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--accent);
    font-weight: 800;
}
.home-section-head h2::before,
.related-box h3::before,
.article-share h3::before {
    content: "";
    width: 4px;
    height: 1.08em;
    border-radius: 999px;
    background: var(--accent);
    display: inline-block;
    flex: 0 0 auto;
}

.home-index-cta .btn {
    background: #f0f8ff !important;
    color: #111 !important;
    border: 1px solid rgba(0,0,0,.06);
}

.home-index-cta .btn:hover {
    background: #e4f1ff !important;
    color: #111 !important;
}

.home-index-cta {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px auto 0;
    text-align: center;
}

.home-index-cta .btn {
    margin: 0 auto;
}

/* ============================================================
   5. SITE HEADER
   ============================================================ */
.site-header.bbc-site-header {
    background: var(--bbc-header-bg);
    border-bottom: 1px solid rgba(5, 92, 28, .14);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* --- Brand bar --- */
.bbc-brand-bar { background: var(--bbc-header-bg); }
.bbc-brand-inner {
    max-width: var(--max);
    min-height: 86px;
    margin: 0 auto;
    padding: 9px 18px 4px;
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr) 185px;
    align-items: center;
    gap: 18px;
}

.bbc-logo-desktop,
.bbc-wordmark-desktop,
.bbc-logo-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.bbc-logo-desktop { justify-content: flex-start; }
.bbc-logo-desktop img {
    width: 92px;
    height: auto;
    max-height: 72px;
    object-fit: contain;
}
.bbc-brand-center { min-width: 0; text-align: center; }
.bbc-wordmark-desktop img {
    width: min(470px, 100%);
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}
.bbc-logo-mobile { display: none; }

.bbc-site-header .site-tagline {
    margin: 0;
    color: var(--bbc-nav-red);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

/* --- Nav bar tri-warna --- */
.bbc-nav-bar { background: transparent; }
.bbc-nav-segments {
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: 37.6% 24.8% 37.6%;
    transition: grid-template-columns .22s ease;
}
.bbc-nav-section {
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
}
.bbc-nav-green { background: var(--bbc-nav-green); }
.bbc-nav-gold  { background: var(--bbc-nav-gold); overflow: hidden; }
.bbc-nav-red   { background: var(--bbc-nav-red); overflow: hidden; justify-content: stretch; }

/* Desktop nav links */
.bbc-main-nav-desktop {
    height: 34px;
    margin-left: var(--bbc-frame-edge);
    padding-right: 28px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    overflow: visible;
}
.bbc-main-nav-mobile { display: none; }

.bbc-main-nav-desktop a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    height: 24px;
    margin: 5px 2px;
    padding: 0 12px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .015em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.bbc-main-nav-desktop a.is-active,
.bbc-main-nav-desktop a:hover {
    background: #ffffff;
    color: #111111;
}


/* ============================================================
   6. HERO SECTION
   ============================================================ */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 14px;
}
.hero-card {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border-radius: var(--radius);
    background: #181a22;
    box-shadow: var(--shadow);
}
.hero-card.compact { min-height: 360px; }
.hero-card .hero-bg,
.hero-card iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78));
    pointer-events: none;
}
.hero-content {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    color: #fff;
}
.hero-content h1,
.hero-content h2 {
    margin: 8px 0;
    line-height: 1.18;
    letter-spacing: 0;
    font-weight: 500;
}
.hero-content h1 { font-size: clamp(1rem, 1.5vw, 1.36rem); }
.hero-content h2 { font-size: clamp(.96rem, 1.35vw, 1.22rem); }
.hero-content p  { margin: 0 0 14px; max-width: 680px; color: rgba(255,255,255,.86); }
.hero-meta       { display: flex; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,.78); font-size: .78rem; }

.podcast-frame-wrap { position: absolute; inset: 0; background: #111; }
.podcast-frame-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58));
    pointer-events: none;
}


/* ============================================================
   7. BADGE & LABEL
   ============================================================ */
.rubric-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
}
.rubric-mimbar  { background: #243a6b; }
.rubric-podcast { background: var(--accent); }

.promo-label { display: none !important; }


/* ============================================================
   8. HOME MOSAIC & CARDS
   ============================================================ */
.home-mosaic {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

/* --- Standard news card --- */
.news-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 8px 28px rgba(20,20,30,.04);
    min-width: 0;
    position: relative;
}
.news-card.large { grid-column: span 2; }
.news-card:hover { transform: translateY(-2px); transition: .18s ease; box-shadow: var(--shadow); }

.card-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: #e8e9ee;
    overflow: hidden;
}
.news-card.large .card-media { aspect-ratio: 16 / 8; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.news-card:hover .card-media img { transform: scale(1.035); }
.card-media .rubric-badge { position: absolute; top: 10px; left: 10px; }

.play-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 0;
}
.play-badge::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 13px;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.card-body { padding: 12px 13px 13px; }
.card-body h3 {
    margin: 0 0 9px;
    font-size: .94rem;
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: 500;
    /* Batasi 3 baris hanya di mosaic/listing */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card.large h3 { font-size: 1.05rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: 10px; color: #8a8f99; font-size: .8rem; }

/* --- Overlay card (gambar penuh + teks di bawah) --- */
.news-card.overlay .card-media {
    /*aspect-ratio: 16 / 8; */
    /*min-height: 200px; */
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 240px;
}
.news-card.overlay .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.72) 100%);
}
.news-card.overlay .card-overlay-content {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    display: grid;
    gap: 8px;
}
.news-card.overlay .card-overlay-content strong {
    font-size: 1.05rem;
    line-height: 1.24;
    font-weight: 500;
    display: block;
}
.news-card.overlay .card-overlay-content em {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-style: normal;
    color: rgba(255,255,255,.82);
    font-size: .78rem;
}
.news-card.overlay .rubric-badge { z-index: 3; }

/* --- Mimbar home card --- */
.mimbar-home-card {
    grid-column: span 2;
    min-height: 270px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #17191f;
    box-shadow: 0 8px 28px rgba(20,20,30,.04);
    border: 1px solid var(--line);
}
.mimbar-home-media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 270px;
    color: #fff;
}
.mimbar-home-media img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; }
.mimbar-home-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.68));
}
.mimbar-home-media .rubric-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.mimbar-home-content {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
}
.mimbar-home-content h3 {
    margin: 0 0 6px;
    font-size: clamp(1rem, 1.55vw, 1.24rem);
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 500;
}
.mimbar-home-content span { color: rgba(255,255,255,.8); font-size: .88rem; }
.mimbar-home-empty {
    height: 100%;
    min-height: 270px;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 22px;
    background: linear-gradient(135deg, #f8fafc, #fff);
}
.mimbar-home-empty h3 { margin: 0; font-size: 1.3rem; }
.mimbar-home-empty p  { margin: 0; color: var(--muted); }

.mimbar-related-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px 12px;
    background: #fff;
    border-top: 1px solid rgba(36,58,107,.14);
}
.mimbar-related-heading {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #111827;
    font-size: .86rem;
    line-height: 1.15;
    font-weight: 800;
    padding: 0 0 2px;
}
.mimbar-related-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(181,18,42,.10);
    flex: 0 0 auto;
}
.mimbar-related-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 4px 0 5px;
    border: 0;
    border-top: 1px solid rgba(36,58,107,.10);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
}
.mimbar-related-item:hover {
    color: var(--accent);
}
.mimbar-related-thumb {
    width: 50px;
    height: 42px;
    border-radius: 7px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #243a6b, #b5122a);
    color: #fff;
    font-weight: 800;
}
.mimbar-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mimbar-related-title {
    min-width: 0;
    font-size: .76rem;
    line-height: 1.22;
    font-weight: 760;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mimbar-related-empty {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
    font-size: .86rem;
    padding: 18px;
}

/* --- Placeholder & promo --- */
.thumb-placeholder {
    height: 100%;
    min-height: 150px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at top left, rgba(181,18,42,.25), transparent 40%),
                linear-gradient(135deg, #2d2f35, #595d69);
    color: #fff;
}
.thumb-placeholder span { font-size: 3rem; font-weight: 800; opacity: .78; }

.promo-slot {
    grid-column: span 2;
    position: relative;
    min-height: 190px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(181,18,42,.18);
    background: linear-gradient(135deg, #fffafb, #ffffff);
    display: grid;
    place-items: center;
}
.promo-slot img  { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.promo-slot a    { width: 100%; height: 100%; display: grid; place-items: center; }
.promo-html, .promo-html iframe, .promo-html img { width: 100%; max-width: 100%; }
.promo-html      { display: grid; place-items: center; width: 100%; height: 100%; }
.promo-empty     { text-align: center; color: var(--accent); padding: 18px; }
.promo-empty strong { display: block; font-size: 1.35rem; }
.promo-empty span   { color: var(--muted); }


/* ============================================================
   9. ARTICLE PAGE
   ============================================================ */
.article-box, .sidebar-box, .empty-state {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(20,20,30,.04);
}
.article-box { overflow: hidden; }

.article-cover { margin: 0; background: #e8e9ee; }
.article-cover img { width: 100%; aspect-ratio: 16 / 8; height: auto; object-fit: cover; }
.article-cover figcaption,
.article-gallery figcaption,
.article-content figcaption {
    color: #858c97;
    font-size: .78rem;
    line-height: 1.45;
    font-style: italic;
    padding: 9px 16px 0;
}

.article-inner { padding: clamp(18px, 4vw, 36px); }
.article-kicker { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--muted); margin-bottom: 14px; }

.article-subtitle {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.article-title {
    margin: 0 0 14px;
    font-size: clamp(1.25rem, 2.2vw, 1.85rem);
    line-height: 1.24;
    letter-spacing: 0;
    font-weight: 500;
}
.article-excerpt { color: var(--muted); font-size: 1.1rem; margin-bottom: 24px; }

.article-content { font-size: 1rem; color: #252831; line-height: 1.85; }
.article-content p  { margin: 0 0 1.35em; }
.article-content h2,
.article-content h3 { margin: 1.6em 0 .65em; line-height: 1.15; letter-spacing: -.025em; }
.article-content blockquote {
    margin: 1.4em 0;
    padding: 16px 18px;
    border-left: 4px solid var(--accent);
    background: #fff6f7;
    border-radius: 0 10px 10px 0;
}
.article-content a   { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-content img { border-radius: var(--radius-sm); margin: 1em 0; }
.article-content figure { margin: 1.4em 0; }
.article-content figure img { width: 100%; height: auto; }

.article-author-sign {
    margin: 20px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: #555b65;
    font-size: .94rem;
}
.article-mobile-ad { display: none; padding: 14px 14px 0; margin-bottom: 14px; }

.responsive-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: #111;
    margin-bottom: 22px;
}
.article-video { border-radius: 18px 18px 0 0; margin-bottom: 0; }
.responsive-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.article-gallery { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.article-gallery h2 { margin: 0 0 14px; font-size: 1.2rem; letter-spacing: -.02em; }
.article-gallery-item { margin: 0 0 20px; }
.article-gallery-item img { width: 100%; border-radius: var(--radius-sm); }

/* --- Sidebar --- */
.sidebar-box { padding: 15px; margin-bottom: 14px; }
.sidebar-box h3 { margin: 0 0 12px; font-size: 1.1rem; }

.mini-list { display: grid; gap: 12px; }
.mini-item { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; }
.mini-thumb { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #e8e9ee; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-item h4  { margin: 0; font-size: .92rem; line-height: 1.25; }
.mini-item span { color: var(--muted); font-size: .78rem; }

.detail-ad-box { margin-bottom: 18px; }
.detail-ad-box .promo-slot { grid-column: auto; min-height: 180px; }
.detail-ad-box .promo-slot img { min-height: 180px; }

/* --- Share panel --- */
.article-share { margin-top: 18px; }
.article-share.sidebar-box { padding: 0; border: 0; box-shadow: none; background: transparent; }
.article-share h3 { margin: 0 0 12px; }
.share-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.share-btn {
    border: 1px solid var(--line);
    background: #fff;
    color: #272a33;
    border-radius: 11px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: .82rem;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.share-btn:hover  { border-color: rgba(181,18,42,.35); color: var(--accent); background: #fff8f9; }
.share-btn.copy   { background: #17191f; color: #fff; border-color: #17191f; }
.share-btn.copy:hover { background: #2d2f35; color: #fff; }
.share-icon       { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.share-icon svg   { width: 18px; height: 18px; }
.share-note       { display: block; margin-top: 10px; color: var(--muted); line-height: 1.45; font-size: .76rem; }


/* ============================================================
   10. MISC UI
   ============================================================ */
.empty-state { padding: 30px; text-align: center; color: var(--muted); }

.pagination { display: flex; justify-content: center; gap: 10px; margin: 26px 0 0; }
.pagination a,
.pagination span { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; }
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }

.search-form { display: flex; gap: 8px; }
.search-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 14px;
    background: #fff;
    outline: none;
}
.search-form input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(10,122,50,.10); }
.search-form button {
    border: 0;
    background: var(--gold);
    color: #111;
    border-radius: 999px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.search-form button:hover { background: var(--gold-dark); color: #111; }

.admin-login-body {
    background: radial-gradient(circle at top left, rgba(10,122,50,.13), transparent 34%), #f7f7f9;
}


/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 22px 18px 24px;
    text-align: center;
}
.footer-logo {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    font-size: 1.9rem;
    font-weight: 300;
    line-height: .95;
    color: #2a2f38;
}
.footer-logo .brand-green { color: var(--green); }
.footer-logo strong { color: #7c6135; font-weight: 300; }
.footer-logo small  { font-size: .72em; color: #20242b; font-weight: 300; }
.footer-brand p     { color: var(--muted); margin: 8px auto; max-width: 680px; }
.footer-social,
.footer-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.footer-social a,
.footer-menu a { color: #3b3f49; }
.copyright { color: #8a8f99; font-size: .86rem; margin-top: 6px; }


/* ============================================================
   12. MEDIA QUERIES — digabung semua di sini
   ============================================================ */

/* Tablet / medium (≤980px) */
@media (max-width: 980px) {
    .hero-grid, .content-grid { grid-template-columns: 1fr; }
    .home-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-card { min-height: 360px; }
    .share-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop — home page specific */
@media (min-width: 721px) {
    .home-page .hero-content h1 { font-size: clamp(1.08rem, 1.75vw, 1.55rem); }
    .home-page .hero-content h2 { font-size: clamp(1rem, 1.55vw, 1.36rem); }
    .home-page .mimbar-home-card { grid-column: span 2; }
    .article-sidebar .detail-ad-box { display: block; }
}

/* Mobile (≤820px) — Header BBC */
@media (max-width: 820px) {
    .bbc-brand-inner {
        min-height: 80px;
        padding: 7px 10px 6px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .bbc-logo-desktop,
    .bbc-brand-center,
    .bbc-brand-side { display: none !important; }

    .bbc-logo-mobile {
        display: inline-flex;
        width: 100%;
        justify-content: center;
    }
    .bbc-logo-mobile img {
        width: min(390px, 88vw);
        height: auto;
        max-height: 70px;
        object-fit: contain;
    }

    .bbc-nav-segments {
        grid-template-columns: 15% 70% 15%;
        min-height: 32px;
    }
    .bbc-nav-section { min-height: 32px; height: 32px; }

    .bbc-main-nav-desktop,
    .bbc-ticker { display: none !important; }

    .bbc-nav-gold { justify-content: center; }
    .bbc-main-nav-mobile {
        width: 100%;
        height: 32px;
        padding: 0 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0;
        overflow: hidden;
    }
    .bbc-main-nav-mobile a {
        flex: 1 1 25%;
        min-width: 0;
        width: 25%;
        min-height: 32px;
        padding: 0 1px;
        text-align: center;
        color: #111111;
        font-size: .7rem;
        font-weight: 400;
        letter-spacing: .01em;
        background: transparent;
        border: 0;
        text-transform: uppercase;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .bbc-main-nav-mobile a.is-active,
    .bbc-main-nav-mobile a:hover {
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1.5px;
    }

    /* Search mobile: ikon rapi, expandable, tidak tertutup */
    .bbc-nav-red {
        justify-content: stretch;
        align-items: center;
    }

    .bbc-search-form {
        position: relative;
        width: 100%;
        max-width: none;
        height: 32px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bbc-search-form input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }

    .bbc-search-form button {
        width: 100%;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--ink);
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .bbc-search-form button:hover { background: rgba(0,0,0,.05); }
    .bbc-search-text { display: none; }
    .bbc-search-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        font-size: 18px;
        line-height: 1;
    }

    /* State: search open */
    .bbc-nav-segments.is-search-open {
        grid-template-columns: 1fr;
    }

    .bbc-nav-segments.is-search-open .bbc-nav-green,
    .bbc-nav-segments.is-search-open .bbc-nav-gold {
        display: none !important;
    }

    .bbc-nav-segments.is-search-open .bbc-nav-red {
        grid-column: 1 / -1;
        min-height: 44px;
        height: 44px;
        padding: 4px 12px;
        background: rgba(255,255,255,.52) !important;
        backdrop-filter: blur(14px) saturate(145%);
        -webkit-backdrop-filter: blur(14px) saturate(145%);
    }

    .bbc-search-form.is-search-open {
        height: 36px;
        gap: 0;
        padding: 0;
        justify-content: stretch;
    }

    .bbc-search-form.is-search-open input {
        position: static;
        flex: 1 1 auto;
        width: auto;
        height: 36px;
        min-width: 0;
        margin: 0;
        padding: 0 14px;
        clip: auto;
        clip-path: none;
        overflow: visible;
        white-space: normal;
        border: 1px solid rgba(10,122,50,.22) !important;
        border-right: 0 !important;
        border-radius: 999px 0 0 999px !important;
        background: rgba(255,255,255,.88) !important;
        color: var(--ink) !important;
        font-size: .9rem;
        line-height: 36px;
        outline: none;
    }

    .bbc-search-form.is-search-open input::placeholder {
        color: var(--muted) !important;
    }

    .bbc-search-form.is-search-open input:focus {
        border-color: rgba(10,122,50,.45) !important;
        box-shadow: 0 0 0 3px rgba(10,122,50,.10);
    }

    .bbc-search-form.is-search-open button {
        flex: 0 0 48px;
        width: 48px;
        height: 36px;
        border: 1px solid rgba(10,122,50,.22);
        border-left: 0;
        border-radius: 0 999px 999px 0;
        background: rgba(255,255,255,.95);
        color: var(--ink);
        font-size: 0;
    }

    .bbc-search-form.is-search-open .bbc-search-icon {
        color: var(--ink);
        transform: translateX(-1px);
    }
}

/* Mobile (≤720px) — layout utama */
@media (max-width: 720px) {
    .home-mosaic { grid-template-columns: 1fr; gap: 12px; }
    .news-card.large,
    .promo-slot,
    .mimbar-home-card { grid-column: span 1; }

    .hero-card,
    .hero-card.compact { min-height: 260px; }
    .hero-content { left: 16px; right: 16px; bottom: 16px; }
    .hero-content h1 { font-size: .98rem; line-height: 1.16; }
    .hero-content h2 { font-size: .94rem; line-height: 1.16; }

    .section-head { display: block; margin: 16px 0 8px; }
    .home-section-head h2,
    .related-box h3,
    .article-share h3 { font-size: 1rem; gap: 8px; }
    .home-section-head::after { height: 4px; min-width: 40px; }

    .card-body h3 { font-size: .92rem; }
    .news-card.overlay .card-media { aspect-ratio: 16 / 8.6; min-height: 190px; }
    .news-card.overlay .card-overlay-content strong { font-size: .98rem; }

    .mini-item { grid-template-columns: 96px 1fr; }
    .article-title { font-size: 1.32rem; }
    .article-cover figcaption,
    .article-gallery figcaption,
    .article-content figcaption { font-size: .74rem; }

    .article-mobile-ad { display: block; margin-bottom: 16px; }
    .detail-ad-box { display: none; margin-bottom: 0; }

    .share-actions { grid-template-columns: 1fr; }
    .share-btn { justify-content: flex-start; }

    .footer-inner { padding: 18px 12px 22px; }
}

/* Mobile kecil (≤430px) */
@media (max-width: 430px) {
    .bbc-brand-inner { min-height: 72px; padding-top: 6px; padding-bottom: 5px; }
    .bbc-logo-mobile img { width: min(350px, 90vw); max-height: 61px; }
    .bbc-main-nav-mobile a { padding: 0; font-size: .66rem; letter-spacing: 0; }
}

/* ============================================================
   13. VISUAL SYSTEM — BACKGROUND, GLASS EFFECT, TICKER
   ============================================================ */

:root {
    --site-bg-image: url('../img/bg.jpg');
    --glass-bg: rgba(255, 255, 255, .62);
    --glass-bg-strong: rgba(255, 255, 255, .78);
    --glass-border: rgba(255, 255, 255, .78);
    --glass-shadow: 0 10px 30px rgba(100, 116, 139, .12);
    --glass-blur: 16px;
}

html,
body {
    min-height: 100%;
}

body {
    background-color: #eef5fb;
    background-image: var(--site-bg-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* Lapisan background tambahan agar konsisten di mobile browser yang sering
   mengabaikan background-attachment: fixed pada body. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--site-bg-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.site-header.bbc-site-header,
.bbc-brand-bar {
    background: rgba(255, 255, 255, .42) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .52) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
}

.bbc-nav-green,
.bbc-nav-gold,
.bbc-nav-red {
    background: rgba(255, 255, 255, .12) !important;
}

.bbc-main-nav-desktop a {
    color: var(--ink) !important;
    font-weight: 600;
}

.news-card,
.article-box,
.sidebar-box,
.empty-state,
.promo-slot {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

.news-card {
    transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.news-card:hover {
    background: var(--glass-bg-strong) !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 45px rgba(100, 116, 139, .16) !important;
}

.mimbar-home-card {
    background: rgba(255, 255, 255, .34) !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.bbc-search-form input,
.search-form input {
    background: rgba(255, 255, 255, .58) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.article-title,
.news-card h3,
.hero-content h1,
.hero-content h2,
.sidebar-box h3,
.section-head h1,
.section-head h2,
.mimbar-home-content h3 {
    text-shadow: none !important;
}

.news-card h3,
.article-title {
    color: var(--ink) !important;
    font-weight: 600 !important;
}

.card-meta,
.article-kicker {
    color: var(--muted) !important;
}

@keyframes bbcTickerSeamless {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-33.333333%, 0, 0); }
}

@media (min-width: 821px) {
    .bbc-ticker {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .bbc-ticker-track {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        width: max-content !important;
        white-space: nowrap !important;
        visibility: visible !important;
        will-change: transform;
        animation: bbcTickerSeamless 31s linear infinite !important;
    }

    .bbc-ticker:hover .bbc-ticker-track {
        animation-play-state: paused;
    }
}

@media (max-width: 820px) {
    body {
        background-attachment: scroll;
    }

    .site-header.bbc-site-header,
    .bbc-brand-bar {
        background: rgba(255, 255, 255, .52) !important;
        backdrop-filter: blur(14px) saturate(145%);
        -webkit-backdrop-filter: blur(14px) saturate(145%);
    }

    .bbc-nav-green,
    .bbc-nav-gold,
    .bbc-nav-red {
        background: rgba(255, 255, 255, .16) !important;
    }

    .bbc-main-nav-mobile a {
        color: var(--ink) !important;
        font-weight: 650;
    }

    .bbc-search-form input {
        color: var(--ink) !important;
    }

    .bbc-ticker {
        display: none !important;
    }

    .news-card,
    .article-box,
    .sidebar-box,
    .empty-state,
    .promo-slot {
        background: rgba(255, 255, 255, .70) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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

    .bbc-ticker-track {
        animation: none !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.bbc-site-header,
    .bbc-brand-bar,
    .news-card,
    .article-box,
    .sidebar-box,
    .empty-state,
    .promo-slot,
    .mimbar-home-card {
        background: rgba(255, 255, 255, .86) !important;
    }
}


/* ============================================================
   DESKTOP SEARCH REFINEMENT - PC layout seperti contoh
   ============================================================ */
@media (min-width: 821px) {
    .bbc-nav-red {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        padding-left: 12px;
        padding-right: max(18px, calc((100vw - var(--max)) / 2 + 18px));
    }

    .bbc-search-form {
        width: min(300px, 100%);
        height: 34px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: stretch;
        gap: 0;
        background: rgba(255, 255, 255, .56);
        border: 1px solid rgba(21, 21, 26, .16);
        border-radius: 999px;
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
        backdrop-filter: blur(8px) saturate(140%);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
    }

    .bbc-search-form input {
        position: static !important;
        clip: auto !important;
        clip-path: none !important;
        width: 100% !important;
        height: 32px !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 10px 0 42px !important;
        border: 0 !important;
        border-radius: 999px 0 0 999px !important;
        background: transparent !important;
        color: var(--ink) !important;
        font-size: .82rem;
        line-height: 32px;
        outline: none;
        box-shadow: none !important;
        white-space: nowrap;
    }

    .bbc-search-form input::placeholder {
        color: rgba(21, 21, 26, .52) !important;
    }

    .bbc-search-form button {
        position: relative;
        flex: 0 0 72px;
        width: 72px;
        height: 32px;
        margin: 0;
        padding: 0 14px;
        border: 0;
        border-left: 1px solid rgba(21, 21, 26, .10);
        border-radius: 0 999px 999px 0;
        background: rgba(255, 255, 255, .48);
        color: var(--ink);
        font-size: .78rem;
        font-weight: 500;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .bbc-search-form button:hover {
        background: rgba(255, 255, 255, .78);
        color: var(--accent);
    }

    .bbc-search-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(21, 21, 26, .52);
        font-size: 18px;
        line-height: 1;
        pointer-events: none;
    }

    .bbc-search-text {
        display: inline !important;
    }

    .bbc-search-form:focus-within {
        background: rgba(255, 255, 255, .82);
        border-color: rgba(10, 122, 50, .36);
        box-shadow: 0 0 0 3px rgba(10, 122, 50, .10), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .bbc-search-form:focus-within .bbc-search-icon {
        color: var(--green);
    }
}

/* ============================================================
   SEARCH DESKTOP — ICON LEFT FIX
   ============================================================ */

.bbc-search-form {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 320px;
    width: 100%;
}

.bbc-search-form input {
    width: 100%;
    height: 38px;
    padding: 0 16px 0 42px; /* ruang ikon di kiri */
    border-radius: 999px 0 0 999px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    font-size: .92rem;
    color: #222;
}

.bbc-search-form input::placeholder {
    color: #666;
}

/* ikon search */
.bbc-search-form::before {
    content: "🔍";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    opacity: .65;
    pointer-events: none;
    z-index: 2;
}

/* tombol */
.bbc-search-form button {
    height: 38px;
    padding: 0 18px;
    border-radius: 0 999px 999px 0;
    border: 1px solid rgba(0,0,0,.08);
    border-left: 0;
    background: rgba(255,255,255,.85);
    font-size: .9rem;
    cursor: pointer;
}

/* hilangkan ikon lama */
.bbc-search-icon {
    display: none !important;
}

/* === Performance, accessibility, and article UX refinements === */
.skip-link{position:absolute;left:-999px;top:8px;z-index:9999;background:#fff;color:#063;padding:.75rem 1rem;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.skip-link:focus{left:8px;outline:3px solid #f3c100}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 auto 1rem;max-width:1180px;font-size:.9rem;color:#667085}
.breadcrumbs a{color:#0b6b2b;text-decoration:none;font-weight:700}.breadcrumbs a:hover{text-decoration:underline}
img{max-width:100%;height:auto}.article-content img{border-radius:14px;margin:1rem 0}.article-content :where(h2,h3,h4){line-height:1.25;margin:1.8rem 0 .8rem}.article-content p{line-height:1.85}.article-content a{color:#075e25;text-decoration:underline;text-underline-offset:3px}.article-content blockquote{border-left:4px solid #d6b64c;padding:1rem 1.25rem;background:#fff9df;border-radius:0 12px 12px 0;margin:1.25rem 0}
.article-share h2,.related-box h2{font-size:1.05rem;margin:0 0 .9rem}.mini-item h3{font-size:.95rem;line-height:1.35;margin:0 0 .3rem}.podcast-lite,.podcast-featured-link{display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit}.podcast-lite img,.podcast-featured-link img{width:100%;height:100%;object-fit:cover}.podcast-featured-link{border-radius:18px;background:#111;min-height:260px}.podcast-featured-link:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.72))}.podcast-featured-link .rubric-badge,.podcast-featured-link h2{position:absolute;z-index:2;left:1rem}.podcast-featured-link .rubric-badge{top:1rem}.podcast-featured-link h2{bottom:1rem;right:1rem;color:#fff;margin:0}.news-card img,.mini-thumb img,.hero-bg,.article-cover img{background:#f4f6f5}.promo-slot{contain:content}.promo-slot img{display:block;width:100%;height:auto}.article-cover img{width:100%;object-fit:cover}.responsive-video iframe{width:100%;height:100%;border:0}.article-video{aspect-ratio:16/9}.search-form input:focus,.search-form button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #f3c100;outline-offset:2px}
@media (max-width:820px){.breadcrumbs{padding:0 .9rem}.article-title{font-size:clamp(1.7rem,7vw,2.25rem)}.article-content{font-size:1.02rem}.share-actions{grid-template-columns:1fr 1fr}.content-grid{gap:1rem}}

/* ============================================================
   BBC V2.1 requested refinements: podcast, ticker, search, article UI
   ============================================================ */
.podcast-autoplay,
.podcast-autoplay iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.podcast-hero-card .hero-content {
    pointer-events: none;
}
.podcast-hero-card .hero-content a {
    pointer-events: auto;
}

@media (min-width: 821px) {
    .bbc-ticker,
    .bbc-ticker a,
    .bbc-ticker span {
        color: var(--accent) !important;
    }
    .bbc-nav-gold {
        background: rgba(255,255,255,.42) !important;
        backdrop-filter: blur(10px) saturate(140%);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
    }
    .bbc-search-form {
        background: rgba(255,255,255,.24) !important;
        border-color: rgba(255,255,255,.36) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.38) !important;
    }
    .bbc-search-form input,
    .bbc-search-form button {
        background: transparent !important;
    }
    .bbc-search-form button {
        border-left-color: rgba(255,255,255,.30) !important;
    }
    .bbc-search-form:focus-within {
        background: rgba(255,255,255,.38) !important;
        border-color: rgba(255,255,255,.58) !important;
        box-shadow: 0 0 0 2px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.56) !important;
    }
}

.compact-breadcrumbs {
    margin-bottom: .75rem;
}
.compact-breadcrumbs span:last-child {
    display: none;
}
.article-excerpt {
    display: none !important;
}
.article-inline-gallery {
    margin: 1.6rem 0;
}
.article-inline-gallery .article-gallery-item {
    margin: 1.4rem 0;
}
.article-inline-gallery img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}
.article-inline-gallery figcaption,
.article-content figcaption {
    padding: .55rem .1rem 0;
    color: #667085;
    font-size: .86rem;
    font-style: italic;
}

.related-box h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #182230;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.01em;
}
.related-box h2::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(181,18,42,.10);
}
.mini-list {
    gap: .9rem;
}
.mini-item {
    padding: .45rem;
    border-radius: 14px;
    transition: background-color .18s ease, transform .18s ease;
}
.mini-item:hover {
    background: rgba(181,18,42,.055);
    transform: translateX(2px);
}
.mini-thumb {
    border-radius: 12px;
}
.mini-item h3 {
    margin: 0 0 .25rem;
    color: #1d2939;
    font-size: .93rem;
    font-weight: 560;
    line-height: 1.35;
    letter-spacing: -.01em;
}
.mini-item span {
    color: #8a94a6;
    font-size: .77rem;
}

.article-share {
    margin-top: 1.7rem;
    padding: 1rem !important;
    border: 1px solid rgba(16,24,40,.08) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.84)) !important;
    box-shadow: 0 12px 34px rgba(16,24,40,.06) !important;
}
.article-share h2 {
    margin: 0 0 .75rem !important;
    color: #182230;
    font-size: 1rem;
    font-weight: 680;
    letter-spacing: -.01em;
}
.share-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: .55rem;
}
.share-btn {
    flex: 0 0 auto;
    min-height: 40px;
    border-radius: 999px !important;
    padding: .55rem .82rem !important;
    border-color: rgba(16,24,40,.10) !important;
    background: rgba(255,255,255,.72) !important;
    color: #344054 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.share-btn:hover {
    transform: translateY(-1px);
    background: #fff !important;
    color: var(--accent) !important;
    border-color: rgba(181,18,42,.25) !important;
}
.share-btn.copy {
    background: #111827 !important;
    color: #fff !important;
    border-color: #111827 !important;
}
.share-note {
    margin-top: .7rem;
    font-size: .74rem;
}

@media (max-width: 820px) {
    .bbc-site-header,
    .bbc-brand-bar,
    .bbc-nav-bar,
    .bbc-nav-green,
    .bbc-nav-gold,
    .bbc-nav-red {
        background: rgba(255,255,255,.26) !important;
        backdrop-filter: blur(14px) saturate(145%);
        -webkit-backdrop-filter: blur(14px) saturate(145%);
    }
    .bbc-nav-segments {
        grid-template-columns: 16% 68% 16% !important;
        border-top: 0 !important;
    }
    .bbc-search-form::before {
        display: none !important;
    }
    .bbc-search-form button {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .bbc-search-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #1d2939;
    }
    .bbc-search-form button:focus-visible,
    .bbc-search-form input:focus,
    .bbc-search-form input:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    .bbc-nav-segments.is-search-open {
        grid-template-columns: 1fr !important;
    }
    .bbc-nav-segments.is-search-open .bbc-nav-red {
        height: 46px !important;
        min-height: 46px !important;
        padding: 5px 10px !important;
        background: rgba(255,255,255,.32) !important;
        border: 0 !important;
    }
    .bbc-search-form.is-search-open {
        height: 36px !important;
        border-radius: 999px;
        background: rgba(255,255,255,.42) !important;
        border: 1px solid rgba(255,255,255,.50);
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
    }
    .bbc-search-form.is-search-open input {
        order: 1;
        height: 36px !important;
        padding: 0 12px 0 15px !important;
        border: 0 !important;
        border-radius: 999px 0 0 999px !important;
        background: transparent !important;
        color: #1d2939 !important;
    }
    .bbc-search-form.is-search-open button {
        order: 2;
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 36px !important;
        border-left: 1px solid rgba(16,24,40,.08) !important;
        border-radius: 0 999px 999px 0 !important;
        background: transparent !important;
    }
    .bbc-search-form.is-search-open .bbc-search-icon {
        transform: none !important;
    }
    .search-form input:focus,
    .search-form button:focus-visible,
    .bbc-search-form button:focus-visible,
    .bbc-search-form input:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
    .compact-breadcrumbs {
        padding: 0;
        font-size: .82rem;
    }
    .article-title {
        font-size: clamp(1.45rem, 6vw, 2rem) !important;
        line-height: 1.18;
    }
    .article-share {
        padding: .9rem !important;
    }
    .share-actions {
        gap: .45rem;
    }
    .share-btn {
        min-height: 38px;
        padding: .5rem .68rem !important;
        font-size: .78rem;
    }
}

@media (max-width: 520px) {
    .share-btn span:not(.share-icon) {
        display: none;
    }
    .share-btn {
        width: 42px;
        height: 42px;
        justify-content: center !important;
        padding: 0 !important;
    }
    .share-icon,
    .share-icon svg {
        width: 19px;
        height: 19px;
    }
}
.article-content .align-left,.wysiwyg-editor .align-left{text-align:left}.article-content .align-center,.wysiwyg-editor .align-center{text-align:center}.article-content .align-right,.wysiwyg-editor .align-right{text-align:right}.article-content .align-justify,.wysiwyg-editor .align-justify{text-align:justify}

/* ============================================================
   BBC V2.6 editor/share/sidebar refinements
   ============================================================ */
.article-content [style*="margin-top"],
.article-content [style*="margin-bottom"],
.wysiwyg-editor [style*="margin-top"],
.wysiwyg-editor [style*="margin-bottom"] {
    /* Inline spacing from pasted documents is intentionally allowed. */
}
.article-content span[style],
.wysiwyg-editor span[style] {
    line-height: inherit;
}
.share-btn.print {
    background: #fff !important;
    color: #344054 !important;
}
.share-note:empty { display: none; }
.detail-ad-secondary {
    margin-top: 1rem;
}
.sidebar-podcast-box {
    overflow: hidden;
}
.sidebar-podcast-box h2 {
    margin: 0 0 .6rem;
    font-size: 1.02rem;
    font-weight: 650;
}
.sidebar-podcast-title {
    display: block;
    margin: 0 0 .75rem;
    color: #1d2939;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.sidebar-podcast-title:hover { color: var(--accent); }
.sidebar-podcast-video {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
}
@media print {
    .site-header,
    .site-footer,
    .breadcrumbs,
    .article-sidebar,
    .article-share,
    .article-mobile-ad,
    .detail-ad-box { display: none !important; }
    .content-grid { display: block !important; max-width: none !important; padding: 0 !important; }
    .article-box { box-shadow: none !important; border: 0 !important; }
    .article-inner { padding: 0 !important; }
    a[href]::after { content: "" !important; }
}


/* ============================================================
   BBC V2.7 editor colors, font controls, inline captions, mobile ad
   ============================================================ */
@media (max-width: 720px) {
    .article-sidebar .detail-ad-secondary {
        display: block !important;
        margin: 1rem 0 16px !important;
    }
    .article-sidebar .detail-ad-secondary .promo-slot {
        display: grid !important;
        min-height: 0;
    }
    .article-sidebar .detail-ad-secondary .promo-slot img {
        min-height: 0;
        height: auto;
        object-fit: contain;
    }
    .article-sidebar .sidebar-podcast-box {
        display: block !important;
    }
}
.editor-toolbar {
    align-items: center;
}
.editor-toolbar .toolbar-select {
    min-width: 132px;
    max-width: 190px;
    font-size: .84rem;
    font-weight: 700;
}
.editor-toolbar .toolbar-font-size {
    min-width: 122px;
}
.color-palette {
    height: auto !important;
    min-height: 34px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .26rem;
    max-width: 340px;
    padding: .35rem .45rem !important;
}
.color-label {
    font-size: .78rem;
    font-weight: 800;
    color: var(--text-secondary);
    margin-right: .15rem;
}
.color-swatch {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 7px !important;
}
.color-swatch[data-light-swatch="1"] {
    border-color: rgba(15, 23, 42, .28) !important;
}
.inline-caption-row {
    margin-top: .85rem;
    margin-bottom: .75rem;
}
.inline-caption-row input {
    background: #fff;
}
.wysiwyg-editor figure.article-inline-figure,
.article-content figure.article-inline-figure {
    margin: 1.15em 0;
}
.wysiwyg-editor figure.article-inline-figure img,
.article-content figure.article-inline-figure img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 14px;
}
.wysiwyg-editor figure.article-inline-figure figcaption,
.article-content figure.article-inline-figure figcaption {
    margin-top: .25rem;
    padding: .3rem .15rem 0 .55rem;
    border-left: 3px solid rgba(181, 18, 42, .35);
    color: #667085;
    font-size: .82rem;
    line-height: 1.35;
    font-style: italic;
}
@media (max-width: 900px) {
    .color-palette { max-width: 100%; }
    .editor-toolbar .toolbar-select { min-width: 118px; flex: 1 1 130px; }
}


/* ============================================================
   BBC V2.8 share mobile alignment
   ============================================================ */
@media (max-width: 520px) {
    .article-share .share-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: .44rem !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: .1rem;
        -webkit-overflow-scrolling: touch;
    }
    .article-share .share-btn {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        transform: none !important;
    }
    .article-share .share-btn.copy {
        order: 3;
        align-self: center !important;
        margin-top: 0 !important;
    }
    .article-share .share-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 19px !important;
        height: 19px !important;
        line-height: 1 !important;
    }
    .article-share .share-icon svg {
        display: block !important;
        width: 19px !important;
        height: 19px !important;
    }
}

/* ============================================================
   BBC V2.9 header nav/search alignment + live search results
   ============================================================ */
@media (min-width: 821px) {
    .bbc-nav-bar {
        background: rgba(255,255,255,.26) !important;
        border-top: 1px solid rgba(255,255,255,.38);
        border-bottom: 1px solid rgba(255,255,255,.30);
        backdrop-filter: blur(16px) saturate(145%);
        -webkit-backdrop-filter: blur(16px) saturate(145%);
        overflow: visible !important;
    }
    .bbc-nav-segments {
        width: 100% !important;
        max-width: var(--max) !important;
        margin: 0 auto !important;
        padding: 0 18px !important;
        min-height: 42px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) 300px !important;
        gap: 14px !important;
        align-items: center !important;
        overflow: visible !important;
    }
    .bbc-nav-section {
        min-height: 42px !important;
        height: 42px !important;
        background: transparent !important;
        overflow: visible !important;
    }
    .bbc-nav-green {
        justify-content: flex-start !important;
    }
    .bbc-main-nav-desktop {
        height: 42px !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        gap: 12px !important;
    }
    .bbc-main-nav-desktop a {
        min-height: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 17px !important;
        color: #202124 !important;
        font-size: .88rem !important;
        font-weight: 700 !important;
        letter-spacing: .01em !important;
        text-transform: uppercase !important;
    }
    .bbc-main-nav-desktop a.is-active,
    .bbc-main-nav-desktop a:hover {
        background: rgba(255,255,255,.92) !important;
        color: #111 !important;
        box-shadow: 0 4px 12px rgba(16,24,40,.08);
    }
    .bbc-nav-gold {
        justify-content: stretch !important;
        border-left: 2px solid rgba(181,18,42,.35);
        border-right: 2px solid rgba(181,18,42,.35);
        padding: 0 8px !important;
    }
    .bbc-ticker {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }
    .bbc-ticker-track {
        display: flex !important;
        align-items: center !important;
        min-width: max-content;
    }
    .bbc-ticker a,
    .bbc-ticker span {
        color: var(--accent) !important;
        font-size: .98rem !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
    .bbc-ticker-separator {
        color: rgba(181,18,42,.55) !important;
        margin: 0 11px !important;
    }
    .bbc-nav-red {
        position: relative !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
        overflow: visible !important;
        z-index: 50;
    }
    .bbc-search-form {
        position: relative !important;
        width: 286px !important;
        max-width: 286px !important;
        height: 34px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.38) !important;
        border: 1px solid rgba(255,255,255,.52) !important;
        box-shadow: 0 5px 20px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.64) !important;
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        overflow: hidden !important;
    }
    .bbc-search-form::before {
        display: block !important;
        content: "🔍";
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        opacity: .62;
        pointer-events: none;
        z-index: 2;
    }
    .bbc-search-form input {
        position: static !important;
        clip: auto !important;
        clip-path: none !important;
        width: 100% !important;
        height: 32px !important;
        padding: 0 10px 0 40px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #202124 !important;
        font-size: .86rem !important;
        line-height: 32px !important;
    }
    .bbc-search-form input::placeholder { color: rgba(32,33,36,.58) !important; }
    .bbc-search-form button {
        flex: 0 0 72px !important;
        width: 72px !important;
        height: 32px !important;
        border: 0 !important;
        border-left: 1px solid rgba(16,24,40,.10) !important;
        background: rgba(255,255,255,.38) !important;
        color: #202124 !important;
        font-size: .86rem !important;
        font-weight: 500 !important;
    }
    .bbc-search-form:focus-within {
        background: rgba(255,255,255,.64) !important;
        border-color: rgba(255,255,255,.82) !important;
        box-shadow: 0 0 0 3px rgba(181,18,42,.10), inset 0 1px 0 rgba(255,255,255,.82) !important;
    }
}

.bbc-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 999;
    width: min(420px, 92vw);
    max-height: min(440px, 72vh);
    overflow: auto;
    padding: .55rem;
    border: 1px solid rgba(16,24,40,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 20px 60px rgba(16,24,40,.18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.bbc-search-results[hidden] { display: none !important; }
.bbc-search-results-head {
    padding: .35rem .55rem .55rem;
    color: #667085;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.bbc-search-result-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: .7rem;
    align-items: center;
    padding: .45rem;
    border-radius: 14px;
    color: #1d2939;
    text-decoration: none;
}
.bbc-search-result-item:hover,
.bbc-search-result-item:focus-visible {
    background: rgba(181,18,42,.065);
    color: #1d2939;
    outline: none;
}
.bbc-search-result-item img,
.bbc-search-thumb-placeholder {
    width: 58px;
    height: 43px;
    border-radius: 10px;
    object-fit: cover;
    background: linear-gradient(135deg, #eef2f6, #d9e1eb);
}
.bbc-search-result-text {
    min-width: 0;
    display: block;
}
.bbc-search-result-text strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #1d2939;
    font-size: .88rem;
    line-height: 1.28;
    font-weight: 650;
}
.bbc-search-result-text small {
    display: block;
    margin-top: .2rem;
    color: #7b8494;
    font-size: .73rem;
}
.bbc-search-all,
.bbc-search-empty {
    display: block;
    margin-top: .35rem;
    padding: .7rem .8rem;
    border-radius: 12px;
    background: rgba(248,250,252,.92);
    color: #344054;
    font-size: .84rem;
    text-decoration: none;
}
.bbc-search-all {
    color: var(--accent);
    font-weight: 700;
    text-align: center;
}
.bbc-search-all:hover { background: rgba(181,18,42,.07); }

@media (max-width: 820px) {
    .bbc-nav-red { position: relative !important; overflow: visible !important; z-index: 50; }
    .bbc-search-results {
        position: absolute;
        top: calc(100% + 7px);
        left: 10px;
        right: 10px;
        width: auto;
        max-height: 68vh;
        border-radius: 16px;
    }
    .bbc-search-result-item {
        grid-template-columns: 54px minmax(0, 1fr);
    }
    .bbc-search-result-item img,
    .bbc-search-thumb-placeholder {
        width: 54px;
        height: 42px;
    }
    .bbc-search-result-text strong { font-size: .84rem; }
}

/* ============================================================
   BBC V3.0 header/search correction
   ============================================================ */
@media (min-width: 821px) {
    .bbc-nav-gold {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
    .bbc-nav-gold .bbc-ticker {
        width: min(470px, 100%) !important;
        max-width: 470px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        border-left: 2px solid rgba(181,18,42,.42) !important;
        border-right: 2px solid rgba(181,18,42,.42) !important;
    }
    .bbc-search-form:focus-within {
        border-color: rgba(255,255,255,.64) !important;
        box-shadow: 0 5px 20px rgba(16,24,40,.06), inset 0 1px 0 rgba(255,255,255,.72) !important;
    }
}

.bbc-search-form input:focus,
.bbc-search-form input:focus-visible,
.bbc-search-form button:focus,
.bbc-search-form button:focus-visible,
.search-form.bbc-search-form input:focus,
.search-form.bbc-search-form button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ============================================================
   BBC V3.1 running text alignment
   Running text is centered to the same visual axis and width as
   assets/img/beritabertuahcom.png in the brand bar.
   ============================================================ */
@media (min-width: 821px) {
    .bbc-nav-segments {
        position: relative !important;
    }

    .bbc-nav-gold {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        width: min(470px, calc(100% - 640px)) !important;
        min-width: 280px !important;
        max-width: 470px !important;
        justify-content: center !important;
        padding: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        pointer-events: auto !important;
        z-index: 1 !important;
    }

    .bbc-nav-gold .bbc-ticker {
        width: 100% !important;
        max-width: 470px !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .bbc-nav-green,
    .bbc-nav-red {
        position: relative !important;
        z-index: 2 !important;
    }
}

@media (min-width: 821px) and (max-width: 1050px) {
    .bbc-nav-gold {
        width: min(390px, calc(100% - 570px)) !important;
    }
    .bbc-ticker a,
    .bbc-ticker span {
        font-size: .9rem !important;
    }
}

/* ============================================================
   BBC V3.2 precise header/nav correction
   Restores a clean 3-zone desktop header:
   left navigation | centered running text aligned to wordmark | right search.
   ============================================================ */
@media (min-width: 1051px) {
    .bbc-nav-bar {
        overflow: visible !important;
    }

    .bbc-nav-segments {
        position: relative !important;
        width: 100% !important;
        max-width: var(--max) !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
        min-height: 42px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 480px 275px !important;
        gap: 24px !important;
        align-items: center !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .bbc-nav-section {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .bbc-nav-green {
        grid-column: 1 !important;
        justify-content: flex-start !important;
        z-index: 3 !important;
    }

    .bbc-nav-gold {
        grid-column: 2 !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        z-index: 2 !important;
    }

    .bbc-nav-red {
        grid-column: 3 !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        z-index: 4 !important;
    }

    .bbc-main-nav-desktop {
        width: 100% !important;
        height: 42px !important;
        margin-left: 0 !important;
        padding-right: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .bbc-main-nav-desktop a {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border-radius: 999px !important;
        font-size: .78rem !important;
        font-weight: 750 !important;
        line-height: 1 !important;
        letter-spacing: .005em !important;
        text-transform: uppercase !important;
    }

    .bbc-nav-gold .bbc-ticker {
        width: 470px !important;
        max-width: 470px !important;
        height: 42px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
    }

    .bbc-ticker-track {
        min-width: max-content !important;
    }

    .bbc-ticker a,
    .bbc-ticker span {
        font-size: .94rem !important;
        font-weight: 520 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .bbc-search-form {
        width: 286px !important;
        max-width: 286px !important;
        min-width: 286px !important;
        height: 34px !important;
    }
}

@media (min-width: 821px) and (max-width: 1050px) {
    .bbc-nav-segments {
        position: relative !important;
        max-width: var(--max) !important;
        margin: 0 auto !important;
        padding: 0 14px !important;
        display: grid !important;
        grid-template-columns: minmax(246px, auto) minmax(0, 1fr) 236px !important;
        gap: 8px !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .bbc-nav-section {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .bbc-nav-green { grid-column: 1 !important; justify-content: flex-start !important; z-index: 3 !important; }
    .bbc-nav-gold  { grid-column: 2 !important; justify-content: center !important; padding: 0 !important; border: 0 !important; z-index: 2 !important; }
    .bbc-nav-red   { grid-column: 3 !important; justify-content: flex-end !important; z-index: 4 !important; }

    .bbc-main-nav-desktop {
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px !important;
        overflow: hidden !important;
    }

    .bbc-main-nav-desktop a {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 6px !important;
        font-size: .72rem !important;
        font-weight: 750 !important;
    }

    .bbc-nav-gold .bbc-ticker {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    .bbc-ticker a,
    .bbc-ticker span {
        font-size: .86rem !important;
    }

    .bbc-search-form {
        width: 236px !important;
        min-width: 236px !important;
        max-width: 236px !important;
    }
}

/* ============================================================
   BBC V4.1 FINAL OVERRIDES — FRAME BERITA / ARTIKEL / IKLAN
   Tujuan:
   - Menyamakan tinggi frame pada rubrik berita/artikel/iklan di homepage.
   - Membuat gambar overlay memenuhi frame tanpa ruang kosong.
   - Menjaga iklan tetap proporsional dan tidak merusak layout.
   - Menghindari aturan global yang terlalu luas.
   ============================================================ */

/* Variabel tinggi frame agar mudah diubah di satu tempat */
:root {
    --bbc-home-card-h: 270px;
    --bbc-home-card-h-large: 270px;
    --bbc-home-card-h-mobile: 230px;
}

/* Grid homepage: jarak konsisten dan tinggi baris konsisten */
.home-mosaic {
    gap: 10px !important;
    align-items: stretch !important;
    grid-auto-rows: var(--bbc-home-card-h) !important;
}

/* Semua item utama di homepage menggunakan tinggi frame yang sama */
.home-mosaic > .news-card,
.home-mosaic > .promo-slot,
.home-mosaic > .mimbar-home-card {
    min-height: var(--bbc-home-card-h) !important;
    height: 100% !important;
}

/* Card berita/artikel standar: gambar + teks disusun stabil */
.home-mosaic > .news-card:not(.overlay) {
    display: flex !important;
    flex-direction: column !important;
}

.home-mosaic > .news-card:not(.overlay) .card-media {
    flex: 0 0 58% !important;
    height: 58% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

.home-mosaic > .news-card:not(.overlay) .card-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Overlay card: gambar wajib memenuhi seluruh frame */
.home-mosaic > .news-card.overlay {
    display: block !important;
    min-height: var(--bbc-home-card-h-large) !important;
    height: 100% !important;
}

.home-mosaic > .news-card.overlay .card-media {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 100% !important;
}

.home-mosaic > .news-card.overlay .card-media img,
.home-mosaic > .news-card:not(.overlay) .card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Mimbar/artikel besar di homepage mengikuti tinggi frame yang sama */
.home-mosaic > .mimbar-home-card,
.home-mosaic > .mimbar-home-card .mimbar-home-media,
.home-mosaic > .mimbar-home-card .mimbar-home-media img {
    min-height: var(--bbc-home-card-h) !important;
    height: 100% !important;
}

.home-mosaic > .mimbar-home-card .mimbar-home-media img {
    object-fit: cover !important;
}

.home-mosaic > .mimbar-home-card.mimbar-home-composite {
    grid-row: span 2 !important;
    display: grid !important;
    grid-template-rows: var(--bbc-home-card-h) minmax(0, 1fr) !important;
    min-height: calc((var(--bbc-home-card-h) * 2) + 10px) !important;
    background: #fff !important;
}

.home-mosaic > .mimbar-home-card.mimbar-home-composite .mimbar-home-media,
.home-mosaic > .mimbar-home-card.mimbar-home-composite .mimbar-home-empty {
    min-height: 0 !important;
    height: 100% !important;
}

.home-mosaic > .mimbar-home-card.mimbar-home-composite .mimbar-home-media img {
    min-height: 0 !important;
    height: 100% !important;
}

.home-mosaic > .mimbar-home-card.mimbar-home-composite .mimbar-related-list {
    min-height: 0 !important;
    height: 100% !important;
}

/* Iklan: frame sama, gambar tidak menyisakan ruang kosong */
.home-mosaic > .promo-slot {
    min-height: var(--bbc-home-card-h) !important;
    height: 100% !important;
}

.home-mosaic > .promo-slot a,
.home-mosaic > .promo-slot .promo-html {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.home-mosaic > .promo-slot img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    display: block !important;
}

/* Iklan HTML/iframe tetap responsif dan tidak melebar keluar frame */
.home-mosaic > .promo-slot iframe,
.home-mosaic > .promo-slot embed,
.home-mosaic > .promo-slot object {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
}

/* Judul card dibatasi agar ukuran frame tetap rapi */
.home-mosaic .card-body h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Tablet: tetap dua kolom, tinggi sedikit disesuaikan */
@media (max-width: 980px) and (min-width: 721px) {
    :root {
        --bbc-home-card-h: 250px;
        --bbc-home-card-h-large: 250px;
    }

    .home-mosaic {
        grid-auto-rows: var(--bbc-home-card-h) !important;
    }
}

/* Mobile: jangan paksa terlalu tinggi; tetap nyaman dibaca */
@media (max-width: 720px) {
    .home-mosaic {
        gap: 10px !important;
        grid-auto-rows: auto !important;
    }

    .home-mosaic > .news-card,
    .home-mosaic > .promo-slot,
    .home-mosaic > .mimbar-home-card {
        min-height: 0 !important;
        height: auto !important;
    }

    .home-mosaic > .news-card:not(.overlay) .card-media {
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }

    .home-mosaic > .news-card.overlay .card-media,
    .home-mosaic > .mimbar-home-card .mimbar-home-media {
        height: auto !important;
        min-height: var(--bbc-home-card-h-mobile) !important;
        aspect-ratio: 16 / 9 !important;
    }

    .home-mosaic > .mimbar-home-card.mimbar-home-composite {
        grid-row: auto !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
    }

    .home-mosaic > .mimbar-home-card.mimbar-home-composite .mimbar-related-list {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 10px;
    }

    .mimbar-related-item {
        grid-template-columns: 72px minmax(0, 1fr);
        min-height: 84px;
    }

    .mimbar-related-thumb {
        width: 72px;
        height: 64px;
    }

    .home-mosaic > .promo-slot {
        min-height: 0 !important;
    }

    .home-mosaic > .promo-slot img {
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }
}
/* Atur jarak menu nav desktop: Home tetap, menu lain bergeser proporsional */
@media (min-width: 821px) {
    .bbc-main-nav-desktop {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
}

/* ============================================================
   BBC V4.2 HEADER + HERO ALIGNMENT
   - Running text dimulai tepat setelah menu Podcast dan berakhir sebelum search.
   - Hero homepage mengikuti grid 5 frame: berita utama 3 frame, podcast 2 frame.
   ============================================================ */
@media (min-width: 1051px) {
    .bbc-nav-segments {
        grid-template-columns: max-content minmax(0, 1fr) 286px !important;
        gap: 14px !important;
    }

    .bbc-main-nav-desktop {
        width: max-content !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    .bbc-nav-gold {
        justify-content: stretch !important;
    }

    .bbc-nav-gold .bbc-ticker {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

@media (min-width: 821px) and (max-width: 1050px) {
    .bbc-nav-segments {
        grid-template-columns: max-content minmax(0, 1fr) 236px !important;
    }

    .bbc-main-nav-desktop {
        width: max-content !important;
        overflow: visible !important;
    }

    .bbc-nav-gold .bbc-ticker {
        width: 100% !important;
        max-width: none !important;
    }
}

@media (min-width: 981px) {
    .hero-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .hero-grid > .hero-card {
        grid-column: span 3 !important;
    }

    .hero-grid > .hero-card.compact {
        grid-column: span 2 !important;
    }
}

@media (max-width: 980px) {
    .hero-grid > .hero-card {
        grid-column: auto !important;
    }
}

/* ============================================================
   BBC V4.3 FRAME POLISH
   Sudut frame dibuat lebih kecil dan bersih seperti kartu berita modern.
   ============================================================ */
:root {
    --radius: 8px;
    --radius-sm: 8px;
    --bbc-frame-radius: 8px;
    --bbc-frame-radius-inner: 6px;
}

.hero-card,
.home-mosaic > .news-card,
.home-mosaic > .promo-slot,
.home-mosaic > .mimbar-home-card,
.article-box,
.sidebar-box,
.empty-state,
.podcast-featured-link {
    border-radius: var(--bbc-frame-radius) !important;
}

.hero-card,
.home-mosaic > .news-card,
.home-mosaic > .promo-slot,
.home-mosaic > .mimbar-home-card,
.article-box,
.sidebar-box,
.empty-state {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08) !important;
}

.home-mosaic > .news-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .12) !important;
}

.mimbar-related-thumb,
.mini-thumb,
.article-content img,
.article-gallery-item img,
.media-library-item img {
    border-radius: var(--bbc-frame-radius-inner) !important;
}

.article-video,
.podcast-frame-wrap,
.podcast-lite,
.podcast-featured-link {
    border-radius: var(--bbc-frame-radius) !important;
    overflow: hidden;
}

/* ============================================================
   BBC V4.4 NEWS TITLE GLASS
   Area judul kartu berita dibuat lebih terasa seperti kaca, tetap bersih.
   ============================================================ */
.home-mosaic > .news-card:not(.overlay) .card-body {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66)),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .72), transparent 52%) !important;
    border-top: 1px solid rgba(255, 255, 255, .62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .76),
        inset 0 -1px 0 rgba(15, 23, 42, .04);
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.home-mosaic > .news-card:not(.overlay) .card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08)),
        linear-gradient(180deg, rgba(181, 18, 42, .045), rgba(5, 92, 28, .035));
    pointer-events: none;
}

.home-mosaic > .news-card:not(.overlay) .card-body h3 a {
    color: rgba(15, 23, 42, .96);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .62);
}

.home-mosaic > .news-card:not(.overlay) .card-meta {
    color: rgba(74, 82, 96, .76);
}

/* Frame Artikel Lainnya/Konten Terkait pada halaman Tadabbur/detail */
.article-page .related-box {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58)),
        radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .72), transparent 54%) !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    box-shadow:
        0 2px 8px rgba(16, 24, 40, .08),
        inset 0 1px 0 rgba(255, 255, 255, .78) !important;
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.article-page .related-box h2 {
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .68);
}

.article-page .related-box .mini-item {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .30)) !important;
    border: 1px solid rgba(255, 255, 255, .44);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .60),
        0 1px 0 rgba(15, 23, 42, .03);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
}

.article-page .related-box .mini-item:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .44)),
        linear-gradient(180deg, rgba(181, 18, 42, .055), rgba(5, 92, 28, .035)) !important;
    border-color: rgba(181, 18, 42, .18);
}

/* ============================================================
   BBC V4.1 SAFETY / ACCESSIBILITY NOTES
   - Tidak memakai @import eksternal.
   - Tidak memakai expression(), behavior, atau resource lintas domain baru.
   - Focus ring dipertahankan untuk aksesibilitas keyboard.
   ============================================================ */