*{box-sizing:border-box} :root{--navy:#10233f;--blue:#2563eb;--ink:#172033;--muted:#667085;--line:#e5eaf1;--bg:#f5f7fb;--white:#fff;--border:#e5eaf1;--radius:14px;--shadow:0 8px 24px rgba(15,23,42,.06);--text:#172033;--green:#15803d;--red:#b42318;--blue-soft:#eff6ff;--news-red:#d71920;--news-ink:#182230;--news-muted:#697586;--news-border:#e7eaf0;--news-paper:#fff}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Arial,Helvetica,sans-serif}.topbar{background:var(--navy);color:white;padding:14px max(20px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;font-weight:700}.brand small{display:block;color:#bdcbe0;font-size:11px;font-weight:400}.brand-mark{display:grid;place-items:center;background:#60a5fa;color:#10233f;font-weight:800;border-radius:12px;width:42px;height:42px}.topnav{display:flex;gap:16px;flex-wrap:wrap}.topnav a{color:#e7edf7;text-decoration:none;font-size:13px}.topnav a:hover{color:white}.container{max-width:1120px;margin:28px auto;padding:0 20px;min-height:65vh}.hero{background:linear-gradient(130deg,#10233f,#1d4e89);color:white;padding:34px;border-radius:20px;margin-bottom:24px}.hero h1{font-size:clamp(28px,4vw,42px);line-height:1.12;margin:8px 0 12px}.hero p{max-width:700px;color:#dbeafe;margin:0}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#93c5fd}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{background:white;border:1px solid var(--line);border-radius:15px;padding:20px;box-shadow:0 4px 16px #0f172a06}.stat{font-size:30px;font-weight:800;margin:4px 0}.muted{color:var(--muted)}.page-head{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:20px}.page-head h1{margin:0;font-size:28px}.btn,button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:10px 14px;background:var(--blue);color:white;text-decoration:none;font-weight:700;cursor:pointer;font-size:14px}.btn.secondary,button.secondary{background:#e9eef7;color:#20304b}.btn.danger,button.danger{background:#b42318}.btn.small{padding:6px 9px;font-size:12px}.table-wrap{overflow-x:auto;background:white;border:1px solid var(--line);border-radius:13px}table{border-collapse:collapse;width:100%;min-width:680px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}th{background:#f8fafc;color:#475467;font-size:12px;text-transform:uppercase;letter-spacing:.04em}tr:last-child td{border-bottom:0}.badge{display:inline-block;padding:4px 8px;border-radius:20px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:700}.badge.published{background:#dcfce7;color:#166534}.badge.review{background:#fef3c7;color:#92400e}.badge.revision{background:#fee2e2;color:#991b1b}.badge.archived{background:#e5e7eb;color:#374151}.form-card{max-width:760px;margin:auto;background:white;border:1px solid var(--line);border-radius:16px;padding:24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{margin-bottom:15px}.field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid #cfd7e3;border-radius:9px;padding:11px 12px;font:inherit;background:white}.field textarea{min-height:130px;resize:vertical}.field .help{font-size:12px;color:var(--muted);margin-top:5px}.alert{padding:12px 15px;border-radius:10px;margin:0 0 16px;background:#eff6ff;color:#1e40af}.alert.error{background:#fef2f2;color:#991b1b}.alert.success{background:#ecfdf3;color:#166534}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.article-title{font-size:20px;line-height:1.3;margin:8px 0}.article-title a{color:var(--ink);text-decoration:none}.article-title a:hover{color:var(--blue)}.article-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px;background:#e5e7eb}.article-body{white-space:pre-wrap;line-height:1.85;overflow-wrap:anywhere}.article-meta{font-size:12px;color:var(--muted)}.empty{padding:32px;text-align:center;color:var(--muted)}.footer{text-align:center;padding:24px;color:#7b8495;font-size:12px}.login-wrap{max-width:460px;margin:35px auto}.login-wrap .form-card{padding:28px}.sidebar-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:12px;padding:14px;margin-bottom:18px}.inline-form{display:inline}.cover-thumb{width:90px;height:58px;object-fit:cover;border-radius:7px}.pagination{display:flex;gap:8px;margin-top:18px}.two-col{display:grid;grid-template-columns:2fr 1fr;gap:18px}.section-title{margin:0 0 12px;font-size:18px}.list-clean{list-style:none;padding:0;margin:0}.list-clean li{padding:10px 0;border-bottom:1px solid var(--line)}.list-clean li:last-child{border-bottom:0}@media(max-width:760px){.grid{grid-template-columns:1fr}.form-grid,.two-col{grid-template-columns:1fr}.hero{padding:24px}.container{margin-top:20px}.topbar{padding:13px 18px}}


/* ===== Penyegaran tampilan manajemen anggota ===== */
.members-layout {
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.65fr);
    align-items: start;
    gap: 22px;
}

