/* ============================================================
   DISARPUS WONOGIRI — Main Stylesheet
   ============================================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-serif);
    color: var(--c-text-primary);
    background: var(--c-cream);
    line-height: 1.65;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--c-blue-mid); text-decoration: none; transition: color var(--tx-fast); }
a:hover { color: var(--c-blue-electric); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; margin: 0; color: var(--c-brown-ink); }
button { font-family: inherit; }


/* ============================================================
   HEADER
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-cream-surface);
    border-bottom: 1px solid var(--c-cream-border);
}

/* -- Utility bar -- */
.utility-bar {
    background: var(--grad-header);
    color: var(--c-text-on-dark);
    position: relative;
}
.utility-bar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0.625rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.15em;
}
.utility-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.utility-bar__item--right {
    gap: 1.125rem;
}
.utility-bar__item .ti { font-size: 13px; color: var(--c-gold-light); }
.utility-bar__separator { opacity: 0.4; }
.utility-bar__lang {
    color: var(--c-text-on-dark);
    transition: color var(--tx-fast);
}
.utility-bar__lang:hover { color: var(--c-gold-light); }
.utility-bar__accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-accent-line);
}

/* -- Primary bar (logo + nav) -- */
.primary-bar {
    background: linear-gradient(180deg, var(--c-cream-surface) 0%, var(--c-cream) 100%);
}
.primary-bar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

/* -- Brand / Logo -- */
.brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: inherit;
}
.brand:hover { color: inherit; }
.brand__mark {
    width: 52px;
    height: 52px;
    border: 2px solid var(--c-gold-mid);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-blue-pale) 0%, var(--c-cream-surface) 50%, var(--c-green-pale) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.brand__mark-inner {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--c-brown-ink);
}
.brand__mark-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 4px;
}
/* Saat ada logo asli, hilangkan gradient background biar logo tetap dominan */
.brand__mark:has(.brand__mark-img) {
    background: var(--c-cream-surface);
}
.brand__text { display: flex; flex-direction: column; }
.brand__title {
    font-family: var(--font-label);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--c-blue-darkest);
}
.brand__subtitle {
    font-family: var(--font-display);
    font-size: 13px;
    font-style: italic;
    color: var(--c-green-deep);
    margin-top: -2px;
}

/* -- Main nav -- */
.main-nav {
    display: flex;
    gap: 1.5rem;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.15em;
}
.main-nav__link {
    color: var(--c-brown);
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: all var(--tx-fast);
}
.main-nav__link:hover {
    color: var(--c-brown-ink);
    border-bottom-color: var(--c-gold-mid);
}
.main-nav__link.is-active {
    color: var(--c-brown-ink);
    border-bottom-color: var(--c-gold-mid);
    font-weight: 700;
}
.main-nav__link--blue {
    color: var(--c-blue-darkest);
    font-weight: 500;
}
.main-nav__link--blue:hover, .main-nav__link--blue.is-active {
    color: var(--c-blue-electric);
    border-bottom-color: var(--c-blue-mid);
}
.main-nav__link--green {
    color: var(--c-green-deep);
    font-weight: 500;
}
.main-nav__link--green:hover, .main-nav__link--green.is-active {
    color: var(--c-green-mid);
    border-bottom-color: var(--c-green);
}
.main-nav__link--gold {
    color: #8b6f2e;
    font-weight: 500;
}
.main-nav__link--gold:hover, .main-nav__link--gold.is-active {
    color: #c8a958;
    border-bottom-color: #c8a958;
}

/* -- Mobile nav toggle -- */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--c-cream-border);
    padding: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius);
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-brown-ink);
    margin: 4px 0;
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    background: linear-gradient(135deg,
        rgba(27, 94, 63, 0.12) 0%,
        rgba(245, 239, 226, 1) 35%,
        rgba(245, 239, 226, 1) 65%,
        rgba(27, 79, 163, 0.14) 100%),
        var(--c-cream);
    overflow: hidden;
}
.hero__inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.hero__glow--green {
    top: -80px; left: -60px;
    width: 340px; height: 340px;
    background: radial-gradient(circle,
        rgba(27, 94, 63, 0.22) 0%,
        rgba(27, 94, 63, 0.08) 40%,
        transparent 70%);
}
.hero__glow--blue {
    top: -60px; right: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle,
        rgba(27, 79, 163, 0.22) 0%,
        rgba(37, 99, 235, 0.08) 40%,
        transparent 70%);
}
.hero__glow--gold {
    bottom: -30px; left: 50%;
    transform: translateX(-50%);
    width: 280px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse at bottom,
        rgba(200, 169, 97, 0.18) 0%,
        transparent 70%);
}

.hero__motto {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.4em;
    margin: 0 0 1rem;
}
.hero__motto--blue { color: var(--c-blue-mid); }
.hero__motto--gold { color: var(--c-gold); }
.hero__motto--green { color: var(--c-green-deep); }
.hero__motto--sep { color: var(--c-gold); margin: 0 0.25rem; }

.hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.12;
    color: var(--c-brown-ink);
    letter-spacing: -0.5px;
    margin: 0 0 0.875rem;
}

.text-grad {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    font-weight: 600;
}
.text-grad--green {
    background-image: linear-gradient(90deg,
        var(--c-green-deep) 0%,
        var(--c-green) 50%,
        var(--c-green-mid) 100%);
}
.text-grad--blue {
    background-image: linear-gradient(90deg,
        var(--c-blue-darkest) 0%,
        var(--c-blue-mid) 50%,
        var(--c-blue-electric) 100%);
}
.text-grad--gold {
    background-image: linear-gradient(90deg,
        var(--c-brown-deep) 0%,
        var(--c-gold) 30%,
        var(--c-gold-mid) 50%,
        var(--c-gold) 70%,
        var(--c-brown-deep) 100%);
}

.hero__lead {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-style: italic;
    color: var(--c-brown);
    max-width: 480px;
    margin: 0 auto 1.75rem;
    line-height: 1.5;
}

.hero__cta {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero__ornament {
    margin-top: 2.25rem;
    font-size: 18px;
    letter-spacing: 0.7em;
}

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.15em;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--tx-fast), box-shadow var(--tx-fast), filter var(--tx-fast);
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }

.btn--blue {
    background: var(--grad-btn-blue);
    color: var(--c-cream-surface);
    border: 1px solid var(--c-blue-electric);
    box-shadow: var(--shadow-blue);
}
.btn--blue:hover { color: var(--c-cream-surface); }

.btn--green {
    background: var(--grad-btn-green);
    color: var(--c-cream-surface);
    border: 1px solid var(--c-green-mid);
    box-shadow: var(--shadow-green);
}
.btn--green:hover { color: var(--c-cream-surface); }

.btn--brown {
    background: var(--grad-btn-brown);
    color: var(--c-cream-surface);
    border: 1px solid var(--c-gold-mid);
    box-shadow: var(--shadow-brown);
}
.btn--brown:hover { color: var(--c-cream-surface); }

.btn--outline {
    background: transparent;
    color: var(--c-brown-ink);
    border: 1.5px solid var(--c-brown-ink);
}


/* ============================================================
   PARTNERSHIP BAND
   ============================================================ */
.partnership {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid var(--c-cream-border);
}
@media (max-width: 880px) {
    .partnership { grid-template-columns: 1fr; }
    .partnership__panel { border-right: none !important; border-bottom: 1px solid var(--c-gold-mid); }
}
.partnership__panel {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--c-cream-surface);
    position: relative;
}
.partnership__panel--green {
    background: linear-gradient(135deg,
        var(--c-green-deep) 0%,
        var(--c-green) 60%,
        var(--c-green-mid) 100%);
    border-right: 1px solid var(--c-gold-mid);
}
.partnership__panel--blue {
    background: linear-gradient(135deg,
        var(--c-blue-darkest) 0%,
        var(--c-blue-mid) 60%,
        var(--c-blue-electric) 100%);
    border-right: 1px solid var(--c-gold-mid);
}
.partnership__panel--gold {
    background: linear-gradient(135deg,
        #8b6f2e 0%,
        #c8a958 60%,
        #d9bf7a 100%);
    color: #2a1f0c;
}
.partnership__panel--gold .partnership__title,
.partnership__panel--gold .partnership__sub { color: #2a1f0c; }
.partnership__panel--gold .partnership__eyebrow { color: #6b5219; }
.partnership__panel--gold .partnership__icon {
    background: rgba(42, 31, 12, 0.12);
    color: #4a3818;
}
.partnership__panel--gold:hover { filter: brightness(1.03); }
.partnership__panel { transition: filter 0.18s; }
.partnership__panel:hover { filter: brightness(1.08); }
.partnership__panel--link {
    text-decoration: none;
    cursor: pointer;
}
.partnership__panel--link::after {
    content: '';
    position: absolute;
    inset: 0;
}
.partnership__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(245, 235, 213, 0.15);
    border: 1.5px solid var(--c-gold-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.partnership__icon .ti {
    font-size: 24px;
    color: var(--c-gold-light);
}
.partnership__body { flex: 1; min-width: 0; }
.partnership__eyebrow {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.2em;
    margin: 0 0 0.25rem;
    color: var(--c-gold-light);
}
.partnership__panel--green .partnership__eyebrow { color: var(--c-gold-mid); }
.partnership__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-cream-surface);
    margin: 0;
}
.partnership__sub {
    font-family: var(--font-serif);
    font-size: 12px;
    font-style: italic;
    color: rgba(232, 221, 196, 0.85);
    margin: 0.125rem 0 0;
}


/* ============================================================
   KATEGORI CARDS
   ============================================================ */
.categories {
    padding: 2rem 1.5rem;
    background: linear-gradient(180deg, var(--c-cream-shade) 0%, var(--c-cream) 100%);
    border-top: 1px solid var(--c-cream-border);
}
.categories__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875rem;
}

.cat-card {
    padding: 1.5rem 1rem 1.25rem;
    text-align: center;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--tx), box-shadow var(--tx);
}
.cat-card:hover { transform: translateY(-3px); }

.cat-card__top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
.cat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cat-card__icon .ti {
    font-size: 24px;
    color: var(--c-cream-surface);
}
.cat-card__title {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.18em;
    margin: 0 0 0.375rem;
}
.cat-card__desc {
    font-family: var(--font-display);
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
    margin: 0;
}
.cat-card__stat {
    margin: 0.625rem 0 0;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1;
}
.cat-card__stat span {
    font-size: 11px;
    font-weight: 400;
    margin-left: 0.25rem;
}

/* Card variants */
.cat-card--blue {
    background: linear-gradient(180deg, var(--c-blue-wash) 0%, var(--c-blue-faint) 100%);
    border: 1px solid var(--c-blue-mid);
    box-shadow: var(--shadow-blue);
}
.cat-card--blue .cat-card__top {
    background: linear-gradient(90deg, var(--c-blue-darkest), var(--c-blue-mid), var(--c-blue-electric));
}
.cat-card--blue .cat-card__icon {
    background: linear-gradient(135deg, var(--c-blue-mid) 0%, var(--c-blue-electric) 100%);
    box-shadow: 0 2px 8px rgba(27, 79, 163, 0.25);
}
.cat-card--blue .cat-card__title { color: var(--c-blue-darkest); }
.cat-card--blue .cat-card__desc { color: var(--c-blue-navy); }
.cat-card--blue .cat-card__stat { color: var(--c-blue-darkest); }
.cat-card--blue .cat-card__stat span { color: var(--c-blue-navy); }

.cat-card--green {
    background: linear-gradient(180deg, var(--c-green-wash) 0%, var(--c-green-faint) 100%);
    border: 1px solid var(--c-green);
    box-shadow: var(--shadow-green);
}
.cat-card--green .cat-card__top {
    background: linear-gradient(90deg, var(--c-green-deep), var(--c-green), var(--c-green-mid));
}
.cat-card--green .cat-card__icon {
    background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-mid) 100%);
    box-shadow: 0 2px 8px rgba(27, 94, 63, 0.25);
}
.cat-card--green .cat-card__title { color: var(--c-green-deep); }
.cat-card--green .cat-card__desc { color: var(--c-green); }
.cat-card--green .cat-card__stat { color: var(--c-green-deep); }
.cat-card--green .cat-card__stat span { color: var(--c-green); }

.cat-card--brown {
    background: linear-gradient(180deg, var(--c-gold-pale) 0%, var(--c-gold-wash) 100%);
    border: 1px solid var(--c-gold);
    box-shadow: var(--shadow-brown);
}
.cat-card--brown .cat-card__top {
    background: linear-gradient(90deg, var(--c-brown-ink), var(--c-brown), var(--c-gold-mid));
}
.cat-card--brown .cat-card__icon {
    background: linear-gradient(135deg, var(--c-brown-deep) 0%, var(--c-gold) 100%);
    box-shadow: 0 2px 8px rgba(62, 40, 23, 0.25);
}
.cat-card--brown .cat-card__title { color: var(--c-brown-ink); }
.cat-card--brown .cat-card__desc { color: var(--c-brown); }
.cat-card--brown .cat-card__stat { color: var(--c-brown-ink); }
.cat-card--brown .cat-card__stat span { color: var(--c-brown); }


/* ============================================================
   HOMEPAGE — WONOGIRIPEDIA HIGHLIGHT
   ============================================================ */
