/* ============================================
   HAEI - style.css
   Base: AdminLTE 3
   Font: Plus Jakarta Sans
   Color: Tetradic Harmony (Biru + Kuning + Hijau + Merah)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
    /* PRIMARY — Biru */
    --biru:             #0D2B6E;
    --biru-muda:        #1854B4;
    --biru-hover:       #0A2259;
    --biru-active:      #071840;
    --biru-disabled:    #8DA5CC;
    --biru-subtle:      #EBF0FA;

    /* SECONDARY — Kuning */
    --kuning:           #B8860B;
    --kuning-muda:      #D4A017;
    --kuning-hover:     #9A700A;
    --kuning-active:    #7A5808;
    --kuning-disabled:  #DEC882;
    --kuning-subtle:    #FDF8E8;

    /* TERTIARY — Hijau */
    --hijau:            #0A6E3A;
    --hijau-muda:       #12A855;
    --hijau-hover:      #085C30;
    --hijau-active:     #064524;
    --hijau-disabled:   #82C9A0;
    --hijau-subtle:     #E8F8EE;

    /* ACCENT — Merah */
    --merah:            #8F1A0D;
    --merah-muda:       #C42312;
    --merah-hover:      #771508;
    --merah-active:     #5A0F06;
    --merah-disabled:   #DC9E98;
    --merah-subtle:     #FCECEA;

    /* PUTIH */
    --putih:            #FAFBFF;
    --putih-biru:       #F0F4FC;
    --putih-kuning:     #FDFAF0;
    --putih-hijau:      #F0FAF4;
    --putih-merah:      #FDF0F0;

    /* NEUTRAL */
    --bg-page:          #F0F4FC;
    --text-main:        #0D1A33;
    --text-muted:       #5A6478;
    --text-disabled:    #A8B2C0;
    --border:           #CDD5E8;
    --border-focus:     var(--biru-muda);

    /* UTILITIES */
    --radius:           12px;
    --radius-sm:        8px;
    --shadow:           0 4px 20px rgba(13,43,110,0.10);
    --shadow-hover:     0 10px 32px rgba(13,43,110,0.20);
    --transition:       0.22s ease;
}

/* ============================================
   BASE
   ============================================ */
body {
    color: var(--text-main) !important; 
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(28px, 4vw,   52px); }
h2 { font-size: clamp(24px, 3.2vw, 42px); }
h3 { font-size: clamp(20px, 2.6vw, 34px); }
h4 { font-size: clamp(18px, 2vw,   28px); }
h5 { font-size: clamp(16px, 1.6vw, 22px); }
h6 { font-size: clamp(14px, 1.2vw, 18px); }



/* Lang system */
/* [data-id][data-en]             { visibility: hidden; } */
.lang-ready [data-id][data-en] { visibility: visible; }

/* Image brightness */
.img-brightness-low  { filter: brightness(50%); }
.img-brightness-high { filter: brightness(130%); }

/* Bold border */
.btn-bold-border { border-width: 3px !important; }

/* ============================================
   BACKGROUND
   ============================================ */
.bg-biru          { background-color: var(--biru) !important; }
.bg-biru-muda     { background-color: var(--biru-muda) !important; }
.bg-biru-subtle   { background-color: var(--biru-subtle) !important; }
.bg-kuning        { background-color: var(--kuning) !important; }
.bg-kuning-muda   { background-color: var(--kuning-muda) !important; }
.bg-kuning-subtle { background-color: var(--kuning-subtle) !important; }
.bg-hijau         { background-color: var(--hijau) !important; }
.bg-hijau-muda    { background-color: var(--hijau-muda) !important; }
.bg-hijau-subtle  { background-color: var(--hijau-subtle) !important; }
.bg-merah         { background-color: var(--merah) !important; }
.bg-merah-muda    { background-color: var(--merah-muda) !important; }
.bg-merah-subtle  { background-color: var(--merah-subtle) !important; }
.bg-putih         { background-color: var(--putih) !important; }
.bg-putih-biru    { background-color: var(--putih-biru) !important; }
.bg-putih-kuning  { background-color: var(--putih-kuning) !important; }
.bg-putih-hijau   { background-color: var(--putih-hijau) !important; }
.bg-putih-merah   { background-color: var(--putih-merah) !important; }
.bg-page          { background-color: var(--bg-page) !important; }

/* ============================================
   TEXT COLOR
   ============================================ */
.text-biru        { color: var(--biru) !important; }
.text-biru-muda   { color: var(--biru-muda) !important; }
.text-kuning      { color: var(--kuning) !important; }
.text-kuning-muda { color: var(--kuning-muda) !important; }
.text-hijau       { color: var(--hijau) !important; }
.text-hijau-muda  { color: var(--hijau-muda) !important; }
.text-merah       { color: var(--merah) !important; }
.text-merah-muda  { color: var(--merah-muda) !important; }
.text-main        { color: var(--text-main) !important; }
.text-muted-haei  { color: var(--text-muted) !important; }
.text-disabled    { color: var(--text-disabled) !important; }

/* ============================================
   LINKS
   ============================================ */
.link-biru {
    color: var(--biru-muda);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition), box-shadow var(--transition);
}
.link-biru:hover {
    color: var(--biru-hover);
    box-shadow: inset 0 -2px 0 var(--biru-hover);
}
.link-biru:active { color: var(--biru-active); }

.link-biru-muda {
    color: var(--biru-muda);
    text-decoration: none;
    transition: color var(--transition);
}
.link-biru-muda:hover { color: var(--biru); }

.link-kuning {
    color: var(--kuning-muda);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition), box-shadow var(--transition);
}
.link-kuning:hover {
    color: var(--kuning-hover);
    box-shadow: inset 0 -2px 0 var(--kuning-hover);
}
.link-kuning:active { color: var(--kuning-active); }

.link-hijau {
    color: var(--hijau-muda);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition), box-shadow var(--transition);
}
.link-hijau:hover {
    color: var(--hijau-hover);
    box-shadow: inset 0 -2px 0 var(--hijau-hover);
}
.link-hijau:active { color: var(--hijau-active); }

