/* ============================================================================ ERGE ASIA — ARTICLE COMPONENT LIBRARY · v1.0 Modern,soft-teal,Bootstrap 5 compatible · Light+Dark · Responsive ---------------------------------------------------------------------------- Penggunaan: <article class="erg-article" data-theme="light">← wajib wrap konten … HTML konten artikel disini,pakai class .erg-* … </article> Toggle theme:tambah class="erg-theme-fab" → JS auto-handle (lihat akhir). ============================================================================ *//* ---------------------------------------------------------------------------- 1 · TOKENS — CSS Custom Properties (light) Applied to both: - .erg-article (standalone usage / demo) - .atv-body (existing artikel-detail wrapper di public site Erge Asia) ---------------------------------------------------------------------------- */.erg-article,.atv-body{  --erg-teal:#2CC5BD; --erg-teal-2:#25B3AB; --erg-teal-deep:#1FA59E; --erg-teal-light:#5fdcd2; --erg-teal-glow:#7ce5dd; --erg-teal-soft:#d4f5f3; --erg-mint:#e6faf9; --erg-cream:#f7fefe;  --erg-bg:#ffffff; --erg-surface:#f7fefe; --erg-card:#ffffff; --erg-card-2:#fafffe;  --erg-ink:#0e2a28; --erg-text:#1a3433; --erg-text-2:#4a6968; --erg-mute:#8da5a3; --erg-mute-2:#b6c8c6;  --erg-border:#e8f5f3; --erg-border-2:#f0faf9; --erg-border-strong:#b3ece9;  --erg-amber:#d4a017; --erg-amber-soft:#fffbf0; --erg-amber-border:#f0d060; --erg-rose:#d63031; --erg-rose-soft:#ffeded; --erg-rose-border:#f0a0a0; --erg-violet:#6c5ce7; --erg-violet-soft:#f0f1ff;  --erg-shadow-xs:0 1px 2px rgba(15,42,40,.04); --erg-shadow-sm:0 2px 8px rgba(31,165,158,.06),0 1px 2px rgba(15,42,40,.04); --erg-shadow:0 8px 24px rgba(31,165,158,.08),0 2px 6px rgba(15,42,40,.04); --erg-shadow-lg:0 20px 48px rgba(31,165,158,.12),0 8px 16px rgba(15,42,40,.06); --erg-shadow-glow:0 8px 32px rgba(44,197,189,.25);  --erg-r-sm:12px; --erg-r:18px; --erg-r-lg:24px; --erg-r-xl:32px; --erg-r-pill:999px;  --erg-grad-soft:linear-gradient(135deg,#d4f5f3 0%,#f7fefe 50%,#ffffff 100%); --erg-grad-mint:linear-gradient(135deg,#e6faf9 0%,#ffffff 100%); --erg-grad-bold:linear-gradient(135deg,#3ED0C8 0%,#2CC5BD 35%,#25B3AB 70%,#1FA59E 100%); --erg-grad-glass:linear-gradient(135deg,rgba(212,245,243,.6) 0%,rgba(247,254,254,.3) 100%); --erg-grad-aurora: radial-gradient(60% 80% at 20% 0%,#d4f5f3 0%,transparent 60%), radial-gradient(50% 60% at 90% 100%,#e6faf9 0%,transparent 60%), linear-gradient(180deg,#ffffff,#f7fefe);  --erg-ease:cubic-bezier(.4,0,.2,1); --erg-ease-out:cubic-bezier(.2,.8,.2,1); --erg-bounce:cubic-bezier(.34,1.56,.64,1);  --erg-gap:16px; --erg-gap-lg:24px;}/* Typography reset — ONLY for standalone .erg-article wrapper. .atv-body sengaja TIDAK di-reset karena sudah punya font-size/line-height sendiri di artikel-detail.css. Cukup token CSS variables yang shared. */.erg-article{ color:var(--erg-text); background:var(--erg-bg); font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:background .4s var(--erg-ease),color .4s var(--erg-ease);}/* ---------------------------------------------------------------------------- 2 · DARK MODE Triggered by either: - #atv-container.atv-dark (existing public site toggle pill) - .erg-article[data-theme="dark"] (standalone usage / demo) ---------------------------------------------------------------------------- */.atv-dark .erg-article,.atv-dark .atv-body,.erg-article[data-theme="dark"],.atv-body[data-theme="dark"]{ --erg-bg:#0a1a19; --erg-surface:#0e1f1e; --erg-card:#11201f; --erg-card-2:#152625; --erg-ink:#f0fffe; --erg-text:#d8eeec; --erg-text-2:#92aeac; --erg-mute:#6f8a88; --erg-mute-2:#3a5251; --erg-border:#1d3230; --erg-border-2:#14262a; --erg-border-strong:#2d4f4d; --erg-mint:#11201f; --erg-cream:#0e1f1e; --erg-teal-soft:#1a3636; --erg-teal:#5fdcd2; --erg-amber-soft:#2a210d; --erg-amber-border:#4a3818; --erg-rose-soft:#2a1212; --erg-rose-border:#4a1d1d; --erg-violet-soft:#16162a; --erg-shadow-xs:0 1px 2px rgba(0,0,0,.3); --erg-shadow-sm:0 2px 8px rgba(0,0,0,.3); --erg-shadow:0 8px 24px rgba(0,0,0,.4); --erg-shadow-lg:0 20px 48px rgba(0,0,0,.5); --erg-shadow-glow:0 8px 32px rgba(95,220,210,.25); --erg-grad-soft:linear-gradient(135deg,#11201f 0%,#0a1818 50%,#050d0d 100%); --erg-grad-mint:linear-gradient(135deg,#11201f 0%,#0a1818 100%); --erg-grad-glass:linear-gradient(135deg,rgba(26,54,54,.6) 0%,rgba(14,31,30,.3) 100%); --erg-grad-aurora: radial-gradient(60% 80% at 20% 0%,#1a3636 0%,transparent 60%), radial-gradient(50% 60% at 90% 100%,#11201f 0%,transparent 60%), linear-gradient(180deg,#0a1a19,#050d0d);}/* ---------------------------------------------------------------------------- 3 · TYPOGRAPHY (in-article) ---------------------------------------------------------------------------- */.erg-article h1,.erg-article h2,.erg-article h3,.erg-article h4,.erg-article h5,.erg-article h6{ color:var(--erg-ink); font-weight:800; line-height:1.25; letter-spacing:-0.01em; margin:0 0 0.6em;}.erg-article h1{font-size:clamp(28px,4vw,40px)}.erg-article h2{font-size:clamp(22px,3vw,30px)}.erg-article h3{font-size:clamp(18px,2.5vw,22px)}.erg-article h4{font-size:17px}.erg-article p{ margin:0 0 1.1em; color:var(--erg-text);}.erg-article a:not([class]){ color:var(--erg-teal-deep); text-decoration:none; border-bottom:1.5px solid rgba(31,165,158,.3); transition:all .25s var(--erg-ease);}.erg-article a:not([class]):hover{ color:var(--erg-teal); border-bottom-color:var(--erg-teal);}.erg-article strong{color:var(--erg-ink);font-weight:700}.erg-article code:not([class]){ background:var(--erg-mint); color:var(--erg-teal-deep); padding:2px 8px; border-radius:6px; font-size:.9em; font-family:'SFMono-Regular',Consolas,monospace;}/* ---------------------------------------------------------------------------- 4 · LAYOUT — section,divider ---------------------------------------------------------------------------- */.erg-section{margin-bottom:48px}.erg-section:last-child{margin-bottom:0}.erg-section-eyebrow{ display:inline-flex; align-items:center; gap:6px; padding:5px 14px; background:var(--erg-mint); color:var(--erg-teal-deep); font-size:11px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; border-radius:var(--erg-r-pill); border:1px solid var(--erg-border-strong); margin-bottom:14px;}.erg-section-eyebrow i{font-size:11px}.erg-section-title{ display:flex; align-items:center; gap:12px; font-size:clamp(20px,2.5vw,26px); font-weight:800; color:var(--erg-ink); line-height:1.25; margin:0 0 18px; letter-spacing:-0.01em;}.erg-section-title::before{ content:""; width:5px; height:32px; background:linear-gradient(180deg,var(--erg-teal-light),var(--erg-teal-deep)); border-radius:3px; flex-shrink:0;}.erg-section-sub{ color:var(--erg-text-2); font-size:15px; margin:-10px 0 22px 17px; max-width:60ch;}.erg-divider{ height:1px; margin:36px 0; background:linear-gradient(90deg,transparent,var(--erg-border-strong) 50%,transparent); border:0;}.erg-divider-dot{ height:24px; margin:36px 0; text-align:center; color:var(--erg-mute-2); font-size:18px; letter-spacing:8px;}.erg-divider-dot::before{content:"• • •"}/* ---------------------------------------------------------------------------- 5 · PILLS · TAGS · BADGES ---------------------------------------------------------------------------- */.erg-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--erg-r-pill); font-size:11.5px; font-weight:700; letter-spacing:0.4px; border:1.5px solid var(--erg-border-strong); background:var(--erg-mint); color:var(--erg-teal-deep);}.erg-pill-bold{ background:var(--erg-grad-bold); color:#fff; border-color:transparent; box-shadow:var(--erg-shadow-glow);}.erg-pill-amber{ background:var(--erg-amber-soft); color:var(--erg-amber); border-color:var(--erg-amber-border);}.erg-pill-rose{ background:var(--erg-rose-soft); color:var(--erg-rose); border-color:var(--erg-rose-border);}.erg-pill-violet{ background:var(--erg-violet-soft); color:var(--erg-violet); border-color:rgba(108,92,231,.25);}.erg-pill-ghost{ background:transparent; color:var(--erg-text-2); border-color:var(--erg-border);}.erg-tag{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:var(--erg-mint); color:var(--erg-teal-deep); border:1px solid var(--erg-border); border-radius:8px; font-size:11px; font-weight:600;}.erg-tag-list{ display:flex; flex-wrap:wrap; gap:6px;}/* ---------------------------------------------------------------------------- 6 · HERO BANNER ---------------------------------------------------------------------------- */.erg-hero{ position:relative; background:var(--erg-grad-bold); color:#fff; border-radius:var(--erg-r-lg); padding:32px 28px; margin-bottom:32px; overflow:hidden; box-shadow:var(--erg-shadow-glow);}.erg-hero::before{  content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 100% 0%,rgba(255,255,255,.25) 0%,transparent 60%), radial-gradient(40% 60% at 0% 100%,rgba(255,255,255,.15) 0%,transparent 60%); pointer-events:none;}.erg-hero>*{position:relative;z-index:1}.erg-hero h1,.erg-hero h2,.erg-hero h3{ color: #ffff00; font-weight:800; padding-top:10px;}.erg-hero p{color:rgba(255,255,255,.9)}.erg-hero .erg-pill{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px)}.erg-hero-soft{ position:relative; background:var(--erg-grad-aurora); border:1.5px solid var(--erg-border); border-radius:var(--erg-r-lg); padding:32px 28px; margin-bottom:32px; overflow:hidden;}.erg-hero-soft::before{ content:""; position:absolute; width:240px;height:240px; border-radius:50%; background:radial-gradient(closest-side,var(--erg-teal-soft),transparent); top:-80px;right:-60px; pointer-events:none; opacity:.6;}.erg-hero-soft>*{position:relative;z-index:1}.erg-hero-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:18px;}.erg-hero-stat{ background:rgba(255,255,255,.18); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25); border-radius:var(--erg-r); padding:14px; text-align:center; color:#fff;}.erg-hero-stat-num{display:block;font-size:22px;font-weight:800;line-height:1.1;margin-bottom:2px}.erg-hero-stat-label{display:block;font-size:11px;opacity:.85}.erg-hero-stat i{display:block;font-size:18px;margin-bottom:6px;opacity:.9; color:#ffff00;}/* ---------------------------------------------------------------------------- 7 · CARDS ---------------------------------------------------------------------------- */.erg-card{ position:relative; background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:var(--erg-r); padding:22px 24px; transition:transform .35s var(--erg-ease),box-shadow .35s var(--erg-ease),border-color .35s var(--erg-ease);}.erg-card:hover{ transform:translateY(-2px); box-shadow:var(--erg-shadow); border-color:var(--erg-border-strong);}.erg-card-flat:hover{transform:none;box-shadow:var(--erg-shadow-xs)}.erg-card-soft{ background:var(--erg-grad-mint);}.erg-card-glass{ background:var(--erg-grad-glass); border:1.5px solid rgba(212,245,243,.5); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);}.erg-card-bold{ background:var(--erg-grad-bold); color:#fff; border-color:transparent; box-shadow:var(--erg-shadow-glow);}.erg-card-bold h1,.erg-card-bold h2,.erg-card-bold h3,.erg-card-bold h4,.erg-card-bold h5,.erg-card-bold strong{color:#fff}.erg-card-bold p{color:rgba(255,255,255,.92)}.erg-card-popular{ border-color:var(--erg-amber-border); background:linear-gradient(135deg,var(--erg-card) 70%,var(--erg-amber-soft) 100%); box-shadow:0 8px 24px rgba(212,160,23,.12);}.erg-card-popular::before{ content:"POPULER"; position:absolute; top:-10px;right:16px; background:var(--erg-amber); color:#fff; font-size:10px; font-weight:800; letter-spacing:1px; padding:4px 12px; border-radius:var(--erg-r-pill); box-shadow:0 4px 12px rgba(212,160,23,.4);}.erg-card-title{ font-size:17px; font-weight:800; color:var(--erg-ink); margin:0 0 6px;}.erg-card-sub{ font-size:13px; color:var(--erg-text-2); margin:0 0 12px;}.erg-card-icon-wrap{ width:48px;height:48px; background:var(--erg-grad-mint); border:1.5px solid var(--erg-border-strong); border-radius:14px; display:flex;align-items:center;justify-content:center; color:var(--erg-teal-deep); font-size:20px; margin-bottom:14px; transition:transform .35s var(--erg-bounce);}.erg-card:hover .erg-card-icon-wrap{transform:scale(1.08) rotate(-4deg)}.erg-feature{ background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:var(--erg-r-lg); padding:26px 22px; text-align:center; transition:transform .35s var(--erg-ease),box-shadow .35s var(--erg-ease),border-color .35s var(--erg-ease);}.erg-feature:hover{ transform:translateY(-4px); box-shadow:var(--erg-shadow-lg); border-color:var(--erg-teal-light);}.erg-feature-icon{ width:64px;height:64px; background:var(--erg-grad-mint); border-radius:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--erg-teal-deep); font-size:26px; margin-bottom:16px; box-shadow:0 4px 12px rgba(44,197,189,.15); transition:transform .35s var(--erg-bounce);}.erg-feature:hover .erg-feature-icon{transform:scale(1.12) rotate(-6deg)}.erg-feature-title{ font-size:17px; font-weight:800; color:var(--erg-ink); margin:0 0 8px;}.erg-feature-desc{ font-size:13.5px; color:var(--erg-text-2); line-height:1.65; margin:0;}/* ---------------------------------------------------------------------------- 8 · GRID ---------------------------------------------------------------------------- */.erg-grid{ display:grid; gap:var(--erg-gap);}.erg-grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.erg-grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.erg-grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.erg-bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--erg-gap);}.erg-bento>*{grid-column:span 12}@media (min-width:720px){ .erg-bento .span-6{grid-column:span 6} .erg-bento .span-4{grid-column:span 4} .erg-bento .span-8{grid-column:span 8} .erg-bento .span-3{grid-column:span 3} .erg-bento .span-9{grid-column:span 9} .erg-bento .span-12{grid-column:span 12}}/* ---------------------------------------------------------------------------- 9 · CHECKLIST · NUMBERED LIST · STEP TIMELINE ---------------------------------------------------------------------------- */.erg-checklist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}.erg-checklist li,.erg-checkitem{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:14px; transition:all .25s var(--erg-ease);}.erg-checklist li:hover,.erg-checkitem:hover{border-color:var(--erg-border-strong);transform:translateX(4px)}.erg-checklist li::before,.erg-checkitem::before{ content:""; flex-shrink:0; width:24px;height:24px; background:var(--erg-grad-bold); border-radius:50%; background-image: linear-gradient(135deg,var(--erg-teal),var(--erg-teal-deep)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-size:cover,70%; background-position:center; background-repeat:no-repeat; box-shadow:0 3px 8px rgba(44,197,189,.3); margin-top:2px;}.erg-checklist-soft li,.erg-checkitem.soft{ background:var(--erg-mint); border-color:var(--erg-border-strong);}.erg-numlist{ list-style:none; padding:0; margin:0; counter-reset:erglist; display:flex; flex-direction:column; gap:10px;}.erg-numlist>li{ counter-increment:erglist; display:flex; align-items:flex-start; gap:14px; padding:14px 16px; background:var(--erg-card); border:1.5px solid var(--erg-border); border-left:4px solid var(--erg-teal); border-radius:0 14px 14px 0; transition:all .25s var(--erg-ease);}.erg-numlist>li:hover{ border-left-color:var(--erg-teal-deep); transform:translateX(4px); box-shadow:var(--erg-shadow-sm);}.erg-numlist>li::before{ content:counter(erglist); flex-shrink:0; width:30px;height:30px; background:var(--erg-grad-bold); color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; box-shadow:0 4px 10px rgba(44,197,189,.3);}.erg-numlist .erg-num-title{ display:block; font-weight:800; color:var(--erg-ink); font-size:14.5px; margin-bottom:2px;}.erg-numlist .erg-num-desc{ display:block; color:var(--erg-text-2); font-size:13px; line-height:1.6;}.erg-steps{ position:relative; padding-left:38px;}.erg-steps::before{ content:""; position:absolute; left:14px;top:14px;bottom:14px; width:2px; background:linear-gradient(180deg,var(--erg-teal-light),var(--erg-border-strong)); border-radius:2px;}.erg-step{ position:relative; padding:16px 18px; background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:14px; margin-bottom:12px; transition:all .25s var(--erg-ease);}.erg-step:hover{border-color:var(--erg-border-strong);box-shadow:var(--erg-shadow-sm)}.erg-step::before{ content:""; position:absolute; left:-32px;top:18px; width:16px;height:16px; background:var(--erg-grad-bold); border:4px solid var(--erg-bg); border-radius:50%; box-shadow:0 0 0 2px var(--erg-teal-light),0 4px 10px rgba(44,197,189,.3);}.erg-step-num{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--erg-teal-deep); text-transform:uppercase; margin-bottom:4px;}.erg-step-title{ font-size:15px; font-weight:800; color:var(--erg-ink); margin:0 0 4px;}.erg-step-desc{ color:var(--erg-text-2); font-size:13.5px; line-height:1.65; margin:0;}/* ---------------------------------------------------------------------------- 10 · CALLOUT (info / tip / warn / success / pro / con) ---------------------------------------------------------------------------- */.erg-callout{ position:relative; padding:16px 20px 16px 56px; background:var(--erg-mint); border:1.5px solid var(--erg-border-strong); border-radius:var(--erg-r); margin:16px 0; color:var(--erg-text);}.erg-callout::before{ content:"\f05a"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:18px;top:18px; width:28px;height:28px; background:var(--erg-teal); color:#fff; border-radius:10px; display:flex;align-items:center;justify-content:center; font-size:13px; box-shadow:0 3px 8px rgba(44,197,189,.3);}.erg-callout strong{color:var(--erg-ink)}.erg-callout-tip{ background:var(--erg-mint); border-color:var(--erg-border-strong);}.erg-callout-tip::before{content:"\f0eb";background:var(--erg-teal-deep)}.erg-callout-warn{ background:var(--erg-amber-soft); border-color:var(--erg-amber-border); color:#7a6215;}.erg-callout-warn::before{content:"\f071";background:var(--erg-amber)}.erg-callout-warn strong{color:#7a6215}.atv-dark .erg-callout-warn,.erg-article[data-theme="dark"] .erg-callout-warn{color:#f0d060}.atv-dark .erg-callout-warn strong,.erg-article[data-theme="dark"] .erg-callout-warn strong{color:#f0d060}.erg-callout-success{ background:linear-gradient(135deg,#d4f7df,#e8f9ee); border-color:#b8e6c4; color:#1e5c2f;}.erg-callout-success::before{content:"\f00c";background:#28a745}.erg-callout-success strong{color:#1e5c2f}.atv-dark .erg-callout-success,.erg-article[data-theme="dark"] .erg-callout-success{ background:linear-gradient(135deg,#102819,#0c1c12); border-color:#1d4a2c; color:#b3ecc4;}.atv-dark .erg-callout-success strong,.erg-article[data-theme="dark"] .erg-callout-success strong{color:#b3ecc4}.erg-callout-rose,.erg-callout-danger{ background:var(--erg-rose-soft); border-color:var(--erg-rose-border); color:#8b2020;}.erg-callout-rose::before,.erg-callout-danger::before{content:"\f06a";background:var(--erg-rose)}.atv-dark .erg-callout-rose,.atv-dark .erg-callout-danger,.erg-article[data-theme="dark"] .erg-callout-rose,.erg-article[data-theme="dark"] .erg-callout-danger{color:#f0a0a0}.erg-callout-side{ position:relative; padding:16px 20px; background:var(--erg-mint); border-radius:0 var(--erg-r) var(--erg-r) 0; border-left:4px solid var(--erg-teal); margin:16px 0;}.erg-callout-side::before{display:none}.erg-callout-side strong{color:var(--erg-teal-deep)}/* ---------------------------------------------------------------------------- 11 · QUOTE / TESTIMONIAL ---------------------------------------------------------------------------- */.erg-quote{ position:relative; background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:var(--erg-r-lg); padding:28px 26px 22px; transition:transform .35s var(--erg-ease),box-shadow .35s var(--erg-ease);}.erg-quote:hover{transform:translateY(-2px);box-shadow:var(--erg-shadow)}.erg-quote::before{ content:"\201C"; position:absolute; top:-10px;left:18px; font-size:80px; line-height:1; font-family:Georgia,serif; color:var(--erg-teal-light); opacity:.5; pointer-events:none;}.erg-quote-text{ font-size:14.5px; color:var(--erg-text); font-style:italic; line-height:1.75; margin:0 0 18px; position:relative;}.erg-quote-author{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--erg-border);}.erg-quote-avatar{ width:40px;height:40px; border-radius:50%; background:var(--erg-grad-bold); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:800; font-size:16px; flex-shrink:0;}.erg-quote-name{font-weight:800;color:var(--erg-ink);font-size:13.5px}.erg-quote-role{font-size:11.5px;color:var(--erg-mute)}/* ---------------------------------------------------------------------------- 12 · STATS (metric cards) ---------------------------------------------------------------------------- */.erg-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--erg-gap);}.erg-stat{ background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:var(--erg-r); padding:20px 18px; text-align:center; transition:transform .35s var(--erg-ease),box-shadow .35s var(--erg-ease);}.erg-stat:hover{transform:translateY(-3px);box-shadow:var(--erg-shadow)}.erg-stat-bold{ background:var(--erg-grad-bold); color:#fff; border-color:transparent; box-shadow:var(--erg-shadow-glow);}.erg-stat-bold .erg-stat-num,.erg-stat-bold .erg-stat-label,.erg-stat-bold .erg-stat-icon{color:#fff}.erg-stat-soft{background:var(--erg-grad-mint)}.erg-stat-icon{ display:block; font-size:22px; color:var(--erg-teal); margin-bottom:8px;}.erg-stat-num{ display:block; font-size:24px; font-weight:800; color:var(--erg-ink); line-height:1.1; margin-bottom:4px; letter-spacing:-0.02em;}.erg-stat-label{ display:block; font-size:11px; font-weight:600; color:var(--erg-text-2); text-transform:uppercase; letter-spacing:0.4px;}/* ---------------------------------------------------------------------------- 13 · TABLE (modern card-style) ---------------------------------------------------------------------------- */.erg-table{ width:100%; border-collapse:separate; border-spacing:0 6px; margin:16px 0;}.erg-table thead th{ background:transparent; color:var(--erg-mute); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; padding:10px 16px; text-align:left; border:0;}.erg-table tbody tr{ background:var(--erg-card); transition:all .25s var(--erg-ease); box-shadow:var(--erg-shadow-xs);}.erg-table tbody tr:hover{ background:var(--erg-card-2); transform:translateX(2px); box-shadow:var(--erg-shadow-sm);}.erg-table tbody td{ padding:14px 16px; border:1.5px solid var(--erg-border); border-left:0;border-right:0; font-size:13.5px; color:var(--erg-text);}.erg-table tbody td:first-child{ border-left:1.5px solid var(--erg-border); border-radius:12px 0 0 12px; font-weight:700; color:var(--erg-ink);}.erg-table tbody td:last-child{ border-right:1.5px solid var(--erg-border); border-radius:0 12px 12px 0;}.erg-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; padding:0 2px;}.erg-rows{ display:flex; flex-direction:column; gap:6px;}.erg-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:12px; transition:all .25s var(--erg-ease);}.erg-row:hover{border-color:var(--erg-border-strong)}.erg-row-key{color:var(--erg-text-2);font-size:13px;font-weight:600}.erg-row-val{color:var(--erg-ink);font-size:14px;font-weight:700}/* ---------------------------------------------------------------------------- 14 · FAQ ACCORDION (image 3 style — numbered,smooth expand) ---------------------------------------------------------------------------- */.erg-faq{ display:flex; flex-direction:column; gap:12px; counter-reset:ergfaq;}.erg-faq details{ counter-increment:ergfaq; background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:var(--erg-r); overflow:hidden; transition:all .35s var(--erg-ease);}.erg-faq details[open]{ border-color:var(--erg-border-strong); box-shadow:var(--erg-shadow);}.erg-faq summary{ display:flex; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; list-style:none; transition:all .25s var(--erg-ease);}.erg-faq summary::-webkit-details-marker{display:none}.erg-faq summary::before{ content:counter(ergfaq,decimal-leading-zero); flex-shrink:0; color:var(--erg-teal-light); font-weight:800; font-size:18px; letter-spacing:-0.5px; transition:color .25s var(--erg-ease); min-width:28px;}.erg-faq summary::after{ content:""; margin-left:auto; flex-shrink:0; width:36px;height:36px; border-radius:50%; background:var(--erg-mint); color:var(--erg-teal-deep); display:flex;align-items:center;justify-content:center; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="%231FA59E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-position:center; background-repeat:no-repeat; background-size:60%; transition:transform .35s var(--erg-ease),background-color .25s var(--erg-ease);}.erg-faq details[open] summary::before{color:var(--erg-teal)}.erg-faq details[open] summary::after{ background-color:var(--erg-teal); background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'); transform:rotate(180deg);}.erg-faq-q{ font-size:15px; font-weight:800; color:var(--erg-ink); line-height:1.4; flex:1;}.erg-faq-a{ padding:0 22px 22px 66px; color:var(--erg-text); font-size:14px; line-height:1.75; animation:ergFadeDown .35s var(--erg-ease);}.erg-faq-a>*:last-child{margin-bottom:0}@keyframes ergFadeDown{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)}}/* ---------------------------------------------------------------------------- 15 · COMPARISON (VS) — pro vs con / before vs after ---------------------------------------------------------------------------- */.erg-vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; margin:16px 0;}@media (max-width:600px){ .erg-vs{grid-template-columns:1fr} .erg-vs-divider{transform:rotate(90deg);margin:0 auto}}.erg-vs-item{ background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:var(--erg-r); padding:20px; transition:all .25s var(--erg-ease);}.erg-vs-item:hover{transform:translateY(-2px);box-shadow:var(--erg-shadow-sm)}.erg-vs-item.bad{background:var(--erg-rose-soft);border-color:var(--erg-rose-border)}.erg-vs-item.good{background:linear-gradient(135deg,var(--erg-mint),var(--erg-teal-soft));border-color:var(--erg-border-strong)}.erg-vs-head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; margin-bottom:12px;}.erg-vs-item.bad .erg-vs-head{color:var(--erg-rose)}.erg-vs-item.good .erg-vs-head{color:var(--erg-teal-deep)}.erg-vs-divider{ align-self:center; width:40px;height:40px; background:var(--erg-grad-bold); color:#fff; border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:12px; font-weight:800; box-shadow:var(--erg-shadow-glow);}/* ---------------------------------------------------------------------------- 16 · CTA (closing call-to-action) ---------------------------------------------------------------------------- */.erg-cta{ position:relative; background:var(--erg-grad-bold); color:#fff; border-radius:var(--erg-r-lg); padding:32px 28px; margin:32px 0 0; overflow:hidden; box-shadow:var(--erg-shadow-glow); text-align:center;}.erg-cta::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 0% 0%,rgba(255,255,255,.18) 0%,transparent 60%), radial-gradient(50% 60% at 100% 100%,rgba(255,255,255,.12) 0%,transparent 60%); pointer-events:none;}.erg-cta>*{position:relative;z-index:1}.erg-cta h2,.erg-cta h3{color:#fff;margin-bottom:8px}.erg-cta p{color:rgba(255,255,255,.9);margin-bottom:18px}.erg-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 26px; background:#fff; color:var(--erg-teal-deep); border-radius:var(--erg-r-pill); font-weight:800; font-size:14px; text-decoration:none !important; border:0 !important; box-shadow:0 8px 24px rgba(0,0,0,.15); transition:transform .25s var(--erg-ease),box-shadow .25s var(--erg-ease);}.erg-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.2);color:var(--erg-teal-deep)}.erg-btn-ghost{ background:rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.3) !important; box-shadow:none;}.erg-btn-ghost:hover{color:#fff;background:rgba(255,255,255,.25)}.erg-btn-outline{ background:transparent; color:var(--erg-teal-deep); border:1.5px solid var(--erg-teal) !important; box-shadow:none;}.erg-btn-outline:hover{background:var(--erg-mint)}/* ---------------------------------------------------------------------------- 17 · FIGURE (image with caption) ---------------------------------------------------------------------------- */.erg-figure{ margin:24px 0; border-radius:var(--erg-r-lg); overflow:hidden; background:var(--erg-card); border:1.5px solid var(--erg-border); transition:all .35s var(--erg-ease);}.erg-figure:hover{border-color:var(--erg-border-strong);box-shadow:var(--erg-shadow)}.erg-figure img{width:100%;display:block}.erg-figure figcaption{ padding:12px 18px; font-size:12.5px; color:var(--erg-text-2); text-align:center; background:var(--erg-card-2); border-top:1px solid var(--erg-border); font-style:italic;}/* ---------------------------------------------------------------------------- 18 · COUNTRY HEADER (special:bendera+nama negara — useful for pengiriman articles) ---------------------------------------------------------------------------- */.erg-country{ display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--erg-grad-mint); border:1.5px solid var(--erg-border-strong); border-radius:var(--erg-r); margin-bottom:20px;}.erg-country-flag{ width:56px;height:56px; border-radius:14px; background:var(--erg-card); border:2px solid var(--erg-border); display:flex;align-items:center;justify-content:center; font-size:32px; flex-shrink:0; box-shadow:var(--erg-shadow-sm);}.erg-country-name{ font-size:18px; font-weight:800; color:var(--erg-ink); line-height:1.2; margin:0 0 2px;}.erg-country-sub{ font-size:12.5px; color:var(--erg-text-2); margin:0;}/* ---------------------------------------------------------------------------- 19 · THEME TOGGLE FAB (floating button) ---------------------------------------------------------------------------- */.erg-theme-fab{ position:fixed; right:20px;bottom:20px; width:52px;height:52px; background:var(--erg-grad-bold); color:#fff; border:0; border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer; box-shadow:var(--erg-shadow-glow); z-index:9998; font-size:18px; transition:transform .35s var(--erg-bounce);}.erg-theme-fab:hover{transform:scale(1.1) rotate(15deg)}.erg-theme-fab .fa-moon{display:none}.erg-theme-fab .fa-sun{display:inline-block}.erg-article[data-theme="dark"]~.erg-theme-fab .fa-moon,[data-erg-theme="dark"] .erg-theme-fab .fa-moon{display:inline-block}.erg-article[data-theme="dark"]~.erg-theme-fab .fa-sun,[data-erg-theme="dark"] .erg-theme-fab .fa-sun{display:none}body[data-erg-theme="dark"] .erg-theme-fab .fa-sun{display:none}body[data-erg-theme="dark"] .erg-theme-fab .fa-moon{display:inline-block}/* ---------------------------------------------------------------------------- 20 · ANIMATIONS & UTILITIES ---------------------------------------------------------------------------- */@keyframes ergFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}@keyframes ergPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(44,197,189,.4)} 50%{box-shadow:0 0 0 8px rgba(44,197,189,0)}}.erg-pulse{animation:ergPulse 2s ease-in-out infinite}.erg-float{animation:ergFloat 3s ease-in-out infinite}.erg-mt-0{margin-top:0 !important}.erg-mb-0{margin-bottom:0 !important}.erg-text-center{text-align:center !important}.erg-mute{color:var(--erg-mute) !important}.erg-text-soft{color:var(--erg-text-2) !important}.erg-text-teal{color:var(--erg-teal-deep) !important}/* ---------------------------------------------------------------------------- 21 · RESPONSIVE FINE-TUNING ---------------------------------------------------------------------------- */@media (max-width:600px){ .erg-article{font-size:15px}  .erg-hero,.erg-hero-soft,.erg-cta{padding:24px 18px;border-radius:var(--erg-r)} .erg-hero h1,.erg-hero h2{font-size:22px} .erg-hero-stats{grid-template-columns:repeat(2,1fr);gap:8px} .erg-hero-stat{padding:12px 8px} .erg-hero-stat-num{font-size:18px}  .erg-section-title{ font-size:18px; line-height:1.3; word-wrap:break-word; overflow-wrap:break-word; hyphens:none;} .erg-section-title::before{width:4px;height:26px} .erg-section-sub{margin-left:14px;font-size:13.5px} .erg-section{margin-bottom:32px}  .erg-card,.erg-feature{padding:18px 16px} .erg-card-title,.erg-feature-title{font-size:16px;line-height:1.3;word-wrap:break-word} .erg-card-sub,.erg-feature-desc{font-size:13px}  .erg-faq summary{padding:14px 16px;gap:10px} .erg-faq summary::before{font-size:16px;min-width:22px} .erg-faq summary::after{width:30px;height:30px} .erg-faq-q{font-size:13.5px;line-height:1.4;word-wrap:break-word} .erg-faq-a{padding:0 16px 18px 50px;font-size:13px}  .erg-numlist>li{padding:12px 14px;gap:10px} .erg-numlist>li::before{width:26px;height:26px;font-size:13px} .erg-num-title{font-size:13.5px} .erg-num-desc{font-size:12.5px} .erg-steps{padding-left:32px} .erg-steps::before{left:11px} .erg-step{padding:14px 16px} .erg-step::before{left:-28px} .erg-step-title{font-size:14px} .erg-step-desc{font-size:13px}  .erg-table-wrap{overflow-x:visible;margin:0;padding:0} .erg-table{ display:block; border-spacing:0;} .erg-table thead{display:none} .erg-table tbody,.erg-table tr{display:block} .erg-table tbody tr{ background:var(--erg-card); border:1.5px solid var(--erg-border); border-radius:var(--erg-r); padding:12px 14px; margin-bottom:10px; box-shadow:var(--erg-shadow-xs);} .erg-table tbody tr:hover{transform:none} .erg-table tbody td{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border:0; border-bottom:1px dashed var(--erg-border); font-size:13.5px; text-align:right;} .erg-table tbody td:first-child{ border:0; border-bottom:1px solid var(--erg-border-strong); border-radius:0; padding-bottom:10px; margin-bottom:4px; font-size:15px; font-weight:800; color:var(--erg-ink); justify-content:flex-start;} .erg-table tbody td:last-child{ border:0; border-radius:0; padding-bottom:0;}  .erg-table tbody td:not(:first-child)::before{ content:attr(data-label); font-weight:700; color:var(--erg-text-2); font-size:12px; text-transform:uppercase; letter-spacing:0.4px; text-align:left; flex-shrink:0;}  .erg-row{ flex-direction:column; align-items:flex-start; gap:4px; padding:12px 14px;} .erg-row-key{font-size:12px;text-transform:uppercase;letter-spacing:0.3px} .erg-row-val{font-size:14px}  .erg-checklist li, .erg-checkitem{ padding:10px 12px; gap:10px; font-size:13.5px; line-height:1.55; word-wrap:break-word; overflow-wrap:break-word;} .erg-checklist li::before, .erg-checkitem::before{ width:22px; height:22px; flex-shrink:0;} .erg-checklist li:hover,.erg-checkitem:hover{transform:none}  .erg-callout{ padding:14px 16px 14px 50px; font-size:13px; line-height:1.6;} .erg-callout::before{ left:14px;top:16px; width:24px;height:24px; font-size:11px;} .erg-callout-side{padding:14px 16px;font-size:13px}  .erg-stats{grid-template-columns:repeat(2,1fr);gap:8px} .erg-stat{padding:16px 12px} .erg-stat-num{font-size:20px}  .erg-quote{padding:22px 18px 18px} .erg-quote-text{font-size:13.5px}  .erg-country{padding:14px 16px;gap:12px} .erg-country-flag{width:48px;height:48px;font-size:26px} .erg-country-name{font-size:16px} .erg-country-sub{font-size:11.5px;line-height:1.5}  .erg-bento .span-3, .erg-bento .span-4, .erg-bento .span-6, .erg-bento .span-8, .erg-bento .span-9{grid-column:span 12}  .erg-pill{font-size:11px;padding:5px 12px}  .erg-grid-2{grid-template-columns:1fr} .erg-grid-3{grid-template-columns:1fr} .erg-grid-4{grid-template-columns:repeat(2,1fr)}  .erg-btn{padding:10px 20px;font-size:13px}  .erg-vs{gap:10px}}@media (max-width:380px){ .erg-grid-4{grid-template-columns:1fr} .erg-hero-stats{grid-template-columns:1fr 1fr} .erg-stats{grid-template-columns:1fr 1fr} .erg-section-title{font-size:17px} .erg-hero h1,.erg-hero h2{font-size:20px}}@media print{ .erg-article{background:#fff !important;color:#000 !important} .erg-theme-fab,.erg-cta{display:none !important} .erg-card,.erg-callout,.erg-faq details{break-inside:avoid} .erg-faq details{open:true}}