.home-wpedia {
    position: relative;
    overflow: hidden;
    padding: 2.7rem 1.5rem 2.75rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(27, 94, 63, 0.12), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(27, 79, 163, 0.11), transparent 34%),
        linear-gradient(180deg, var(--c-cream-surface) 0%, var(--c-green-faint) 48%, var(--c-cream) 100%);
    border-top: 1px solid var(--c-cream-border);
}
.home-wpedia::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(62, 40, 23, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(62, 40, 23, 0.026) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.8), transparent 76%);
    pointer-events: none;
}
.home-wpedia__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
}
.home-wpedia__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}
.home-wpedia__eyebrow {
    margin: 0 0 0.25rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--c-green-deep);
    font-weight: 800;
}
.home-wpedia__heading {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.6vw, 2.25rem);
    font-weight: 650;
    color: var(--c-brown-ink);
    margin: 0;
}
.home-wpedia__lead {
    max-width: 690px;
    margin: 0.35rem 0 0;
    font-size: 13px;
    color: var(--c-brown);
}
.home-wpedia__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    font-weight: 800;
    color: var(--c-green-deep);
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(27, 94, 63, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
}
.home-wpedia__more:hover {
    color: var(--c-blue-darkest);
    border-color: rgba(27, 79, 163, 0.28);
    background: rgba(255, 255, 255, 0.86);
}
.home-wpedia__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr);
    gap: 1rem;
    align-items: stretch;
}
.home-wpedia-feature {
    display: grid;
    grid-template-columns: minmax(245px, 0.95fr) minmax(0, 1.05fr);
    min-height: 350px;
    overflow: hidden;
    border: 1px solid rgba(200, 169, 97, 0.38);
    border-radius: calc(var(--radius) + 10px);
    background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(248, 244, 232, 0.92) 100%);
    box-shadow: 0 22px 48px rgba(62, 40, 23, 0.12);
}
.home-wpedia-feature__media {
    position: relative;
    display: flex;
    min-height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-green-deep), var(--c-gold));
}
.home-wpedia-feature__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.28) 100%),
        radial-gradient(circle at 50% 42%, transparent 0%, rgba(0,0,0,0.13) 100%);
    pointer-events: none;
}
.home-wpedia-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tx);
}
.home-wpedia-feature:hover .home-wpedia-feature__media img { transform: scale(1.045); }
.home-wpedia-feature__placeholder {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
}
.home-wpedia-feature__placeholder .ti { font-size: 4.4rem; }
.home-wpedia-feature__seal {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-brown-ink);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}
.home-wpedia-feature__body {
    padding: 1.55rem 1.55rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-wpedia__badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: 0.15em;
    font-weight: 800;
    color: var(--c-cream-surface);
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    line-height: 1.2;
    text-transform: uppercase;
}
.home-wpedia__badge .ti { font-size: 12px; }
.home-wpedia__badge--sepia { background: var(--c-brown); }
.home-wpedia__badge--blue { background: var(--c-blue-mid); }
.home-wpedia__badge--green { background: var(--c-green); }
.home-wpedia__badge--gold { background: var(--c-gold-deep); }
.home-wpedia__badge--brown { background: var(--c-brown-ink); }
.home-wpedia__badge--teal { background: #24736a; }
.home-wpedia-feature--blue .home-wpedia-feature__media,
.home-wpedia-mini--blue .home-wpedia-mini__media { background: linear-gradient(135deg, var(--c-blue-darkest), var(--c-blue-electric)); }
.home-wpedia-feature--green .home-wpedia-feature__media,
.home-wpedia-mini--green .home-wpedia-mini__media { background: linear-gradient(135deg, var(--c-green-deep), var(--c-green-mid)); }
.home-wpedia-feature--gold .home-wpedia-feature__media,
.home-wpedia-mini--gold .home-wpedia-mini__media { background: linear-gradient(135deg, var(--c-brown), var(--c-gold)); }
.home-wpedia-feature--brown .home-wpedia-feature__media,
.home-wpedia-mini--brown .home-wpedia-mini__media { background: linear-gradient(135deg, var(--c-brown-ink), var(--c-gold-deep)); }
.home-wpedia-feature--teal .home-wpedia-feature__media,
.home-wpedia-mini--teal .home-wpedia-mini__media { background: linear-gradient(135deg, #155e57, #3aa690); }
.home-wpedia-feature__title {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.1vw, 2.05rem);
    font-weight: 650;
    line-height: 1.14;
    margin: 0.75rem 0 0.75rem;
    color: var(--c-brown-ink);
}
.home-wpedia-feature__title a { color: inherit; }
.home-wpedia-feature__title a:hover { color: var(--c-green-deep); }
.home-wpedia-feature__excerpt {
    margin: 0;
    color: var(--c-brown);
    font-size: 13px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-wpedia__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    margin-top: 0.95rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--c-brown);
}
.home-wpedia__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
}
.home-wpedia-feature__read {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.13em;
    font-weight: 800;
    color: var(--c-green-deep);
    text-transform: uppercase;
}
.home-wpedia-feature__read:hover { color: var(--c-blue-darkest); }
.home-wpedia-list {
    display: grid;
    gap: 0.75rem;
}
.home-wpedia-mini {
    position: relative;
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 0.875rem;
    padding: 0.875rem;
    border: 1px solid rgba(200, 169, 97, 0.34);
    border-radius: calc(var(--radius) + 4px);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 9px 24px rgba(62, 40, 23, 0.065);
    transition: transform var(--tx-fast), box-shadow var(--tx-fast), border-color var(--tx-fast), background var(--tx-fast);
}
.home-wpedia-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(62, 40, 23, 0.095);
    border-color: rgba(27, 94, 63, 0.25);
    background: rgba(255, 255, 255, 0.84);
}
.home-wpedia-mini__media {
    width: 102px;
    height: 102px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-cream-surface);
    background: linear-gradient(135deg, var(--c-green-deep), var(--c-gold));
}
.home-wpedia-mini__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tx-fast);
}
.home-wpedia-mini:hover .home-wpedia-mini__media img { transform: scale(1.04); }
.home-wpedia-mini__media .ti { font-size: 2.25rem; }
.home-wpedia-mini__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-wpedia-mini__title {
    font-family: var(--font-display);
    font-size: 1.03rem;
    font-weight: 650;
    line-height: 1.24;
    margin: 0.45rem 0 0;
    color: var(--c-brown-ink);
}
.home-wpedia-mini__title a { color: inherit; }
.home-wpedia-mini__title a:hover { color: var(--c-green-deep); }
.home-wpedia-mini__excerpt {
    margin: 0.35rem 0 0;
    font-size: 11px;
    color: var(--c-brown);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-wpedia-empty {
    border: 1px dashed rgba(27, 94, 63, 0.28);
    border-radius: calc(var(--radius) + 5px);
    background: rgba(255, 255, 255, 0.55);
    padding: 1.6rem;
    text-align: center;
    color: var(--c-brown);
}
.home-wpedia-empty .ti {
    font-size: 2.2rem;
    color: var(--c-green-deep);
    margin-bottom: 0.35rem;
}
.home-wpedia-empty p { margin: 0 0 0.875rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--c-cream-shade);
    border-top: 1px solid var(--c-cream-border);
}
.site-footer__main {
    padding: 2.5rem 1.5rem 2rem;
}
.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
}
.site-footer__col h4 {
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--c-brown-ink);
    margin: 0 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-cream-line);
}
.site-footer__text {
    font-size: 13px;
    color: var(--c-brown);
    margin: 0 0 0.5rem;
}
.site-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer__list li { margin-bottom: 0.5rem; }
.site-footer__list a {
    font-size: 13px;
    color: var(--c-brown);
}
.site-footer__list a:hover { color: var(--c-blue-electric); }

.site-footer__copyright {
    background: var(--grad-footer);
    color: var(--c-text-on-dark);
    padding: 1.125rem 1.5rem;
    text-align: center;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.2em;
    border-top: 2px solid var(--c-gold-mid);
    position: relative;
}
.site-footer__copyright-accent {
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--c-gold-mid) 20%,
        var(--c-green-mid) 40%,
        var(--c-blue-electric) 60%,
        var(--c-gold-mid) 80%,
        transparent 100%);
    opacity: 0.7;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--c-cream-surface);
        flex-direction: column;
        padding: 1rem 1.5rem;
        gap: 1rem;
        border-top: 1px solid var(--c-cream-border);
        display: none;
    }
    .main-nav.is-open { display: flex; }
    .categories__inner { grid-template-columns: 1fr; }
    .partnership { grid-template-columns: 1fr; }
    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .hero { padding: 2.5rem 1rem 2rem; }
    .hero__title { font-size: 2rem; }
    .utility-bar__inner { font-size: 9px; padding: 0.5rem 1rem; }
    .utility-bar__item--right { gap: 0.5rem; }
    .site-footer__inner { grid-template-columns: 1fr; }
}


/* ============================================================
   PAGE BANNER (header sub-halaman)
   ============================================================ */
.page-banner {
    position: relative;
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    background: linear-gradient(180deg,
        var(--c-cream-surface) 0%,
        var(--c-cream) 60%,
        var(--c-cream-shade) 100%);
    border-bottom: 1px solid var(--c-cream-border);
    overflow: hidden;
}
.page-banner__inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.page-banner__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.page-banner__glow--gold {
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 480px; height: 200px;
    background: radial-gradient(ellipse at top,
        rgba(200, 169, 97, 0.18) 0%,
        transparent 70%);
}

.page-banner__eyebrow {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--c-gold);
    margin: 0.5rem 0 0.625rem;
}
.page-banner__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.625rem, 4vw, 2.5rem);
    line-height: 1.15;
    color: var(--c-brown-ink);
    margin: 0;
    letter-spacing: -0.3px;
}
.page-banner__ornament {
    margin-top: 1rem;
    font-size: 14px;
    letter-spacing: 0.6em;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--c-brown);
}
.breadcrumb a {
    color: var(--c-brown);
}
.breadcrumb a:hover { color: var(--c-blue-electric); }
.breadcrumb__sep {
    margin: 0 0.5rem;
    color: var(--c-gold);
}
.breadcrumb__current { color: var(--c-brown-ink); font-weight: 700; }


/* ============================================================
   PAGE BODY (sidebar + content)
   ============================================================ */
.page-body {
    padding: 2.5rem 1.5rem 3rem;
    background: var(--c-cream);
}
.page-body__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
}


/* ============================================================
   SIDE NAV
   ============================================================ */
.side-nav {
    position: sticky;
    top: 88px;
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    padding: 1.25rem 0;
    box-shadow: var(--shadow-card);
}
.side-nav__heading {
    padding: 0 1.25rem 0.875rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-cream-line);
}
.side-nav__eyebrow {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--c-brown-ink);
    display: block;
}
.side-nav__line {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--grad-accent-line);
    margin-top: 0.5rem;
}
.side-nav__list {
    display: flex;
    flex-direction: column;
}
.side-nav__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--c-brown);
    border-left: 3px solid transparent;
    transition: all var(--tx-fast);
}
.side-nav__link:hover {
    color: var(--c-brown-ink);
    background: var(--c-cream);
    border-left-color: var(--c-gold-mid);
}
.side-nav__link.is-active {
    color: var(--c-blue-darkest);
    background: linear-gradient(90deg, var(--c-blue-wash) 0%, transparent 100%);
    border-left-color: var(--c-blue-mid);
    font-weight: 500;
}
.side-nav__marker {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--c-cream-border);
    flex-shrink: 0;
    transition: all var(--tx-fast);
}
.side-nav__link:hover .side-nav__marker { background: var(--c-gold-mid); }
.side-nav__link.is-active .side-nav__marker {
    background: var(--c-blue-mid);
    box-shadow: 0 0 0 3px rgba(27, 79, 163, 0.18);
}


/* ============================================================
   PROSE (editorial content / artikel panjang)
   ============================================================ */
.prose {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.75;
    color: var(--c-brown-ink);
    max-width: 720px;
}
.prose > * + * { margin-top: 1.25rem; }

.prose p { margin: 0; }
.prose p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 600;
    float: left;
    line-height: 0.9;
    padding: 0.5rem 0.5rem 0 0;
    color: var(--c-gold-deep);
}

.prose h2 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    color: var(--c-brown-ink);
    margin: 2.25rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-cream-line);
    position: relative;
}
.prose h2::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 40px; height: 2px;
    background: var(--c-gold-mid);
}

.prose h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-blue-darkest);
    margin: 1.75rem 0 0.5rem;
}

.prose ul, .prose ol {
    margin: 0;
    padding-left: 1.5rem;
}
.prose ul li, .prose ol li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}
.prose ul li::marker { color: var(--c-gold); }
.prose ol li::marker { color: var(--c-blue-mid); font-weight: 500; }

.prose strong { color: var(--c-brown-ink); font-weight: 600; }
.prose em { font-style: italic; color: var(--c-brown); }

.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--c-gold-wash);
    border-left: 4px solid var(--c-gold);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-style: italic;
    color: var(--c-brown);
}
.prose blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--c-brown-soft);
    font-style: normal;
}

.prose a {
    color: var(--c-blue-mid);
    border-bottom: 1px dotted var(--c-blue-mid);
}
.prose a:hover {
    color: var(--c-blue-electric);
    border-bottom-style: solid;
}

.prose__note {
    background: var(--c-cream-shade);
    border: 1px dashed var(--c-cream-border);
    padding: 1rem;
    border-radius: var(--radius);
    color: var(--c-brown);
    font-style: italic;
}

.prose__footer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-cream-line);
}
.prose__updated {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--c-brown-soft);
}

/* Tables in prose (struktur organisasi, dll) */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 15px;
    border: 1px solid var(--c-cream-border);
}
.prose table th {
    background: var(--c-cream-dark);
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--c-brown-ink);
    border-bottom: 2px solid var(--c-gold-mid);
}
.prose table td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--c-cream-line);
}
.prose table tr:last-child td { border-bottom: none; }
.prose table tr:hover td { background: var(--c-cream-surface); }


/* ============================================================
   RESPONSIVE — Page body & sidebar
   ============================================================ */
@media (max-width: 900px) {
    .page-body__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .side-nav { position: static; }
    .prose { max-width: none; }
}
@media (max-width: 560px) {
    .page-body { padding: 1.5rem 1rem 2rem; }
    .page-banner { padding: 1.75rem 1rem 1.5rem; }
    .prose { font-size: 16px; }
    .prose p:first-of-type::first-letter { font-size: 2.75rem; }
}


/* ============================================================
   BERITA — Toolbar (search + filter pills)
   ============================================================ */
