:root {
    --cream: #f5f0e8;
    --navy: #1a2639;
    --navy-mid: #243048;
    --gold: #b8952a;
    --gold-lt: #d4aa3f;
    --gold-pale: #e8d080;
    --olive: #4a5240;
    --text-dark: #1c1c1c;
    --text-muted: #6c6c5e;
    --border: #c8b87a;
}

* {
    box-sizing: border-box;
}

body.xi-portal {
    background: var(--cream);
    color: var(--text-dark);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 0.92rem;
}

/* ── TOP BAR ── */
#topbar {
    background: var(--navy);
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--gold);
    flex-wrap: wrap;
    gap: 10px;
}

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

.logo-mark {
    width: 52px;
    height: 52px;
    position: relative;
    flex-shrink: 0;
}

.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.logo-mark svg {
    width: 100%;
    height: 100%;
}

.brand-text h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
    margin: 0;
    line-height: 1;
}

.brand-text p {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--gold-pale);
    margin: 2px 0 0;
    letter-spacing: 0.5px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

#xi-search-form {
    margin: 0;
}

#searchbox {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(200, 184, 122, 0.4);
    border-radius: 4px;
    color: #fff;
    padding: 6px 14px 6px 36px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.82rem;
    width: 280px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23b8952a' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.099zm-5.242 1.15a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    outline: none;
    transition: border-color .2s;
}

#searchbox::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#searchbox:focus {
    border-color: var(--gold);
    background-color: rgba(255, 255, 255, 0.12);
}

.font-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ccc;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.85rem;
}

.font-controls button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(200, 184, 122, 0.3);
    color: var(--gold-pale);
    border-radius: 3px;
    padding: 2px 7px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background .15s;
}

.font-controls button:hover {
    background: rgba(184, 149, 42, 0.25);
}

.icon-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    transition: color .15s;
}

.icon-btn:hover {
    color: var(--gold-lt);
}

/* ── NAVBAR ── */
#mainNav {
    background: var(--navy-mid);
    border-bottom: 3px solid var(--gold);
}

#mainNav .nav-link {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 11px 18px !important;
    text-transform: uppercase;
    transition: color .15s, background .15s;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
    color: var(--gold-lt) !important;
    background: rgba(184, 149, 42, 0.12);
}

/* ── BREADCRUMB (inner pages) ── */
.xi-breadcrumb {
    background: rgba(26, 38, 57, 0.06);
    border-bottom: 1px solid rgba(180, 160, 100, 0.25);
    padding: 8px 20px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
}

.xi-breadcrumb a {
    color: var(--navy);
    text-decoration: none;
}

.xi-breadcrumb a:hover {
    color: var(--gold);
}

.xi-breadcrumb .active {
    color: var(--text-muted);
}

/* ── LAYOUT ── */
/* Beranda: fokus+dokumen (lebar dibatasi) | wawasan+trending | live fakta (kolom sempit kanan) */
#content {
    display: grid;
    grid-template-columns: minmax(0, 500px) minmax(260px, 300px) 220px;
    gap: 14px;
    padding: 14px 16px;
    align-items: start;
    justify-content: center;
    box-sizing: border-box;
}

#content.xi-inner {
    grid-template-columns: minmax(0, 1fr) 300px;
    max-width: 1280px;
    margin: 0 auto;
}

#content.xi-inner .xi-sidebar-stack .card-panel+.card-panel {
    margin-top: 14px;
}

