:root {
    --navy: #062d52;
    --navy-dark: #041f39;
    --blue: #0872b9;
    --teal: #0b927f;
    --gold: #e9b949;
    --cream: #f6f2e8;
    --background: #f5f8fa;
    --white: #ffffff;
    --ink: #18364e;
    --muted: #647987;
    --line: #dbe6eb;
    --success: #12836f;
    --warning: #b37a12;
    --danger: #b74747;
    --shadow: 0 18px 45px rgba(7, 53, 84, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: Manrope, Arial, sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.government-bar {
    height: 32px;
    color: #c2d2dd;
    background: var(--navy-dark);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.government-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.government-inner i {
    margin-right: 5px;
    color: var(--gold);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    text-decoration: none;
}

.brand img {
    width: 44px;
    height: 49px;
    object-fit: contain;
}

.brand span,
.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font: 800 21px "Plus Jakarta Sans", sans-serif;
    letter-spacing: -0.8px;
}

.brand em {
    color: var(--teal);
    font-style: normal;
}

.brand small {
    margin-top: 3px;
    color: #708491;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.35px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-links a {
    color: #526978;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--blue);
}

.nav-links .admin-button {
    padding: 10px 15px;
    border: 1px solid #bad0dc;
    border-radius: 8px;
    color: var(--navy);
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
}

.hero {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    color: var(--white);
    background: var(--navy);
}

.hero-background,
.hero-overlay {
    position: absolute;
    inset: 0;
}

.hero-background {
    background: url('../images/hero-jambi.jpg') center / cover no-repeat;
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(3, 29, 51, 0.98),
            rgba(5, 44, 75, 0.93) 48%,
            rgba(5, 44, 75, 0.42)
        );
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr 0.72fr;
    align-items: center;
    gap: 90px;
    min-height: 620px;
    padding-block: 65px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.eyebrow i {
    width: 30px;
    height: 2px;
    background: var(--gold);
}

.hero h1 {
    max-width: 720px;
    margin: 18px 0 20px;
    font: 800 clamp(46px, 5.3vw, 70px) / 1.05 "Plus Jakarta Sans", sans-serif;
    letter-spacing: -3.7px;
}

.hero h1 span {
    display: block;
    color: var(--gold);
}

.hero-copy > p {
    max-width: 630px;
    color: #c3d2dc;
    font-size: 13px;
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    gap: 11px;
    margin-top: 28px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 43px;
    padding: 0 17px;
    border: 0;
    border-radius: 7px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.button-gold {
    color: var(--navy);
    background: var(--gold);
}

.button-outline {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.08);
}

.button-primary {
    color: var(--white);
    background: var(--blue);
}

.hero-summary {
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background: rgba(4, 31, 57, 0.84);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
}

.summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px 16px;
    color: #9db2c0;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.summary-header i {
    color: var(--gold);
}

.completion-visual {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 8px;
    border-block: 1px solid rgba(255, 255, 255, 0.12);
}

.donut {
    display: grid;
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(
        var(--gold) var(--completion),
        rgba(255, 255, 255, 0.12) 0
    );
}

.donut::before {
    content: '';
    position: absolute;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--navy-dark);
}

.donut div {
    position: relative;
    z-index: 1;
    text-align: center;
}

.donut strong,
.donut small {
    display: block;
}

.donut strong {
    font: 800 24px "Plus Jakarta Sans", sans-serif;
}

.donut small {
    color: #95aab7;
    font-size: 7px;
}

.completion-copy small,
.completion-copy strong {
    display: block;
}

.completion-copy small {
    color: #90a6b4;
    font-size: 7px;
    letter-spacing: 1px;
}

.completion-copy strong {
    margin-top: 5px;
    font-size: 13px;
}

.completion-copy p {
    color: #aabdc9;
    font-size: 8px;
    line-height: 1.5;
}

.summary-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 6px 2px;
    color: var(--gold);
    text-decoration: none;
    font-size: 8px;
    font-weight: 800;
}

.index-chart {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    min-height: 230px;
    padding: 18px 4px;
    border-block: 1px solid rgba(255, 255, 255, 0.12);
}

.index-chart-scale {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-bottom: 24px;
    color: #829baa;
    font-size: 6px;
    text-align: right;
}

.index-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(42px, 1fr));
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.index-columns article {
    display: grid;
    grid-template-rows: 20px 155px 18px;
    align-items: end;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.index-columns article > strong {
    color: var(--white);
    font-size: 8px;
}

.index-columns article > div {
    position: relative;
    height: 155px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    background:
        linear-gradient(
            to bottom,
            transparent 49.5%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 50.5%
        );
}

.index-columns article > div > i {
    position: absolute;
    right: 10%;
    bottom: 0;
    left: 10%;
    min-height: 3px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to top, #c6922f, var(--gold));
    box-shadow: 0 8px 25px rgba(233, 185, 73, 0.18);
}

.index-columns article > span {
    color: #a9beca;
    font-size: 7px;
    font-weight: 800;
}

.index-empty {
    align-self: center;
    grid-column: 1 / -1;
    color: #a9beca;
    font-size: 8px;
    text-align: center;
}

.index-line-chart {
    min-height: 230px;
    padding: 12px 0 4px;
    border-block: 1px solid rgba(255, 255, 255, 0.12);
}

.index-line-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.line-grid line {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
    stroke-dasharray: 5 5;
}

.line-grid text {
    fill: #839daa;
    font-size: 9px;
    font-weight: 700;
}

.index-line {
    fill: none;
    stroke: var(--gold);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 8px rgba(233, 185, 73, 0.22));
}

.index-point circle {
    fill: var(--navy-dark);
    stroke: var(--gold);
    stroke-width: 4;
}

.index-point text {
    text-anchor: middle;
}

.point-value {
    fill: var(--white);
    font-size: 10px;
    font-weight: 800;
}

.point-year {
    fill: #a9beca;
    font-size: 10px;
    font-weight: 800;
}

.index-latest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.12);
}

.index-latest > div {
    min-width: 0;
    padding: 10px;
    background: rgba(4, 31, 57, 0.94);
}

.index-latest small,
.index-latest strong {
    display: block;
}

.index-latest small {
    overflow: hidden;
    color: #819ba9;
    font-size: 5px;
    letter-spacing: 0.6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.index-latest strong {
    overflow: hidden;
    margin-top: 4px;
    color: var(--white);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-strip {
    background: var(--cream);
    border-bottom: 1px solid #e5dfd2;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.metric-grid article {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 25px;
    border-right: 1px solid #ded8cb;
}

.metric-grid article:last-child {
    border-right: 0;
}

.metric-grid article > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--navy);
}

.metric-grid strong,
.metric-grid small {
    display: block;
}

.metric-grid strong {
    color: var(--navy);
    font: 800 23px "Plus Jakarta Sans", sans-serif;
}

.metric-grid small {
    color: #777f7f;
    font-size: 8px;
}

.section {
    padding-block: 85px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 34px;
}

.section-heading span,
.result-heading span {
    color: var(--teal);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.section-heading h2,
.result-heading h2 {
    margin: 8px 0 0;
    color: var(--navy);
    font: 800 clamp(29px, 3.5vw, 41px) "Plus Jakarta Sans", sans-serif;
    letter-spacing: -1.7px;
}

.section-heading > p {
    max-width: 460px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.chart-card,
.content-card,
.survey-chart-card {
    padding: 28px;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.card-heading small {
    color: var(--teal);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.card-heading h2,
.card-heading h3 {
    margin: 4px 0 0;
    color: var(--navy);
    font: 800 19px "Plus Jakarta Sans", sans-serif;
}

.card-heading > i {
    color: #b1c2cb;
    font-size: 22px;
}

.horizontal-chart {
    display: grid;
    gap: 15px;
}

.chart-row > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    color: #607582;
    font-size: 8px;
    font-weight: 700;
}

.chart-track,
.completion-bar,
.table-progress,
.rank-progress {
    overflow: hidden;
    border-radius: 99px;
    background: #e7eef2;
}

.chart-track {
    height: 9px;
}

.chart-track i,
.completion-bar i,
.table-progress i,
.rank-progress i {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--navy), var(--blue));
}

.green-chart .chart-track i {
    background: linear-gradient(90deg, #087665, #16ad91);
}

.agency-section {
    background: var(--background);
}

.text-link {
    color: var(--blue);
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
}

.agency-ranking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.agency-ranking article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--white);
}

.rank-number {
    color: var(--gold);
    font: 800 20px "Plus Jakarta Sans", sans-serif;
}