.berita-toolbar {
    background: var(--c-cream-shade);
    border-bottom: 1px solid var(--c-cream-border);
    padding: 1rem 1.5rem;
}
.berita-toolbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.berita-toolbar__search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.875rem;
    width: 300px;
    max-width: 100%;
    transition: border-color var(--tx-fast);
}
.berita-toolbar__search:focus-within {
    border-color: var(--c-blue-mid);
    box-shadow: 0 0 0 3px rgba(27, 79, 163, 0.12);
}
.berita-toolbar__search .ti-search {
    font-size: 16px;
    color: var(--c-brown-soft);
    margin-right: 0.5rem;
}
.berita-toolbar__search input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--c-brown-ink);
    width: 100%;
}
.berita-toolbar__search input::placeholder { color: var(--c-brown-soft); font-style: italic; }
.berita-toolbar__clear {
    color: var(--c-brown-soft);
    font-size: 16px;
    line-height: 1;
    margin-left: 0.25rem;
}
.berita-toolbar__clear:hover { color: var(--c-brown-ink); }

.berita-toolbar__filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.berita-toolbar__pill {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    padding: 0.5rem 0.875rem;
    background: var(--c-cream-surface);
    color: var(--c-brown);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius-pill);
    transition: all var(--tx-fast);
}
.berita-toolbar__pill:hover {
    color: var(--c-brown-ink);
    border-color: var(--c-gold-mid);
}
.berita-toolbar__pill.is-active {
    background: var(--c-brown-ink);
    color: var(--c-cream-surface);
    border-color: var(--c-brown-ink);
}
.berita-toolbar__pill--gold.is-active { background: var(--c-gold); border-color: var(--c-gold); }
.berita-toolbar__pill--blue.is-active { background: var(--c-blue-mid); border-color: var(--c-blue-mid); }
.berita-toolbar__pill--green.is-active { background: var(--c-green); border-color: var(--c-green); }


/* ============================================================
   BERITA — Listing layout
   ============================================================ */
.berita-list {
    padding: 2rem 1.5rem 3rem;
    background: var(--c-cream);
}
.berita-list__inner {
    max-width: var(--container);
    margin: 0 auto;
}
.berita-list__notice {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--c-brown);
    margin: 0 0 1rem;
    font-size: 1rem;
}


/* ---- Featured (sorotan) ---- */
.berita-feature {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-card);
}
.berita-feature__media {
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-cream-surface);
    position: relative;
}
.berita-feature__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 100%);
}
.berita-feature__media .ti { font-size: 88px; opacity: 0.6; position: relative; z-index: 1; }
.berita-feature__media--gold  { background: linear-gradient(135deg, var(--c-gold-deep) 0%, var(--c-gold) 60%, var(--c-gold-mid) 100%); }
.berita-feature__media--blue  { background: linear-gradient(135deg, var(--c-blue-darkest) 0%, var(--c-blue-mid) 60%, var(--c-blue-electric) 100%); }
.berita-feature__media--green { background: linear-gradient(135deg, var(--c-green-deep) 0%, var(--c-green) 60%, var(--c-green-mid) 100%); }
.berita-feature__media--brown { background: linear-gradient(135deg, var(--c-brown-ink) 0%, var(--c-brown) 60%, var(--c-gold) 100%); }

.berita-feature__body { padding: 1.75rem 2rem; display: flex; flex-direction: column; justify-content: center; }
.berita-feature__title {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.5vw, 1.75rem);
    font-weight: 600;
    color: var(--c-brown-ink);
    line-height: 1.2;
    margin: 0.625rem 0 0.625rem;
}
.berita-feature__title a { color: inherit; }
.berita-feature__title a:hover { color: var(--c-blue-electric); }
.berita-feature__excerpt {
    font-family: var(--font-serif);
    color: var(--c-brown);
    margin: 0 0 1rem;
    line-height: 1.6;
}


/* ---- Grid berita ---- */
.berita-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.berita-card {
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--tx), box-shadow var(--tx);
    display: flex;
    flex-direction: column;
}
.berita-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.berita-card__media {
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-cream-surface);
    position: relative;
}
.berita-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
}
.berita-card__media .ti { font-size: 48px; opacity: 0.65; position: relative; z-index: 1; }
.berita-card__media--gold  { background: linear-gradient(135deg, var(--c-gold-deep) 0%, var(--c-gold) 100%); }
.berita-card__media--blue  { background: linear-gradient(135deg, var(--c-blue-deep) 0%, var(--c-blue-mid) 100%); }
.berita-card__media--green { background: linear-gradient(135deg, var(--c-green-deep) 0%, var(--c-green) 100%); }
.berita-card__media--brown { background: linear-gradient(135deg, var(--c-brown-deep) 0%, var(--c-brown) 100%); }

.berita-card__body { padding: 1rem 1.125rem 1.125rem; display: flex; flex-direction: column; flex: 1; }
.berita-card__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-brown-ink);
    margin: 0.5rem 0 0.5rem;
}
.berita-card__title a { color: inherit; }
.berita-card__title a:hover { color: var(--c-blue-electric); }
.berita-card__excerpt {
    font-family: var(--font-serif);
    font-size: 13px;
    color: var(--c-brown);
    line-height: 1.55;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---- Badge kategori ---- */
.berita-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: 0.18em;
    padding: 0.25rem 0.625rem;
    background: var(--c-cream-dark);
    color: var(--c-brown-ink);
    border-radius: var(--radius-sm);
    align-self: flex-start;
}
.berita-badge--gold  { background: var(--c-gold); color: var(--c-cream-surface); }
.berita-badge--blue  { background: var(--c-blue-mid); color: var(--c-cream-surface); }
.berita-badge--green { background: var(--c-green); color: var(--c-cream-surface); }
.berita-badge--brown { background: var(--c-brown); color: var(--c-cream-surface); }
.berita-badge--featured { background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-mid) 100%); color: var(--c-brown-ink); }
.berita-badge .ti { font-size: 11px; }


/* ---- Meta ---- */
.berita-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--c-brown-soft);
    margin-top: auto;
}
.berita-meta .ti { font-size: 12px; vertical-align: -1px; margin-right: 3px; color: var(--c-gold); }
.berita-meta--detail {
    justify-content: center;
    margin-top: 1rem;
    font-size: 11px;
}


/* ---- Empty state ---- */
.berita-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--c-cream-surface);
    border: 1px dashed var(--c-cream-border);
    border-radius: var(--radius);
}
.berita-empty .ti {
    font-size: 48px;
    color: var(--c-brown-soft);
    margin-bottom: 0.5rem;
}
.berita-empty p {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--c-brown);
    margin: 0 0 1rem;
}


/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-cream-border);
    flex-wrap: wrap;
    gap: 0.75rem;
}
.pagination__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.125rem;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.15em;
    background: var(--c-cream-surface);
    color: var(--c-brown-ink);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    transition: all var(--tx-fast);
}
.pagination__link:hover {
    background: var(--c-brown-ink);
    color: var(--c-cream-surface);
    border-color: var(--c-brown-ink);
}
.pagination__link.is-disabled {
    color: var(--c-brown-soft);
    background: var(--c-cream);
    cursor: not-allowed;
    opacity: 0.5;
}
.pagination__info {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--c-brown);
}


/* ============================================================
   BERITA — Detail (artikel + sidebar)
   ============================================================ */
.page-banner--detail { padding-bottom: 2.5rem; }
.page-banner__title--article {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    max-width: 760px;
    margin: 0.75rem auto 0;
    line-height: 1.2;
}
.page-banner__lead {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--c-brown);
    margin: 0.5rem 0 0;
}

.page-body__inner--article {
    grid-template-columns: 1fr 280px;
}

.prose__lead {
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--c-brown);
    border-left: 3px solid var(--c-gold);
    padding-left: 1rem;
    margin-bottom: 1.25rem;
}

/* Share buttons */
.share { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.share__label {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--c-brown-soft);
    margin-right: 0.25rem;
}
.share__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.12em;
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    background: var(--c-cream-surface);
    color: var(--c-brown);
    transition: all var(--tx-fast);
}
.share__btn .ti { font-size: 14px; color: var(--c-blue-mid); }
.share__btn:hover {
    color: var(--c-brown-ink);
    border-color: var(--c-gold-mid);
    background: var(--c-cream);
}


/* ---- Recent list di sidebar artikel ---- */
.article-aside { width: 100%; }
.recent-list {
    display: flex;
    flex-direction: column;
}
.recent-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--c-cream-line);
    color: var(--c-brown-ink);
    transition: background var(--tx-fast);
}
.recent-item:last-child { border-bottom: none; }
.recent-item:hover { background: var(--c-cream); }
.recent-item__cat {
    font-family: var(--font-label);
    font-size: 8px;
    letter-spacing: 0.18em;
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--c-cream-surface);
}
.recent-item__cat--gold  { background: var(--c-gold); }
.recent-item__cat--blue  { background: var(--c-blue-mid); }
.recent-item__cat--green { background: var(--c-green); }
.recent-item__cat--brown { background: var(--c-brown); }
.recent-item__title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-brown-ink);
}
.recent-item:hover .recent-item__title { color: var(--c-blue-electric); }
.recent-item__date {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--c-brown-soft);
}

.side-nav__footer {
    padding: 0.875rem 1.25rem 0;
    border-top: 1px solid var(--c-cream-line);
    margin-top: 0.25rem;
}
.side-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--c-blue-mid);
}
.side-nav__cta:hover { color: var(--c-blue-electric); }


/* ============================================================
   RESPONSIVE — Berita
   ============================================================ */
@media (max-width: 900px) {
    .berita-feature { grid-template-columns: 1fr; }
    .berita-feature__media { aspect-ratio: 16/9; }
    .berita-grid { grid-template-columns: repeat(2, 1fr); }
    .page-body__inner--article { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .berita-grid { grid-template-columns: 1fr; }
    .berita-toolbar__inner { flex-direction: column; align-items: stretch; }
    .berita-toolbar__search { width: 100%; }
    .pagination { flex-direction: column; }
    .pagination__info { order: -1; }
}


/* ============================================================
   STRUKTUR ORGANISASI — Pegawai Grid
   ============================================================ */
.organisasi { width: 100%; }

.organisasi-group { margin-bottom: 2.5rem; }
.organisasi-group:last-child { margin-bottom: 0; }

.organisasi-group__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.organisasi-group__line {
    width: 32px;
    height: 2px;
    background: var(--c-gold-mid);
    flex-shrink: 0;
}
.organisasi-group__title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--c-brown-ink);
    margin: 0;
}
.organisasi-group__count {
    background: var(--c-cream-dark);
    color: var(--c-brown-ink);
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

/* Color accent per bidang */
.organisasi-group--brown .organisasi-group__line { background: var(--c-brown); }
.organisasi-group--gold  .organisasi-group__line { background: var(--c-gold); }
.organisasi-group--green .organisasi-group__line { background: var(--c-green); }
.organisasi-group--blue  .organisasi-group__line { background: var(--c-blue-mid); }

.organisasi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.organisasi-grid--solo {
    grid-template-columns: minmax(240px, 320px);
    justify-content: start;
}

.pegawai-card {
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    padding: 1.25rem 1rem 1rem;
    text-align: center;
    transition: transform var(--tx), box-shadow var(--tx);
    position: relative;
    overflow: hidden;
}
.pegawai-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.pegawai-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.pegawai-card--brown::before { background: linear-gradient(90deg, var(--c-brown-ink), var(--c-brown), var(--c-gold)); }
.pegawai-card--gold::before  { background: linear-gradient(90deg, var(--c-gold-deep), var(--c-gold), var(--c-gold-mid)); }
.pegawai-card--green::before { background: linear-gradient(90deg, var(--c-green-deep), var(--c-green), var(--c-green-mid)); }
.pegawai-card--blue::before  { background: linear-gradient(90deg, var(--c-blue-darkest), var(--c-blue-mid), var(--c-blue-electric)); }

.pegawai-card__photo {
    width: 110px;
    height: 110px;
    margin: 0.5rem auto 0.875rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--c-gold-mid);
    background: linear-gradient(135deg, var(--c-cream-dark) 0%, var(--c-cream) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.pegawai-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pegawai-card__initials {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    color: var(--c-brown);
}

.pegawai-card__nama {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--c-brown-ink);
    line-height: 1.25;
    margin: 0 0 0.25rem;
}
.pegawai-card__gelar {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--c-brown);
    font-weight: 400;
}
.pegawai-card__jabatan {
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--c-brown-soft);
    margin: 0.5rem 0 0;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Solo card (Kepala Dinas) styled bigger */
.organisasi-grid--solo .pegawai-card {
    padding: 2rem 1.5rem 1.5rem;
}
.organisasi-grid--solo .pegawai-card__photo {
    width: 160px;
    height: 160px;
    border-width: 4px;
}
.organisasi-grid--solo .pegawai-card__initials { font-size: 4.5rem; }
.organisasi-grid--solo .pegawai-card__nama { font-size: 1.25rem; }


/* ============================================================
   INOVASI — Listing & Detail
   ============================================================ */
.inovasi-list {
    padding: 2rem 1.5rem 3rem;
    background: linear-gradient(180deg, var(--c-cream-shade) 0%, var(--c-cream) 100%);
}
.inovasi-list__inner {
    max-width: var(--container);
    margin: 0 auto;
}
.inovasi-list__heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--c-brown-ink);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-cream-border);
    position: relative;
}
.inovasi-list__heading::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 50px; height: 2px;
    background: var(--c-gold-mid);
}

.inovasi-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.inovasi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.inovasi-card {
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem 1.25rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--tx), box-shadow var(--tx);
    display: flex;
    flex-direction: column;
}
.inovasi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.inovasi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
.inovasi-card--brown::before { background: linear-gradient(90deg, var(--c-brown-ink), var(--c-brown), var(--c-gold)); }
.inovasi-card--green::before { background: linear-gradient(90deg, var(--c-green-deep), var(--c-green), var(--c-green-mid)); }
.inovasi-card--blue::before  { background: linear-gradient(90deg, var(--c-blue-darkest), var(--c-blue-mid), var(--c-blue-electric)); }

