/* Blog BDS: inti tata letak (dipakai semua situs). Warna/font dari variabel --bl-* yang diisi tema situs. */
.bl-main{display:block;color:var(--bl-ink);font-family:var(--bl-font-body)}
.bl-main *,.bl-main *::before,.bl-main *::after{box-sizing:border-box}
.bl-wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:16px}
.bl-wrap--read{max-width:760px}
@media(min-width:700px){.bl-wrap{padding-inline:24px}}
.bl-post,.bl-list{padding-block:18px 40px}
.bl-crumbs{font-size:.84rem;color:var(--bl-soft);margin:0 0 14px;line-height:1.7}
.bl-crumbs a{color:var(--bl-link);text-decoration:none}
.bl-crumbs a:hover{text-decoration:underline}
.bl-head h1{font-family:var(--bl-font-head);font-size:clamp(1.65rem,6vw,2.5rem);line-height:1.18;letter-spacing:-.02em;margin:.4em 0 .35em;color:var(--bl-ink);font-weight:700}
.bl-meta{color:var(--bl-soft);font-size:.9rem;margin:0 0 18px;line-height:1.6}
.bl-meta__by{font-weight:600;color:var(--bl-ink)}
.bl-chip{display:inline-block;font-size:.78rem;font-weight:700;color:var(--bl-link);background:var(--bl-wash);border:1px solid var(--bl-line);border-radius:999px;padding:3px 12px;text-decoration:none;line-height:1.5}
.bl-chip:hover{border-color:var(--bl-link)}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}

/* hero artikel */
.bl-hero{margin:0 0 22px}
.bl-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--bl-r-lg);background:var(--bl-surface2);border:1px solid var(--bl-border)}

.bl-toc{border:1px solid var(--bl-border);border-radius:var(--bl-r-md);padding:12px 16px;margin:0 0 24px;background:var(--bl-surface2);color:var(--bl-ink)}
.bl-toc ol{margin:8px 0 0;padding-left:20px;line-height:1.75}
.bl-toc a{color:var(--bl-link)}

/* isi artikel */
.bl-body{font-size:1.0625rem;line-height:1.8;overflow-wrap:anywhere;color:var(--bl-ink)}
.bl-body h2{font-family:var(--bl-font-head);font-size:clamp(1.28rem,4.4vw,1.55rem);line-height:1.3;margin:2em 0 .6em;scroll-margin-top:80px;color:var(--bl-ink);letter-spacing:-.015em}
.bl-body h3{font-family:var(--bl-font-head);font-size:1.15rem;line-height:1.35;margin:1.6em 0 .5em;scroll-margin-top:80px;color:var(--bl-ink)}
.bl-body p,.bl-body ul,.bl-body ol{margin:0 0 1.15em}
.bl-body ul,.bl-body ol{padding-left:1.4em}
.bl-body li{margin-bottom:.4em}
.bl-body a,.bl-faq a{color:var(--bl-link);text-decoration:underline;text-underline-offset:2px}
.bl-body img{max-width:100%;height:auto;border-radius:var(--bl-r-md)}
.bl-body figure{margin:1.4em 0}
.bl-body blockquote{margin:1.3em 0;padding:.7em 1.1em;border-left:4px solid var(--bl-btn);background:var(--bl-wash);border-radius:0 var(--bl-r-sm) var(--bl-r-sm) 0}
.bl-body blockquote p:last-child{margin-bottom:0}
.bl-body code{font-family:var(--bl-mono);font-size:.9em;background:var(--bl-surface2);border:1px solid var(--bl-border);border-radius:4px;padding:1px 5px}
.bl-body pre{overflow-x:auto;background:var(--bl-surface2);border:1px solid var(--bl-border);border-radius:var(--bl-r-md);padding:12px 14px;margin:0 0 1.2em}
.bl-body pre code{background:none;border:0;padding:0}
.tbl{overflow-x:auto;margin:0 0 1.3em;-webkit-overflow-scrolling:touch}
.bl-body table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:420px}
.bl-body th,.bl-body td{border:1px solid var(--bl-border);padding:8px 10px;text-align:left;vertical-align:top}
.bl-body th{background:var(--bl-surface2)}

/* tombol & CTA */
.bl-btn{display:inline-block;background:var(--bl-btn);color:var(--bl-on-btn);font-weight:700;font-size:.95rem;line-height:1.2;padding:12px 22px;border-radius:var(--bl-r-md);text-decoration:none;border:0}
.bl-btn:hover{background:var(--bl-btn-hover);color:var(--bl-on-btn)}
.bl-btn:focus-visible,.bl-main a:focus-visible,.bl-main summary:focus-visible{outline:2px solid var(--bl-link);outline-offset:2px}
.bl-cta{margin:2em 0;padding:20px 18px;border:1px solid var(--bl-line);background:var(--bl-wash);border-radius:var(--bl-r-lg);text-align:center;color:var(--bl-ink)}
.bl-cta strong{font-family:var(--bl-font-head);font-size:1.1rem;color:var(--bl-ink)}
.bl-cta p{margin:.4em 0 1em;color:var(--bl-soft)}

