@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/poppins/poppins-latin-800-normal.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-main: "Poppins", "Segoe UI", Arial, sans-serif;
    --navy: #07366f;
    --navy-2: #0a4488;
    --navy-dark: #052b5c;
    --gold: #c7952b;
    --gold-2: #d9ad48;
    --text: #172b46;
    --muted: #607086;
    --line: rgba(7, 54, 111, .10);
    --soft: #f7fbff;
    --shadow: 0 16px 36px rgba(7, 54, 111, .12);
    --shadow-soft: 0 9px 22px rgba(7, 54, 111, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.portal-page { margin: 0; color: var(--text); background: #fff; font-family: var(--font-main); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { text-decoration: none !important; }
img { display: block; max-width: 100%; }
.portal-container { width: min(1450px, calc(100% - 88px)); margin: 0 auto; }

.portal-topbar { height: 40px; background: linear-gradient(90deg, #05295a 0%, #073d7a 100%); color: #fff; font-size: 13px; font-weight: 500; }
.portal-topbar-inner { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.portal-top-left, .portal-top-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.portal-mini-icon { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.50); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; }
.portal-separator { display: inline-block; width: 1px; height: 20px; background: rgba(255,255,255,.32); }

.portal-header { position: relative; z-index: 30; background: #fff; }
.portal-nav-wrap { background: rgba(255,255,255,.98); border-bottom: 1px solid #edf2f8; }
.portal-nav { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.portal-brand { display: flex; align-items: center; gap: 22px; color: var(--navy); min-width: 0; }
.portal-logo { width: auto; height: 80px; object-fit: contain; flex: 0 0 auto; margin: 0px 0 0px; filter: drop-shadow(0 10px 13px rgba(7,54,111,.12)); }
.portal-brand-text { display: flex; flex-direction: column; min-width: 0; }
.portal-brand-text strong { display: block; color: var(--navy); font-size: clamp(24px, 1.75vw, 32px); line-height: 1.08; font-weight: 700; letter-spacing: -.75px; }
.portal-brand-text span { margin-top: 12px; color: var(--gold); font-size: 14px; font-weight: 500; letter-spacing: -.1px; }
.portal-menu { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.portal-menu a { color: #172334; padding: 12px 15px; border-radius: 10px; font-size: 14px; font-weight: 500; letter-spacing: -.1px; transition: all .18s ease; white-space: nowrap; }
.portal-menu a:hover, .portal-menu a.active { background: linear-gradient(180deg, #124b97, #0a3978); color: #fff; box-shadow: 0 10px 18px rgba(10,57,120,.20); }
.portal-menu .login { background: linear-gradient(180deg, #0d3f84, #092f66); color: #fff; font-weight: 600; padding-left: 22px; padding-right: 22px; }
.portal-menu .survey {
    background: linear-gradient(180deg, #f6c23e, #e0a800);
    color: #1f2937;
    font-weight: 600;
    padding-left: 22px;
    padding-right: 22px;
}

.portal-menu .survey:hover {
    background: linear-gradient(180deg, #ffd45a, #d99a00);
    color: #1f2937;
}
.portal-mobile-btn { display: none; border: 0; background: linear-gradient(180deg, #124b97, #0a3978); color: #fff; padding: 10px 17px; border-radius: 10px; font-weight: 600; }

.portal-alert-wrap { padding-top: 18px; }
.portal-success-card { background: #fff; border: 1px solid rgba(27,185,112,.25); border-left: 5px solid #21b96f; border-radius: 14px; box-shadow: var(--shadow-soft); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.portal-success-card h4 { margin: 0 0 5px; color: var(--navy); font-size: 16px; font-weight: 700; }
.portal-success-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.portal-success-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.portal-hero {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    background: #eef4fb;
}
.portal-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.88) 0%,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.28) 0%
        ),
        url("../img/portal/bg-hero-portal.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
}
.portal-hero-grid {
    position: relative;
    z-index: 3;
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 355px;
    align-items: center;
    gap: 64px;
    padding: 36px 0 28px;
}

.portal-hero-text { padding-left: 204px; }
.portal-hero-text h1 { margin: 0; max-width: 710px; color: var(--navy); font-size: clamp(28px, 3.15vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -1.25px; }
.portal-hero-text h1 span { color: var(--gold); }
.portal-hero-text h2 { margin: 13px 0 18px; color: #0d4c96; font-size: clamp(19px, 1.35vw, 24px); line-height: 1.32; font-weight: 500; letter-spacing: -.35px; }
.portal-hero-text p { margin: 0; color: #223247; font-size: 14px; font-weight: 400; line-height: 1.72; max-width: 660px; }
.portal-hero-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 23px; }
.portal-btn { min-width: 168px; min-height: 48px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; font-size: 14px; font-weight: 600; transition: all .18s ease; }
.portal-btn img { width: 20px; height: 20px; object-fit: contain; }
.portal-btn-primary { color: #fff; background: linear-gradient(180deg, #104b96, #09356f); box-shadow: 0 12px 24px rgba(9,53,111,.20); }
.portal-btn-primary img { filter: brightness(0) invert(1); }
.portal-btn-primary:hover { color: #fff; transform: translateY(-2px); }
.portal-btn-outline { color: var(--navy); background: rgba(255,255,255,.94); border: 1.7px solid #1b4c8b; }
.portal-btn-outline:hover { color: #fff; background: var(--navy); }
.portal-btn-outline:hover img { filter: brightness(0) invert(1); }

.portal-leader {
    position: relative;
    max-width: 355px;
    width: 100%;
    justify-self: center;
    background: rgba(255, 255, 255, .96);
    border: 7px solid rgba(255, 255, 255, .94);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 10px;
    overflow: visible;
}

.portal-leader-ribbon {
    position: absolute;
    right: 24px;
    top: -16px;
    width: 56px;
    height: 98px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #e7bf5c 0%, #c79227 100%);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 25px;
    z-index: 6;
    box-shadow: 0 12px 22px rgba(200, 147, 40, .24);
    overflow: hidden;
}

.portal-leader-ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 24px;
    background:
        linear-gradient(135deg, transparent 49%, #fff 50%),
        linear-gradient(225deg, transparent 49%, #fff 50%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    background-position: left, right;
}

.portal-leader-photo {
    position: relative;
    z-index: 1;
    height: 330px;
    border-radius: 22px;
    background: #f7fbff;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.portal-leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Shape biru menimpa foto seperti contoh */
.portal-leader-name {
    position: relative;
    z-index: 4;
    margin: -66px 6px 0;
    background: linear-gradient(180deg, #0d438b 0%, #07326f 100%);
    color: #ffffff;
    text-align: center;
    padding: 12px 14px 25px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.15px;
    box-shadow: 0 12px 24px rgba(7, 50, 111, .20);
}

/* Label emas berada di atas shape biru */
.portal-leader-title {
    position: relative;
    z-index: 5;
    width: fit-content;
    min-width: 190px;
    margin: -20px auto 0;
    background: linear-gradient(180deg, #efbd4c 0%, #c89328 100%);
    color: #ffffff;
    text-align: center;
    padding: 5px 20px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 8px 16px rgba(200, 147, 40, .22);
}

.portal-services { background: #fff; padding: 23px 0 21px; position: relative; z-index: 5; }
.portal-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.portal-service-card { min-height: 118px; background: #fff; border: 1px solid #e8eef4; border-radius: 16px; box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 62px minmax(0,1fr) 18px; align-items: center; gap: 15px; padding: 18px 16px; color: var(--text); transition: all .18s ease; }
.portal-service-card:hover { color: var(--text); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10,53,108,.12); }
.portal-service-icon { width: 58px; height: 58px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.portal-service-icon.blue { background: linear-gradient(180deg, #1554a1, #0b3f82); }
.portal-service-icon.gold { background: linear-gradient(180deg, #dfb54f, #c48d21); }
.portal-service-icon img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); }
.portal-service-body h3 { margin: 0 0 6px; color: var(--navy); font-size: 16.5px; line-height: 1.15; font-weight: 700; letter-spacing: -.25px; }
.portal-service-body p { margin: 0; color: #506275; font-size: 12.7px; line-height: 1.54; font-weight: 400; }
.portal-service-arrow { color: #9ba8b6; font-size: 28px; line-height: 1; }

.portal-stats-section { background: #fff; padding: 5px 0 8px; }
.portal-stats-panel { min-height: 112px; display: grid; grid-template-columns: 1.24fr 1fr 1.1fr 1fr 1.18fr; align-items: stretch; background: linear-gradient(180deg, #0a3975, #092f63); color: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.portal-stat-item { display: flex; align-items: center; gap: 15px; padding: 22px 24px; position: relative; }
.portal-stat-item:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 24px; bottom: 24px; width: 1px; background: rgba(255,255,255,.26); }
.portal-stat-item img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.portal-stat-item strong { display: block; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.1px; }
.portal-stat-item:nth-child(2) strong, .portal-stat-item:nth-child(3) strong, .portal-stat-item:nth-child(4) strong { color: #e3b54d; font-size: 23px; font-weight: 800; letter-spacing: -.5px; }
.portal-stat-item span { display: block; margin-top: 5px; color: rgba(255,255,255,.92); font-size: 12.7px; line-height: 1.42; font-weight: 400; }

.portal-quote { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; padding-bottom: 10px; }
.portal-quote span { width: 160px; height: 1px; background: linear-gradient(90deg, transparent, #d0a13d, transparent); }
.portal-quote p { margin: 0; color: var(--navy); font-size: 14.5px; font-weight: 500; letter-spacing: .55px; text-align: center; }

.portal-section { padding: 64px 0; }
.portal-section-soft { background: linear-gradient(180deg, #f7fbff, #fff); }
.portal-section-head { max-width: 820px; margin: 0 auto 32px; text-align: center; }
.portal-section-head small { display: inline-block; margin-bottom: 10px; padding: 6px 14px; border-radius: 999px; background: rgba(211,161,58,.10); color: #b9861c; font-size: 12px; font-weight: 700; letter-spacing: .25px; text-transform: uppercase; }
.portal-section-head h2 { margin: 0 0 12px; color: var(--navy); font-size: clamp(25px, 2vw, 32px); line-height: 1.22; font-weight: 800; letter-spacing: -.55px; }
.portal-section-head p { margin: 0; color: var(--muted); font-size: 14.2px; line-height: 1.68; font-weight: 400; }
.portal-flow-grid, .portal-pegawai-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.portal-flow-card, .portal-pegawai-card, .portal-contact-card { background: #fff; border: 1px solid #e8eef4; border-radius: 16px; box-shadow: var(--shadow-soft); transition: all .18s ease; }
.portal-flow-card:hover, .portal-pegawai-card:hover, .portal-contact-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10,53,108,.12); }
.portal-flow-card { padding: 22px; min-height: 222px; }
.portal-flow-card b { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(180deg, #1554a1, #0b3f82); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 16px; }
.portal-flow-card.gold b { background: linear-gradient(180deg, #dfb54f, #c48d21); }
.portal-flow-card h3 { margin: 0 0 9px; color: var(--navy); font-size: 17px; font-weight: 700; letter-spacing: -.25px; }
.portal-flow-card p { margin: 0; color: #53677d; font-size: 13.4px; line-height: 1.62; font-weight: 400; }
.portal-pegawai-card { overflow: hidden; }
.portal-pegawai-photo { height: 200px; background: linear-gradient(180deg, #f4f8fd, #fff); display: flex; align-items: flex-end; justify-content: center; }
.portal-pegawai-photo img { width: 100%; height: 100%; object-fit: contain; }
.portal-pegawai-body { padding: 18px; text-align: center; }
.portal-pegawai-body h3 { margin: 0 0 7px; color: var(--navy); font-size: 15.8px; line-height: 1.35; font-weight: 700; letter-spacing: -.25px; }
.portal-pegawai-body strong { display: block; color: #b9861c; font-size: 13.4px; margin-bottom: 11px; font-weight: 600; }
.portal-pegawai-body span { color: var(--muted); font-size: 12.8px; line-height: 1.55; }
.portal-empty { grid-column: 1 / -1; border: 1px dashed #cbd6e2; border-radius: 16px; padding: 30px; text-align: center; color: var(--muted); background: #fff; }
.portal-contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.portal-contact-card { padding: 23px; }
.portal-contact-card img { width: 34px; height: 34px; object-fit: contain; margin-bottom: 15px; }
.portal-contact-card h3 { margin: 0 0 9px; color: var(--navy); font-size: 17px; font-weight: 700; letter-spacing: -.25px; }
.portal-contact-card p { margin: 0; color: var(--muted); font-size: 13.4px; line-height: 1.62; }
.portal-footer { background: #082a57; color: rgba(255,255,255,.86); text-align: center; padding: 30px 0; font-size: 13.5px; line-height: 1.68; }
.portal-footer strong { color: #fff; font-weight: 700; }

.portal-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.portal-reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1500px) {
    .portal-container { width: min(1260px, calc(100% - 54px)); }
    .portal-logo { width: 116px; height: 116px; margin-bottom: -10px; }
    .portal-brand-text strong { font-size: clamp(23px, 1.7vw, 29px); }
    .portal-brand-text span { font-size: 14px; }
    .portal-nav { min-height: 108px; }
    .portal-menu { gap: 6px; }
    .portal-menu a { padding: 11px 13px; font-size: 13.5px; }
    .portal-hero-text { padding-left: 166px; }
    .portal-hero-grid { grid-template-columns: minmax(0,1fr) 338px; gap: 50px; }
    .portal-leader-photo { height: 280px; }
}

@media (max-width: 1200px) {
    .portal-nav { min-height: auto; padding: 16px 0; flex-wrap: wrap; }
    .portal-logo { width: 82px; height: 82px; margin: 0; }
    .portal-brand-text strong { font-size: 22px; }
    .portal-brand-text span { font-size: 13px; margin-top: 8px; }
    .portal-mobile-btn { display: inline-flex; align-items: center; justify-content: center; }
    .portal-menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
    .portal-menu.show { display: flex; }
    .portal-hero-grid { grid-template-columns: 1fr; min-height: auto; padding: 42px 0; }
    .portal-hero-text { padding-left: 0; }
    .portal-service-grid, .portal-flow-grid, .portal-pegawai-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .portal-stats-panel { grid-template-columns: 1fr; }
    .portal-stat-item:not(:last-child)::after { left: 24px; right: 24px; top: auto; bottom: 0; width: auto; height: 1px; }
    .portal-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .portal-container { width: min(100% - 26px, 680px); }
    .portal-topbar { font-size: 12px; height: auto; }
    .portal-topbar-inner { height: auto; padding: 8px 0; flex-direction: column; gap: 6px; }
    .portal-top-right { flex-wrap: wrap; justify-content: center; }
    .portal-brand { gap: 12px; }
    .portal-logo { width: 58px; height: 58px; }
    .portal-brand-text strong { font-size: 16px; letter-spacing: -.35px; }
    .portal-brand-text span { display: none; }
    .portal-hero { min-height: auto; }
    .portal-hero-text h1 { font-size: 31px; line-height: 1.12; }
    .portal-hero-text h2 { font-size: 18px; }
    .portal-hero-text p { font-size: 13.6px; }
    .portal-btn { width: 100%; }
    .portal-leader { max-width: 100%; }
    .portal-leader-photo { height: 320px; }
    .portal-service-grid, .portal-flow-grid, .portal-pegawai-grid { grid-template-columns: 1fr; }
    .portal-service-card { grid-template-columns: 62px 1fr 18px; }
    .portal-quote { flex-direction: column; gap: 11px; }
    .portal-quote span { width: 120px; }
    .portal-quote p { font-size: 13.2px; }
    .portal-section { padding: 52px 0; }
    .portal-section-head h2 { font-size: 25px; }
}

/* =========================================================
   FINAL FONT BALANCE - PROPORSIONAL & ELEGAN
   Tempel di PALING BAWAH portal-landing.css
   ========================================================= */

body.portal-page {
    font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #172b46 !important;
}

/* TOP BAR */
.portal-topbar {
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* BRAND / NAMA INSTANSI */
.portal-brand-text strong {
    font-size: clamp(22px, 1.55vw, 22px) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    letter-spacing: -0.55px !important;
}

.portal-brand-text span {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    margin-top: 10px !important;
}

/* MENU NAVBAR */
.portal-menu a {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 13px !important;
    border-radius: 10px !important;
}

.portal-menu .login {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* HERO TITLE - BAGIAN PALING PENTING */
.portal-hero-text h1 {
    font-size: clamp(46px, 3vw, 46px) !important;
    line-height: 1.09 !important;
    font-weight: 600 !important;
    letter-spacing: -1.05px !important;
    max-width: 720px !important;
}

.portal-hero-text h1 span {
    font-weight: 600 !important;
}

/* HERO SUBTITLE */
.portal-hero-text h2 {
    font-size: clamp(18px, 1.35vw, 23px) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    letter-spacing: -0.25px !important;
    margin-top: 12px !important;
    margin-bottom: 16px !important;
}

/* HERO PARAGRAF */
.portal-hero-text p {
    font-size: 13.8px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
    max-width: 650px !important;
}

/* BUTTON HERO */
.portal-btn {
    min-height: 46px !important;
    min-width: 160px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
}

.portal-btn img {
    width: 18px !important;
    height: 18px !important;
}

/* FOTO KACAB */
.portal-leader-name {
    font-size: 14.5px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.portal-leader-title {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* CARD LAYANAN */
.portal-service-body h3 {
    font-size: 16px !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
}

.portal-service-body p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
}

.portal-service-card {
    min-height: 112px !important;
}

.portal-service-icon {
    width: 56px !important;
    height: 56px !important;
}

.portal-service-icon img {
    width: 28px !important;
    height: 28px !important;
}

/* PANEL STATISTIK */
.portal-stat-item strong {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.portal-stat-item:nth-child(2) strong,
.portal-stat-item:nth-child(3) strong,
.portal-stat-item:nth-child(4) strong {
    font-size: 21px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

.portal-stat-item span {
    font-size: 12.2px !important;
    line-height: 1.42 !important;
    font-weight: 400 !important;
}

.portal-stat-item img {
    width: 40px !important;
    height: 40px !important;
}

.portal-stats-panel {
    min-height: 104px !important;
}

/* QUOTE */
.portal-quote p {
    font-size: 13.8px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    letter-spacing: 0.35px !important;
}

/* JUDUL SECTION BAWAH */
.portal-section-head small {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.35px !important;
}

.portal-section-head h2 {
    font-size: clamp(24px, 1.85vw, 30px) !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -0.45px !important;
}

.portal-section-head p {
    font-size: 13.8px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

/* ALUR PELAYANAN */
.portal-flow-card h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.portal-flow-card p {
    font-size: 12.8px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
}

.portal-flow-card b {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
}

/* PEGAWAI */
.portal-pegawai-body h3 {
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.portal-pegawai-body strong {
    font-size: 12.8px !important;
    font-weight: 600 !important;
}

.portal-pegawai-body span {
    font-size: 12.3px !important;
    line-height: 1.55 !important;
}

/* KONTAK */
.portal-contact-card h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.portal-contact-card p {
    font-size: 12.8px !important;
    line-height: 1.62 !important;
}

/* FOOTER */
.portal-footer {
    font-size: 12.8px !important;
    line-height: 1.65 !important;
}

.portal-footer strong {
    font-size: 13.8px !important;
    font-weight: 700 !important;
}

/* RESPONSIVE FONT */
@media (max-width: 768px) {
    .portal-brand-text strong {
        font-size: 16px !important;
        line-height: 1.16 !important;
    }

    .portal-hero-text h1 {
        font-size: 22px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.65px !important;
    }

    .portal-hero-text h2 {
        font-size: 17px !important;
    }

    .portal-hero-text p {
        font-size: 13.2px !important;
    }

    .portal-section-head h2 {
        font-size: 24px !important;
    }
}

/* =========================================================
   HERO BUTTON FONT AWESOME ICON
   ========================================================= */

.portal-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.portal-btn-fa {
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.portal-btn-primary .portal-btn-fa {
    color: #ffffff !important;
}

.portal-btn-outline .portal-btn-fa {
    color: #07366f !important;
}

.portal-btn-outline:hover .portal-btn-fa {
    color: #ffffff !important;
}

.portal-contact-fa-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(180deg, #1554a1, #0b3f82);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
    box-shadow: 0 10px 20px rgba(7, 54, 111, .14);
}

.portal-contact-card:nth-child(2) .portal-contact-fa-icon {
    background: linear-gradient(180deg, #25d366, #128c7e);
}

.portal-contact-card:nth-child(3) .portal-contact-fa-icon {
    background: linear-gradient(180deg, #dfb54f, #c48d21);
}

.portal-contact-card p {
    margin-bottom: 12px;
    color: #607086;
    font-size: 13.5px;
    line-height: 1.7;
}

.portal-contact-card .portal-contact-detail {
    margin-top: 14px;
    margin-bottom: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(7, 54, 111, .10);
    color: #24364d;
}

.portal-contact-card .portal-contact-detail strong {
    color: #07366f;
    font-weight: 700;
}

.portal-hero .portal-hero-text {
    position: relative !important;
    left: -125px !important;
}

@media (max-width: 991.98px) {
    .portal-hero .portal-hero-text {
        left: 0 !important;
    }
}

/* =========================================================
   PEGAWAI CUSTOM FADE CAROUSEL - FIX FINAL
   ========================================================= */

#pegawaiCarousel {
    position: relative !important;
    margin-top: 28px !important;
    padding-bottom: 58px !important;
}

#pegawaiCarousel .portal-pegawai-viewport {
    position: relative !important;
    overflow: hidden !important;
    min-height: 390px !important;
}

#pegawaiCarousel .portal-pegawai-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(14px) !important;
    transition:
        opacity .32s ease,
        transform .32s ease,
        visibility .32s ease !important;
}

#pegawaiCarousel .portal-pegawai-slide.is-active {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

#pegawaiCarousel .portal-pegawai-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

#pegawaiCarousel .portal-pegawai-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px solid rgba(11, 55, 112, 0.08) !important;
    box-shadow: 0 18px 35px rgba(13, 47, 102, 0.10) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

#pegawaiCarousel .portal-pegawai-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 45px rgba(13, 47, 102, 0.16) !important;
}

#pegawaiCarousel .portal-pegawai-photo {
    height: 245px !important;
    background: linear-gradient(180deg, #f8fbff, #edf4fb) !important;
    overflow: hidden !important;
}

#pegawaiCarousel .portal-pegawai-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}

#pegawaiCarousel .portal-pegawai-body {
    padding: 17px 18px 19px !important;
    text-align: center !important;
}

#pegawaiCarousel .portal-pegawai-body h3 {
    margin: 0 0 7px !important;
    color: #07326f !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

#pegawaiCarousel .portal-pegawai-body strong {
    display: block !important;
    color: #c89328 !important;
    font-size: 12.8px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

#pegawaiCarousel .portal-pegawai-body span {
    display: block !important;
    color: #5f6f86 !important;
    font-size: 12.3px !important;
    line-height: 1.55 !important;
}

#pegawaiCarousel .portal-pegawai-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 28px !important;
    position: relative !important;
    z-index: 50 !important;
}

#pegawaiCarousel .portal-pegawai-dot {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #b7c3d4 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all .25s ease !important;
}

#pegawaiCarousel .portal-pegawai-dot.is-active {
    width: 34px !important;
    background: linear-gradient(90deg, #0d438b, #c89328) !important;
}

@media (max-width: 991.98px) {
    #pegawaiCarousel .portal-pegawai-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #pegawaiCarousel .portal-pegawai-viewport {
        min-height: 760px !important;
    }
}

@media (max-width: 575.98px) {
    #pegawaiCarousel .portal-pegawai-grid {
        grid-template-columns: 1fr !important;
    }

    #pegawaiCarousel .portal-pegawai-photo {
        height: 260px !important;
    }

    #pegawaiCarousel .portal-pegawai-viewport {
        min-height: 470px !important;
    }
}