/* =========================================================
   Ditnov Blog — frontend
   ========================================================= */
.dnb{
  --dn-navy:#021476;--dn-red:#F4343A;--dn-red-soft:#FFF1F1;--dn-ink:#0F172A;
  --dn-muted:#5B6478;--dn-line:#E8ECF4;--dn-soft:#F8FAFF;--dn-ease:cubic-bezier(.16,1,.3,1);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--dn-ink);-webkit-font-smoothing:antialiased;
}
.dnb *,.dnb *::before,.dnb *::after{box-sizing:border-box}
:where(.dnb) :where(h1,h2,h3,p,ol,ul){margin:0;padding:0}
.dnb a{text-decoration:none}
.dnb button,.dnb input{font-family:inherit}
.dnb-ic{width:1em;height:1em;flex-shrink:0}
.dnb-wrap{max-width:1200px;margin:0 auto}
.dnb-section{padding:96px 24px;background:#fff}
.dnb-section--soft{background:var(--dn-soft)}

/* Head */
.dnb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.dnb-title{font-size:clamp(28px,3.4vw,38px);line-height:1.2;font-weight:800;color:var(--dn-navy);letter-spacing:-.5px;position:relative;padding-bottom:14px}
.dnb-title::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:4px;border-radius:4px;background:var(--dn-red);transform-origin:left}
.dnb-sub{margin-top:16px!important;max-width:560px;font-size:15.5px;line-height:1.7;color:var(--dn-muted)}
.dnb-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--dn-navy);border-bottom:2px solid var(--dn-red);padding-bottom:4px}
.dnb-link .dnb-ic{width:16px;height:16px;color:var(--dn-red);transition:transform .25s var(--dn-ease)}
.dnb-link:hover .dnb-ic{transform:translateX(4px)}

/* Hero halaman blog */
.dnb-hero{position:relative;overflow:hidden;padding:64px 24px 72px;background:
  radial-gradient(640px 320px at 92% 10%,rgba(244,52,58,.10),transparent 70%),
  radial-gradient(760px 420px at 0% 100%,rgba(2,20,118,.08),transparent 70%),var(--dn-soft)}