/* ── CARD BASE ── */
.card-panel {
    background: #fff;
    border: 1px solid rgba(180, 160, 100, 0.3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-panel+.card-panel {
    margin-top: 14px;
}

.panel-header {
    background: var(--navy);
    color: var(--gold-pale);
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-bottom: 2px solid var(--gold);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.panel-header .label-accent {
    color: #fff;
    font-weight: 700;
}

/* ── HERO CARD ── */
#heroCard {
    grid-row: 1 / 2;
}

.hero-body {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 16px;
    align-items: start;
}

.hero-thumb-wrap {
    width: 100%;
    max-width: 200px;
    justify-self: end;
}

.hero-thumb-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(180, 160, 100, 0.35);
}

.hero-thumb-placeholder {
    aspect-ratio: 4 / 3;
    width: 100%;
    background: rgba(26, 38, 57, 0.08);
    border-radius: 4px;
    border: 1px dashed rgba(180, 160, 100, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 2.25rem;
}

.hero-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hero-excerpt {
    font-size: 0.84rem;
    line-height: 1.6;
    color: #3a3a3a;
}

.meta-time {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
    color: var(--gold);
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tank-diagram {
    position: relative;
    background: rgba(26, 38, 57, 0.04);
    border: 1px solid rgba(180, 160, 100, 0.2);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.tank-diagram svg {
    width: 100%;
    height: auto;
}

.diag-label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.62rem;
    color: var(--navy);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    margin-top: 6px;
}

#docCard {
    grid-row: 2 / 3;
}

.doc-body {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 14px;
    align-items: center;
}

.doc-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.globe-img {
    width: 130px;
    height: 110px;
    background: radial-gradient(circle at 35% 35%, #2a5082, #0d1a2e);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.globe-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 14px,
            rgba(255, 255, 255, 0.05) 14px, rgba(255, 255, 255, 0.05) 15px), repeating-linear-gradient(90deg, transparent, transparent 14px,
            rgba(255, 255, 255, 0.05) 14px, rgba(255, 255, 255, 0.05) 15px);
    border-radius: 50%;
}

.globe-icon {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.15);
    z-index: 1;
}

#midCol {
    min-width: 0;
    max-width: 500px;
}

#liveFaktaCol {
    min-width: 0;
}

a.news-item {
    text-decoration: none;
    color: inherit;
    display: flex;
}

.news-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(180, 160, 100, 0.2);
    cursor: pointer;
    transition: background .15s;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item:hover {
    background: rgba(184, 149, 42, 0.06);
}

.news-thumb {
    width: 68px;
    height: 54px;
    border-radius: 2px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-finance {
    background: linear-gradient(135deg, #1a3a5c, #2d6a4f);
}

.thumb-maritime {
    background: linear-gradient(135deg, #1a3a5c, #0077b6);
}

.thumb-satellite {
    background: linear-gradient(135deg, #0d1b2a, #1a3a5c);
}

.thumb-document {
    background: linear-gradient(135deg, #3a2e1a, #6b4c1e);
}

.news-body {
    flex: 1;
    min-width: 0;
}

.news-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.news-desc {
    font-size: 0.73rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-tag {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.65rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

#trendingCard {
    background: var(--navy-mid);
    border-color: var(--gold);
}

#trendingCard .panel-header {
    background: #0e1826;
}

a.trending-item {
    text-decoration: none;
    color: inherit;
    display: flex;
}

.trending-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background .15s;
}

.trending-item:last-child {
    border-bottom: none;
}

.trending-item:hover {
    background: rgba(184, 149, 42, 0.08);
}

.trending-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e0d5b0;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 3px;
}

.trending-desc {
    font-size: 0.72rem;
    color: rgba(200, 180, 130, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trending-tag {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.65rem;
    color: var(--gold-lt);
    text-transform: uppercase;
}

#rightCol {
    min-width: 0;
}

#liveFakta {
    background: var(--navy);
}

#liveFakta .panel-header {
    background: #0e1826;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    animation: blink 1.2s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

a.fakta-item {
    text-decoration: none;
    color: inherit;
    display: block;
}

.fakta-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background .15s;
}

.fakta-item:hover {
    background: rgba(184, 149, 42, 0.1);
}

.fakta-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-pale);
    text-transform: uppercase;
    line-height: 1.3;
}

.fakta-badge {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.6rem;
    background: var(--gold);
    color: var(--navy);
    border-radius: 2px;
    padding: 1px 5px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
}

#shipCard {
    background: var(--navy-mid);
    border: 1px solid var(--gold);
}

.ship-diagram svg {
    width: 100%;
    height: auto;
    display: block;
}

.ship-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin-top: 10px;
}

.ship-label-item {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.63rem;
    color: var(--gold-pale);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ship-label-item::before {
    content: '▸';
    color: var(--gold);
    font-size: 0.6rem;
}

/* ── FOOTER ── */
#footer {
    background: var(--navy);
    border-top: 2px solid var(--gold);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

#footer .xi-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
}

#footer .xi-footer-links a {
    color: var(--gold-pale);
    text-decoration: none;
    letter-spacing: 0.5px;
}

#footer .xi-footer-links a:hover {
    color: #fff;
}

