/* ==========================================================================
   SC Blog HTML — style.css · Hak cipta © 2026 sharecode.id (https://sharecode.id)
   Template blog profesional + slot Google AdSense (Bootstrap 5).

   Daftar isi:
   01. Design tokens (CSS variables)
   02. Base & typography
   03. Utilities kecil
   04. Topbar
   05. Header, navigasi, search toggle, offcanvas
   06. Komponen kartu artikel (post-card, post-list, post-mini)
   07. Featured / hero
   08. Section heading & kategori
   09. Sidebar & widget
   10. Ad slots (Google AdSense)
   11. Halaman artikel (header, konten, TOC, author box, share)
   12. Halaman statis, form, pagination
   13. Newsletter & footer
   14. Back to top & reading progress
   15. Print
   ========================================================================== */

/* 01. DESIGN TOKENS ------------------------------------------------------- */
:root {
  --sc-primary: #2563EB;
  --sc-primary-dark: #1D4ED8;
  --sc-primary-soft: #EFF6FF;
  --sc-heading: #111827;
  --sc-body: #374151;
  --sc-muted: #6B7280;
  --sc-bg: #FFFFFF;
  --sc-bg-light: #F8FAFC;
  --sc-border: #E5E7EB;

  --sc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --sc-radius: 12px;
  --sc-radius-sm: 8px;
  --sc-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 4px 16px rgba(17, 24, 39, .06);
  --sc-header-h: 68px;          /* tinggi header sticky (dipakai offset scroll & sticky sidebar) */
  --sc-article-width: 760px;    /* lebar maksimal kolom baca artikel */

  /* Sinkronkan variabel Bootstrap dengan palet template */
  --bs-primary: var(--sc-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--sc-primary);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: var(--sc-primary-dark);
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-body-font-family: var(--sc-font);
  --bs-body-color: var(--sc-body);
  --bs-border-color: var(--sc-border);
  --bs-emphasis-color: var(--sc-heading);
}

/* 02. BASE & TYPOGRAPHY --------------------------------------------------- */
html { scroll-padding-top: calc(var(--sc-header-h) + 16px); }
body {
  font-family: var(--sc-font);
  color: var(--sc-body);
  background: var(--sc-bg);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* pengaman terakhir: tidak boleh ada horizontal scroll */
}
h1, h2, h3, h4, h5, h6 { color: var(--sc-heading); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
a { color: var(--sc-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--sc-primary-dark); }
img { max-width: 100%; height: auto; }
::selection { background: #BFDBFE; color: var(--sc-heading); }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }

.btn-primary {
  --bs-btn-bg: var(--sc-primary); --bs-btn-border-color: var(--sc-primary);
  --bs-btn-hover-bg: var(--sc-primary-dark); --bs-btn-hover-border-color: var(--sc-primary-dark);
  --bs-btn-active-bg: var(--sc-primary-dark); --bs-btn-active-border-color: var(--sc-primary-dark);
  --bs-btn-disabled-bg: var(--sc-primary); --bs-btn-disabled-border-color: var(--sc-primary);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--sc-primary); --bs-btn-border-color: var(--sc-primary);
  --bs-btn-hover-bg: var(--sc-primary); --bs-btn-hover-border-color: var(--sc-primary);
  --bs-btn-active-bg: var(--sc-primary-dark); --bs-btn-active-border-color: var(--sc-primary-dark);
  font-weight: 600;
}
.form-control:focus, .form-select:focus { border-color: #93C5FD; box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); }

/* 03. UTILITIES ----------------------------------------------------------- */
.text-muted-sc { color: var(--sc-muted) !important; }
.bg-light-sc { background: var(--sc-bg-light); }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: var(--sc-primary); color: #fff; padding: .5rem 1rem; border-radius: var(--sc-radius-sm);
}
.skip-link:focus { top: 1rem; color: #fff; }
.section { padding-block: 2.5rem; }
.ratio-thumb { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; background: var(--sc-bg-light); }
.badge-cat {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sc-primary); background: var(--sc-primary-soft); padding: .3rem .6rem; border-radius: 999px;
}
.badge-cat:hover { color: var(--sc-primary-dark); background: #DBEAFE; }
.post-meta { font-size: .825rem; color: var(--sc-muted); display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; }
.post-meta i { margin-right: .25rem; }
.post-meta a { color: var(--sc-muted); }
.post-meta a:hover { color: var(--sc-primary); }

/* 04. TOPBAR -------------------------------------------------------------- */
.topbar { background: var(--sc-bg-light); border-bottom: 1px solid var(--sc-border); font-size: .8rem; color: var(--sc-muted); }
.topbar a { color: var(--sc-muted); }
.topbar a:hover { color: var(--sc-primary); }
.topbar .social a { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; }
.topbar .social a:hover { background: var(--sc-primary-soft); }

/* 05. HEADER -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--sc-border);
  /* Catatan: jangan pakai backdrop-filter/transform di sini — akan mengurung
     offcanvas (position: fixed) di dalam header. */
}
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(17, 24, 39, .06); }
.site-header .navbar { min-height: var(--sc-header-h); padding-block: .5rem; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--sc-heading); }
.brand:hover { color: var(--sc-heading); }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand-name { display: block; font-weight: 800; font-size: 1.15rem; line-height: 1.1; letter-spacing: -.02em; }
.brand-tagline { display: block; font-size: .72rem; color: var(--sc-muted); font-weight: 500; }