.inovasi-card--featured {
    padding: 1.75rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, var(--c-cream-surface) 0%, var(--c-cream) 100%);
    box-shadow: var(--shadow-card);
}
.inovasi-card__badge {
    position: absolute;
    top: 12px; right: 12px;
    background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-mid) 100%);
    color: var(--c-brown-ink);
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: 0.15em;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.inovasi-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.875rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.inovasi-card--brown .inovasi-card__icon {
    background: linear-gradient(135deg, var(--c-brown-deep) 0%, var(--c-gold) 100%);
}
.inovasi-card--green .inovasi-card__icon {
    background: linear-gradient(135deg, var(--c-green-deep) 0%, var(--c-green-mid) 100%);
}
.inovasi-card--blue .inovasi-card__icon {
    background: linear-gradient(135deg, var(--c-blue-darkest) 0%, var(--c-blue-electric) 100%);
}
.inovasi-card__icon .ti {
    font-size: 26px;
    color: var(--c-cream-surface);
}
.inovasi-card--featured .inovasi-card__icon {
    width: 60px; height: 60px;
}
.inovasi-card--featured .inovasi-card__icon .ti { font-size: 30px; }

.inovasi-card__nama {
    font-family: var(--font-label);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--c-brown-ink);
    margin: 0;
}
.inovasi-card--featured .inovasi-card__nama { font-size: 1.25rem; }
.inovasi-card--brown .inovasi-card__nama { color: var(--c-brown-ink); }
.inovasi-card--green .inovasi-card__nama { color: var(--c-green-deep); }
.inovasi-card--blue .inovasi-card__nama  { color: var(--c-blue-darkest); }

.inovasi-card__bidang {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--c-gold);
    margin: 0.25rem 0 0.75rem;
    display: block;
}
.inovasi-card__deskripsi {
    font-family: var(--font-serif);
    font-size: 13px;
    color: var(--c-brown);
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
}

.inovasi-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--c-blue-mid);
    align-self: flex-start;
}
.inovasi-card--green .inovasi-card__cta { color: var(--c-green); }
.inovasi-card--brown .inovasi-card__cta { color: var(--c-gold); }
.inovasi-card__cta:hover { transform: translateX(2px); transition: transform var(--tx-fast); }

/* Page banner colored variants for inovasi detail */
.page-banner--green { background: linear-gradient(180deg, var(--c-green-faint) 0%, var(--c-cream) 60%, var(--c-cream-shade) 100%); }
.page-banner--blue  { background: linear-gradient(180deg, var(--c-blue-faint) 0%, var(--c-cream) 60%, var(--c-cream-shade) 100%); }
.page-banner--brown { background: linear-gradient(180deg, var(--c-gold-wash) 0%, var(--c-cream) 60%, var(--c-cream-shade) 100%); }

/* Placeholder untuk gambar yang miss saat migrasi */
.prose__missing-img {
    display: inline-block;
    background: var(--c-cream-dark);
    color: var(--c-brown-soft);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font-serif);
    border: 1px dashed var(--c-cream-border);
    margin: 0.25rem 0;
}


/* ============================================================
   RESPONSIVE — Pegawai & Inovasi
   ============================================================ */
@media (max-width: 560px) {
    .organisasi-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .pegawai-card__photo { width: 80px; height: 80px; }
    .pegawai-card__initials { font-size: 2rem; }
    .pegawai-card__nama { font-size: 0.9375rem; }
    .organisasi-grid--solo { grid-template-columns: 1fr; }
}


/* ============================================================
   FIX — Gambar Migrasi WP
   ------------------------------------------------------------
   WP exports include <img width="X" height="Y"> dengan nilai
   eksplisit. Saat CSS scale width 100%, height tetap di nilai WP
   → distorsi. height:auto memaksa browser hitung tinggi dari ratio.
   ============================================================ */

/* Card thumbnail (berita listing) */
.berita-card__media,
.berita-feature__media {
    position: relative;
    overflow: hidden;
}
.berita-card__media img,
.berita-feature__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.berita-card__media img + .ti,
.berita-feature__media img + .ti {
    display: none;
}

/* Gambar inline di artikel (.prose) */
.prose img {
    max-width: 100%;
    height: auto !important;  /* override inline height dari WP */
    width: auto;
    border-radius: var(--radius);
    margin: 1.5rem auto;
    display: block;
    box-shadow: 0 2px 12px rgba(43, 24, 16, 0.1);
    border: 1px solid var(--c-cream-border);
}

/* Container gambar dengan figure caption (kalau ada) */
.prose figure {
    margin: 1.75rem auto;
    text-align: center;
}
.prose figure img {
    margin: 0 auto;
}
.prose figcaption,
.prose .wp-caption-text {
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--c-brown-soft);
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* WP alignment classes */
.prose .alignleft, .prose img.alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
    max-width: 50%;
}
.prose .alignright, .prose img.alignright {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
    max-width: 50%;
}
.prose .aligncenter, .prose img.aligncenter {
    display: block;
    margin: 1.5rem auto;
    float: none;
}
.prose .wp-caption {
    max-width: 100%;
    margin: 1.5rem auto;
}
.prose .wp-caption img {
    margin: 0;
}

/* Clear floats setelah image kontainer */
.prose p::after,
.prose div::after {
    content: '';
    display: table;
    clear: both;
}

/* Mobile: gambar full width, no float */
@media (max-width: 720px) {
    .prose .alignleft, .prose .alignright,
    .prose img.alignleft, .prose img.alignright {
        float: none;
        max-width: 100%;
        margin: 1.25rem auto;
        display: block;
    }
}


/* ============================================================
   PROSE — Justify support (untuk public-side render)
   ============================================================ */
.prose p[style*="text-align: justify"],
.prose p[style*="text-align:justify"] {
    text-justify: inter-word;
    hyphens: auto;
    word-break: break-word;
}


/* ============================================================
   MOBILE COMPREHENSIVE FIX
   Tablet (≤768px), Phone (≤480px)
   ============================================================ */

/* ---------------- TABLET (≤768px) ---------------- */
@media (max-width: 768px) {

    /* Page banner — kecilkan padding & font */
    .page-banner { padding: 2rem 1.25rem 1.5rem; }
    .page-banner__title { font-size: 1.625rem !important; line-height: 1.15; }
    .page-banner__lead { font-size: 0.9375rem; }
    .page-banner__eyebrow { font-size: 9px; letter-spacing: 0.18em; }
    .breadcrumb { font-size: 11px; flex-wrap: wrap; }

    /* Article body — kasih nafas */
    .page-body { padding: 1.5rem 1rem; }
    .page-body__inner { gap: 1.5rem; }
    .page-body__inner--article { grid-template-columns: 1fr; }

    /* Prose typography */
    .prose { font-size: 16px; line-height: 1.7; }
    .prose h2 { font-size: 1.375rem; margin: 1.75rem 0 0.625rem; }
    .prose h3 { font-size: 1.125rem; }
    .prose__lead { font-size: 1rem; padding-left: 0.875rem; }

    /* Drop cap — kecilkan biar gak distortif */
    .prose p:first-of-type::first-letter {
        font-size: 2.5rem;
        padding: 0.25rem 0.5rem 0 0;
    }

    /* Inline images — pastikan proporsional */
    .prose img {
        margin: 1rem auto;
        max-width: 100%;
        width: auto;
        border-radius: 6px;
    }
    .prose figure { margin: 1.25rem auto; }

    /* Berita feature card */
    .berita-feature__title { font-size: 1.375rem !important; }
    .berita-feature__ringkasan { font-size: 0.9375rem; }
    .berita-feature__media { aspect-ratio: 16/9; min-height: auto; }

    /* Berita cards grid */
    .berita-card__title { font-size: 1.0625rem; line-height: 1.3; }
    .berita-card__ringkasan { font-size: 0.875rem; }
    .berita-card__media { aspect-ratio: 16/10; }

    /* Inovasi cards */
    .inovasi-featured-grid,
    .inovasi-grid { grid-template-columns: 1fr; gap: 0.875rem; }
    .inovasi-card { padding: 1.25rem 1rem 1rem; }
    .inovasi-card__nama { font-size: 1rem; }

    /* Side nav (Profil sidebar) — collapse jadi accordion-style */
    .side-nav { margin-bottom: 1rem; position: static; }
    .side-nav__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.375rem; }
    .side-nav__item { flex: 1 1 auto; min-width: max-content; }
    .side-nav__link { padding: 0.5rem 0.75rem; font-size: 12px; border-left: none; border-bottom: 2px solid transparent; }
    .side-nav__link.is-active { border-left: none; border-bottom-color: var(--c-gold); background: transparent; }

    /* Article aside (recent berita di detail) */
    .article-aside { margin-top: 1.5rem; }

    /* Categories cards di beranda */
    .categories__inner { gap: 0.875rem; padding: 0 1rem; }
    .cat-card { padding: 1.5rem 1.25rem; }
    .cat-card__title { font-size: 1.0625rem; }

    /* Hero beranda */
    .hero__title { font-size: 2rem; line-height: 1.1; }
    .hero__subtitle { font-size: 1rem; }
    .hero__cta { flex-direction: column; gap: 0.625rem; align-items: stretch; }
    .hero__cta .btn { width: 100%; text-align: center; }

    /* Footer */
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

    /* Table dalam prose — bikin scrollable horizontal */
    .prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ---------------- PHONE (≤480px) ---------------- */
@media (max-width: 480px) {

    /* Page body — padding lebih kecil tapi gak hilang */
    .page-body { padding: 1.25rem 0.875rem 1.5rem; }
    .page-banner { padding: 1.75rem 1rem 1.25rem; }
    .page-banner__title { font-size: 1.375rem !important; }
    .page-banner__ornament { font-size: 12px; }

    /* Prose: pastikan ada padding container, bukan nempel border */
    .page-body__inner { padding: 0; }
    .prose { padding: 0 0.25rem; }
    .prose__lead { font-size: 0.9375rem; padding: 0.5rem 0.75rem; border-left-width: 2px; }

    /* Drop cap — lebih kecil lagi */
    .prose p:first-of-type::first-letter {
        font-size: 2.25rem;
        line-height: 0.85;
        margin-right: 0.25rem;
    }
    .prose h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }

    /* Inline images super kecil device */
    .prose img {
        margin: 0.875rem auto;
        border-radius: 5px;
        box-shadow: 0 1px 6px rgba(43,24,16,0.08);
    }

    /* Berita listing — feature card jadi simple */
    .berita-feature__title { font-size: 1.25rem !important; }
    .berita-feature__media { aspect-ratio: 16/10; }
    .berita-feature__body { padding: 1rem; }

    /* Berita toolbar (search + filter) */
    .berita-toolbar { padding: 0.875rem 1rem; }
    .berita-toolbar__search input { font-size: 14px; }
    .berita-filter__tabs { flex-wrap: wrap; gap: 0.25rem; }
    .berita-filter__tab { font-size: 10px; padding: 0.375rem 0.625rem; }

    /* Pegawai grid — single column lebih lapang */
    .organisasi-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .pegawai-card { padding: 1.25rem 1rem 1rem; }
    .pegawai-card__photo { width: 96px; height: 96px; }
    .pegawai-card__nama { font-size: 1.0625rem; }

    /* Footer — single column */
    .site-footer__inner { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
    .site-footer__social { justify-content: center; }

    /* Utility bar (top header strip) — sembunyikan kalau ada */
    .utility-bar__item--right { gap: 0.375rem; font-size: 9px; }

    /* Breadcrumb di phone */
    .breadcrumb { font-size: 10px; }

    /* CTA buttons full width */
    .btn { padding: 0.625rem 1rem; font-size: 12px; }
}

/* ---------------- HORIZONTAL OVERFLOW GUARD ---------------- */
/* Prevent any content from causing horizontal scroll on the body */
html, body { overflow-x: hidden; max-width: 100%; }

/* Force long words to wrap (URL, kode panjang dll) */
.prose p, .prose li, .berita-card__title, .berita-feature__title,
.page-banner__title, .pegawai-card__nama, .inovasi-card__nama {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}


/* Patch: halaman statis single-column */
.page-body__inner--single {
    display: block;
    max-width: 920px;
}
.prose--single {
    width: 100%;
}

/* ============================================================
   HOMEPAGE — BERITA TERBARU
   ============================================================ */