.footer-version {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(200, 184, 122, 0.3);
    border-radius: 3px;
    padding: 4px 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
    color: var(--gold-pale);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-status {
    width: 8px;
    height: 8px;
    background: #27ae60;
    border-radius: 50%;
}

/* ── Article / list inner ── */
.xi-article-wrap {
    padding: 0 0 24px;
}

.xi-article-main {
    padding: 20px 22px 24px;
}

.xi-article-cat {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.65rem;
    background: var(--gold);
    color: var(--navy);
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 12px;
    text-decoration: none;
}

.xi-article-cat:hover {
    color: var(--navy);
    filter: brightness(1.05);
}

.xi-article-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.xi-article-meta {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.xi-article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.xi-hero-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 8px;
}

.xi-hero-placeholder {
    width: 100%;
    height: 280px;
    background: rgba(26, 38, 57, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--gold);
    border-radius: 3px;
    margin-bottom: 8px;
}

.xi-img-credit {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 16px;
}

.xi-ringkasan {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #3a3a3a;
    border-left: 3px solid var(--gold);
    padding-left: 14px;
    margin-bottom: 18px;
}

.xi-article-body {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-dark);
}

.xi-article-body img {
    max-width: 100%;
    height: auto;
}

.xi-tag-pill {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(26, 38, 57, 0.08);
    border: 1px solid rgba(180, 160, 100, 0.35);
    border-radius: 2px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
    color: var(--navy);
    text-decoration: none;
}

.xi-tag-pill:hover {
    background: rgba(184, 149, 42, 0.15);
}

.xi-entities {
    border-top: 1px solid rgba(180, 160, 100, 0.3);
    padding-top: 16px;
    margin-top: 20px;
    font-size: 0.85rem;
}

.xi-entities-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--navy);
    margin-bottom: 8px;
}

a.xi-art-row {
    text-decoration: none;
    color: inherit;
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(180, 160, 100, 0.2);
    transition: background .15s;
}

a.xi-art-row:hover {
    background: rgba(184, 149, 42, 0.06);
}

.xi-art-row-thumb {
    width: 120px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a3a5c, #243048);
    color: var(--gold-pale);
    font-size: 1.8rem;
}

.xi-art-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xi-art-row-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    text-transform: uppercase;
    line-height: 1.25;
    margin-bottom: 6px;
}

.xi-art-row-excerpt {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 8px;
}

.xi-art-row-meta {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
    color: var(--gold);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.xi-page-header {
    padding: 16px 18px;
    border-bottom: 2px solid var(--gold);
    background: var(--navy);
    color: var(--gold-pale);
}

.xi-page-header h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.xi-page-count {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.78rem;
    margin-top: 6px;
    opacity: 0.9;
}

.xi-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.xi-empty i {
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: 12px;
}

.xi-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 18px;
    background: var(--navy);
    color: var(--gold-pale) !important;
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-decoration: none !important;
    border: 1px solid var(--gold);
}

.xi-btn:hover {
    background: var(--navy-mid);
}

.xi-scroll-top {
    position: fixed;
    right: 18px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    background: var(--navy);
    border: 2px solid var(--gold);
    color: var(--gold-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 1040;
}

.xi-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.xi-scroll-top:hover {
    color: #fff;
}

.xi-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

a.xi-related-card {
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(180, 160, 100, 0.3);
    background: #fff;
    overflow: hidden;
    border-radius: 3px;
}

.xi-related-thumb {
    height: 90px;
    background: var(--navy-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-pale);
    overflow: hidden;
}

.xi-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xi-related-body {
    padding: 8px 10px;
}

.xi-related-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--navy);
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Di bawah ±1120px tiga kolom tidak muat: susun vertikal */
@media (max-width: 1120px) {
    #content:not(.xi-inner) {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    #midCol {
        max-width: none;
    }

    #rightCol {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    #rightCol .card-panel+.card-panel {
        margin-top: 0;
    }

    #content.xi-inner {
        grid-template-columns: 1fr;
    }

    #content.xi-inner .xi-sidebar-stack {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    #content.xi-inner .xi-sidebar-stack .card-panel+.card-panel {
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    #content:not(.xi-inner) {
        grid-template-columns: 1fr;
    }

    #rightCol {
        grid-template-columns: 1fr;
    }

    .hero-body,
    .doc-body {
        grid-template-columns: 1fr;
    }

    .hero-thumb-wrap {
        max-width: none;
        justify-self: stretch;
        order: -1;
    }

    .hero-thumb-img,
    .hero-thumb-placeholder {
        max-height: 220px;
    }

    #searchbox {
        width: 180px;
    }

    #content.xi-inner .xi-sidebar-stack {
        grid-template-columns: 1fr;
    }

    a.xi-art-row {
        flex-direction: column;
    }

    .xi-art-row-thumb {
        width: 100%;
        height: 160px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   BERANDA XI-HOME — UI blueprint / kartu krem / tata letak 3 kolom (mockup)
   ═══════════════════════════════════════════════════════════════════ */

body.xi-home.xi-portal {
    font-family: 'Roboto Condensed', system-ui, sans-serif;
    background-color: #0a101c;
    background-image:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(30, 55, 95, 0.22), transparent 50%),
        radial-gradient(ellipse 70% 50% at 85% 60%, rgba(40, 70, 110, 0.12), transparent 45%),
        repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(95, 130, 170, 0.055) 23px),
        repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(95, 130, 170, 0.055) 23px);
    background-attachment: fixed;
    color: var(--text-dark);
    min-height: 100vh;
    padding-bottom: 56px;
}

