/* MoInspeksi Article CSS — shared across /artikel/ pages */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#ffffff;--fg:hsl(215,25%,15%);--primary:hsl(222,100%,35%);--primary-fg:#fff;
  --muted:hsl(215,10%,46%);--card:#fff;--border:hsl(214,20%,90%);--accent:hsl(222,100%,35%);
  --section-alt:hsl(210,25%,97%);--wa:hsl(142,70%,45%);--wa-hover:hsl(142,70%,38%);--wa-fg:#fff;
  --radius:0.75rem;
}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--fg);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.text-gradient{background:linear-gradient(to right,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounceIn{0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1);opacity:1}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 hsla(142,70%,45%,0.4)}50%{box-shadow:0 0 0 12px hsla(142,70%,45%,0)}}
.animate-fade-in{animation:fadeIn 0.5s ease-out both}
.animate-bounce-in{animation:bounceIn 0.6s ease-out both}
.animate-pulse-glow{animation:pulseGlow 2s infinite}

/* Sticky Header */
.sticky-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all 0.3s;background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sticky-header.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.header-logo{display:flex;align-items:center;gap:0.5rem;font-size:1.125rem;font-weight:700;color:var(--primary)}
.header-logo img{height:2.25rem;width:2.25rem;object-fit:contain}
.header-nav{display:flex;align-items:center;gap:1.5rem}
.header-nav a{font-size:0.875rem;font-weight:500;color:var(--muted);transition:color 0.2s}
.header-nav a:hover,.header-nav a.active{color:var(--primary)}
.btn-wa-sm{display:inline-flex;align-items:center;gap:0.5rem;background:var(--wa);color:var(--wa-fg)!important;padding:0.5rem 0.75rem;border-radius:0.375rem;font-weight:600;font-size:0.875rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);transition:background 0.3s}
.btn-wa-sm:hover{background:var(--wa-hover)}
.mobile-menu-btn{display:none;padding:0.5rem;background:none;border:none;cursor:pointer;color:var(--fg)}
.mobile-menu{display:none;background:var(--bg);border-top:1px solid var(--border);padding:1rem}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:0.5rem 0;font-size:0.875rem;font-weight:500;color:var(--muted)}
@media(max-width:768px){.header-nav{display:none}.mobile-menu-btn{display:block}}

/* Article hero / breadcrumb */
.article-wrap{max-width:760px;margin:0 auto;padding:0 1rem}
.article-shell{padding:5.5rem 0 3rem}
.breadcrumb{font-size:0.8rem;color:var(--muted);margin-bottom:1.25rem;line-height:1.5}
.breadcrumb a{color:var(--primary);font-weight:500}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{margin:0 0.4rem;opacity:0.5}

.article-meta-top{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.75rem;font-size:0.8rem;color:var(--muted);margin-bottom:1rem}
.cat-chip{display:inline-block;background:hsla(222,100%,35%,0.1);color:var(--accent);padding:0.25rem 0.75rem;border-radius:9999px;font-weight:600;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.03em}
.dot{width:3px;height:3px;background:var(--muted);border-radius:50%;display:inline-block}

.article-title{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;line-height:1.2;margin-bottom:1rem;color:var(--fg)}
.article-author{display:flex;align-items:center;gap:0.6rem;margin-bottom:1.5rem;font-size:0.85rem;color:var(--muted)}
.article-author .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),hsl(222,100%,55%));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.85rem}
.article-author strong{color:var(--fg);font-weight:600}

.featured-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:1rem;margin-bottom:1.75rem;background:var(--section-alt)}

.summary-box{background:hsla(222,100%,35%,0.05);border-left:4px solid var(--primary);padding:1rem 1.25rem;border-radius:0.5rem;margin-bottom:1.75rem;font-size:0.95rem;color:var(--fg)}
.summary-box strong{display:block;margin-bottom:0.35rem;color:var(--primary);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.05em}

.toc{background:var(--section-alt);border:1px solid var(--border);border-radius:0.75rem;padding:1.25rem 1.5rem;margin-bottom:2rem}
.toc-title{font-weight:700;font-size:0.9rem;margin-bottom:0.75rem;display:flex;align-items:center;gap:0.4rem}
.toc ol{padding-left:1.25rem;font-size:0.9rem}
.toc li{margin-bottom:0.4rem}
.toc a{color:var(--fg);transition:color 0.15s}
.toc a:hover{color:var(--primary)}