.home-news {
    padding: 2.5rem 1.5rem 2.25rem;
    background:
        radial-gradient(circle at 10% 0%, rgba(200, 169, 97, 0.16), transparent 34%),
        linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-surface) 100%);
    border-top: 1px solid var(--c-cream-border);
}
.home-news__inner {
    max-width: var(--container);
    margin: 0 auto;
}
.home-news__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.125rem;
}
.home-news__eyebrow {
    margin: 0 0 0.25rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--c-gold-deep);
    font-weight: 700;
}
.home-news__heading {
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    font-weight: 650;
    color: var(--c-brown-ink);
    margin: 0;
}
.home-news__lead {
    max-width: 620px;
    margin: 0.35rem 0 0;
    font-size: 13px;
    color: var(--c-brown);
}
.home-news__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--c-blue-darkest);
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(27, 79, 163, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
}
.home-news__more:hover {
    color: var(--c-blue-electric);
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(255, 255, 255, 0.82);
}
.home-news__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: 1rem;
    align-items: stretch;
}
.home-news-feature {
    display: grid;
    grid-template-columns: minmax(230px, 0.92fr) minmax(0, 1fr);
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--c-cream-border);
    border-radius: calc(var(--radius) + 8px);
    background: linear-gradient(135deg, var(--c-cream-surface) 0%, var(--c-gold-wash) 100%);
    box-shadow: 0 18px 42px rgba(62, 40, 23, 0.10);
}
.home-news-feature__media {
    position: relative;
    display: flex;
    min-height: 100%;
    background: linear-gradient(135deg, var(--c-brown-ink), var(--c-gold));
    overflow: hidden;
}
.home-news-feature__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}
.home-news-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--tx);
}
.home-news-feature:hover .home-news-feature__media img { transform: scale(1.04); }
.home-news-feature__placeholder {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.86);
}
.home-news-feature__placeholder .ti { font-size: 4rem; }
.home-news-feature__body {
    padding: 1.5rem 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.home-news__badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--c-cream-surface);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    line-height: 1.2;
}
.home-news__badge--brown { background: var(--c-brown); }
.home-news__badge--gold { background: var(--c-gold-deep); }
.home-news__badge--blue { background: var(--c-blue-mid); }
.home-news__badge--green { background: var(--c-green); }
.home-news-feature__title {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    font-weight: 650;
    line-height: 1.13;
    margin: 0.75rem 0 0.75rem;
    color: var(--c-brown-ink);
}
.home-news-feature__title a { color: inherit; }
.home-news-feature__title a:hover { color: var(--c-blue-darkest); }
.home-news-feature__excerpt {
    margin: 0;
    color: var(--c-brown);
    font-size: 13px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 1rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--c-brown);
}
.home-news__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.home-news-list {
    display: grid;
    gap: 0.75rem;
}
.home-news-mini {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 0.875rem;
    padding: 0.875rem;
    border: 1px solid var(--c-cream-border);
    border-radius: calc(var(--radius) + 4px);
    background: rgba(255, 255, 255, 0.52);
    box-shadow: 0 8px 22px rgba(62, 40, 23, 0.06);
    transition: transform var(--tx-fast), box-shadow var(--tx-fast), border-color var(--tx-fast);
}
.home-news-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(62, 40, 23, 0.09);
    border-color: rgba(200, 169, 97, 0.45);
}
.home-news-mini__icon {
    width: 86px;
    height: 86px;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-cream-surface);
    background: linear-gradient(135deg, var(--c-brown-ink), var(--c-gold));
}
.home-news-mini__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-news-mini__icon .ti { font-size: 2rem; }
.home-news-mini--blue .home-news-mini__icon,
.home-news-feature--blue .home-news-feature__media { background: linear-gradient(135deg, var(--c-blue-darkest), var(--c-blue-electric)); }
.home-news-mini--green .home-news-mini__icon,
.home-news-feature--green .home-news-feature__media { background: linear-gradient(135deg, var(--c-green-deep), var(--c-green-mid)); }
.home-news-mini--gold .home-news-mini__icon,
.home-news-feature--gold .home-news-feature__media { background: linear-gradient(135deg, var(--c-brown), var(--c-gold)); }
.home-news-mini__body { min-width: 0; }
.home-news-mini__topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}
.home-news-mini__date {
    font-family: var(--font-label);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--c-brown);
}
.home-news-mini__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.25;
    margin: 0;
    color: var(--c-brown-ink);
}
.home-news-mini__title a { color: inherit; }
.home-news-mini__title a:hover { color: var(--c-blue-darkest); }
.home-news-mini__excerpt {
    margin: 0.35rem 0 0;
    font-size: 11px;
    color: var(--c-brown);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-empty {
    border: 1px dashed var(--c-cream-border);
    border-radius: calc(var(--radius) + 4px);
    background: rgba(255, 255, 255, 0.45);
    padding: 1.5rem;
    text-align: center;
    color: var(--c-brown);
}
.home-news-empty .ti {
    font-size: 2rem;
    color: var(--c-gold-deep);
    margin-bottom: 0.35rem;
}
.home-news-empty p { margin: 0 0 0.875rem; }

@media (max-width: 980px) {
    .home-news__layout { grid-template-columns: 1fr; }
    .home-news-feature { grid-template-columns: 0.9fr 1.1fr; }
}
@media (max-width: 760px) {
    .home-news { padding: 2rem 1rem; }
    .home-news__header { align-items: flex-start; flex-direction: column; gap: 0.875rem; }
    .home-news__more { width: 100%; justify-content: center; }
    .home-news-feature { grid-template-columns: 1fr; min-height: 0; }
    .home-news-feature__media { min-height: 210px; }
    .home-news-feature__body { padding: 1.15rem; }
}
@media (max-width: 520px) {
    .home-news-mini { grid-template-columns: 72px minmax(0, 1fr); gap: 0.7rem; padding: 0.75rem; }
    .home-news-mini__icon { width: 72px; height: 72px; border-radius: 15px; }
    .home-news-mini__excerpt { display: none; }
    .home-news__badge { font-size: 8px; letter-spacing: 0.12em; }
}


@media (max-width: 980px) {
    .home-wpedia__layout { grid-template-columns: 1fr; }
    .home-wpedia-feature { grid-template-columns: 0.9fr 1.1fr; }
}
@media (max-width: 760px) {
    .home-wpedia { padding: 2rem 1rem 2.2rem; }
    .home-wpedia__header { align-items: flex-start; flex-direction: column; gap: 0.875rem; }
    .home-wpedia__more { width: 100%; justify-content: center; }
    .home-wpedia-feature { grid-template-columns: 1fr; min-height: 0; }
    .home-wpedia-feature__media { min-height: 230px; }
    .home-wpedia-feature__body { padding: 1.15rem; }
    .home-wpedia-feature__seal { width: 40px; height: 40px; font-size: 1.2rem; }
}
@media (max-width: 520px) {
    .home-wpedia-mini { grid-template-columns: 76px minmax(0, 1fr); gap: 0.72rem; padding: 0.75rem; }
    .home-wpedia-mini__media { width: 76px; height: 76px; border-radius: 16px; }
    .home-wpedia-mini__excerpt { display: none; }
    .home-wpedia__badge { font-size: 8px; letter-spacing: 0.11em; }
    .home-wpedia__meta { font-size: 9px; }
}

/* ============================================================
   HOTFIX v12.1.1 — Homepage Wonogiripedia layout guard
   Menjaga section Wonogiripedia tetap card/grid walau ada cache/override CSS.
   ============================================================ */
.home-wpedia__layout{display:grid!important;grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr)!important;gap:1rem!important;align-items:stretch!important}.home-wpedia-feature{display:grid!important;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr)!important;overflow:hidden!important}.home-wpedia-feature__media{display:block!important;min-height:348px!important;overflow:hidden!important}.home-wpedia-feature__media img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important}.home-wpedia-list{display:grid!important;gap:.75rem!important}.home-wpedia-mini{display:grid!important;grid-template-columns:102px minmax(0,1fr)!important;gap:.85rem!important;align-items:center!important}.home-wpedia-mini__media{display:flex!important;width:102px!important;height:102px!important;min-width:102px!important;overflow:hidden!important}.home-wpedia-mini__media img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important}.home-wpedia-mini__body{min-width:0!important}@media(max-width:980px){.home-wpedia__layout{grid-template-columns:1fr!important}.home-wpedia-feature{grid-template-columns:.9fr 1.1fr!important}.home-wpedia-feature__media{min-height:300px!important}}@media(max-width:760px){.home-wpedia-feature{grid-template-columns:1fr!important}.home-wpedia-feature__media{min-height:230px!important}}@media(max-width:520px){.home-wpedia-mini{grid-template-columns:76px minmax(0,1fr)!important}.home-wpedia-mini__media{width:76px!important;height:76px!important;min-width:76px!important}.home-wpedia-mini__excerpt{display:none!important}}

/* ============================================================
   v13 — Reformasi Birokrasi public folder page
   ============================================================ */
.rb-page .page-body__inner { align-items: flex-start; }
.rb-content { min-width: 0; width: 100%; }
.rb-intro-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 1.25rem;
    padding: clamp(1.3rem, 2.6vw, 2rem);
    border: 1px solid rgba(196, 164, 91, 0.34);
    border-radius: calc(var(--radius) + 10px);
    background:
        radial-gradient(circle at 10% 0%, rgba(200,169,97,0.18), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.72), rgba(249,244,230,0.82));
    box-shadow: var(--shadow-soft);
    margin-bottom: 1.25rem;
}
.rb-intro-card::after {
    content: "";
    position: absolute;
    inset: auto -60px -100px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(10, 31, 61, 0.06);
}
.rb-eyebrow {
    margin: 0 0 0.65rem;
    font-family: var(--font-heading);
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--c-gold-deep);
}
.rb-intro-card h2 {
    margin: 0;
    max-width: 780px;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.08;
    color: var(--c-brown-ink);
}
.rb-intro-card p:not(.rb-eyebrow) {
    max-width: 780px;
    color: var(--c-brown);
    line-height: 1.75;
    margin: 1rem 0 0;
}
.rb-intro-card__stats {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.8rem;
    align-self: stretch;
}
.rb-intro-card__stats div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(196, 164, 91, 0.22);
}
.rb-intro-card__stats strong {
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--c-blue-darkest);
}
.rb-intro-card__stats span {
    margin-top: 0.25rem;
    font-family: var(--font-heading);
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--c-brown);
}
.rb-alert {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.2rem;
    border-radius: 16px;
    border: 1px solid rgba(170, 117, 34, 0.32);
    background: rgba(255, 248, 225, 0.72);
    color: var(--c-brown-ink);
}
.rb-alert code { font-size: 0.86em; }
.rb-area-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.rb-area-card {
    display: grid;
    grid-template-columns: 42px 44px minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(196, 164, 91, 0.28);
    background: rgba(255, 255, 255, 0.58);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rb-area-card:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 31, 61, 0.32);
    box-shadow: 0 16px 36px rgba(43, 24, 16, 0.08);
}
.rb-area-card__number {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-blue-darkest), var(--c-green-dark));
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    letter-spacing: .05em;
}
.rb-area-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(200,169,97,0.16);
    color: var(--c-gold-deep);
    font-size: 1.25rem;
}
.rb-area-card__body { min-width: 0; display: grid; gap: 0.2rem; }
.rb-area-card__body strong {
    color: var(--c-brown-ink);
    line-height: 1.25;
    font-size: 0.95rem;
}
.rb-area-card__body small {
    font-family: var(--font-heading);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .64rem;
    color: var(--c-brown);
}
.rb-folder-list { display: grid; gap: 1rem; }
.rb-area-folder,
.rb-indicator-folder {
    border: 1px solid rgba(196, 164, 91, 0.32);
    border-radius: 20px;
    background: rgba(255,255,255,0.55);
    overflow: hidden;
}
.rb-area-folder__summary,
.rb-indicator-folder > summary {
    cursor: pointer;
    list-style: none;
}
.rb-area-folder__summary::-webkit-details-marker,
.rb-indicator-folder > summary::-webkit-details-marker { display: none; }
.rb-area-folder__summary {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.95rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(90deg, rgba(10,31,61,0.04), rgba(200,169,97,0.09));
}
.rb-area-folder__number {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: var(--c-blue-darkest);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
}
.rb-area-folder__title { display: grid; gap: .25rem; }
.rb-area-folder__title strong {
    font-family: var(--font-display);
    color: var(--c-brown-ink);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.1;
}
.rb-area-folder__title small {
    color: var(--c-brown);
    line-height: 1.5;
}
.rb-area-folder__meta,
.rb-indicator-folder__count {
    white-space: nowrap;
    border-radius: 999px;
    padding: .42rem .7rem;
    background: rgba(200,169,97,.16);
    color: var(--c-brown-ink);
    font-family: var(--font-heading);
    letter-spacing: .08em;
    font-size: .68rem;
    text-transform: uppercase;
}
.rb-area-folder__body { padding: 1rem; display: grid; gap: .85rem; }
.rb-indicator-folder { border-radius: 16px; background: rgba(249,244,230,0.56); }
.rb-indicator-folder > summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
    padding: .9rem 1rem;
}
.rb-indicator-folder__code {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(15,66,38,.1);
    color: var(--c-green-dark);
    font-family: var(--font-heading);
    font-weight: 700;
}
.rb-indicator-folder__name { display: grid; gap: .18rem; min-width: 0; }
.rb-indicator-folder__name strong { color: var(--c-brown-ink); }
.rb-indicator-folder__name small { color: var(--c-brown); line-height: 1.45; }
.rb-doc-list { display: grid; gap: .65rem; padding: 0 1rem 1rem 3.75rem; }
.rb-doc-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .85rem;
    border-radius: 14px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(196,164,91,.20);
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, border-color .16s ease;
}
.rb-doc-card:hover { transform: translateY(-1px); border-color: rgba(10,31,61,.32); }
.rb-doc-card__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(154,32,32,.08);
    color: #9a2020;
    font-size: 1.2rem;
}
.rb-doc-card__content { display: grid; gap: .15rem; min-width: 0; }
.rb-doc-card__content strong { color: var(--c-brown-ink); line-height: 1.3; }
.rb-doc-card__content small { color: var(--c-brown); }
.rb-doc-card__content em { font-style: normal; color: var(--c-brown); font-size: .88rem; line-height: 1.45; }
.rb-doc-card__action {
    white-space: nowrap;
    font-family: var(--font-heading);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .68rem;
    color: var(--c-blue-darkest);
}
.rb-empty,
.rb-empty-card {
    margin: 0;
    color: var(--c-brown);
    border: 1px dashed rgba(196,164,91,.35);
    border-radius: 14px;
    padding: 1rem;
    background: rgba(255,255,255,.42);
}
.rb-empty--compact { padding: .75rem; font-size: .92rem; }
.rb-empty-card { display:flex; align-items:center; gap:.6rem; }

@media (max-width: 1100px) {
    .rb-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rb-intro-card { grid-template-columns: 1fr; }
    .rb-intro-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .rb-area-grid { grid-template-columns: 1fr; }
    .rb-area-folder__summary { grid-template-columns: 46px minmax(0,1fr); }
    .rb-area-folder__meta { grid-column: 2; justify-self: start; }
    .rb-indicator-folder > summary { grid-template-columns: 38px minmax(0,1fr); }
    .rb-indicator-folder__count { grid-column: 2; justify-self:start; }
    .rb-doc-list { padding-left: 1rem; }
    .rb-doc-card { grid-template-columns: 38px minmax(0,1fr); }
    .rb-doc-card__action { grid-column: 2; justify-self:start; }
}
@media (max-width: 520px) {
    .rb-intro-card__stats { grid-template-columns: 1fr; }
    .rb-area-card { grid-template-columns: 38px minmax(0,1fr); }
    .rb-area-card__icon { display: none; }
}

/* =========================================================
   v14 Akuntabilitas & Kinerja
   Generic public hierarchy / folder evidence display
   ========================================================= */