.link-merah {
    color: var(--merah-muda);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition), box-shadow var(--transition);
}
.link-merah:hover {
    color: var(--merah-hover);
    box-shadow: inset 0 -2px 0 var(--merah-hover);
}
.link-merah:active { color: var(--merah-active); }

.link-putih,
.link-white {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color var(--transition), box-shadow var(--transition);
}
.link-putih:hover,
.link-white:hover {
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.6);
}
.link-putih:active,
.link-white:active { color: var(--putih-biru); }

.link-biru.disabled,
.link-kuning.disabled,
.link-hijau.disabled,
.link-merah.disabled,
.link-putih.disabled,
.link-white.disabled {
    color: var(--text-disabled);
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================
   BUTTONS — Biru
   ============================================ */
.btn-biru {
    color: #fff;
    background-color: var(--biru);
    border-color: var(--biru);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-biru:hover {
    color: #fff;
    background-color: var(--biru-hover);
    border-color: var(--biru-hover);
    box-shadow: 0 6px 16px rgba(13,43,110,0.25);
    transform: translateY(-1px);
}
.btn-biru:active,
.btn-biru:focus {
    color: #fff !important;
    background-color: var(--biru-active) !important;
    border-color: var(--biru-active) !important;
    box-shadow: 0 0 0 3px rgba(24,84,180,0.3) !important;
    transform: translateY(0);
}
.btn-biru:disabled,
.btn-biru.disabled {
    color: #fff;
    background-color: var(--biru-disabled);
    border-color: var(--biru-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}
.btn-outline-biru {
    color: var(--biru);
    border-color: var(--biru);
    background: transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-outline-biru:hover {
    color: #fff;
    background-color: var(--biru);
    border-color: var(--biru);
    box-shadow: 0 6px 16px rgba(13,43,110,0.20);
    transform: translateY(-1px);
}
.btn-outline-biru:active,
.btn-outline-biru:focus {
    color: #fff !important;
    background-color: var(--biru-active) !important;
    border-color: var(--biru-active) !important;
    box-shadow: 0 0 0 3px rgba(24,84,180,0.3) !important;
}
.btn-outline-biru:disabled,
.btn-outline-biru.disabled {
    color: var(--biru-disabled);
    border-color: var(--biru-disabled);
    background: transparent;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn-outline-biru-muda {
    color: var(--biru-muda);
    border-color: var(--biru-muda);
    background: transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-outline-biru-muda:hover {
    color: #fff;
    background-color: var(--biru-muda);
    border-color: var(--biru-muda);
}

/* ============================================
   BUTTONS — Kuning
   ============================================ */
.btn-kuning {
    color: #fff;
    background-color: var(--kuning);
    border-color: var(--kuning);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-kuning:hover {
    color: #fff;
    background-color: var(--kuning-hover);
    border-color: var(--kuning-hover);
    box-shadow: 0 6px 16px rgba(184,134,11,0.25);
    transform: translateY(-1px);
}
.btn-kuning:active,
.btn-kuning:focus {
    color: #fff !important;
    background-color: var(--kuning-active) !important;
    border-color: var(--kuning-active) !important;
    box-shadow: 0 0 0 3px rgba(212,160,23,0.3) !important;
    transform: translateY(0);
}
.btn-kuning:disabled,
.btn-kuning.disabled {
    color: #fff;
    background-color: var(--kuning-disabled);
    border-color: var(--kuning-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}
.btn-outline-kuning {
    color: var(--kuning);
    border-color: var(--kuning);
    background: transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-outline-kuning:hover {
    color: #fff;
    background-color: var(--kuning);
    border-color: var(--kuning);
    box-shadow: 0 6px 16px rgba(184,134,11,0.20);
    transform: translateY(-1px);
}
.btn-outline-kuning:active,
.btn-outline-kuning:focus {
    color: #fff !important;
    background-color: var(--kuning-active) !important;
    border-color: var(--kuning-active) !important;
    box-shadow: 0 0 0 3px rgba(212,160,23,0.3) !important;
}
.btn-outline-kuning:disabled,
.btn-outline-kuning.disabled {
    color: var(--kuning-disabled);
    border-color: var(--kuning-disabled);
    background: transparent;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   BUTTONS — Hijau
   ============================================ */
.btn-hijau {
    color: #fff;
    background-color: var(--hijau);
    border-color: var(--hijau);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-hijau:hover {
    color: #fff;
    background-color: var(--hijau-hover);
    border-color: var(--hijau-hover);
    box-shadow: 0 6px 16px rgba(10,110,58,0.25);
    transform: translateY(-1px);
}
.btn-hijau:active,
.btn-hijau:focus {
    color: #fff !important;
    background-color: var(--hijau-active) !important;
    border-color: var(--hijau-active) !important;
    box-shadow: 0 0 0 3px rgba(18,168,85,0.3) !important;
    transform: translateY(0);
}
.btn-hijau:disabled,
.btn-hijau.disabled {
    color: #fff;
    background-color: var(--hijau-disabled);
    border-color: var(--hijau-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}
.btn-outline-hijau {
    color: var(--hijau);
    border-color: var(--hijau);
    background: transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-outline-hijau:hover {
    color: #fff;
    background-color: var(--hijau);
    border-color: var(--hijau);
    box-shadow: 0 6px 16px rgba(10,110,58,0.20);
    transform: translateY(-1px);
}
.btn-outline-hijau:active,
.btn-outline-hijau:focus {
    color: #fff !important;
    background-color: var(--hijau-active) !important;
    border-color: var(--hijau-active) !important;
    box-shadow: 0 0 0 3px rgba(18,168,85,0.3) !important;
}
.btn-outline-hijau:disabled,
.btn-outline-hijau.disabled {
    color: var(--hijau-disabled);
    border-color: var(--hijau-disabled);
    background: transparent;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   BUTTONS — Merah
   ============================================ */
.btn-merah {
    color: #fff;
    background-color: var(--merah-muda);
    border-color: var(--merah-muda);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-merah:hover {
    color: #fff;
    background-color: var(--merah-hover);
    border-color: var(--merah-hover);
    box-shadow: 0 6px 16px rgba(196,35,18,0.25);
    transform: translateY(-1px);
}
.btn-merah:active,
.btn-merah:focus {
    color: #fff !important;
    background-color: var(--merah-active) !important;
    border-color: var(--merah-active) !important;
    box-shadow: 0 0 0 3px rgba(196,35,18,0.3) !important;
    transform: translateY(0);
}
.btn-merah:disabled,
.btn-merah.disabled {
    color: #fff;
    background-color: var(--merah-disabled);
    border-color: var(--merah-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}
.btn-outline-merah {
    color: var(--merah-muda);
    border-color: var(--merah-muda);
    background: transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-outline-merah:hover {
    color: #fff;
    background-color: var(--merah-muda);
    border-color: var(--merah-muda);
    box-shadow: 0 6px 16px rgba(196,35,18,0.20);
    transform: translateY(-1px);
}
.btn-outline-merah:active,
.btn-outline-merah:focus {
    color: #fff !important;
    background-color: var(--merah-active) !important;
    border-color: var(--merah-active) !important;
    box-shadow: 0 0 0 3px rgba(196,35,18,0.3) !important;
}
.btn-outline-merah:disabled,
.btn-outline-merah.disabled {
    color: var(--merah-disabled);
    border-color: var(--merah-disabled);
    background: transparent;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   BUTTONS — Putih
   ============================================ */
.btn-putih {
    color: var(--biru);
    background-color: var(--putih);
    border-color: var(--putih);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-putih:hover {
    color: var(--biru-hover);
    background-color: var(--putih-biru);
    border-color: var(--putih-biru);
    box-shadow: 0 6px 16px rgba(13,43,110,0.15);
    transform: translateY(-1px);
}
.btn-putih:active,
.btn-putih:focus {
    color: var(--biru) !important;
    background-color: var(--biru-subtle) !important;
    border-color: var(--biru-subtle) !important;
    box-shadow: 0 0 0 3px rgba(24,84,180,0.2) !important;
    transform: translateY(0);
}
.btn-putih:disabled,
.btn-putih.disabled {
    color: var(--text-disabled);
    background-color: var(--putih);
    border-color: var(--border);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}
.btn-outline-putih {
    color: var(--putih);
    border-color: var(--putih);
    background: transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: all var(--transition);
}
.btn-outline-putih:hover {
    color: var(--biru);
    background-color: var(--putih);
    border-color: var(--putih);
    box-shadow: 0 6px 16px rgba(255,255,255,0.20);
    transform: translateY(-1px);
}
.btn-outline-putih:active,
.btn-outline-putih:focus {
    color: var(--biru) !important;
    background-color: var(--putih-biru) !important;
    border-color: var(--putih-biru) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3) !important;
}
.btn-outline-putih:disabled,
.btn-outline-putih.disabled {
    color: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.4);
    background: transparent;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   BADGE
   ============================================ */
.badge-biru,
.badge-biru-muda,
.badge-kuning,
.badge-hijau,
.badge-merah,
.badge-berita,
.badge-artikel,
.badge-online,
.badge-offline,
.badge-hybrid {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-block;
    color: #fff;
}
.badge-biru      { background: var(--biru); }
.badge-biru-muda { background: var(--biru-muda); }
.badge-kuning    { background: var(--kuning); }
.badge-hijau     { background: var(--hijau-muda); }
.badge-merah     { background: var(--merah-muda); }
.badge-berita    { background: var(--merah-muda); }
.badge-artikel   { background: var(--kuning); }
.badge-online    { background: var(--hijau-muda); }
.badge-offline   { background: var(--merah-muda); }
.badge-hybrid    { background: var(--kuning); }

/* ============================================
   ALERT
   ============================================ */
.alert-biru,
.alert-kuning,
.alert-hijau,
.alert-merah {
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    border-left-width: 4px;
    border-left-style: solid;
}
.alert-biru   { background: var(--putih-biru);   border-left-color: var(--biru-muda);   color: var(--biru); }
.alert-kuning { background: var(--putih-kuning); border-left-color: var(--kuning-muda); color: var(--kuning-active); }
.alert-hijau  { background: var(--putih-hijau);  border-left-color: var(--hijau-muda);  color: var(--hijau); }
.alert-merah  { background: var(--putih-merah);  border-left-color: var(--merah-muda);  color: var(--merah); }

/* ============================================
   FORM
   ============================================ */
.form-control {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(24,84,180,0.15);
    background-color: var(--putih);
    color: var(--text-main);
    outline: none;
}
.form-control::placeholder { color: var(--text-disabled); }
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--biru-subtle);
    color: var(--text-disabled);
    border-color: var(--border);
    cursor: not-allowed;
}
.input-group-text {
    background-color: var(--putih-biru);
    border-color: var(--border);
    color: var(--text-muted);
}
.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--hijau-muda) !important;
    box-shadow: 0 0 0 3px rgba(18,168,85,0.15) !important;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--merah-muda) !important;
    box-shadow: 0 0 0 3px rgba(196,35,18,0.15) !important;
}
.valid-feedback   { color: var(--hijau); }
.invalid-feedback { color: var(--merah-muda); }

/* ============================================
   CARD
   ============================================ */
.card {
    border-color: var(--border);
    border-radius: var(--radius);
    background: var(--putih);
    transition: transform var(--transition), box-shadow var(--transition);
}
.card-hover {
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover) !important;
}
.card-hover:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow) !important;
}
.card-hover-biru:hover   { box-shadow: 0 10px 32px rgba(13,43,110,0.20) !important; }
.card-hover-kuning:hover { box-shadow: 0 10px 32px rgba(184,134,11,0.20) !important; }
.card-hover-hijau:hover  { box-shadow: 0 10px 32px rgba(10,110,58,0.20) !important; }
.card-hover-merah:hover  { box-shadow: 0 10px 32px rgba(196,35,18,0.20) !important; }
.card-hover-zoom {
    cursor: pointer;
    border-radius: var(--radius) !important;
    transition: transform var(--transition), box-shadow var(--transition);
}
.card-hover-zoom:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover) !important;
}
.card-hover-zoom i,
.card-hover-zoom p,
.card-hover-zoom span { display: inline-block; transition: all var(--transition); }
.card-hover-zoom:hover i   { transform: scale(1.08); }
.card-hover-zoom:hover p   { transform: scale(1.03); }
.card-hover-zoom:hover span { transform: translateY(-2px); }

/* ============================================
   PAGINATION
   ============================================ */
.pagination .page-link,
.pagination a {
    background: var(--putih);
    color: var(--biru);
    border-color: var(--border);
    border-radius: var(--radius-sm) !important;
    margin: 0 3px;
    font-weight: 600;
    font-size: 13px;
    transition: all var(--transition);
}
.pagination .page-link:hover,
.pagination a:hover {
    background: var(--biru-muda);
    border-color: var(--biru-muda);
    color: #fff;
    box-shadow: 0 4px 14px rgba(13,43,110,0.20);
}
.pagination .page-item.active .page-link {
    background: var(--biru);
    border-color: var(--biru);
    color: #fff;
    box-shadow: var(--shadow);
}
.pagination .page-item.disabled .page-link {
    background: var(--putih);
    color: var(--text-disabled);
    border-color: var(--border);
    cursor: not-allowed;
}

/* ============================================
   TOPBAR
   ============================================ */
.topbar {
    font-size: 12px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1051;
}
.topbar-menu > * {
    position: relative;
    padding: 0 10px;
}
.topbar-menu > *:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -3px;
    color: var(--text-muted);
}
.topbar a {
    text-decoration: none;
    color: var(--text-main);
    transition: color var(--transition);
}
.topbar a:hover { color: var(--biru-muda); }
.flag-3d { filter: drop-shadow(2px 3px 1px rgb(0 0 0 / 0.4)); }

/* ============================================
   NAVBAR
   ============================================ */
.main-header.navbar {
    box-shadow: 0 2px 16px rgba(13,43,110,0.08) !important;
}

.fixed-top { position: fixed; width: 100%; z-index: 1000; }
.nav-link {
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em;
    transition: color var(--transition) !important;
}
.nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: var(--biru-muda) !important;
    border-bottom: 2px solid var(--biru-muda);
    padding-bottom: 4px;
}

/* Navbar Search */
.navbar-center-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}
.nav-search-box {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) translateY(-10px);
    width: 60%;
    padding: 8px 15px;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
}
.nav-search-box.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) translateY(0);
}
.nav-search-box input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.navbar-toggler-icon.is-open {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' d='M6 6L24 24M24 6L6 24'/%3E%3C/svg%3E") !important;
}
/* ============================================
   DROPDOWN
   ============================================ */
.dropdown-menu {
    border: none !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 8px 32px rgba(13,43,110,0.14) !important;
    padding: 8px !important;
    animation: dropIn 0.15s ease;
}

@keyframes dropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dropdown-item {
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500;
    padding: 8px 14px !important;
    transition: background var(--transition), color var(--transition);
}
.dropdown-item.active,
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:active {
    background-color: var(--biru) !important;
    color: #fff !important;
}

/* Khusus topbar — paksa di kanan */
.topbar .dropdown-menu {
    right: 0 !important;
    left: 0 !important;
}

.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }

/* ============================================
   CAROUSEL
   ============================================ */
.carousel-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

#MyCarousel,
#MyCarousel .carousel-inner,
#MyCarousel .carousel-item {
    height: 100vh;
}

