/* ===== Artikel & Insight + Landing Page SEO =====
   Warna mengikuti brand: oranye #FF8C00, navy #060c22, teks #23272A */
:root {
    --fgs-orange: #FF8C00;
    --fgs-navy: #060c22;
    --fgs-text: #23272A;
    --fgs-muted: #5f6368;
    --fgs-border: #e6e8ee;
    --fgs-soft: #f6f7fd;
}

.artikel-hero { margin-top: 110px; background: var(--fgs-soft); padding: 30px 0 20px; }
.artikel-hero h1 { font-size: 2rem; font-weight: 700; color: var(--fgs-text); margin: 10px 0; }
.artikel-hero-desc { color: var(--fgs-muted); max-width: 780px; line-height: 1.7; margin-left: 0 !important; padding-left: 0 !important; }
.artikel-detail p, .artikel-list-section p, #custom-content .artikel-cta p { margin-left: 0 !important; padding-left: 0 !important; }

.artikel-breadcrumb { font-size: .875rem; color: var(--fgs-muted); }
.artikel-breadcrumb a { color: var(--fgs-muted); }
.artikel-breadcrumb a:hover { color: var(--fgs-orange); }
.artikel-breadcrumb span { margin: 0 4px; }

.artikel-search { display: flex; max-width: 560px; margin: 18px 0; border: 1px solid var(--fgs-border); border-radius: 30px; background: #fff; overflow: hidden; }
.artikel-search input { flex: 1; border: 0; padding: 10px 18px; outline: none; font-size: .95rem; min-width: 0; }
.artikel-search button { border: 0; background: var(--fgs-orange); color: #fff; padding: 0 20px; cursor: pointer; }

.artikel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.artikel-chips a { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--fgs-border); background: #fff; color: var(--fgs-text); font-size: .875rem; }
.artikel-chips a.active, .artikel-chips a:hover { background: var(--fgs-navy); color: #fff; border-color: var(--fgs-navy); }

.artikel-list-section { padding: 30px 0 10px; }
.artikel-search-info, .artikel-empty { color: var(--fgs-muted); margin-bottom: 20px; }

.artikel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; width: 100%; }
.artikel-grid > .artikel-card:only-child { max-width: 420px; }
.artikel-card { background: #fff; border: 1px solid var(--fgs-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.artikel-card:hover { box-shadow: 0 10px 28px rgba(6, 12, 34, .08); transform: translateY(-2px); }
.artikel-card-img { display: block; aspect-ratio: 1200 / 630; background: var(--fgs-soft); overflow: hidden; }
.artikel-card-img img { width: 100%; height: 100%; object-fit: cover; }
.artikel-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.artikel-badge { align-self: flex-start; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fgs-orange); margin-bottom: 6px; }
.artikel-card-title { font-size: 1.08rem; line-height: 1.4; font-weight: 700; margin: 0 0 8px; text-transform: none; }
.artikel-card-title a { color: var(--fgs-text); }
.artikel-card-title a:hover { color: var(--fgs-orange); }
.artikel-card-excerpt { color: var(--fgs-muted); font-size: .9rem; line-height: 1.6; flex: 1; margin-bottom: 10px; }
.artikel-card-meta { font-size: .8rem; color: #8a8f98; }

.artikel-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 30px 0; }
.artikel-pagination a { padding: 8px 14px; border: 1px solid var(--fgs-border); border-radius: 8px; color: var(--fgs-text); }
.artikel-pagination a.active, .artikel-pagination a:hover { background: var(--fgs-orange); border-color: var(--fgs-orange); color: #fff; }

/* Detail */
.artikel-detail { margin-top: 110px; }
.artikel-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.artikel-main { min-width: 0; max-width: 820px; }
.artikel-header h1 { font-size: 2.1rem; line-height: 1.3; font-weight: 700; color: var(--fgs-text); margin: 12px 0; text-transform: none; }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--fgs-muted); font-size: .875rem; }
.artikel-meta i { color: var(--fgs-orange); margin-right: 4px; }
.artikel-cover { margin: 22px 0; }
.artikel-cover img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px; background: var(--fgs-soft); }
.artikel-lead { font-size: 1.1rem; line-height: 1.75; color: #3c4043; border-left: 4px solid var(--fgs-orange); padding-left: 16px; }

.artikel-toc { background: var(--fgs-soft); border: 1px solid var(--fgs-border); border-radius: 10px; padding: 14px 20px; margin: 24px 0; }
.artikel-toc summary { font-weight: 700; cursor: pointer; color: var(--fgs-text); }
.artikel-toc ol { margin: 10px 0 0; padding-left: 20px; }
.artikel-toc li { margin: 4px 0; }
.artikel-toc li.toc-h3 { margin-left: 18px; list-style: circle; font-size: .92rem; }
.artikel-toc a { color: #1a4fa0; }

.artikel-content { font-size: 1.04rem; line-height: 1.85; color: #333; }
.artikel-content h2 { font-size: 1.55rem; font-weight: 700; color: var(--fgs-text); margin: 34px 0 12px; scroll-margin-top: 120px; text-transform: none; }
.artikel-content h3 { font-size: 1.22rem; font-weight: 700; color: var(--fgs-text); margin: 24px 0 10px; scroll-margin-top: 120px; text-transform: none; }
.artikel-content p { margin: 0 0 16px; }
.artikel-content ul, .artikel-content ol { margin: 0 0 16px; padding-left: 22px; }
.artikel-content li { margin-bottom: 6px; }
.artikel-content a { color: #1a4fa0; text-decoration: underline; text-underline-offset: 2px; }
.artikel-content img { max-width: 100%; height: auto; border-radius: 10px; }
.artikel-content blockquote { border-left: 4px solid var(--fgs-orange); background: #fff8ef; padding: 12px 18px; margin: 20px 0; border-radius: 0 8px 8px 0; }
.artikel-content table, .content-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; display: block; overflow-x: auto; }
.artikel-content th, .artikel-content td, .content-body th, .content-body td { border: 1px solid var(--fgs-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.artikel-content th, .content-body th { background: var(--fgs-navy); color: #fff; font-weight: 600; }
.artikel-content tr:nth-child(even) td, .content-body tr:nth-child(even) td { background: #fafbfd; }

.artikel-faq { margin: 34px 0; }
.artikel-faq h2 { font-size: 1.45rem; font-weight: 700; margin-bottom: 14px; text-transform: none; }
.artikel-faq details { border: 1px solid var(--fgs-border); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.artikel-faq summary { padding: 14px 18px; font-weight: 600; cursor: pointer; color: var(--fgs-text); }
.artikel-faq .faq-answer { padding: 0 18px 16px; color: #444; line-height: 1.75; }

.artikel-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.artikel-tags a { background: var(--fgs-soft); color: var(--fgs-muted); padding: 4px 12px; border-radius: 20px; font-size: .82rem; }

.artikel-share { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: var(--fgs-muted); font-size: .9rem; }
.artikel-share a { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fgs-navy); color: #fff; }
.artikel-share a:hover { background: var(--fgs-orange); }

.artikel-cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; background: var(--fgs-navy); color: #fff; border-radius: 14px; padding: 24px 28px; margin: 34px 0; }
.artikel-cta-text { flex: 1 1 340px; }
.artikel-cta-text p { color: #c9cde0; margin: 0; line-height: 1.6; }
.artikel-cta-text .artikel-cta-title { color: #fff; font-size: 1.2rem; font-weight: 700; margin-bottom: 6px; }
.artikel-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.artikel-cta-btn { padding: 11px 20px; border-radius: 30px; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.artikel-cta-wa { background: #25D366; color: #fff !important; }
.artikel-cta-outline { border: 1px solid #fff; color: #fff !important; }
.artikel-cta-btn:hover { opacity: .9; }

.artikel-sidebar { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 18px; margin-top: 40px; }
.sidebar-box { border: 1px solid var(--fgs-border); border-radius: 12px; padding: 16px; background: #fff; }
.sidebar-title { font-weight: 700; color: var(--fgs-text); margin-bottom: 10px; }
.sidebar-produk a { display: flex; flex-direction: column; gap: 6px; color: var(--fgs-text); }
.sidebar-produk img { width: 100%; border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fgs-soft); }
.sidebar-produk span { color: var(--fgs-orange); font-size: .88rem; }
.sidebar-links { list-style: none; padding: 0; margin: 0; }
.sidebar-links li { border-bottom: 1px dashed var(--fgs-border); }
.sidebar-links li:last-child { border-bottom: 0; }
.sidebar-links a { display: block; padding: 8px 0; color: var(--fgs-text); font-size: .92rem; }
.sidebar-links a:hover { color: var(--fgs-orange); }

.artikel-related-section { background: var(--fgs-soft); padding: 30px 0 40px; }

/* Homepage: artikel terbaru & FAQ */
#home-artikel { padding: 30px 0; }
#home-artikel .home-artikel-more { text-align: center; margin-top: 24px; }
#home-artikel .home-artikel-more a { display: inline-block; padding: 10px 26px; border-radius: 30px; border: 1px solid var(--fgs-orange); color: var(--fgs-orange); font-weight: 600; }
#home-artikel .home-artikel-more a:hover { background: var(--fgs-orange); color: #fff; }
#home-faq { padding: 30px 0 40px; background: var(--fgs-soft); }
#home-faq .artikel-faq { max-width: 900px; margin: 0 auto; width: 100%; }

@media (max-width: 991px) {
    .artikel-layout { grid-template-columns: 1fr; gap: 10px; }
    .artikel-sidebar { position: static; margin-top: 0; }
}
@media (max-width: 768px) {
    .artikel-hero, .artikel-detail { margin-top: 90px; }
    .artikel-hero h1 { font-size: 1.55rem; }
    .artikel-header h1 { font-size: 1.55rem; }
    .artikel-content { font-size: 1rem; }
    .artikel-content h2 { font-size: 1.3rem; }
    .artikel-cta { padding: 20px; }
    .artikel-cta-btn { white-space: normal; text-align: center; }
}

/* Cara pesan (kategori & homepage) */
.cara-pesan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; width: 100%; }
.cara-pesan-item { background: #fff; border: 1px solid var(--fgs-border); border-radius: 12px; padding: 22px; position: relative; }
.cara-pesan-no { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fgs-orange); color: #fff; font-weight: 700; margin-bottom: 10px; }
.cara-pesan-item h3 { font-size: 1.08rem; font-weight: 700; color: var(--fgs-text); margin: 0 0 6px; text-transform: none; }
.cara-pesan-item p { color: var(--fgs-muted); line-height: 1.65; margin: 0 !important; padding: 0 !important; font-size: .94rem; }

/* Homepage: solusi per industri */
#home-solusi { padding: 30px 0 40px; }
.solusi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; }
@media (max-width: 991px) { .solusi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .solusi-grid { grid-template-columns: 1fr; } }
.solusi-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--fgs-border); border-radius: 12px; padding: 20px; background: #fff; color: var(--fgs-text); transition: border-color .2s, box-shadow .2s; }
.solusi-card:hover { border-color: var(--fgs-orange); box-shadow: 0 8px 22px rgba(6, 12, 34, .07); color: var(--fgs-text); }
.solusi-card i { font-size: 1.6rem; color: var(--fgs-orange); }
.solusi-card strong { font-size: 1.05rem; }
.solusi-card span { color: var(--fgs-muted); font-size: .9rem; line-height: 1.6; }
.solusi-card em { font-style: normal; color: var(--fgs-orange); font-size: .88rem; font-weight: 600; margin-top: auto; }

/* style.css memberi semua h3 "padding: 0 20px" (baris ±1900) — netralkan di komponen artikel. */
.artikel-card-title, .cara-pesan-item h3, .artikel-content h3, .artikel-faq h2, .artikel-content h2 { padding-left: 0 !important; padding-right: 0 !important; }