.ak-hero__lead{max-width:760px;margin:1.1rem auto 0;color:rgba(42,29,20,.78);font-size:1.05rem;line-height:1.8;text-align:center}.ak-page{background:linear-gradient(180deg,#f6efe0 0%,#f4eddd 100%);padding:2.2rem 0 4rem}.ak-page__inner{width:min(1180px,calc(100% - 2rem));margin:0 auto}.ak-intro-card,.ak-detail-summary{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:1.5rem;align-items:center;padding:2rem;border:1px solid rgba(181,143,74,.28);border-radius:28px;background:rgba(255,252,244,.78);box-shadow:0 24px 60px rgba(58,41,24,.07);margin-bottom:1.5rem}.ak-eyebrow{display:block;margin-bottom:.6rem;font-family:var(--font-display, Cinzel, serif);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#9b6b19}.ak-intro-card h2,.ak-detail-summary h2{margin:0 0 .65rem;font-family:var(--font-serif, 'Cormorant Garamond', serif);font-size:clamp(2rem,4vw,3.35rem);line-height:.98;color:#2d1b10}.ak-intro-card p,.ak-detail-summary p{margin:0;color:rgba(54,36,22,.78);font-size:1.02rem;line-height:1.75}.ak-intro-card__stats,.ak-detail-summary__stats{display:grid;gap:.7rem;justify-items:center;text-align:center}.ak-intro-card__stats{border:1px solid rgba(181,143,74,.25);border-radius:22px;padding:1.5rem;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(241,232,210,.75))}.ak-intro-card__stats strong{display:block;font-family:var(--font-serif, serif);font-size:3rem;line-height:1;color:#092a5a}.ak-intro-card__stats span,.ak-detail-summary__stats span{font-family:var(--font-display, Cinzel, serif);letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:#6a4a22}.ak-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem}.ak-category-card{position:relative;display:flex;flex-direction:column;min-height:280px;padding:1.45rem;border:1px solid rgba(181,143,74,.28);border-radius:24px;background:rgba(255,253,248,.84);box-shadow:0 18px 42px rgba(58,41,24,.06);overflow:hidden}.ak-category-card:before{content:"";position:absolute;right:-50px;bottom:-50px;width:150px;height:150px;border-radius:999px;background:rgba(11,61,44,.07)}.ak-category-card__icon{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#0d3d2c,#082a5a);color:#fff;display:grid;place-items:center;font-size:1.55rem;box-shadow:0 12px 26px rgba(8,42,90,.15)}.ak-category-card__body{position:relative;z-index:1;margin-top:1rem;flex:1}.ak-category-card__meta{display:inline-flex;margin-bottom:.65rem;padding:.35rem .65rem;border-radius:999px;background:#f1e6cc;color:#6f4d1c;font-family:var(--font-display, Cinzel, serif);letter-spacing:.12em;text-transform:uppercase;font-size:.68rem}.ak-category-card h2{margin:0 0 .55rem;font-family:var(--font-serif, serif);font-size:1.8rem;line-height:1.05;color:#2d1b10}.ak-category-card p{margin:0;color:rgba(54,36,22,.72);line-height:1.62}.ak-category-card__link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;color:#082a5a;text-decoration:none;font-family:var(--font-display, Cinzel, serif);letter-spacing:.12em;text-transform:uppercase;font-size:.76rem}.ak-empty{padding:2rem;border:1px dashed rgba(181,143,74,.5);border-radius:22px;background:rgba(255,255,255,.58);color:#4c351e;text-align:center}.ak-empty strong{display:block;margin-bottom:.35rem;font-family:var(--font-serif, serif);font-size:1.55rem}.ak-detail-summary__stats{grid-template-columns:1fr}.ak-detail-summary__stats span{display:block;width:100%;padding:1rem;border-radius:18px;background:#f2e7d0;border:1px solid rgba(181,143,74,.22)}.ak-detail-summary__stats strong{display:block;font-family:var(--font-serif, serif);font-size:2.1rem;color:#082a5a}.ak-tree{display:grid;gap:1rem}.ak-tree-node{border:1px solid rgba(181,143,74,.25);border-radius:24px;background:rgba(255,253,248,.76);box-shadow:0 14px 34px rgba(58,41,24,.05);overflow:hidden}.ak-tree-node__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1.15rem}.ak-tree-node__mark{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:#ece4d3;color:#0b2e5f;font-family:var(--font-display, Cinzel, serif);font-weight:700;letter-spacing:.05em}.ak-tree-node__content h3{margin:0;font-family:var(--font-serif, serif);font-size:1.45rem;line-height:1.1;color:#241408}.ak-tree-node__content p{margin:.3rem 0 0;color:rgba(54,36,22,.72);line-height:1.6}.ak-tree-node__children{display:grid;gap:.8rem;padding:0 1rem 1rem 4rem}.ak-tree-node__children .ak-tree-node{background:rgba(255,255,255,.7);border-radius:18px;box-shadow:none}.ak-tree-node--level-2 .ak-tree-node__mark{background:#eef3e8;color:#0d3d2c}.ak-tree-node--level-3 .ak-tree-node__mark,.ak-tree-node--level-4 .ak-tree-node__mark{background:#f3e9e6;color:#7a341d}.ak-folder-link{display:inline-flex;align-items:center;gap:.45rem;justify-content:center;padding:.75rem 1rem;border-radius:999px;background:#082a5a;color:#fff;text-decoration:none;font-family:var(--font-display, Cinzel, serif);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;white-space:nowrap;box-shadow:0 12px 28px rgba(8,42,90,.16)}.ak-folder-link:hover{filter:brightness(1.06)}
@media (max-width: 900px){.ak-intro-card,.ak-detail-summary{grid-template-columns:1fr;padding:1.35rem}.ak-category-grid{grid-template-columns:1fr}.ak-tree-node__head{grid-template-columns:auto minmax(0,1fr)}.ak-folder-link{grid-column:1/-1}.ak-tree-node__children{padding:.3rem .85rem .85rem 1.1rem}.ak-hero__lead{text-align:center;font-size:.98rem}}


/* v14.1 - Akuntabilitas placement: header removed, categories live in Sekretariat sidebar */
.ak-page--with-sidebar {
    background: linear-gradient(180deg,#f6efe0 0%,#f4eddd 100%);
}
.ak-page--with-sidebar .page-body__inner {
    align-items: flex-start;
}
.ak-page__inner--embedded {
    width: 100%;
    min-width: 0;
    margin: 0;
}
.ak-page--with-sidebar .ak-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ak-page--with-sidebar .ak-intro-card,
.ak-page--with-sidebar .ak-detail-summary {
    margin-top: 0;
}
@media (max-width: 1100px) {
    .ak-page--with-sidebar .ak-category-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   v14.3 Akuntabilitas & Kinerja Typography Compact
   Tujuan: mengecilkan tipografi halaman detail agar struktur evidence
   lebih padat, elegan, dan tidak terlalu mendominasi layar.
   ========================================================= */
.ak-page--with-sidebar .ak-detail-summary,
.ak-page--with-sidebar .ak-intro-card {
    padding: 1.55rem 1.65rem;
    border-radius: 24px;
}
.ak-page--with-sidebar .ak-eyebrow {
    font-size: .68rem;
    letter-spacing: .16em;
    margin-bottom: .45rem;
}
.ak-page--with-sidebar .ak-intro-card h2,
.ak-page--with-sidebar .ak-detail-summary h2 {
    font-size: clamp(1.75rem, 2.65vw, 2.45rem);
    line-height: 1.04;
    margin-bottom: .5rem;
}
.ak-page--with-sidebar .ak-intro-card p,
.ak-page--with-sidebar .ak-detail-summary p {
    font-size: .95rem;
    line-height: 1.62;
}
.ak-page--with-sidebar .ak-detail-summary__stats strong,
.ak-page--with-sidebar .ak-intro-card__stats strong {
    font-size: 1.9rem;
}
.ak-page--with-sidebar .ak-detail-summary__stats span,
.ak-page--with-sidebar .ak-intro-card__stats span {
    font-size: .64rem;
    letter-spacing: .12em;
}
.ak-page--with-sidebar .ak-tree {
    gap: .85rem;
}
.ak-page--with-sidebar .ak-tree-node {
    border-radius: 21px;
}
.ak-page--with-sidebar .ak-tree-node__head {
    gap: .85rem;
    padding: .95rem 1rem;
}
.ak-page--with-sidebar .ak-tree-node__mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: .78rem;
}
.ak-page--with-sidebar .ak-tree-node__content h3 {
    font-size: 1.2rem;
    line-height: 1.12;
}
.ak-page--with-sidebar .ak-tree-node__content p {
    margin-top: .22rem;
    font-size: .92rem;
    line-height: 1.45;
}
.ak-page--with-sidebar .ak-tree-node__children {
    gap: .68rem;
    padding: 0 .9rem .9rem 3.15rem;
}
.ak-page--with-sidebar .ak-tree-node__children .ak-tree-node {
    border-radius: 17px;
}
.ak-page--with-sidebar .ak-tree-node--level-2 .ak-tree-node__content h3 {
    font-size: 1.13rem;
}
.ak-page--with-sidebar .ak-tree-node--level-3 .ak-tree-node__content h3,
.ak-page--with-sidebar .ak-tree-node--level-4 .ak-tree-node__content h3,
.ak-page--with-sidebar .ak-tree-node--level-5 .ak-tree-node__content h3 {
    font-size: 1rem;
}
.ak-page--with-sidebar .ak-tree-node--level-3 .ak-tree-node__head,
.ak-page--with-sidebar .ak-tree-node--level-4 .ak-tree-node__head,
.ak-page--with-sidebar .ak-tree-node--level-5 .ak-tree-node__head {
    padding: .78rem .85rem;
}
.ak-page--with-sidebar .ak-tree-node--level-3 .ak-tree-node__mark,
.ak-page--with-sidebar .ak-tree-node--level-4 .ak-tree-node__mark,
.ak-page--with-sidebar .ak-tree-node--level-5 .ak-tree-node__mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: .68rem;
}
.ak-page--with-sidebar .ak-folder-link {
    padding: .62rem .9rem;
    font-size: .62rem;
    letter-spacing: .085em;
}
@media (max-width: 900px) {
    .ak-page--with-sidebar .ak-detail-summary,
    .ak-page--with-sidebar .ak-intro-card {
        padding: 1.15rem;
    }
    .ak-page--with-sidebar .ak-intro-card h2,
    .ak-page--with-sidebar .ak-detail-summary h2 {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }
    .ak-page--with-sidebar .ak-tree-node__children {
        padding: .2rem .75rem .75rem 1rem;
    }
    .ak-page--with-sidebar .ak-tree-node__content h3 {
        font-size: 1.08rem;
    }
    .ak-page--with-sidebar .ak-tree-node--level-2 .ak-tree-node__content h3,
    .ak-page--with-sidebar .ak-tree-node--level-3 .ak-tree-node__content h3,
    .ak-page--with-sidebar .ak-tree-node--level-4 .ak-tree-node__content h3 {
        font-size: .98rem;
    }
}

/* ============================================================
   KEARSIPAN — Static Sidebar Page v14.4
   ============================================================ */
.page-banner--kearsipan {
    background:
        radial-gradient(circle at 50% 0%, rgba(31, 111, 78, 0.10) 0%, transparent 34%),
        linear-gradient(180deg, var(--c-cream-surface) 0%, var(--c-cream) 100%);
}
.page-banner__summary {
    max-width: 620px;
    margin: 0.875rem auto 0;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--c-brown);
    line-height: 1.65;
}
.page-body--kearsipan .page-body__inner {
    grid-template-columns: 270px minmax(0, 1fr);
}
.kearsipan-prose {
    max-width: 920px;
}
.kearsipan-prose > p:first-of-type::first-letter,
.kearsipan-leadbox p:first-of-type::first-letter,
.kearsipan-card p:first-of-type::first-letter,
.kearsipan-cta p:first-of-type::first-letter,
.kearsipan-footer-cta p:first-of-type::first-letter {
    float: none;
    padding: 0;
    font: inherit;
    color: inherit;
}
.kearsipan-leadbox {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(247,241,226,0.92) 100%);
    border: 1px solid var(--c-cream-border);
    border-left: 4px solid var(--c-green-deep);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.5rem;
}
.kearsipan-leadbox::after {
    content: 'ARSIP';
    position: absolute;
    right: 1rem;
    bottom: -0.3rem;
    font-family: var(--font-label);
    font-size: 3.4rem;
    letter-spacing: 0.2em;
    color: rgba(31, 111, 78, 0.055);
    pointer-events: none;
}
.kearsipan-leadbox__kicker {
    display: inline-flex;
    margin-bottom: 0.45rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--c-green-deep);
    text-transform: uppercase;
}
.kearsipan-leadbox p {
    position: relative;
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.72;
}
.kearsipan-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.kearsipan-card {
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    padding: 1.15rem;
    box-shadow: var(--shadow-soft);
}
.kearsipan-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    background: linear-gradient(135deg, rgba(31,111,78,0.13), rgba(200,169,97,0.20));
    color: var(--c-green-deep);
    font-size: 21px;
}
.kearsipan-card h2 {
    margin: 0 0 0.45rem;
    padding: 0;
    border: 0;
    font-size: 1.1rem;
}
.kearsipan-card h2::after { display: none; }
.kearsipan-card p {
    margin: 0;
    color: var(--c-brown);
    font-size: 0.98rem;
    line-height: 1.62;
}
.kearsipan-section {
    margin-top: 1.5rem;
}
.kearsipan-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-left: 0 !important;
    list-style: none;
}
.kearsipan-checklist li {
    position: relative;
    margin: 0 !important;
    padding: 0.8rem 0.9rem 0.8rem 2.25rem !important;
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius-sm);
    line-height: 1.55;
}
.kearsipan-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0.85rem;
    top: 0.8rem;
    font-family: var(--font-label);
    color: var(--c-green-deep);
    font-weight: 700;
}
.kearsipan-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    background: var(--c-cream-surface);
}
.kearsipan-service-table {
    min-width: 760px;
    margin: 0 !important;
    border: 0 !important;
}
.kearsipan-service-table th {
    background: linear-gradient(135deg, var(--c-green-deep), var(--c-blue-darkest)) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--c-gold) !important;
}
.kearsipan-service-table td {
    vertical-align: top;
}
.kearsipan-quote {
    border-left-color: var(--c-green-deep) !important;
    background: linear-gradient(135deg, rgba(31,111,78,0.08), rgba(200,169,97,0.13)) !important;
}
.kearsipan-cta,
.kearsipan-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(31, 111, 78, 0.22);
    background:
        linear-gradient(135deg, rgba(31,111,78,0.10) 0%, rgba(27,79,163,0.07) 100%),
        var(--c-cream-surface);
    box-shadow: var(--shadow-card);
}
.kearsipan-cta h2,
.kearsipan-footer-cta h2 {
    margin: 0 0 0.45rem;
    padding: 0;
    border: 0;
    font-size: 1.25rem;
}
.kearsipan-cta h2::after,
.kearsipan-footer-cta h2::after { display: none; }
.kearsipan-cta p,
.kearsipan-footer-cta p {
    margin: 0;
    color: var(--c-brown);
    line-height: 1.62;
}
.kearsipan-cta__button,
.kearsipan-footer-cta a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    border: 0 !important;
    background: var(--c-green-deep);
    color: #fff !important;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: var(--shadow-soft);
}
.kearsipan-cta__button:hover,
.kearsipan-footer-cta a:hover {
    background: var(--c-blue-darkest);
}
.kearsipan-footer-cta {
    display: block;
    margin-top: 2.25rem;
}
.kearsipan-footer-cta__eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--c-green-deep);
    text-transform: uppercase;
}
.kearsipan-footer-cta a {
    margin-top: 1rem;
}
@media (max-width: 980px) {
    .page-body--kearsipan .page-body__inner { grid-template-columns: 1fr; }
    .kearsipan-card-grid { grid-template-columns: 1fr; }
    .kearsipan-checklist { grid-template-columns: 1fr; }
    .kearsipan-cta { display: block; }
    .kearsipan-cta__button { margin-top: 1rem; }
}
@media (max-width: 560px) {
    .kearsipan-leadbox,
    .kearsipan-card,
    .kearsipan-cta,
    .kearsipan-footer-cta { padding: 1rem; }
    .kearsipan-leadbox::after { font-size: 2.4rem; }
    .page-banner__summary { font-size: 0.98rem; }
}