.site-header .nav-link { color: var(--sc-heading); font-weight: 600; font-size: .925rem; padding-inline: .7rem !important; border-radius: var(--sc-radius-sm); }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--sc-primary); }
.site-header .nav-link.active { color: var(--sc-primary); }
.site-header .dropdown-menu { border-color: var(--sc-border); box-shadow: var(--sc-shadow); border-radius: var(--sc-radius); padding: .4rem; font-size: .9rem; }
.site-header .dropdown-item { border-radius: 6px; padding: .45rem .75rem; }
.site-header .dropdown-item:active { background: var(--sc-primary); }
.btn-icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--sc-border); background: #fff; color: var(--sc-heading); font-size: 1.05rem;
}
.btn-icon:hover, .btn-icon[aria-expanded="true"] { color: var(--sc-primary); border-color: #BFDBFE; background: var(--sc-primary-soft); }

/* Panel pencarian di bawah header (toggle) */
.search-panel { border-top: 1px solid var(--sc-border); background: #fff; }
.search-panel .form-control { height: 48px; }

/* Offcanvas mobile/tablet (< 992px) */
@media (max-width: 991.98px) {
  .offcanvas-lg { max-width: 86vw; }
  .offcanvas-lg .nav-link { padding: .7rem 0 !important; border-bottom: 1px solid var(--sc-border); border-radius: 0; }
  .offcanvas-lg .dropdown-menu { border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; margin: 0; }
}
@media (min-width: 992px) {
  /* Desktop: dropdown terbuka saat hover (klik tetap berfungsi) */
  .site-header .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}

/* 06. KARTU ARTIKEL ------------------------------------------------------- */
.post-title { font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin: .5rem 0; }
.post-title a { color: var(--sc-heading); }
.post-title a:hover { color: var(--sc-primary); }
.post-excerpt { color: var(--sc-body); font-size: .925rem; margin-bottom: .6rem; }
.post-thumb { display: block; overflow: hidden; border-radius: var(--sc-radius); background: var(--sc-bg-light); }
.post-thumb img { transition: transform .35s ease; }
.post-thumb:hover img { transform: scale(1.03); }

/* Kartu vertikal */
.post-card { height: 100%; }
.post-card .post-body { padding-top: .9rem; }

/* List horizontal (Latest Articles) — hemat ruang di desktop */
.post-list { display: grid; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--sc-border); }
.post-list:first-child { padding-top: 0; }
.post-list .post-title { font-size: 1.15rem; margin-top: .4rem; }
@media (min-width: 576px) {
  .post-list { grid-template-columns: 240px 1fr; gap: 1.25rem; align-items: start; }
}
@media (min-width: 1200px) {
  .post-list { grid-template-columns: 280px 1fr; }
}

/* Mini (sidebar populer, artikel pendukung) */
.post-mini { display: flex; gap: .85rem; align-items: flex-start; }
.post-mini + .post-mini { margin-top: 1rem; }
.post-mini .post-thumb { flex: 0 0 96px; border-radius: var(--sc-radius-sm); }
.post-mini .post-thumb img { width: 96px; height: 64px; object-fit: cover; }
.post-mini .post-title { font-size: .925rem; margin: 0 0 .25rem; }

/* 07. FEATURED ------------------------------------------------------------ */
.featured-main { position: relative; border-radius: var(--sc-radius); overflow: hidden; background: #0F172A; height: 100%; min-height: 320px; display: flex; }
.featured-main > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-main .featured-overlay {
  position: relative; margin-top: auto; padding: 1.5rem; width: 100%;
  background: linear-gradient(to top, rgba(15, 23, 42, .92) 0%, rgba(15, 23, 42, .65) 60%, rgba(15, 23, 42, 0) 100%);
  color: #E5E7EB;
}
.featured-main .featured-title { font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem); margin: .6rem 0; }
.featured-main .featured-title a { color: #fff; }
.featured-main .featured-title a:hover { color: #BFDBFE; }
.featured-main .post-meta, .featured-main .post-meta a { color: #CBD5E1; }
.featured-main .badge-cat { background: var(--sc-primary); color: #fff; }
.featured-main p { color: #CBD5E1; margin-bottom: .75rem; }
@media (min-width: 992px) { .featured-main { min-height: 460px; } .featured-main .featured-overlay { padding: 2rem; } }
.featured-side .post-title { font-size: 1.1rem; }

/* 08. SECTION HEADING ----------------------------------------------------- */
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--sc-border); }
.section-heading h2 {
  font-size: 1.2rem; margin: 0; padding-bottom: .65rem; position: relative;
}
.section-heading h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 2px; background: var(--sc-primary); }
.section-heading .view-all { font-size: .85rem; font-weight: 600; padding-bottom: .65rem; white-space: nowrap; }
.category-block + .category-block { margin-top: 2.5rem; }

/* Page header (kategori, pencarian, halaman statis) */
.page-hero { background: var(--sc-bg-light); border-bottom: 1px solid var(--sc-border); padding-block: 2rem; }
.page-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); margin-bottom: .5rem; }
.page-hero p { color: var(--sc-muted); max-width: 680px; margin: 0; }
.breadcrumb { font-size: .825rem; margin-bottom: .75rem; --bs-breadcrumb-divider-color: var(--sc-muted); --bs-breadcrumb-item-active-color: var(--sc-muted); }
.breadcrumb a { color: var(--sc-muted); }
.breadcrumb a:hover { color: var(--sc-primary); }

/* 09. SIDEBAR & WIDGET ---------------------------------------------------- */
.widget { margin-bottom: 2rem; }
.widget-title { font-size: 1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--sc-border); position: relative; }
.widget-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 36px; height: 2px; background: var(--sc-primary); }
.popular-list { list-style: none; padding: 0; margin: 0; counter-reset: pop; }
.popular-list li { counter-increment: pop; display: flex; gap: .75rem; align-items: flex-start; }
.popular-list li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--sc-border); }
.popular-list li::before {
  content: counter(pop); flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--sc-primary); background: var(--sc-primary-soft);
}
.popular-list .post-mini { flex: 1; min-width: 0; }
.popular-list .post-mini .post-thumb { flex-basis: 72px; }
.popular-list .post-mini .post-thumb img { width: 72px; height: 54px; }
.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-list a { display: flex; justify-content: space-between; padding: .5rem 0; color: var(--sc-body); border-bottom: 1px solid var(--sc-border); font-weight: 500; }
.cat-list a:hover { color: var(--sc-primary); }
.cat-list .count { font-size: .75rem; color: var(--sc-muted); background: var(--sc-bg-light); border-radius: 999px; padding: .1rem .55rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag-cloud a { font-size: .8rem; color: var(--sc-body); background: var(--sc-bg-light); border: 1px solid var(--sc-border); padding: .3rem .7rem; border-radius: 999px; }
.tag-cloud a:hover { color: var(--sc-primary); border-color: #BFDBFE; background: var(--sc-primary-soft); }

/* Sidebar sticky (opsional): aktif hanya di desktop, tidak menempelkan iklan */
@media (min-width: 992px) {
  .sidebar-sticky { position: sticky; top: calc(var(--sc-header-h) + 24px); }
}

/* 10. AD SLOTS (GOOGLE ADSENSE) -------------------------------------------
   Semua slot memakai .ad-slot + satu tipe ukuran.
   - Ruang (min-height) dipesan sejak awal untuk mencegah CLS saat iklan dimuat.
   - Lebar selalu max-width:100% -> tidak pernah memicu horizontal scroll.
   - Nonaktifkan semua slot: tambahkan class "ads-off" pada <html>
     atau set SC_ADS_CONFIG.enabled = false di assets/js/ads.js.
   - Placeholder sengaja bergaya "kotak pengembangan" (garis putus-putus),
     tidak meniru tampilan iklan sungguhan.
   ------------------------------------------------------------------------ */
.ad-slot {
  --ad-min-h: 250px;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 100%;
  margin-block: 2rem;
  clear: both;
  overflow: hidden;            /* iklan responsif tidak boleh melebar keluar kontainer */
}
.ad-label {
  display: block; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: #9CA3AF; margin-bottom: .35rem; line-height: 1;
}
.ad-placeholder,
.ad-slot .adsbygoogle {
  width: 100%; min-height: var(--ad-min-h);
}
.ad-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  background: #F3F4F6;
  border: 1px dashed #D1D5DB; border-radius: var(--sc-radius-sm);
  color: #9CA3AF; font-size: .8rem; text-align: center; padding: .5rem;
}
.ad-placeholder span { font-weight: 600; color: #6B7280; }
.ad-placeholder small { font-size: .72rem; }
.ad-slot .adsbygoogle { display: block; }

/* Leaderboard header: 728x90 di desktop, responsif di tablet/mobile */
.ad-leaderboard { --ad-min-h: 100px; margin-block: 1.25rem; }
.ad-leaderboard .ad-placeholder, .ad-leaderboard .adsbygoogle { max-width: 728px; }
@media (min-width: 768px) { .ad-leaderboard { --ad-min-h: 90px; } }

/* Rectangle 300x250 (sidebar, antar list) */
.ad-rectangle { --ad-min-h: 250px; }
.ad-rectangle .ad-placeholder, .ad-rectangle .adsbygoogle { max-width: 300px; }

/* Responsive display ad umum */
.ad-responsive { --ad-min-h: 250px; }
@media (min-width: 768px) { .ad-responsive { --ad-min-h: 200px; } }

/* In-article: tinggi proporsional, ada garis pemisah halus agar jelas bukan bagian konten */
.ad-in-article { --ad-min-h: 250px; padding-block: 1rem; border-block: 1px solid var(--sc-border); }
@media (min-width: 768px) { .ad-in-article { --ad-min-h: 220px; } }

/* Sticky bottom (mobile). Default tersembunyi; ditampilkan oleh ads.js hanya
   bila SC_ADS_CONFIG.stickyMobile.enabled = true. */
.ad-sticky-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  margin: 0; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .98); border-top: 1px solid var(--sc-border);
  box-shadow: 0 -4px 16px rgba(17, 24, 39, .08);
  --ad-min-h: 50px;
  display: none;
}
.ad-sticky-bottom.is-visible { display: flex; }
.ad-sticky-bottom .ad-label { margin-bottom: .25rem; }
.ad-sticky-bottom .ad-placeholder, .ad-sticky-bottom .adsbygoogle { max-width: 320px; height: 50px; min-height: 50px; }
.ad-sticky-close {
  position: absolute; top: -14px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--sc-border); background: #fff; color: var(--sc-body);
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
  box-shadow: var(--sc-shadow);
}
/* Saat sticky ad tampil, beri ruang di bawah halaman agar konten/tombol tidak tertutup */
body.has-sticky-ad { padding-bottom: 84px; }
body.has-sticky-ad .back-to-top { bottom: 96px; }
@media (min-width: 768px) {
  .ad-sticky-bottom, .ad-sticky-bottom.is-visible { display: none !important; }
  body.has-sticky-ad { padding-bottom: 0; }
}