.bl-faq{margin-top:2.2em}
.bl-faq h2{font-family:var(--bl-font-head);font-size:1.4rem;margin:0 0 .7em;color:var(--bl-ink)}
.bl-faq details{border:1px solid var(--bl-border);background:var(--bl-surface);border-radius:var(--bl-r-md);padding:12px 16px;margin-bottom:10px}
.bl-faq summary{cursor:pointer;font-weight:600;color:var(--bl-ink)}
.bl-faq details p{margin:.6em 0 0;color:var(--bl-soft);line-height:1.7}

/* kartu & grid */
.bl-related{padding-block:8px 48px}
.bl-related h2{font-family:var(--bl-font-head);font-size:1.4rem;margin:0 0 14px;color:var(--bl-ink)}
.bl-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.bl-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.bl-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.bl-card{position:relative;display:flex;flex-direction:column;background:var(--bl-surface);border:1px solid var(--bl-border);border-radius:var(--bl-r-lg);overflow:hidden;color:var(--bl-ink);transition:border-color .15s,box-shadow .15s}
.bl-card:hover{border-color:var(--bl-line);box-shadow:var(--bl-shadow)}
.bl-card__img{display:block;aspect-ratio:16/9;background:var(--bl-surface2);overflow:hidden}
.bl-card__img img{display:block;width:100%;height:100%;object-fit:cover}
.bl-card__ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bl-wash),var(--bl-surface2));text-decoration:none}
.bl-card__ph span{font-family:var(--bl-font-head);font-size:2.6rem;font-weight:800;color:var(--bl-link);opacity:.55}
.bl-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 16px;flex:1}
.bl-card .bl-chip{position:relative;z-index:2}
.bl-card h3{font-family:var(--bl-font-head);font-size:1.06rem;line-height:1.35;margin:.2em 0 0;letter-spacing:-.01em}
.bl-card h3 a{color:var(--bl-ink);text-decoration:none}
.bl-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.bl-card p{font-size:.92rem;line-height:1.55;color:var(--bl-soft);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card__meta{display:flex;gap:6px;align-items:center;margin-top:auto;padding-top:6px;font-size:.8rem;color:var(--bl-soft)}
@media(min-width:760px){
  .bl-card--lead{grid-column:1/-1;flex-direction:row}
  .bl-card--lead .bl-card__img{flex:0 0 56%;aspect-ratio:auto;min-height:260px}
  .bl-card--lead .bl-card__body{padding:22px 24px;justify-content:center}
  .bl-card--lead h3{font-size:1.55rem;line-height:1.25}
  .bl-card--lead p{font-size:1rem;-webkit-line-clamp:4}
}

/* paginasi */
.bl-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:28px 0 0}
.bl-pager__a{min-width:42px;padding:9px 14px;text-align:center;border:1px solid var(--bl-border);border-radius:var(--bl-r-md);background:var(--bl-surface);color:var(--bl-link);font-weight:600;text-decoration:none;font-size:.92rem}
.bl-pager__a:hover{border-color:var(--bl-link)}
.bl-pager__a.is-cur{background:var(--bl-btn);border-color:var(--bl-btn);color:var(--bl-on-btn)}
@media(max-width:480px){.bl-body{font-size:1.03rem;line-height:1.75}.bl-toc{padding:10px 12px}.bl-cta{padding:16px 14px}}
@media(prefers-reduced-motion:reduce){.bl-card{transition:none}}

/* Tema Earnice: indigo #3B4EF0, Plus Jakarta Sans, mode terang (situs Earnice tidak punya mode gelap).
   Variabel --indigo/--ink/--line dst. berasal dari /assets/css/app.css Earnice. */
.bl-main{
  --bl-ink:#111827;--bl-soft:#4B5563;
  --bl-surface:#fff;--bl-surface2:#F5F6F8;--bl-border:var(--line,#E7EAF0);
  --bl-link:#2E3ED6;--bl-wash:#EDEFFE;--bl-line:#C9CFFB;
  --bl-btn:#3B4EF0;--bl-btn-hover:#2E3ED6;--bl-on-btn:#fff;
  --bl-r-sm:8px;--bl-r-md:11px;--bl-r-lg:16px;--bl-shadow:0 6px 18px rgba(11,18,32,.08);
  --bl-font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;--bl-font-head:'Plus Jakarta Sans',system-ui,sans-serif;
  --bl-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:16px;line-height:1.6;
}
.bl-head h1,.bl-body h2,.bl-body h3,.bl-card h3{font-weight:800;letter-spacing:-.025em}
.bl-main a.bl-btn,.bl-main a.bl-btn:hover{color:#fff;text-decoration:none}
.bl-body a{font-weight:500}
.bl-foot{padding-block:26px}