/* Halaman artikel awam: /artikel (senarai) dan /artikel/<slug> (artikel), serta /dasar-privasi.
   Token & glass dari base.css. */

/* ---------- Senarai artikel ---------- */
.articles-main { padding-top: 32px; padding-bottom: 64px; display: grid; gap: 22px; }
.articles-hero { display: grid; gap: 10px; }
.articles-hero h1 { font-size: clamp(1.9rem, 1.15rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -0.04em; font-weight: 790; max-width: 18ch; text-wrap: balance; }
.articles-hero .hl { color: var(--accent-text); }
.articles-hero p { color: var(--text-muted); max-width: 52ch; }
@media (min-width: 768px) { .articles-main { padding-top: 56px; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 800ms var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
}

.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chips .chip { min-height: 36px; text-transform: capitalize; }

.article-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.article-card {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--shadow-sm);
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease);
}
@media (min-width: 768px) and (hover: hover) {
  .article-card { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .article-card:not(.is-skeleton):hover { transform: translateY(-4px); box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--shadow-md); }
  .article-card:hover .ac-media img { transform: scale(1.04); }
}
.article-card.is-skeleton { min-height: 340px; }
@media (prefers-reduced-motion: no-preference) {
  .article-card.ac-enter { animation: rise 650ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
}
.ac-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.ac-link:focus-visible { box-shadow: inset var(--focus-ring); border-radius: inherit; }
.ac-media { aspect-ratio: 1200 / 630; overflow: hidden; background: var(--accent-soft); }
.ac-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.ac-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--accent-gradient); color: var(--accent-on); font-size: 2.5rem; opacity: 0.9; }
.ac-body { display: grid; gap: 8px; padding: 18px; align-content: start; flex: 1; }
.ac-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-tags li, .ac-tags a {
  font-size: 0.75rem; font-weight: 650; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-text); text-decoration: none; text-transform: capitalize;
}
.ac-title { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 740; text-wrap: balance; }
.ac-excerpt { color: var(--text-muted); font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ac-meta { margin-top: auto; padding-top: 6px; font-size: 0.8125rem; color: var(--text-muted); }

/* Artikel terbaru: kad lebar dengan gambar di kiri (desktop) */
@media (min-width: 1024px) {
  .article-card.is-featured { grid-column: 1 / -1; }
  .article-card.is-featured .ac-link { display: grid; grid-template-columns: 1.15fr 1fr; }
  .article-card.is-featured .ac-media { aspect-ratio: auto; min-height: 320px; }
  .article-card.is-featured .ac-body { padding: 32px; align-content: center; gap: 12px; }
  .article-card.is-featured .ac-title { font-size: 1.75rem; letter-spacing: -0.025em; }
  .article-card.is-featured .ac-excerpt { font-size: 1.0625rem; -webkit-line-clamp: 4; }
}

/* ---------- Artikel tunggal ---------- */
.article-main { padding-top: 24px; padding-bottom: 64px; display: grid; gap: 20px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 0.875rem; font-weight: 650; text-decoration: none; color: var(--text-muted); }
.back-link:hover { color: var(--accent-text); }
.article-skeleton { display: grid; gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; }

.article-detail {
  width: 100%; max-width: 820px; margin: 0 auto; padding: 28px 22px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-edge), var(--shadow-md);
}
@media (min-width: 768px) { .article-detail { padding: 44px 56px; } }
@media (prefers-reduced-motion: no-preference) {
  .article-detail:not([hidden]) { animation: rise 700ms var(--ease) both; }
}
.article-head { display: grid; gap: 14px; margin-bottom: 26px; }
.article-head h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.75rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 790; text-wrap: balance; }
.article-excerpt { font-size: 1.125rem; line-height: 1.6; color: var(--text-muted); }
.article-byline { display: flex; align-items: center; gap: 12px; }
.byline-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-gradient); color: var(--accent-on); font-weight: 760; font-size: 0.875rem; box-shadow: var(--accent-glow);
}
.article-byline strong { display: block; font-size: 0.9375rem; }
.byline-meta { display: block; font-size: 0.8125rem; color: var(--text-muted); }

.article-foot { display: grid; gap: 18px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 650; color: var(--text-muted); }
.share > span { margin-right: 4px; }
.cta-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px;
  border-radius: var(--radius-card); text-decoration: none; color: var(--accent-on);
  background: var(--accent-gradient); box-shadow: var(--accent-glow);
  transition: transform 300ms var(--ease), filter 300ms var(--ease);
}
.cta-card:hover { filter: brightness(1.06); }
.cta-card:active { transform: scale(0.99); }
.cta-card strong { display: block; font-size: 1.0625rem; }
.cta-card span { font-size: 0.875rem; opacity: 0.92; }
.cta-card .ph { font-size: 1.5rem; flex: none; transition: transform 300ms var(--ease); }
.cta-card:hover .ph { transform: translateX(4px); }