.custom-caption {
    top: 0;
    bottom: 0;
    left: 10%;
    right: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Kontrol carousel */
.carousel-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.carousel-controls button {
    background-color: var(--biru);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.carousel-controls button:hover {
    background-color: var(--biru-hover);
}

/* ============================================
   CAROUSEL LAPTOP
   ============================================ */

@media (min-width: 992px) {

    #MyCarousel,
    #MyCarousel .carousel-inner,
    #MyCarousel .carousel-item,
    .carousel-image {
        height: 90vh;
        min-height: 400px;
    }

}

/* ============================================
   BANNER
   ============================================ */
.banner-item {
    position: relative;
    height: 350px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--biru) 0%, var(--biru-muda) 100%);
}
.banner-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.2;
    transition: transform 0.3s ease;
}
.banner-caption {
    position: absolute;
    top: 50%; left: 5%;
    transform: translateY(-50%);
    color: white;
    padding: 20px;
}
.banner-text {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.headers-background {
    background-color: var(--biru);
    height: 300px;
    display: flex;
    flex-direction: column;
    color: white;
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.breadcrumbs { margin-top: 10px; font-size: 18px; }

/* ============================================
   SECTION HEADING BAR
   ============================================ */
.post-date-bar {
    width: 5px;
    height: 0.8em;
    background: linear-gradient(180deg, var(--biru-muda), var(--biru));
    display: inline-block;
    border-radius: 3px;
    vertical-align: -0.1em;
    margin-right: 10px;
}

/* ============================================
   CONTAINER HEADING
   ============================================ */
.container-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--biru);
    padding-bottom: 10px;
    margin: 0 0 10px 0;
}
.container-heading h2 { margin: 0; color: var(--biru); }
.container-heading a  { text-decoration: none; color: var(--biru); }
.section-blue { background-color: var(--biru); color: #fff; }

/* ============================================
   LISTING ROW
   ============================================ */
.listing-row {
    padding: 15px;
    border-radius: var(--radius);
    background: var(--putih);
    box-shadow: var(--shadow);
    margin-bottom: 8px;
    transition: background var(--transition), color var(--transition),
                box-shadow var(--transition), transform var(--transition);
}
.listing-row:hover {
    background: var(--biru) !important;
    color: #fff !important;
    cursor: pointer;
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.listing-row:hover h1,
.listing-row:hover h2,
.listing-row:hover h3,
.listing-row:hover h4,
.listing-row:hover h5,
.listing-row:hover h6,
.listing-row:hover p,
.listing-row:hover div,
.listing-row:hover small,
.listing-row:hover span,
.listing-row:hover i,
.listing-row:hover a {
    color: #fff !important;
}
.listing-row:hover .text-muted {
    color: rgba(255,255,255,0.75) !important;
}
.listing-row img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    transition: transform var(--transition);
}
.listing-row:hover img { transform: scale(1.05); }

/* ============================================
   NEWS ITEM
   ============================================ */
.news-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    transition: filter 0.3s ease;
}
.news-item:hover { cursor: pointer; filter: brightness(0.88); }
.news-item img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    transition: transform 0.3s ease;
}
.news-item:hover img { transform: scale(1.06); }
.news-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    color: white;
    padding: 16px 12px 12px;
    width: 100%;
    border-radius: 0 0 var(--radius) var(--radius);
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(13,26,51,0.92));
}
.news-text {
    margin-bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    text-align: justify;
    margin-top: 10px;
}

