.article-page{padding:var(--sp-6) 0}
.breadcrumb{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--c-text-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.breadcrumb a{color:var(--c-text-3);font-weight:500}
.breadcrumb a:hover{color:var(--c-accent)}
.breadcrumb-sep::before{content:'›'}
.article-header{max-width:780px;margin:0 auto var(--sp-6);text-align:center}
.article-category-badge{display:inline-flex;align-items:center;gap:6px;background:var(--c-accent);color:white;padding:5px 14px;border-radius:var(--r-full);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.article-category-badge:hover{color:white;opacity:.9}
.article-title{font-size:clamp(28px,4vw,44px);font-weight:900;line-height:1.15;letter-spacing:-.025em;color:var(--c-text);margin-bottom:var(--sp-4)}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-4);font-size:var(--fs-xs);color:var(--c-text-3);padding-bottom:var(--sp-5);border-bottom:1px solid var(--c-border)}
.article-meta-item{display:inline-flex;align-items:center;gap:5px}
.article-featured-image{max-width:900px;margin:0 auto var(--sp-6);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:var(--c-bg-soft)}
.article-featured-image img{width:100%;height:100%;object-fit:cover}
.article-content{font-family:var(--font-serif);font-size:19px;line-height:1.75;color:var(--c-text-2);max-width:720px;margin:0 auto}
.article-content>*+*{margin-top:1.4em}
.article-content p{margin-bottom:1.4em}
.article-content h2{font-family:var(--font-sans);font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--c-text);line-height:1.25;margin:2em 0 .8em}
.article-content h3{font-family:var(--font-sans);font-size:21px;font-weight:700;color:var(--c-text);line-height:1.3;margin:1.6em 0 .6em}
.article-content ul,.article-content ol{padding-left:1.5em;margin-bottom:1.4em}
.article-content li{margin-bottom:.5em}
.article-content strong{color:var(--c-text);font-weight:700}
.article-content em{font-style:italic}
.article-content a{color:var(--c-accent);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.article-content a:hover{color:var(--c-accent-dark)}
.article-content blockquote{border-left:4px solid var(--c-accent);padding:var(--sp-3) var(--sp-5);margin:1.8em 0;background:var(--c-bg-alt);border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic;color:var(--c-text-2);font-size:20px}
.article-content img{border-radius:var(--r-md);margin:1.8em 0}
.faq-section{max-width:720px;margin:var(--sp-8) auto 0;padding:var(--sp-6);background:var(--c-bg-alt);border-radius:var(--r-lg);border:1px solid var(--c-border)}
.faq-section h2{font-family:var(--font-sans);font-size:22px;font-weight:800;margin-bottom:var(--sp-4);color:var(--c-text)}
.faq-item{padding:var(--sp-4) 0;border-bottom:1px solid var(--c-border)}
.faq-item:last-child{border-bottom:none}
.faq-question{font-family:var(--font-sans);font-size:16px;font-weight:700;color:var(--c-text);margin-bottom:var(--sp-2)}
.faq-answer{font-family:var(--font-sans);font-size:15px;color:var(--c-text-3);line-height:1.65}
.source-box{max-width:720px;margin:var(--sp-6) auto 0;padding:var(--sp-4) var(--sp-5);background:var(--c-bg-alt);border-left:4px solid var(--c-text-4);border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--c-text-3)}
.source-box strong{color:var(--c-text)}
.share-section{max-width:720px;margin:var(--sp-6) auto 0;padding-top:var(--sp-5);border-top:1px solid var(--c-border);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.share-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-3)}
.share-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-bg-alt);color:var(--c-text-2);border:1px solid var(--c-border);transition:all var(--tr);font-size:16px}
.share-btn:hover{background:var(--c-accent);color:white;border-color:var(--c-accent);transform:translateY(-2px)}
@media(max-width:768px){.article-content{font-size:17px}.article-content h2{font-size:24px}.article-content h3{font-size:19px}.article-title{font-size:26px}.faq-section{padding:var(--sp-4)}.article-grid[style*="repeat(3,1fr)"]{grid-template-columns:1fr !important}}

/* ═══ STICKY SIDEBAR PRODUK ═══ */
.article-with-sidebar { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1200px; margin: 0 auto; align-items: start; }
.article-main { min-width: 0; }
.article-sidebar { display: none; }
.sidebar-sticky { position: sticky; top: 100px; }
.sidebar-widget { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1rem; overflow: hidden; }
.sidebar-widget-title { font-size: 14px; font-weight: 800; color: #0F172A; text-transform: uppercase; letter-spacing: .05em; padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 2px solid #E2E8F0; }
.sidebar-product { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #E2E8F0; text-decoration: none; transition: all .2s; align-items: center; }
.sidebar-product:last-of-type { border-bottom: none; }
.sidebar-product:hover { padding-left: 6px; }
.sidebar-product:hover .sidebar-product-name { color: #EF4444; }
.sidebar-product-img { position: relative; width: 60px; height: 60px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #F1F5F9; }
.sidebar-product-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-product-disc { position: absolute; top: 2px; left: 2px; background: #EF4444; color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }
.sidebar-product-info { flex: 1; min-width: 0; }
.sidebar-product-name { font-size: 12px; font-weight: 600; color: #0F172A; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.sidebar-product-price { font-size: 13px; font-weight: 800; color: #EF4444; margin-top: 3px; }
.sidebar-shop-cta { display: block; text-align: center; padding: 10px; background: #EF4444; color: #fff; font-weight: 700; font-size: 12px; border-radius: 8px; text-decoration: none; margin-top: 12px; transition: all .2s; text-transform: uppercase; }
.sidebar-shop-cta:hover { background: #DC2626; }
@media (min-width: 1024px) {
  .article-with-sidebar { grid-template-columns: 1fr 320px; }
  .article-sidebar { display: block; }
}