.members-layout > .card {
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 28px rgba(16, 35, 63, .055);
    transition: box-shadow .2s ease, transform .2s ease;
}

.members-layout > .card:hover {
    box-shadow: 0 12px 32px rgba(16, 35, 63, .09);
}

.members-layout .section-title {
    font-size: 20px;
    margin: 7px 0 20px;
}

.members-layout .field input,
.members-layout .field select {
    min-height: 44px;
    border-color: #d8e0eb;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.members-layout .field input:focus,
.members-layout .field select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.members-layout button,
.members-layout .btn {
    transition: transform .15s ease, filter .15s ease;
}

.members-layout button:hover,
.members-layout .btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.member-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.member-list-heading .section-title {
    margin-bottom: 8px;
}

.small-note {
    font-size: 13px;
    line-height: 1.65;
    margin: 8px 0 18px;
}

.members-table {
    min-width: 620px;
}

.members-table th {
    padding-top: 14px;
    padding-bottom: 14px;
    background: #f4f7fc;
}

.members-table td {
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: middle;
}

.members-table tbody tr {
    transition: background .15s ease;
}

.members-table tbody tr:hover {
    background: #f8faff;
}

.username-label {
    font-size: 12px;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.status-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.status-pill.active {
    background: #e8f8ef;
    color: #167344;
}

.status-pill.inactive {
    background: #fff0ee;
    color: #b42318;
}

@media (max-width: 900px) {
    .members-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .members-layout > .card {
        padding: 17px;
    }

    .page-head h1 {
        font-size: 24px;
    }
}


/* ========================================
   EXTRA JURNALISTIK - DESAIN PORTAL BERITA
   ======================================== */

:root {
    --news-red: #d71920;
    --news-ink: #182230;
    --news-muted: #697586;
    --news-border: #e7eaf0;
    --news-paper: #ffffff;
}

body {
    background: #f4f6f9;
    color: var(--news-ink);
}

.topbar {
    background: #ffffff;
    color: var(--news-ink);
    border-bottom: 1px solid var(--news-border);
    padding-top: 15px;
    padding-bottom: 15px;
}

.brand {
    color: var(--news-ink);
    gap: 12px;
}

.brand-mark {
    background: var(--news-red);
    color: #ffffff;
    border-radius: 9px;
    font-size: 17px;
}

.brand small {
    color: #7b8492;
}

.topnav a {
    color: #3b4554;
    font-weight: 700;
}

.topnav a:hover {
    color: var(--news-red);
}

.container {
    max-width: 1200px;
    margin-top: 22px;
    margin-bottom: 30px;
}

.news-categories {
    display: flex;
    gap: 25px;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    background: #ffffff;
    padding: 0 20px;
    min-height: 49px;
    border: 1px solid var(--news-border);
    border-radius: 9px;
    margin-bottom: 24px;
    scrollbar-width: thin;
}

.news-categories a {
    color: #465163;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    padding: 16px 0 13px;
    border-bottom: 3px solid transparent;
}

.news-categories a:hover,
.news-categories a.active {
    color: var(--news-red);
    border-bottom-color: var(--news-red);
}

.news-masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border: 1px solid var(--news-border);
    border-radius: 12px;
    padding: 26px 30px;
    margin-bottom: 17px;
}

.masthead-kicker,
.section-kicker {
    color: var(--news-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.news-masthead h1 {
    font-size: clamp(27px, 4vw, 40px);
    line-height: 1.1;
    letter-spacing: -1.4px;
    margin: 8px 0;
    font-weight: 900;
}

.news-masthead h1 span {
    color: var(--news-red);
}

.news-masthead p {
    color: var(--news-muted);
    font-size: 13px;
    margin: 0;
}

.masthead-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 12px 16px;
    border-radius: 7px;
    background: var(--news-red);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.masthead-button:hover {
    background: #b9141b;
}

.news-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--news-border);
    padding: 7px 8px 7px 15px;
    border-radius: 9px;
    margin-bottom: 30px;
}

.search-symbol {
    color: #778293;
    font-size: 26px;
    line-height: 1;
}

.news-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 10px 0;
    font: inherit;
    background: transparent;
}