/* Mode nonaktif via CSS / JS */
html.ads-off .ad-slot,
.ad-slot.is-disabled { display: none !important; }

/* 11. HALAMAN ARTIKEL ----------------------------------------------------- */
.article-header { max-width: var(--sc-article-width); }
.article-title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.22; letter-spacing: -.02em; margin: .9rem 0 .75rem; }
.article-subtitle { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--sc-muted); line-height: 1.6; margin-bottom: 1.25rem; }
.article-byline { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; padding-block: 1rem; border-block: 1px solid var(--sc-border); }
.article-byline .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.article-byline .author-name { font-weight: 700; color: var(--sc-heading); }
.article-figure { margin: 1.5rem 0 0; }
.article-figure img { border-radius: var(--sc-radius); width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article-figure figcaption, .article-content figcaption { font-size: .825rem; color: var(--sc-muted); margin-top: .5rem; text-align: center; }

/* Share bar */
.share-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.share-bar .share-label { font-size: .8rem; color: var(--sc-muted); font-weight: 600; }
.share-bar a, .share-bar button { width: 36px; height: 36px; font-size: .95rem; }

/* Konten artikel: fokus keterbacaan */
.article-content {
  max-width: var(--sc-article-width);
  font-size: 1.0625rem;  /* 17px mobile */
  line-height: 1.8;
  color: var(--sc-body);
  overflow-wrap: break-word;
}
@media (min-width: 992px) { .article-content { font-size: 1.125rem; } } /* 18px desktop */
.article-content > * + * { margin-top: 1.25em; }
.article-content p { margin-bottom: 0; }
.article-content h2 { font-size: 1.6em; margin-top: 2.2em; margin-bottom: 0; line-height: 1.3; }
.article-content h3 { font-size: 1.25em; margin-top: 1.8em; margin-bottom: 0; }
.article-content h2 + *, .article-content h3 + * { margin-top: .75em; }
.article-content a { text-decoration: underline; text-decoration-color: #BFDBFE; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.article-content a:hover { text-decoration-color: var(--sc-primary); }
.article-content ul, .article-content ol { padding-left: 1.4em; margin-bottom: 0; }
.article-content li + li { margin-top: .4em; }
.article-content li::marker { color: var(--sc-primary); font-weight: 600; }
.article-content strong { color: var(--sc-heading); }
.article-content blockquote {
  margin-inline: 0; padding: 1rem 1.25rem; border-left: 4px solid var(--sc-primary);
  background: var(--sc-bg-light); border-radius: 0 var(--sc-radius-sm) var(--sc-radius-sm) 0;
  font-size: 1.05em; font-style: italic; color: var(--sc-heading);
}
.article-content blockquote p { margin: 0; }
.article-content blockquote cite { display: block; margin-top: .5rem; font-size: .85em; font-style: normal; color: var(--sc-muted); }
.article-content figure { margin-inline: 0; }
.article-content figure img { border-radius: var(--sc-radius); border: 1px solid var(--sc-border); }
.article-content code { font-family: var(--sc-font-mono); font-size: .85em; color: #BE185D; background: #FDF2F8; padding: .15em .4em; border-radius: 5px; }
.article-content .table-responsive { border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); }
.article-content table { font-size: .9em; margin: 0; }
.article-content table th { background: var(--sc-bg-light); color: var(--sc-heading); white-space: nowrap; }
.article-content table th, .article-content table td { padding: .7rem .9rem; }

/* Code block + tombol salin */
.code-block { position: relative; }
.code-block pre {
  margin: 0; padding: 2.6rem 1.1rem 1.1rem; background: #0F172A; color: #E2E8F0;
  border-radius: var(--sc-radius); font-size: .85em; line-height: 1.7; overflow-x: auto;
}
.code-block pre code { color: inherit; background: none; padding: 0; font-size: inherit; }
.code-block .code-lang { position: absolute; top: .6rem; left: 1rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; font-family: var(--sc-font); }
.code-block .code-copy {
  position: absolute; top: .45rem; right: .5rem; font-size: .75rem; color: #CBD5E1;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; padding: .2rem .55rem; line-height: 1.4;
}
.code-block .code-copy:hover { color: #fff; background: rgba(255, 255, 255, .16); }

/* Kotak informasi penting */
.callout { display: flex; gap: .85rem; padding: 1rem 1.15rem; border-radius: var(--sc-radius-sm); border: 1px solid; font-size: .95em; }
.callout > i { font-size: 1.25rem; line-height: 1.5; }
.callout p { margin: 0; }
.callout-title { display: block; font-weight: 700; margin-bottom: .2rem; }
.callout-info { background: var(--sc-primary-soft); border-color: #BFDBFE; color: #1E3A8A; }
.callout-info .callout-title, .callout-info strong { color: #1E3A8A; }
.callout-warning { background: #FFFBEB; border-color: #FDE68A; color: #78350F; }
.callout-warning .callout-title, .callout-warning strong { color: #78350F; }
.callout-success { background: #ECFDF5; border-color: #A7F3D0; color: #064E3B; }
.callout-success .callout-title, .callout-success strong { color: #064E3B; }

/* Table of Contents */
.toc { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-bg-light); font-size: .9rem; }
.toc-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: none; border: 0; padding: .9rem 1.1rem; font-weight: 700; color: var(--sc-heading); text-align: left;
}
.toc-toggle .bi-chevron-down { transition: transform .2s ease; }
.toc-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.toc-title { font-weight: 700; color: var(--sc-heading); padding: .9rem 1.1rem 0; margin: 0; font-size: .95rem; }
.toc-list, .toc-list ol { list-style: none; margin: 0; padding: 0; }
.toc-list { padding: .4rem 1.1rem 1rem; }
.toc-list ol { padding-left: .9rem; }
.toc-list a { display: block; padding: .3rem 0 .3rem .7rem; color: var(--sc-body); border-left: 2px solid transparent; line-height: 1.45; }
.toc-list a:hover { color: var(--sc-primary); }
.toc-list a.is-active { color: var(--sc-primary); border-left-color: var(--sc-primary); font-weight: 600; }
.toc-sidebar .toc-list { max-height: calc(100vh - var(--sc-header-h) - 140px); overflow-y: auto; }

/* Tags + author box */
.article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.author-box { display: flex; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); background: var(--sc-bg-light); }
.author-box img { width: 88px; height: 88px; border-radius: 50%; flex: 0 0 88px; object-fit: cover; }
.author-box h3 { font-size: 1.1rem; margin-bottom: .15rem; }
.author-box .author-role { font-size: .8rem; color: var(--sc-muted); margin-bottom: .6rem; }
.author-box p { font-size: .925rem; margin-bottom: .75rem; }
.author-social { display: flex; gap: .4rem; }
.author-social a { width: 34px; height: 34px; font-size: .9rem; }
@media (max-width: 575.98px) { .author-box { flex-direction: column; } }

/* Navigasi artikel sebelumnya / berikutnya */
.post-nav a { display: block; height: 100%; padding: 1rem 1.15rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius); color: var(--sc-heading); font-weight: 600; }
.post-nav a:hover { border-color: #BFDBFE; background: var(--sc-primary-soft); }
.post-nav small { display: block; color: var(--sc-muted); font-weight: 500; margin-bottom: .2rem; }

/* 12. HALAMAN STATIS, FORM, PAGINATION ------------------------------------ */
.prose { max-width: var(--sc-article-width); font-size: 1.0625rem; line-height: 1.8; }
.prose h2 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: .75rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; }
.info-card { border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 1.5rem; height: 100%; background: #fff; }
.info-card .icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-primary-soft); color: var(--sc-primary); font-size: 1.35rem; margin-bottom: 1rem; }
.info-card h3 { font-size: 1.05rem; }
.team-card { text-align: center; }
.team-card img { width: 96px; height: 96px; border-radius: 50%; margin-bottom: .85rem; }
.pagination { --bs-pagination-color: var(--sc-body); --bs-pagination-hover-color: var(--sc-primary); --bs-pagination-active-bg: var(--sc-primary); --bs-pagination-active-border-color: var(--sc-primary); --bs-pagination-border-color: var(--sc-border); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15); gap: .35rem; flex-wrap: wrap; }
.pagination .page-link { border-radius: var(--sc-radius-sm) !important; min-width: 40px; text-align: center; font-weight: 600; }
.search-highlight { background: #FEF08A; color: inherit; padding: 0 .1em; border-radius: 3px; }
.empty-state { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--sc-border); border-radius: var(--sc-radius); }
.empty-state i { font-size: 2.5rem; color: var(--sc-muted); }

/* 13. NEWSLETTER & FOOTER ------------------------------------------------- */
.newsletter { background: linear-gradient(135deg, var(--sc-primary-dark), var(--sc-primary)); color: #DBEAFE; border-radius: calc(var(--sc-radius) * 1.5); padding: 2rem 1.5rem; }
.newsletter h2 { color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.newsletter .form-control { height: 50px; border: 0; }
.newsletter .btn { height: 50px; background: var(--sc-heading); border-color: var(--sc-heading); color: #fff; }
.newsletter .btn:hover { background: #000; }
.newsletter .form-text, .newsletter .form-text a { color: #BFDBFE; }
.newsletter .invalid-feedback { color: #FEE2E2; }
.newsletter .newsletter-success { background: rgba(255, 255, 255, .12); border-radius: var(--sc-radius-sm); padding: .75rem 1rem; color: #fff; }
@media (min-width: 992px) { .newsletter { padding: 3rem; } }
.widget-newsletter { background: var(--sc-bg-light); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); padding: 1.25rem; }

.site-footer { background: #0F172A; color: #94A3B8; font-size: .9rem; margin-top: 3rem; }
.site-footer h2 { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.site-footer a { color: #CBD5E1; }
.site-footer a:hover { color: #fff; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-tagline { color: #94A3B8; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li + li { margin-top: .5rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); color: #CBD5E1; }
.footer-social a:hover { background: var(--sc-primary); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); font-size: .825rem; }

/* 14. BACK TO TOP & READING PROGRESS -------------------------------------- */
.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1010;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--sc-primary); color: #fff; box-shadow: var(--sc-shadow);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--sc-primary-dark); }
.reading-progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--sc-primary); transform-origin: 0 50%; transform: scaleX(0); }
.toast-container { z-index: 1090; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 15. PRINT --------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .ad-slot, .sidebar, .site-footer, .newsletter, .share-bar, .back-to-top, .toc, .related-posts, .post-nav { display: none !important; }
  .article-content { max-width: none; font-size: 12pt; }
  .col-lg-8 { width: 100% !important; }
}
.search-form-lg { max-width: 640px; }