/* ============================================
   EVENT CARD
   ============================================ */
.event-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}
.event-card:hover {
    cursor: pointer;
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.event-card img { transition: transform 0.3s ease; }
.event-card:hover img { transform: scale(1.06); }
.event-content { position: relative; overflow: hidden; }
.event-date {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(13,43,110,0.82);
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 10px;
    z-index: 1;
}
.event-date span { font-weight: bold; }
.event-date-responsif {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background-color: var(--biru);
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 10px;
}
.event-date-responsif span { font-weight: bold; }
.card-img-top { width: 100%; height: auto; }

/* ============================================
   GALLERY
   ============================================ */
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; }
.gallery-title-container {
    position: absolute;
    left: 0; bottom: 0;
    background-color: rgba(13,43,110,0.82);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    color: #fff;
    text-align: justify;
    height: 80px;
    overflow: hidden;
    transition: height 0.35s ease;
}
.gallery-item:hover .gallery-title-container {
    height: 100%;
    font-size: 1rem;
    cursor: pointer;
}

/* ============================================
   SHORT STORIES (Video)
   ============================================ */
#ShortStories {
    overflow-x: hidden;
    position: relative;
}
#ShortStories video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
}

/* ============================================
   ICON CONTAINER
   ============================================ */
.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--biru-muda);
    border-radius: 50%;
    margin-right: 10px;
    color: white;
}