body.xi-home.xi-portal::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' fill='none'%3E%3Cpath d='M60 380 L240 260 L520 235 L720 270 L740 340 L700 390 L80 400 Z' stroke='%23a8c0e0' stroke-width='1.2'/%3E%3Cpath d='M280 250 L280 160 M400 245 L400 140 M520 238 L520 155' stroke='%23a8c0e0' stroke-width='0.8'/%3E%3Ccircle cx='580' cy='220' r='14' stroke='%23a8c0e0' stroke-width='0.8'/%3E%3Cpath d='M120 120 L680 120 M120 200 L600 200' stroke='%23a8c0e0' stroke-width='0.5' opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 92% 18%;
    background-size: min(720px, 90vw);
}

body.xi-home #topbar.xi-home-topbar {
    display: block;
    background: linear-gradient(180deg, #f3ede4 0%, #ebe4d6 100%);
    border-bottom: 1px solid rgba(26, 38, 57, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    padding: 0;
    position: relative;
    z-index: 20;
}

body.xi-home .xi-topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 22px 14px;
}

body.xi-home .xi-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

body.xi-home .xi-topbar-brand-row {
    padding-bottom: 0;
    border-bottom: none;
}

body.xi-home .xi-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

body.xi-home .xi-topbar-account {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.xi-home .brand-text h1 {
    color: #1a2639;
    letter-spacing: 2.5px;
}

body.xi-home .brand-text p {
    color: #4a5568;
}

body.xi-home .icon-btn {
    color: #1a2639;
    background: rgba(26, 38, 57, 0.06);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.xi-home .icon-btn:hover {
    color: var(--gold);
    background: rgba(184, 149, 42, 0.12);
}

body.xi-home .font-controls {
    color: #1a2639;
    flex-shrink: 0;
}

body.xi-home .font-controls button {
    background: rgba(26, 38, 57, 0.06);
    border: 1px solid rgba(26, 38, 57, 0.12);
    color: #1a2639;
    border-radius: 8px;
    padding: 6px 10px;
}

body.xi-home .font-controls button:hover {
    background: rgba(184, 149, 42, 0.15);
    border-color: var(--gold);
    color: #1a2639;
}

/* Nav slide + tombol cari (pola RadarFaktual), warna tetap gaya Xplorinfo */
body.xi-home #mainNav.xi-main-nav,
body.xi-home nav.xi-main-nav {
    background: linear-gradient(180deg, #5c4a32 0%, #453824 100%);
    border-bottom: 3px solid #8a7038;
    position: relative;
    z-index: 15;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

body.xi-home .xi-nav-bar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 12px;
    min-height: 48px;
}

body.xi-home .xi-nav-scroll-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

body.xi-home .xi-mobile-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

body.xi-home .xi-mobile-menu::-webkit-scrollbar {
    display: none;
}

body.xi-home .xi-nav-link {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 11px 18px !important;
    text-transform: uppercase;
    transition: color 0.15s, background 0.15s;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.xi-home .xi-nav-link:hover,
body.xi-home .xi-nav-link.active {
    color: var(--gold-lt) !important;
    background: rgba(184, 149, 42, 0.12);
}

body.xi-home .xi-search-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.15s;
    margin-left: 12px;
    padding: 8px 10px;
    flex-shrink: 0;
    line-height: 1;
}

body.xi-home .xi-search-btn:hover {
    color: var(--gold-lt);
}

body.xi-home .xi-nav-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 13px;
    color: var(--gold-pale);
}

body.xi-home .xi-nav-arrow.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

body.xi-home .xi-nav-arrow-left {
    left: 0;
    background: linear-gradient(to right, #453824 42%, transparent 100%);
}

body.xi-home .xi-nav-arrow-right {
    right: 0;
    background: linear-gradient(to left, #453824 42%, transparent 100%);
}

body.xi-home .xi-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

body.xi-home .xi-search-overlay.active {
    display: flex;
}

body.xi-home .xi-search-form {
    width: 100%;
    max-width: 600px;
    padding: 0 24px;
}

body.xi-home .xi-search-input {
    width: 100%;
    background: rgba(26, 38, 57, 0.95);
    border: 2px solid var(--gold);
    border-radius: 4px;
    color: #f5f0e8;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
    padding: 16px 20px;
    outline: none;
}

body.xi-home .xi-search-input::placeholder {
    color: rgba(232, 208, 128, 0.45);
}

body.xi-home .xi-search-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    color: var(--gold-pale);
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

body.xi-home .xi-search-close:hover {
    color: var(--gold-lt);
}

body.xi-home #content {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) 220px;
    max-width: 1320px;
    margin: 0 auto;
    gap: 18px;
    padding: 22px 22px 28px;
    align-items: stretch;
}

body.xi-home #midCol {
    max-width: none;
}

body.xi-home #liveFaktaCol {
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

body.xi-home .card-panel {
    background: linear-gradient(180deg, #faf6ef 0%, #f3ede4 100%);
    border-radius: 12px;
    border: 1px solid rgba(200, 180, 140, 0.5);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

body.xi-home .card-panel+.card-panel {
    margin-top: 16px;
}

body.xi-home #heroCard .panel-header {
    background: linear-gradient(180deg, #d4b04a 0%, #c4a038 100%);
    color: #0f1624;
    border-bottom: 2px solid #8a7038;
}

body.xi-home #heroCard .panel-header i {
    color: #1a2639 !important;
}

body.xi-home #heroCard .panel-header .label-accent {
    color: #0f1624;
}

body.xi-home #docCard .panel-header {
    background: linear-gradient(180deg, #1e2d48 0%, #152238 100%);
    color: var(--gold-pale);
    border-bottom: 2px solid var(--gold);
}

body.xi-home #wawasanCard .panel-header,
body.xi-home #trendingCard .panel-header {
    background: linear-gradient(180deg, #6b5638 0%, #4a3d28 100%);
    color: var(--gold-pale);
    border-bottom: 2px solid rgba(212, 170, 63, 0.45);
}

body.xi-home #liveFakta {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    background: linear-gradient(180deg, #141f32 0%, #0c1422 100%);
    border: 1px solid rgba(100, 130, 170, 0.25);
    border-radius: 12px;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

body.xi-home #liveFakta .panel-header {
    flex-shrink: 0;
    background: linear-gradient(180deg, #c5d4e8 0%, #a8b8d0 100%);
    color: #0f1624;
    border-bottom: 2px solid #6a7a90;
}

body.xi-home #liveFakta .panel-header .label-accent {
    color: #1a2639;
}

body.xi-home #liveFakta .panel-header .live-dot {
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.7);
}

