.dnu-page{--dnu-primary:var(--g,#15803d);--dnu-dark:var(--navy,#0d3b22);--dnu-line:#e3ebe7;--dnu-mut:#6b7780;--dnu-ink:#1f2937;--dnu-serif:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#eeefee;padding-bottom:60px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:var(--dnu-ink)}
.dnu-page *{box-sizing:border-box}
.dnu-wrap{max-width:1320px;margin:0 auto;padding:0 16px}
@media(min-width:900px){.dnu-wrap{padding:0 32px}}

/* hero + breadcrumb: mengikuti .page-band tema */
.dnu-hero{background:var(--band-bg,#0d2a1c) center/cover no-repeat;color:var(--band-tx,#d1fae5);padding:48px 0 40px}
.dnu-crumb ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--band-tt,#fff)}
.dnu-crumb li{display:flex;align-items:center;font-weight:700}
.dnu-crumb li+li:before{content:"";width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin:0 12px 0 8px;opacity:.85}
.dnu-crumb a{color:var(--band-lk,#86efac);font-weight:500;text-decoration:none}
.dnu-crumb a:hover{text-decoration:underline}
.dnu-hero h1{font-family:inherit;font-size:32px;line-height:1.25;color:var(--band-tt,#fff);margin:0;font-weight:700}
.dnu-hero p{margin:12px 0 0;font-size:15px;max-width:720px;color:var(--band-tx,#d1fae5)}

/* kartu putih */
.dnu-shell{background:#fff;border-radius:16px;margin-top:28px;padding:28px 36px 40px;display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"side top" "side main";gap:0 22px;align-items:start;box-shadow:0 4px 24px #0000000d}

/* sidebar */
.dnu-top{grid-area:top;min-width:0}
.dnu-main{grid-area:main;min-width:0}
.dnu-side{grid-area:side;border:1px solid #d8ece4;border-radius:12px;padding:18px 14px}
.dnu-side-toggle{display:none}
.dnu-side .dnu-side-h{font-size:14px;margin:0 0 14px 2px;color:#2b2b2b;font-weight:700}
.dnu-all{display:block;font-size:13px;color:var(--dnu-mut);margin:0 0 10px 2px;text-decoration:none}
.dnu-all.is-active,.dnu-all:hover{color:var(--dnu-primary);font-weight:700}
.dnu-tree,.dnu-sub,.dnu-years{list-style:none;margin:0;padding:0}
.dnu-tree>li{margin-bottom:14px}
.dnu-topic{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:#4b5563;text-decoration:none;padding:2px 0 2px 12px}
.dnu-topic:hover{color:var(--dnu-primary)}
.dnu-caret{flex:0 0 auto;margin-top:6px;border-left:8px solid var(--dnu-primary);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
.is-open>.dnu-topic .dnu-caret{transform:rotate(90deg)}
.is-active>.dnu-topic{color:var(--dnu-primary);font-weight:700}
.dnu-years{margin:6px 0 0 44px}
.dnu-years li{margin:0 0 8px}
.dnu-years a{font-size:14px;color:#4b5563;text-decoration:none}
.dnu-years a:hover{color:var(--dnu-primary)}
.dnu-years .is-active a{color:var(--dnu-primary);font-weight:700}
.dnu-sub{margin:6px 0 0 14px}

/* konten */
.dnu-h{font-family:var(--dnu-serif);font-size:clamp(28px,3.4vw,38px);color:var(--sec-tt,#0f6e32);margin:6px 0 26px;font-weight:700;line-height:1.2}
.dnu-h span{font-size:.6em;color:var(--dnu-mut);font-weight:600}
.dnu-search{display:flex;align-items:center;gap:10px;border:1px solid var(--dnu-line);border-radius:10px;padding:6px 6px 6px 14px;margin-bottom:22px;color:#9aa3a0}
.dnu-search input[type=search]{flex:1;border:0;outline:0;background:none;font:inherit;font-size:14px;padding:8px 0;color:var(--dnu-ink);min-width:0;box-shadow:none}
.dnu-search button{background:var(--dnu-primary);color:#fff;border:0;border-radius:8px;padding:9px 20px;font-weight:700;font-size:13px;cursor:pointer}
.dnu-search button:hover{filter:brightness(1.08)}
.dnu-list{display:flex;flex-direction:column;gap:16px}
.dnu-item{display:flex;gap:18px;border:1px solid var(--dnu-line);border-radius:12px;padding:16px 18px}
.dnu-ico{flex:0 0 52px}
.dnu-body{flex:1;min-width:0}
.dnu-chip{display:inline-block;background:#f1f3f2;color:#4b5563;font-size:12px;padding:5px 12px;border-radius:6px;margin-bottom:14px}
.dnu-body h3{margin:0 0 8px;font-size:17px;line-height:1.4;font-weight:600}
.dnu-body h3 a{color:#1f2937;text-decoration:none}
.dnu-body h3 a:hover{color:var(--dnu-primary)}
.dnu-ex{margin:0 0 14px;font-size:13px;line-height:1.55;color:#374151;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dnu-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dnu-dates{display:flex;gap:14px;flex-wrap:wrap}
.dnu-dates span{background:#f3f4f3;color:#4b5563;font-size:11px;padding:6px 10px;border-radius:6px}
.dnu-acts2{display:flex;gap:10px;margin-left:auto}
.dnu-b{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;border:1px solid var(--dnu-primary);transition:.15s}
.dnu-b--o{background:#fff;color:var(--dnu-primary)}
.dnu-b--o:hover{background:#eefaf3}
.dnu-b--s{background:var(--dnu-primary);color:#fff}
.dnu-b--s:hover{filter:brightness(1.08);color:#fff}
.dnu-none{padding:26px;text-align:center;color:var(--dnu-mut);background:#f7f9f8;border:1px dashed var(--dnu-line);border-radius:12px}
.dnu-count{margin:22px 0 0;text-align:center;font-size:13px;color:var(--dnu-mut)}
.dnu-count strong{color:var(--dnu-ink)}
.dnu-pager{margin-top:14px}
.dnu-pager .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dnu-pager .page-numbers{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;box-sizing:border-box;border:1px solid var(--dnu-line);border-radius:8px;text-decoration:none;color:#4b5563;font-size:13px;padding:0 12px;background:#fff;transition:.15s}
.dnu-pager a.page-numbers:hover{border-color:var(--dnu-primary);color:var(--dnu-primary);background:#eefaf3}
.dnu-pager .page-numbers.current{background:var(--dnu-primary);border-color:var(--dnu-primary);color:#fff;font-weight:700}
.dnu-pager .page-numbers.dots{border-color:transparent;background:none}
.dnu-pager .page-numbers.prev,.dnu-pager .page-numbers.next{font-weight:600}
.dnu-pager .page-numbers.prev span,.dnu-pager .page-numbers.next span{display:inline-block;line-height:1}
.dnu-pager .screen-reader-text,.dnu-page .screen-reader-text{position:absolute;left:-9999px}

@media(max-width:900px){
 /* Urutan mobile: judul + pencarian -> Topik Publikasi -> daftar dokumen */
 .dnu-shell{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"top" "side" "main";padding:20px 16px 28px;margin-top:20px}
 .dnu-hero{padding:36px 0 28px}.dnu-hero h1{font-size:26px}
 .dnu-h{font-size:24px;margin:0 0 14px}
 .dnu-search{margin-bottom:18px}
 .dnu-side{margin-bottom:22px;padding:0}
 .dnu-side .dnu-side-h{display:none}
 .dnu-side-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:0;padding:14px;font:inherit;font-size:14px;font-weight:700;color:#2b2b2b;cursor:pointer;text-align:left}
 .dnu-chev{width:8px;height:8px;border-right:2px solid var(--dnu-primary);border-bottom:2px solid var(--dnu-primary);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
 .dnu-side-toggle[aria-expanded="false"] .dnu-chev{transform:rotate(-135deg) translate(-2px,0)}
 .dnu-side-toggle:focus-visible{outline:2px solid var(--dnu-primary);outline-offset:-2px;border-radius:12px}
 .dnu-side-body{padding:0 14px 16px;border-top:1px solid #e3f1ea;padding-top:14px}
 .dnu-side-body[hidden]{display:none}
}
@media(min-width:901px){.dnu-side-body[hidden]{display:block!important}}
@media(max-width:560px){
 .dnu-wrap{padding:0 12px}
 .dnu-shell{padding:16px 12px 24px;border-radius:14px}
 .dnu-hero{padding:30px 0 24px}.dnu-hero h1{font-size:24px}
 .dnu-search{padding:4px 4px 4px 12px;gap:8px}
 .dnu-search button{padding:9px 16px}
 .dnu-list{gap:12px}
 .dnu-item{gap:12px;padding:14px}
 .dnu-ico{flex:0 0 34px}.dnu-ico svg{width:34px;height:auto;display:block}
 .dnu-chip{margin-bottom:10px}
 .dnu-body h3{font-size:15px}
 .dnu-ex{margin-bottom:12px}
 .dnu-foot{display:block}
 .dnu-dates{flex-direction:column;gap:6px;margin-bottom:12px}
 .dnu-dates span{display:block}
 .dnu-acts2{width:100%;margin-left:0}.dnu-acts2 .dnu-b{flex:1;justify-content:center;padding:10px 12px}
 .dnu-count{font-size:12px;margin-top:18px}
 .dnu-pager .nav-links{gap:6px}
 .dnu-pager .page-numbers{min-width:40px;height:40px;padding:0 8px;font-size:14px}
 .dnu-pager .page-numbers.prev,.dnu-pager .page-numbers.next{font-size:18px;line-height:1}
 .dnu-pager .dnu-pg-txt{display:none}
}
@media(max-width:360px){
 .dnu-pager .nav-links{gap:4px}
 .dnu-pager .page-numbers{min-width:36px;height:38px;padding:0 6px}
}