.news-search button {
    background: var(--news-red);
    border-radius: 6px;
    padding: 10px 20px;
}

.news-search button:hover {
    background: #b9141b;
}

.news-lead-section,
.news-latest-section {
    margin-bottom: 36px;
}

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

.section-heading h2 {
    font-size: 25px;
    letter-spacing: -.6px;
    margin: 4px 0 0;
    line-height: 1.2;
}

.live-label {
    color: #16804a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 4px;
}

.live-label span {
    width: 7px;
    height: 7px;
    background: #19a463;
    border-radius: 50%;
}

.news-lead-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(290px, 1fr);
    gap: 23px;
    align-items: start;
}

.lead-story,
.lead-sidebar {
    background: var(--news-paper);
    border: 1px solid var(--news-border);
    border-radius: 11px;
    overflow: hidden;
}

.lead-image {
    display: block;
    position: relative;
    background: #dce2eb;
    overflow: hidden;
}

.lead-image img {
    width: 100%;
    aspect-ratio: 16 / 8.2;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.lead-image:hover img,
.latest-image:hover img,
.side-thumb:hover img {
    transform: scale(1.035);
}

.image-tag {
    position: absolute;
    left: 17px;
    bottom: 15px;
    background: var(--news-red);
    color: #ffffff;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 4px;
}

.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 8.2;
    color: #ffffff;
    background: linear-gradient(135deg, #172b4d, #d71920);
}

.image-placeholder span {
    font-size: clamp(55px, 8vw, 100px);
    font-weight: 900;
    letter-spacing: -5px;
}

.image-placeholder small {
    font-size: 10px;
    letter-spacing: .2em;
    font-weight: 700;
}

.image-placeholder.compact {
    aspect-ratio: 16 / 10;
}

.image-placeholder.compact span {
    font-size: 52px;
}

.lead-content {
    padding: 23px 25px 25px;
}

.news-meta {
    color: var(--news-red);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.lead-content h3 {
    font-size: clamp(23px, 3vw, 33px);
    line-height: 1.19;
    letter-spacing: -.8px;
    margin: 10px 0;
}

.lead-content h3 a,
.side-story h4 a,
.latest-card h3 a {
    color: var(--news-ink);
    text-decoration: none;
}

.lead-content h3 a:hover,
.side-story h4 a:hover,
.latest-card h3 a:hover {
    color: var(--news-red);
}

.lead-content > p {
    color: #5c6675;
    line-height: 1.75;
    font-size: 14px;
    margin: 12px 0;
}

.byline,
.side-date {
    color: #7a8492;
    font-size: 11px;
}

.read-link {
    display: inline-block;
    color: var(--news-red);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    margin-top: 15px;
}

.read-link:hover {
    text-decoration: underline;
}

.lead-sidebar {
    padding: 19px;
}

.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--news-ink);
    margin-bottom: 4px;
}

.sidebar-heading h3 {
    font-size: 17px;
    margin: 0;
}

.sidebar-heading span {
    font-size: 9px;
    font-weight: 900;
    color: var(--news-red);
    letter-spacing: .08em;
}

.side-story {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid var(--news-border);
}

.side-story:last-child {
    border-bottom: 0;
    padding-bottom: 3px;
}

.side-thumb {
    display: block;
    background: #e8edf4;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1 / 1;
}

.side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.thumb-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 85px;
    background: linear-gradient(135deg, #1b3558, #d71920);
    color: white;
    font-size: 25px;
    font-weight: 900;
}

