/* LeonZ — gaya halaman artikel v2.1 (dark + gold) */

.article-head { margin-bottom: 26px; }
.article-head h1 {
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.18; letter-spacing: -.02em;
  color: var(--ink); font-weight: 800; margin: 14px 0 0;
}
.art-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.art-meta__len { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }

.article { max-width: 760px; }
.article > p { font-size: 16.5px; color: var(--ink-soft); }

.learn-box {
  background: linear-gradient(180deg, var(--card), var(--surface));
  border: 1px solid var(--gold-border); border-radius: var(--radius);
  padding: 20px 22px; margin: 26px 0 34px;
  position: relative; overflow: hidden;
}
.learn-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
}
.learn-box h2 {
  margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold-light);
}
.learn-box ul { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 8px; }
.learn-box li {
  font-size: 14.5px; color: var(--ink-soft); padding-left: 22px; position: relative;
}
.learn-box li::before {
  content: '›'; position: absolute; left: 6px; color: var(--gold); font-weight: 800;
}

.article-body { font-size: 16.5px; }
.article-body h2 {
  font-size: 22px; font-weight: 750; color: var(--ink); letter-spacing: -.01em;
  margin: 38px 0 14px; scroll-margin-top: 84px;
}
.article-body h2::before {
  content: ''; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); margin-bottom: 10px;
}
.article-body p { color: var(--ink-soft); margin: 0 0 16px; }
.article-body p strong { color: var(--ink); }
.article-body ul { margin: 0 0 16px; padding-left: 22px; }
.article-body li { color: var(--ink-soft); margin-bottom: 8px; }
.article-body .table-wrap { margin: 20px 0 26px; }

/* paywall utk artikel member */
.paywall-box {
  background: linear-gradient(160deg, #1d1810, var(--card));
  border: 1px solid var(--gold-border); border-radius: var(--radius-lg);
  padding: 34px 30px; margin: 30px 0; text-align: center;
  position: relative; overflow: hidden;
}
.paywall-box::before {
  content: ''; position: absolute; inset: -1px;
  background: radial-gradient(500px 180px at 50% 0%, rgba(201,162,75,.16), transparent 65%);
  pointer-events: none;
}
.paywall-box__ic {
  font-size: 26px; width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-dim); border: 1px solid var(--gold-border); border-radius: 14px;
}
.paywall-box h2 { margin: 0 0 10px; font-size: 21px; font-weight: 800; color: var(--gold-light); }
.paywall-box h2::before { display: none; }
.paywall-box p { color: var(--ink-muted); font-size: 14.5px; max-width: 480px; margin: 0 auto 20px; }
.paywall-box__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* FAQ di artikel */
.article-faq { margin-top: 42px; padding-top: 8px; }
.article-faq h2 { font-size: 21px; font-weight: 750; color: var(--ink); margin: 0 0 16px; }
.article-faq h2::before {
  content: ''; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); margin-bottom: 10px;
}
.article-faq .faq-list { max-width: none; }

/* navigasi prev/next */
.art-nav {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border);
}
.art-nav__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; transition: all .15s var(--ease);
}
.art-nav__btn:hover { border-color: var(--gold-border); color: var(--gold-light); box-shadow: var(--gold-glow); }
.art-nav__btn--next { margin-left: auto; text-align: right; }

@media (max-width: 640px) {
  .art-nav { flex-direction: column; }
  .art-nav__btn--next { margin-left: 0; }
}