/* Article body */
.article-body{font-size:1.02rem;line-height:1.8}
.article-body h2{font-size:1.5rem;font-weight:800;margin:2.5rem 0 1rem;line-height:1.3;scroll-margin-top:5rem}
.article-body h3{font-size:1.2rem;font-weight:700;margin:1.75rem 0 0.75rem;scroll-margin-top:5rem}
.article-body p{margin-bottom:1.1rem;color:hsl(215,20%,25%)}
.article-body ul,.article-body ol{padding-left:1.5rem;margin-bottom:1.25rem}
.article-body li{margin-bottom:0.5rem}
.article-body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{text-decoration:none}
.article-body img{margin:1.5rem 0;border-radius:0.75rem}
.article-body blockquote{border-left:4px solid var(--primary);background:var(--section-alt);padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 0.5rem 0.5rem 0;font-style:italic;color:var(--muted)}
.article-body strong{color:var(--fg)}
.article-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.9rem}
.article-body th,.article-body td{border:1px solid var(--border);padding:0.6rem 0.85rem;text-align:left}
.article-body th{background:var(--section-alt);font-weight:700}

/* CTA inline */
.cta-inline{background:linear-gradient(135deg,hsla(222,100%,35%,0.06),hsla(142,70%,45%,0.06));border:1px solid hsla(222,100%,35%,0.15);border-radius:1rem;padding:1.5rem;margin:2rem 0;text-align:center}
.cta-inline h3{font-size:1.1rem;font-weight:700;margin-bottom:0.4rem}
.cta-inline p{font-size:0.9rem;color:var(--muted);margin-bottom:1rem}
.btn-wa-lg{display:inline-flex;align-items:center;gap:0.5rem;background:var(--wa);color:var(--wa-fg);padding:0.85rem 1.75rem;border-radius:0.5rem;font-weight:700;font-size:0.95rem;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);transition:all 0.3s;border:none;cursor:pointer}
.btn-wa-lg:hover{background:var(--wa-hover);transform:translateY(-1px)}

.cta-final{background:linear-gradient(135deg,var(--primary),hsl(222,100%,45%));color:#fff;border-radius:1rem;padding:2rem 1.5rem;margin:2.5rem 0 2rem;text-align:center}
.cta-final h3{font-size:1.4rem;font-weight:800;margin-bottom:0.5rem}
.cta-final p{opacity:0.9;font-size:0.95rem;margin-bottom:1.25rem}
.cta-final .price-tag{display:inline-block;background:rgba(255,255,255,0.15);padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.85rem;font-weight:600;margin-bottom:0.75rem}

/* Share bar */
.share-bar{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;padding:1.25rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:2rem 0}
.share-bar .share-label{font-size:0.85rem;font-weight:600;margin-right:0.5rem;color:var(--muted)}
.share-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 0.85rem;border-radius:0.5rem;background:var(--section-alt);color:var(--fg);font-size:0.8rem;font-weight:600;border:1px solid var(--border);cursor:pointer;transition:all 0.2s}
.share-btn:hover{background:var(--card);border-color:var(--primary);color:var(--primary)}
.share-btn svg{width:14px;height:14px}

/* FAQ */
.faq-section{margin:2.5rem 0}
.faq-section h2{font-size:1.5rem;font-weight:800;margin-bottom:1rem}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:0.75rem;overflow:hidden;background:var(--card)}
.faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:none;border:none;cursor:pointer;font-weight:600;font-size:0.9rem;text-align:left;color:var(--fg);font-family:inherit}
.faq-trigger svg{width:1.1rem;height:1.1rem;color:var(--muted);transition:transform 0.2s;flex-shrink:0}
.faq-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.faq-content{padding:0 1.25rem 1rem;font-size:0.9rem;color:var(--muted);line-height:1.7;display:none}
.faq-content.open{display:block}

/* Related */
.related-section{margin:3rem 0 2rem}
.related-section h2{font-size:1.5rem;font-weight:800;margin-bottom:1.25rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:768px){.related-grid{grid-template-columns:1fr}}
.rel-card{border:1px solid var(--border);border-radius:0.75rem;overflow:hidden;background:var(--card);transition:all 0.3s}
.rel-card:hover{box-shadow:0 8px 20px rgba(0,0,0,0.08);transform:translateY(-2px)}
.rel-card img{aspect-ratio:16/9;object-fit:cover;width:100%;background:var(--section-alt)}
.rel-card .rc-body{padding:0.85rem 1rem 1rem}
.rel-card .cat-chip{font-size:0.65rem;padding:0.15rem 0.55rem;margin-bottom:0.4rem}
.rel-card h3{font-size:0.95rem;font-weight:700;line-height:1.35;margin-bottom:0.4rem;color:var(--fg)}
.rel-card .rc-meta{font-size:0.75rem;color:var(--muted)}

