/* Blog: cards, index grid, article layout, prose. Uses tokens from premium.css.
   Dimuat HANYA oleh halaman blog/ (dibangun _blog/build.py). Naikkan BLOG_CSS_V di
   skrip itu kalau berkas ini berubah. */
.postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .postgrid { grid-template-columns: 1fr; } }

.postcard { background: var(--lt-surface); border: 1px solid var(--lt-line); border-radius: 14px; transition: border-color .18s ease, transform .18s ease; }
.postcard:hover { border-color: var(--lt-line-2); transform: translateY(-2px); }
.postcard__link { display: block; padding: 24px; color: inherit; text-decoration: none; }
.postcard__tags { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.postcard__tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pm-accent); background: rgba(59,107,255,.08); border-radius: 999px; padding: 3px 10px; }
.postcard__title { font-family: var(--font-display); font-size: 19px; line-height: 1.3; color: var(--lt-fg); margin-bottom: 8px; font-weight: 600; }
.postcard__desc { font-size: 14px; color: var(--lt-fg-2); line-height: 1.6; margin-bottom: 16px; }
.postcard__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--lt-fg-3); }
.postcard__more { color: var(--pm-accent); font-weight: 600; }

/* article header meta */
.postmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; font-size: 13.5px; color: var(--pm-fg-2); }
.postmeta__tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* article body layout: sticky TOC + content */
.article-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; gap: 24px; } }
.toc { position: sticky; top: 90px; font-size: 13.5px; }
@media (max-width: 900px) { .toc { position: static; } }
.toc__title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-fg-3); margin-bottom: 12px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.toc a { color: var(--lt-fg-2); text-decoration: none; border-left: 2px solid var(--lt-line); padding-left: 12px; display: block; line-height: 1.4; }
.toc a:hover { color: var(--pm-accent); border-left-color: var(--pm-accent); }

/* Penanda posisi baca (assets/blog.js menempelkan .is-active).
   Warna DAN tebal huruf dibedakan sekaligus, bukan warna saja: pembaca yang
   sulit membedakan warna tetap bisa melihat bagian mana yang sedang dibaca. */
.toc a.is-active { color: var(--pm-accent); font-weight: 600;
  border-left-color: var(--pm-accent); border-left-width: 2px; }

.article-body { max-width: 720px; }

/* key takeaways */
.takeaways { background: var(--lt-bg-2); border: 1px solid var(--lt-line); border-radius: 14px; padding: 22px 26px; margin-bottom: 34px; }
.takeaways__title { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-accent); margin-bottom: 12px; }
.takeaways ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.takeaways li { color: var(--lt-fg); font-size: 15px; line-height: 1.55; }

/* prose */
.prose { color: var(--lt-fg-2); font-size: 17px; line-height: 1.75; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-family: var(--font-display); font-size: 26px; line-height: 1.25; color: var(--lt-fg); font-weight: 600; margin-top: 44px; letter-spacing: -.01em; }
.prose h3 { font-family: var(--font-display); font-size: 20px; color: var(--lt-fg); font-weight: 600; margin-top: 32px; }
.prose strong { color: var(--lt-fg); font-weight: 600; }
.prose a { color: var(--pm-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 24px; display: grid; gap: 10px; }
.prose li { line-height: 1.7; }
.prose em { color: var(--lt-fg); }
.prose code { background: var(--lt-bg-2); border: 1px solid var(--lt-line); border-radius: 6px; padding: 1px 6px; font-size: .9em; }

/* faq + sources + author on article */
.article-faq, .article-sources, .related { margin-top: 48px; }
.article-faq h2, .article-sources h2, .related h2 { font-family: var(--font-display); color: var(--lt-fg); font-weight: 600; margin-bottom: 18px; }
.article-sources ul { padding-left: 20px; }
.article-sources a { color: var(--pm-accent); }
.authorbio { margin-top: 44px; padding: 24px 26px; border: 1px solid var(--lt-line); border-radius: 14px; background: var(--lt-surface); }
.authorbio__title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lt-fg-3); margin-bottom: 10px; }
.authorbio__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--lt-fg); }
.authorbio__role { font-size: 13px; color: var(--pm-accent); margin-bottom: 8px; }
.authorbio p { font-size: 14px; color: var(--lt-fg-2); line-height: 1.6; margin: 0; }
.related { border-top: 1px solid var(--lt-line); padding-top: 40px; }

/* ── Tambahan situs statis ────────────────────────────────────────────────
   Disalin dari renalar-astro/src/styles/blog.css; blok di bawah ini hanya ada
   di situs statis. Ikut salin ke Astro kalau dipertahankan. */
.postback { display: inline-block; font-size: 13.5px; color: var(--pm-fg-2); text-decoration: none; margin-bottom: 18px; }
.postback:hover { color: #fff; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--lt-line); }
.prose blockquote { border-left: 3px solid var(--pm-accent); padding-left: 18px; color: var(--lt-fg); font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lt-line); }
.prose th { color: var(--lt-fg); font-weight: 600; }
.prose h2, .prose h3 { scroll-margin-top: 90px; }

/* Sampul artikel (1200x630, dibuat _blog/build.py) */
.postcard { overflow: hidden; }
.postcard__thumb { margin: -24px -24px 20px; aspect-ratio: 1200 / 630; background: #0A0D14; border-bottom: 1px solid var(--lt-line); }
.postcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.postcard__thumb--kosong { display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 0% 0%, rgba(59,107,255,.45), transparent 60%),
              radial-gradient(90% 90% at 100% 100%, rgba(246,85,166,.35), transparent 60%), #0A0D14; }
.postcard__thumb--kosong img { width: 30%; height: auto; opacity: .85; }
.postcover { margin: 0 0 44px; max-width: 988px; } /* = lebar TOC + jarak + kolom isi */
@media (max-width: 900px) { .postcover { margin-bottom: 28px; } }
.postcover img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--lt-line); }

/* Tabel: digeser mendatar di layar sempit, bukan diperas sampai tiap sel jadi
   satu kata per baris. Pembungkusnya ditambahkan _blog/build.py. */
/* Jaraknya ditulis di sini, bukan dibiarkan ke .prose > * + *, karena
   kekhususan selektornya sama dan aturan ini menang (berkas dimuat terakhir).
   Pernah membuat tabel menempel persis di bawah judul bagian. */
.tabel-geser { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0 30px; }
.tabel-geser table { margin: 0; }
.prose h2 + .tabel-geser, .prose h3 + .tabel-geser { margin-top: 20px; }
@media (max-width: 680px) {
  .tabel-geser table { min-width: 520px; }
  .prose table { font-size: 14px; }
}

/* Pengganjal pengganti tombol bahasa di navbar halaman blog. Perataan kanan
   navbar di premium.css menitipkan margin-left:auto pada .langtog, yang tidak
   ada di sini karena blog hanya berbahasa Indonesia. Ambang 961px disamakan
   dengan aturan aslinya: di bawah itu menu jadi kolom dan auto-margin justru
   merusak perataan kiri. */
@media (min-width: 961px) {
  .nav__links .nav__dorong { margin-left: auto; }
}