:root { --hp-navy: #0f2a5c; --hp-navy-2: #1b3f86; --hp-gold: #f5b800; --hp-soft: #f4f6fb; }
.hp-nav, .hp-footer { font-family: 'Plus Jakarta Sans', sans-serif; }
.hp-nav { background: #fff; box-shadow: 0 1px 12px rgba(15, 42, 92, .08); }
.hp-nav .nav-link { color: var(--hp-navy); font-weight: 600; font-size: .92rem; }
.hp-nav .nav-link:hover { color: var(--hp-gold); }
.hp-nav.hp-nav-dark { background: transparent; box-shadow: none; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1030; transition: background .25s, box-shadow .25s; }
.hp-nav.hp-nav-dark.hp-nav-solid { background: #fff; box-shadow: 0 1px 12px rgba(15, 42, 92, .08); }
.hp-nav.hp-nav-dark.hp-nav-solid .navbar-brand { color: var(--hp-navy); }
.hp-nav-solid .navbar-toggler { border-color: rgba(15, 42, 92, .35) !important; }
.hp-nav-solid .navbar-toggler-icon { filter: invert(1); }
@media (min-width: 1200px) { .hp-nav.hp-nav-dark.hp-nav-solid .hp-menu > li > a { color: var(--hp-navy) !important; } }
.hp-nav.hp-nav-dark .nav-link, .hp-nav.hp-nav-dark .navbar-brand { color: #fff; }
.hp-brand-text { line-height: 1.1; font-size: .8rem; font-weight: 700; }
.hp-btn { border-radius: 30px; padding: 10px 24px; font-weight: 600; }
.hp-btn-gold { background: var(--hp-gold); color: var(--hp-navy); border: 0; }
.hp-btn-gold:hover { background: #ffc928; color: var(--hp-navy); }
.hp-section { padding: 64px 0; }
.hp-section-title { font-weight: 800; color: var(--hp-navy); margin-bottom: 8px; }
.hp-section-sub { color: #64748b; margin-bottom: 32px; }
.hp-card { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(15, 42, 92, .08); height: 100%; transition: transform .2s; }
.hp-card:hover { transform: translateY(-4px); }
.hp-card-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: #dbe3f3; }
.hp-card-ph { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--hp-navy), var(--hp-navy-2)); color: rgba(255, 255, 255, .5); font-size: 2.6rem; }
.hp-card-title { font-weight: 700; font-size: .98rem; color: var(--hp-navy); line-height: 1.4; }
.hp-date { font-size: .8rem; color: #64748b; }
.hp-agenda { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(15, 42, 92, .06); }
.hp-agenda-date { min-width: 58px; text-align: center; background: var(--hp-navy); color: #fff; border-radius: 12px; padding: 6px 0; line-height: 1.1; }
.hp-agenda-date b { display: block; font-size: 1.4rem; }
.hp-agenda-date small { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; }
.hp-footer { background: var(--hp-navy); color: #cbd5e1; margin-top: 24px; }
.hp-footer .row { align-items: flex-start; justify-content: flex-start; margin-bottom: 0; z-index: auto; }
.hp-footer a { color: #cbd5e1; text-decoration: none; }
.hp-footer a:hover { color: var(--hp-gold); }
.hp-footer i { color: var(--hp-gold); }
.hp-foot-title { color: #fff; font-weight: 700; margin-bottom: 14px; }
.hp-social { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 1.1rem; }
.hp-social:hover { background: var(--hp-gold); }
.hp-social:hover i { color: var(--hp-navy); }
.hp-map { width: 100%; height: 150px; border-radius: 12px; }
.hp-foot-copy { border-top: 1px solid rgba(255, 255, 255, .12); }

/* kolom isi dan sidebar rata atas, menimpa .row di styles.css */
.container > .row.gx-2 { align-items: flex-start; }

.hp-btn-navy { background: var(--hp-navy); color: #fff; border: 0; }
.hp-btn-navy:hover { background: var(--hp-navy-2); color: #fff; }
.hp-btn-outline { background: transparent; color: var(--hp-navy); border: 1px solid var(--hp-navy); }
.hp-btn-outline:hover { background: var(--hp-navy); color: #fff; }
.hp-breadcrumb .breadcrumb { margin: 0; font-size: .85rem; }
.hp-breadcrumb a { color: var(--hp-navy); text-decoration: none; }
.hp-breadcrumb a:hover { color: var(--hp-navy-2); text-decoration: underline; }
.hp-breadcrumb .active { color: #64748b; }
.hp-share { display: flex; align-items: center; gap: 6px; }
.hp-share-label { font-size: .8rem; color: #64748b; margin-right: 2px; }
.hp-share-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--hp-soft); color: var(--hp-navy); font-size: 1rem; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.hp-share-btn:hover, .hp-share-btn:focus-visible { background: var(--hp-navy); color: #fff; }
.hp-share-btn.copied { background: #198754; color: #fff; }
.hp-article { background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(15, 42, 92, .08); overflow: hidden; }
.hp-article-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 24px 0; }
#article.hp-article h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; font-weight: 800; color: var(--hp-navy); margin-bottom: 12px; }
.hp-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .85rem; color: #64748b; }
.hp-chip { display: inline-block; padding: 3px 12px; border-radius: 30px; background: var(--hp-soft); color: var(--hp-navy); font-size: .8rem; font-weight: 600; text-decoration: none; }
.hp-chip:hover { background: var(--hp-navy); color: #fff; }
#article.hp-article #featured-image img { border-radius: 12px; }
#article .hp-article-body { font-size: 1.02rem; color: #1e293b; overflow-wrap: break-word; }
#article .hp-article-body p, #article .hp-article-body li { font-size: inherit; line-height: 1.75; }
#article .hp-article-body h2, #article .hp-article-body h3, #article .hp-article-body h4 { color: var(--hp-navy); font-weight: 700; margin-top: 1.6em; }
#article .hp-article-body a { color: var(--hp-navy-2); text-decoration: underline; text-underline-offset: 2px; }
#article .hp-article-body img { max-width: 100%; height: auto; }
#article .hp-article-body iframe, #article .hp-article-body video { max-width: 100%; }
#article .hp-article-body table { display: block; max-width: 100%; overflow-x: auto; }
#article .hp-article-body blockquote { margin: 1.2em 0; padding: .6rem 1rem; border-left: 4px solid var(--hp-gold); background: var(--hp-soft); }
.hp-search-form .form-control { border: 1px solid #d6def0; border-radius: 30px 0 0 30px; padding: 10px 18px; }
.hp-search-form .btn { border-radius: 0 30px 30px 0; padding: 10px 22px; font-weight: 600; }
.hp-pager .pagination { margin: 0; flex-wrap: wrap; gap: 4px; }
.hp-pager .page-link { color: var(--hp-navy); border: 1px solid #d6def0; border-radius: 8px; }
.hp-pager .page-link:hover { background: var(--hp-soft); }
.hp-pager .page-item.active .page-link { background: var(--hp-navy); border-color: var(--hp-navy); color: #fff; }
.hp-empty i { font-size: 2.4rem; color: #94a3b8; }
.row.hp-cards { align-items: stretch; justify-content: flex-start; margin-bottom: 0; }
.row.hp-fields { align-items: stretch; justify-content: flex-start; }
.hp-search-form .form-select { border: 1px solid #d6def0; border-radius: 30px; padding: 10px 18px; }
.hp-table-wrap { border: 1px solid #e6ebf5; border-radius: 12px; overflow: hidden; }
.hp-table { font-size: .92rem; }
.hp-table th { background: var(--hp-navy); color: #fff; font-weight: 600; white-space: nowrap; border-color: var(--hp-navy); }
.hp-table th, .hp-table td { padding: .65rem .8rem; border-color: #e6ebf5; }
.hp-table tbody tr:hover td { background: var(--hp-soft); }
.hp-dl-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hp-navy); color: #fff; text-decoration: none; transition: background .2s; }
.hp-dl-btn:hover, .hp-dl-btn:focus-visible { background: var(--hp-navy-2); color: #fff; }
.hp-form .form-label { font-size: .88rem; font-weight: 600; color: #334155; margin-bottom: .35rem; }
.hp-form .form-control { border: 1px solid #d6def0; border-radius: 12px; padding: 10px 14px; }
.hp-form .form-control:focus { border-color: var(--hp-navy-2); box-shadow: 0 0 0 .2rem rgba(27, 63, 134, .15); }
.hp-post { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(15, 42, 92, .06); padding: 16px 20px; }
.hp-reply { margin-top: 12px; padding: 12px 16px; border-left: 4px solid var(--hp-navy); background: var(--hp-soft); border-radius: 0 10px 10px 0; }
#tabelPersonil th { white-space: nowrap; }
.dataTables_wrapper .form-control, .dataTables_wrapper .form-select { border: 1px solid #d6def0; border-radius: 30px; padding: 6px 14px; }
.dataTables_wrapper .pagination { flex-wrap: wrap; gap: 4px; }
.dataTables_wrapper .page-link { color: var(--hp-navy); border: 1px solid #d6def0; border-radius: 8px; }
.dataTables_wrapper .page-item.active .page-link { background: var(--hp-navy); border-color: var(--hp-navy); color: #fff; }
.dataTables_wrapper .page-item.disabled .page-link { color: #94a3b8; }
div.dataTables_processing { z-index: 999; padding: 10px; background: rgba(255, 255, 255, .9); border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
@media (max-width: 991.98px) { html, body { overflow-x: clip; } }