/* Index/Listing */
.index-hero{padding:5.5rem 0 2rem;text-align:center;background:linear-gradient(135deg,hsla(222,100%,35%,0.05),transparent)}
.index-hero h1{font-size:clamp(1.75rem,3.5vw,2.5rem);font-weight:800;margin-bottom:0.5rem}
.index-hero p{color:var(--muted);max-width:36rem;margin:0 auto 1.5rem;font-size:1rem}
.search-wrap{max-width:32rem;margin:0 auto 1rem;position:relative}
.search-input{width:100%;padding:0.85rem 1rem 0.85rem 2.5rem;border:1px solid var(--border);border-radius:9999px;font-family:inherit;font-size:0.95rem;background:var(--card);transition:border 0.2s}
.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px hsla(222,100%,35%,0.1)}
.search-icon{position:absolute;left:0.95rem;top:50%;transform:translateY(-50%);color:var(--muted);width:18px;height:18px}
.cat-filters{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-bottom:1rem}
.cat-filter{background:var(--card);border:1px solid var(--border);padding:0.45rem 1rem;border-radius:9999px;font-size:0.85rem;font-weight:500;cursor:pointer;color:var(--fg);transition:all 0.2s;text-decoration:none}
.cat-filter:hover{border-color:var(--primary);color:var(--primary)}
.cat-filter.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:0.4rem;justify-content:center;font-size:0.75rem;max-width:42rem;margin:0 auto 1rem}
.tag-cloud a{padding:0.25rem 0.65rem;background:var(--section-alt);border-radius:9999px;color:var(--muted)}
.tag-cloud a:hover{background:var(--primary);color:#fff}

.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;padding:2rem 0 3rem}
@media(max-width:1024px){.articles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.articles-grid{grid-template-columns:1fr}}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted);grid-column:1/-1}
.load-more{display:block;margin:0 auto 3rem;padding:0.75rem 2rem;background:var(--card);border:1px solid var(--border);border-radius:0.5rem;font-weight:600;cursor:pointer;color:var(--fg);font-family:inherit}
.load-more:hover{border-color:var(--primary);color:var(--primary)}

/* Footer (matches homepage) */
.footer{background:var(--primary);color:var(--primary-fg);padding:4rem 0 0;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer h3{font-weight:700;margin-bottom:1rem;font-size:1rem}
.footer p,.footer a,.footer li,.footer div{font-size:0.875rem;color:rgba(255,255,255,0.85);line-height:1.6}
.footer a:hover{color:#fff}
.footer ul{list-style:none}.footer ul li{margin-bottom:0.5rem}
.footer-contact{margin-top:1rem;display:flex;flex-direction:column;gap:0.5rem}
.footer-social{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:0.85rem}
.footer-social a{background:rgba(255,255,255,0.1);padding:0.35rem 0.75rem;border-radius:9999px;font-size:0.8rem}
.footer-social a:hover{background:rgba(255,255,255,0.2)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding:1rem 0;text-align:center;font-size:0.85rem;opacity:0.7}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* Floating WA */
.floating-cta{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;display:flex;align-items:center;gap:0.5rem;background:var(--wa);color:var(--wa-fg);font-weight:600;padding:0.875rem 1.5rem;border-radius:0.75rem;font-size:0.875rem;box-shadow:0 20px 25px -5px rgba(0,0,0,0.15);animation:pulseGlow 2s infinite;transition:all 0.3s}
.floating-cta:hover{background:var(--wa-hover);transform:scale(1.05)}
@media(max-width:640px){.floating-cta{bottom:1rem;left:50%;right:auto;transform:translateX(-50%)}.floating-cta:hover{transform:translateX(-50%) scale(1.05)}}

/* Exit intent */
.exit-overlay{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);padding:1rem}
.exit-overlay.show{display:flex}
.exit-popup{background:var(--bg);border-radius:1rem;padding:2rem;max-width:28rem;width:100%;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);text-align:center}
.exit-close{position:absolute;top:0.75rem;right:0.75rem;width:2rem;height:2rem;border-radius:50%;background:var(--section-alt);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.exit-popup h3{font-size:1.25rem;font-weight:700;margin-bottom:0.5rem}
.exit-popup .exit-desc{font-size:0.9rem;color:var(--muted);margin-bottom:1.25rem}
.exit-popup .btn-wa-lg{width:100%;justify-content:center}

#lovable-badge{display:none!important}