/* ============================================================
   PERPUSTAKAAN — Static Sidebar Page v14.5
   ============================================================ */
.page-banner--perpustakaan {
    background:
        radial-gradient(circle at 50% 0%, rgba(27, 79, 163, 0.10) 0%, transparent 34%),
        linear-gradient(180deg, var(--c-cream-surface) 0%, var(--c-cream) 100%);
}
.page-body--perpustakaan .page-body__inner {
    grid-template-columns: 270px minmax(0, 1fr);
}
.perpustakaan-prose {
    max-width: 920px;
}
.perpustakaan-prose > p:first-of-type::first-letter,
.perpustakaan-leadbox p:first-of-type::first-letter,
.perpustakaan-card p:first-of-type::first-letter,
.perpustakaan-cta p:first-of-type::first-letter,
.perpustakaan-footer-cta p:first-of-type::first-letter {
    float: none;
    padding: 0;
    font: inherit;
    color: inherit;
}
.perpustakaan-leadbox {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(247,241,226,0.92) 100%);
    border: 1px solid var(--c-cream-border);
    border-left: 4px solid var(--c-blue-mid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.5rem;
}
.perpustakaan-leadbox::after {
    content: 'BUKU';
    position: absolute;
    right: 1rem;
    bottom: -0.3rem;
    font-family: var(--font-label);
    font-size: 3.4rem;
    letter-spacing: 0.2em;
    color: rgba(27, 79, 163, 0.055);
    pointer-events: none;
}
.perpustakaan-leadbox__kicker {
    display: inline-flex;
    margin-bottom: 0.45rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--c-blue-mid);
    text-transform: uppercase;
}
.perpustakaan-leadbox p {
    position: relative;
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.72;
}
.perpustakaan-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.perpustakaan-card {
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    padding: 1.15rem;
    box-shadow: var(--shadow-soft);
}
.perpustakaan-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    background: linear-gradient(135deg, rgba(27,79,163,0.13), rgba(200,169,97,0.20));
    color: var(--c-blue-mid);
    font-size: 21px;
}
.perpustakaan-card h2 {
    margin: 0 0 0.45rem;
    padding: 0;
    border: 0;
    font-size: 1.1rem;
}
.perpustakaan-card h2::after { display: none; }
.perpustakaan-card p {
    margin: 0;
    color: var(--c-brown);
    font-size: 0.98rem;
    line-height: 1.62;
}
.perpustakaan-section {
    margin-top: 1.5rem;
}
.perpustakaan-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-left: 0 !important;
    list-style: none;
}
.perpustakaan-checklist li {
    position: relative;
    margin: 0 !important;
    padding: 0.8rem 0.9rem 0.8rem 2.25rem !important;
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius-sm);
    line-height: 1.55;
}
.perpustakaan-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0.85rem;
    top: 0.8rem;
    font-family: var(--font-label);
    color: var(--c-blue-mid);
    font-weight: 700;
}
.perpustakaan-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    background: var(--c-cream-surface);
}
.perpustakaan-service-table {
    min-width: 760px;
    margin: 0 !important;
    border: 0 !important;
}
.perpustakaan-service-table th {
    background: linear-gradient(135deg, var(--c-blue-mid), var(--c-blue-darkest)) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--c-gold) !important;
}
.perpustakaan-service-table td {
    vertical-align: top;
}
.perpustakaan-quote {
    border-left-color: var(--c-blue-mid) !important;
    background: linear-gradient(135deg, rgba(27,79,163,0.08), rgba(200,169,97,0.13)) !important;
}
.perpustakaan-cta,
.perpustakaan-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(27, 79, 163, 0.22);
    background:
        linear-gradient(135deg, rgba(27,79,163,0.10) 0%, rgba(31,111,78,0.07) 100%),
        var(--c-cream-surface);
    box-shadow: var(--shadow-card);
}
.perpustakaan-cta h2,
.perpustakaan-footer-cta h2 {
    margin: 0 0 0.45rem;
    padding: 0;
    border: 0;
    font-size: 1.25rem;
}
.perpustakaan-cta h2::after,
.perpustakaan-footer-cta h2::after { display: none; }
.perpustakaan-cta p,
.perpustakaan-footer-cta p {
    margin: 0;
    color: var(--c-brown);
    line-height: 1.62;
}
.perpustakaan-cta__button,
.perpustakaan-footer-cta a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    border: 0 !important;
    background: var(--c-blue-mid);
    color: #fff !important;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: var(--shadow-soft);
}
.perpustakaan-cta__button:hover,
.perpustakaan-footer-cta a:hover {
    background: var(--c-green-deep);
}
.perpustakaan-footer-cta {
    display: block;
    margin-top: 2.25rem;
}
.perpustakaan-footer-cta__eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--c-blue-mid);
    text-transform: uppercase;
}
.perpustakaan-footer-cta a {
    margin-top: 1rem;
}
@media (max-width: 980px) {
    .page-body--perpustakaan .page-body__inner { grid-template-columns: 1fr; }
    .perpustakaan-card-grid { grid-template-columns: 1fr; }
    .perpustakaan-checklist { grid-template-columns: 1fr; }
    .perpustakaan-cta { display: block; }
    .perpustakaan-cta__button { margin-top: 1rem; }
}
@media (max-width: 560px) {
    .perpustakaan-leadbox,
    .perpustakaan-card,
    .perpustakaan-cta,
    .perpustakaan-footer-cta { padding: 1rem; }
    .perpustakaan-leadbox::after { font-size: 2.4rem; }
}

/* =========================================================
   V14.6 - Portal Layanan Publik
   ========================================================= */
.page-banner--layanan-publik {
    background:
        radial-gradient(circle at 18% 20%, rgba(200,169,97,0.24), transparent 34%),
        radial-gradient(circle at 82% 14%, rgba(31,111,78,0.18), transparent 32%),
        linear-gradient(135deg, rgba(14,48,92,0.96), rgba(27,79,163,0.92));
}
.page-body--layanan-publik .page-body__inner {
    display: grid;
    grid-template-columns: minmax(230px, 292px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.layanan-publik-prose {
    position: relative;
}
.layanan-publik-leadbox {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.45rem;
    padding: 1.25rem 1.35rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(27, 79, 163, 0.20);
    background:
        linear-gradient(135deg, rgba(27,79,163,0.08), rgba(200,169,97,0.14)),
        var(--c-cream-surface);
    box-shadow: var(--shadow-soft);
}
.layanan-publik-leadbox::after {
    content: 'LAYANAN';
    position: absolute;
    right: 0.9rem;
    bottom: -0.3rem;
    font-family: var(--font-label);
    font-size: 3.05rem;
    letter-spacing: 0.18em;
    color: rgba(27, 79, 163, 0.055);
    pointer-events: none;
}
.layanan-publik-leadbox__kicker,
.layanan-publik-footer-cta__eyebrow {
    display: inline-flex;
    margin-bottom: 0.45rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.24em;
    color: var(--c-blue-mid);
    text-transform: uppercase;
}
.layanan-publik-leadbox p {
    position: relative;
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.72;
}
.layanan-publik-service-grid,
.layanan-publik-card-grid,
.layanan-publik-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.layanan-publik-service-card,
.layanan-publik-contact-card,
.layanan-publik-mini-card {
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    padding: 1.15rem;
    box-shadow: var(--shadow-soft);
}
.layanan-publik-service-card__icon,
.layanan-publik-contact-card__icon,
.layanan-publik-mini-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    background: linear-gradient(135deg, rgba(27,79,163,0.13), rgba(200,169,97,0.20));
    color: var(--c-blue-mid);
    font-size: 21px;
}
.layanan-publik-service-card h2,
.layanan-publik-contact-card h2 {
    margin: 0 0 0.45rem;
    padding: 0;
    border: 0;
    font-size: 1.08rem;
}
.layanan-publik-service-card h2::after,
.layanan-publik-contact-card h2::after { display: none; }
.layanan-publik-service-card p,
.layanan-publik-contact-card p {
    margin: 0;
    color: var(--c-brown);
    font-size: 0.96rem;
    line-height: 1.62;
}
.layanan-publik-service-card a {
    display: inline-flex;
    margin-top: 0.9rem;
    font-family: var(--font-label);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-blue-mid);
    border-bottom: 1px solid rgba(27,79,163,0.24);
}
.layanan-publik-mini-card {
    display: flex;
    gap: 0.85rem;
    text-decoration: none !important;
    color: inherit !important;
}
.layanan-publik-mini-card__icon {
    flex: 0 0 42px;
    margin-bottom: 0;
}
.layanan-publik-mini-card strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--c-blue-darkest);
}
.layanan-publik-mini-card em {
    display: block;
    font-style: normal;
    color: var(--c-brown);
    font-size: 0.95rem;
    line-height: 1.55;
}
.layanan-publik-section {
    margin-top: 1.5rem;
}
.layanan-publik-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-left: 0 !important;
    list-style: none;
}
.layanan-publik-checklist li {
    position: relative;
    margin: 0 !important;
    padding: 0.8rem 0.9rem 0.8rem 2.25rem !important;
    background: var(--c-cream-surface);
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius-sm);
    line-height: 1.55;
}
.layanan-publik-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0.85rem;
    top: 0.8rem;
    font-family: var(--font-label);
    color: var(--c-blue-mid);
    font-weight: 700;
}
.layanan-publik-steps {
    counter-reset: layananStep;
    display: grid;
    gap: 0.75rem;
    padding-left: 0 !important;
    list-style: none;
}
.layanan-publik-steps li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin: 0 !important;
    padding: 0.85rem 1rem !important;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-cream-border);
    background: var(--c-cream-surface);
    line-height: 1.58;
}
.layanan-publik-steps li span {
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-blue-mid);
    color: #fff;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.08em;
}
.layanan-publik-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid var(--c-cream-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    background: var(--c-cream-surface);
}
.layanan-publik-service-table {
    min-width: 780px;
    margin: 0 !important;
    border: 0 !important;
}
.layanan-publik-service-table th {
    background: linear-gradient(135deg, var(--c-blue-mid), var(--c-blue-darkest)) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--c-gold) !important;
}
.layanan-publik-service-table td {
    vertical-align: top;
}
.layanan-publik-service-table td a {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-blue-mid);
}
.layanan-publik-quote {
    border-left-color: var(--c-blue-mid) !important;
    background: linear-gradient(135deg, rgba(27,79,163,0.08), rgba(200,169,97,0.13)) !important;
}
.layanan-publik-cta,
.layanan-publik-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding: 1.35rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(27, 79, 163, 0.22);
    background:
        linear-gradient(135deg, rgba(27,79,163,0.10) 0%, rgba(31,111,78,0.07) 100%),
        var(--c-cream-surface);
    box-shadow: var(--shadow-card);
}
.layanan-publik-cta h2,
.layanan-publik-footer-cta h2 {
    margin: 0 0 0.45rem;
    padding: 0;
    border: 0;
    font-size: 1.25rem;
}
.layanan-publik-cta h2::after,
.layanan-publik-footer-cta h2::after { display: none; }
.layanan-publik-cta p,
.layanan-publik-footer-cta p {
    margin: 0;
    color: var(--c-brown);
    line-height: 1.62;
}
.layanan-publik-cta__button,
.layanan-publik-footer-cta a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    border: 0 !important;
    background: var(--c-blue-mid);
    color: #fff !important;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: var(--shadow-soft);
}
.layanan-publik-cta__button:hover,
.layanan-publik-footer-cta a:hover {
    background: var(--c-green-deep);
}
.layanan-publik-footer-cta {
    display: block;
    margin-top: 2.25rem;
}
.layanan-publik-footer-cta a {
    margin-top: 1rem;
}
@media (max-width: 980px) {
    .page-body--layanan-publik .page-body__inner { grid-template-columns: 1fr; }
    .layanan-publik-service-grid,
    .layanan-publik-card-grid,
    .layanan-publik-contact-grid { grid-template-columns: 1fr; }
    .layanan-publik-checklist { grid-template-columns: 1fr; }
    .layanan-publik-cta { display: block; }
    .layanan-publik-cta__button { margin-top: 1rem; }
}
@media (max-width: 560px) {
    .layanan-publik-leadbox,
    .layanan-publik-service-card,
    .layanan-publik-contact-card,
    .layanan-publik-cta,
    .layanan-publik-footer-cta { padding: 1rem; }
    .layanan-publik-leadbox::after { font-size: 2.15rem; }
}