.side-story h4 {
    font-size: 13px;
    line-height: 1.45;
    margin: 5px 0 8px;
}

.side-date {
    margin-top: 5px;
}

.all-news-link {
    color: var(--news-red);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 3px;
}

.latest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 19px;
}

.latest-card {
    background: #ffffff;
    border: 1px solid var(--news-border);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.latest-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(20, 34, 56, .08);
}

.latest-image {
    display: block;
    overflow: hidden;
    background: #e5eaf1;
}

.latest-image img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .3s ease;
}

.latest-card-content {
    padding: 17px;
}

.latest-card h3 {
    font-size: 17px;
    line-height: 1.4;
    margin: 9px 0;
}

.latest-card p {
    color: var(--news-muted);
    font-size: 13px;
    line-height: 1.65;
}

.news-empty,
.news-note {
    background: #ffffff;
    border: 1px solid var(--news-border);
    border-radius: 11px;
    padding: 38px 22px;
    text-align: center;
    color: var(--news-muted);
}

.news-empty h2 {
    color: var(--news-ink);
    margin: 10px 0;
}

.empty-icon {
    font-size: 36px;
}

.editorial-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 27px 30px;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(115deg, #172b4d, #273d60);
    margin-top: 40px;
}

.editorial-banner .section-kicker {
    color: #ffb5b8;
}

.editorial-banner h2 {
    font-size: 24px;
    line-height: 1.25;
    margin: 7px 0;
}

.editorial-banner p {
    color: #d4deed;
    font-size: 13px;
    margin-bottom: 0;
}

.editorial-banner > a {
    flex-shrink: 0;
    color: #ffffff;
    background: var(--news-red);
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.news-masthead,
.news-search,
.news-categories,
.lead-story,
.lead-sidebar,
.latest-card {
    box-shadow: 0 3px 12px rgba(20, 34, 56, .025);
}

@media (max-width: 850px) {
    .news-lead-grid {
        grid-template-columns: 1fr;
    }

    .lead-sidebar {
        padding: 17px;
    }

    .latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .container {
        padding: 0 12px;
        margin-top: 12px;
    }

    .news-categories {
        gap: 19px;
        padding: 0 13px;
        margin-bottom: 15px;
    }

    .news-masthead {
        display: block;
        padding: 22px 18px;
    }

    .news-masthead h1 {
        font-size: 30px;
    }

    .masthead-button {
        margin-top: 17px;
    }

    .news-search {
        gap: 8px;
        padding-left: 10px;
        margin-bottom: 24px;
    }

    .news-search input {
        font-size: 12px;
    }

    .news-search button {
        padding: 10px 12px;
    }

    .section-heading h2 {
        font-size: 22px;
    }

    .lead-content {
        padding: 17px;
    }

    .lead-content h3 {
        font-size: 24px;
    }

    .side-story {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .latest-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .latest-card {
        display: grid;
        grid-template-columns: 125px minmax(0, 1fr);
    }

    .latest-image img,
    .image-placeholder.compact {
        height: 100%;
        min-height: 140px;
        aspect-ratio: auto;
    }

    .latest-card-content {
        padding: 12px;
    }

    .latest-card h3 {
        font-size: 14px;
        margin: 6px 0;
    }

    .latest-card p {
        display: none;
    }

    .latest-card .read-link {
        margin-top: 8px;
    }

    .editorial-banner {
        display: block;
        padding: 23px 18px;
    }

    .editorial-banner h2 {
        font-size: 21px;
    }

    .editorial-banner > a {
        display: inline-flex;
        margin-top: 18px;
    }
}


/* =========================================
   HALAMAN INDEKS BERITA DAN DETAIL ARTIKEL
   ========================================= */

.listing-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 27px 30px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 12px;
}

.listing-masthead h1 {
    font-size: clamp(27px, 4vw, 36px);
    letter-spacing: -.9px;
    margin: 7px 0;
    line-height: 1.15;
}

.listing-masthead p {
    color: #697586;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.listing-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 105px;
    min-height: 88px;
    border-radius: 10px;
    background: #fff3f3;
    color: #d71920;
}

.listing-count strong {
    font-size: 30px;
    line-height: 1.2;
}

.listing-count span {
    font-size: 10px;
    font-weight: 700;
    margin-top: 5px;
}

.listing-search {
    margin-bottom: 18px;
}

.filter-summary {
    font-size: 13px;
    color: #697586;
    margin: 0 0 20px;
}

.filter-summary a {
    color: #d71920;
    text-decoration: none;
    font-weight: 700;
    margin-left: 8px;
}

.listing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(250px, .8fr);
    gap: 24px;
    align-items: start;
}