.rank-content > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.rank-content strong,
.rank-content small {
    display: block;
}

.rank-content strong {
    font-size: 9px;
}

.rank-content small {
    color: var(--muted);
    font-size: 7px;
}

.rank-progress {
    height: 6px;
}

.rank-score {
    color: var(--teal);
    font-size: 11px;
}

.innovation-grid,
.data-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.innovation-card,
.data-card {
    display: flex;
    flex-direction: column;
    min-height: 265px;
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.innovation-card-top,
.data-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.innovation-card-top span,
.data-card-header span {
    padding: 6px 8px;
    border-radius: 99px;
    color: var(--teal);
    background: #eaf7f4;
    font-size: 7px;
    font-weight: 800;
}

.innovation-card-top strong,
.data-card-header strong {
    color: var(--navy);
    font-size: 12px;
}

.innovation-card h3,
.data-card h3 {
    margin: 18px 0 8px;
    color: var(--navy);
    font: 800 15px / 1.4 "Plus Jakarta Sans", sans-serif;
}

.innovation-card > p,
.agency-name {
    margin: 0;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.6;
}

.innovation-meta {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding-block: 15px;
    color: #70838f;
    font-size: 7px;
}

.innovation-card > a,
.data-card-footer a {
    color: var(--blue);
    text-decoration: none;
    font-size: 8px;
    font-weight: 800;
}

.site-footer {
    padding: 42px 0 18px;
    color: #aabecb;
    background: var(--navy-dark);
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 30px;
}

.footer-brand {
    color: var(--white);
}

.footer-main p {
    font-size: 9px;
    line-height: 1.7;
}

.footer-main nav {
    display: flex;
    gap: 20px;
}

.footer-main nav a {
    color: #afc0ca;
    text-decoration: none;
    font-size: 8px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 7px;
}

.mobile-bottom-nav {
    display: none;
}

.page-hero {
    color: var(--white);
    background: linear-gradient(135deg, var(--navy-dark), #075b78);
}

.compact-hero {
    padding-block: 65px;
}

.page-hero span {
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.page-hero h1,
.detail-hero h1 {
    margin: 10px 0;
    font: 800 clamp(34px, 5vw, 52px) "Plus Jakarta Sans", sans-serif;
    letter-spacing: -2.5px;
}

.page-hero p {
    max-width: 650px;
    margin: 0;
    color: #bed0db;
    font-size: 11px;
    line-height: 1.7;
}

.data-section,
.rekap-section,
.survey-section,
.detail-section {
    background: var(--background);
}

.filter-panel {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 35px;
    padding: 20px;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.filter-panel label > span,
.innovation-form label > span,
.note-field > span {
    display: block;
    margin-bottom: 7px;
    color: #607481;
    font-size: 8px;
    font-weight: 800;
}

.filter-panel input,
.filter-panel select,
.innovation-form input,
.innovation-form select,
.innovation-form textarea,
.note-field input,
.admin-search input {
    width: 100%;
    min-height: 43px;
    border: 1px solid #cddce3;
    border-radius: 7px;
    background: var(--white);
    padding: 10px 11px;
    color: var(--ink);
    font-size: 9px;
}

.search-field > div {
    position: relative;
}

.search-field i {
    position: absolute;
    left: 12px;
    top: 50%;
    color: #8da0ab;
    transform: translateY(-50%);
}

.search-field input {
    padding-left: 34px;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-actions a {
    color: var(--muted);
    font-size: 8px;
}

.result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.result-heading h2 {
    font-size: 24px;
}

.data-card-grid {
    grid-template-columns: repeat(3, 1fr);
}

.data-card {
    min-height: 310px;
}

.agency-name i {
    margin-right: 5px;
    color: var(--teal);
}

.data-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: auto 0 16px;
    padding-top: 18px;
}

.data-meta span {
    padding: 10px;
    background: #f4f8fa;
}

.data-meta small,
.data-meta strong {
    display: block;
}

.data-meta small {
    color: #84949e;
    font-size: 6px;
}

.data-meta strong {
    margin-top: 3px;
    font-size: 8px;
}

.completion-bar {
    height: 7px;
}

.data-card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.data-card-footer small {
    color: #84959f;
    font-size: 7px;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    border: 1px dashed #bdced7;
    background: var(--white);
}

.empty-state i {
    color: #a4b8c3;
    font-size: 35px;
}

.rekap-filter {
    grid-template-columns: 1.5fr 1fr auto;
}

.print-button {
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--navy);
    background: var(--white);
    cursor: pointer;
}

.rekap-table-wrap,
.admin-table-wrap {
    overflow: auto;
    border: 1px solid var(--line);
    background: var(--white);
}

.rekap-table,
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.rekap-table th,
.rekap-table td,
.admin-table th,
.admin-table td {
    padding: 14px;
    border-bottom: 1px solid #e7eef1;
    text-align: left;
    font-size: 8px;
}

.rekap-table th,
.admin-table th {
    color: #70828e;
    background: #f5f8fa;
    font-size: 7px;
    letter-spacing: 0.5px;
}

.rekap-table td > strong,
.rekap-table td > small,
.rekap-table td > span,
.admin-table td > strong,
.admin-table td > small {
    display: block;
}

.rekap-table td > small,
.admin-table td > small {
    margin-top: 3px;
    color: var(--muted);
}

.status-good {
    color: var(--success);
}

.status-bad {
    color: var(--danger);
}

.status-warning {
    color: var(--warning);
}

.table-progress {
    width: 90px;
    height: 6px;
    margin-bottom: 4px;
}

.detail-hero {
    padding-block: 55px;
    color: var(--white);
    background: linear-gradient(135deg, var(--navy-dark), #075b78);
}

.back-link {
    color: #b9ccd7;
    text-decoration: none;
    font-size: 8px;
}

.detail-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 50px;
    margin-top: 30px;
}

.detail-code {
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
}

.detail-hero-grid p {
    margin: 0;
    color: #bdd0db;
    font-size: 11px;
}

.detail-score {
    min-width: 190px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.detail-score strong,
.detail-score span,
.detail-score small {
    display: block;
}

.detail-score strong {
    color: var(--gold);
    font: 800 30px "Plus Jakarta Sans", sans-serif;
}

.detail-score span {
    margin-top: 3px;
    font-size: 9px;
    font-weight: 800;
}

.detail-score small {
    margin-top: 5px;
    color: #b6cad6;
    font-size: 7px;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
}

.detail-main {
    display: grid;
    gap: 16px;
}

.content-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.content-card-heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--navy);
}

.content-card-heading small {
    color: var(--teal);
    font-size: 7px;
    font-weight: 800;
}

.content-card-heading h2 {
    margin: 3px 0 0;
    color: var(--navy);
    font: 800 18px "Plus Jakarta Sans", sans-serif;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
}

.profile-grid > div {
    padding: 15px;
    background: #f9fbfc;
}

.profile-grid small,
.profile-grid strong {
    display: block;
}

.profile-grid small {
    color: #80919b;
    font-size: 7px;
}

.profile-grid strong {
    margin-top: 4px;
    font-size: 9px;
}

.narrative-card > p {
    color: #536b79;
    font-size: 10px;
    line-height: 1.8;
}

.document-list {
    display: grid;
    gap: 8px;
}

.document-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-left: 3px solid var(--danger);
    background: #fafcfd;
}

.document-item.available {
    border-color: var(--success);
}

.document-item.revision {
    border-color: var(--warning);
}

.document-item > span {
    color: #92a3ad;
    font-size: 8px;
    font-weight: 800;
}

.document-item strong,
.document-item small {
    display: block;
}

.document-item strong {
    font-size: 8px;
}

.document-item small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 7px;
}

.document-item b {
    font-size: 7px;
}

.detail-sidebar {
    display: grid;
    align-content: start;
    gap: 12px;
}

.detail-sidebar article,
.sidebar-link {
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.detail-sidebar article small,
.detail-sidebar article strong,
.detail-sidebar article p {
    display: block;
}

.detail-sidebar article strong {
    margin: 8px 0;
    color: var(--navy);
    font: 800 30px "Plus Jakarta Sans", sans-serif;
}

.detail-sidebar article p {
    color: var(--teal);
    font-size: 8px;
    font-weight: 800;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    text-decoration: none;
}

.sidebar-link > i {
    color: var(--danger);
    font-size: 23px;
}

.sidebar-link small,
.sidebar-link strong {
    display: block;
}

.sidebar-link small {
    color: var(--muted);
    font-size: 6px;
}

.sidebar-link strong {
    margin-top: 3px;
    font-size: 9px;
}

.survey-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
}

