/* ==========================================================================
   Grup "articles": artikel, artikel-details, berita (E-Magazine), berita-details
   ========================================================================== */

/* ---------- Kartu daftar artikel ---------- */
.article-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; color: inherit; }
.article-card:hover { text-decoration: none; color: inherit; }
.article-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: flex-end; padding: 1rem 1.15rem; color: #fff; isolation: isolate;
    background: linear-gradient(135deg, var(--iv-navy) 0%, var(--iv-navy-2) 55%, var(--iv-blue) 100%); }
.article-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.article-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,38,75,0) 40%, rgba(18,38,75,.55) 100%); }
.article-cover .cover-icon { position: absolute; right: -.5rem; top: -.75rem; font-size: 6.5rem; line-height: 1; opacity: .12; z-index: -1; transition: transform .3s ease; }
.article-card:hover .cover-icon { transform: rotate(-6deg) scale(1.05); }
.article-cover .badge-cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-card .card-body { display: flex; flex-direction: column; padding: 1.25rem 1.35rem 1.4rem; flex: 1; }
.article-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8125rem; color: var(--iv-muted); margin-bottom: .6rem; }
.article-meta i { margin-right: .3rem; color: var(--iv-blue); }
.article-card .card-title { font-size: 1.1rem; line-height: 1.35; margin-bottom: .6rem; overflow-wrap: anywhere; }
.article-card .card-text { color: var(--iv-muted); font-size: .925rem; flex: 1; margin-bottom: 1rem; overflow-wrap: anywhere; }
.article-card .read-more { font-weight: 600; font-size: .9rem; color: var(--iv-blue); display: inline-flex; align-items: center; gap: .35rem; }
.article-card:hover .read-more i { transform: translateX(3px); }
.article-card .read-more i { transition: transform .15s; }

.article-card .card-text.clamp-4 { max-height: 6.6em; }
/* artikel terbaru (pertama) ditampilkan melebar */
@media (min-width: 992px) {
    .article-card-featured { flex-direction: row; }
    .article-card-featured .article-cover { flex: 0 0 46%; aspect-ratio: auto; min-height: 300px; padding: 1.5rem; }
    .article-card-featured .cover-icon { font-size: 11rem; right: 1rem; top: 1rem; }
    .article-card-featured .card-body { padding: 2rem 2.25rem; justify-content: center; }
    .article-card-featured .card-title { font-size: 1.6rem; }
    .article-card-featured .card-text { flex: 0 0 auto; font-size: 1rem; }
}