/* ============================================
   FOOTER
   ============================================ */
.top-footer {
    background-color: var(--biru) !important;
    color: white;
    padding: 36px 0;
    border-top: 4px solid var(--biru-muda);
}
.bottom-footer {
    background-color: var(--biru-muda) !important;
    color: white;
    padding: 12px 0;
}
.social-media a {
    color: rgba(255,255,255,0.8);
    margin: 0 8px;
    display: inline-block;
    transition: color var(--transition), transform var(--transition);
}
.social-media a:hover {
    color: var(--kuning-muda);
    transform: translateY(-3px);
}
.footer-logo { display: block; margin: 0 auto; }

/* ============================================
   MAP
   ============================================ */
.map-container iframe {
    width: 100%;
    height: 317px;
    border: 0;
    border-radius: var(--radius);
}

/* ============================================
   FULLCALENDAR
   ============================================ */

/* Container */
#myCalendar {
    width: 100%;
    max-width: 100%;
}

.fc {
    width: 100%;
    max-width: 100%;
}

/* Toolbar */
.fc-toolbar,
.fc-toolbar.fc-header-toolbar {
    padding: 0;
}


/* Calendar Header */
.fc-col-header-cell-cushion {
    color: var(--biru) !important;
    font-weight: 700 !important;
}

.fc-col-header-cell-cushion:hover {
    color: var(--biru-muda) !important;
}

.fc-daygrid-day-number {
    color: var(--biru-muda) !important;
    font-weight: 600 !important;
}


/* Button */
.fc .fc-button,
.fc .fc-button-primary {
    background: var(--putih) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-transform: capitalize !important;
    transition: all var(--transition) !important;
}

.fc .fc-button:hover {
    background: var(--biru-subtle) !important;
    border-color: var(--biru-muda) !important;
    color: var(--biru) !important;
}

.fc .fc-button-active,
.fc .fc-button[aria-pressed="true"] {
    background: var(--biru) !important;
    border-color: var(--biru) !important;
    color: #fff !important;
}

.fc .fc-button:focus,
.fc .fc-button:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--biru) !important;
}

.fc .fc-button-group {
    box-shadow: none !important;
}

.fc .fc-button:disabled,
.fc .fc-button[disabled],
.fc .fc-button[aria-disabled="true"] {
    color: var(--text-disabled) !important;
    background: var(--putih) !important;
    border-color: var(--border) !important;
    cursor: not-allowed !important;
    opacity: 0.55;
    box-shadow: none !important;
}


/* Event Color */
.fc .fc-h-event.event-online {
    background-color: var(--hijau-muda) !important;
    border-color: var(--hijau-muda) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: filter var(--transition), box-shadow var(--transition);
}

.fc .fc-h-event.event-offline {
    background-color: var(--merah-muda) !important;
    border-color: var(--merah-muda) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: filter var(--transition), box-shadow var(--transition);
}

.fc .fc-h-event.event-hybrid {
    background-color: var(--kuning) !important;
    border-color: var(--kuning) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: filter var(--transition), box-shadow var(--transition);
}

.fc .fc-h-event.event-online .fc-event-title,
.fc .fc-h-event.event-offline .fc-event-title,
.fc .fc-h-event.event-hybrid .fc-event-title {
    color: #fff !important;
}

/* Event Color — Hover */
.fc .fc-h-event.event-online:hover,
.fc .fc-h-event.event-offline:hover,
.fc .fc-h-event.event-hybrid:hover {
    filter: brightness(0.92);
    box-shadow: var(--shadow-hover);
}


/* Popup Event */
.fc-event-popup {
    position: fixed;
    display: none;
    z-index: 99999;
    width: min(280px, 90vw);
    max-width: calc(100vw - 20px);
    background: var(--putih);
    border-radius: var(--radius);
    border: none;
    box-shadow: 0 16px 48px rgba(13,43,110,0.16);
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow var(--transition);
}

.fc-event-popup:hover {
    box-shadow: var(--shadow-hover);
}

.fc-event-popup > div > div {
    display: block !important;
    padding: 12px 16px !important;
}

.fc-event-popup > div > div > div:first-child {
    width: 100% !important;
    height: 110px !important;
    margin: 0 0 10px 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}