body.xi-home #liveFakta a.fakta-item {
    flex: 0 0 auto;
}

body.xi-home #liveFakta::after {
    content: '';
    flex: 1;
    min-height: 100px;
    margin: 8px 10px 12px;
    border-radius: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 140' fill='none'%3E%3Cpath d='M20 95 L120 55 L260 48 L300 62 L295 88 L28 92 Z' stroke='%23a8c0e0' stroke-width='1' opacity='0.35'/%3E%3Cpath d='M140 52 L140 28 M200 50 L200 26' stroke='%23a8c0e0' stroke-width='0.7' opacity='0.3'/%3E%3Ccircle cx='230' cy='46' r='5' stroke='%23a8c0e0' stroke-width='0.6' opacity='0.35'/%3E%3C/svg%3E") center bottom / contain no-repeat;
    opacity: 0.85;
    pointer-events: none;
}

body.xi-home #footer.xi-home-footer {
    position: relative;
    z-index: 5;
    background: rgba(8, 12, 22, 0.88);
    border-top: 1px solid rgba(138, 112, 56, 0.4);
    backdrop-filter: blur(8px);
}

body.xi-home .xi-app-badge {
    position: fixed;
    bottom: 20px;
    right: 22px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: var(--gold-pale);
    background: rgba(15, 22, 36, 0.92);
    border: 1px solid rgba(184, 149, 42, 0.45);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

body.xi-home .xi-app-badge i {
    color: var(--gold-lt);
    font-size: 1rem;
}

body.xi-home .xi-scroll-top {
    bottom: 72px;
}

@media (max-width: 1120px) {
    body.xi-home #content {
        grid-template-columns: 1fr;
        padding: 18px 16px;
    }

    body.xi-home #liveFaktaCol {
        align-self: stretch;
    }
}