/* skeleton saat memuat */
.skeleton { background: linear-gradient(90deg, #eef1f6 25%, #f6f8fb 50%, #eef1f6 75%); background-size: 200% 100%; animation: iv-shimmer 1.2s infinite; border-radius: 8px; }
.skeleton-cover { aspect-ratio: 16 / 9; border-radius: 0; }
.skeleton-line { height: .85rem; margin-bottom: .6rem; }
@keyframes iv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Pagination (paginationjs) & tombol halaman ---------- */
.paginationjs { display: flex; justify-content: center; margin-top: 2.5rem; }
.paginationjs-pages ul, .iv-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.paginationjs-pages li > a, .iv-pager button { min-width: 42px; height: 42px; padding: 0 .85rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--iv-line); background: #fff; color: var(--iv-navy); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .15s; }
.paginationjs-pages li > a:hover, .iv-pager button:hover:not(:disabled) { border-color: var(--iv-blue); color: var(--iv-blue); text-decoration: none; }
.paginationjs-pages li.active > a, .iv-pager button.active { background: var(--iv-blue); border-color: var(--iv-blue); color: #fff; }
.paginationjs-pages li.disabled > a, .iv-pager button:disabled { opacity: .45; cursor: not-allowed; }
 @media (max-width: 575.98px) {
    .paginationjs-pages ul, .iv-pager { gap: .25rem; }
    .paginationjs-pages li > a, .iv-pager button { min-width: 36px; height: 36px; padding: 0 .55rem; font-size: .85rem; }
}
.paginationjs-pages li.paginationjs-ellipsis > a { border-color: transparent; background: transparent; cursor: default; }

/* ---------- Halaman detail ---------- */
.article-hero h1 { max-width: 52rem; overflow-wrap: anywhere; }
.article-hero .article-meta { color: rgba(255,255,255,.8); font-size: .9rem; margin: 1rem 0 0; }
.article-hero .article-meta i { color: #9cc6ff; }
.article-layout { background: var(--iv-surface); padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 4.5rem); }
.article-main { background: #fff; border: 1px solid var(--iv-line); border-radius: var(--iv-radius); box-shadow: var(--iv-shadow-sm); padding: clamp(1.25rem, 4vw, 2.75rem); }
.article-main .reading { max-width: 760px; margin: 0 auto; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; margin-bottom: 1.25rem; }
.article-figure { margin: 0 0 1.75rem; }
.article-figure img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--iv-radius-sm); }
.article-footer { border-top: 1px solid var(--iv-line); margin-top: 2.25rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; }

/* Konten HTML dari DB: normalisasi gaya inline & batasi lebar elemen */
.article-body { font-size: 1.0625rem; line-height: 1.8; overflow-wrap: break-word; word-wrap: break-word; }
.article-body::after { content: ""; display: table; clear: both; }
.article-body p, .article-body span, .article-body font, .article-body li, .article-body div, .article-body td, .article-body th, .article-body a, .article-body em, .article-body strong, .article-body b, .article-body i {
    font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.article-body p { margin: 0 0 1.15rem !important; text-align: left !important; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { font-family: inherit !important; margin: 1.75rem 0 .75rem; line-height: 1.3; }
.article-body h1 { font-size: 1.6rem; } .article-body h2 { font-size: 1.4rem; } .article-body h3 { font-size: 1.2rem; } .article-body h4 { font-size: 1.05rem; }
.article-body [style*="width"], .article-body [width] { max-width: 100% !important; }
.article-body img { max-width: 100% !important; height: auto !important; display: block; margin: 1.25rem auto; border-radius: var(--iv-radius-sm); }
.article-body iframe, .article-body video, .article-body embed, .article-body object { max-width: 100% !important; width: 100%; aspect-ratio: 16 / 9; height: auto !important; border: 0; border-radius: var(--iv-radius-sm); }
.article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.25rem 0; font-size: .925rem; -webkit-overflow-scrolling: touch; }
.article-body td, .article-body th { border: 1px solid var(--iv-line); padding: .45rem .65rem; }
.article-body pre { white-space: pre-wrap; max-width: 100%; overflow-x: auto; }
.article-body blockquote { border-left: 4px solid var(--iv-blue); background: var(--iv-blue-soft); padding: 1rem 1.25rem; border-radius: 0 var(--iv-radius-sm) var(--iv-radius-sm) 0; margin: 1.5rem 0; }
.article-body ul, .article-body ol { padding-left: 1.3rem; }
@media (max-width: 575.98px) {
    .article-body { font-size: 1rem; line-height: 1.75; }
    .article-body [style*="float"], .article-body [align] { float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---------- Sidebar ---------- */
.side-card { background: #fff; border: 1px solid var(--iv-line); border-radius: var(--iv-radius); box-shadow: var(--iv-shadow-sm); padding: 1.25rem; }
.side-card + .side-card { margin-top: 1.5rem; }
.side-card h2 { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--iv-muted); margin: 0 0 .75rem; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li + li { border-top: 1px solid var(--iv-line); }
.side-list a { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .25rem; color: var(--iv-ink); }
.side-list a:hover { text-decoration: none; color: var(--iv-blue); }
.side-list .side-title { display: block; font-weight: 600; font-size: .925rem; line-height: 1.4; overflow-wrap: anywhere; }
.side-list .side-sub { display: block; font-size: .8rem; color: var(--iv-muted); margin-top: .2rem; }
.side-list .side-thumb { flex: 0 0 72px; width: 72px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--iv-surface); }
.side-list .side-num { flex: 0 0 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--iv-blue-soft); color: var(--iv-blue); font-weight: 700; font-size: .8rem; }
.side-ad img { width: 100%; border-radius: var(--iv-radius-sm); display: block; }
@media (min-width: 992px) { .side-sticky { position: sticky; top: calc(var(--iv-header-h) + 1rem); } }

/* ---------- E-Magazine ---------- */
.mag-intro { max-width: 52rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.mag-intro p { color: var(--iv-muted); }
.brand-listed { font-weight: 800; letter-spacing: -.01em; }
.brand-listed .lst { color: var(--iv-down); }
.brand-listed .id { color: var(--iv-navy); }
.mag-intro > .brand-listed { font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1; display: inline-block; margin-bottom: .75rem; }
.mag-intro h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-bottom: 1rem; }
.mag-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.mag-cover { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #eaeef4; border-bottom: 1px solid var(--iv-line); }
.mag-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.mag-card:hover .mag-cover img { transform: scale(1.04); }
.mag-card .card-body { display: flex; flex-direction: column; text-align: center; padding: 1.25rem 1.25rem 1.5rem; flex: 1; }
.mag-card .eyebrow { margin-bottom: .35rem; }
.mag-card .card-text { color: var(--iv-muted); font-size: .9rem; flex: 1; margin-bottom: 1.1rem; }
.mag-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.iv-pager { margin-top: 2.5rem; }

/* ---------- Status kosong / error ---------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--iv-muted); }
.empty-state i { font-size: 2.5rem; color: var(--iv-blue); display: block; margin-bottom: .75rem; }