:root {
    --primary:#1a3a5c;
    --accent:#d4a017;
    --soft:#f5f8fb;
    --ink:#243447;
    --color-background-secondary:#eef4f8;
    --color-background-info:#eef6ff;
    --color-text-secondary:#60758a;
    --color-text-tertiary:#7c8da0;
    --color-border-tertiary:#d7e2ec;
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:48px;
    --radius-card:10px;
    --transition-fast:.15s ease;
    --max-content-width:1100px;
}

* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
body { background:var(--soft); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.55; }
img, video { max-width:100%; }
.container { max-width:var(--max-content-width); }
a, button, .btn, input, select, summary, label { transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.btn, .form-control, .form-select { min-height:44px; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:focus-visible, .btn-outline-primary:focus-visible, .public-login-link:focus-visible, .public-nav-link:focus-visible, .public-nav-button:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; }
.badge { font-size:max(11px, .72rem); }

.navbar-public { background:#122844; }
.navbar-public .container { position:relative; }
.brand-icon { width:40px; height:40px; border-radius:13px; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; color:var(--primary); flex:0 0 auto; }
.public-nav-toggle { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.public-nav-button { min-width:44px; min-height:44px; margin-left:auto; border:.5px solid rgba(255,255,255,.38); border-radius:6px; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.public-nav-menu { position:absolute; left:12px; right:12px; top:calc(100% + 8px); z-index:30; display:none; flex-direction:column; gap:8px; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#122844; box-shadow:0 16px 36px rgba(18,40,68,.28); }
.public-nav-toggle:checked ~ .public-nav-menu { display:flex; }
.public-nav-link, .public-login-link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:6px; font-weight:600; }
.public-nav-link { color:rgba(255,255,255,.86); }
.public-nav-link:active { color:#fff; background:rgba(255,255,255,.08); }
.public-login-link { color:#fff; border:.5px solid rgba(255,255,255,.72); padding:6px 14px; }
.public-login-link:active { background:rgba(255,255,255,.12); color:#fff; }

.detail-hero { background:linear-gradient(135deg,#1a3a5c,#2a5a8c); color:#fff; border-bottom:1px solid rgba(18,40,68,.18); }
.detail-hero h1 { line-height:1.16; }
.hero-summary { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-card); }
.hero-card.public-info-box { background:var(--color-background-info); color:var(--ink); border:1px solid #d9e9fb; box-shadow:0 10px 26px rgba(26,58,92,.08); }
.public-info-summary { list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; min-height:44px; }
.public-info-summary::-webkit-details-marker { display:none; }
.public-info-summary::after { content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-left:auto; color:var(--color-text-secondary); font-size:12px; }
.public-info-box[open] .public-info-summary { margin-bottom:14px; }
.public-info-box[open] .public-info-summary::after { transform:rotate(180deg); }
.public-info-list { color:var(--color-text-secondary); }
.content-card { border:0; border-radius:var(--radius-card); box-shadow:0 12px 32px rgba(26,58,92,.08); }
.detail-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:#718096; }
.detail-copy { white-space:pre-wrap; line-height:1.75; }
.status-step { border-left:4px solid var(--accent); }
.public-documentation img,.public-documentation video { width:100%; aspect-ratio:16/9; height:auto !important; object-fit:contain !important; background:#f8f9fa; border-radius:var(--radius-card); }
.public-documentation a { min-height:140px; }
.empty-documentation { padding:3rem 1rem; border:1px dashed #cbd9e6; border-radius:var(--radius-card); background:#f8fafc; color:#718096; text-align:center; }
.info-list { display:grid; gap:0; }
.info-list > div { display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid #edf2f7; }
.info-list > div:last-child { border-bottom:0; padding-bottom:0; }
.info-list span { color:#718096; font-size:.8rem; }
.info-list strong { max-width:65%; text-align:right; font-size:.86rem; }

.public-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.public-page-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--primary); color:var(--primary); text-decoration:none; padding:8px 20px; border-radius:6px; font-weight:700; background:#fff; }
.public-page-button:active { background:#eaf1f8; }
.public-page-button.disabled { pointer-events:none; opacity:.45; }
.public-page-status { color:var(--ink); font-weight:700; text-align:center; }
.public-page-status small { display:block; color:var(--color-text-secondary); font-weight:400; }

.footer-public { background:#122844; color:rgba(255,255,255,.76); border-top:.5px solid var(--color-border-tertiary); padding-top:32px !important; }
.footer-public .container { align-items:center; }
.footer-public a { min-height:44px; display:inline-flex; align-items:center; }

/* Daftar lengkap informasi publik */
.public-list-nav { display:flex; gap:.65rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
.public-list-nav::-webkit-scrollbar { display:none; }
.public-list-nav .btn { white-space:nowrap; }
.public-list-search { width:min(100%, 860px); }
.public-list-search input { min-width:240px; }
.public-list-search select { min-width:150px; }
.public-list-table thead th { white-space:nowrap; color:#60758a; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; border-bottom-width:1px; }
.public-list-table td { min-width:120px; font-size:.86rem; }
.public-list-table td:first-child { min-width:220px; }
.public-list-description { min-width:300px !important; max-width:480px; white-space:normal; }

@media (min-width:640px) {
    body { font-size:15px; }
    .public-nav-button { display:none; }
    .public-nav-menu { position:static; display:flex; flex-direction:row; align-items:center; width:auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
    .public-nav-link { justify-content:flex-start; padding:6px 8px; font-weight:500; }
    .public-login-link { min-height:36px; }
    .hero-card.public-info-box { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:none; }
    .public-info-summary { pointer-events:none; }
    .public-info-summary::after { display:none; }
    .public-info-list { color:rgba(255,255,255,.86); }
}

@media (max-width:767.98px) {
    .detail-hero { padding-top:48px !important; padding-bottom:32px !important; text-align:left; }
    .detail-hero h1 { font-size:28px; }
    .detail-hero .lead { font-size:1rem; }
    .content-card { border-radius:var(--radius-card); }
    .public-list-nav { position:sticky; top:0; z-index:10; background:var(--soft); margin-inline:-12px; padding:12px; }
    .public-list-search { width:100%; flex-wrap:wrap; }
    .public-list-search input { min-width:100%; flex:1 0 100%; }
    .public-list-search select { flex:1 1 46%; min-width:0; }
    .public-list-search .btn { flex:1 1 auto; }
    .table-responsive { overflow-x:visible; }
    .public-list-table, .public-list-table tbody, .public-list-table tr, .public-list-table td { display:block; width:100%; }
    .public-list-table thead { display:none; }
    .public-list-table tr { margin-bottom:14px; border:1px solid #e2e8f0; border-radius:var(--radius-card); background:#fff; padding:12px; box-shadow:0 8px 20px rgba(26,58,92,.06); }
    .public-list-table td { min-width:0; border:0; padding:6px 0; }
    .public-list-table td[data-label]::before { content:attr(data-label); display:block; margin-bottom:2px; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#7890a8; }
    .public-list-table td:first-child { min-width:0; }
    .public-list-description { min-width:0 !important; max-width:none; }
    .public-list-table td:last-child .btn { width:100%; margin-top:6px; }
    .public-pagination { flex-direction:column; align-items:stretch; }
    .public-page-status { order:-1; }
    .public-page-button { width:100%; }
    .footer-public .container { text-align:center; }
}

@media (max-width:575.98px) {
    .public-documentation img,.public-documentation video { aspect-ratio:16/9; }
}

/* =============================================================================
   Public polish: professional news-style guest portal + touch-first mobile UI
   ============================================================================= */
:root {
    --primary:#173759;
    --accent:#d9a526;
    --soft:#f3f7fb;
    --ink:#1f2d3d;
    --color-background-secondary:#eaf2f8;
    --color-background-info:#eef6ff;
    --color-text-secondary:#5f7287;
    --color-text-tertiary:#8192a4;
    --color-border-tertiary:#d9e5ef;
    --radius-card:18px;
    --transition-fast:.18s ease;
    --max-content-width:1180px;
}
html { scroll-behavior:smooth; }
body {
    background:
        radial-gradient(circle at top left, rgba(217,165,38,.14), transparent 24rem),
        radial-gradient(circle at top right, rgba(42,90,140,.16), transparent 30rem),
        linear-gradient(180deg, #f8fbff 0%, var(--soft) 45%, #eef4f8 100%);
    font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    text-rendering:optimizeLegibility;
}
.navbar-public {
    position:sticky;
    top:0;
    z-index:1030;
    background:rgba(15,37,63,.92) !important;
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 30px rgba(15,37,63,.18);
    backdrop-filter:blur(14px);
}
.brand-icon {
    background:linear-gradient(135deg,#ffe08a,var(--accent));
    box-shadow:0 10px 22px rgba(217,165,38,.24);
}
.public-nav-link:hover { color:#fff; background:rgba(255,255,255,.10); }
.public-login-link { border-radius:999px; }
.public-login-link:hover { background:#fff; color:var(--primary); border-color:#fff; }
.public-nav-button { border-radius:14px; background:rgba(255,255,255,.08); }
.public-nav-menu { border-radius:18px; }

.public-hero,
.detail-hero {
    background:
        radial-gradient(circle at 88% 12%, rgba(255,211,106,.36), transparent 24rem),
        radial-gradient(circle at 10% 20%, rgba(255,255,255,.13), transparent 22rem),
        linear-gradient(135deg, #0f253f 0%, #173759 48%, #2d6699 100%) !important;
}
.public-hero h1,
.detail-hero h1 { letter-spacing:-.035em; }
.public-hero .lead,
.detail-hero .lead { color:rgba(255,255,255,.82) !important; }
.hero-card,
.hero-summary,
.hero-card.public-info-box {
    border-radius:22px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 18px 44px rgba(7,20,36,.18);
    backdrop-filter:blur(14px);
}
.content-card,
.topic-feed-card,
.empty-state {
    border:1px solid rgba(217,229,239,.82) !important;
    box-shadow:0 14px 36px rgba(15,37,63,.09) !important;
}
.content-card { background:rgba(255,255,255,.94) !important; }
.section-title { letter-spacing:-.025em; }
.public-filter-panel {
    background:rgba(255,255,255,.88) !important;
    border:1px solid rgba(217,229,239,.86) !important;
    backdrop-filter:blur(12px);
}
.public-filter-chip,
.public-page-button,
.topic-detail-link,
.btn { border-radius:999px; font-weight:700; }
.btn-primary {
    background:linear-gradient(135deg,var(--primary),#2d6699);
    border-color:transparent;
    box-shadow:0 10px 20px rgba(23,55,89,.16);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 14px 26px rgba(23,55,89,.22); }
.topic-feed-card { background:#fff; }
.topic-feed-cover,
.topic-feed-placeholder { background:linear-gradient(135deg,#e7f0f8,#f8fbfd); }
.topic-feed-cover { transition:transform .24s ease; }
.topic-feed-card:hover .topic-feed-cover { transform:scale(1.025); }
.archive-pill { backdrop-filter:blur(8px); box-shadow:0 8px 18px rgba(7,20,36,.2); }
.topic-feed-badge { background:#eef5fb !important; }
.news-title a:hover { color:var(--primary); }
.detail-label { color:#6b7f94; }
.info-list > div { align-items:flex-start; }
.empty-documentation { background:linear-gradient(135deg,#f8fbfd,#eef5fb); }
.public-list-table tr { transition:background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.public-list-table tbody tr:hover { background:#f8fbfd; }

.js .reveal-on-scroll { opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
.js .reveal-on-scroll.is-visible { opacity:1; transform:none; }

@media (min-width:1025px) {
    .topic-feed-card:hover,
    .content-card:hover { transform:translateY(-2px); box-shadow:0 20px 48px rgba(15,37,63,.13) !important; }
}

@media (max-width:767.98px) {
    body { font-size:15px; }
    .navbar-public .container { gap:10px; }
    .public-nav-menu { left:10px; right:10px; gap:10px; padding:14px; }
    .public-nav-link, .public-login-link, .btn, .form-control, .form-select { min-height:46px; }
    .public-hero-inner { padding-top:40px !important; padding-bottom:28px !important; }
    .public-hero h1, .detail-hero h1 { font-size:clamp(1.75rem, 9vw, 2.35rem) !important; }
    .hero-card, .hero-summary { border-radius:18px; }
    .public-filter-panel { position:sticky; top:66px; z-index:20; margin-inline:-2px; }
    .topic-filter-scroll { margin-inline:-12px; padding-inline:12px; }
    .topic-filter-bar .btn { min-height:46px; }
    .public-sort-form { max-width:none !important; }
    .public-sort-form .btn { width:100%; }
    .topic-feed-card .p-4 { padding:1rem !important; }
    .topic-detail-link { width:100%; justify-content:center; }
    .content-card { border-radius:18px; }
    .info-list > div { display:block; }
    .info-list span { display:block; margin-bottom:2px; }
    .info-list strong { display:block; max-width:none; text-align:left; font-size:.94rem; }
    .public-page-button { width:100%; }
}

/* Pagination refinement: clear hierarchy on desktop, compact and touch-friendly on handphone */
.public-pagination {
    display:grid;
    grid-template-columns:minmax(9rem, 1fr) auto minmax(9rem, 1fr);
    align-items:center;
    gap:14px;
    padding:12px;
    border:1px solid rgba(217,229,239,.92);
    border-radius:22px;
    background:rgba(255,255,255,.86);
    box-shadow:0 14px 32px rgba(15,37,63,.08);
    backdrop-filter:blur(10px);
}
.public-page-button {
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid #c9d9e6;
    border-radius:999px;
    color:var(--primary);
    background:linear-gradient(180deg,#fff,#f8fbfd);
    text-decoration:none;
    padding:10px 18px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(15,37,63,.06);
}
.public-page-button-next { justify-self:end; }
.public-page-button-prev { justify-self:start; }
.public-page-button:hover {
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--primary),#2d6699);
    box-shadow:0 12px 24px rgba(23,55,89,.18);
    transform:translateY(-1px);
}
.public-page-button.disabled {
    pointer-events:none;
    color:#8a9bae;
    border-color:#e1e9f0;
    background:#f5f8fb;
    box-shadow:none;
    opacity:1;
}
.public-page-button i { font-size:.9rem; }
.public-page-status {
    min-width:min(100%, 18rem);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:10px 18px;
    border:1px solid #dce7f0;
    border-radius:18px;
    color:var(--ink);
    background:linear-gradient(135deg,#f8fbfd,#eef5fb);
    font-weight:800;
    text-align:center;
    line-height:1.25;
}
.public-page-current { white-space:nowrap; }
.public-page-status small {
    display:block;
    color:var(--color-text-secondary);
    font-size:.78rem;
    font-weight:500;
}

@media (max-width:767.98px) {
    .public-pagination {
        grid-template-columns:1fr 1fr;
        gap:10px;
        padding:10px;
        border-radius:20px;
    }
    .public-page-status {
        grid-column:1 / -1;
        order:-1;
        width:100%;
        min-width:0;
        padding:12px;
    }
    .public-page-button {
        width:100%;
        min-height:48px;
        padding:10px 12px;
        font-size:.92rem;
    }
    .public-page-button-prev,
    .public-page-button-next { justify-self:stretch; }
}

@media (max-width:380px) {
    .public-page-button span { display:none; }
    .public-page-button { min-width:0; }
    .public-page-button i { font-size:1rem; }
}