/* Article reading and discovery. Layout and colours share the site tokens. */
.editorial { --font-body: 'Inter', 'Inter Fallback', sans-serif; --font-heading: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif; font-family: var(--font-body); background: var(--surface); color: var(--text); line-height: 1.8; -webkit-font-smoothing: antialiased; }
.editorial *, .editorial *::before, .editorial *::after { box-sizing: border-box; }
.editorial [hidden] { display: none !important; }
.editorial h1, .editorial h2, .editorial h3 { font-family: var(--font-heading); color: var(--text); letter-spacing: -.035em; text-wrap: pretty; }
.editorial a { text-underline-offset: 4px; }
.editorial a:focus-visible, .editorial button:focus-visible, .editorial input:focus-visible, .editorial summary:focus-visible { outline: 3px solid var(--lead-action); outline-offset: 3px; }
.editorial svg { flex-shrink: 0; }
body.editorial-page .editorial .bcr-bar { margin-top: 0; background: var(--surface); padding-block: 18px; }
body.editorial-page .editorial .bcr-inner { width: min(1240px, calc(100% - 64px)); max-width: none; padding: 0; }
body.editorial-page .editorial .bcr-list { font-size: 10px; gap: 8px; }
.editorial .bcr-item:last-child { max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-archive { padding-bottom: 65px; }
.ar-archive-header { padding-block: 52px 40px; }
.ar-archive-header .ui-kicker { margin-bottom: 15px; color: var(--lead-action); }
.editorial .ar-archive-header h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.2; letter-spacing: -.045em; margin: 0 0 19px; max-width: 1000px; }
.ar-archive-header > p:last-child { max-width: 750px; margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.85; }
.ar-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-block: 1px solid var(--border); padding-block: 18px; }
.ar-topics a { padding: 8px 15px; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); font-size: 12px; font-weight: 500; text-decoration: none; }
.ar-topics a[aria-current] { color: var(--on-brand); background: var(--slate-900); }
.ar-topics a:hover:not([aria-current]) { border-color: var(--border); background: var(--surface-subtle); }
.ar-library-controls { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 27px; }
.ar-library-controls > p { margin: 0; color: var(--text-subtle); font-size: 12px; }
.ar-library-controls strong { color: var(--text); }
.ar-search { display: flex; align-items: center; gap: 10px; width: 410px; max-width: 100%; min-height: 46px; padding: 4px 5px 4px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); color: var(--text-subtle); }
.ar-search input { min-width: 0; width: 100%; padding: 8px 0; border: 0; background: transparent; font: inherit; font-size: 12px; color: var(--text); }
.ar-search button { min-height: 36px; padding: 7px 15px; border: 0; border-radius: 5px; color: var(--on-brand); background: var(--slate-900); font-family: inherit; font-size: 11px; cursor: pointer; }
.ar-search-status { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }
.ar-search-status:empty { display: none; }
.ar-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.ar-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 25px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ar-card:hover, .ar-card:focus-within { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lead-action) 40%, var(--border)); box-shadow: var(--shadow-sm); }
.ar-card-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--text-subtle); }
.ar-card-meta > a { color: var(--lead-action); font-size: 10px; font-weight: 600; text-decoration: none; }
.editorial .ar-card h2, .editorial .ar-card h3 { margin: 20px 0 13px; font-size: 20px; line-height: 1.5; font-weight: 700; }
.ar-card h2 a, .ar-card h3 a { color: var(--text); text-decoration: none; }
.ar-card > p { flex: 1; margin: 0 0 25px; color: var(--text-muted); font-size: 12px; line-height: 1.9; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ar-card-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 15px; border-top: 1px solid var(--border); color: var(--text-subtle); font-size: 10px; }
.ar-card-bottom a { display: inline-flex; align-items: center; gap: 5px; min-height: 35px; color: var(--text); font-size: 11px; font-weight: 600; text-decoration: none; }
.ar-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 35px; border-top: 1px solid var(--border); padding-top: 25px; }
.ar-pagination > div { display: flex; gap: 6px; align-items: center; }
.ar-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; text-decoration: none; }
.ar-pagination a[aria-current] { color: var(--on-brand); background: var(--slate-900); border-color: var(--slate-900); }
.ar-pagination [aria-disabled] { color: var(--text-subtle); font-size: 12px; }
.ar-search-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.ar-search-card { border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.editorial .ar-search-card h2 { font-size: 21px; margin: 0 0 14px; line-height: 1.5; }
.ar-search-card a { color: var(--text); text-decoration: none; }
.ar-search-card p { color: var(--text-muted); font-size: 13px; line-height: 1.8; margin: 0; }
.ar-progress { position: fixed; top: 79px; left: 0; z-index: 40; appearance: none; width: 100%; height: 2px; border: 0; background: transparent; color: var(--lead-action); }
.ar-progress::-webkit-progress-bar { background: transparent; }
.ar-progress::-webkit-progress-value { background: var(--lead-action); }
.ar-progress::-moz-progress-bar { background: var(--lead-action); }
.ar-article-header { padding-block: 42px 35px; border-bottom: 1px solid var(--border); }
.ar-topic-tag { display: inline-flex; padding: 4px 10px; margin-bottom: 19px; border: 1px solid var(--border); border-radius: 4px; color: var(--lead-action); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-decoration: none; }
.editorial .ar-article-header h1 { max-width: 1050px; margin: 0 0 23px; font-size: clamp(31px,4vw,50px); line-height: 1.2; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.ar-lede { max-width: 870px; font-size: 17px; color: var(--text-muted); line-height: 1.9; margin: 0 0 25px; }
.ar-byline { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--text-subtle); font-size: 11px; }
.ar-byline > span { display: inline-flex; align-items: center; gap: 8px; }
.ar-reading-grid { display: grid; grid-template-columns: minmax(0,820px) 260px; justify-content: space-between; align-items: start; gap: 64px; padding-block: 40px 55px; }
.ar-main { grid-column: 1; grid-row: 1; min-width: 0; }
.ar-sidebar { grid-column: 2; grid-row: 1; min-width: 0; position: sticky; top: 110px; }
.ar-toc { padding: 19px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); }
.ar-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; font-size: 13px; font-weight: 650; color: var(--text); cursor: pointer; }
.ar-toc summary::-webkit-details-marker { display: none; }
.ar-toc summary > span { font-size: 19px; transition: transform .2s ease; }
.ar-toc[open] summary > span { transform: rotate(180deg); }
.ar-toc nav { margin-top: 17px; max-height: 60vh; overflow-y: auto; }
.ar-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.ar-toc li { padding: 0; margin: 0; }
.ar-toc a { display: block; padding: 7px 0 7px 13px; border-left: 2px solid transparent; margin-left: -1px; color: var(--text-muted); font-size: 11px; line-height: 1.8; text-decoration: none; }
.ar-toc a[aria-current], .ar-toc a:hover { color: var(--lead-action); border-left-color: var(--lead-action); }
.ar-toc-sub a { padding-left: 24px; font-size: 10px; }
.ar-all-topics { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; font-size: 12px; color: var(--text-muted); text-decoration: none; }
.ar-prose { color: var(--text-muted); font-size: 17px; line-height: 1.95; overflow-wrap: anywhere; }
.ar-prose p { margin: 0 0 25px; }
.ar-prose h2 { font-size: 28px; line-height: 1.45; margin: 45px 0 19px; font-weight: 750; scroll-margin-top: 110px; }
.ar-prose h3 { font-size: 22px; line-height: 1.55; margin: 32px 0 17px; font-weight: 700; scroll-margin-top: 110px; }
.ar-prose h2:first-child { margin-top: 0; }
.ar-prose strong { color: var(--text); font-weight: 650; }
.ar-prose a { color: var(--text); text-decoration-color: var(--lead-action); text-decoration-thickness: 1px; }
.ar-prose a:hover { color: var(--lead-action); }
.ar-prose ul, .ar-prose ol { padding-left: 24px; margin: 18px 0 27px; }
.ar-prose li { padding-left: 4px; margin-block: 10px; }
.ar-prose li::marker { color: var(--lead-action); }
.ar-prose img { max-width: 100%; height: auto; border-radius: 9px; }
.ar-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 28px 0; font-size: 13px; border: 1px solid var(--border); }
.ar-prose th, .ar-prose td { padding: 13px 15px; border: 1px solid var(--border); min-width: 115px; line-height: 1.9; text-align: left; vertical-align: top; }
.ar-prose th { background: var(--surface-subtle); color: var(--text); }
.ar-prose blockquote { margin: 28px 0; padding: 23px; border-left: 3px solid var(--lead-action); background: var(--surface-subtle); border-radius: 0 8px 8px 0; }
.ar-prose blockquote p:last-child { margin-bottom: 0; }
.ar-article-image { margin: 0 0 30px; }
.ar-article-image img { display: block; width: 100%; height: auto; border-radius: 10px; }
.editorial .ce-faq { margin-top: 45px; border-top: 1px solid var(--border); padding-top: 30px; }
.editorial .ce-faq h2 { margin: 7px 0 22px; font-size: 26px; }
.editorial .pd-section-eyebrow { color: var(--lead-action); font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.editorial .ce-faq-list details { border-bottom: 1px solid var(--border); }
.editorial .ce-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; list-style: none; cursor: pointer; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.7; }
.editorial .ce-faq-list summary::-webkit-details-marker { display: none; }
.editorial .ce-faq-list summary > span { font-size: 24px; font-weight: 400; }
.editorial .ce-faq-list details[open] summary > span { transform: rotate(45deg); color: var(--lead-action); }
.editorial .ce-faq-list p { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin: 0; padding-bottom: 20px; }
.ar-conversion { margin-top: 40px; padding: 30px; border-radius: 12px; background: var(--slate-900); color: var(--on-brand); }
.editorial .ar-conversion .ui-kicker { color: var(--slate-300); margin: 0 0 12px; }
.editorial .ar-conversion h2 { color: var(--on-brand); font-size: 26px; line-height: 1.4; margin: 0 0 15px; }
.ar-conversion p { color: var(--slate-300); font-size: 13px; line-height: 1.9; margin: 0 0 24px; }
.ar-conversion-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ar-training-section { margin-top: 42px; }
.editorial .ar-training-section h2 { font-size: 25px; line-height: 1.5; margin: 9px 0 23px; }
.ar-training-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ar-related { padding-block: 35px 65px; border-top: 1px solid var(--border); }
.ar-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.ar-section-title .ui-kicker { margin: 0 0 8px; }
.editorial .ar-section-title h2 { margin: 0; font-size: 30px; line-height: 1.4; }
.ar-section-title > a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); text-decoration: none; }
.ar-related .ar-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 1100px) { .ar-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .ar-reading-grid { gap: 38px; grid-template-columns: minmax(0,1fr) 240px; } }
@media (max-width: 999px) { .ar-reading-grid { grid-template-columns: 1fr; gap: 28px; } .ar-sidebar { grid-column: 1; grid-row: 1; position: static; } .ar-main { grid-column: 1; grid-row: 2; } .ar-toc nav { max-height: 50vh; } .ar-all-topics { display: none; } }
@media (max-width: 768px) {
  body.editorial-page .editorial .bcr-inner { width: calc(100% - 36px); }
  .editorial .bcr-item:last-child { max-width: 170px; }
  .ar-archive { padding-bottom: 40px; }
  .ar-archive-header { padding-block: 32px 28px; }
  .editorial .ar-archive-header h1 { font-size: 31px; }
  .ar-archive-header > p:last-child { font-size: 14px; }
  .ar-topics { gap: 4px; padding-block: 13px; }
  .ar-topics a { font-size: 11px; padding: 8px 11px; }
  .ar-library-controls { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 21px; }
  .ar-search { width: 100%; }
  .ar-search input { font-size: 16px; }
  .ar-search input::placeholder { font-size: 11px; }
  .ar-card-grid, .ar-related .ar-card-grid { grid-template-columns: 1fr; gap: 15px; }
  .ar-card { padding: 23px; }
  .ar-card > p { font-size: 13px; }
  .ar-pagination { justify-content: center; gap: 15px; }
  .ar-pagination > div { order: -1; width: 100%; justify-content: center; }
  .ar-search-results { grid-template-columns: 1fr; }
  .ar-progress { top: 55px; }
  .ar-article-header { padding-block: 28px; }
  .editorial .ar-article-header h1 { font-size: 31px; line-height: 1.25; }
  .ar-topic-tag { margin-bottom: 16px; }
  .ar-lede { font-size: 15px; line-height: 1.85; margin-bottom: 22px; }
  .ar-byline { font-size: 10px; gap: 10px 16px; }
  .ar-reading-grid { padding-block: 27px 35px; }
  .ar-prose { font-size: 16px; line-height: 1.95; }
  .ar-prose p { margin-bottom: 24px; }
  .ar-prose h2 { font-size: 24px; margin-top: 33px; scroll-margin-top: 85px; }
  .ar-prose h3 { font-size: 20px; scroll-margin-top: 85px; }
  .ar-prose table { font-size: 12px; }
  .ar-conversion { padding: 24px; }
  .editorial .ar-conversion h2 { font-size: 23px; }
  .ar-conversion-actions { flex-direction: column; }
  .ar-conversion-actions > a { width: 100%; }
  .ar-training-grid { grid-template-columns: 1fr; }
  .ar-related { padding-block: 30px 40px; }
  .ar-section-title { display: block; }
  .editorial .ar-section-title h2 { font-size: 26px; }
  .ar-section-title > a { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .editorial *, .editorial *::before, .editorial *::after { animation: none !important; transition: none; scroll-behavior: auto; } }
.ar-search-more { grid-column: 1 / -1; justify-self: center; }
/* Compatibility for existing editorial callouts; article content stays intact. */
.ar-prose svg { width: 20px; height: 20px; vertical-align: middle; }
.ar-prose :is(.ak-lead-box,.cta-block,.cta) { margin-block: 30px; padding: 25px; border: 1px solid var(--border); border-left: 3px solid var(--lead-action); border-radius: 10px; background: var(--surface-subtle); }
.ar-prose :is(.ak-lead-title,.ak-lead-mid-title,.ak-lb-title) { margin: 14px 0; font-size: 23px; line-height: 1.5; color: var(--text); }
.ar-prose :is(.ak-lead-cta-row,.ak-lead-mid-actions,.ak-lb-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.ar-prose :is(.ak-btn-wa-compact,.ak-btn-wa-hero,.ak-btn-wa-rich,.btn-wa) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 18px; background: var(--lead-action); color: var(--on-brand); border-radius: 8px; font-size: 13px; line-height: 1.6; text-decoration: none; }
.ar-prose :is(.ak-lead-tag,.ak-lead-time,.ak-lead-mid-badge,.ak-lead-mid-features,.ak-lb-badge) { font-size: 12px; line-height: 1.8; }
.ar-prose :is(.ak-lead-box-top,.ak-lead-mid-features) { display: flex; flex-wrap: wrap; gap: 12px; }
.ar-prose :is(.prinsip-grid,.tingkat-grid,.related-grid,.program-grid,.why-grid) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 16px; margin-block: 25px; }
.ar-prose :is(.prinsip-card,.tingkat-card,.program-card,.related-card,.why-item) { min-width: 0; padding: 19px; border: 1px solid var(--border); border-radius: 8px; }
.ar-prose :is(.prinsip-card,.tingkat-card,.program-card,.related-card,.why-item) :is(h3,h4) { margin: 10px 0; }
.ar-prose :is(.step,.faq-item) { padding-block: 16px; border-bottom: 1px solid var(--border); }
.ar-prose .faq-q { font-weight: 650; color: var(--text); margin-bottom: 10px; }