.fc-event-popup > div > div > div:first-child img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
}

.fc-event-popup > div > div > div:last-child {
    width: 100% !important;
}

.fc-event-popup > div > div > div:last-child > div:first-child {
    width: 100% !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: justify !important;
    color: var(--text-main) !important;
}

.fc-event-popup > div > div > div:last-child > div:last-child {
    width: 100% !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: justify !important;
    color: var(--text-muted) !important;
}


/* Legend */
.legend-box {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 5px;
}


/* Responsive */
@media (max-width: 768px) {

    #myCalendar,
    #myCalendar .fc,
    #myCalendar .fc-view-harness,
    #myCalendar .fc-view {
        width: 100%;
        max-width: 100%;
    }

    .fc-toolbar,
    .fc-toolbar.fc-header-toolbar {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .fc-toolbar-chunk {
        max-width: 100%;
    }

    .fc .fc-button {
        font-size: 0.8rem;
        padding: 0.35rem 0.55rem;
    }

    .fc-event-popup {
        width: min(280px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }

    .fc-event-popup > div > div {
        padding: 12px 14px !important;
    }

    .fc-event-popup > div > div > div:first-child {
        width: 100% !important;
        height: 140px !important;
    }

    .fc-event-popup > div > div > div:first-child img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
    }
}

/* Small Mobile */
@media (max-width: 576px) {

    .fc-toolbar.fc-header-toolbar {
        align-items: center;
    }

    .fc-toolbar-title {
        font-size: 1.1rem !important;
    }

    .fc .fc-button {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }

    .fc-event-popup {
        width: calc(100vw - 20px);
        max-width: 280px;
    }

    .fc-event-popup > div > div {
        padding: 12px 14px !important;
    }

    .fc-event-popup > div > div > div:first-child {
        height: 140px !important;
    }
}

/* ============================================
   POST CONTENT
   ============================================ */
.post-content {
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-main);
}
.post-content img {
    max-width: 100%;
    border-radius: var(--radius);
    margin: 12px 0;
}

/* ============================================
   RESPONSIF
   ============================================ */