@media (max-width: 720px) {
    body.xi-home .xi-topbar-inner {
        padding: 10px 14px 12px;
    }

    body.xi-home .xi-topbar-brand-row {
        flex-direction: column;
        align-items: flex-start;
    }

    body.xi-home .xi-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    body.xi-home .xi-app-badge {
        right: 12px;
        bottom: 12px;
        font-size: 0.65rem;
        padding: 6px 10px;
    }
}

/* ── Halaman artikel: kartu ala profile + latar xi-home ── */
body.xi-article-page.xi-home {
    font-family: 'Nunito', 'Roboto Condensed', system-ui, sans-serif;
}

body.xi-article-page .xi-article-main-wrap {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

body.xi-article-page .xi-page-title-h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.35rem;
}

body.xi-article-page .page-title .text-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    color: #607080 !important;
}

body.xi-article-page .xi-breadcrumb--article {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.82rem;
}

body.xi-article-page .xi-breadcrumb--article a {
    color: rgba(245, 240, 232, 0.9);
    text-decoration: none;
}

body.xi-article-page .xi-breadcrumb--article a:hover {
    color: var(--gold-lt);
}

body.xi-article-page .xi-breadcrumb--article .active {
    color: rgba(245, 240, 232, 0.65);
}

body.xi-article-page .xi-breadcrumb--article .text-muted {
    color: rgba(245, 240, 232, 0.45) !important;
}

body.xi-article-page .section {
    padding-top: 0;
}

body.xi-article-page .xi-mazer-card {
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

body.xi-article-page .xi-mazer-card .card-header {
    background: #fff;
    border-bottom: 1px solid #f9f9f9;
    padding: 1.25rem 1.5rem;
}

body.xi-article-page .xi-mazer-card .card-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #25396f;
}

body.xi-article-page .xi-mazer-card .card-body {
    padding: 1.5rem;
}

body.xi-article-page .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    font-weight: 600;
}

body.xi-article-page .btn-primary:hover {
    opacity: 0.92;
    filter: brightness(1.05);
}

body.xi-article-page .badge.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    font-weight: 600;
}

body.xi-article-page .text-primary {
    color: #667eea !important;
}

body.xi-article-page .xi-article-title-display {
    font-family: 'Nunito', sans-serif;
    color: #25396f;
}

body.xi-article-page .xi-profile-style-img {
    max-height: 420px;
    object-fit: cover;
    width: 100%;
    border: 4px solid #667eea;
}

body.xi-article-page .xi-profile-placeholder {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 3.5rem;
}

body.xi-article-page .xi-article-body--prose {
    font-family: 'Nunito', 'Source Serif 4', Georgia, serif;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #343a40;
}

body.xi-article-page .xi-article-body--prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

body.xi-article-page .xi-label-pill {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #25396f;
}

body.xi-article-page .xi-related-mini {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.xi-article-page .xi-related-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2) !important;
}

body.xi-article-page .xi-recent-thumb {
    width: 72px;
    height: 52px;
    object-fit: cover;
}

body.xi-article-page .xi-recent-thumb-placeholder {
    width: 72px;
    height: 52px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

body.xi-article-page .xi-cat-list-thumb-placeholder {
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    font-size: 1.75rem;
}

body.xi-article-page .xi-recent-row:hover {
    background: rgba(102, 126, 234, 0.06);
}

body.xi-article-page .text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}