/* Single article layout. Keep artwork uncropped and reading controls in flow. */
.single-article-page { max-width: 1248px; margin: 0 auto; padding: 32px 24px 64px; color: #243b32; }
.article-breadcrumb { margin-bottom: 24px; font-size: 13px; line-height: 1.7; color: #617169; }
.article-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.article-breadcrumb li { min-width: 0; overflow-wrap: anywhere; }
.article-breadcrumb li + li::before { content: '/'; margin-right: 10px; color: #9ca8a2; }
.article-breadcrumb a:hover { color: #0c5845; text-decoration: underline; }
.article-breadcrumb [aria-current] { color: #405d4c; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.article-main-column, .article-sidebar { min-width: 0; }
.article-card { background: #fff; border: 1px solid #e4eae7; border-radius: 20px; }
.article-heading { padding: 32px 36px 24px; }
.article-heading h1 { font-family: 'Poppins', sans-serif; font-size: clamp(27px, 2.6vw, 38px); line-height: 1.3; letter-spacing: -.025em; font-weight: 700; color: #153e30; overflow-wrap: anywhere; margin: 0 0 18px; scroll-margin-top: 128px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: #64756d; font-size: 13px; line-height: 1.6; }
.article-meta > * + * { border-left: 1px solid #dce5e0; padding-left: 16px; }
.article-cover { margin: 0 24px; background: #f7faf8; border-radius: 12px; overflow: hidden; }
.article-cover img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.article-body { padding: 28px 36px 12px; }
.article-content { max-width: 72ch; margin-inline: auto; font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.85; color: #384b42; overflow-wrap: anywhere; }
.article-content > :first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.25em; }
.article-content h2, .article-content h3, .article-content h4 { color: #153e30; line-height: 1.4; font-weight: 700; scroll-margin-top: 128px; }
.article-content h2 { font-size: 25px; margin: 1.8em 0 .7em; }
.article-content h3 { font-size: 21px; margin: 1.5em 0 .65em; }
.article-content h4 { font-size: 18px; margin: 1.4em 0 .6em; }
.article-content ul, .article-content ol { padding-left: 1.5em; margin: 0 0 1.4em; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { padding-left: .25em; margin: .6em 0; }
.article-content li > p { margin: .5em 0; }
.article-content li > ul, .article-content li > ol { margin: .5em 0; }
.article-content a { color: #0c5845; text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: #bc4728; }
.article-content blockquote { margin: 1.5em 0; padding: 16px 20px; border-left: 3px solid #0c5845; background: #f1f6f3; border-radius: 0 10px 10px 0; }
.article-content blockquote > :last-child { margin-bottom: 0; }
.article-content figure, .article-content .wp-block-image, .article-content .wp-block-media { max-width: 100% !important; margin: 24px 0; }
.article-content img { display: block; max-width: 100% !important; height: auto !important; object-fit: contain; margin: 24px auto; border-radius: 8px; }
.article-content figure img { margin: 0 auto; }
.article-content figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #6c7b73; text-align: center; }
.article-content table { display: block; max-width: 100%; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.article-content td, .article-content th { border: 1px solid #dde5e0; padding: 12px; min-width: 100px; text-align: left; vertical-align: top; }
.article-content th { background: #eef4f0; font-weight: 600; }
.article-content pre { max-width: 100%; overflow-x: auto; padding: 16px; background: #f4f7f5; border-radius: 8px; }
.article-content iframe, .article-content video { max-width: 100%; }
.article-toc, .article-takeaway, .article-baca-juga { padding: 20px; border-radius: 12px; background: #f3f7f4; border: 1px solid #dfe8e2; margin: 0 0 28px; line-height: 1.7; }
.article-toc-title, .article-baca-juga-label { font-weight: 700; color: #0c5845; margin-bottom: 10px; }
.article-toc ol { padding-left: 0; list-style: none; counter-reset: article-section; }
.article-toc li:not(.toc-h3) { counter-increment: article-section; position: relative; padding-left: 24px; }
.article-toc li:not(.toc-h3)::before { content: counter(article-section) '.'; position: absolute; left: 0; color: #64756d; }
.article-toc li { margin: 6px 0; }
.article-toc a:hover { text-decoration: underline; }
.article-toc .toc-h3 { margin-left: 40px; list-style-type: disc; }
.article-takeaway { border-left: 3px solid #0c5845; background: #faf7ef; }
.article-takeaway-label { display: block; font-size: 12px; font-weight: 700; color: #0c5845; margin-bottom: 8px; }
.article-content .article-baca-juga { margin: 24px 0; font-size: 15px; }
.article-content .article-baca-juga ul { margin-bottom: 0; }
.article-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #e4eae7; }
.article-share > span { margin-right: 6px; font-size: 13px; color: #64756d; }
.article-share-link { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid #dce6e0; border-radius: 50%; color: #0c5845; background: #f5f8f6; }
.article-share-link:hover { color: white; background: #0c5845; }
.article-contact { margin: 28px 0 20px; padding: 24px; border-radius: 14px; background: #eef5f0; text-align: center; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.article-tag { padding: 6px 12px; border-radius: 8px; font-size: 13px; background: #f0f5f2; color: #0c5845; overflow-wrap: anywhere; }
.article-tag:hover { background: #dfece4; }
.article-return { padding: 16px 36px 28px; text-align: right; font-size: 13px; }
.article-return a { color: #0c5845; text-decoration: underline; text-underline-offset: 3px; }
.article-sidebar-panel { padding: 20px; border: 1px solid #e4eae7; border-radius: 16px; background: white; }
.article-popular-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: start; }
.article-popular-image { width: 80px; aspect-ratio: 4 / 3; border-radius: 6px; background: #f3f6f4; overflow: hidden; }
.article-popular-thumbnail { display: block; width: 100%; height: 100%; object-fit: contain; }
.article-popular-copy { min-width: 0; }
.article-popular-title { font-size: 13px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.article-popular-title a:hover { color: #0c5845; text-decoration: underline; }
.single-article-page a:focus-visible, .single-article-page button:focus-visible { outline: 2px solid #0c5845; outline-offset: 4px; }
@media (max-width: 1023px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-sidebar > div { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 639px) {
  .single-article .chat-button { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
  .single-article .chat-button i { margin-right: 0; }
  .single-article .chat-button > span { display: none; }
  .single-article-page { padding: 24px 16px 48px; }
  .article-breadcrumb { font-size: 12px; margin-bottom: 20px; }
  .article-breadcrumb [aria-current] { display: none; }
  .article-heading { padding: 24px 20px 20px; }
  .article-heading h1 { font-size: 26px; line-height: 1.35; }
  .article-meta { font-size: 12px; gap: 8px 12px; }
  .article-meta > * + * { padding-left: 0; border-left: 0; }
  .article-cover { margin: 0 12px; border-radius: 8px; }
  .article-body { padding: 24px 20px 8px; }
  .article-content { font-size: 16px; line-height: 1.8; }
  .article-content h2 { font-size: 23px; }
  .article-content h3 { font-size: 20px; }
  .article-toc, .article-takeaway, .article-baca-juga { padding: 16px; }
  .article-contact { padding: 20px 16px; }
  .article-share { gap: 8px; }
  .article-share > span { width: 100%; margin: 0 0 4px; }
  .article-return { padding: 16px 20px 24px; }
  .article-sidebar > div { grid-template-columns: minmax(0, 1fr); }
}
/* Editorial redesign, scoped to single articles. Keep original artwork intact. */
.single-article{background:#f7f6f0}.single-article-page{max-width:1240px;padding:35px 32px 70px}.article-breadcrumb{font-size:11px;border-bottom:1px solid #dce2da;padding-bottom:22px;margin-bottom:36px}.article-layout{grid-template-columns:minmax(0,1fr) 250px;gap:64px}.article-card{border:0;border-radius:0;background:none}.article-heading{padding:0 0 30px}.article-heading h1{font:400 clamp(34px,3.7vw,50px)/1.16 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin-bottom:26px;color:#173c30}.article-heading .ed-kicker{font-size:10px;letter-spacing:.14em;color:#bc4b2d;font-family:Inter,Arial,sans-serif;margin-bottom:18px}.article-meta{font-size:11px;gap:8px 12px;border-top:1px solid #dce2da;padding-top:17px}.article-meta>*+*{padding-left:12px}.article-cover{margin:0 0 34px;background:#e6ece3;border-radius:8px;border:1px solid #dce2da}.article-body{padding:0}.article-content{max-width:70ch;margin-left:0;font-size:16px;line-height:1.95}.article-content h2{font:400 32px/1.25 Georgia,serif;letter-spacing:-.025em;margin-top:1.6em}.article-content h3{font:600 19px/1.45 Inter,Arial,sans-serif}.article-content table{font-size:12px;line-height:1.75;background:white;border-radius:6px}.article-content caption{text-align:left;font-size:11px;letter-spacing:.04em;padding:12px 0;color:#65756c}.article-content th{background:#edf1e8}.article-content td,.article-content th{padding:15px;min-width:125px}.article-takeaway{background:#e9eedf;border:0;border-left:3px solid #7c965d;border-radius:0 6px 6px 0;padding:24px 26px;font-size:14px;line-height:1.85;margin-bottom:32px}.article-takeaway-label{text-transform:uppercase;letter-spacing:.12em;font-size:10px;margin-bottom:12px}.article-sticky-rail{position:sticky;top:128px}.article-sidebar{height:100%;padding-top:8px}.article-sidebar .article-toc{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 30px;font-size:12px;line-height:1.7}.article-sidebar .article-toc-title{display:none}.article-sidebar .article-toc li{margin:0;padding-top:10px;padding-bottom:10px;border-bottom:1px solid #dce2da}.article-sidebar .article-toc li.toc-h3{display:none}.article-sidebar .article-toc li::before{font-size:10px}.article-rail-note{background:#193f31;color:#f5f1e6;padding:26px 23px;border-radius:8px}.article-rail-note .ed-kicker{color:#e4bc82;font-size:9px}.article-rail-note h2{font:400 29px/1.2 Georgia,serif;margin:12px 0 18px}.article-rail-note p{font-size:12px;line-height:1.8;color:#c0cfc1;margin-bottom:24px}.article-rail-note a{font-size:12px;border-top:1px solid #4b6856;display:flex;justify-content:space-between;gap:10px;padding-top:16px}.article-rail-back{font-size:11px;color:#68766a;display:block;margin-top:22px}.article-mobile-toc{display:none}.article-contact{background:#183f31;color:white;text-align:left;padding:32px;border-radius:8px;margin:32px 0}.article-contact .ed-kicker{color:#dfbd85}.article-contact h2{font:400 32px/1.2 Georgia,serif;margin-bottom:16px}.article-contact p:not(.ed-kicker){color:#c2d0c1;font-size:13px;line-height:1.8;margin-bottom:22px}.article-contact .ed-button{background:#e9c998;color:#183f31;border-color:#e9c998}.article-return{padding:20px 0 26px}.article-share{border-color:#dce2da}.article-body>.sc-context{background:none;border:1px solid #dce2da;border-radius:8px;font-size:13px;line-height:1.8}.article-body>.sc-context h2{font:400 25px Georgia,serif}
@media(max-width:1023px){.article-layout{grid-template-columns:minmax(0,1fr);gap:35px}.article-sidebar{display:none}.article-mobile-toc{display:block;border-top:1px solid #dce2da;border-bottom:1px solid #dce2da;padding:18px 0;margin-bottom:30px;font-size:13px}.article-mobile-toc>summary{cursor:pointer;font-weight:600}.article-mobile-toc .article-toc{margin:20px 0 0;background:transparent;border:0;padding:0}.article-mobile-toc .article-toc-title{display:none}.article-content{max-width:none}}
@media(max-width:639px){.single-article-page{padding:24px 20px 45px}.article-breadcrumb{padding-bottom:18px;margin-bottom:28px}.article-heading{padding:0 0 24px}.article-heading h1{font-size:35px;line-height:1.14}.article-meta{font-size:10px;gap:8px 12px;line-height:1.8}.article-meta>*+*{border:0;padding:0}.article-cover{margin:0 0 24px;border-radius:6px}.article-body{padding:0}.article-content{font-size:15px;line-height:1.9}.article-content h2{font-size:28px}.article-content h3{font-size:18px}.article-takeaway{padding:21px;font-size:13px}.article-contact{padding:26px 22px}.article-contact h2{font-size:28px}}