/*
Theme Name: SI TALANG Desa Talangsuko
Theme URI: https://desa-talangsuko.local/
Author: @chdgs__ 
Description: Tema WordPress SI TALANG Desa Talangsuko.
Version: 1.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: si-talang
*/

:root {
  --green-950: #163f30;
  --green-900: #1d523e;
  --green-800: #28664f;
  --green-700: #3c7d63;
  --green-100: #e9f2ec;
  --green-50: #f4f8f5;
  --cream: #f6faf7;
  --earth: #4d7b61;
  --ink: #25342c;
  --muted: #6c786f;
  --white: #ffffff;
  --border: #e4eae5;
  --shadow: 0 8px 26px rgba(25, 72, 53, .08);
  --shadow-soft: 0 4px 16px rgba(25, 72, 53, .06);
  --radius: 14px;
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fcfdfb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green-800); text-decoration: none; }
a:hover { color: var(--earth); }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding: 58px 0; }
.section--soft { background: linear-gradient(180deg, var(--green-50), #f9fbf9); border-block: 1px solid #eef3ef; }
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.td-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.small { font-size: .8rem; }
.muted { color: var(--muted); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 99999; padding: 10px 14px; background: #fff; color: #000; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; color: var(--green-950); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.18; letter-spacing: -.025em; }
h1 { font-size: clamp(2.35rem, 4.1vw, 3.65rem); }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.25rem); }
h3 { font-size: 1.08rem; }
p { margin-top: 0; }
.eyebrow { display: inline-block; margin-bottom: 7px; color: var(--earth); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--light { color: #dfeee5; }
.section-heading { margin-bottom: 24px; }
.section-heading h2 { margin-bottom: 8px; }
.section-heading p { max-width: 650px; margin-bottom: 0; }
.section-heading--center { text-align: center; }
.section-heading--center p { margin-inline: auto; }
.section-heading--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }

/* compact utility bar */
.topbar { background: var(--green-950); color: rgba(255,255,255,.92); font-size: .76rem; }
.topbar__inner { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.topbar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar .td-icon { width: 13px; height: 13px; }

/* compact header */
.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
body.admin-bar .site-header { top: 32px; }
.header-main { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-branding { display: flex; align-items: center; flex: 0 0 auto; min-width: 380px; }
.custom-logo-link { display: inline-flex; margin-right: 11px; }
.custom-logo { max-height: 48px; width: auto; }
.brand-mark { width: 46px; height: 46px; margin-right: 11px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, var(--green-700), var(--green-950)); color: #fff; font-weight: 800; font-size: 1.25rem; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.08; }
.brand-kicker { color: var(--green-700); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.site-title { margin: 3px 0 4px; color: var(--green-950); font-size: 1.36rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.site-description { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.primary-nav { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.primary-menu, .primary-menu ul { list-style: none; margin: 0; padding: 0; }
.primary-menu { display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
.primary-menu > li { position: relative; }
.primary-menu > li > a { display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 10px; border-radius: 9px; color: var(--ink); font-size: .82rem; font-weight: 650; line-height: 1; white-space: nowrap; }
.primary-menu > li > a:hover, .primary-menu > li.current-menu-item > a, .primary-menu > li.current-menu-ancestor > a { background: var(--green-100); color: var(--green-950); }
.primary-menu > li.menu-item-has-children > a::after { content: ""; width: 5px; height: 5px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.primary-menu > li:last-child > a { margin-left: 5px; padding-inline: 14px; background: var(--green-900); color: #fff; }
.primary-menu > li:last-child > a::before { content: "✦"; font-size: .76rem; }
.primary-menu > li:last-child > a:hover { background: var(--green-950); color: #fff; }
.primary-menu .sub-menu { position: absolute; top: calc(100% + 7px); left: 0; width: 225px; padding: 7px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s ease; }
.primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu li { position: relative; }
.primary-menu .sub-menu a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: .8rem; white-space: nowrap; }
.primary-menu .sub-menu a:hover { background: var(--green-50); color: var(--green-900); }
.primary-menu .sub-menu .sub-menu { left: calc(100% + 4px); top: 0; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--green-900); color: #fff; cursor: pointer; }
.menu-toggle span:not(.screen-reader-text) { display: block; width: 20px; height: 2px; margin: 4px auto; background: currentColor; }

/* hero */
.hero { position: relative; isolation: isolate; min-height: 430px; display: flex; align-items: center; overflow: hidden; background-position: center; background-size: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(16,58,42,.94) 0%, rgba(29,82,62,.80) 48%, rgba(29,82,62,.30) 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 78% 32%, rgba(255,255,255,.13), transparent 30%); }
.hero__layout { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-block: 54px 72px; }
.hero__content { max-width: 670px; color: #fff; }
.hero__eyebrow { color: #e9d5ba; }
.hero h1 { max-width: 650px; margin-bottom: 10px; color: #fff; }
.hero__subtitle { margin-bottom: 10px; color: #fff; font-size: 1.18rem; font-weight: 650; }
.hero__description { max-width: 600px; margin-bottom: 0; color: rgba(255,255,255,.88); font-size: .98rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__quick { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.hero__quick span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.10); color: #fff; font-size: .76rem; backdrop-filter: blur(7px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; font-size: .83rem; font-weight: 750; transition: .18s ease; }
.btn .td-icon, .text-link .td-icon { width: 15px; height: 15px; }
.btn--light { background: #fff; color: var(--green-950); }
.btn--light:hover { background: var(--cream); color: var(--green-950); transform: translateY(-1px); }
.btn--outline { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--dark, .btn--green { background: var(--green-900); color: #fff; }
.btn--dark:hover, .btn--green:hover { background: var(--green-950); color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-800); font-size: .82rem; font-weight: 750; }
.text-link:hover { gap: 9px; color: var(--earth); }

/* stats */
.stats-wrap { position: relative; z-index: 4; margin-top: -30px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { min-height: 92px; display: flex; align-items: center; gap: 13px; padding: 16px 17px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.icon-box { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: var(--green-100); color: var(--green-800); }
.icon-box .td-icon { width: 22px; height: 22px; }
.icon-box--small { width: 38px; height: 38px; border-radius: 10px; }
.icon-box--small .td-icon { width: 19px; height: 19px; }
.icon-box--light { background: rgba(255,255,255,.14); color: #fff; }
.stat-card__content { min-width: 0; }
.stat-label { display: block; color: var(--muted); font-size: .74rem; }
.stat-card strong { color: var(--green-950); font-size: 1.62rem; line-height: 1; }
.stat-card small { margin-left: 6px; color: var(--muted); font-size: .72rem; }

/* profile */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr); gap: 18px; }
.about-card { display: grid; grid-template-columns: minmax(260px, .85fr) 1.15fr; overflow: hidden; }
.about-card__media { min-height: 270px; background-position: center; background-size: cover; }
.about-card__body { padding: 28px; }
.about-card__body h2 { margin-bottom: 11px; }
.about-card__body p { color: var(--muted); }
.head-card { padding: 25px; background: linear-gradient(145deg, #fff, var(--green-50)); }
.head-card__top { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.head-card__photo { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; background-position: center; background-size: cover; border: 4px solid #fff; box-shadow: var(--shadow-soft); }
.head-card h3 { margin: 0 0 2px; }
.head-card p { color: var(--muted); font-size: .9rem; }

/* data */
.info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.info-card { padding: 19px; }
.info-card h3 { margin: 12px 0 10px; }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: .78rem; }
.mini-list li:last-child { border-bottom: 0; }
.mini-list span { color: var(--muted); }
.mini-list strong { color: var(--green-950); font-size: .82rem; }

/* potential */
.potential-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.potential-card { padding: 20px; }
.potential-card__icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 13px; background: var(--cream); color: var(--earth); }
.potential-card__icon .td-icon { width: 24px; height: 24px; }
.potential-card h3 { margin-bottom: 8px; }
.potential-card p { min-height: 70px; margin-bottom: 13px; color: var(--muted); font-size: .84rem; }

/* budget */
.budget-card { display: grid; grid-template-columns: 1.25fr 1fr auto; align-items: center; gap: 24px; padding: 25px; border-radius: 16px; background: var(--green-950); color: #fff; box-shadow: var(--shadow); }
.budget-card__intro { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 15px; }
.budget-card__intro h2 { margin-bottom: 6px; color: #fff; font-size: 1.65rem; }
.budget-card__intro p { grid-column: 2; margin-bottom: 0; color: rgba(255,255,255,.75); font-size: .82rem; }
.budget-total { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 7px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); }
.budget-total span { color: rgba(255,255,255,.72); font-size: .75rem; }
.budget-total strong { color: #fff; font-size: 1.35rem; }
.budget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.budget-item { padding: 10px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.06); }
.budget-item span { display: block; color: rgba(255,255,255,.68); font-size: .68rem; }
.budget-item strong { display: block; margin-top: 2px; color: #fff; font-size: .78rem; }
.budget-card .btn { background: #fff; color: var(--green-950); white-space: nowrap; }

/* posts */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post-card { overflow: hidden; }
.post-card__thumb { aspect-ratio: 16 / 8.5; background-position: center; background-size: cover; }
.post-card__body { padding: 18px; }
.post-card__meta { display: block; margin-bottom: 6px; color: var(--earth); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.post-card h3 { margin-bottom: 7px; font-size: 1rem; }
.post-card p { margin-bottom: 12px; color: var(--muted); font-size: .8rem; }

/* KKN */
.kkn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kkn-card { display: flex; align-items: flex-start; gap: 13px; padding: 19px; }
.kkn-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: var(--green-100); color: var(--green-800); }
.kkn-icon .td-icon { width: 19px; height: 19px; }
.kkn-card h3 { margin-bottom: 6px; }
.kkn-card p { margin-bottom: 0; color: var(--muted); font-size: .8rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-card, .map-card { padding: 25px; }
.contact-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; list-style: none; margin: 20px 0 0; padding: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 10px; background: var(--green-50); }
.contact-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #fff; color: var(--green-800); }
.contact-icon .td-icon { width: 17px; height: 17px; }
.contact-list strong, .contact-list span { display: block; }
.contact-list strong { margin-bottom: 2px; font-size: .76rem; }
.contact-list div > span { color: var(--muted); font-size: .72rem; }
.map-placeholder { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border-radius: 11px; background: radial-gradient(circle at 50% 30%, #fff, var(--green-50)); text-align: center; }
.map-placeholder__icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 16px; background: var(--green-100); color: var(--green-800); }
.map-placeholder__icon .td-icon { width: 28px; height: 28px; }
.map-placeholder h3 { margin-bottom: 6px; }
.map-placeholder p { color: var(--muted); font-size: .82rem; }

/* inner pages */
.template-hero { padding: 48px 0 38px; background: linear-gradient(140deg, var(--green-950), var(--green-800)); color: #fff; }
.template-hero h1 { margin-bottom: 9px; color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.template-hero p { max-width: 720px; color: rgba(255,255,255,.78); }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.template-card { padding: 22px; }
.template-card p { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table th { background: var(--green-50); color: var(--green-950); }
.bar-list { display: grid; gap: 11px; }
.bar-row__top { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 5px; font-size: .78rem; }
.bar-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--green-100); }
.bar-fill { height: 100%; border-radius: inherit; background: var(--green-700); }
.ebook-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ebook-card { padding: 18px; }
.ebook-cover { aspect-ratio: 3 / 4; display: grid; place-items: center; margin-bottom: 14px; border-radius: 11px; background: linear-gradient(145deg, var(--green-900), var(--green-700)); color: #fff; font-size: 1.15rem; font-weight: 800; text-align: center; }
.entry-shell { padding: 54px 0; }
.entry-header, .archive-header { max-width: 850px; margin-bottom: 28px; }
.entry-content, .entry-card { padding: 26px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }
.pagination { margin-top: 25px; }

/* footer */
.site-footer { background: var(--green-950); color: rgba(255,255,255,.78); }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 35px; padding: 42px 0 34px; }
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer h3 { margin-bottom: 6px; }
.site-footer h4 { margin-bottom: 12px; font-size: .9rem; }
.footer-brand { display: flex; align-items: flex-start; gap: 13px; }
.footer-logo { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: rgba(255,255,255,.10); color: #fff; }
.footer-brand p { max-width: 480px; margin-bottom: 0; font-size: .8rem; }
.footer-menu { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 12px; list-style: none; margin: 0; padding: 0; }
.footer-menu a { color: rgba(255,255,255,.78); font-size: .78rem; }
.footer-menu a:hover { color: #fff; }
.footer-contact { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; font-size: .76rem; }
.footer-contact .td-icon { margin-top: 2px; color: #d9e9df; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.10); }
.footer-bottom__inner { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: .72rem; }

@media (max-width: 1180px) {
  .site-branding { min-width: 330px; }
  .site-title { font-size: 1.18rem; }
  .primary-menu > li > a { padding-inline: 8px; font-size: .78rem; }
  .hero__quick { display: none; }
  .budget-card { grid-template-columns: 1fr 1fr; }
  .budget-card > .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 1030px) {
  body.admin-bar .site-header { top: 32px; }
  .site-branding { min-width: 0; }
  .menu-toggle { display: block; }
  .primary-nav { display: none; position: absolute; top: 100%; left: 20px; right: 20px; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
  .primary-nav.is-open { display: block; }
  .primary-menu { display: block; }
  .primary-menu > li > a { width: 100%; min-height: 42px; padding: 0 12px; }
  .primary-menu > li:last-child > a { margin: 6px 0 0; }
  .primary-menu .sub-menu { position: static; width: auto; display: none; margin: 0 0 6px 14px; padding: 4px 0 4px 10px; border: 0; border-left: 2px solid var(--green-100); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { display: block; }
  .info-grid, .potential-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .intro-grid { grid-template-columns: 1fr; }
  .head-card { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 24px; }
}

@media (max-width: 820px) {
  .topbar__inner { justify-content: center; }
  .topbar__item:first-child { display: none; }
  .hero { min-height: 400px; }
  .hero__layout { padding-block: 48px 68px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .about-card { grid-template-columns: 1fr; }
  .about-card__media { min-height: 230px; }
  .budget-card { grid-template-columns: 1fr; }
  .budget-card > .btn { grid-column: auto; }
  .post-grid, .kkn-grid, .template-grid, .ebook-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact-grid, .grid-2 { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  body.admin-bar .site-header { top: 46px; }
  .container { width: min(calc(100% - 28px), var(--max)); }
  .section { padding: 45px 0; }
  .header-main { min-height: 68px; }
  .brand-kicker { display: none; }
  .site-title { font-size: 1.02rem; }
  .site-description { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
  .custom-logo { max-height: 42px; }
  .brand-mark { width: 42px; height: 42px; }
  .hero { min-height: 380px; }
  .hero__layout { padding-block: 42px 60px; }
  .hero h1 { font-size: 2.35rem; }
  .hero__subtitle { font-size: 1rem; }
  .hero__description { font-size: .88rem; }
  .hero__actions { align-items: stretch; }
  .btn { min-height: 40px; }
  .stats-wrap { margin-top: -22px; }
  .stats-grid, .info-grid, .potential-grid, .post-grid, .kkn-grid, .template-grid, .ebook-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 78px; padding: 13px 14px; }
  .stat-card strong { font-size: 1.4rem; }
  .about-card__body, .head-card, .contact-card, .map-card { padding: 20px; }
  .head-card { display: block; }
  .section-heading--split { display: block; }
  .section-heading--split .text-link { margin-top: 10px; }
  .budget-grid, .contact-list { grid-template-columns: 1fr; }
  .budget-card { padding: 20px; }
  .budget-card__intro { grid-template-columns: 1fr; }
  .budget-card__intro p, .budget-total { grid-column: 1; }
  .budget-total { display: block; }
  .budget-total strong { display: block; margin-top: 4px; font-size: 1.18rem; }
  .footer-main { grid-template-columns: 1fr; gap: 25px; padding: 34px 0 28px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom__inner { min-height: 65px; flex-direction: column; justify-content: center; gap: 2px; text-align: center; }
}

:root{
  --green-950:#174a37;
  --green-900:#1f5c45;
  --green-800:#2d6e54;
  --green-700:#4b8668;
  --green-100:#e8f3ec;
  --green-50:#f4f9f5;
  --earth:#4d7b61;
  --cream:#f6faf7;
}
.topbar__identity{margin-left:auto;opacity:.82}
.header-main{min-height:70px;gap:15px}
.site-branding{min-width:220px}
.brand-mark{width:42px;height:42px;margin-right:10px;border-radius:10px;font-size:.9rem}
.custom-logo{max-height:44px}
.brand-kicker{font-size:.59rem;letter-spacing:.07em}
.site-title{font-size:1.18rem;margin:2px 0 3px;letter-spacing:-.02em}
.site-description{font-size:.66rem}
.primary-menu{gap:0}
.primary-menu>li>a{padding:0 8px;font-size:.75rem;font-weight:650}
.primary-menu>li:last-child>a{margin-left:5px;padding-inline:12px}
.primary-menu .sub-menu{width:218px}
.primary-menu .sub-menu a{font-size:.77rem;padding:9px 10px}


.primary-menu>li>a{white-space:nowrap}


.entry-shell{padding:44px 0 70px;background:var(--green-50)}
.entry-card{max-width:1080px;margin:0 auto}
.entry-header{padding:26px 28px 0}
.entry-content{margin-top:18px;padding:28px}
.entry-content h2{margin:30px 0 13px;font-size:1.45rem}
.entry-content h3{margin:22px 0 10px;font-size:1.05rem}
.entry-content table{width:100%;border-collapse:collapse;margin:15px 0 24px;font-size:.84rem;background:#fff}
.entry-content th,.entry-content td{padding:11px 12px;border:1px solid var(--border);text-align:left;vertical-align:top}
.entry-content th{background:var(--green-50);color:var(--green-950);font-weight:700}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 26px}
.metric{padding:17px 18px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-soft)}
.metric strong{display:block;color:var(--green-950);font-size:1.28rem;line-height:1.15}
.metric span{display:block;margin-top:5px;color:var(--muted);font-size:.72rem}
.official-sections{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.official-sections section,.program-entry{min-height:180px;padding:24px;background:#fff;border:1px solid var(--border);border-radius:12px}
.empty-state{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--border);border-radius:12px}
.missing-box,.notice-box,.source-box,.admin-audit{display:none!important}
.official-docs{margin-bottom:28px}

/* Keep the full labels on one line, then switch cleanly to hamburger. */
@media(max-width:1180px){
  .primary-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:8px 20px 18px;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
  .primary-nav.is-open{display:block}
  .menu-toggle{display:block}
  .primary-menu{display:block}
  .primary-menu>li>a{width:100%;min-height:40px;padding:0 10px;font-size:.82rem}
  .primary-menu>li:last-child>a{margin:6px 0 0}
  .primary-menu .sub-menu{position:static;width:auto;padding:2px 0 6px 16px;border:0;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none}
  .primary-menu li.is-open>.sub-menu,.primary-menu li:focus-within>.sub-menu{display:block}
}
@media(max-width:720px){
  .topbar__identity{display:none}
  .topbar__inner{justify-content:flex-start}
  .site-branding{min-width:0}
  .site-description{display:none}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .official-sections{grid-template-columns:1fr}
  .entry-header,.entry-content{padding-left:20px;padding-right:20px}
}
@media(max-width:480px){
  .metric-grid{grid-template-columns:1fr}
}

:root{
  --green-950:#123f2f;
  --green-900:#19533e;
  --green-800:#23664c;
  --green-700:#3c8062;
  --green-600:#529477;
  --green-100:#e7f2eb;
  --green-50:#f5faf7;
  --ink:#203129;
  --muted:#6d7b73;
  --border:#e3ebe6;
  --shadow:0 14px 36px rgba(18,63,47,.08);
  --shadow-soft:0 7px 22px rgba(18,63,47,.06);
  --radius:15px;
  --max:1240px;
}
body{background:#fff;color:var(--ink);font-size:14px;line-height:1.65}
.container{width:min(calc(100% - 40px),var(--max))}
.section{padding:64px 0}
.section--soft{background:var(--green-50);border-block:1px solid #edf4ef}
.card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
h1,h2,h3,h4,h5,h6{letter-spacing:-.03em}
h1{font-size:clamp(2.45rem,4.8vw,4.15rem)}
h2{font-size:clamp(1.65rem,2.7vw,2.3rem)}
h3{font-size:1.03rem}
.eyebrow{font-size:.67rem;letter-spacing:.11em;color:var(--green-700)}
.text-link{display:inline-flex;align-items:center;gap:7px;font-size:.79rem;font-weight:750;color:var(--green-800)}
.text-link .td-icon,.feature-card__meta .td-icon{width:14px;height:14px}

.topbar{background:var(--green-950)}
.topbar__inner{min-height:29px}
.site-header{background:rgba(255,255,255,.98);border-bottom:1px solid var(--border);box-shadow:0 3px 14px rgba(18,63,47,.035)}
.header-main{min-height:72px;gap:18px}
.site-branding{min-width:248px;gap:10px}
.brand-copy{min-width:0}
.custom-logo{max-width:46px;max-height:46px}
.brand-mark{width:44px;height:44px;border-radius:11px;background:var(--green-900);font-size:.82rem}
.brand-kicker{font-size:.55rem;letter-spacing:.12em;color:var(--green-700)}
.site-title{font-size:1.22rem;line-height:1.05;letter-spacing:-.025em}
.site-description{margin-top:3px;font-size:.65rem;color:var(--muted)}
.primary-nav{margin-left:auto}
.primary-menu{gap:1px}
.primary-menu>li>a{min-height:40px;padding:0 9px;gap:6px;border-radius:9px;font-size:.75rem;font-weight:700;color:#26372f}
.primary-menu>li>a:hover,.primary-menu>li.current-menu-item>a,.primary-menu>li.current-menu-ancestor>a{background:var(--green-100);color:var(--green-950)}
.primary-menu>li:last-child>a{margin-left:5px;padding-inline:12px;background:var(--green-900);color:#fff}
.primary-menu>li:last-child>a::before{content:none!important}
.primary-menu>li:last-child>a:hover{background:var(--green-950);color:#fff}
.nav-item-icon{display:inline-grid;place-items:center;width:16px;height:16px;flex:0 0 16px;color:currentColor;transform:none!important}
.nav-item-icon .td-icon{width:15px;height:15px;display:block;transform:none!important}
.primary-menu>li.menu-item-has-children>a::after{width:5px;height:5px;margin-left:1px}
.primary-menu .sub-menu{top:calc(100% + 8px);width:224px;padding:8px;border-radius:12px;box-shadow:0 18px 40px rgba(18,63,47,.12)}
.primary-menu .sub-menu a{padding:9px 10px;border-radius:8px;font-size:.76rem;font-weight:600}
.primary-menu .sub-menu a:hover{background:var(--green-50);color:var(--green-900)}

.hero{min-height:500px;background-position:center;background-size:cover}
.hero::before{background:linear-gradient(90deg,rgba(8,48,34,.96) 0%,rgba(15,68,48,.87) 46%,rgba(24,82,61,.46) 72%,rgba(24,82,61,.20) 100%)}
.hero__layout--modern{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.72fr);align-items:center;gap:56px;padding-block:70px 86px}
.hero__content{max-width:670px}
.hero h1{max-width:720px;margin-bottom:13px;line-height:1.02}
.hero__subtitle{margin-bottom:11px;font-size:1.05rem;font-weight:650}
.hero__description{max-width:590px;margin-bottom:24px;font-size:.9rem;line-height:1.65}
.hero__actions{gap:10px}
.btn{min-height:42px;padding:0 17px;border-radius:10px;font-size:.78rem}
.btn .td-icon{width:16px;height:16px;transform:none!important}
.hero-facts{padding:20px;border:1px solid rgba(255,255,255,.26);border-radius:17px;background:rgba(255,255,255,.13);box-shadow:0 20px 60px rgba(0,0,0,.14);backdrop-filter:blur(10px);color:#fff}
.hero-facts__heading{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.18)}
.hero-facts__heading strong,.hero-facts__heading small{display:block;color:#fff}
.hero-facts__heading strong{font-size:.94rem}
.hero-facts__heading small{margin-top:2px;color:rgba(255,255,255,.68);font-size:.67rem}
.hero-facts__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#fff;color:var(--green-900)}
.hero-facts__icon .td-icon{width:20px;height:20px}
.hero-facts__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.hero-fact{display:flex;align-items:center;gap:10px;min-height:66px;padding:10px;border-radius:11px;background:rgba(255,255,255,.10)}
.hero-fact>span{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border-radius:9px;background:rgba(255,255,255,.17);color:#fff}
.hero-fact>span .td-icon{width:17px;height:17px;transform:none!important}
.hero-fact strong,.hero-fact small{display:block;color:#fff}
.hero-fact strong{font-size:.72rem;line-height:1.25}
.hero-fact small{margin-top:2px;color:rgba(255,255,255,.63);font-size:.59rem;line-height:1.3}

.stats-wrap{margin-top:-36px}
.stats-grid{gap:14px}
.stat-card{min-height:86px;padding:14px 16px;border-radius:14px;box-shadow:0 13px 34px rgba(18,63,47,.09)}
.icon-box{width:42px;height:42px;border-radius:11px;background:var(--green-100);color:var(--green-800)}
.icon-box .td-icon{width:20px;height:20px;transform:none!important}
.stat-label{font-size:.67rem}
.stat-card strong{font-size:1.55rem}
.stat-card small{font-size:.65rem}

.profile-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);gap:18px;align-items:stretch}
.about-card{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr);min-height:350px;overflow:hidden}
.about-card__media{min-height:100%;background-position:center;background-size:cover}
.about-card__body{display:flex;flex-direction:column;justify-content:center;padding:34px}
.about-card__body h3{margin:14px 0 10px;font-size:1.55rem}
.about-card__body p{margin:0;color:var(--muted);font-size:.86rem}
.section-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--green-100);color:var(--green-800)}
.section-icon .td-icon{width:21px;height:21px}
.profile-side{display:grid;grid-template-rows:auto 1fr;gap:14px}
.head-card{padding:20px}
.head-card__top{gap:13px}
.head-card__photo{width:54px;height:54px}
.head-card h3{font-size:1rem}
.profile-links{display:grid;gap:11px}
.quick-link-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px;color:var(--ink);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.quick-link-card:hover{transform:translateY(-2px);border-color:#cfe2d6;box-shadow:var(--shadow);color:var(--ink)}
.quick-link-card__icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--green-100);color:var(--green-800)}
.quick-link-card__icon .td-icon{width:18px;height:18px}
.quick-link-card strong,.quick-link-card small{display:block}
.quick-link-card strong{font-size:.8rem}
.quick-link-card small{margin-top:2px;color:var(--muted);font-size:.63rem;line-height:1.35}
.quick-link-card>.td-icon{width:15px;height:15px;color:var(--green-700)}

.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.feature-card{display:flex;align-items:flex-start;gap:14px;min-height:178px;padding:20px;color:var(--ink);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.feature-card:hover{transform:translateY(-3px);border-color:#c9dfd1;box-shadow:var(--shadow);color:var(--ink)}
.feature-card__icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:12px;background:var(--green-100);color:var(--green-800)}
.feature-card__icon .td-icon{width:22px;height:22px;display:block;transform:none!important}
.feature-card h3{margin:2px 0 8px}
.feature-card p{margin-bottom:14px;color:var(--muted);font-size:.78rem;line-height:1.6}
.feature-card__meta{display:inline-flex;align-items:center;gap:6px;color:var(--green-800);font-size:.69rem;font-weight:750}
.feature-card--vertical{display:block;min-height:238px}
.feature-card--vertical .feature-card__icon{margin-bottom:17px}
.feature-card--vertical p{min-height:75px}

.information-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.information-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;min-height:142px;padding:22px;border:1px solid var(--border);border-radius:15px;background:#fff;color:var(--ink);box-shadow:var(--shadow-soft);transition:transform .18s ease,box-shadow .18s ease}
.information-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.information-card__icon{width:50px;height:50px;display:grid;place-items:center;border-radius:13px;background:var(--green-100);color:var(--green-800)}
.information-card__icon .td-icon{width:24px;height:24px;transform:none!important}
.information-card h3{margin-bottom:5px;font-size:1.05rem}
.information-card p{margin:0;color:var(--muted);font-size:.78rem}
.information-card>.td-icon{width:18px;height:18px;color:var(--green-700)}
.post-grid--compact{margin-top:18px}

/* KKN */
.kkn-grid--modern{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kkn-grid--modern .kkn-card{display:flex;min-height:186px;padding:22px;color:var(--ink);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.kkn-grid--modern .kkn-card:hover{transform:translateY(-3px);border-color:#c9dfd1;box-shadow:var(--shadow);color:var(--ink)}
.kkn-grid--modern .kkn-icon{width:46px;height:46px;flex:0 0 46px;border-radius:12px}
.kkn-grid--modern .kkn-icon .td-icon{width:22px;height:22px;transform:none!important}
.kkn-grid--modern .kkn-card p{min-height:65px;margin-bottom:12px}

/* Contact */
.section--contact{background:linear-gradient(180deg,#fff,var(--green-50))}
.contact-grid--modern{grid-template-columns:1.2fr .8fr}
.contact-card,.map-card{padding:28px}
.contact-list{margin-top:20px}
.contact-list li{padding:13px;background:var(--green-50)}
.contact-icon,.map-placeholder__icon{transform:none!important}
.contact-icon .td-icon,.map-placeholder__icon .td-icon{transform:none!important}
.map-placeholder{background:linear-gradient(145deg,#fff,var(--green-50))}

/* KKN resources */
.kkn-resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.resource-card{padding:22px;border:1px solid var(--border);border-radius:13px;background:#fff;box-shadow:var(--shadow-soft)}
.resource-card h2{margin-bottom:8px;font-size:1.15rem}
.resource-card p{color:var(--muted)}

/* Keep all icons upright and aligned. */
.td-icon,.nav-item-icon,.icon-box,.feature-card__icon,.information-card__icon,.kkn-icon,.contact-icon,.section-icon,.quick-link-card__icon{transform:none!important;rotate:none!important;vertical-align:middle}

@media(max-width:1120px){
  .menu-toggle{display:block}
  .primary-nav{display:none;position:absolute;top:100%;left:20px;right:20px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow)}
  .primary-nav.is-open{display:block}
  .primary-menu{display:block}
  .primary-menu>li>a{width:100%;min-height:42px;padding:0 12px;font-size:.8rem}
  .primary-menu>li:last-child>a{margin:6px 0 0}
  .primary-menu .sub-menu{position:static;width:auto;display:none;margin:0 0 6px 18px;padding:3px 0 4px 12px;border:0;border-left:2px solid var(--green-100);border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .primary-menu li.is-open>.sub-menu,.primary-menu li:focus-within>.sub-menu{display:block}
  .hero__layout--modern{grid-template-columns:1fr .75fr;gap:30px}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero{min-height:480px}
  .hero__layout--modern{grid-template-columns:1fr;padding-block:55px 78px}
  .hero-facts{display:none}
  .profile-layout{grid-template-columns:1fr}
  .profile-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .contact-grid--modern{grid-template-columns:1fr}
}
@media(max-width:740px){
  .section{padding:50px 0}
  .about-card{grid-template-columns:1fr;min-height:0}
  .about-card__media{min-height:230px}
  .profile-side{grid-template-columns:1fr}
  .information-layout,.kkn-grid--modern,.kkn-resource-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .topbar__item:first-child{display:none}
  .site-branding{min-width:0}
  .site-description{display:block;max-width:210px}
  .hero{min-height:440px}
  .hero__layout--modern{padding-block:48px 70px}
  .hero h1{font-size:2.42rem}
  .stats-grid,.feature-grid{grid-template-columns:1fr}
  .stats-wrap{margin-top:-26px}
  .feature-card,.feature-card--vertical{min-height:0}
  .feature-card--vertical p{min-height:0}
  .section-heading--split{display:block}
  .section-heading--split .text-link{margin-top:10px}
  .information-card{grid-template-columns:auto 1fr;padding:18px}
  .information-card>.td-icon{display:none}
  .contact-card,.map-card{padding:21px}
}
.data-summary-grid .template-card{padding:24px}
.data-summary-grid .section-icon{margin-bottom:15px}
.potential-page-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.potential-page-grid .feature-card--vertical{min-height:255px}
@media(max-width:1120px){.potential-page-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.potential-page-grid{grid-template-columns:1fr}}


/* =========================================================
   SI TALANG 
   ========================================================= */
:root{
  --radius:14px;
  --shadow:0 14px 38px rgba(22,63,48,.09);
  --shadow-soft:0 5px 18px rgba(22,63,48,.055);
}
body{font-size:14px;line-height:1.62}
h1{font-size:clamp(2.15rem,4vw,3.45rem);line-height:1.06}
h2{font-size:clamp(1.45rem,2.35vw,2rem);line-height:1.16}
h3{font-size:1rem;line-height:1.3}
.section{padding:54px 0}
.section-heading{margin-bottom:28px}
.section-heading p{max-width:680px}

/* Navigation: text only, compact, and predictable. */
.nav-item-icon{display:none!important}
.primary-menu>li>a{gap:0;padding-inline:10px;font-size:.77rem;letter-spacing:-.01em}
.primary-menu>li:last-child>a{padding-inline:14px}
.primary-menu>li:last-child>a::before{content:none!important;display:none!important}
.primary-menu>li.menu-item-has-children>a::after{margin-left:6px}
.primary-menu .sub-menu{width:230px}

/* Smaller page headings prevent clipping on compact layouts. */
.template-hero{padding:40px 0 32px}
.template-hero h1{max-width:900px;font-size:clamp(1.8rem,3.2vw,2.55rem);line-height:1.12;overflow-wrap:anywhere}
.template-hero p{font-size:.86rem}
.contact-card{min-width:0;overflow:hidden}
.contact-card h2{max-width:100%;font-size:clamp(1.45rem,2.4vw,1.95rem);line-height:1.18;overflow-wrap:anywhere}
.contact-card>p{font-size:.84rem}

/* Contact cards: icon stays inside its own cell on every screen size. */
.contact-grid--modern{grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);align-items:stretch}
.contact-list{grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:11px}
.contact-list li{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:12px;min-width:0;padding:14px;border:1px solid #e7efe9;background:var(--green-50)}
.contact-list li>div{min-width:0;padding-top:1px}
.contact-icon{width:42px;height:42px;align-self:start;justify-self:start;border:1px solid #e5eee8;border-radius:11px;overflow:hidden}
.contact-icon .td-icon{width:19px;height:19px;display:block;transform:none!important}
.contact-list strong{font-size:.82rem}
.contact-list div>span{font-size:.76rem;line-height:1.55;overflow-wrap:anywhere;word-break:normal}
.map-card{min-width:0;overflow:hidden}
.map-placeholder{min-height:100%;padding:26px}
.map-placeholder h3{font-size:1.08rem}

/* Home budget dashboard with animated source bars. */
.budget-section{background:#fff}
.budget-dashboard{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:16px;align-items:stretch}
.budget-summary-card,.budget-side-card{padding:26px}
.budget-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:23px}
.budget-summary-head h2{margin:5px 0 0}
.budget-total-compact{text-align:right;white-space:nowrap}
.budget-total-compact span,.budget-total-compact strong{display:block}
.budget-total-compact span{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em}
.budget-total-compact strong{margin-top:4px;color:var(--green-950);font-size:1.18rem}
.budget-progress-list{display:grid;gap:15px}
.budget-progress__head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:6px;font-size:.76rem}
.budget-progress__head span{color:var(--ink);font-weight:650}
.budget-progress__head strong{color:var(--green-800);font-size:.74rem;white-space:nowrap}
.budget-progress__track{height:9px;overflow:hidden;border-radius:999px;background:var(--green-100)}
.budget-progress__fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green-900),var(--green-700));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.budget-progress.is-visible .budget-progress__fill{width:var(--progress)}
.budget-side-card{display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,var(--green-950),var(--green-800));color:#fff}
.budget-side-card .eyebrow,.budget-side-card h3,.budget-side-card p{color:#fff}
.budget-side-card h3{margin:8px 0 9px;font-size:1.25rem}
.budget-side-card p{color:rgba(255,255,255,.72);font-size:.78rem}
.budget-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}
.budget-mini{padding:11px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.07)}
.budget-mini span,.budget-mini strong{display:block}
.budget-mini span{color:rgba(255,255,255,.65);font-size:.62rem}
.budget-mini strong{margin-top:3px;color:#fff;font-size:.78rem}
.budget-side-card .btn{align-self:flex-start;background:#fff;color:var(--green-950)}

/* Cards for news, documents and e-books. */
.post-card,.ebook-card,.resource-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.post-card:hover,.ebook-card:hover,.resource-card:hover{transform:translateY(-4px);border-color:#c8dfd1;box-shadow:var(--shadow)}
.ebook-grid{gap:14px}
.ebook-card{display:flex;flex-direction:column;min-height:260px;padding:17px}
.ebook-cover{display:flex;align-items:flex-end;min-height:135px;margin-bottom:15px;padding:16px;border-radius:11px;background:linear-gradient(145deg,var(--green-950),var(--green-700));color:#fff;font-size:.86rem;font-weight:750;line-height:1.35}
.ebook-card h2{font-size:1rem}
.ebook-card .btn{margin-top:auto;align-self:flex-start}
.resource-card{min-height:190px;display:flex;flex-direction:column}
.resource-card .text-link{margin-top:auto}
.information-card,.kkn-grid--modern .kkn-card,.feature-card{overflow:hidden}
.information-card::after,.kkn-grid--modern .kkn-card::after,.feature-card::after{content:"";position:absolute;inset:auto -35px -35px auto;width:85px;height:85px;border-radius:50%;background:var(--green-50);z-index:0;transition:transform .25s ease}
.information-card,.kkn-grid--modern .kkn-card,.feature-card{position:relative}
.information-card>* ,.kkn-grid--modern .kkn-card>* ,.feature-card>*{position:relative;z-index:1}
.information-card:hover::after,.kkn-grid--modern .kkn-card:hover::after,.feature-card:hover::after{transform:scale(1.35)}

/* Light, efficient scroll reveal. Content remains visible without JavaScript. */
.has-js .reveal-item{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.has-js .reveal-item.is-visible{opacity:1;transform:none}

@media(max-width:900px){
  .budget-dashboard,.contact-grid--modern{grid-template-columns:1fr}
  .budget-side-card{min-height:280px}
}
@media(max-width:600px){
  h1{font-size:2.25rem}
  h2{font-size:1.55rem}
  .section{padding:45px 0}
  .template-hero{padding:34px 0 27px}
  .template-hero h1{font-size:1.9rem}
  .budget-summary-card,.budget-side-card{padding:20px}
  .budget-summary-head{display:block}
  .budget-total-compact{margin-top:12px;text-align:left}
  .budget-mini-grid{grid-template-columns:1fr}
  .contact-list{grid-template-columns:1fr}
  .contact-list li{grid-template-columns:40px minmax(0,1fr)}
  .contact-icon{width:40px;height:40px}
}


/* =========================================================
   SI TALANG 
   ========================================================= */
:root{
  --radius-sm:10px;
  --radius-md:15px;
  --radius-lg:22px;
  --page-max:1180px;
  --line:#e1ebe5;
}
body{font-size:14px;background:#fff;color:var(--ink)}
.container{max-width:var(--page-max)}
.section{padding:50px 0}
.card{border:1px solid var(--line);box-shadow:0 9px 28px rgba(21,69,49,.065)}

/* Detail hero */
.detail-hero{padding:42px 0 34px;background:linear-gradient(135deg,#f7fbf8 0%,#edf6f0 100%);border-bottom:1px solid var(--line);overflow:hidden}
.detail-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:34px;align-items:center}
.detail-breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:15px;color:var(--green-700);font-size:.72rem;font-weight:700}
.detail-breadcrumb a{text-decoration:none;color:inherit}
.detail-breadcrumb span[aria-hidden]{opacity:.5}
.detail-hero h1{max-width:760px;margin:0 0 12px;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.04em}
.detail-hero__excerpt{max-width:700px;margin:0;color:var(--muted);font-size:.88rem;line-height:1.7}
.detail-visual{position:relative;min-height:235px;border:1px solid #dbe9df;border-radius:var(--radius-lg);overflow:hidden;background:#eaf4ed;box-shadow:0 16px 40px rgba(21,69,49,.10)}
.detail-visual img{width:100%;height:100%;min-height:235px;object-fit:cover}
.detail-visual__label{position:absolute;left:15px;bottom:15px;padding:8px 11px;border:1px solid rgba(255,255,255,.55);border-radius:9px;background:rgba(18,66,47,.82);backdrop-filter:blur(5px);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.035em}

/* Detail content layout */
.detail-main{padding:38px 0 62px;background:#fff}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:start}
.detail-article{min-width:0;padding:27px;border-radius:var(--radius-lg)}
.detail-sidebar{position:sticky;top:112px;display:grid;gap:14px}
.detail-side-card{padding:17px;border:1px solid var(--line);border-radius:var(--radius-md);background:#f8fbf9}
.detail-side-card h3{margin:0 0 11px;font-size:.83rem;text-transform:uppercase;letter-spacing:.075em;color:var(--green-800)}
.detail-side-card ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.detail-side-card a{display:block;padding:8px 9px;border-radius:8px;color:var(--ink);font-size:.75rem;font-weight:650;text-decoration:none;transition:.18s ease}
.detail-side-card a:hover,.detail-side-card .current_page_item>a{background:#e7f2ea;color:var(--green-900)}
.detail-side-meta{display:flex;align-items:center;gap:9px;padding:13px 14px;border-radius:12px;background:var(--green-900);color:#fff}
.detail-side-meta .td-icon{width:18px;height:18px;flex:0 0 18px}
.detail-side-meta span{font-size:.7rem;line-height:1.5}

/* Automatically structured article content */
.entry-content{color:#38463e;font-size:.86rem;line-height:1.78}
.entry-content>.detail-intro-card{margin:0 0 15px;padding:18px 20px;border:1px solid #e3ece6;border-radius:var(--radius-md);background:linear-gradient(135deg,#f7fbf8,#edf6f0)}
.entry-content>.detail-intro-card>:first-child{margin-top:0}
.entry-content>.detail-intro-card>:last-child{margin-bottom:0}
.detail-section-card{margin:0 0 15px;padding:21px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;box-shadow:0 7px 22px rgba(21,69,49,.045)}
.detail-section-card>h2{display:flex;align-items:center;gap:10px;margin:0 0 15px;padding-bottom:12px;border-bottom:1px solid #e8efea;font-size:1.18rem;color:var(--green-950)}
.detail-section-card>h2::before{content:"";width:7px;height:24px;border-radius:999px;background:linear-gradient(180deg,var(--green-700),var(--green-900));flex:0 0 7px}
.detail-section-card>h3{margin:17px 0 8px;color:var(--green-900);font-size:.95rem}
.entry-content p{margin:0 0 13px}
.entry-content ul,.entry-content ol{margin:8px 0 14px;padding-left:20px}
.entry-content li{margin:5px 0}
.entry-content a{color:var(--green-800)}
.entry-content img{border-radius:var(--radius-md)}
.table-scroll{width:100%;overflow-x:auto;border:1px solid #e3ebe6;border-radius:12px;background:#fff}
.table-scroll table{margin:0;border:0;min-width:560px}
.entry-content table{width:100%;border-collapse:collapse;font-size:.77rem}
.entry-content th,.entry-content td{padding:10px 12px;border-bottom:1px solid #e8efea;text-align:left;vertical-align:top}
.entry-content th{background:#f5f9f6;color:var(--green-950);font-weight:750}
.entry-content tr:last-child th,.entry-content tr:last-child td{border-bottom:0}
.entry-content tbody tr:hover td{background:#fbfdfc}
.metric-grid{gap:10px;margin:0 0 15px}
.metric{min-height:88px;padding:15px;border:1px solid #e1ebe5;border-radius:12px;background:#f8fbf9}
.metric strong{font-size:1.25rem}
.metric span{font-size:.67rem}

/* Image-ready visual strip on detail pages */
.detail-gallery{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;margin:0 0 15px}
.detail-gallery__large,.detail-gallery__small{position:relative;overflow:hidden;border-radius:var(--radius-md);background:#edf5ef;border:1px solid var(--line)}
.detail-gallery__large{min-height:220px}
.detail-gallery__small{min-height:220px}
.detail-gallery img{width:100%;height:100%;object-fit:cover}
.detail-gallery__caption{position:absolute;inset:auto 11px 11px 11px;padding:8px 10px;border-radius:8px;background:rgba(20,67,48,.82);color:#fff;font-size:.67rem}

/* Visual data cards and animated progress bars */
.visual-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0 0 15px}
.visual-data-card{padding:17px;border:1px solid var(--line);border-radius:var(--radius-md);background:#f8fbf9}
.visual-data-card h3{margin:0 0 13px;font-size:.88rem;color:var(--green-950)}
.data-progress-list{display:grid;gap:12px}
.data-progress__top{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;font-size:.71rem}
.data-progress__top span{font-weight:650;color:var(--ink)}
.data-progress__top strong{font-size:.69rem;color:var(--green-800);white-space:nowrap}
.data-progress__track{height:8px;overflow:hidden;border-radius:999px;background:#dfece3}
.data-progress__fill,.bar-fill,.budget-progress__fill{display:block;width:0!important;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green-900),var(--green-600,#4b8a6d));transition:width 1s cubic-bezier(.2,.75,.2,1)}
.data-progress.is-active .data-progress__fill,.bar-row.is-active .bar-fill,.budget-progress.is-active .budget-progress__fill{width:var(--target-progress,0%)!important}
.has-js .budget-progress.is-visible .budget-progress__fill{width:var(--target-progress,0%)!important}

/* Timeline used by the history page */
.history-timeline{display:grid;gap:12px;margin:0 0 15px}
.history-event{display:grid;grid-template-columns:88px minmax(0,1fr);gap:15px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff}
.history-event__year{display:flex;align-items:center;justify-content:center;min-height:58px;border-radius:11px;background:var(--green-900);color:#fff;font-weight:800;font-size:1rem}
.history-event h3{margin:0 0 5px;font-size:.92rem;color:var(--green-950)}
.history-event p{margin:0;color:var(--muted);font-size:.76rem}

/* Cards for information, e-books and empty states */
.post-grid,.ebook-grid,.kkn-resource-grid{gap:14px}
.post-card,.ebook-card,.resource-card,.empty-state{border-radius:var(--radius-md)}
.post-card__thumb{min-height:155px}
.post-card__body{padding:16px}
.post-card__body h3{font-size:.94rem}
.post-card__body p{font-size:.75rem}
.empty-state{grid-column:1/-1;padding:30px;border:1px dashed #cfe0d4;background:#f7fbf8;text-align:center;color:var(--muted)}
.ebook-card{min-height:245px}
.ebook-cover{min-height:125px}

/* Top-level templates stay compact */
.template-hero{padding:36px 0 30px}
.template-hero h1{font-size:clamp(1.85rem,3.2vw,2.65rem)}
.template-hero p{max-width:660px}
.feature-card--vertical{min-height:225px}
.contact-list li{overflow:hidden}
.contact-icon{display:grid!important;place-items:center!important;padding:0!important}
.contact-icon svg{position:static!important;margin:0!important;inset:auto!important}

@media(max-width:980px){
  .detail-hero__grid{grid-template-columns:1fr .72fr}
  .detail-layout{grid-template-columns:1fr}
  .detail-sidebar{position:static;grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .detail-hero{padding:30px 0 26px}
  .detail-hero__grid{grid-template-columns:1fr;gap:20px}
  .detail-visual{min-height:190px}
  .detail-visual img{min-height:190px}
  .detail-main{padding:24px 0 46px}
  .detail-article{padding:17px}
  .detail-sidebar{grid-template-columns:1fr}
  .visual-data-grid,.detail-gallery{grid-template-columns:1fr}
  .detail-gallery__large,.detail-gallery__small{min-height:185px}
  .history-event{grid-template-columns:66px 1fr;padding:13px}
  .history-event__year{min-height:52px;font-size:.85rem}
  .detail-section-card{padding:17px}
}

.detail-main{padding:34px 0 58px}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:18px;align-items:start}
.detail-article,
.detail-article.card{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.detail-article .entry-content{margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.detail-article .entry-content>.metric-grid,
.detail-article .entry-content>.visual-data-grid,
.detail-article .entry-content>.visual-data-card,
.detail-article .entry-content>.detail-intro-card,
.detail-article .entry-content>.detail-section-card{margin-bottom:14px}
.detail-intro-card,.detail-section-card{
  padding:19px 20px!important;
  border:1px solid #dfe9e2!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(20,70,49,.055)!important;
}
.detail-intro-card{background:linear-gradient(135deg,#f7fbf8,#eef6f1)!important}
.detail-section-card>h2{display:flex;align-items:center;gap:9px;margin:0 0 14px!important;padding:0 0 12px;border-bottom:1px solid #e5ede7;font-size:1.03rem!important;line-height:1.3;color:#164c37}
.detail-section-card>h2:before{content:"";width:5px;height:20px;border-radius:99px;background:#2d7a5a;flex:0 0 5px}
.detail-section-card>:last-child{margin-bottom:0!important}
.visual-data-grid{gap:12px!important}
.visual-data-card{padding:18px!important;border:1px solid #dfe9e2!important;border-radius:14px!important;background:#fff!important;box-shadow:0 8px 22px rgba(20,70,49,.045)!important}
.visual-data-grid>.visual-data-card{margin:0!important}
.metric-grid{gap:10px!important}
.metric{min-width:0;padding:16px!important;border:1px solid #dfe9e2!important;border-radius:12px!important;background:#f8fbf9!important;box-shadow:none!important}
.metric strong{font-size:1.15rem!important;line-height:1.2;overflow-wrap:anywhere}
.metric span{font-size:.69rem!important;line-height:1.45}
.table-scroll{border:1px solid #e0e9e3;border-radius:11px;overflow:auto;background:#fff}
.table-scroll table{margin:0!important;border:0!important}
.entry-content table{margin:0!important}
.entry-content th,.entry-content td{border:0!important;border-bottom:1px solid #e8efea!important}
.entry-content tr:last-child th,.entry-content tr:last-child td{border-bottom:0!important}
.detail-sidebar{position:sticky;top:104px;display:grid;gap:12px}
.detail-side-card{padding:14px!important;border:1px solid #dfe9e2!important;border-radius:13px!important;background:#fff!important;box-shadow:0 7px 20px rgba(20,70,49,.04)}
.detail-side-card h3{margin:0 0 9px!important;font-size:.69rem!important;letter-spacing:.11em!important}
.detail-side-card ul{gap:3px!important}
.detail-side-card li{margin:0!important}
.detail-side-card a{padding:8px 9px!important;font-size:.71rem!important;line-height:1.35!important}
.detail-side-card a[aria-current="page"],.detail-side-card .is-current{background:#e6f2e9!important;color:#14503a!important;font-weight:750!important}
.detail-side-meta{padding:11px 12px!important;border-radius:11px!important}
.detail-side-meta span{font-size:.65rem!important}
.detail-hero{padding:34px 0!important}
.detail-hero__grid{gap:26px!important}
.detail-hero h1{font-size:clamp(1.8rem,3.2vw,2.65rem)!important;line-height:1.08!important}
.detail-hero__excerpt{font-size:.87rem!important;max-width:62ch}
.detail-visual{max-height:250px}
.detail-visual img{height:100%;object-fit:cover}
.data-progress__fill,.bar-fill,.budget-progress__fill{will-change:width}
.has-js .data-progress__fill,.has-js .bar-fill,.has-js .budget-progress__fill{width:0!important}
.data-progress.is-active .data-progress__fill,.bar-row.is-active .bar-fill,.budget-progress.is-active .budget-progress__fill{width:var(--target-progress,0%)!important}
@media(max-width:920px){.detail-layout{grid-template-columns:1fr}.detail-sidebar{position:static;grid-template-columns:1fr}.detail-side-meta{display:none}}
@media(max-width:640px){.detail-main{padding:24px 0 42px}.detail-intro-card,.detail-section-card,.visual-data-card{padding:15px!important}.detail-hero{padding:27px 0!important}.detail-visual{max-height:190px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}