.survey-overall {
    padding: 30px;
    color: var(--white);
    background: var(--navy);
}

.survey-overall span,
.survey-overall strong,
.survey-overall small {
    display: block;
}

.survey-overall span {
    color: #a7bdca;
    font-size: 7px;
    letter-spacing: 1px;
}

.survey-overall strong {
    margin-top: 15px;
    color: var(--gold);
    font: 800 52px "Plus Jakarta Sans", sans-serif;
}

.survey-overall small,
.survey-overall p {
    color: #b4c8d3;
    font-size: 8px;
}

.survey-bars {
    display: grid;
    gap: 15px;
}

.survey-bars > div {
    display: grid;
    grid-template-columns: 170px 1fr 35px;
    align-items: center;
    gap: 12px;
    font-size: 8px;
}

.survey-bars > div > div {
    height: 9px;
    overflow: hidden;
    border-radius: 99px;
    background: #e5edf1;
}

.survey-bars i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--navy), var(--teal));
}

.login-page {
    min-height: 100vh;
    background: var(--background);
}

.login-shell {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 100vh;
}

.login-brand-panel,
.login-form-panel {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: clamp(35px, 7vw, 100px);
}

.login-brand-panel {
    color: var(--white);
    background:
        linear-gradient(rgba(4, 31, 57, 0.9), rgba(4, 31, 57, 0.9)),
        url('../images/hero-jambi.jpg') center / cover;
}

.login-brand-panel img {
    width: 65px;
    margin-bottom: 25px;
}

.login-brand-panel > span,
.login-form-panel > small {
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.login-brand-panel h1 {
    max-width: 650px;
    margin: 12px 0;
    font: 800 clamp(34px, 5vw, 58px) / 1.1 "Plus Jakarta Sans", sans-serif;
}

.login-brand-panel p {
    color: #bfd0db;
    font-size: 11px;
    line-height: 1.7;
}

.login-form-panel {
    max-width: 560px;
}

.login-form-panel > a {
    margin-bottom: 60px;
    color: var(--muted);
    text-decoration: none;
    font-size: 8px;
}

.login-form-panel h2 {
    margin: 8px 0 25px;
    color: var(--navy);
    font: 800 30px "Plus Jakarta Sans", sans-serif;
}

.login-form-panel form {
    display: grid;
    gap: 16px;
}

.login-form-panel label span {
    display: block;
    margin-bottom: 7px;
    color: #5f7481;
    font-size: 8px;
    font-weight: 800;
}

.login-form-panel input {
    width: 100%;
    height: 46px;
    border: 1px solid #cbdbe3;
    border-radius: 7px;
    padding: 10px;
}

.alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 7px;
    font-size: 9px;
}

.alert-error {
    color: #993f3f;
    background: #fbe8e8;
}

.alert-success {
    color: #176d5e;
    background: #e5f6f1;
}

.admin-body {
    min-height: 100vh;
    background: var(--background);
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    width: 245px;
    flex-direction: column;
    padding: 22px 16px;
    color: #b9ccd7;
    background: var(--navy-dark);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 25px;
    color: var(--white);
    text-decoration: none;
}

.admin-brand img {
    width: 38px;
}

.admin-brand span,
.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand strong {
    font-size: 14px;
}

.admin-brand small {
    margin-top: 3px;
    color: #839eaf;
    font-size: 6px;
}

.admin-sidebar nav {
    display: grid;
    gap: 5px;
}

.admin-sidebar nav a,
.logout-link {
    padding: 12px;
    border-radius: 7px;
    color: #a9bfcc;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a.active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.09);
}

.admin-sidebar nav i,
.logout-link i {
    width: 20px;
}

.logout-link {
    margin-top: auto;
}

.admin-main {
    margin-left: 245px;
    padding: 30px;
}

.admin-topbar,
.admin-card-heading,
.admin-simple-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-topbar {
    margin-bottom: 25px;
}

.admin-topbar small,
.admin-card-heading small,
.admin-simple-header small {
    color: var(--teal);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}

.admin-topbar h1,
.admin-simple-header h1 {
    margin: 4px 0 0;
    color: var(--navy);
    font: 800 27px "Plus Jakarta Sans", sans-serif;
}

.admin-topbar > span {
    padding: 9px 12px;
    border-radius: 99px;
    background: var(--white);
    font-size: 8px;
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.admin-metrics article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    background: var(--white);
}

.admin-metrics article > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--white);
    background: var(--navy);
}

.admin-metrics small,
.admin-metrics strong {
    display: block;
}

.admin-metrics small {
    color: var(--muted);
    font-size: 7px;
}

.admin-metrics strong {
    color: var(--navy);
    font-size: 20px;
}

.admin-card {
    padding: 22px;
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.admin-card-heading {
    margin-bottom: 18px;
}

.admin-card-heading h2 {
    margin: 3px 0 0;
    color: var(--navy);
    font-size: 18px;
}

.status-pill {
    display: inline-block;
    padding: 5px 7px;
    border-radius: 99px;
    background: #edf2f4;
}

.status-pill.published {
    color: var(--success);
    background: #e7f5f1;
}

.admin-simple-page {
    min-height: 100vh;
    padding: 25px;
    background: var(--background);
}

.admin-simple-header,
.admin-simple-main {
    width: min(1180px, 100%);
    margin-inline: auto;
}

.admin-simple-header {
    margin-bottom: 25px;
}

.admin-simple-header > a:first-child {
    color: var(--muted);
    text-decoration: none;
    font-size: 8px;
}

.admin-search {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.admin-search button,
.admin-search a {
    display: inline-flex;
    align-items: center;
    border: 0;
    padding: 0 15px;
    border-radius: 6px;
    color: var(--white);
    background: var(--blue);
    text-decoration: none;
    font-size: 8px;
}

.admin-search a {
    color: var(--muted);
    background: var(--white);
}

.innovation-form {
    display: grid;
    gap: 18px;
}

.form-section {
    padding: 25px;
    border: 1px solid var(--line);
    background: var(--white);
}

.form-section-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

.form-section-heading > span {
    color: var(--gold);
    font: 800 22px "Plus Jakarta Sans", sans-serif;
}

.form-section-heading small,
.form-section-heading h2 {
    display: block;
    margin: 0;
}

.form-section-heading small {
    color: var(--teal);
    font-size: 7px;
}

.form-section-heading h2 {
    margin-top: 3px;
    color: var(--navy);
    font-size: 17px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-grid .span-2 {
    grid-column: 1 / -1;
}

.innovation-form textarea {
    min-height: 110px;
    resize: vertical;
}

.sticky-form-actions {
    position: sticky;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    padding: 14px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.sticky-form-actions > a {
    color: var(--muted);
    font-size: 8px;
}

.validation-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.validation-picker a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px;
    border: 1px solid var(--line);
    color: var(--ink);
    background: var(--white);
    text-decoration: none;
}

.validation-picker strong,
.validation-picker small {
    display: block;
}

.validation-picker strong {
    font-size: 9px;
}

.validation-picker small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 7px;
}

.validation-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 15px;
    background: var(--navy);
    color: var(--white);
}

.validation-title small,
.validation-title strong {
    display: block;
}

.validation-title small {
    color: #afc4d0;
    font-size: 7px;
}

.validation-title strong {
    margin-top: 3px;
    font-size: 9px;
}

.validation-title a {
    color: var(--gold);
    font-size: 8px;
}

.validation-form {
    display: grid;
    gap: 9px;
}

.validation-form > article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--line);
    background: var(--white);
}

.validation-number {
    color: var(--gold);
    font: 800 19px "Plus Jakarta Sans", sans-serif;
}

.validation-content > strong {
    font-size: 10px;
}

.status-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 12px 0;
}

.status-options input {
    position: absolute;
    opacity: 0;
}

.status-options span {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #667a87;
    font-size: 7px;
    cursor: pointer;
}

.status-options input:checked + span {
    color: var(--white);
    border-color: var(--teal);
    background: var(--teal);
}