.listing-main {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 11px;
    padding: 0 22px;
}

.listing-story {
    display: grid;
    grid-template-columns: minmax(150px, 225px) minmax(0, 1fr);
    gap: 21px;
    padding: 22px 0;
    border-bottom: 1px solid #e7eaf0;
}

.listing-story:last-child {
    border-bottom: 0;
}

.listing-thumb {
    display: block;
    overflow: hidden;
    background: #e5eaf1;
    border-radius: 8px;
    align-self: start;
}

.listing-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}

.listing-thumb:hover img {
    transform: scale(1.04);
}

.listing-thumb .image-placeholder {
    aspect-ratio: 4 / 3;
}

.listing-story-content h2 {
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: -.3px;
    margin: 8px 0;
}

.listing-story-content h2 a {
    color: #182230;
    text-decoration: none;
}

.listing-story-content h2 a:hover {
    color: #d71920;
}

.listing-story-content > p {
    color: #697586;
    font-size: 13px;
    line-height: 1.7;
    margin: 8px 0;
}

.listing-byline {
    color: #8a94a3;
    font-size: 11px;
    margin-top: 10px;
}

.listing-aside {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 11px;
    padding: 19px;
}

.category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #354052;
    text-decoration: none;
    font-size: 13px;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f4;
}

.category-row span:last-child {
    color: #d71920;
    font-weight: 800;
}

.category-row:hover {
    color: #d71920;
}

.aside-promo {
    background: #f6f8fb;
    padding: 18px;
    border-radius: 8px;
    margin-top: 23px;
}

.aside-promo h3 {
    font-size: 18px;
    line-height: 1.4;
    margin: 8px 0;
}

.aside-promo p {
    font-size: 12px;
    color: #697586;
    line-height: 1.7;
    margin-bottom: 0;
}

/* Detail artikel */

.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    color: #8992a0;
    font-size: 12px;
    margin: 0 0 19px;
}

.article-breadcrumb a {
    color: #5b6575;
    text-decoration: none;
}

.article-breadcrumb a:hover {
    color: #d71920;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 25px;
    align-items: start;
}

.news-detail {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 12px;
    padding: clamp(21px, 4vw, 42px);
}