.related { width: 100%; max-width: 1100px; margin: 24px auto 0; display: grid; gap: 16px; }
.related h2 { font-size: 1.375rem; letter-spacing: -0.02em; }

/* Keadaan kosong / ralat */
.state {
  display: grid; justify-items: start; gap: 8px; padding: 30px 24px; max-width: 760px; width: 100%; margin: 0 auto;
  background: var(--glass); border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
}
.state-icon {
  font-size: 1.75rem; color: var(--accent-on); width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 16px; background: var(--accent-gradient); box-shadow: var(--accent-glow);
}
.state h3 { font-size: 1.125rem; margin-top: 6px; }
.state p { color: var(--text-muted); }

.site-footer {
  border-top: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--glass) 60%, transparent);
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.875rem; color: var(--text-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a[aria-current='page'] { color: var(--text); font-weight: 650; text-decoration: none; }

/* ---------- Halaman dasar (/dasar-privasi) ---------- */
.legal { max-width: 880px; }
.legal-eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.legal-dates { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; font-size: 0.875rem; }
.legal-dates dt { color: var(--text-muted); }
.legal-dates dd { margin: 0; font-weight: 650; }
.legal-lang-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 0.875rem; font-weight: 650; }
.legal-lang-link .ph { font-size: 1.125rem; color: var(--accent-text); }

.legal-notice {
  display: flex; gap: 14px; padding: 18px 20px; margin-bottom: 24px; border-radius: var(--radius-control);
  background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.legal-notice > .ph { flex: none; font-size: 1.5rem; color: var(--warning); margin-top: 1px; }
.legal-notice h2 { font-size: 1rem; font-weight: 750; margin-bottom: 4px; }
.legal-notice p { font-size: 0.9375rem; line-height: 1.65; }
.legal-notice a { color: inherit; font-weight: 650; text-underline-offset: 3px; }

.legal-toc { padding: 18px 20px; margin-bottom: 32px; border-radius: var(--radius-control); background: var(--surface-2); border: 1px solid var(--border); }
.legal-toc h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.legal-toc ol { margin: 0; padding-left: 1.8em; columns: 2 15rem; column-gap: 32px; font-size: 0.9375rem; }
.legal-toc li { break-inside: avoid; padding: 3px 0; }
.legal-toc li::marker { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.legal-toc a { color: var(--text); text-decoration: none; }
.legal-toc a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-toc-extra { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 0.9375rem; color: var(--text-muted); }

/* .prose.legal-body: prose.css dimuat selepas fail ini, jadi spesifisiti mesti lebih tinggi */
.prose.legal-body { font-size: 1rem; line-height: 1.75; }
.legal-body [id] { scroll-margin-top: 88px; }
.prose.legal-body section > * + * { margin-top: 0.85em; }
.prose.legal-body section > h2 + * { margin-top: 0.6em; }
.prose.legal-body h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.375rem); margin-top: 0; }
/* Bahagian D (lang="en") dibalut .legal-lang, jadi pemilih di bawah tidak terhad kepada anak langsung .legal-body */
.legal-body .legal-lang > * + * { margin-top: 1.1em; }
.prose.legal-body * + section { margin-top: 2.2em; }
.legal-body .legal-part {
  margin-top: 2.8em; padding-top: 1.4em; border-top: 1px solid var(--border);
  font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
}
.legal-body .legal-part + section { margin-top: 1em; }
/* Fasal utama (penafian pihak ketiga) ditonjolkan */
.legal-body .legal-key { padding: 20px; border-radius: var(--radius-control); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }

/* Fasal bernombor: 3.1, 3.2 ... dengan nombor tergantung di kiri */
.clause { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 8px; }
.clause-no { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.clause > div > * + * { margin-top: 0.6em; }
.legal-body ol.alpha { list-style: none; padding-left: 0; counter-reset: alpha; }
.legal-body * + ol.alpha { margin-top: 0.6em; }
.legal-body ol.alpha > li { position: relative; padding-left: 2.2em; counter-increment: alpha; }
.legal-body ol.alpha > li::before { content: '(' counter(alpha, lower-alpha) ')'; position: absolute; left: 0; color: var(--text-muted); }

.legal-contact {
  display: grid; gap: 2px; padding: 16px 18px; font-style: normal;
  border-radius: var(--radius-control); background: var(--surface-2); border: 1px solid var(--border);
}