@media (max-width: 980px) {
    .nav-links {
        gap: 14px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hero-summary {
        max-width: 560px;
    }

    .metric-grid,
    .admin-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .innovation-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filter-panel {
        grid-template-columns: 1fr 1fr;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-sidebar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    body {
        padding-bottom: 64px;
    }

    .container {
        width: min(100% - 24px, 1180px);
    }

    .government-inner span:first-child {
        display: none;
    }

    .government-inner {
        justify-content: flex-end;
    }

    .navbar {
        min-height: 70px;
    }

    .brand img {
        width: 37px;
        height: 42px;
    }

    .brand strong {
        font-size: 18px;
    }

    .menu-toggle {
        display: grid;
        gap: 4px;
        padding: 8px;
    }

    .menu-toggle span {
        width: 23px;
        height: 2px;
        background: var(--navy);
    }

    .nav-links {
        position: absolute;
        top: 102px;
        left: 12px;
        right: 12px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 8px;
        border: 1px solid var(--line);
        background: var(--white);
        box-shadow: var(--shadow);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 12px;
    }

    .hero,
    .hero-grid {
        min-height: auto;
    }

    .hero-grid {
        padding-block: 70px;
    }

    .hero-overlay {
        background: rgba(3, 29, 51, 0.9);
    }

    .hero h1 {
        font-size: 41px;
        letter-spacing: -2.6px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .completion-visual {
        align-items: flex-start;
        flex-direction: column;
    }

    .metric-grid,
    .chart-grid,
    .agency-ranking,
    .innovation-grid,
    .data-card-grid,
    .survey-layout,
    .detail-hero-grid,
    .admin-metrics,
    .form-grid,
    .validation-picker,
    .detail-sidebar {
        grid-template-columns: 1fr;
    }

    .metric-grid article {
        border-right: 0;
        border-bottom: 1px solid #ded8cb;
    }

    .section {
        padding-block: 62px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-main nav {
        flex-wrap: wrap;
    }

    .footer-bottom {
        gap: 8px;
        flex-direction: column;
    }

    .mobile-bottom-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 120;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -10px 25px rgba(6, 45, 82, 0.08);
    }

    .mobile-bottom-nav a {
        display: grid;
        min-height: 62px;
        place-items: center;
        align-content: center;
        gap: 4px;
        color: #607582;
        text-decoration: none;
        font-size: 7px;
    }

    .mobile-bottom-nav i {
        color: var(--blue);
        font-size: 16px;
    }

    .filter-panel,
    .rekap-filter {
        grid-template-columns: 1fr;
    }

    .filter-actions .button {
        flex: 1;
    }

    .rekap-table,
    .rekap-table tbody,
    .rekap-table tr,
    .rekap-table td {
        display: block;
        width: 100%;
    }

    .rekap-table thead {
        display: none;
    }

    .rekap-table tr {
        padding: 12px;
        border-bottom: 8px solid var(--background);
    }

    .rekap-table td {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 8px;
        border: 0;
        text-align: right;
    }

    .rekap-table td::before {
        content: attr(data-label);
        color: #738792;
        font-weight: 800;
        text-align: left;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .survey-bars > div {
        grid-template-columns: 1fr 32px;
    }

    .survey-bars > div > div {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 360px;
    }

    .login-form-panel > a {
        margin-bottom: 35px;
    }

    .admin-sidebar {
        position: static;
        width: 100%;
    }

    .admin-sidebar nav {
        grid-template-columns: 1fr 1fr;
    }

    .logout-link {
        margin-top: 12px;
    }

    .admin-main {
        margin-left: 0;
        padding: 16px;
    }

    .admin-simple-page {
        padding: 16px;
    }

    .admin-simple-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-search {
        flex-wrap: wrap;
    }

    .admin-search input {
        flex-basis: 100%;
    }

    .form-grid .span-2 {
        grid-column: auto;
    }

    .status-options {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Dashboard data terintegrasi */
.notice-card{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;padding:20px;color:#163a5d;background:#eef7ff;border:1px solid #cfe5f8;border-radius:18px}
.notice-card>i{font-size:24px;color:#1265b0}.notice-card p{margin:5px 0 0}
.compact-filter{grid-template-columns:minmax(260px,2fr) minmax(180px,1fr) auto}
.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:26px 0}
.dashboard-metrics article{display:flex;align-items:center;gap:15px;min-height:118px;padding:22px;background:#fff;border:1px solid #e2eaf2;border-radius:20px;box-shadow:0 12px 30px rgba(20,53,83,.07)}
.dashboard-metrics i{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;color:#fff;background:linear-gradient(145deg,#1265b0,#13a58d);border-radius:15px}
.dashboard-metrics strong{display:block;font-size:clamp(25px,3vw,36px);line-height:1;color:#123553}
.dashboard-metrics span{display:block;margin-top:7px;font-size:13px;color:#65788a}
.dashboard-chart-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-bottom:40px}
.chart-panel{padding:24px;overflow:hidden;background:#fff;border:1px solid #e2eaf2;border-radius:22px;box-shadow:0 14px 35px rgba(20,53,83,.07)}
.chart-full{grid-column:1/-1}.chart-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.chart-heading span{font-size:11px;font-weight:800;letter-spacing:1.4px;color:#13a58d}
.chart-heading h2{margin:4px 0 0;font-size:21px;color:#123553}.chart-heading>i{color:#1265b0;font-size:22px}
.data-line-chart{width:100%;min-height:240px}.data-line-chart line{stroke:#e5edf4;stroke-width:1}
.data-line-chart polyline{fill:none;stroke:#1265b0;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.data-line-chart circle{fill:#13a58d;stroke:#fff;stroke-width:3}
.data-line-chart text{text-anchor:middle;font:700 12px Manrope,sans-serif;fill:#66798a}.data-line-chart .chart-value{fill:#123553}
.pie-layout{display:grid;grid-template-columns:170px 1fr;gap:24px;align-items:center}
.donut-chart{position:relative;width:170px;aspect-ratio:1;border-radius:50%}
.donut-chart:after{content:'';position:absolute;inset:34px;background:#fff;border-radius:50%}
.donut-chart span{position:absolute;z-index:1;inset:0;display:grid;place-items:center;font-size:28px;font-weight:800;color:#123553}
.chart-legend{display:grid;gap:10px}.chart-legend div{display:grid;grid-template-columns:10px 1fr auto;gap:9px;align-items:center;font-size:12px;color:#586d80}
.chart-legend i{width:10px;height:10px;border-radius:50%}.chart-legend strong{color:#123553}
.horizontal-bars{display:grid;gap:14px}.bar-row{display:grid;grid-template-columns:minmax(190px,290px) 1fr 45px;gap:14px;align-items:center}
.bar-row>span{overflow:hidden;font-size:13px;font-weight:700;color:#314f68;text-overflow:ellipsis;white-space:nowrap}
.bar-row>div{height:13px;overflow:hidden;background:#e8eff5;border-radius:999px}.bar-row i{display:block;height:100%;background:linear-gradient(90deg,#1265b0,#13a58d);border-radius:inherit}.bar-row strong{color:#123553;text-align:right}
.table-card{overflow:hidden;background:#fff;border:1px solid #e2eaf2;border-radius:20px;box-shadow:0 12px 30px rgba(20,53,83,.06)}
.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:15px 16px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:top}
.data-table th{font-size:11px;letter-spacing:.6px;color:#607489;background:#f5f8fb}.data-table td{font-size:13px;color:#405b72}.data-table td strong{color:#173c5d}
.source-badge,.year-badge{display:inline-flex;padding:6px 10px;font-size:11px;font-weight:800;color:#1265b0;background:#eaf4fe;border-radius:999px;white-space:nowrap}
.source-badge.validation{color:#087c69;background:#e5f8f3}
@media(max-width:980px){.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-chart-grid{grid-template-columns:1fr}.chart-full{grid-column:auto}}
@media(max-width:640px){.dashboard-metrics{grid-template-columns:1fr;gap:12px}.dashboard-metrics article{min-height:96px;padding:17px}.chart-panel{padding:18px;border-radius:18px}.pie-layout{grid-template-columns:1fr;justify-items:center}.chart-legend{width:100%}.bar-row{grid-template-columns:1fr 38px}.bar-row>span{grid-column:1/-1}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{min-width:760px}.compact-filter{grid-template-columns:1fr}}

.wide-admin-main{max-width:1500px}.legacy-validation-form{padding-bottom:92px}
.form-section-heading p{margin:5px 0 0;color:#708396;font-size:12px}
.form-grid label>span b{color:#d14343}.form-grid label>span em{margin-left:6px;color:#6c8193;font-size:10px;font-style:normal;font-weight:700}
.inline-document-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.inline-document-card{display:grid;grid-template-columns:34px minmax(0,1fr) 145px;gap:10px;align-items:start;padding:13px;border:1px solid #dce6ef;border-radius:12px;background:#fff}
.document-number{display:grid;place-items:center;width:29px;height:29px;color:#075789;background:#e8f5fc;border-radius:8px;font-size:10px;font-weight:800}
.document-title{min-width:0;padding-top:2px}.document-title strong,.document-title small{display:block}.document-title strong{color:#153b5b;font-size:12px}.document-title small{margin-top:4px;color:#7b8c9b;font-size:10px}
.inline-document-card select{width:100%;min-height:35px;padding:7px 9px;border:1px solid #ccdbe7;border-radius:8px;background:#fff;font-size:10px}
.inline-document-card>input{grid-column:2/-1;min-height:34px;padding:7px 10px;border:1px solid #d5e1eb;border-radius:8px;font-size:10px}
.optional-substance{margin-top:18px;overflow:hidden;background:#fff;border:1px solid #dce6ef;border-radius:16px}
.optional-substance summary{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:18px;cursor:pointer;list-style:none}
.optional-substance summary::-webkit-details-marker{display:none}.optional-substance summary>span{display:grid;place-items:center;width:38px;height:38px;color:#fff;background:#1265b0;border-radius:10px;font-weight:800}
.optional-substance summary small,.optional-substance summary strong,.optional-substance summary p{display:block;margin:0}.optional-substance summary small{color:#13a58d;font-size:10px;font-weight:800;letter-spacing:1px}.optional-substance summary strong{margin-top:2px;color:#153b5b;font-size:17px}.optional-substance summary p{margin-top:4px;color:#718496;font-size:11px}.optional-substance summary>b{color:#1265b0;font-size:11px}
.optional-substance-content{padding:0 18px 20px;border-top:1px solid #edf2f6}.optional-substance-content .form-grid{padding-top:18px}
.legacy-save-bar{left:0;right:0;z-index:10}.legacy-save-bar>span{color:#617789;font-size:11px}.legacy-save-bar>div{display:flex;align-items:center;gap:16px}.legacy-save-bar>div>a{color:#536b7e;text-decoration:none;font-size:12px;font-weight:700}
@media(max-width:850px){.inline-document-grid{grid-template-columns:1fr}.inline-document-card{grid-template-columns:34px minmax(0,1fr) 125px}}
@media(max-width:600px){.inline-document-card{grid-template-columns:32px 1fr}.inline-document-card select,.inline-document-card>input{grid-column:2/-1}.optional-substance summary{grid-template-columns:38px 1fr}.optional-substance summary>b{display:none}.legacy-save-bar{align-items:stretch;flex-direction:column}.legacy-save-bar>div{justify-content:space-between}}

.regional-index-section{background:linear-gradient(180deg,#f7fbfe,#eef6fb)}
.regional-index-layout{display:grid;grid-template-columns:1fr 280px;gap:22px;align-items:start}
.regional-rank-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.regional-rank-bars article{display:grid;grid-template-columns:34px 1fr 64px;gap:12px;align-items:center;padding:15px;background:#fff;border:1px solid #dce8f1;border-radius:14px}
.regional-rank-bars article>span{display:grid;place-items:center;width:30px;height:30px;color:#1265b0;background:#e9f4fc;border-radius:9px;font-size:11px;font-weight:800}
.regional-rank-bars strong{display:block;overflow:hidden;color:#183e5d;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.regional-rank-bars article div div{height:7px;margin-top:8px;overflow:hidden;background:#e8eef3;border-radius:99px}
.regional-rank-bars article i{display:block;height:100%;background:linear-gradient(90deg,#1265b0,#13a58d);border-radius:inherit}
.regional-rank-bars article>b{color:#1265b0;font-size:15px;text-align:right}
.regional-index-summary{padding:28px;color:#fff;background:linear-gradient(145deg,#073f70,#096d82);border-radius:20px;box-shadow:0 15px 35px rgba(6,58,92,.18)}
.regional-index-summary small{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#9ddfd5}.regional-index-summary>strong{display:block;margin:6px 0;font-size:48px}.regional-index-summary p{color:#d1e3ec;font-size:12px;line-height:1.7}.regional-index-summary a{display:inline-block;margin-top:12px;color:#f5c85d;font-size:11px;font-weight:800;text-decoration:none}
.regional-index-empty{display:flex;gap:18px;align-items:center;padding:28px;background:#fff;border:1px dashed #bfd4e4;border-radius:18px}.regional-index-empty>i{font-size:30px;color:#1265b0}.regional-index-empty strong{color:#173d5d}.regional-index-empty p{margin:5px 0 0;color:#6e8293;font-size:12px}
@media(max-width:900px){.regional-index-layout{grid-template-columns:1fr}.regional-index-summary{order:-1}.regional-rank-bars{grid-template-columns:1fr}}

.regional-index-heading{align-items:flex-end}
.index-year-picker{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;border:1px solid #d6e4ee;border-radius:12px}
.index-year-picker label{font-size:11px;font-weight:800;color:#536d82}.index-year-picker select{min-width:100px;padding:8px 30px 8px 10px;border:1px solid #cbdbe6;border-radius:8px;color:#153d5d;background:#f8fbfd;font-weight:800}
.cluster-chart-card{padding:25px;background:#fff;border:1px solid #dce7ef;border-radius:22px;box-shadow:0 16px 40px rgba(22,59,89,.08)}
.cluster-chart-meta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.cluster-chart-meta p{margin:0;color:#63798b;font-size:12px}
.cluster-legend{display:flex;gap:16px}.cluster-legend span{display:flex;align-items:center;gap:7px;color:#4c6479;font-size:11px;font-weight:800}.cluster-legend i{width:18px;height:8px;border-radius:99px}.cluster-legend .current{background:#1265b0}.cluster-legend .previous{background:#48b9a6}
.cluster-axis{display:grid;grid-template-columns:repeat(6,1fr);margin:0 58px 9px 250px;color:#8292a0;font-size:9px}.cluster-axis span{text-align:right}
.cluster-bars{display:grid;gap:11px}.cluster-row{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:center;padding:9px 10px;border-radius:12px}.cluster-row:nth-child(odd){background:#f8fbfd}
.cluster-label{display:grid;grid-template-columns:29px 1fr;gap:9px;align-items:center}.cluster-label span{display:grid;place-items:center;width:27px;height:27px;color:#1265b0;background:#e7f3fc;border-radius:8px;font-size:10px;font-weight:800}.cluster-label div{min-width:0}.cluster-label small{display:block;margin-bottom:2px;color:#138d7a;font-size:7px;font-weight:800;letter-spacing:.8px}.cluster-label strong{display:block;overflow:hidden;color:#244760;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.cluster-series{display:grid;gap:5px}.cluster-track{position:relative;height:15px;background:repeating-linear-gradient(90deg,#e8eef3 0,#e8eef3 1px,transparent 1px,transparent 20%),#f2f6f9;border-radius:4px}.cluster-track i{display:block;height:100%;border-radius:4px 8px 8px 4px}.cluster-current{background:linear-gradient(90deg,#0b5599,#2f80d0)}.cluster-previous{background:linear-gradient(90deg,#15917d,#5ac7b4)}.cluster-track b{position:absolute;top:50%;transform:translate(7px,-50%);color:#173f5e;font-size:9px;white-space:nowrap}.cluster-track small{position:absolute;inset:0;display:flex;align-items:center;padding-left:8px;color:#97a5b0;font-size:8px}
.cluster-track.secondary{height:11px}
@media(max-width:760px){.regional-index-heading{align-items:flex-start}.index-year-picker{margin-top:15px}.cluster-chart-card{padding:16px}.cluster-chart-meta{align-items:flex-start;flex-direction:column}.cluster-axis{display:none}.cluster-row{grid-template-columns:1fr;gap:8px}.cluster-label strong{white-space:normal}.cluster-series{padding-left:36px}.cluster-track b{font-size:8px}}

.save-year-field{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#eef7fd;border:1px solid #cfe2ef;border-radius:12px}
.save-year-field span{color:#46667e;font-size:10px;font-weight:800}.save-year-field input{width:100px;padding:8px 10px;border:1px solid #bdd3e2;border-radius:8px;color:#123d5e;background:#fff;font-size:15px;font-weight:800}
.year-warning{margin:0 20px 18px;padding:12px 14px;color:#765d20;background:#fff8dc;border:1px solid #f0dc8d;border-radius:10px;font-size:11px}.year-warning strong{color:#5e4712}
@media(max-width:650px){.admin-card-heading{align-items:flex-start;flex-direction:column}.save-year-field{width:100%;justify-content:space-between}}

.validation-progress-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:22px}.validation-progress-heading>div>span{color:#13a58d;font-size:10px;font-weight:800;letter-spacing:1.4px}.validation-progress-heading h2{margin:5px 0 7px;color:#123b5c;font-size:clamp(25px,3vw,38px)}.validation-progress-heading p{max-width:680px;margin:0;color:#6c8193;font-size:12px;line-height:1.7}
.validation-year-picker{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #d6e4ee;border-radius:12px}.validation-year-picker label{color:#526d82;font-size:10px;font-weight:800}.validation-year-picker select{padding:8px 28px 8px 10px;border:1px solid #c7dae7;border-radius:8px;color:#123e60;background:#f8fbfd;font-weight:800}
.validation-overview{display:grid;grid-template-columns:130px 1fr;gap:25px;align-items:center;margin-bottom:22px;padding:24px;color:#fff;background:linear-gradient(135deg,#073f70,#087a85);border-radius:22px;box-shadow:0 16px 35px rgba(7,63,112,.17)}
.overall-validation-donut{display:grid;place-items:center;width:125px;aspect-ratio:1;background:conic-gradient(#f5c85d 0 var(--progress),rgba(255,255,255,.17) var(--progress) 360deg);border-radius:50%}.overall-validation-donut:before{content:'';grid-area:1/1;width:88px;aspect-ratio:1;background:#07546f;border-radius:50%}.overall-validation-donut>div{z-index:1;grid-area:1/1;text-align:center}.overall-validation-donut strong,.overall-validation-donut small{display:block}.overall-validation-donut strong{font-size:26px}.overall-validation-donut small{margin-top:3px;color:#bce1e1;font-size:7px;font-weight:800;letter-spacing:.7px}
.validation-overview>div:last-child>span{color:#9ee0d5;font-size:9px;font-weight:800;letter-spacing:1.2px}.validation-overview h3{margin:5px 0 8px;font-size:22px}.validation-overview p{margin:0;color:#d3e5eb;font-size:12px;line-height:1.7}
.opd-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:42px}.opd-progress-card{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;padding:20px;background:#fff;border:1px solid #dce7ef;border-radius:18px;box-shadow:0 12px 28px rgba(20,53,83,.06)}
.opd-donut{display:grid;place-items:center;width:104px;aspect-ratio:1;border-radius:50%}.opd-donut:before{content:'';grid-area:1/1;width:72px;aspect-ratio:1;background:#fff;border-radius:50%}.opd-donut>div{z-index:1;grid-area:1/1}.opd-donut strong{color:#123e5e;font-size:20px}
.opd-progress-content{min-width:0}.opd-progress-content>small{color:#13a58d;font-size:8px;font-weight:800;letter-spacing:1px}.opd-progress-content h3{margin:4px 0;color:#173d5d;font-size:14px}.opd-progress-content p{margin:0;color:#6f8394;font-size:10px}.opd-progress-content>a{display:inline-block;margin-top:11px;color:#1265b0;font-size:10px;font-weight:800;text-decoration:none}
.opd-status-legend{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}.opd-status-legend span{display:flex;align-items:center;gap:4px;color:#667c8e;font-size:8px}.opd-status-legend i{width:7px;height:7px;border-radius:50%}.opd-status-legend .good{background:#13a58d}.opd-status-legend .warning{background:#f2b84b}.opd-status-legend .empty{background:#dce4ea}
@media(max-width:850px){.opd-progress-grid{grid-template-columns:1fr}}
@media(max-width:600px){.validation-progress-heading{align-items:flex-start;flex-direction:column}.validation-year-picker{width:100%;justify-content:space-between}.validation-overview{grid-template-columns:1fr;text-align:center;justify-items:center}.opd-progress-card{grid-template-columns:85px 1fr;padding:15px}.opd-donut{width:82px}.opd-donut:before{width:57px}.opd-donut strong{font-size:16px}}

/* Validasi publik: pola kerja aplikasi lama */
.validation-public-hero{padding:52px 0 70px;color:#fff;background:linear-gradient(120deg,#073f70,#08738b)}
.validation-hero-grid{display:grid;grid-template-columns:1fr 390px;gap:55px;align-items:center}
.validation-hero-copy>small{color:#99dfd8;font-size:9px;font-weight:800;letter-spacing:1.2px}.validation-hero-copy h1{margin:8px 0 12px;font-size:clamp(34px,4vw,52px);letter-spacing:-2px}.validation-hero-copy>p{max-width:720px;margin:0;color:#d4e8ef;font-size:13px;line-height:1.7}
.validation-public-search{display:grid;grid-template-columns:minmax(180px,1fr) minmax(190px,.8fr) 90px auto;margin-top:25px;padding:6px;background:#fff;border-radius:13px;box-shadow:0 15px 35px rgba(0,31,54,.22)}
.validation-public-search input,.validation-public-search select{min-width:0;height:44px;padding:0 11px;color:#213f58;background:#fff;border:0;border-right:1px solid #e0e8ee;outline:0;font-size:11px}.validation-public-search button{padding:0 17px;color:#fff;background:#0b9476;border:0;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer}
.validation-achievement-card{padding:18px;color:#173d59;background:#fff;border-radius:18px;box-shadow:0 20px 45px rgba(0,34,59,.3)}.validation-chart-head{display:flex;justify-content:space-between;gap:15px;padding-bottom:12px;border-bottom:1px solid #e2eaf0}.validation-chart-head small{color:#1265b0;font-size:7px;font-weight:800;letter-spacing:1px}.validation-chart-head h2{max-width:240px;margin:4px 0 0;font-size:14px}.validation-chart-head>a{height:max-content;padding:6px 8px;color:#1265b0;border:1px solid #c7d9e5;border-radius:7px;font-size:8px;font-weight:800;text-decoration:none}
.validation-chart-body{display:grid;grid-template-columns:124px 1fr;gap:17px;align-items:center;padding-top:15px}.validation-main-donut{display:grid;place-items:center;width:120px;aspect-ratio:1;background:conic-gradient(#0b9272 0 var(--available),#d99220 var(--available) var(--revision),#d14b4b var(--revision) 360deg);border-radius:50%}.validation-main-donut>div{display:flex;align-items:center;justify-content:center;flex-direction:column;width:84px;aspect-ratio:1;background:#fff;border-radius:50%}.validation-main-donut strong{font-size:25px;color:#073f70}.validation-main-donut span{margin-top:3px;color:#748695;font-size:7px;text-transform:uppercase}
.validation-main-legend p{display:grid;grid-template-columns:8px 1fr auto;gap:7px;align-items:center;margin:0;padding:6px 0;border-bottom:1px solid #edf2f5}.validation-main-legend p i{width:7px;height:7px;border-radius:50%}.validation-main-legend .available{background:#0b9272}.validation-main-legend .missing{background:#d14b4b}.validation-main-legend .revision{background:#d99220}.validation-main-legend p span{color:#6d8091;font-size:8px}.validation-main-legend p b{font-size:10px}.validation-main-legend>small{display:block;margin-top:7px;color:#8797a4;font-size:7px}.validation-main-legend>a{display:inline-flex;margin-top:8px;padding:6px 8px;color:#1265b0;background:#eaf4fa;border-radius:7px;font-size:7px;font-weight:800;text-decoration:none}
.validation-public-content{background:#f2f7fa}.validation-public-grid{position:relative;display:grid;grid-template-columns:310px 1fr;gap:18px;margin-top:-28px;padding-bottom:45px}.validation-innovation-list,.validation-detail-panel{overflow:hidden;background:#fff;border:1px solid #dce6ed;border-radius:17px;box-shadow:0 10px 30px rgba(20,54,80,.07)}.validation-innovation-list{align-self:start;max-height:730px;padding:17px;overflow-y:auto}
.validation-list-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px}.validation-list-heading small{color:#1265b0;font-size:8px;font-weight:800;letter-spacing:1px}.validation-list-heading h2{margin:3px 0;font-size:17px}.validation-list-heading>b{padding:5px 8px;color:#1265b0;background:#eaf4fb;border-radius:99px;font-size:9px}
.validation-list-item{display:flex;justify-content:space-between;gap:12px;padding:14px 5px;border-top:1px solid #e8eef2;color:inherit;text-decoration:none}.validation-list-item span{min-width:0}.validation-list-item strong{display:block;color:#183d5b;font-size:11px;line-height:1.45}.validation-list-item small{display:block;margin-top:4px;color:#758797;font-size:9px;line-height:1.4}.validation-list-item>b{color:#0b9272;font-size:12px}.validation-list-item.active{margin:2px -6px;padding:14px 11px;background:#eaf5fb;border:0;border-radius:10px}
.validation-detail-head{display:flex;justify-content:space-between;gap:20px;padding:24px 26px;border-bottom:1px solid #dfe8ef}.validation-detail-head>div:first-child>span{display:inline-block;padding:4px 7px;color:#1265b0;background:#eaf4fb;border-radius:6px;font-size:8px;font-weight:800}.validation-detail-head h2{margin:8px 0 4px;color:#153b59;font-size:20px}.validation-detail-head p{margin:0;color:#718596;font-size:10px}.validation-detail-head>div:last-child{display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:110px;border-left:1px solid #dfe8ef}.validation-detail-head>div:last-child strong{color:#073f70;font-size:28px}.validation-detail-head>div:last-child small{color:#8292a0;font-size:7px}
.validation-detail-summary{display:flex;align-items:center;gap:17px;padding:18px 26px;background:#f7fbfd}.validation-detail-ring{display:grid;place-items:center;width:78px;aspect-ratio:1;background:conic-gradient(#0b9272 var(--percent),#dce8e4 0);border-radius:50%}.validation-detail-ring>span{display:flex;align-items:center;justify-content:center;flex-direction:column;width:58px;aspect-ratio:1;background:#fff;border-radius:50%}.validation-detail-ring strong{font-size:16px}.validation-detail-ring small{color:#728493;font-size:7px}.validation-detail-summary h3{margin:0 0 5px;font-size:14px}.validation-detail-summary p{margin:0;color:#718494;font-size:9px}
.validation-doc-heading{display:flex;justify-content:space-between;align-items:center;padding:18px 26px 8px}.validation-doc-heading h3{font-size:14px}.validation-doc-heading>div{display:flex;gap:10px}.validation-doc-heading span{display:flex;align-items:center;gap:4px;color:#718493;font-size:7px}.validation-doc-heading i{width:6px;height:6px;border-radius:50%}.validation-doc-heading .available{background:#0b9272}.validation-doc-heading .missing{background:#d14b4b}.validation-doc-heading .revision{background:#d99220}
.validation-document-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 25px 25px}.validation-document-grid article{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;min-height:64px;padding:10px;border:1px solid #dce6ed;border-left:4px solid #dce6ed;border-radius:10px}.validation-document-grid article.available{border-left-color:#0b9272}.validation-document-grid article.missing{border-left-color:#d14b4b}.validation-document-grid article.revision{border-left-color:#d99220}.validation-document-grid article>span{display:grid;place-items:center;width:30px;height:30px;color:#1265b0;background:#eaf4fb;border-radius:8px;font-size:9px;font-weight:800}.validation-document-grid strong,.validation-document-grid small{display:block}.validation-document-grid strong{color:#173d5b;font-size:10px}.validation-document-grid small{margin-top:3px;color:#788a99;font-size:8px;line-height:1.35}.validation-document-grid article>b{padding:5px 7px;border-radius:99px;font-size:7px;white-space:nowrap}.validation-document-grid .available>b{color:#087257;background:#e3f5ef}.validation-document-grid .missing>b{color:#a53b3b;background:#fce9e9}.validation-document-grid .revision>b{color:#946013;background:#fff1d8}.validation-empty{padding:25px;color:#728595;font-size:11px}.validation-empty.large{padding:90px 25px;text-align:center}
@media(max-width:1000px){.validation-hero-grid{grid-template-columns:1fr 350px;gap:24px}.validation-public-search{grid-template-columns:1fr 1fr}.validation-public-search button{height:42px}.validation-public-grid{grid-template-columns:280px 1fr}.validation-document-grid{grid-template-columns:1fr}}
@media(max-width:800px){.validation-hero-grid{grid-template-columns:1fr}.validation-public-grid{grid-template-columns:1fr;margin-top:18px}.validation-innovation-list{max-height:330px}.validation-public-search{grid-template-columns:1fr 1fr}.validation-public-search button{grid-column:1/-1}}
@media(max-width:560px){.validation-public-hero{padding:35px 0 42px}.validation-public-search{grid-template-columns:1fr}.validation-public-search button{grid-column:auto}.validation-chart-body{grid-template-columns:105px 1fr}.validation-main-donut{width:102px}.validation-main-donut>div{width:72px}.validation-detail-head{display:block;padding:19px 15px}.validation-detail-head>div:last-child{align-items:flex-start;margin-top:14px;padding-top:12px;border-left:0;border-top:1px solid #dfe8ef}.validation-detail-summary{padding:16px}.validation-doc-heading{display:block;padding:16px 15px 7px}.validation-doc-heading>div{flex-wrap:wrap;margin-top:8px}.validation-document-grid{padding:0 12px 18px}.validation-document-grid article{grid-template-columns:32px 1fr}.validation-document-grid article>b{grid-column:2;width:max-content}}

/* Peringkat OPD pada rekap validasi */
.rekap-ranking-hero{padding:34px 0 58px;color:#fff;background:linear-gradient(120deg,#073f70,#08718a)}
.rekap-ranking-layout{display:grid;grid-template-columns:390px 1fr;gap:55px;align-items:center}.rekap-ranking-copy>span,.opd-vertical-ranking header span{color:#9cddd7;font-size:8px;font-weight:800;letter-spacing:1.2px}.rekap-ranking-copy h1{margin:10px 0 10px;font-size:clamp(34px,4vw,50px);line-height:1.05}.rekap-ranking-copy>p{margin:0;color:#d5e8ee;font-size:12px;line-height:1.7}.rekap-ranking-copy>div{display:inline-flex;flex-direction:column;margin-top:18px;padding:10px 12px;border:1px solid rgba(255,255,255,.24);border-radius:9px;background:rgba(255,255,255,.06)}.rekap-ranking-copy>div strong{color:#9fddd8;font-size:8px}.rekap-ranking-copy>div small{margin-top:3px;color:#fff;font-size:8px}
.opd-vertical-ranking{padding:20px 22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:18px}.opd-vertical-ranking header{display:flex;justify-content:space-between;gap:20px}.opd-vertical-ranking header h2{margin:4px 0 0;font-size:16px}.opd-vertical-ranking header>small{color:#c7e0e7;font-size:7px}
.opd-vertical-chart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:end;height:190px;margin-top:12px}.opd-vertical-chart article{display:grid;grid-template-rows:18px 95px 20px 31px 16px;justify-items:center;min-width:0;text-align:center}.opd-vertical-chart article>strong{font-size:10px}.opd-vertical-chart article>div{display:flex;align-items:flex-end;width:30px;height:95px;background:rgba(255,255,255,.12);border-radius:8px 8px 2px 2px;overflow:hidden}.opd-vertical-chart article i{display:block;width:100%;background:linear-gradient(180deg,#45d9b2,#04a56f);border-radius:8px 8px 2px 2px}.opd-vertical-chart article>b{display:grid;place-items:center;width:18px;height:18px;margin-top:2px;color:#073f70;background:#fff;border-radius:50%;font-size:8px}.opd-vertical-chart article>span{overflow:hidden;width:100%;font-size:7px;font-weight:800;line-height:1.25}.opd-vertical-chart article>small{color:#b9d8e1;font-size:6px;white-space:nowrap}
@media(max-width:900px){.rekap-ranking-layout{grid-template-columns:1fr;gap:25px}}@media(max-width:600px){.rekap-ranking-hero{padding:30px 0 40px}.opd-vertical-ranking{padding:16px;overflow-x:auto}.opd-vertical-chart{min-width:620px}.rekap-ranking-copy h1{font-size:34px}}

.landing-ranking-actions{display:flex;align-items:center;gap:18px}.landing-ranking-actions form{display:flex;align-items:center;gap:8px;padding:7px 9px;background:#fff;border:1px solid #d6e3ec;border-radius:10px}.landing-ranking-actions label{color:#62798b;font-size:9px;font-weight:800}.landing-ranking-actions select{padding:6px 25px 6px 8px;color:#123d5e;background:#f8fbfd;border:1px solid #cadbe6;border-radius:7px;font-size:10px;font-weight:800}
@media(max-width:620px){.landing-ranking-actions{align-items:flex-start;flex-direction:column;gap:10px}}

/* Formulir survei publik */
.public-survey-section{background:#f3f7fa}.public-survey-layout{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start}.survey-introduction{position:sticky;top:120px;padding:26px;color:#fff;background:linear-gradient(145deg,#073f70,#087b84);border-radius:20px;box-shadow:0 16px 35px rgba(7,63,112,.16)}.survey-introduction>span{color:#9fe0d7;font-size:9px;font-weight:800;letter-spacing:1.2px}.survey-introduction h2{margin:7px 0 10px;font-size:25px;line-height:1.2}.survey-introduction p{color:#d5e7ec;font-size:11px;line-height:1.75}.survey-introduction ul{display:grid;gap:9px;padding-left:17px;color:#d5e7ec;font-size:10px;line-height:1.5}.survey-introduction>a{display:inline-block;margin-top:13px;color:#f3c553;font-size:10px;font-weight:800;text-decoration:none}
.public-survey-form{display:grid;gap:15px}.public-survey-form>section{padding:23px;background:#fff;border:1px solid #dce6ed;border-radius:18px;box-shadow:0 10px 28px rgba(20,54,80,.05)}.survey-form-heading{display:flex;align-items:center;gap:11px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #e5edf2}.survey-form-heading>span{display:grid;place-items:center;width:31px;height:31px;color:#fff;background:#1265b0;border-radius:9px;font-size:9px;font-weight:800}.survey-form-heading small{color:#13a58d;font-size:8px;font-weight:800;letter-spacing:1px}.survey-form-heading h2{margin:3px 0 0;color:#163d5c;font-size:16px}
.helpfulness-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.helpfulness-options input,.survey-question input{position:absolute;opacity:0;pointer-events:none}.helpfulness-options label>span{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:100px;padding:12px;color:#526c80;background:#f7fafc;border:1px solid #d9e5ed;border-radius:13px;cursor:pointer;font-size:10px;font-weight:700}.helpfulness-options b{margin-bottom:7px;font-size:25px}.helpfulness-options input:checked+span{color:#08735f;background:#e7f7f2;border-color:#13a58d;box-shadow:0 0 0 2px rgba(19,165,141,.12)}
.survey-question{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:center;margin:0;padding:13px 0;border:0;border-bottom:1px solid #e9eff3}.survey-question legend{display:contents;color:#304f67;font-size:11px;font-weight:700}.survey-question>div{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.survey-question label span{display:grid;place-items:center;height:34px;color:#536f83;background:#f5f8fa;border:1px solid #d8e4ec;border-radius:8px;cursor:pointer;font-size:10px;font-weight:800}.survey-question input:checked+span{color:#fff;background:#1265b0;border-color:#1265b0}.survey-scale-caption{display:flex;justify-content:space-between;margin-top:9px;color:#8192a0;font-size:8px}
.survey-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.survey-profile-grid label,.survey-suggestion-field{display:grid;gap:7px;color:#38576e;font-size:10px;font-weight:800}.survey-profile-grid em,.survey-suggestion-field em{color:#8192a0;font-size:8px;font-style:normal}.survey-profile-grid select,.survey-suggestion-field textarea{width:100%;padding:11px;border:1px solid #d3e1ea;border-radius:9px;background:#fff;font:inherit}.survey-suggestion-field{margin-top:14px}.survey-suggestion-field textarea{resize:vertical;font-weight:400}.survey-submit-row{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;color:#d8e7ec;background:#123e5c;border-radius:14px}.survey-submit-row p{margin:0;font-size:9px}.survey-honeypot{position:absolute!important;left:-9999px!important}
.survey-notice{margin-top:18px;padding:13px 16px;color:#765d20;background:#fff7d8;border:1px solid #eed782;border-radius:10px;font-size:11px}.survey-notice.success{color:#08705b;background:#e5f6f0;border-color:#a8ddcc}.survey-overall .button{margin-top:15px;color:#fff;border-color:rgba(255,255,255,.45)}
@media(max-width:850px){.public-survey-layout{grid-template-columns:1fr}.survey-introduction{position:static}.survey-question{grid-template-columns:1fr}}@media(max-width:560px){.helpfulness-options{grid-template-columns:1fr}.helpfulness-options label>span{min-height:70px}.survey-profile-grid{grid-template-columns:1fr}.survey-submit-row{align-items:stretch;flex-direction:column;gap:12px}.survey-submit-row .button{width:100%}}

/* Survei mengambang */
.survey-floating-button{position:fixed;right:24px;bottom:25px;z-index:70;display:flex;align-items:center;gap:9px;padding:14px 21px;color:#fff;background:linear-gradient(135deg,#079471,#0aa061);border:0;border-radius:999px;box-shadow:0 16px 38px rgba(4,114,82,.32);font:800 13px Manrope,sans-serif;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.survey-floating-button:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(4,114,82,.4)}.survey-floating-button span{font-size:17px}
.survey-floating-overlay{position:fixed;inset:0;z-index:78;background:rgba(3,26,44,.48);backdrop-filter:blur(2px)}
.survey-floating-panel{position:fixed;z-index:80;top:0;right:0;width:min(460px,100%);height:100dvh;overflow-y:auto;padding:0 22px 28px;background:#f4f8fa;box-shadow:-18px 0 50px rgba(3,30,50,.22);transform:translateX(105%);visibility:hidden;transition:transform .28s ease,visibility .28s}.survey-floating-panel.open{transform:translateX(0);visibility:visible}.survey-panel-open{overflow:hidden}
.survey-floating-panel>header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:15px;margin:0 -22px 18px;padding:22px;color:#fff;background:linear-gradient(135deg,#073f70,#087b84)}.survey-floating-panel>header small{color:#9fe0d7;font-size:8px;font-weight:800;letter-spacing:1px}.survey-floating-panel>header h2{margin:5px 0 5px;font-size:19px}.survey-floating-panel>header p{margin:0;color:#d3e7ec;font-size:9px}.survey-floating-panel>header button{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:50%;font-size:22px;cursor:pointer}
.survey-floating-panel form{display:grid;gap:12px}.survey-floating-panel fieldset{margin:0;padding:14px;background:#fff;border:1px solid #dbe6ed;border-radius:13px}.survey-floating-panel legend{padding:0 5px;color:#284a63;font-size:10px;font-weight:800}
.floating-helpfulness>div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.floating-helpfulness input,.floating-survey-question input{position:absolute;opacity:0}.floating-helpfulness label>span{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:65px;color:#597184;background:#f7fafc;border:1px solid #dbe6ed;border-radius:10px;cursor:pointer;font-size:8px;font-weight:700}.floating-helpfulness b{margin-bottom:3px;font-size:20px}.floating-helpfulness input:checked+span{color:#08735f;background:#e4f6f0;border-color:#13a58d}
.floating-survey-question{display:grid;grid-template-columns:1fr 190px;gap:10px;align-items:center}.floating-survey-question legend{display:contents}.floating-survey-question>div{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.floating-survey-question label span{display:grid;place-items:center;height:30px;color:#587287;background:#f5f8fa;border:1px solid #d8e4ec;border-radius:7px;cursor:pointer;font-size:9px;font-weight:800}.floating-survey-question input:checked+span{color:#fff;background:#1265b0;border-color:#1265b0}.floating-scale-caption{display:flex;justify-content:flex-end;gap:45px;padding:0 15px;color:#8394a1;font-size:7px}
.floating-survey-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.floating-survey-fields label,.floating-suggestion{display:grid;gap:6px;color:#385970;font-size:9px;font-weight:800}.floating-survey-fields em,.floating-suggestion em{color:#8495a3;font-size:7px;font-style:normal}.floating-survey-fields select,.floating-suggestion textarea{width:100%;padding:10px;color:#334f64;background:#fff;border:1px solid #d4e2ea;border-radius:9px;font:inherit}.floating-suggestion textarea{resize:vertical;font-weight:400}
.floating-survey-actions{position:sticky;bottom:-28px;display:flex;justify-content:space-between;align-items:center;margin:5px -22px -28px;padding:14px 22px;background:#123e5c;box-shadow:0 -8px 20px rgba(18,62,92,.12)}.floating-survey-actions a{color:#d5e6ec;font-size:9px;font-weight:700;text-decoration:none}.floating-survey-actions button{padding:11px 16px;color:#fff;background:#0b9876;border:0;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}
@media(max-width:600px){.survey-floating-button{right:14px;bottom:78px;padding:12px 16px;font-size:11px}.survey-floating-panel{padding-inline:15px}.survey-floating-panel>header{margin-inline:-15px}.floating-survey-question{grid-template-columns:1fr}.floating-survey-fields{grid-template-columns:1fr}.floating-survey-actions{margin-inline:-15px;padding-inline:15px}}
@media print{.survey-floating-button,.survey-floating-overlay,.survey-floating-panel{display:none!important}}

@media print {
    .site-header,
    .site-footer,
    .mobile-bottom-nav,
    .filter-panel,
    .print-button {
        display: none !important;
    }

    body {
        padding: 0;
    }

    .section {
        padding: 0;
    }
}