.dnb-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(2,20,118,.10) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.dnb-hero .dnb-wrap{position:relative;z-index:1}
.dnb-hero__deco{position:absolute;right:-90px;top:50%;width:320px;height:320px;border-radius:50%;border:56px solid rgba(2,20,118,.05);transform:translateY(-50%)}
.dnb-crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--dn-muted);margin-bottom:22px}
.dnb-crumb a{color:var(--dn-muted)}
.dnb-crumb a:hover{color:var(--dn-red)}
.dnb-crumb [aria-current]{color:var(--dn-navy)}
.dnb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dn-red);background:#fff;border:1px solid var(--dn-line);padding:7px 14px;border-radius:999px}
.dnb-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dn-red)}
.dnb-hero__title{margin-top:18px!important;font-size:clamp(34px,5vw,56px);line-height:1.1;font-weight:800;letter-spacing:-1.2px;color:var(--dn-navy);max-width:780px}
.dnb-hero__title span{color:var(--dn-red)}
.dnb-hero__sub{margin-top:18px!important;max-width:620px;font-size:17px;line-height:1.75;color:var(--dn-muted)}
.dnb-search{margin-top:30px;display:flex;align-items:center;gap:10px;max-width:560px;background:#fff;border:1.5px solid var(--dn-line);border-radius:14px;padding:6px 6px 6px 16px;box-shadow:0 14px 34px -18px rgba(2,20,118,.3);transition:border-color .2s,box-shadow .2s}
.dnb-search:focus-within{border-color:var(--dn-navy);box-shadow:0 0 0 4px rgba(2,20,118,.08),0 14px 34px -18px rgba(2,20,118,.3)}
.dnb-search>.dnb-ic{width:20px;height:20px;color:var(--dn-muted)}
.dnb-search input{flex:1;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;font-size:15px!important;color:var(--dn-ink);padding:10px 0!important;margin:0!important}
.dnb-search button{border:0;cursor:pointer;background:var(--dn-navy);color:#fff;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:10px;transition:background .2s}
.dnb-search button:hover{background:var(--dn-red)}

/* Daftar */
.dnb-list{padding:48px 24px 96px;background:#fff}
.dnb-result{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;margin-bottom:24px;border-radius:12px;background:var(--dn-soft);border:1px solid var(--dn-line);font-size:15px;color:var(--dn-muted)}
.dnb-result strong{color:var(--dn-navy)}
.dnb-result a{font-weight:700;color:var(--dn-red)}

.dnb-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.dnb-tab{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;border:1.5px solid var(--dn-line);background:#fff;color:var(--dn-navy)!important;font-size:14px;font-weight:700;transition:all .25s var(--dn-ease)}
.dnb-tab:hover{border-color:var(--dn-navy)}
.dnb-tab.is-active{background:var(--dn-navy);border-color:var(--dn-navy);color:#fff!important}

/* Unggulan */
.dnb-feat-wrap{margin-bottom:36px}
.dnb-feat{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;background:#fff;border:1px solid var(--dn-line);border-radius:22px;overflow:hidden;transition:box-shadow .45s var(--dn-ease)}
.dnb-feat:hover{box-shadow:0 30px 60px -24px rgba(2,20,118,.25)}
.dnb-feat__media{display:flex;align-items:center;padding:18px;background:var(--dn-soft);min-width:0}
.dnb-feat__img{position:relative;display:block;width:100%;aspect-ratio:var(--dnb-ratio,16/9);overflow:hidden;background:#EEF1FB;border-radius:14px;box-shadow:0 18px 40px -24px rgba(2,20,118,.35)}
.dnb .dnb-feat__img img,.dnb-feat__img img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;object-fit:cover;transition:transform 1s var(--dn-ease)}
.dnb-feat:hover .dnb-feat__img img{filter:brightness(1.03)}
.dnb-feat__body{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:32px 40px}
.dnb-feat__top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dnb-feat__label{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:var(--dn-red);border-radius:999px;padding:6px 12px}
.dnb-feat__cat{font-size:12.5px;font-weight:700;color:var(--dn-navy);background:#EEF1FB;border-radius:999px;padding:6px 12px}
.dnb .dnb-feat__title,.dnb-feat__title{margin:4px 0 0!important;padding:0!important;font-size:clamp(22px,2.4vw,30px);line-height:1.25;font-weight:800;letter-spacing:-.5px;color:var(--dn-ink)}
.dnb-feat__title a{color:inherit;transition:color .2s}
.dnb-feat__title a:hover{color:var(--dn-red)}
.dnb .dnb-feat__excerpt,.dnb-feat__excerpt{margin:0!important;font-size:15.5px;line-height:1.7;color:var(--dn-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dnb-feat .dnb-btn{align-self:flex-start;margin-top:6px}

/* Grid & kartu */
.dnb-grid{display:grid;gap:26px}
.dnb-cols-1{grid-template-columns:1fr}
.dnb-cols-2{grid-template-columns:repeat(2,1fr)}
.dnb-cols-3{grid-template-columns:repeat(3,1fr)}
.dnb-grid.is-loading{opacity:.35;pointer-events:none;transition:opacity .2s}
.dnb-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dn-line);border-radius:18px;overflow:hidden;transition:transform .45s var(--dn-ease),box-shadow .45s var(--dn-ease),border-color .3s}
.dnb-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px -14px rgba(2,20,118,.18);border-color:transparent}
.dnb-card.is-new{animation:dnbIn .7s var(--dn-ease) both}
@keyframes dnbIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.dnb-card__img{position:relative;display:block;flex-shrink:0;aspect-ratio:var(--dnb-ratio,16/9);overflow:hidden;background:#EEF1FB}
/* !important: tema/Elementor sering memaksa img{height:auto} sehingga ada ruang kosong di bawah gambar. */
.dnb .dnb-card__img img,.dnb-card__img img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;object-fit:cover;display:block;transition:transform .9s var(--dn-ease)}
.dnb-card:hover .dnb-card__img img{filter:brightness(1.04)}
.dnb-badge{position:absolute;top:14px;left:14px;background:var(--dn-red);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;box-shadow:0 6px 16px rgba(244,52,58,.35)}
.dnb-card__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px}
.dnb-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--dn-muted)}
.dnb-meta span{display:inline-flex;align-items:center;gap:6px}
.dnb-meta .dnb-ic{width:14px;height:14px}
.dnb .dnb-card__title,.dnb-card__title{margin:10px 0 0!important;padding:0!important;font-size:18px;line-height:1.4;font-weight:800;color:var(--dn-ink)}
.dnb-card__title a{color:inherit!important;transition:color .2s}
.dnb-card__title a:hover{color:var(--dn-red)!important}
.dnb .dnb-card__excerpt,.dnb-card__excerpt{margin:6px 0 0!important;padding:0!important;font-size:14.5px;line-height:1.65;color:var(--dn-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Tombol turun ke dasar kartu supaya sejajar di grid, jarak judul–ringkasan tetap rapat. */
.dnb-card__body .dnb-more{margin-top:auto;padding-top:16px}
.dnb-more{margin-top:18px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--dn-navy)!important;align-self:flex-start}
.dnb-more .dnb-ic{width:15px;height:15px;color:var(--dn-red);transition:transform .25s var(--dn-ease)}
.dnb-more:hover .dnb-ic{transform:translateX(4px)}
.dnb-card--sm .dnb-card__title{font-size:16.5px}

.dnb-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 20% 20%,rgba(244,52,58,.14),transparent 45%),radial-gradient(circle at 85% 85%,rgba(2,20,118,.16),transparent 50%),#fff}
.dnb-ph__ic{width:52px;height:52px;border-radius:14px;background:var(--dn-navy);color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -8px rgba(2,20,118,.5)}
.dnb-ph__ic .dnb-ic{width:24px;height:24px}
.dnb-ph__txt{font-size:14px;font-weight:800;color:var(--dn-navy)}

.dnb-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:56px 16px;border:1px dashed var(--dn-line);border-radius:18px;background:#fff;color:var(--dn-muted)}
.dnb-empty .dnb-ic{width:32px;height:32px;color:var(--dn-red)}

/* Tombol */
.dnb-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;font-size:15px;font-weight:700;background:var(--dn-navy);color:#fff!important;border:1.5px solid var(--dn-navy);cursor:pointer;transition:all .3s var(--dn-ease)}
.dnb-btn .dnb-ic{width:17px;height:17px;transition:transform .25s var(--dn-ease)}
.dnb-btn:hover{background:var(--dn-red);border-color:var(--dn-red);transform:translateY(-2px)}
.dnb-btn:hover .dnb-ic{transform:translateX(3px)}
.dnb-btn--ghost{background:#fff;color:var(--dn-navy)!important}
.dnb-btn--ghost:hover{background:var(--dn-navy);border-color:var(--dn-navy);color:#fff!important}
.dnb-btn--ghost:hover .dnb-ic{transform:rotate(90deg)}
.dnb-btn--light{background:#fff;border-color:#fff;color:var(--dn-navy)!important}
.dnb-btn--light:hover{background:var(--dn-red);border-color:var(--dn-red);color:#fff!important}
.dnb-btn.is-loading{opacity:.6;pointer-events:none}
.dnb-btn.is-loading .dnb-ic{animation:dnbSpin .8s linear infinite}
@keyframes dnbSpin{to{transform:rotate(360deg)}}
.dnb-loadmore{margin-top:40px;text-align:center}

.dnb-pages{margin-top:44px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.dnb-pages .page-numbers{min-width:44px;height:44px;padding:0 12px;display:inline-grid;place-items:center;border-radius:12px;border:1.5px solid var(--dn-line);color:var(--dn-navy);font-weight:700;background:#fff;transition:all .2s}
.dnb-pages a.page-numbers:hover{border-color:var(--dn-navy)}
.dnb-pages .page-numbers.current{background:var(--dn-navy);border-color:var(--dn-navy);color:#fff}
.dnb-pages .dots{border:0;background:transparent}

/* CTA */
.dnb-cta{position:relative;overflow:hidden;margin-top:72px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:40px 44px;border-radius:22px;background:linear-gradient(120deg,var(--dn-navy) 0%,#0B2BA8 100%);color:#fff}
.dnb-cta::after{content:"";position:absolute;right:-60px;bottom:-110px;width:260px;height:260px;border-radius:50%;border:48px solid rgba(244,52,58,.35)}
.dnb-cta>*{position:relative;z-index:1}
.dnb-cta h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;color:#fff;letter-spacing:-.3px}
.dnb-cta p{margin-top:8px!important;max-width:560px;font-size:15.5px;line-height:1.7;color:#C9D0EC}

/* ---------- Artikel ---------- */
.dnb-start,.dnb-end{display:block;height:0;width:0;overflow:hidden}
.dnb-article h2[id],.dnb-article h3[id]{scroll-margin-top:100px}

.dnb.dnb-metabar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 28px;padding:14px 18px;border-radius:14px;background:var(--dn-soft);border:1px solid var(--dn-line);font-size:14px;color:var(--dn-muted)}
.dnb-metabar span,.dnb-metabar a{display:inline-flex;align-items:center;gap:7px}
.dnb-metabar .dnb-ic{width:15px;height:15px}
.dnb.dnb-metabar .dnb-metabar__cat{font-weight:700;color:#fff;background:var(--dn-red);padding:5px 12px;border-radius:999px;text-decoration:none}

.dnb.dnb-toc{margin:32px 0;border:1px solid var(--dn-line);border-radius:16px;background:var(--dn-soft);overflow:hidden}
.dnb.dnb-toc summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;user-select:none}
.dnb.dnb-toc summary::-webkit-details-marker{display:none}
.dnb-toc__title{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--dn-navy)}
.dnb-toc__title .dnb-ic{width:20px;height:20px;padding:3px;border-radius:6px;background:var(--dn-navy);color:#fff}
.dnb-toc__count{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--dn-muted)}
.dnb.dnb-toc summary>.dnb-ic{width:18px;height:18px;color:var(--dn-muted);transition:transform .3s var(--dn-ease)}
.dnb.dnb-toc[open] summary>.dnb-ic{transform:rotate(180deg)}
.dnb.dnb-toc nav{padding:0 20px 18px;border-top:1px solid var(--dn-line)}
.dnb.dnb-toc ol{list-style:none!important;margin:0!important;padding:0!important;counter-reset:dnbtoc}
.dnb.dnb-toc .dnb-toc__list{padding-top:12px!important}
.dnb.dnb-toc li{margin:0!important;padding:0!important;counter-increment:dnbtoc}
.dnb.dnb-toc li::marker{content:none}
.dnb.dnb-toc a{display:flex;gap:10px;padding:7px 10px;border-radius:8px;font-size:15px;line-height:1.5;font-weight:600;color:var(--dn-ink)!important;text-decoration:none!important;transition:background .2s,color .2s}
.dnb.dnb-toc .dnb-toc__list>li>a::before{content:counter(dnbtoc);flex-shrink:0;min-width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid var(--dn-line);display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:var(--dn-red)}
.dnb.dnb-toc ol ol{padding-left:32px!important}
.dnb.dnb-toc ol ol a{font-weight:500;font-size:14.5px;color:var(--dn-muted)!important}
.dnb.dnb-toc ol ol a::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--dn-line);flex-shrink:0}
.dnb.dnb-toc a:hover,.dnb.dnb-toc a.is-active{background:#fff;color:var(--dn-red)!important}

.dnb.dnb-after{margin-top:48px;display:flex;flex-direction:column;gap:28px}
.dnb-share{padding:22px 24px;border-radius:16px;border:1px solid var(--dn-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.dnb-share__title{font-size:16px;font-weight:800;color:var(--dn-navy)}
.dnb-share__btns{display:flex;flex-wrap:wrap;gap:8px}
.dnb .dnb-share__btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1.5px solid var(--dn-line);background:#fff;color:var(--dn-navy)!important;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none!important;transition:all .25s var(--dn-ease)}
.dnb-share__btn .dnb-ic{width:16px;height:16px}
.dnb .dnb-share__btn:hover{transform:translateY(-2px);color:#fff!important;border-color:transparent}
.dnb-share__btn--wa:hover{background:#25D366}
.dnb-share__btn--fb:hover{background:#1877F2}
.dnb-share__btn--x:hover{background:#0F1419}
.dnb-share__btn--li:hover{background:#0A66C2}
.dnb-share__btn--tg:hover{background:#229ED9}
.dnb-share__btn--copy:hover{background:var(--dn-navy)}
.dnb .dnb-share__btn--copy.is-copied{background:#16A34A;color:#fff!important;border-color:#16A34A}

.dnb-author{display:flex;gap:22px;align-items:flex-start;padding:26px;border-radius:18px;background:linear-gradient(135deg,var(--dn-soft),#fff);border:1px solid var(--dn-line)}
.dnb .dnb-author__img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid #fff;box-shadow:0 0 0 2px var(--dn-red),0 12px 24px -10px rgba(2,20,118,.4);margin:0!important}
.dnb-author__label{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--dn-red)}
.dnb-author__name{margin-top:4px!important;font-size:20px;font-weight:800;color:var(--dn-navy)}
.dnb-author__role{margin-top:2px!important;font-size:14px;font-weight:600;color:var(--dn-muted)}
.dnb-author__bio{margin-top:10px!important;font-size:15px;line-height:1.7;color:var(--dn-ink)}
.dnb-author .dnb-more{margin-top:12px}

.dnb-related{margin-top:24px}
.dnb-related .dnb-title{font-size:26px;margin-bottom:24px!important}

.dnb-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:980;background:transparent;pointer-events:none;transform:translateY(var(--dnb-prog-y,0px));will-change:transform}
.dnb-progress.is-top{z-index:99990}
.dnb-progress.is-off{opacity:0}
.dnb-progress{transition:opacity .2s}
.dnb-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#021476,#F4343A);border-radius:0 4px 4px 0;transition:transform .1s linear}

/* ---------- Layout single post ---------- */
.dnb-single{--dnb-w:1200px;--dnb-sb:340px;--dnb-gap:48px;--dnb-top:100px;background:#fff;padding:0 0 88px}
.dnb-single__wrap{max-width:var(--dnb-w);margin:0 auto;padding:0 24px}
.dnb-single__grid{display:grid;grid-template-columns:minmax(0,1fr) var(--dnb-sb);gap:var(--dnb-gap);align-items:stretch;padding-top:40px}
.dnb-single--left .dnb-single__grid{grid-template-columns:var(--dnb-sb) minmax(0,1fr)}
.dnb-single--left .dnb-single__side{order:-1}
.dnb-single--none .dnb-single__grid{grid-template-columns:minmax(0,1fr);max-width:calc(780px + 48px)}
.dnb-single__main{min-width:0}
.dnb-single--head-full .dnb-single__top{padding:40px 0 8px}
.dnb-single--head-full.dnb-single--soft .dnb-single__top{padding:48px 0 44px;background:radial-gradient(640px 320px at 92% 10%,rgba(244,52,58,.08),transparent 70%),radial-gradient(760px 420px at 0% 100%,rgba(2,20,118,.07),transparent 70%),var(--dn-soft)}
.dnb-single--head-full .dnb-single__top .dnb-shead{max-width:900px}
.dnb-single--head-full.dnb-single--none .dnb-single__top .dnb-single__wrap{max-width:calc(780px + 48px)}

/* Header artikel */
.dnb-shead{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}
.dnb-single--head-main.dnb-single--soft .dnb-shead{padding:30px 32px;border-radius:22px;border:1px solid var(--dn-line);background:radial-gradient(420px 220px at 100% 0%,rgba(244,52,58,.08),transparent 70%),var(--dn-soft)}
.dnb-shead .dnb-crumb{margin:0;flex-wrap:wrap}
.dnb-shead__cat{font-size:12.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff!important;background:var(--dn-red);padding:6px 13px;border-radius:999px}
.dnb-shead__cat:hover{background:var(--dn-navy)}
.dnb .dnb-shead__title{margin:0!important;font-size:clamp(28px,3.6vw,42px);line-height:1.18;font-weight:800;letter-spacing:-.8px;color:var(--dn-navy)}
.dnb-shead__excerpt{font-size:17px;line-height:1.7;color:var(--dn-muted)}
.dnb-shead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;font-size:14px;color:var(--dn-muted)}
.dnb-shead__meta>span{display:inline-flex;align-items:center;gap:7px}
.dnb-shead__meta .dnb-ic{width:15px;height:15px}
.dnb-shead__author{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--dn-navy)!important}
.dnb .dnb-shead__author img{width:36px;height:36px;border-radius:50%;object-fit:cover;margin:0;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--dn-red)}
.dnb-sthumb{margin:0 0 30px;border-radius:20px;overflow:hidden;background:var(--dn-soft)}
.dnb-sthumb img{display:block;width:100%;height:auto;margin:0}
.dnb-sthumb figcaption{padding:10px 16px;font-size:13px;color:var(--dn-muted);text-align:center}

/* Isi artikel */
.dnb-content{font-size:17px;line-height:1.85;color:#1E293B;overflow-wrap:break-word}
.dnb-content p{margin:0 0 1.15em}
.dnb-content h2,.dnb-content h3,.dnb-content h4{color:var(--dn-navy);font-weight:800;letter-spacing:-.3px;line-height:1.3;margin:1.9em 0 .6em}
.dnb-content h2{font-size:clamp(23px,2.4vw,28px)}
.dnb-content h3{font-size:clamp(19px,2vw,22px)}
.dnb-content h4{font-size:18px}
.dnb-content a{color:var(--dn-red);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.dnb-content a:hover{color:var(--dn-navy)}
.dnb-content ul,.dnb-content ol{margin:0 0 1.2em;padding-left:1.4em}
.dnb-content li{margin:.35em 0}
.dnb-content li::marker{color:var(--dn-red);font-weight:700}
.dnb-content strong{color:var(--dn-ink)}
.dnb-content img{max-width:100%;height:auto;border-radius:14px}
.dnb-content figure{margin:1.6em 0}
.dnb-content figcaption{margin-top:8px;font-size:13.5px;color:var(--dn-muted);text-align:center}
.dnb-content blockquote{margin:1.6em 0;padding:18px 22px;border-left:4px solid var(--dn-red);border-radius:0 14px 14px 0;background:var(--dn-red-soft);font-size:17px;color:var(--dn-ink)}
.dnb-content blockquote p:last-child{margin-bottom:0}
.dnb-content table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px;display:block;overflow-x:auto}
.dnb-content th,.dnb-content td{padding:11px 14px;border:1px solid var(--dn-line);text-align:left;vertical-align:top}
.dnb-content th{background:var(--dn-soft);color:var(--dn-navy);font-weight:700}
.dnb-content code{font-size:.9em;background:var(--dn-soft);border:1px solid var(--dn-line);border-radius:6px;padding:1px 6px}
.dnb-content pre{padding:18px;border-radius:14px;background:#0F172A;color:#E2E8F0;overflow-x:auto;font-size:14px;line-height:1.7}
.dnb-content pre code{background:none;border:0;padding:0;color:inherit}
.dnb-content hr{border:0;height:1px;background:var(--dn-line);margin:2.2em 0}
.dnb-content .dnb-toc a,.dnb-content .dnb-share a,.dnb-content .dnb-author a,.dnb-content .dnb-related a,.dnb-content .dnb-inline a{text-decoration:none}
.dnb-comments{margin-top:56px;padding-top:32px;border-top:1px solid var(--dn-line)}

/* Inline related (Baca Juga) */
.dnb.dnb-inline{margin:1.8em 0;clear:both}
.dnb.dnb-inline a{display:flex;align-items:center;gap:16px;text-decoration:none!important;color:var(--dn-ink)!important;transition:all .3s var(--dn-ease)}
.dnb-inline--card a{padding:12px 18px 12px 12px;border:1px solid var(--dn-line);border-radius:16px;background:linear-gradient(120deg,var(--dn-soft),#fff)}
.dnb-inline--card a:hover{border-color:var(--dn-navy);box-shadow:0 18px 36px -20px rgba(2,20,118,.35);transform:translateY(-2px)}
.dnb-inline__img{flex-shrink:0;width:124px;height:auto;aspect-ratio:120/63;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--dn-navy);color:#fff}
.dnb .dnb-inline__img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;border-radius:0!important}
.dnb-inline__img .dnb-ic{width:24px;height:24px}
.dnb-inline__body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.dnb-inline__label{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--dn-red)}
.dnb-inline__title{font-size:16.5px;line-height:1.45;font-weight:800;color:var(--dn-navy);transition:color .2s}
.dnb.dnb-inline a>.dnb-ic{width:20px;height:20px;flex-shrink:0;color:var(--dn-red);transition:transform .25s var(--dn-ease)}
.dnb.dnb-inline a:hover>.dnb-ic{transform:translateX(4px)}
.dnb.dnb-inline a:hover .dnb-inline__title{color:var(--dn-red)}
.dnb-inline--text a{padding:14px 18px;border-left:4px solid var(--dn-red);border-radius:0 12px 12px 0;background:var(--dn-soft)}
.dnb-inline--text .dnb-inline__body{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}

/* Sidebar */
.dnb-single__side{min-width:0}
.dnb-single__side-in{display:flex;flex-direction:column;gap:22px}
.dnb-single--sticky-all .dnb-single__side-in{position:sticky;top:var(--dnb-stick,calc(var(--dnb-top) + var(--wp-admin--admin-bar--height,0px)))}
.dnb-single--sticky-last .dnb-single__side-in{height:100%}
.dnb-single--sticky-last .dnb-single__side-in>.dnb-sbk:last-child{position:sticky;top:calc(var(--dnb-top) + var(--wp-admin--admin-bar--height,0px))}
.dnb-sbk{padding:22px;border:1px solid var(--dn-line);border-radius:18px;background:#fff}
.dnb-sbk__title{display:flex;align-items:center;gap:10px;margin:0 0 14px!important;font-size:16px;font-weight:800;color:var(--dn-navy);padding-bottom:12px;border-bottom:1px solid var(--dn-line);position:relative}
.dnb-sbk__title::after{content:"";position:absolute;left:0;bottom:-1px;width:36px;height:3px;border-radius:3px;background:var(--dn-red)}
.dnb-sbk__title .dnb-ic{width:20px;height:20px;padding:3px;border-radius:6px;background:var(--dn-navy);color:#fff}

.dnb-sbk--toc .dnb-toc--side{max-height:min(52vh,460px);overflow-y:auto;scrollbar-width:thin;margin-right:-8px;padding-right:8px}
.dnb-toc--side ol{list-style:none!important;margin:0!important;padding:0!important;counter-reset:dnbtoc}
.dnb-toc--side li{margin:0!important;padding:0!important;counter-increment:dnbtoc}
.dnb-toc--side a{display:flex;gap:10px;padding:7px 10px;border-radius:8px;font-size:14px;line-height:1.45;font-weight:600;color:var(--dn-ink)!important;transition:background .2s,color .2s}
.dnb-toc--side .dnb-toc__list>li>a::before{content:counter(dnbtoc);flex-shrink:0;min-width:20px;height:20px;border-radius:6px;background:var(--dn-soft);border:1px solid var(--dn-line);display:inline-grid;place-items:center;font-size:11px;font-weight:800;color:var(--dn-red)}
.dnb-toc--side ol ol{padding-left:30px!important}
.dnb-toc--side ol ol a{font-weight:500;font-size:13.5px;color:var(--dn-muted)!important;padding:5px 10px}
.dnb-toc--side a:hover{background:var(--dn-soft);color:var(--dn-red)!important}
.dnb-toc--side a.is-active{background:var(--dn-red-soft);color:var(--dn-red)!important}

.dnb-sbsearch{display:flex;align-items:center;gap:6px;border:1.5px solid var(--dn-line);border-radius:12px;padding:4px 4px 4px 14px;transition:border-color .2s}
.dnb-sbsearch:focus-within{border-color:var(--dn-navy)}
.dnb-sbsearch input{flex:1;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;font-size:14.5px!important;padding:8px 0!important;margin:0!important;color:var(--dn-ink)}
.dnb-sbsearch button{flex-shrink:0;width:40px;height:40px;border:0;border-radius:9px;background:var(--dn-navy);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s;padding:0}
.dnb-sbsearch button:hover{background:var(--dn-red)}
.dnb-sbsearch button .dnb-ic{width:18px;height:18px}

.dnb-sblist{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:4px;counter-reset:dnbsb}
.dnb-sblist li{margin:0!important;counter-increment:dnbsb}
.dnb-sblist a{display:flex;gap:12px;align-items:center;padding:8px;margin:0 -8px;border-radius:12px;transition:background .2s}
.dnb-sblist a:hover{background:var(--dn-soft)}
.dnb-sblist__img{flex-shrink:0;width:96px;height:auto;aspect-ratio:120/63;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--dn-navy);color:#fff;box-shadow:0 0 0 1px var(--dn-line)}
.dnb .dnb-sblist__img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;border-radius:0!important}
.dnb-sblist__img .dnb-ic{width:20px;height:20px}
.dnb-sblist--num a::before{content:counter(dnbsb,decimal-leading-zero);flex-shrink:0;font-size:20px;font-weight:800;color:var(--dn-line);min-width:30px;-webkit-text-stroke:1px var(--dn-navy);color:transparent}
.dnb-sblist__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.dnb-sblist__title{font-size:14px;line-height:1.4;font-weight:700;color:var(--dn-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.dnb-sblist a:hover .dnb-sblist__title{color:var(--dn-red)}
.dnb-sblist__date{font-size:12.5px;color:var(--dn-muted)}

.dnb-sbcats{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:4px}
.dnb-sbcats li{margin:0!important}
.dnb-sbcats a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14.5px;font-weight:700;color:var(--dn-ink)!important;transition:all .2s}
.dnb-sbcats a:hover,.dnb-sbcats a.is-active{background:var(--dn-soft);color:var(--dn-red)!important}
.dnb-sbcats em{font-style:normal;font-size:12px;font-weight:700;min-width:28px;text-align:center;padding:2px 8px;border-radius:999px;background:var(--dn-soft);color:var(--dn-muted)}
.dnb-sbcats a.is-active em{background:var(--dn-red);color:#fff}

.dnb-sbk--cta{position:relative;overflow:hidden;border:0;background:linear-gradient(135deg,var(--dn-navy) 0%,#0B2BA8 100%);color:#fff}
.dnb-sbk--cta::after{content:"";position:absolute;right:-50px;bottom:-70px;width:160px;height:160px;border-radius:50%;border:30px solid rgba(244,52,58,.35)}
.dnb-sbk--cta>*{position:relative;z-index:1}
.dnb-sbk__cta-title{font-size:18px;line-height:1.35;font-weight:800;color:#fff}
.dnb-sbk__cta-text{margin-top:8px!important;font-size:14px;line-height:1.65;color:#C9D0EC}
.dnb-sbk--cta .dnb-btn{margin-top:16px;padding:11px 18px;font-size:14px}

.dnb-single--sbtoc .dnb-content .dnb-toc{display:none}
.dnb-sbk--widget{font-size:14.5px;line-height:1.65}
.dnb-sbk--widget ul{list-style:none;margin:0;padding:0}
.dnb-sbk--widget li{padding:6px 0;border-bottom:1px dashed var(--dn-line)}
.dnb-sbk--widget li:last-child{border-bottom:0}
.dnb-sbk--widget a{color:var(--dn-ink)}
.dnb-sbk--widget a:hover{color:var(--dn-red)}
.dnb-sbk--widget img{max-width:100%;height:auto;border-radius:12px}

@media (max-width:1024px){
  .dnb-single__grid,.dnb-single--left .dnb-single__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .dnb-single--left .dnb-single__side{order:0}
  .dnb-single__side-in,.dnb-single--sticky-last .dnb-single__side-in>.dnb-sbk:last-child{position:static!important;max-height:none!important;overflow:visible!important}
  .dnb-single--mobile-hide .dnb-single__side{display:none}
  .dnb-sbk--toc{display:none}
  .dnb-single--sbtoc .dnb-content .dnb-toc{display:block}
}
@media (max-width:680px){
  .dnb-single__wrap{padding:0 16px}
  .dnb-single__grid{padding-top:24px}
  .dnb-single--head-main.dnb-single--soft .dnb-shead{padding:22px 18px;border-radius:18px}
  .dnb-content{font-size:16.5px}
  .dnb-inline__img{width:96px}
  .dnb-inline__title{font-size:15px}
  .dnb.dnb-inline a>.dnb-ic{display:none}
}

/* ---------- Perbaikan sticky (Neve dll.) ---------- */
@supports (overflow:clip){
  html:has(body.dnb-sfix),body.dnb-sfix,
  body.dnb-sfix .wrapper,body.dnb-sfix .neve-main,body.dnb-sfix #page,body.dnb-sfix .site,body.dnb-sfix #content,body.dnb-sfix .site-content,body.dnb-sfix #main{overflow-x:clip!important;overflow-y:visible!important}
}
body.dnb-sfix .dnb-single{width:100%}

/* ---------- Populer, rekomendasi, tag ---------- */
.dnb-sbk__title .dnb-ic{flex-shrink:0}
.dnb-sbk--popular .dnb-sbk__title .dnb-ic{background:var(--dn-red)}
.dnb-sblist--rank{counter-reset:dnbrank}
.dnb-sblist--rank li{counter-increment:dnbrank}
.dnb-sblist--rank a{position:relative}
.dnb-sblist--rank:not(.dnb-sblist--num) a::after{content:counter(dnbrank);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--dn-red);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.dnb-sblist--rank.dnb-sblist--num a::before{content:counter(dnbrank,decimal-leading-zero)}
.dnb-sbk--inline{margin:1.6em 0}
.dnb-tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.dnb .dnb-tag{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--dn-soft);border:1px solid var(--dn-line);font-size:13px;font-weight:700;color:var(--dn-navy)!important;text-decoration:none!important;transition:all .2s}
.dnb .dnb-tag:hover,.dnb .dnb-tag.is-active{background:var(--dn-navy);border-color:var(--dn-navy);color:#fff!important}
.dnb-atags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dnb-atags__label{display:inline-flex;align-items:center;gap:7px;margin-right:4px;font-size:14px;font-weight:800;color:var(--dn-navy)}
.dnb-atags__label .dnb-ic{width:16px;height:16px;color:var(--dn-red)}

/* Artikel sebelumnya / berikutnya */
.dnb-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dnb .dnb-pn__item{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--dn-line);border-radius:16px;background:#fff;text-decoration:none!important;transition:border-color .2s,box-shadow .3s var(--dn-ease),transform .3s var(--dn-ease);min-width:0}
.dnb .dnb-pn__item:hover{border-color:var(--dn-navy);box-shadow:0 16px 32px -20px rgba(2,20,118,.35);transform:translateY(-2px)}
.dnb-pn__item--next{justify-content:flex-end;text-align:right}
.dnb-pn__item--empty{border:0;background:transparent}
.dnb-pn__img{flex-shrink:0;width:112px;height:auto;aspect-ratio:120/63;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--dn-line)}
.dnb .dnb-pn__img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;border-radius:0!important}
.dnb-pn__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.dnb-pn__label{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--dn-red)}
.dnb-pn__title{font-size:15px;line-height:1.4;font-weight:800;color:var(--dn-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Baca juga: daftar */
.dnb.dnb-inline--list{padding:16px 20px;border-radius:14px;background:var(--dn-soft);border:1px solid var(--dn-line);border-left:4px solid var(--dn-red)}
.dnb-inline--list .dnb-inline__label{display:block;margin-bottom:8px}
.dnb-inline--list ul{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:6px}
.dnb-inline--list li{margin:0!important;padding-left:18px!important;position:relative}
.dnb-inline--list li::before{content:"";position:absolute;left:2px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--dn-red)}
.dnb.dnb-inline--list a{display:inline;padding:0;border:0;background:none;font-size:15.5px;font-weight:700;color:var(--dn-navy)!important;text-decoration:none!important;transform:none!important;box-shadow:none!important}
.dnb.dnb-inline--list a:hover{color:var(--dn-red)!important;text-decoration:underline!important}
@media (max-width:680px){.dnb-pn{grid-template-columns:1fr}.dnb-pn__item--empty{display:none}}

/* ---------- Arsip kategori / tag / penulis ---------- */
.dnb-archive .dnb-hero{padding-bottom:56px}
.dnb-arc-stats{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font-size:14.5px;color:var(--dn-muted)}
.dnb-arc-stats span{display:inline-flex;align-items:center;gap:8px}
.dnb-arc-stats .dnb-ic{width:17px;height:17px;color:var(--dn-red)}
.dnb-arc-stats strong{color:var(--dn-navy)}
.dnb-tab__n{margin-left:8px;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--dn-soft);font-size:11.5px;font-weight:800;color:var(--dn-muted);text-align:center}
.dnb-tab.is-active .dnb-tab__n{background:rgba(255,255,255,.18);color:#fff}
.dnb-arc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:8px 0 22px}
.dnb .dnb-arc-h{display:flex;align-items:center;gap:10px;margin:0;font-size:clamp(20px,2.2vw,24px);font-weight:800;letter-spacing:-.3px;color:var(--dn-navy)}
.dnb-arc-h .dnb-ic{width:24px;height:24px;padding:4px;border-radius:7px;background:var(--dn-red);color:#fff}
.dnb-arc-count{font-size:14px;font-weight:600;color:var(--dn-muted)}
.dnb-arc-pop{margin:0 0 44px;padding:22px;border-radius:20px;background:var(--dn-soft);border:1px solid var(--dn-line)}
.dnb-arc-pop .dnb-arc-h{font-size:18px;margin-bottom:16px}
.dnb-arc-pop__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dnb-mini{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--dn-line);transition:transform .35s var(--dn-ease),box-shadow .35s var(--dn-ease),border-color .2s;min-width:0}
.dnb-mini:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 18px 34px -18px rgba(2,20,118,.35)}
.dnb-mini__n{position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;background:var(--dn-red);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 3px var(--dn-soft)}
.dnb-mini__img{flex-shrink:0;width:96px;height:auto;aspect-ratio:120/63;border-radius:10px;overflow:hidden;background:var(--dn-navy);color:#fff;display:grid;place-items:center}
.dnb .dnb-mini__img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;border-radius:0!important}
.dnb-mini__img .dnb-ic{width:22px;height:22px}
.dnb-mini__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.dnb-mini__title{font-size:14px;line-height:1.4;font-weight:800;color:var(--dn-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dnb-mini:hover .dnb-mini__title{color:var(--dn-red)}
.dnb-mini__meta{font-size:12.5px;color:var(--dn-muted)}
.dnb-archive .dnb-arc-chips{margin-bottom:34px}

/* Halaman penulis */
.dnb-prof{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.dnb-prof__photo{position:relative;width:200px;height:200px}
.dnb-prof__photo::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 200deg,var(--dn-red),var(--dn-navy),var(--dn-red));opacity:.9}
.dnb-prof__photo::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:#fff}
.dnb .dnb-prof__photo img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;margin:0;box-shadow:0 24px 50px -20px rgba(2,20,118,.5)}
.dnb-prof__body .dnb-hero__title{margin-top:14px!important}
.dnb-prof__role{margin-top:8px!important;font-size:17px;font-weight:700;color:var(--dn-red)}
.dnb-prof__skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px!important;list-style:none}
.dnb-prof__skills li{margin:0;padding:6px 13px;border-radius:999px;background:#fff;border:1px solid var(--dn-line);font-size:13px;font-weight:700;color:var(--dn-navy)}
.dnb-prof__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.dnb-prof__actions .dnb-btn svg{width:18px;height:18px}
.dnb-prof__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,220px));gap:14px;margin-top:40px}
.dnb-prof__stats div{padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--dn-line);box-shadow:0 14px 30px -24px rgba(2,20,118,.35)}
.dnb-prof__stats strong{display:block;font-size:30px;line-height:1.1;font-weight:800;color:var(--dn-navy);font-variant-numeric:tabular-nums}
.dnb-prof__stats span{font-size:13.5px;color:var(--dn-muted)}

/* Ikon sosial */
.dnb-social{display:flex;flex-wrap:wrap;gap:8px}
.dnb .dnb-social__a{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fff;border:1.5px solid var(--dn-line);color:var(--dn-navy)!important;text-decoration:none!important;transition:all .25s var(--dn-ease)}
.dnb-social__a svg{width:17px;height:17px}
.dnb .dnb-social__a:hover{transform:translateY(-2px);color:#fff!important;border-color:transparent}
.dnb-social__a--li:hover{background:#0A66C2}
.dnb-social__a--ig:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.dnb-social__a--wa:hover{background:#25D366}
.dnb-social--sm .dnb-social__a{width:34px;height:34px;border-radius:10px}
.dnb-social--sm .dnb-social__a svg{width:15px;height:15px}
.dnb-social--lg .dnb-social__a{width:48px;height:48px;border-radius:13px}
.dnb-social--lg .dnb-social__a svg{width:20px;height:20px}

/* Kotak penulis (versi baru) */
.dnb-author__imglink{flex-shrink:0;border-radius:50%}
.dnb-author__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.dnb .dnb-author__name a{color:inherit!important;text-decoration:none!important;transition:color .2s}
.dnb .dnb-author__name a:hover{color:var(--dn-red)!important}
.dnb-author .dnb-social{margin-top:4px}
.dnb-content .dnb-after p,.dnb-content .dnb-inline p{margin-bottom:0}

@media (max-width:1024px){
  .dnb-arc-pop__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .dnb-arc-pop{padding:18px 14px}
  .dnb-arc-pop__grid{grid-template-columns:1fr}
  .dnb-prof{grid-template-columns:1fr;gap:24px;justify-items:start}
  .dnb-prof__photo{width:130px;height:130px}
  .dnb-prof__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
  .dnb-prof__stats div{padding:14px}
  .dnb-prof__stats strong{font-size:24px}
  .dnb-prof__actions .dnb-btn{flex:1 1 100%;justify-content:center}
}

/* Responsif */
@media (max-width:1024px){
  .dnb-cols-3{grid-template-columns:repeat(2,1fr)}
  .dnb-feat{grid-template-columns:1fr}
  .dnb-feat__img{min-height:0}
  .dnb-feat__media{padding:14px 14px 0;background:transparent}
  .dnb-feat__body{padding:24px 22px 26px}
}
@media (max-width:680px){
  .dnb-section{padding:64px 16px}
  .dnb-hero{padding:40px 16px 48px}
  .dnb-list{padding:32px 16px 64px}
  .dnb-cols-2,.dnb-cols-3{grid-template-columns:1fr}
  .dnb-tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 6px;scrollbar-width:none}
  .dnb-tabs::-webkit-scrollbar{display:none}
  .dnb-tab{flex-shrink:0}
  .dnb-search button{padding:12px 14px}
  .dnb-cta{padding:30px 24px;margin-top:48px}
  .dnb-author{flex-direction:column}
  .dnb-share{flex-direction:column;align-items:flex-start}
  .dnb .dnb-share__btn span{display:none}
  .dnb .dnb-share__btn{width:44px;justify-content:center;padding:0}
}
@media (prefers-reduced-motion:reduce){.dnb *{animation:none!important;transition:none!important}}

/* Kartu kecil (terkait, pilihan, populer): info satu baris */
.dnb-card--sm .dnb-meta{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;gap:14px}
.dnb-card--sm .dnb-meta span{min-width:0}
.dnb-card--sm .dnb-meta span:last-child{overflow:hidden;text-overflow:ellipsis}
@media (max-width:680px){.dnb-sblist__img{width:84px}.dnb-pn__img{width:88px}}

/* =========================================================
   Produk digital & kursus (sidebar)
   ========================================================= */
.dnb-shop{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:6px}
.dnb-shop li{margin:0!important}
.dnb .dnb-shop__a{display:flex;gap:12px;align-items:center;padding:8px;margin:0 -8px;border-radius:12px;text-decoration:none!important;transition:background .2s}
.dnb .dnb-shop__a:hover{background:var(--dn-soft)}
.dnb-shop__media{position:relative;flex-shrink:0;width:104px}
.dnb-shop__img{display:grid;place-items:center;width:100%;height:auto;aspect-ratio:120/63;border-radius:10px;overflow:hidden;background:var(--dn-navy);color:#fff;box-shadow:0 0 0 1px var(--dn-line)}
.dnb .dnb-shop__img img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;border-radius:0!important}
.dnb-shop__img .dnb-ic{width:22px;height:22px}
.dnb-shop__off{position:absolute;top:-6px;right:-6px;background:var(--dn-red);color:#fff;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:999px;box-shadow:0 4px 10px rgba(244,52,58,.35)}
.dnb-shop__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.dnb-shop__title{font-size:14px;line-height:1.4;font-weight:700;color:var(--dn-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.dnb-shop__a:hover .dnb-shop__title{color:var(--dn-red)}
.dnb-shop__sub{font-size:12px;color:var(--dn-muted)}
.dnb-shop__price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.dnb-shop__price s{font-size:12px;color:var(--dn-muted)}
.dnb-shop__price strong{font-size:14.5px;font-weight:800;color:var(--dn-navy)}
.dnb-shop__price .is-free{color:#0a7a3e}
.dnb .dnb-shop__more{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:11px 14px;border-radius:12px;background:var(--dn-navy);color:#fff!important;font-size:14px;font-weight:700;text-decoration:none!important;transition:background .2s}
.dnb .dnb-shop__more:hover{background:var(--dn-red)}
.dnb-shop__more .dnb-ic{width:16px;height:16px}
.dnb-sbk--shop .dnb-sbk__title .dnb-ic{color:#fff}
.dnb-shopcard{text-decoration:none!important}
.dnb-shopcard .dnb-card__body{gap:6px}
.dnb-shopcard__kind{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--dn-red)}

/* =========================================================
   Newsletter
   ========================================================= */
.dnb-nl{position:relative;border-radius:20px;overflow:hidden;color:#fff;background:radial-gradient(420px 220px at 100% 0%,rgba(244,52,58,.45),transparent 70%),linear-gradient(135deg,var(--dn-navy) 0%,#0B2BA8 100%);padding:28px}
.dnb-nl__txt{display:flex;flex-direction:column;gap:8px}
.dnb-nl__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14)}
.dnb-nl__ic .dnb-ic{width:22px;height:22px}
.dnb .dnb-nl__title{font-size:20px;line-height:1.3;font-weight:800;color:#fff;margin:0}
.dnb .dnb-nl__text{font-size:14.5px;line-height:1.6;color:#D8DDF5;margin:0}
.dnb-nl__form{margin-top:16px}
.dnb-nl__fields{display:flex;gap:8px;flex-wrap:wrap}
.dnb .dnb-nl__fields input{flex:1 1 200px;min-width:0;height:48px;border:0!important;border-radius:12px!important;padding:0 16px!important;font-size:15px!important;background:#fff!important;color:var(--dn-ink)!important;box-shadow:none!important;margin:0!important}
.dnb .dnb-nl__fields input:focus{outline:3px solid rgba(255,255,255,.4)!important}
.dnb .dnb-nl__fields button{flex:0 0 auto;height:48px;border:0;border-radius:12px;padding:0 22px;background:var(--dn-red);color:#fff;font-size:15px;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s;font-family:inherit}
.dnb .dnb-nl__fields button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(244,52,58,.7)}
.dnb .dnb-nl__fields button:disabled{opacity:.7;cursor:wait}
.dnb .dnb-nl__hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.dnb .dnb-nl__msg{margin:10px 0 0;font-size:14px;font-weight:600;min-height:0}
.dnb .dnb-nl__msg:empty{display:none}
.dnb .dnb-nl__msg.is-ok{color:#B8F5CF}
.dnb .dnb-nl__msg.is-err{color:#FFD0D2}
.dnb .dnb-nl__privacy{margin:10px 0 0;font-size:12.5px;color:#B9C1E6}
.dnb-nl__form.is-done .dnb-nl__fields{display:none}
.dnb-nl--wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:32px 36px;margin:56px 0 28px}
.dnb-nl--wide .dnb-nl__form{margin-top:0}
.dnb-after .dnb-nl--wide{margin:0}
.dnb-nl--side{padding:22px;border-radius:16px}
.dnb .dnb-nl--side .dnb-nl__title{font-size:17px}
.dnb-nl--side .dnb-nl__fields{flex-direction:column}
.dnb .dnb-nl--side .dnb-nl__fields input,.dnb .dnb-nl--side .dnb-nl__fields button{flex:0 0 auto;width:100%;height:44px}
.dnb-sbk--nl{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
@media (max-width:780px){.dnb-nl--wide{grid-template-columns:1fr;padding:26px 22px;margin-top:40px}}
/* 1.7 Top Up Murah (Topupsmith) */
.dnb-shop__img--sq{aspect-ratio:1/1;background:#fff}
.dnb .dnb-shop__img--sq img{object-fit:cover}
.dnb-card__img--logo{display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,#eef1ff,#fff5f5)}
.dnb .dnb-card__img--logo img{width:auto!important;height:62%!important;max-width:62%!important;aspect-ratio:1/1;object-fit:cover;border-radius:18px!important;box-shadow:0 8px 24px rgba(2,20,118,.14)}
.dnb-shop__price small{font-size:11px;font-weight:600;opacity:.7}