@media (max-width: 768px) {
    
	.main-header.navbar {
        top: 0 !important; /* mobile: topbar tidak ada, navbar ke atas */
    }
	
	section { padding: 28px 0; }

    .map-container         { max-width: 100%; }
    .headers-background    { height: 150px; background-size: 200%; }
    .news-item img         { height: 200px; }
    #ShortStories video    { height: 240px; }
    .listing-row img       { height: 140px; }

    .dropdown-submenu .dropdown-menu {
        position: relative;
        left: 0;
        margin-left: 15px;
    }

    /* ============================================
   CAROUSEL MOBILE
   ============================================ */
    #MyCarousel,
    #MyCarousel .carousel-inner,
    #MyCarousel .carousel-item,
    .carousel-image {
        height: 85vh;
        min-height: 420px;
    }

    .custom-caption {
        left: 7%;
        right: 7%;
    }

    /* ============================================
   BANNER MOBILE
   ============================================ */
    .banner-item     { height: 150px; }
    .banner-caption  { left: 0; padding: 12px 16px; transform: translateY(-50%); }
	
	/* ============================================
   FULLCALENDAR MOBILE
   ============================================ */
	.fc {
        width: 100%;
        max-width: 100%;
    }

    .fc-toolbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .fc-toolbar-title {
        font-size: 1.1rem;
    }

    .fc .fc-button {
        padding: 0.35rem 0.55rem;
        font-size: 0.8rem;
    }
	    .fc-event-popup {
        width: calc(100vw - 20px);
        max-width: 360px;
    }

    .haei-inline-pages-user-home-event-php-5 {
        padding: 10px;
        gap: 10px;
    }

    .haei-inline-pages-user-home-event-php-6 {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .haei-inline-pages-user-home-event-php-7 {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
    }

    .haei-inline-pages-user-home-event-php-9 {
        font-size: 13px;
    }

    .haei-inline-pages-user-home-event-php-10 {
        font-size: 11px;
    }	
}
/* ===========================
   HALAMAN SEJARAH (History)
   Dipindahkan dari inline <style> agar konsisten & bisa dipakai ulang.
=========================== */
.hst-wrap        { max-width: 1080px; }
.hst-lead        { border-left: 5px solid var(--biru, #0D2B6E); background: #EBF0FA; border-radius: 0 14px 14px 0; }
.hst-img-card    { border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px rgba(13,43,110,.18); }
.hst-img-card img{ width: 100%; display: block; }
.hst-content     { line-height: 1.8; color: #3a3f47; font-size: 1.02rem; text-align: justify; }
.hst-content p   { margin-bottom: 1.1rem; }
.hst-stat        { background:#fff; border:1px solid #e7ebf3; border-radius:16px; transition:.25s;
                   box-shadow:0 6px 18px rgba(13,43,110,.06); }
.hst-stat:hover  { transform: translateY(-4px); box-shadow:0 14px 30px rgba(13,43,110,.12); }
.hst-stat .num   { font-size: 1.9rem; font-weight: 800; color: var(--biru, #0D2B6E); }
.hst-stat .lbl   { color:#7a808a; font-size:.9rem; }
.hst-quote       { background: linear-gradient(135deg,#0D2B6E,#1854B4); color:#fff; border-radius:18px; }

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

/* Extracted from pages/user/ContactUs.php */
.cu-card       { background:#fff; border:1px solid #e9edf4; border-radius:16px; transition:.25s; height:100%; }
    .cu-card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(13,43,110,.12); border-color:#c9d6ee; }
    .cu-icon       { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
                     background:linear-gradient(135deg,#0D2B6E,#1854B4); color:#fff; font-size:1.3rem; flex:0 0 56px; }
    .cu-lbl        { font-size:.78rem; color:#8a8f99; text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
    .cu-val        { font-weight:600; color:#22252b; word-break:break-word; }
    .cu-val a      { color:#22252b; }
    .cu-map        { border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(13,43,110,.15); }
    .cu-map iframe { width:100%; height:460px; border:0; display:block; }
    .cu-head h3    { color:#0D2B6E; font-weight:800; }
    .cu-cta        { background:linear-gradient(135deg,#0D2B6E,#1854B4); color:#fff; border-radius:16px; }
    .cu-cta a.btn  { background:#fff; color:#0D2B6E; font-weight:700; border-radius:10px; }

.haei-inline-pages-user-contactus-php-1{gap:16px;}

.haei-inline-pages-user-contactus-php-2{gap:16px;}

.haei-inline-pages-user-contactus-php-3{gap:16px;}

.haei-inline-pages-user-contactus-php-4{gap:14px;}

.haei-inline-pages-user-contactus-php-5{opacity:.85;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-komisariat-php-1{width:48px;height:48px;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

/* Extracted from pages/user/history.php */
.hst-content{text-align:justify;line-height:1.8;}
.hst-content p{text-align:justify;margin-bottom:1rem;}
.hst-lead{text-align:left;}
.hst-stat{min-height:145px;}
.hst-stat .num{line-height:1.15;min-height:42px;display:flex;align-items:center;justify-content:center;}
.hst-stat .lbl{line-height:1.4;}
.roadmap-panel{text-align:left;}
.roadmap-panel-title{line-height:1.4;}
.causale{line-height:1.6;text-align:left;}

@media (max-width:767.98px){
    .hst-content{text-align:left;}
    .hst-content p{text-align:left;}
    .hst-stat{min-height:125px;}
}

.haei-inline-pages-user-history-php-1{color:#0D2B6E;}

.haei-inline-pages-user-history-php-2{color:#0D2B6E;}

.haei-inline-pages-user-history-php-3{opacity:.6;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-susunanpengurus-php-1{background:#fff;}

.haei-inline-pages-user-susunanpengurus-php-2{padding-bottom:12px;}

.haei-inline-pages-user-susunanpengurus-php-3{width:140px;height:140px;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-event-detailevent-php-1{gap:8px; flex-wrap:wrap;}

.haei-inline-pages-user-event-detailevent-php-2{gap:4px;}

.haei-inline-pages-user-event-detailevent-php-3{color:var(--biru-muda);}

.haei-inline-pages-user-event-detailevent-php-4{width:100%; border-radius:10px; margin-bottom:24px; box-shadow:0 4px 16px rgba(0,0,0,0.10); overflow:hidden;}

.haei-inline-pages-user-event-detailevent-php-5{font-size:15px; line-height:1.8;}

.haei-inline-pages-user-event-detailevent-php-6{font-size:15px; line-height:1.8; display:none;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-event-listevent-php-1{background:var(--biru-muda);}

.haei-inline-pages-user-event-listevent-php-2{background:var(--merah-muda);}

.haei-inline-pages-user-event-listevent-php-3{background:var(--kuning);}

.haei-inline-pages-user-event-listevent-php-4{background:var(--text-disabled); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;}

.haei-inline-pages-user-event-listevent-php-5{gap:4px;}

.haei-inline-pages-user-event-listevent-php-6{color:var(--merah-muda);}

.haei-inline-pages-user-event-listevent-php-7{overflow:hidden;}

.haei-inline-pages-user-event-listevent-php-8{font-weight:bold; text-align:justify; margin:0 0 6px 0;}

.haei-inline-pages-user-event-listevent-php-9{font-size:14px; text-align:justify;}

.haei-inline-pages-user-event-listevent-php-10{gap:6px;}

.haei-inline-pages-user-event-listevent-php-11{background:${color}; color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;}

.haei-inline-pages-user-event-listevent-php-12{gap:4px;}

.haei-inline-pages-user-event-listevent-php-13{color:var(--biru-muda);}

.haei-inline-pages-user-event-listevent-php-14{cursor:pointer}

.haei-inline-pages-user-event-listevent-php-15{padding:10px; display:flex; gap:10px;}

.haei-inline-pages-user-event-listevent-php-16{width:70px; height:70px; overflow:hidden; border-radius:8px; flex-shrink:0;}

.haei-inline-pages-user-event-listevent-php-17{width:100%; height:100%; object-fit:cover;}

.haei-inline-pages-user-event-listevent-php-18{flex:1;}

.haei-inline-pages-user-event-listevent-php-19{font-weight:600; font-size:14px; line-height:1.4;}

.haei-inline-pages-user-event-listevent-php-20{font-size:12px; color:var(--text-muted); margin-top:4px;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-news-listnews-php-1{overflow:hidden;}

.haei-inline-pages-user-news-listnews-php-2{font-weight:bold; text-align:justify; margin:0 0 6px 0;}

.haei-inline-pages-user-news-listnews-php-3{font-size:14px; text-align:justify;}

.haei-inline-pages-user-news-listnews-php-4{gap:6px;}

.haei-inline-pages-user-news-listnews-php-5{font-size:10px; padding:2px 8px; border-radius:4px;}

.haei-inline-pages-user-news-listnews-php-6{gap:4px;}

.haei-inline-pages-user-news-listnews-php-7{color:var(--biru-muda);}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-news-detailnews-php-1{gap:8px; flex-wrap:wrap;}

.haei-inline-pages-user-news-detailnews-php-2{gap:4px;}

.haei-inline-pages-user-news-detailnews-php-3{color:var(--biru-muda);}

.haei-inline-pages-user-news-detailnews-php-4{width:100%; border-radius:10px; margin-bottom:24px; box-shadow:0 4px 16px rgba(0,0,0,0.10); overflow:hidden;}

.haei-inline-pages-user-news-detailnews-php-5{font-size:15px; line-height:1.8; color:#333;}

.haei-inline-pages-user-news-detailnews-php-6{font-size:15px; line-height:1.8; color:#333; display:none;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-member-formregistrationmember-php-1{cursor:pointer;}

.haei-inline-pages-user-member-formregistrationmember-php-2{cursor:pointer;}

.haei-inline-pages-user-member-formregistrationmember-php-3{max-width:340px;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-member-listmember-php-1{background-image: url('assets/images/Banner/organization.png'}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-home-news-php-1{overflow:hidden;}

.haei-inline-pages-user-home-news-php-2{gap:6px;}

.haei-inline-pages-user-home-news-php-3{background:' . $badgeColor . '; color:#fff; font-size:10px; font-weight:600; padding:2px 8px; border-radius:4px;}

.haei-inline-pages-user-home-news-php-4{font-size:12px; margin:0;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-home-event-php-1{background:#0000B3;}

.haei-inline-pages-user-home-event-php-2{background:#B30900;}

.haei-inline-pages-user-home-event-php-3{background:#B39200;}

.haei-inline-pages-user-home-event-php-4{cursor:pointer}

.haei-inline-pages-user-home-event-php-5{padding:10px; display:flex; gap:10px;}

.haei-inline-pages-user-home-event-php-6{width:70px; height:70px; overflow:hidden; border-radius:8px; flex-shrink:0;}

.haei-inline-pages-user-home-event-php-7{width:100%; height:100%; object-fit:cover;}

.haei-inline-pages-user-home-event-php-8{flex:1;}

.haei-inline-pages-user-home-event-php-9{font-weight:600; font-size:14px; line-height:1.4;}

.haei-inline-pages-user-home-event-php-10{font-size:12px; color:#666; margin-top:4px;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-home-programsservices-php-1{cursor:pointer;}

.haei-inline-pages-user-home-programsservices-php-2{cursor:pointer;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-home-slider-php-1{display:none;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-home-shortstories-php-1{height:400px; object-fit:cover;}

.haei-inline-pages-user-home-shortstories-php-2{font-weight:bold;}

.haei-inline-pages-user-home-shortstories-php-3{display:none;}

/* ============================================================
   Page-level styles centralized by audit/restructure
   ============================================================ */

.haei-inline-pages-user-searchresult-searchresultdetail-php-1{font-size:10px; padding:2px 8px; border-radius:4px;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-2{background:${color}; color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-3{background:var(--text-disabled); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-4{gap:4px;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-5{color:var(--merah-muda);}

.haei-inline-pages-user-searchresult-searchresultdetail-php-6{overflow:hidden;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-7{font-weight:bold; text-align:justify; margin:0 0 6px 0;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-8{font-size:14px; text-align:justify;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-9{gap:6px;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-10{gap:4px;}

.haei-inline-pages-user-searchresult-searchresultdetail-php-11{color:var(--biru-muda);}

/* Extracted inline styles (audit pass 2) */

.haei-inline2-pages-verifymember-php-1{max-height:70px;}

.haei-inline2-pages-verifymember-php-2{letter-spacing:2px;}

.haei-inline2-pages-verifymember-php-3{width:84px;height:84px;font-size:34px;}

.haei-inline2-pages-verifymember-php-4{gap:8px;}

.haei-inline2-pages-verifymember-php-5{gap:6px;}

.haei-inline2-pages-verifymember-php-6{gap:6px;}

/* Extracted inline styles (audit pass 2) */

.haei-inline2-pages-login-php-1{max-height:70px;}

.haei-inline2-pages-login-php-2{cursor:pointer}

.haei-inline2-pages-login-php-3{gap:8px;}

.haei-inline2-pages-login-php-4{gap:6px;}

.haei-inline2-pages-login-php-5{gap:6px;}

/* Extracted inline styles (audit pass 2) */

.haei-inline2-pages-aktivasiakun-php-1{font-size:56px;}

.haei-inline2-pages-aktivasiakun-php-2{cursor:pointer}

.haei-inline2-pages-aktivasiakun-php-3{cursor:pointer}

.haei-inline2-pages-aktivasiakun-php-4{font-size:56px;}

.haei-inline2-pages-aktivasiakun-php-5{gap:8px;}

.haei-inline2-pages-aktivasiakun-php-6{gap:6px;}

.haei-inline2-pages-aktivasiakun-php-7{gap:6px;}

/* Extracted inline styles (audit pass 2) */

.haei-inline2-pages-resetpassword-php-1{max-height:70px}

.haei-inline2-pages-resetpassword-php-2{gap:8px}

.haei-inline2-pages-resetpassword-php-3{background:#fff;border-radius:12px;max-width:420px;width:100%;padding:28px;text-align:center;box-shadow:0 15px 40px rgba(0,0,0,.25);}

.haei-inline2-pages-resetpassword-php-4{font-size:56px;color:#28a745;line-height:1;margin-bottom:15px;}

.haei-inline2-pages-resetpassword-php-5{margin-bottom:10px;}

.haei-inline2-pages-resetpassword-php-6{color:#6c757d;}

.haei-inline2-pages-resetpassword-php-7{background:#0D2B6E;color:#fff;border:0;border-radius:6px;padding:10px 22px;font-weight:600;}

/* Extracted inline styles (audit pass 2) */

.haei-inline2-pages-forgotpassword-php-1{max-height:70px;}

.haei-inline2-pages-forgotpassword-php-2{gap:8px;}

.haei-inline2-pages-forgotpassword-php-3{gap:6px;}

.haei-inline2-pages-forgotpassword-php-4{gap:6px;}

/* Centralized frontend page component styles */
.haei-org-avatar{width:140px;height:140px;object-fit:cover;border:5px solid #fff;}
.haei-badge-small{font-size:11px;padding:3px 10px;border-radius:5px;}
.haei-event-hero{width:100%;max-height:420px;object-fit:cover;display:block;}
.haei-news-hero{width:100%;max-height:650px;object-fit:cover;display:block;}


/* Reset Password */
.reset-card {
    max-width: 480px;
    margin: 0 auto;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12) !important;
    background: #fbfcff;
}
.reset-card .card-body { padding: 24px 22px !important; }
.password-toggle { cursor: pointer; min-width: 44px; justify-content: center; }
.reset-feedback { min-height: 20px; margin-top: 4px; }
.reset-feedback small { font-size: 13px; }
.reset-btn { height: 46px; border-radius: 24px; font-weight: 700; }
.btn-biru { background: #0D2B6E; border-color: #0D2B6E; color: #fff; }
.btn-biru:hover, .btn-biru:focus { background: #0a2258; border-color: #0a2258; color: #fff; }
.btn-biru:disabled { opacity: .55; }
.language-row { border-top: 1px solid #e5e5e5; padding-top: 16px; margin-top: 16px; }