/* =========================================================
   v14.7 SKM Online - public
   ========================================================= */
.skm-hero{background:linear-gradient(135deg,rgba(11,47,87,.08),rgba(20,91,60,.08));border-bottom:1px solid rgba(161,132,61,.25);padding:72px 0 62px;text-align:center}.skm-hero__wrap{max-width:980px}.skm-eyebrow{font-family:var(--font-display,serif);letter-spacing:.22em;text-transform:uppercase;color:#a1843d;font-size:.78rem;margin:0 0 .75rem}.skm-title,.skm-page-head h1,.skm-thanks h1{font-family:var(--font-serif,serif);font-size:clamp(2.1rem,5vw,4rem);font-weight:500;color:#2f1d17;line-height:1.05;margin:0}.skm-lead,.skm-page-head p,.skm-thanks p{max-width:760px;margin:1rem auto 0;color:#6c5747;font-size:1.05rem;line-height:1.75}.skm-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}.skm-actions--center{justify-content:center}.skm-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:13px 22px;text-decoration:none;font-family:var(--font-display,serif);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;border:1px solid rgba(161,132,61,.45);transition:.2s ease}.skm-btn--primary{background:#145b3c;color:#fff;border-color:#145b3c;box-shadow:0 14px 32px rgba(20,91,60,.18)}.skm-btn--primary:hover{background:#0f482f;color:#fff}.skm-btn--ghost{background:rgba(255,255,255,.55);color:#2f1d17}.skm-btn--ghost:hover{background:#fff;color:#2f1d17}.skm-section{padding:54px 0}.skm-section--alt{background:#f7f0e4}.skm-grid{display:grid;gap:18px}.skm-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.skm-stat{background:#fffaf0;border:1px solid rgba(161,132,61,.25);border-radius:14px;padding:22px;text-align:center;box-shadow:0 18px 45px rgba(58,43,32,.07)}.skm-stat--main{background:linear-gradient(135deg,#0b2f57,#145b3c);color:#fff}.skm-stat__label{display:block;font-family:var(--font-display,serif);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:#a1843d}.skm-stat--main .skm-stat__label{color:#e7cf8d}.skm-stat strong{display:block;font-size:2.1rem;line-height:1.1;margin:.45rem 0;font-family:var(--font-serif,serif);font-weight:600}.skm-stat small{color:#7c6654}.skm-stat--main small{color:rgba(255,255,255,.76)}.skm-layout{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}.skm-side-card,.skm-prose-card,.skm-card,.skm-thanks{background:#fffaf0;border:1px solid rgba(161,132,61,.25);border-radius:16px;padding:26px;box-shadow:0 18px 45px rgba(58,43,32,.06)}.skm-side-card h2,.skm-prose-card h2,.skm-card h2{font-family:var(--font-serif,serif);font-size:1.7rem;font-weight:500;color:#2f1d17;margin:0 0 12px}.skm-side-card ul{padding-left:1.2rem;margin:0}.skm-side-card li{margin:.55rem 0;color:#5b4637}.skm-prose-card p{font-size:1rem;line-height:1.75;color:#5b4637}.skm-form-wrap{max-width:980px}.skm-page-head{text-align:center;margin-bottom:30px}.skm-form{display:grid;gap:18px}.skm-card h2 small{font-size:.9rem;color:#8a7664;font-weight:400}.skm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.skm-form label{display:flex;flex-direction:column;gap:7px;color:#3c2a22;font-weight:600}.skm-form label span{color:#b91c1c}.skm-form input,.skm-form select,.skm-form textarea{width:100%;border:1px solid rgba(161,132,61,.35);border-radius:10px;background:#fff;padding:11px 12px;font:inherit;color:#2f1d17}.skm-form textarea{resize:vertical}.skm-full{grid-column:1/-1}.skm-score-list{display:grid;gap:12px}.skm-score-item{display:grid;grid-template-columns:1fr 190px;gap:18px;align-items:center;border:1px solid rgba(161,132,61,.18);border-radius:12px;padding:14px;background:rgba(255,255,255,.62)}.skm-score-item p{margin:.3rem 0 0;color:#776250;font-size:.92rem}.skm-submit-row{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}.skm-alert{padding:14px 18px;border-radius:12px;margin-bottom:16px;border:1px solid rgba(161,132,61,.25);background:#fff7ed;color:#7c2d12}.skm-thanks{text-align:center;max-width:760px;margin:0 auto}.skm-thanks__icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:#145b3c;color:#fff;font-size:2rem}.skm-card .skm-btn{border:none;cursor:pointer}
@media(max-width:860px){.skm-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.skm-layout{grid-template-columns:1fr}.skm-score-item{grid-template-columns:1fr}.skm-form-grid{grid-template-columns:1fr}}@media(max-width:560px){.skm-grid--4{grid-template-columns:1fr}.skm-section{padding:36px 0}.skm-hero{padding:48px 0}.skm-submit-row{justify-content:stretch}.skm-submit-row .skm-btn,.skm-submit-row button{width:100%}}

/* =========================================================
   v14.7.1 SKM Online - public layout stabilization
   - Replaces the early v14.7 public SKM layout that looked broken
     on the public page and form.
   - Fully scoped to .skm-public so it does not disturb other modules.
   ========================================================= */
.main-content .skm-public,
.main-content .skm-public * {
    box-sizing: border-box;
}
.main-content .skm-public {
    --skm-blue: #0b2f57;
    --skm-green: #145b3c;
    --skm-gold: #a1843d;
    --skm-ink: #2f1d17;
    --skm-text: #5f4a3d;
    --skm-muted: #8a7664;
    --skm-line: rgba(161, 132, 61, 0.26);
    --skm-paper: #fffaf0;
    --skm-bg: #f7f0e4;
    --skm-white: #ffffff;
    width: 100%;
    color: var(--skm-ink);
}
.skm-public-container {
    width: min(1120px, calc(100% - 40px));
    margin-inline: auto;
}
.skm-public-section {
    padding: 48px 0;
}
.skm-public-section--top {
    padding-top: 44px;
}
.skm-public-hero {
    padding: 54px 0;
    border-bottom: 1px solid var(--skm-line);
    background:
        radial-gradient(circle at 12% 16%, rgba(161,132,61,.16), transparent 32%),
        linear-gradient(135deg, rgba(11,47,87,.075), rgba(20,91,60,.065));
}
.skm-public-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 28px;
    align-items: center;
}
.skm-public-hero__text {
    min-width: 0;
}
.skm-public-eyebrow {
    margin: 0 0 10px !important;
    font-family: var(--font-label, 'Cinzel', serif);
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--skm-gold) !important;
    font-weight: 700;
}
.skm-public h1,
.skm-public-head h1 {
    margin: 0 !important;
    max-width: 850px;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    line-height: 1.04 !important;
    font-weight: 600 !important;
    color: var(--skm-ink) !important;
    letter-spacing: 0 !important;
}
.skm-public h2 {
    margin: 0 !important;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 1.62rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    color: var(--skm-ink) !important;
    letter-spacing: 0 !important;
    border: 0 !important;
    padding: 0 !important;
}
.skm-public h2::after { display: none !important; }
.skm-public h2 small {
    font-family: inherit;
    font-size: .95rem;
    color: var(--skm-muted);
    font-weight: 400;
}
.skm-public p {
    margin: 12px 0 0 !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
    color: var(--skm-text) !important;
}
.skm-public-actions,
.skm-public-submit-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 24px;
}
.skm-public-submit-row {
    justify-content: flex-end;
    margin-top: 8px;
}
.skm-public-btn,
.skm-public button.skm-public-btn {
    appearance: none;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid var(--skm-line);
    font-family: var(--font-label, 'Cinzel', serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: .18s ease;
}
.skm-public-btn--primary,
.skm-public button.skm-public-btn--primary {
    background: var(--skm-green);
    border-color: var(--skm-green);
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(20,91,60,.18);
}
.skm-public-btn--primary:hover,
.skm-public button.skm-public-btn--primary:hover {
    background: #0f482f;
    color: #fff !important;
}
.skm-public-btn--secondary {
    background: rgba(255,255,255,.72);
    color: var(--skm-ink) !important;
}
.skm-public-btn--secondary:hover {
    background: #fff;
    color: var(--skm-ink) !important;
}
.skm-public-panel,
.skm-public-card {
    background: var(--skm-paper) !important;
    border: 1px solid var(--skm-line) !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: 0 18px 45px rgba(58,43,32,.06) !important;
}
.skm-public-panel--summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.skm-public-panel--summary > div {
    min-width: 0;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(161,132,61,.18);
}
.skm-public-panel--summary span,
.skm-public-panel--summary small {
    display: block;
    font-family: var(--font-label, 'Cinzel', serif);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--skm-muted);
}
.skm-public-panel--summary strong {
    display: block;
    margin: 6px 0 2px;
    font-family: var(--font-heading, 'Cormorant Garamond', serif);
    font-size: 2rem;
    line-height: 1;
    color: var(--skm-blue);
}
.skm-public-grid {
    display: grid;
    gap: 24px;
    align-items: start;
}
.skm-public-grid--two {
    grid-template-columns: .9fr 1.1fr;
}
.skm-public-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.skm-public-service-list span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(161,132,61,.24);
    color: var(--skm-text);
    font-size: .92rem;
}
.skm-form-shell {
    max-width: 940px;
}
.skm-public-head {
    text-align: center;
    margin-bottom: 28px;
}
.skm-public-head p {
    max-width: 760px;
    margin-inline: auto !important;
}
.skm-public-form {
    display: grid;
    gap: 18px;
}
.skm-public-card-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.skm-public-card-head > span {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--skm-blue);
    color: #fff;
    font-family: var(--font-label, 'Cinzel', serif);
    font-size: 14px;
    font-weight: 700;
}
.skm-public-card-head p {
    margin-top: 6px !important;
    font-size: .95rem !important;
}
.skm-public-fields {
    display: grid;
    gap: 15px;
}
.skm-public-fields--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.skm-public-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--skm-ink) !important;
    line-height: 1.35 !important;
}
.skm-public-field--wide {
    grid-column: 1 / -1;
}
.skm-public-field b {
    color: #b91c1c;
}
.skm-public input,
.skm-public select,
.skm-public textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(161,132,61,.36) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--skm-ink) !important;
    font: inherit !important;
    box-shadow: none !important;
}
.skm-public textarea {
    min-height: 132px !important;
    resize: vertical;
}
.skm-public input:focus,
.skm-public select:focus,
.skm-public textarea:focus {
    outline: none !important;
    border-color: var(--skm-green) !important;
    box-shadow: 0 0 0 4px rgba(20,91,60,.12) !important;
}
.skm-public-scale-note {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 15px;
}
.skm-public-scale-note span {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(161,132,61,.22);
    background: #fff;
    color: var(--skm-text);
    font-size: .88rem;
    text-align: center;
}
.skm-public-score-list {
    display: grid;
    gap: 12px;
}
.skm-public-score-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 18px;
    align-items: center;
    margin: 0;
    padding: 15px;
    border: 1px solid rgba(161,132,61,.2);
    border-radius: 14px;
    background: rgba(255,255,255,.66);
}
.skm-public-score-item legend {
    display: block;
    float: left;
    width: 100%;
    padding: 0;
    color: var(--skm-ink);
}
.skm-public-score-item legend strong,
.skm-public-score-item legend em {
    display: block;
}
.skm-public-score-item legend strong {
    font-size: .98rem;
    line-height: 1.35;
}
.skm-public-score-item legend em {
    margin-top: 4px;
    font-style: normal;
    color: var(--skm-text);
    font-size: .9rem;
    line-height: 1.55;
}
.skm-public-radio-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    clear: both;
}
.skm-public-radio-row label {
    position: relative;
    display: block;
    margin: 0 !important;
    cursor: pointer;
}
.skm-public-radio-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.skm-public-radio-row span {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid rgba(161,132,61,.34);
    background: #fff;
    color: var(--skm-ink);
    font-weight: 800;
}
.skm-public-radio-row input:checked + span {
    border-color: var(--skm-green);
    background: var(--skm-green);
    color: #fff;
    box-shadow: 0 10px 20px rgba(20,91,60,.16);
}
.skm-public-alert {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid rgba(161,132,61,.25);
    background: #fff7ed;
    color: #7c2d12;
}
@media (max-width: 940px) {
    .skm-public-hero__grid,
    .skm-public-grid--two {
        grid-template-columns: 1fr;
    }
    .skm-public-panel--summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .skm-public-score-item {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .skm-public-container {
        width: min(100% - 28px, 1120px);
    }
    .skm-public-hero,
    .skm-public-section {
        padding: 34px 0;
    }
    .skm-public-panel--summary,
    .skm-public-fields--two,
    .skm-public-scale-note {
        grid-template-columns: 1fr;
    }
    .skm-public-card,
    .skm-public-panel {
        padding: 18px !important;
    }
    .skm-public-card-head {
        display: block;
    }
    .skm-public-card-head > span {
        margin-bottom: 10px;
    }
    .skm-public-actions,
    .skm-public-submit-row {
        display: grid;
        grid-template-columns: 1fr;
    }
    .skm-public-btn,
    .skm-public button.skm-public-btn {
        width: 100%;
    }
}
@media (max-width: 440px) {
    .skm-public-radio-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}