.detail-category {
    display: inline-flex;
    background: #fff0f0;
    color: #c8171e;
    font-size: 11px;
    font-weight: 800;
    padding: 7px 11px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.news-detail > h1 {
    color: #172033;
    font-size: clamp(29px, 4.2vw, 43px);
    letter-spacing: -1.1px;
    line-height: 1.2;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.detail-excerpt {
    color: #667085;
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 21px;
}

.detail-author {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
    padding: 16px 0;
    margin-bottom: 22px;
}

.author-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #d71920;
    color: #ffffff;
    font-weight: 900;
    flex-shrink: 0;
}

.detail-author > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-author strong {
    font-size: 12px;
    color: #263246;
}

.detail-author span {
    font-size: 10px;
    color: #8a94a3;
}

.detail-date {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.detail-figure {
    margin: 0 0 27px;
}

.detail-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    background: #f0f2f5;
    border-radius: 8px;
}

.detail-figure figcaption {
    color: #8a94a3;
    font-size: 11px;
    margin-top: 9px;
}

.detail-body {
    color: #303b4c;
    font-size: 16px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.detail-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border-top: 1px solid #edf0f4;
    margin-top: 35px;
    padding-top: 25px;
    text-align: center;
}

.detail-end > span:first-child {
    color: #d71920;
    font-size: 25px;
}

.detail-end strong {
    color: #263246;
    font-size: 13px;
}

.detail-end > span:last-child {
    color: #8a94a3;
    font-size: 11px;
}

.detail-back {
    border-top: 1px solid #edf0f4;
    margin-top: 25px;
    padding-top: 22px;
}

.detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-aside-card {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 11px;
    padding: 19px;
    min-width: 0;
}

.detail-about-mark {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #172b4d, #d71920);
    color: #ffffff;
    font-size: 23px;
    font-weight: 900;
    margin: 20px 0 12px;
}

.detail-aside-card > h4 {
    font-size: 16px;
    margin: 0 0 8px;
}

.detail-aside-card > p {
    color: #697586;
    font-size: 12px;
    line-height: 1.75;
}

.related-story {
    padding: 15px 0;
    border-bottom: 1px solid #edf0f4;
}

.related-story:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.related-thumb {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #e5eaf1;
    margin-bottom: 10px;
}

.related-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.related-thumb > span {
    display: grid;
    place-items: center;
    min-height: 100px;
    background: linear-gradient(135deg, #172b4d, #d71920);
    color: white;
    font-size: 27px;
    font-weight: 900;
}

.related-story h4 {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.related-story h4 a {
    color: #263246;
    text-decoration: none;
}

.related-story h4 a:hover {
    color: #d71920;
}

/* Footer portal */

.footer {
    background: #172033;
    color: #cbd3df;
    border-top: 4px solid #d71920;
    padding: 28px 20px;
    text-align: center;
    font-size: 12px;
    margin-top: 45px;
}

@media (max-width: 850px) {
    .listing-layout,
    .detail-layout {
        grid-template-columns: 1fr;
    }

    .listing-aside {
        display: none;
    }

    .detail-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .listing-masthead {
        padding: 20px 16px;
    }

    .listing-count {
        min-width: 75px;
        min-height: 75px;
    }

    .listing-count strong {
        font-size: 24px;
    }

    .listing-count span {
        font-size: 9px;
        text-align: center;
    }

    .listing-main {
        padding: 0 14px;
    }

    .listing-story {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 13px;
        padding: 16px 0;
    }

    .listing-story-content h2 {
        font-size: 14px;
        line-height: 1.4;
        margin: 6px 0;
    }

    .listing-story-content > p {
        display: none;
    }

    .listing-story-content .news-meta {
        font-size: 10px;
    }

    .listing-story-content .read-link {
        margin-top: 8px;
        font-size: 11px;
    }

    .listing-byline {
        margin-top: 6px;
    }

    .news-detail {
        padding: 20px 16px;
    }

    .news-detail > h1 {
        font-size: 28px;
    }

    .detail-excerpt {
        font-size: 15px;
    }

    .detail-body {
        font-size: 15px;
        line-height: 1.85;
    }

    .detail-sidebar {
        display: flex;
    }

    .detail-date {
        width: 100%;
        margin-left: 53px;
        text-align: left;
    }
}


/* ===== EXTRA JURNALISTIK: REDAKSI MODERN ===== */

body {
    background:
        radial-gradient(ellipse at 5% 0%, rgba(215, 25, 32, .055), transparent 34%),
        radial-gradient(ellipse at 100% 15%, rgba(52, 100, 160, .07), transparent 30%),
        #f1f4f9;
    color: #1d2939;
}

/* Panel dan area kerja */
.panel,
.card,
.stat-card,
.dashboard-card,
.table-container {
    background: rgba(255, 255, 255, .94);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(23, 35, 56, .045);
}

/* Form input */
input,
select,
textarea {
    border-color: #dce3ec;
    border-radius: 8px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #d71920;
    box-shadow: 0 0 0 3px rgba(215, 25, 32, .09);
}

/* Tombol utama */
button.primary,
.btn-primary,
button[type="submit"] {
    transition: background .2s ease, transform .2s ease;
}

button.primary:hover,
.btn-primary:hover {
    transform: translateY(-1px);
}

/* Tabel data */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

thead th {
    background: #f5f7fb;
    color: #475467;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 14px 13px;
}

tbody td {
    padding: 13px;
    border-bottom: 1px solid #edf0f5;
    color: #344054;
}

tbody tr:hover td {
    background: #fafbfe;
}

/* Sidebar dan navigasi admin jika memakai kelas ini */
.sidebar {
    background: linear-gradient(180deg, #172033 0%, #202e46 100%);
    color: #ffffff;
}

.sidebar a {
    border-radius: 8px;
    transition: background .2s ease;
}

.sidebar a:hover,
.sidebar a.active {
    background: rgba(255, 255, 255, .12);
}

/* Judul halaman */
.page-header,
.dashboard-header {
    margin-bottom: 23px;
}

.page-header h1,
.dashboard-header h1 {
    color: #182230;
    letter-spacing: -.6px;
}

@media (max-width: 600px) {
    .panel,
    .card,
    .stat-card,
    .dashboard-card {
        border-radius: 10px;
    }
}


/* Identitas ekstra pada header */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.brand-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.brand-text {
    min-width: 0;
    font-weight: 800;
}

.brand-text small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    opacity: .75;
}

@media (max-width: 600px) {
    .brand-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .brand-text {
        font-size: 13px;
    }

    .brand-text small {
        font-size: 10px;
    }
}


/* Shared components: galeri, laporan, dan penyatuan komponen halaman */
:root { --surface: #fff; --surface-soft:#f8fafc; --focus-ring:0 0 0 3px rgba(37,99,235,.14); }
.field input:focus,.field select:focus,.field textarea:focus,
.news-search input:focus { outline:0; border-color:var(--blue); box-shadow:var(--focus-ring); }
.card,.form-card,.table-wrap,.gallery-card,.report-panel { border-color:var(--border); }
.gallery-toolbar,.report-filters { display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:0 0 20px;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); }
.gallery-toolbar .field,.report-filters .field { margin:0;flex:1;min-width:160px; }
.gallery-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.gallery-card { overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow); }
.gallery-card img { width:100%;height:220px;display:block;object-fit:cover;background:#e5e7eb; }
.gallery-card-body { padding:15px; }
.gallery-card h2,.gallery-card h3 { font-size:17px;line-height:1.35;margin:0 0 7px; }
.gallery-card p { margin:0;color:var(--muted);font-size:13px; }
.gallery-album-head { display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px; }
.gallery-album-head h1 { margin:0;font-size:clamp(24px,3vw,34px); }
.report-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px; }
.report-stat { padding:20px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow); }
.report-stat span { display:block;color:var(--muted);font-size:12px;font-weight:700; }
.report-stat strong { display:block;font-size:30px;line-height:1.2;margin-top:8px; }
.report-panel { background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:20px; }
.report-panel h2 { font-size:18px;margin:0 0 14px; }
.report-bar-row { display:grid;grid-template-columns:minmax(100px,180px) 1fr 42px;align-items:center;gap:12px;margin:12px 0;font-size:13px; }
.report-bar { background:#edf1f6;border-radius:99px;height:10px;overflow:hidden; }
.report-bar span { display:block;height:100%;background:var(--news-red);border-radius:99px; }
.pagination { display:flex;gap:7px;align-items:center;flex-wrap:wrap; }
.pagination a,.pagination span { min-width:38px;text-align:center;padding:8px 11px;border-radius:8px;background:#fff;border:1px solid var(--border);color:var(--ink);text-decoration:none;font-weight:700;font-size:13px; }
.pagination .current { background:var(--news-red);border-color:var(--news-red);color:#fff; }
.portal-shortcut { display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0; }
.portal-shortcut a { color:var(--news-red);font-weight:800;text-decoration:none; }
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gallery-grid,.report-grid{grid-template-columns:1fr}.gallery-card img{height:210px}.report-panel{padding:15px}.report-bar-row{grid-template-columns:95px 1fr 30px;gap:8px}.gallery-toolbar,.report-filters{padding:14px}}


/* =========================================
   PENYEMPURNAAN PORTAL PUBLIK
   ========================================= */

.topbar {
    position: relative;
    z-index: 10;
}

.brand {
    min-width: 0;
}

.brand-logo {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 9px;
}

.brand-text {
    line-height: 1.35;
}

.topnav a[aria-current="page"] {
    color: var(--news-red);
    font-weight: 800;
}

/* Footer portal */
.site-footer {
    margin-top: 42px;
    background: #fff;
    border-top: 1px solid var(--news-border);
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 24px;
    align-items: center;
}

.footer-brand strong {
    color: var(--news-ink);
    font-size: 15px;
}

.footer-brand p {
    margin: 4px 0 0;
    color: var(--news-muted);
    font-size: 12px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.footer-links a {
    color: #475467;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--news-red);
}

.footer-copyright {
    grid-column: 1 / -1;
    margin: 8px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--news-border);
    color: var(--news-muted);
    font-size: 12px;
}

/* Konten berita */
.lead-story,
.latest-card,
.listing-story,
.news-detail,
.detail-aside-card {
    min-width: 0;
}

.lead-image img,
.latest-image img,
.listing-thumb img,
.side-thumb img,
.related-thumb img,
.detail-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lead-image,
.latest-image,
.listing-thumb,
.side-thumb,
.related-thumb {
    display: block;
    overflow: hidden;
    background: #e9edf3;
}

.lead-image img,
.latest-image img,
.listing-thumb img,
.side-thumb img,
.related-thumb img {
    transition: transform .25s ease;
}

.lead-image:hover img,
.latest-image:hover img,
.listing-thumb:hover img,
.side-thumb:hover img,
.related-thumb:hover img {
    transform: scale(1.025);
}

.lead-story h3 a,
.latest-card h3 a,
.listing-story h2 a,
.side-story h4 a,
.related-story h4 a {
    color: inherit;
    text-decoration: none;
}

.lead-story h3 a:hover,
.latest-card h3 a:hover,
.listing-story h2 a:hover,
.side-story h4 a:hover,
.related-story h4 a:hover {
    color: var(--news-red);
}

.article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 18px;
    color: var(--news-muted);
    font-size: 12px;
}

.article-breadcrumb a {
    color: var(--news-muted);
    text-decoration: none;
}

.article-breadcrumb a:hover {
    color: var(--news-red);
}

.detail-figure {
    margin: 22px 0;
}

.detail-figure img {
    max-height: 560px;
    border-radius: 12px;
    background: #e9edf3;
}

.detail-figure figcaption {
    margin-top: 8px;
    color: var(--news-muted);
    font-size: 12px;
}

.detail-body {
    font-size: 16px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.detail-body p {
    margin: 0 0 18px;
}

.news-search input {
    min-width: 0;
}

.news-search button {
    flex-shrink: 0;
}

.news-empty {
    padding: 38px 22px;
    text-align: center;
}

/* Tampilan tablet */
@media (max-width: 800px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-copyright {
        grid-column: auto;
    }

    .detail-layout,
    .listing-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing-aside,
    .detail-sidebar {
        margin-top: 20px;
    }
}

/* Tampilan ponsel */
@media (max-width: 600px) {
    .topbar {
        align-items: flex-start;
        gap: 13px;
    }

    .brand-logo,
    .brand-mark {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }

    .brand-text {
        font-size: 14px;
    }

    .brand small {
        font-size: 10px;
    }

    .topnav {
        width: 100%;
        gap: 8px 15px;
    }

    .topnav a {
        font-size: 12px;
    }

    .listing-masthead {
        align-items: flex-start;
        flex-direction: column;
        padding: 21px 18px;
    }

    .listing-count {
        min-width: 0;
        min-height: 0;
        padding: 10px 14px;
        align-items: flex-start;
    }

    .news-search {
        gap: 8px;
    }

    .news-search button {
        padding: 10px 12px;
    }

    .detail-body {
        font-size: 15px;
    }

    .detail-figure img {
        max-height: 360px;
    }

    .footer-links {
        gap: 14px;
    }
}

/* ===== Fase 1: tombol Keluar (POST) tampil seperti tautan navigasi ===== */
.topnav .logout-form{display:inline;margin:0}
.topnav .logout-btn{display:inline;background:none;border:0;border-radius:0;padding:0;margin:0;color:#e7edf7;font:inherit;font-size:13px;font-weight:400;cursor:pointer}
.topnav .logout-btn:hover{color:#fff}
.topnav .logout-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:3px}