/* =========================================================
   WARGAHUB
   Mobile First Application
========================================================= */

:root {

    --primary: #087f5b;
    --primary-dark: #056647;
    --primary-light: #dff5ec;

    --background: #f5f7f6;
    --surface: #ffffff;

    --text: #18221e;
    --text-secondary: #68736e;
    --text-soft: #89928e;

    --border: #e7ece9;

    --danger: #dc3545;
    --warning: #f5a623;

    --shadow:
        0 8px 26px
        rgba(25, 55, 43, .07);

    --radius-small: 12px;
    --radius: 18px;
    --radius-large: 24px;

    --bottom-nav-height: 72px;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

    -webkit-tap-highlight-color:
        transparent;

}


html {

    margin: 0;

    padding: 0;

    background:
        var(--background);

}


body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    overflow-x:
        hidden;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


button:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

}


input,
select,
textarea {

    width:
        100%;

    min-height:
        48px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        #ffffff;

    padding:
        0 14px;

    color:
        var(--text);

    outline:
        none;

    transition:
        border-color .2s,
        box-shadow .2s;

}


textarea {

    padding:
        14px;

    resize:
        vertical;

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(8,127,91,.10);

}


/* =========================================================
   APP
========================================================= */

#app {

    width:
        100%;

    min-height:
        100vh;

}


.screen {

    display:
        none;

    width:
        100%;

    min-height:
        100vh;

}


.screen.active {

    display:
        block;

}


/* =========================================================
   SPLASH
========================================================= */

.splash-screen {

    background:
        linear-gradient(
            145deg,
            #087f5b,
            #0aa374
        );

    color:
        white;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        30px;

}


.splash-screen.active {

    display:
        flex;

}


.splash-logo {

    width:
        96px;

    height:
        96px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        28px;

    background:
        rgba(255,255,255,.15);

    border:
        1px solid
        rgba(255,255,255,.26);

    backdrop-filter:
        blur(12px);

    font-size:
        30px;

    font-weight:
        800;

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.15);

}


.splash-screen h1 {

    margin:
        24px 0 7px;

    font-size:
        clamp(
            28px,
            8vw,
            38px
        );

}


.splash-screen p {

    margin:
        0;

    opacity:
        .9;

    font-size:
        14px;

}


.splash-loader {

    width:
        28px;

    height:
        28px;

    margin-top:
        42px;

    border:
        3px solid
        rgba(255,255,255,.25);

    border-top-color:
        white;

    border-radius:
        50%;

    animation:
        spin 1s
        linear infinite;

}


/* =========================================================
   ONBOARDING
========================================================= */

.onboarding-screen {

    max-width:
        520px;

    margin:
        auto;

    padding-top:
        env(safe-area-inset-top);

    background:
        var(--surface);

}


.onboarding-top {

    display:
        flex;

    justify-content:
        flex-end;

    padding:
        18px 20px;

}


.text-button {

    min-height:
        44px;

    padding:
        0 10px;

    border:
        none;

    background:
        transparent;

    color:
        var(--primary);

    font-weight:
        700;

}


.onboarding-content {

    min-height:
        calc(100vh - 190px);

    padding:
        20px 24px;

    display:
        flex;

    align-items:
        center;

}


.onboarding-slide {

    display:
        none;

    width:
        100%;

    text-align:
        center;

}


.onboarding-slide.active {

    display:
        block;

}


.onboarding-icon {

    width:
        min(54vw, 220px);

    aspect-ratio:
        1;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        42px;

    background:
        linear-gradient(
            145deg,
            #e3f6ef,
            #f5fbf8
        );

    font-size:
        clamp(
            64px,
            18vw,
            90px
        );

}


.onboarding-slide h2 {

    margin:
        35px auto 12px;

    max-width:
        330px;

    font-size:
        clamp(
            24px,
            7vw,
            32px
        );

    line-height:
        1.25;

}


.onboarding-slide p {

    max-width:
        350px;

    margin:
        auto;

    color:
        var(--text-secondary);

    line-height:
        1.7;

    font-size:
        14px;

}


.onboarding-bottom {

    padding:
        20px;

    padding-bottom:
        calc(
            20px +
            env(safe-area-inset-bottom)
        );

}


.onboarding-dots {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-bottom:
        20px;

}


.dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        10px;

    background:
        #d6ddd9;

    transition:
        .25s;

}


.dot.active {

    width:
        24px;

    background:
        var(--primary);

}


/* =========================================================
   BUTTON
========================================================= */

.primary-button {

    min-height:
        50px;

    border:
        none;

    border-radius:
        15px;

    background:
        var(--primary);

    color:
        white;

    padding:
        0 20px;

    font-weight:
        700;

    box-shadow:
        0 8px 20px
        rgba(8,127,91,.18);

    transition:
        transform .15s,
        background .2s;

}


.primary-button:active {

    transform:
        scale(.98);

}


.primary-button:hover {

    background:
        var(--primary-dark);

}


.full-button {

    width:
        100%;

}


/* =========================================================
   AUTH
========================================================= */

.auth-screen {

    max-width:
        520px;

    margin:
        auto;

    background:
        var(--surface);

    padding:
        max(
            28px,
            env(safe-area-inset-top)
        )
        22px
        40px;

}


.auth-brand {

    text-align:
        center;

    margin:
        20px 0 30px;

}


.brand-logo {

    width:
        74px;

    height:
        74px;

    margin:
        auto;

    border-radius:
        22px;

    background:
        var(--primary);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        23px;

    font-weight:
        800;

    box-shadow:
        var(--shadow);

}


.auth-brand h1 {

    margin:
        15px 0 5px;

    font-size:
        28px;

}


.auth-brand p {

    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        13px;

}


.auth-tabs {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        5px;

    padding:
        5px;

    background:
        #f2f5f3;

    border-radius:
        15px;

    margin-bottom:
        24px;

}


.auth-tab {

    min-height:
        44px;

    border:
        none;

    border-radius:
        11px;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-weight:
        700;

}


.auth-tab.active {

    background:
        white;

    color:
        var(--primary);

    box-shadow:
        0 3px 10px
        rgba(20,40,30,.07);

}


.auth-form {

    display:
        none;

}


.auth-form.active {

    display:
        block;

}


.auth-form label,
.form-card label {

    display:
        block;

    margin:
        16px 2px 7px;

    font-size:
        13px;

    font-weight:
        700;

}


.password-wrap {

    position:
        relative;

}


.password-wrap input {

    padding-right:
        55px;

}


.password-toggle {

    position:
        absolute;

    top:
        2px;

    right:
        3px;

    width:
        44px;

    height:
        44px;

    border:
        none;

    background:
        transparent;

}


.forgot-button {

    display:
        block;

    margin:
        8px 0 22px auto;

    border:
        none;

    background:
        transparent;

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        700;

}


.checkbox-row {

    display:
        flex !important;

    align-items:
        flex-start;

    gap:
        10px;

    line-height:
        1.5;

    color:
        var(--text-secondary);

    margin:
        20px 0 !important;

}


.checkbox-row input {

    width:
        18px;

    min-height:
        18px;

    margin-top:
        2px;

}


/* =========================================================
   REGION
========================================================= */

.region-screen {

    max-width:
        520px;

    margin:
        auto;

    background:
        var(--background);

    padding-bottom:
        35px;

}


.simple-header,
.subpage-header {

    padding:
        calc(
            18px +
            env(safe-area-inset-top)
        )
        20px
        16px;

    background:
        white;

    border-bottom:
        1px solid
        var(--border);

}


.header-caption,
.subpage-header span {

    display:
        block;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .5px;

}


.simple-header h2,
.subpage-header h2 {

    margin:
        5px 0 0;

    font-size:
        22px;

}


.region-intro {

    padding:
        30px 25px 18px;

    text-align:
        center;

}


.region-icon {

    width:
        72px;

    height:
        72px;

    margin:
        auto;

    border-radius:
        22px;

    background:
        var(--primary-light);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        32px;

}


.region-intro h3 {

    margin:
        16px 0 6px;

}


.region-intro p {

    max-width:
        340px;

    margin:
        auto;

    color:
        var(--text-secondary);

    line-height:
        1.6;

    font-size:
        13px;

}


.form-card {

    margin:
        12px 16px;

    padding:
        18px;

    background:
        white;

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);

}


.two-column {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        12px;

}


/* =========================================================
   MAIN APP
========================================================= */

.main-app {

    width:
        100%;

    max-width:
        520px;

    margin:
        auto;

    background:
        var(--background);

    position:
        relative;

}


.app-page {

    display:
        none;

    min-height:
        100vh;

    padding-bottom:
        calc(
            var(--bottom-nav-height) +
            22px +
            env(safe-area-inset-bottom)
        );

}


.app-page.active {

    display:
        block;

}


.home-header {

    position:
        sticky;

    top:
        0;

    z-index:
        50;

    min-height:
        76px;

    padding:
        calc(
            10px +
            env(safe-area-inset-top)
        )
        16px
        10px;

    background:
        rgba(255,255,255,.94);

    backdrop-filter:
        blur(14px);

    border-bottom:
        1px solid
        rgba(230,235,232,.75);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.header-brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.mini-logo {

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    border-radius:
        13px;

    background:
        var(--primary);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        13px;

    font-weight:
        800;

}


.header-brand strong {

    display:
        block;

    font-size:
        17px;

}


.location-button {

    max-width:
        190px;

    min-height:
        24px;

    padding:
        0;

    border:
        none;

    background:
        transparent;

    color:
        var(--text-secondary);

    font-size:
        10px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.header-actions {

    display:
        flex;

    gap:
        8px;

}


.round-button,
.profile-button {

    position:
        relative;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border:
        1px solid
        var(--border);

    background:
        white;

    border-radius:
        14px;

}


.profile-button {

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-weight:
        800;

}


.notification-dot {

    position:
        absolute;

    top:
        7px;

    right:
        8px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--danger);

    border:
        2px solid white;

}


.page-content {

    padding:
        16px;

}


.home-content {

    padding-top:
        14px;

}


/* =========================================================
   HOME
========================================================= */

.welcome-card {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        22px;

    padding:
        20px;

    background:
        linear-gradient(
            145deg,
            #087f5b,
            #0a9369
        );

    color:
        white;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    box-shadow:
        0 12px 30px
        rgba(8,127,91,.18);

}


.welcome-caption {

    font-size:
        11px;

    opacity:
        .85;

}


.welcome-card h2 {

    margin:
        4px 0 6px;

    font-size:
        22px;

}


.welcome-card p {

    max-width:
        260px;

    margin:
        0;

    opacity:
        .88;

    line-height:
        1.5;

    font-size:
        12px;

}


.welcome-decoration {

    font-size:
        44px;

    opacity:
        .9;

}


.location-card {

    margin-top:
        12px;

    padding:
        14px;

    border-radius:
        17px;

    background:
        white;

    box-shadow:
        var(--shadow);

    display:
        flex;

    gap:
        12px;

    align-items:
        center;

}


.location-pin {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--primary-light);

}


.location-card span {

    display:
        block;

    font-size:
        10px;

    color:
        var(--text-secondary);

}


.location-card strong {

    display:
        block;

    margin:
        2px 0;

    font-size:
        13px;

}


.location-card small {

    color:
        var(--text-secondary);

    font-size:
        10px;

}


.search-box {

    margin:
        14px 0;

    height:
        50px;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

}


.search-box input {

    min-height:
        auto;

    padding:
        0;

    border:
        none;

    box-shadow:
        none;

    background:
        transparent;

}


.emergency-card {

    margin:
        12px 0;

    padding:
        15px;

    border-radius:
        17px;

    border:
        1px solid
        #ffe0b2;

    background:
        #fff9ef;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

}


.emergency-label {

    display:
        inline-block;

    color:
        #a96200;

    font-size:
        9px;

    font-weight:
        800;

}


.emergency-card h3 {

    margin:
        5px 0;

    font-size:
        13px;

}


.emergency-card p {

    margin:
        0;

    color:
        #746858;

    font-size:
        10px;

    line-height:
        1.5;

}


.emergency-icon {

    font-size:
        28px;

}


.banner {

    margin:
        14px 0 22px;

    padding:
        20px;

    min-height:
        165px;

    border-radius:
        23px;

    background:
        linear-gradient(
            140deg,
            #edf8f4,
            #d8f2e9
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    overflow:
        hidden;

}


.banner-text {

    max-width:
        70%;

}


.banner-text > span {

    font-size:
        9px;

    letter-spacing:
        1px;

    color:
        var(--primary);

    font-weight:
        800;

}


.banner h2 {

    margin:
        7px 0;

    font-size:
        18px;

}


.banner p {

    margin:
        0 0 12px;

    color:
        var(--text-secondary);

    font-size:
        10px;

    line-height:
        1.5;

}


.banner button {

    min-height:
        34px;

    padding:
        0 13px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        white;

    font-size:
        10px;

    font-weight:
        700;

}


.banner-icon {

    font-size:
        45px;

}


.section-block {

    margin:
        22px 0;

}


.section-heading {

    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.section-heading h3 {

    margin:
        0;

    font-size:
        16px;

}


.section-heading button {

    min-height:
        36px;

    border:
        none;

    background:
        transparent;

    color:
        var(--primary);

    font-size:
        10px;

    font-weight:
        700;

}


.menu-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:
        10px 7px;

}


.menu-item {

    min-width:
        0;

    min-height:
        82px;

    padding:
        7px 3px;

    border:
        none;

    border-radius:
        15px;

    background:
        white;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    box-shadow:
        0 4px 15px
        rgba(25,50,40,.045);

}


.menu-icon {

    width:
        37px;

    height:
        37px;

    border-radius:
        12px;

    background:
        var(--primary-light);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        18px;

}


.menu-item > span:last-child {

    width:
        100%;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    font-size:
        clamp(
            8px,
            2.5vw,
            10px
        );

    font-weight:
        600;

}


.info-card {

    padding:
        16px;

    border-radius:
        var(--radius);

    background:
        white;

    box-shadow:
        var(--shadow);

}


.info-badges {

    display:
        flex;

    gap:
        5px;

}


.badge {

    padding:
        5px 8px;

    border-radius:
        20px;

    background:
        #eef3f0;

    color:
        var(--text-secondary);

    font-size:
        8px;

    font-weight:
        700;

}


.badge.important {

    background:
        #fff0e8;

    color:
        #c75821;

}


.info-card h3 {

    margin:
        12px 0 6px;

    font-size:
        14px;

}


.info-card p {

    margin:
        0;

    color:
        var(--text-secondary);

    line-height:
        1.6;

    font-size:
        11px;

}


.info-footer {

    margin-top:
        15px;

    padding-top:
        11px;

    border-top:
        1px solid
        var(--border);

    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        var(--text-secondary);

    font-size:
        9px;

}


.event-card {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        14px;

    border-radius:
        var(--radius);

    background:
        white;

    box-shadow:
        var(--shadow);

}


.event-date {

    width:
        58px;

    height:
        65px;

    flex:
        0 0 58px;

    border-radius:
        15px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

}


.event-date strong {

    font-size:
        21px;

}


.event-date span {

    font-size:
        9px;

    font-weight:
        700;

}


.event-info h3 {

    margin:
        0 0 5px;

    font-size:
        13px;

}


.event-info p {

    margin:
        0 0 6px;

    color:
        var(--text-secondary);

    font-size:
        9px;

    line-height:
        1.5;

}


.event-info small {

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        700;

}


/* =========================================================
   EMPTY
========================================================= */

.page-empty-card {

    margin-top:
        35px;

    padding:
        45px 20px;

    border-radius:
        22px;

    background:
        white;

    text-align:
        center;

    box-shadow:
        var(--shadow);

}


.page-empty-card > div {

    font-size:
        48px;

}


.page-empty-card h3 {

    margin:
        14px 0 7px;

}


.page-empty-card p {

    max-width:
        330px;

    margin:
        auto;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height:
        1.6;

}


/* =========================================================
   NOTIFICATION
========================================================= */

.notification-card {

    padding:
        15px;

    border-radius:
        17px;

    background:
        white;

    display:
        flex;

    gap:
        12px;

    box-shadow:
        var(--shadow);

}


.notification-icon {

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--primary-light);

}


.notification-card strong {

    display:
        block;

    font-size:
        12px;

}


.notification-card p {

    margin:
        5px 0;

    color:
        var(--text-secondary);

    font-size:
        10px;

    line-height:
        1.5;

}


.notification-card small {

    color:
        var(--text-soft);

    font-size:
        8px;

}


/* =========================================================
   PROFILE
========================================================= */

.profile-hero {

    padding:
        calc(
            35px +
            env(safe-area-inset-top)
        )
        20px
        32px;

    text-align:
        center;

    background:
        linear-gradient(
            145deg,
            #087f5b,
            #0a946a
        );

    color:
        white;

}


.large-avatar {

    width:
        78px;

    height:
        78px;

    margin:
        auto;

    border-radius:
        24px;

    background:
        rgba(255,255,255,.18);

    border:
        2px solid
        rgba(255,255,255,.4);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        27px;

    font-weight:
        800;

}


.profile-hero h2 {

    margin:
        13px 0 4px;

}


.profile-hero p {

    margin:
        0;

    font-size:
        11px;

    opacity:
        .85;

}


.profile-region-card {

    padding:
        14px;

    border-radius:
        17px;

    background:
        white;

    box-shadow:
        var(--shadow);

}


.profile-region-card span {

    display:
        block;

    color:
        var(--text-secondary);

    font-size:
        9px;

}


.profile-region-card strong {

    display:
        block;

    margin-top:
        5px;

    font-size:
        12px;

}


.profile-menu {

    margin-top:
        15px;

    border-radius:
        19px;

    background:
        white;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);

}


.profile-menu button {

    width:
        100%;

    min-height:
        54px;

    border:
        none;

    border-bottom:
        1px solid
        var(--border);

    background:
        white;

    padding:
        0 16px;

    display:
        grid;

    grid-template-columns:
        30px 1fr 20px;

    align-items:
        center;

    text-align:
        left;

    font-size:
        11px;

}


.profile-menu button:last-child {

    border-bottom:
        none;

}


.profile-menu b {

    text-align:
        right;

    font-size:
        18px;

    color:
        var(--text-soft);

}


.logout-button {

    width:
        100%;

    min-height:
        50px;

    margin-top:
        18px;

    border:
        none;

    border-radius:
        15px;

    background:
        #fff0f1;

    color:
        var(--danger);

    font-weight:
        700;

}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.bottom-nav {

    position:
        fixed;

    z-index:
        100;

    left:
        50%;

    bottom:
        0;

    transform:
        translateX(-50%);

    width:
        100%;

    max-width:
        520px;

    min-height:
        var(--bottom-nav-height);

    padding:
        6px 7px
        calc(
            5px +
            env(safe-area-inset-bottom)
        );

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(16px);

    border-top:
        1px solid
        var(--border);

    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0,1fr));

}


.nav-item {

    min-width:
        0;

    min-height:
        54px;

    border:
        none;

    background:
        transparent;

    color:
        #87918c;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

}


.nav-item > span {

    font-size:
        18px;

}


.nav-item small {

    font-size:
        8px;

    font-weight:
        600;

}


.nav-item.active {

    color:
        var(--primary);

}


.report-circle {

    width:
        42px;

    height:
        42px;

    margin-top:
        -17px;

    border-radius:
        15px;

    background:
        var(--primary);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-shadow:
        0 7px 17px
        rgba(8,127,91,.25);

    font-size:
        25px !important;

}


/* =========================================================
   LOADING
========================================================= */

.global-loading {

    position:
        fixed;

    z-index:
        999;

    inset:
        0;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        12px;

    background:
        rgba(255,255,255,.80);

    backdrop-filter:
        blur(3px);

}


.global-loading.active {

    display:
        flex;

}


.loading-spinner {

    width:
        37px;

    height:
        37px;

    border-radius:
        50%;

    border:
        4px solid
        #dce9e4;

    border-top-color:
        var(--primary);

    animation:
        spin .8s
        linear infinite;

}


.global-loading span {

    color:
        var(--text-secondary);

    font-size:
        11px;

    font-weight:
        600;

}


/* =========================================================
   TOAST
========================================================= */

.toast {

    position:
        fixed;

    z-index:
        2000;

    left:
        50%;

    bottom:
        calc(
            95px +
            env(safe-area-inset-bottom)
        );

    transform:
        translate(-50%,30px);

    width:
        calc(100% - 32px);

    max-width:
        450px;

    padding:
        13px 15px;

    border-radius:
        13px;

    background:
        #15231d;

    color:
        white;

    text-align:
        center;

    font-size:
        11px;

    line-height:
        1.5;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        .25s;

}


.toast.show {

    opacity:
        1;

    transform:
        translate(-50%,0);

}


.toast.error {

    background:
        #b32632;

}


.toast.success {

    background:
        #087f5b;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 350px) {

    .page-content {

        padding:
            12px;

    }


    .menu-grid {

        gap:
            7px 5px;

    }


    .menu-item {

        min-height:
            75px;

    }


    .welcome-card {

        padding:
            16px;

    }


    .welcome-decoration {

        font-size:
            35px;

    }

}


@media
(min-width: 768px) {

    body {

        background:
            #e9efec;

    }


    .main-app,
    .auth-screen,
    .region-screen,
    .onboarding-screen {

        box-shadow:
            0 0 40px
            rgba(20,45,35,.08);

    }

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}

/* =========================================================
   WARGAHUB REGION SELECTOR
========================================================= */

.select-wrapper {

    position: relative;

    width: 100%;

}


.select-wrapper select {

    width: 100%;

    min-height: 50px;

    padding:
        0 42px
        0 14px;

    border:
        1px solid
        var(--border, #e3e9e6);

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        var(--text, #17211d);

    appearance:
        none;

    -webkit-appearance:
        none;

    outline:
        none;

}


.select-wrapper::after {

    content:
        "⌄";

    position:
        absolute;

    right:
        15px;

    top:
        50%;

    transform:
        translateY(-55%);

    pointer-events:
        none;

    color:
        #77827d;

    font-size:
        18px;

}


.select-wrapper select:focus {

    border-color:
        var(--primary, #087f5b);

    box-shadow:
        0 0 0 3px
        rgba(8,127,91,.10);

}


.select-wrapper select:disabled {

    background:
        #f5f7f6;

    color:
        #909995;

    cursor:
        not-allowed;

}


.region-summary {

    margin:
        20px 0;

    padding:
        14px 15px;

    border-radius:
        15px;

    background:
        #edf8f4;

    border:
        1px solid
        #d8eee6;

}


.region-summary span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #68736e;

    font-size:
        10px;

}


.region-summary strong {

    display:
        block;

    color:
        #087f5b;

    font-size:
        12px;

    line-height:
        1.6;

}


@media
(max-width: 340px) {

    .two-column {

        gap:
            8px;

    }


    .form-card {

        padding:
            15px;

        margin:
            10px;

    }

}

/* =========================================================
   WARGAHUB HOME FINAL
========================================================= */

#pageHome {

    background:
        #f5f8f7;

    min-height:
        100%;

    padding-bottom:
        105px;

}


/* =========================================================
   HEADER
========================================================= */

#pageHome .home-header {

    position:
        sticky;

    top:
        0;

    z-index:
        80;

    width:
        100%;

    min-height:
        76px;

    padding:
        12px 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    border-bottom:
        1px solid
        #edf1ef;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-sizing:
        border-box;

}


#pageHome .header-brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


#pageHome .mini-logo {

    flex:
        0 0 auto;

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #06966b,
            #087454
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    box-shadow:
        0 7px 18px
        rgba(
            8,
            127,
            91,
            .17
        );

}


#pageHome .header-brand-info {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


#pageHome .header-brand-info > strong {

    color:
        #17211e;

    font-size:
        17px;

    font-weight:
        800;

    line-height:
        1.2;

}


#pageHome .location-button {

    max-width:
        230px;

    margin-top:
        4px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #75817d;

    font-family:
        inherit;

    font-size:
        10px;

    cursor:
        pointer;

}


#pageHome .location-dot {

    color:
        #ec4775;

    font-size:
        8px;

}


#pageHome .header-region-text {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


#pageHome .location-chevron {

    flex:
        0 0 auto;

    color:
        #96a09d;

}


#pageHome .header-actions {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


#pageHome .round-button,
#pageHome .profile-button {

    position:
        relative;

    width:
        42px;

    height:
        42px;

    padding:
        0;

    border:
        1px solid
        #e5ebe8;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

}


#pageHome .round-button {

    background:
        #ffffff;

}


#pageHome .profile-button {

    background:
        #e2f5ef;

    border-color:
        #e2f5ef;

    color:
        #087f5b;

    font-size:
        15px;

    font-weight:
        800;

}


#pageHome .header-action-icon {

    font-size:
        18px;

}


#pageHome .notification-dot {

    position:
        absolute;

    top:
        8px;

    right:
        9px;

    width:
        6px;

    height:
        6px;

    border:
        2px solid
        #ffffff;

    border-radius:
        50%;

    background:
        #ef4444;

}


/* =========================================================
   PAGE CONTENT
========================================================= */

#pageHome .home-content {

    width:
        100%;

    padding:
        15px;

    box-sizing:
        border-box;

}


/* =========================================================
   WELCOME CARD
========================================================= */

#pageHome .welcome-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        135px;

    padding:
        23px 20px;

    border-radius:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    background:
        linear-gradient(
            135deg,
            #07996e,
            #07895f
        );

    color:
        #ffffff;

    box-shadow:
        0 12px 28px
        rgba(
            6,
            137,
            95,
            .16
        );

    box-sizing:
        border-box;

}


#pageHome .welcome-card::before {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    top:
        -85px;

    right:
        -45px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

}


#pageHome .welcome-card::after {

    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    right:
        32px;

    bottom:
        -70px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

}


#pageHome .welcome-content {

    position:
        relative;

    z-index:
        2;

    min-width:
        0;

    flex:
        1;

}


#pageHome .welcome-caption {

    display:
        block;

    margin-bottom:
        6px;

    color:
        rgba(
            255,
            255,
            255,
            .84
        );

    font-size:
        11px;

    font-weight:
        600;

}


#pageHome .welcome-content h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        21px;

    font-weight:
        800;

    line-height:
        1.25;

    word-break:
        break-word;

}


#pageHome .welcome-content p {

    max-width:
        270px;

    margin:
        7px 0 0;

    color:
        rgba(
            255,
            255,
            255,
            .88
        );

    font-size:
        12px;

    line-height:
        1.5;

}


#pageHome .welcome-illustration {

    position:
        relative;

    z-index:
        2;

    flex:
        0 0 auto;

    width:
        72px;

    height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


#pageHome .welcome-house {

    font-size:
        43px;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(
                0,
                0,
                0,
                .08
            )
        );

}


/* =========================================================
   LOCATION CARD
========================================================= */

#pageHome .home-location-card {

    position:
        relative;

    margin-top:
        13px;

    padding:
        14px;

    min-height:
        77px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        1px solid
        #e8eeeb;

    border-radius:
        19px;

    background:
        #ffffff;

    box-shadow:
        0 6px 20px
        rgba(
            34,
            60,
            51,
            .04
        );

    box-sizing:
        border-box;

}


#pageHome .home-location-icon {

    flex:
        0 0 auto;

    width:
        43px;

    height:
        43px;

    border-radius:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e7f7f1;

    font-size:
        18px;

}


#pageHome .home-location-content {

    flex:
        1;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


#pageHome .home-location-label {

    color:
        #7a8681;

    font-size:
        9px;

    font-weight:
        500;

}


#pageHome .home-location-content strong {

    margin-top:
        2px;

    color:
        #1e2925;

    font-size:
        13px;

    font-weight:
        800;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


#pageHome .home-location-content small {

    display:
        block;

    margin-top:
        4px;

    color:
        #75817d;

    font-size:
        9px;

    line-height:
        1.45;

}


#pageHome .home-location-action {

    flex:
        0 0 auto;

    width:
        30px;

    height:
        30px;

    border:
        0;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f2f7f5;

    color:
        #70807a;

    font-size:
        20px;

}


/* =========================================================
   SEARCH
========================================================= */

#pageHome .home-search-box {

    height:
        52px;

    margin-top:
        13px;

    padding:
        0 12px;

    border:
        1px solid
        #e0e7e4;

    border-radius:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    background:
        #ffffff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

    box-sizing:
        border-box;

}


#pageHome .home-search-box:focus-within {

    border-color:
        #35a987;

    box-shadow:
        0 0 0 3px
        rgba(
            8,
            127,
            91,
            .08
        );

}


#pageHome .home-search-icon {

    flex:
        0 0 auto;

    font-size:
        16px;

}


#pageHome .home-search-box input {

    min-width:
        0;

    flex:
        1;

    height:
        100%;

    padding:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #25312d;

    font-family:
        inherit;

    font-size:
        13px;

}


#pageHome .home-search-box input::placeholder {

    color:
        #8b9591;

}


#pageHome .home-search-filter {

    flex:
        0 0 auto;

    width:
        33px;

    height:
        33px;

    border:
        0;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f1f7f5;

    color:
        #087f5b;

    font-size:
        14px;

}


/* =========================================================
   IMPORTANT CARD
========================================================= */

#pageHome .home-important-card {

    margin-top:
        13px;

    min-height:
        92px;

    padding:
        16px;

    border:
        1px solid
        #ffd49a;

    border-radius:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    background:
        #fffaf1;

    box-sizing:
        border-box;

}


#pageHome .home-important-content {

    min-width:
        0;

    flex:
        1;

}


#pageHome .important-label {

    color:
        #bf6700;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .25px;

}


#pageHome .home-important-card h3 {

    margin:
        5px 0 0;

    color:
        #1f2925;

    font-size:
        12px;

    font-weight:
        800;

    line-height:
        1.35;

}


#pageHome .home-important-card p {

    margin:
        5px 0 0;

    color:
        #7f796e;

    font-size:
        9px;

    line-height:
        1.45;

}


#pageHome .important-icon {

    flex:
        0 0 auto;

    font-size:
        27px;

}


/* =========================================================
   BANNER
========================================================= */

#pageHome .wargahub-banner {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        160px;

    margin-top:
        14px;

    padding:
        21px;

    border-radius:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    background:
        linear-gradient(
            135deg,
            #e5f7f1,
            #d7f1e9
        );

    box-sizing:
        border-box;

}


#pageHome .banner-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        275px;

}


#pageHome .banner-label {

    color:
        #07845f;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .4px;

}


#pageHome .banner-content h2 {

    margin:
        8px 0 0;

    color:
        #10221c;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.28;

}


#pageHome .banner-content p {

    margin:
        7px 0 0;

    color:
        #668078;

    font-size:
        10px;

    line-height:
        1.5;

}


#pageHome .banner-button {

    min-width:
        65px;

    height:
        36px;

    margin-top:
        13px;

    padding:
        0 14px;

    border:
        0;

    border-radius:
        11px;

    background:
        #078b63;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

}


#pageHome .banner-visual {

    position:
        relative;

    flex:
        0 0 auto;

    width:
        100px;

    height:
        120px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


#pageHome .indonesia-symbol {

    position:
        relative;

    z-index:
        3;

    font-size:
        52px;

    filter:
        drop-shadow(
            0 8px 12px
            rgba(
                15,
                85,
                66,
                .12
            )
        );

}


#pageHome .banner-circle {

    position:
        absolute;

    display:
        block;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .42
        );

}


#pageHome .banner-circle-one {

    width:
        90px;

    height:
        90px;

    right:
        -15px;

    top:
        0;

}


#pageHome .banner-circle-two {

    width:
        60px;

    height:
        60px;

    left:
        -5px;

    bottom:
        0;

}


/* =========================================================
   QUICK STAT
========================================================= */

#pageHome .home-stat-row {

    margin-top:
        14px;

    padding:
        11px 13px;

    border:
        1px solid
        #e8eeeb;

    border-radius:
        17px;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    background:
        #ffffff;

}


#pageHome .home-stat-item {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


#pageHome .home-stat-icon {

    flex:
        0 0 auto;

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        14px;

}


#pageHome .home-stat-icon.green {

    background:
        #e6f7f1;

}


#pageHome .home-stat-icon.blue {

    background:
        #edf4ff;

}


#pageHome .home-stat-item div {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


#pageHome .home-stat-item strong {

    color:
        #24302c;

    font-size:
        10px;

    font-weight:
        800;

}


#pageHome .home-stat-item small {

    margin-top:
        2px;

    color:
        #87918e;

    font-size:
        8px;

}


#pageHome .home-stat-divider {

    width:
        1px;

    height:
        33px;

    margin:
        0 12px;

    background:
        #edf1ef;

}


/* =========================================================
   SECTION
========================================================= */

#pageHome .home-section {

    margin-top:
        24px;

}


#pageHome .home-section-heading {

    min-height:
        42px;

    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        10px;

}


#pageHome .section-caption {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #0b8a64;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .55px;

}


#pageHome .home-section-heading h3 {

    margin:
        0;

    color:
        #17221e;

    font-size:
        16px;

    font-weight:
        800;

}


#pageHome .section-action-button {

    padding:
        5px 0;

    border:
        0;

    background:
        transparent;

    color:
        #087f5b;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;

}


/* =========================================================
   MENU 4 COLUMN
========================================================= */

#pageHome .home-menu-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    column-gap:
        7px;

    row-gap:
        14px;

}


#pageHome .home-menu-item {

    min-width:
        0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        7px;

    color:
        #43504b;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        600;

    text-align:
        center;

    cursor:
        pointer;

}


#pageHome .home-menu-icon {

    width:
        48px;

    height:
        48px;

    border-radius:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        20px;

    transition:
        transform .15s ease;

}


#pageHome .home-menu-item:active
.home-menu-icon {

    transform:
        scale(.93);

}


#pageHome .home-menu-icon.announcement {

    background:
        #e7f8f2;

}


#pageHome .home-menu-icon.news {

    background:
        #edf4ff;

}


#pageHome .home-menu-icon.events {

    background:
        #fff1e8;

}


#pageHome .home-menu-icon.service {

    background:
        #f2edff;

}


#pageHome .home-menu-icon.letter {

    background:
        #eef6ff;

}


#pageHome .home-menu-icon.social {

    background:
        #fff7df;

}


#pageHome .home-menu-icon.report {

    background:
        #ffecef;

}


#pageHome .home-menu-icon.umkm {

    background:
        #ebf8ec;

}


#pageHome .home-menu-icon.health {

    background:
        #ffecef;

}


#pageHome .home-menu-icon.education {

    background:
        #edf4ff;

}


#pageHome .home-menu-icon.jobs {

    background:
        #fff1e8;

}


#pageHome .home-menu-icon.more {

    background:
        #edf1ef;

}


/* =========================================================
   ANNOUNCEMENT
========================================================= */

#pageHome .home-announcement-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


#pageHome .home-announcement-card {

    padding:
        16px;

    border:
        1px solid
        #e6ece9;

    border-radius:
        19px;

    background:
        #ffffff;

    box-shadow:
        0 6px 20px
        rgba(
            29,
            63,
            51,
            .035
        );

}


#pageHome .announcement-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

}


#pageHome .announcement-badges {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

}


#pageHome .home-badge {

    padding:
        4px 7px;

    border-radius:
        8px;

    font-size:
        8px;

    font-weight:
        700;

}


#pageHome .home-badge.important {

    background:
        #ffe9e9;

    color:
        #c43d3d;

}


#pageHome .home-badge.local {

    background:
        #e7f7f1;

    color:
        #07845f;

}


#pageHome .bookmark-button {

    width:
        29px;

    height:
        29px;

    padding:
        0;

    border:
        0;

    border-radius:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f5f8f7;

    font-size:
        13px;

}


#pageHome .home-announcement-card h3 {

    margin:
        12px 0 0;

    color:
        #1c2924;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.35;

}


#pageHome .home-announcement-card p {

    margin:
        7px 0 0;

    color:
        #737f7b;

    font-size:
        10px;

    line-height:
        1.55;

}


#pageHome .announcement-footer {

    margin-top:
        13px;

    padding-top:
        10px;

    border-top:
        1px solid
        #f0f3f2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        #929b98;

    font-size:
        8px;

}


/* =========================================================
   EVENT
========================================================= */

#pageHome .home-event-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


#pageHome .home-event-card {

    position:
        relative;

    padding:
        13px;

    border:
        1px solid
        #e6ece9;

    border-radius:
        19px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    background:
        #ffffff;

}


#pageHome .home-event-date {

    flex:
        0 0 auto;

    width:
        53px;

    height:
        61px;

    border-radius:
        15px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e6f7f1;

}


#pageHome .home-event-date strong {

    color:
        #087f5b;

    font-size:
        20px;

    font-weight:
        800;

    line-height:
        1;

}


#pageHome .home-event-date span {

    margin-top:
        5px;

    color:
        #087f5b;

    font-size:
        8px;

    font-weight:
        800;

}


#pageHome .home-event-info {

    min-width:
        0;

    flex:
        1;

}


#pageHome .home-event-status {

    color:
        #0a8c66;

    font-size:
        8px;

    font-weight:
        700;

}


#pageHome .home-event-info h3 {

    margin:
        4px 0 0;

    color:
        #1d2925;

    font-size:
        12px;

    font-weight:
        800;

}


#pageHome .home-event-info p {

    margin:
        4px 0 0;

    color:
        #7b8582;

    font-size:
        9px;

    line-height:
        1.45;

}


#pageHome .home-event-meta {

    margin-top:
        7px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    color:
        #89938f;

    font-size:
        8px;

}


#pageHome .home-event-arrow {

    flex:
        0 0 auto;

    color:
        #a0aaa6;

    font-size:
        24px;

}


/* =========================================================
   FOOT NOTE
========================================================= */

#pageHome .home-footer-note {

    margin:
        28px 0 10px;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #89938f;

}


#pageHome .home-footer-logo {

    width:
        31px;

    height:
        31px;

    border-radius:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e3f5ef;

    color:
        #087f5b;

    font-size:
        9px;

    font-weight:
        800;

}


#pageHome .home-footer-note > div:last-child {

    display:
        flex;

    flex-direction:
        column;

}


#pageHome .home-footer-note strong {

    color:
        #65716d;

    font-size:
        9px;

}


#pageHome .home-footer-note span {

    margin-top:
        2px;

    font-size:
        8px;

}


/* =========================================================
   BOTTOM NAV FINAL
========================================================= */

.bottom-nav {

    position:
        fixed;

    left:
        50%;

    bottom:
        0;

    z-index:
        100;

    width:
        100%;

    max-width:
        480px;

    min-height:
        68px;

    padding:
        7px 8px
        calc(
            7px +
            env(
                safe-area-inset-bottom
            )
        );

    transform:
        translateX(
            -50%
        );

    border-top:
        1px solid
        #edf1ef;

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    align-items:
        end;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    box-shadow:
        0 -6px 24px
        rgba(
            28,
            52,
            43,
            .06
        );

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-sizing:
        border-box;

}


.bottom-nav .nav-item {

    position:
        relative;

    min-width:
        0;

    min-height:
        48px;

    padding:
        4px 2px;

    border:
        0;

    background:
        transparent;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        3px;

    color:
        #89938f;

    font-family:
        inherit;

    cursor:
        pointer;

}


.bottom-nav .nav-item > span:not(.report-circle) {

    font-size:
        17px;

    line-height:
        1;

}


.bottom-nav .nav-item small {

    color:
        inherit;

    font-size:
        8px;

    font-weight:
        600;

}


.bottom-nav .nav-item.active {

    color:
        #087f5b;

}


.bottom-nav .nav-report {

    overflow:
        visible;

}


.bottom-nav .report-circle {

    position:
        relative;

    width:
        43px;

    height:
        43px;

    margin-top:
        -22px;

    border:
        4px solid
        #f5f8f7;

    border-radius:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            145deg,
            #07996e,
            #087f5b
        );

    color:
        #ffffff;

    font-size:
        24px;

    line-height:
        1;

    box-shadow:
        0 7px 18px
        rgba(
            8,
            127,
            91,
            .22
        );

}


/* =========================================================
   BUTTON INTERACTION
========================================================= */

#pageHome button,
.bottom-nav button {

    -webkit-tap-highlight-color:
        transparent;

}


#pageHome button:active {

    opacity:
        .82;

}


/* =========================================================
   MOBILE 380px
========================================================= */

@media
(
    max-width:
    380px
) {

    #pageHome .home-content {

        padding:
            12px;

    }


    #pageHome .home-header {

        padding:
            10px 12px;

    }


    #pageHome .welcome-card {

        min-height:
            125px;

        padding:
            19px 17px;

        border-radius:
            21px;

    }


    #pageHome .welcome-content h2 {

        font-size:
            19px;

    }


    #pageHome .welcome-content p {

        font-size:
            10px;

    }


    #pageHome .welcome-illustration {

        width:
            58px;

    }


    #pageHome .welcome-house {

        font-size:
            37px;

    }


    #pageHome .wargahub-banner {

        min-height:
            148px;

        padding:
            18px;

    }


    #pageHome .banner-content {

        max-width:
            220px;

    }


    #pageHome .banner-content h2 {

        font-size:
            16px;

    }


    #pageHome .banner-visual {

        width:
            70px;

    }


    #pageHome .indonesia-symbol {

        font-size:
            43px;

    }


    #pageHome .home-menu-icon {

        width:
            44px;

        height:
            44px;

        border-radius:
            14px;

        font-size:
            18px;

    }


    #pageHome .home-menu-grid {

        column-gap:
            4px;

    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media
(
    max-width:
    330px
) {

    #pageHome .header-region-text {

        max-width:
            125px;

    }


    #pageHome .welcome-illustration {

        display:
            none;

    }


    #pageHome .banner-visual {

        display:
            none;

    }


    #pageHome .home-stat-item small {

        display:
            none;

    }

}

* {

    box-sizing:
        border-box;

}


html,
body {

    margin:
        0;

    min-height:
        100%;

}


body {

    background:
        #f4f7f6;

    color:
        #17211e;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    -webkit-tap-highlight-color:
        transparent;

}


.admin-app {

    width:
        100%;

    min-height:
        100dvh;

}


/* =========================================================
   HEADER
========================================================= */

.admin-header {

    position:
        sticky;

    top:
        0;

    z-index:
        30;

    min-height:
        72px;

    padding:
        12px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    border-bottom:
        1px solid
        #e7ecea;

    background:
        rgba(255,255,255,.97);

    backdrop-filter:
        blur(15px);

}


.admin-brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.admin-logo {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 auto;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #087f5b;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

}


.admin-brand > div:last-child {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


.admin-brand strong {

    font-size:
        15px;

    font-weight:
        800;

}


.admin-brand span {

    margin-top:
        2px;

    color:
        #7d8884;

    font-size:
        9px;

}


.header-button {

    min-height:
        38px;

    padding:
        0 13px;

    border:
        1px solid
        #dfe6e3;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #53605b;

    font-size:
        10px;

    font-weight:
        700;

}


/* =========================================================
   CONTENT
========================================================= */

.admin-content {

    width:
        calc(100% - 30px);

    max-width:
        760px;

    margin:
        0 auto;

    padding:
        18px 0 60px;

}


/* =========================================================
   PROFILE
========================================================= */

.admin-profile-card {

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        1px solid
        #e5ebe8;

    border-radius:
        18px;

    background:
        #ffffff;

}


.profile-icon {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 auto;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e4f5ef;

}


.admin-profile-card > div:last-child {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

}


.admin-profile-card span {

    color:
        #84908b;

    font-size:
        9px;

}


.admin-profile-card strong {

    margin-top:
        2px;

    font-size:
        13px;

}


.admin-profile-card small {

    margin-top:
        4px;

    color:
        #6d7974;

    font-size:
        9px;

    line-height:
        1.5;

}


/* =========================================================
   SCOPE
========================================================= */

.scope-card {

    margin-top:
        13px;

    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #087f5b,
            #06946a
        );

    color:
        #ffffff;

}


.scope-card > div:first-child {

    min-width:
        0;

}


.section-caption {

    display:
        block;

    margin-bottom:
        4px;

    color:
        #07845f;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .5px;

}


.scope-card .section-caption {

    color:
        rgba(255,255,255,.74);

}


.scope-card h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        18px;

}


.scope-card p {

    margin:
        6px 0 0;

    max-width:
        500px;

    color:
        rgba(255,255,255,.8);

    font-size:
        10px;

    line-height:
        1.5;

}


.scope-icon {

    flex:
        0 0 auto;

    font-size:
        30px;

}


/* =========================================================
   SECTION
========================================================= */

.admin-section {

    margin-top:
        17px;

    padding:
        19px;

    border:
        1px solid
        #e5ebe8;

    border-radius:
        20px;

    background:
        #ffffff;

}


.section-title {

    margin-bottom:
        18px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        12px;

}


.section-title h2 {

    margin:
        0;

    font-size:
        16px;

}


.small-button {

    padding:
        6px 0;

    border:
        0;

    background:
        transparent;

    color:
        #087f5b;

    font-size:
        9px;

    font-weight:
        700;

}


/* =========================================================
   FORM
========================================================= */

.announcement-form {

    display:
        flex;

    flex-direction:
        column;

}


.announcement-form label {

    margin-bottom:
        7px;

    color:
        #3f4b47;

    font-size:
        10px;

    font-weight:
        700;

}


.announcement-form input,
.announcement-form textarea,
.announcement-form select {

    width:
        100%;

    margin-bottom:
        15px;

    padding:
        0 13px;

    border:
        1px solid
        #dae3df;

    border-radius:
        13px;

    outline:
        0;

    background:
        #ffffff;

    color:
        #1e2925;

    font-size:
        11px;

}


.announcement-form input,
.announcement-form select {

    height:
        46px;

}


.announcement-form textarea {

    min-height:
        140px;

    padding-top:
        13px;

    padding-bottom:
        13px;

    resize:
        vertical;

    line-height:
        1.55;

}


.announcement-form input:focus,
.announcement-form textarea:focus,
.announcement-form select:focus {

    border-color:
        #07966b;

    box-shadow:
        0 0 0 3px
        rgba(8,127,91,.08);

}


.two-column {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        12px;

}


.two-column > div {

    min-width:
        0;

}


.option-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        10px;

}


.check-card {

    min-height:
        65px;

    margin:
        0 !important;

    padding:
        11px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    border:
        1px solid
        #e5ebe8;

    border-radius:
        14px;

    cursor:
        pointer;

}


.check-card input {

    width:
        17px;

    height:
        17px;

    margin:
        1px 0 0;

}


.check-card span {

    display:
        flex;

    flex-direction:
        column;

}


.check-card strong {

    font-size:
        10px;

}


.check-card small {

    margin-top:
        3px;

    color:
        #87928e;

    font-size:
        8px;

    line-height:
        1.45;

}


.form-actions {

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        1fr 1.3fr;

    gap:
        9px;

}


.primary-button,
.secondary-button {

    min-height:
        47px;

    border-radius:
        13px;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

}


.primary-button {

    border:
        0;

    background:
        #087f5b;

    color:
        #ffffff;

}


.secondary-button {

    border:
        1px solid
        #dbe4e0;

    background:
        #ffffff;

    color:
        #5f6b66;

}


/* =========================================================
   ANNOUNCEMENT LIST
========================================================= */

.announcement-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.admin-announcement-card {

    padding:
        14px;

    border:
        1px solid
        #e7ecea;

    border-radius:
        16px;

}


.announcement-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

}


.badges {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

}


.badge {

    padding:
        4px 7px;

    border-radius:
        7px;

    background:
        #e7f7f1;

    color:
        #087f5b;

    font-size:
        7px;

    font-weight:
        800;

}


.badge.draft {

    background:
        #f1f3f2;

    color:
        #68736f;

}


.badge.important {

    background:
        #ffebeb;

    color:
        #c23e46;

}


.admin-announcement-card h3 {

    margin:
        11px 0 0;

    font-size:
        12px;

}


.admin-announcement-card p {

    margin:
        6px 0 0;

    color:
        #78837f;

    font-size:
        9px;

    line-height:
        1.55;

}


.announcement-card-footer {

    margin-top:
        12px;

    padding-top:
        10px;

    border-top:
        1px solid
        #eef2f0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        #8e9894;

    font-size:
        8px;

}


.delete-announcement {

    border:
        0;

    background:
        transparent;

    color:
        #cc4049;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;

}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {

    min-height:
        130px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        #8c9692;

    text-align:
        center;

}


.empty-state span {

    font-size:
        28px;

}


.empty-state strong {

    margin-top:
        8px;

    font-size:
        10px;

}


/* =========================================================
   LOADING
========================================================= */

.admin-loading {

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    display:
        none;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    background:
        rgba(255,255,255,.78);

    backdrop-filter:
        blur(4px);

}


.admin-loading.active {

    display:
        flex;

}


.spinner {

    width:
        31px;

    height:
        31px;

    border:
        3px solid
        #d8e5e0;

    border-top-color:
        #087f5b;

    border-radius:
        50%;

    animation:
        spin .8s linear infinite;

}


@keyframes spin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   TOAST
========================================================= */

.admin-toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        25px;

    z-index:
        120;

    max-width:
        calc(100% - 30px);

    padding:
        11px 16px;

    transform:
        translate(-50%,30px);

    border-radius:
        12px;

    background:
        #17211e;

    color:
        #ffffff;

    font-size:
        10px;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        .2s;

}


.admin-toast.show {

    opacity:
        1;

    transform:
        translate(-50%,0);

}


.admin-toast.error {

    background:
        #bf2d38;

}


.admin-toast.success {

    background:
        #087f5b;

}


/* =========================================================
   MOBILE
========================================================= */

@media
(
    max-width:
    560px
) {

    .admin-content {

        width:
            calc(100% - 24px);

    }


    .admin-header {

        padding:
            11px 12px;

    }


    .two-column,
    .option-grid {

        grid-template-columns:
            1fr;

    }


    .form-actions {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   ANNOUNCEMENT HOME STATES
========================================================= */

.announcement-loading-state,
.announcement-empty-state {
    min-height: 110px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    text-align: center;
}

.announcement-loading-state strong,
.announcement-empty-state strong {
    color: #394640;

    font-size: 11px;
}

.announcement-empty-state small {
    max-width: 250px;

    color: #8a9590;

    font-size: 8px;
    line-height: 1.55;
}

.announcement-empty-icon {
    font-size: 25px;
}

.announcement-loader,
.announcement-page-loader {
    width: 28px;
    height: 28px;

    border:
        3px solid #dcebe5;

    border-top-color:
        #087f5b;

    border-radius: 50%;

    animation:
        announcementSpin
        .7s linear infinite;
}

@keyframes announcementSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   ANNOUNCEMENT FULL PAGE
========================================================= */

.announcement-page {
    position: fixed;

    inset: 0;

    z-index: 250;

    display: none;

    overflow-y: auto;

    background:
        #f3f7f5;
}

.announcement-page.active {
    display: block;
}

body.announcement-page-open {
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.announcement-page-header {
    position: sticky;

    top: 0;

    z-index: 10;

    min-height: 67px;

    padding:
        10px
        max(
            16px,
            env(safe-area-inset-right)
        );

    display: grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items: center;

    gap: 9px;

    border-bottom:
        1px solid #dfe8e4;

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(15px);
}

.announcement-page-header > div {
    min-width: 0;
}

.announcement-page-header span {
    display: block;

    color: #8b9591;

    font-size: 7px;
}

.announcement-page-header h2 {
    margin: 2px 0 0;

    color: #1d2924;

    font-size: 15px;
    font-weight: 800;
}

.announcement-back-button,
.announcement-refresh-button {
    width: 40px;
    height: 40px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #dfe7e3;

    border-radius: 12px;

    background: #ffffff;

    color: #087f5b;

    font-size: 20px;
}

.announcement-refresh-button {
    font-size: 16px;
}


/* =========================================================
   CONTENT
========================================================= */

.announcement-page-content {
    width:
        calc(100% - 24px);

    max-width:
        620px;

    margin:
        0 auto;

    padding:
        14px 0
        calc(
            50px +
            env(safe-area-inset-bottom)
        );
}


/* =========================================================
   INTRO
========================================================= */

.announcement-page-intro {
    padding: 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #087f5b,
            #0aa677
        );

    color: #ffffff;
}

.announcement-page-intro-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius: 14px;

    background:
        rgba(255,255,255,.13);

    font-size: 19px;
}

.announcement-page-intro > div:last-child {
    min-width: 0;
}

.announcement-page-intro span {
    color:
        rgba(255,255,255,.72);

    font-size: 7px;
    font-weight: 800;
}

.announcement-page-intro h3 {
    margin: 3px 0 0;

    color: #ffffff;

    font-size: 13px;
}

.announcement-page-intro p {
    margin: 4px 0 0;

    color:
        rgba(255,255,255,.78);

    font-size: 8px;

    line-height: 1.5;
}


/* =========================================================
   FILTER
========================================================= */

.announcement-filter-row {
    margin-top: 13px;

    padding-bottom: 3px;

    display: flex;
    align-items: center;

    gap: 6px;

    overflow-x: auto;

    scrollbar-width: none;
}

.announcement-filter-row::-webkit-scrollbar {
    display: none;
}

.announcement-filter {
    min-height: 33px;

    padding: 0 11px;

    flex: 0 0 auto;

    border:
        1px solid #dce6e1;

    border-radius: 10px;

    background: #ffffff;

    color: #64716b;

    font-size: 8px;
    font-weight: 700;
}

.announcement-filter.active {
    border-color: #087f5b;

    background: #087f5b;

    color: #ffffff;
}


/* =========================================================
   RESULT
========================================================= */

.announcement-result-bar {
    margin:
        12px 2px 8px;

    color: #8b9591;

    font-size: 8px;
}


/* =========================================================
   LIST
========================================================= */

.all-announcements-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.all-announcement-card {
    padding: 15px;

    border:
        1px solid #e0e8e4;

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 5px 20px
        rgba(30,70,55,.035);
}

.all-announcement-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.all-announcement-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.all-announcement-badge {
    padding: 5px 7px;

    border-radius: 8px;

    font-size: 6px;
    font-weight: 800;
}

.all-announcement-badge.normal {
    background: #eef3f1;
    color: #68746f;
}

.all-announcement-badge.important {
    background: #ffe8e6;
    color: #bf3540;
}

.all-announcement-badge.danger {
    background: #ffe2e5;
    color: #b51f2e;
}

.all-announcement-badge.scope {
    background: #e2f6ef;
    color: #087f5b;
}

.all-announcement-pinned {
    flex: 0 0 auto;

    font-size: 13px;
}

.all-announcement-card h3 {
    margin: 13px 0 0;

    color: #1d2924;

    font-size: 12px;
    font-weight: 800;

    line-height: 1.45;
}

.all-announcement-card p {
    margin: 7px 0 0;

    color: #75817c;

    font-size: 9px;

    line-height: 1.65;

    white-space: pre-line;
}

.all-announcement-footer {
    margin-top: 12px;

    padding-top: 9px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-top:
        1px solid #edf1ef;

    color: #939c98;

    font-size: 7px;
}


/* =========================================================
   EMPTY
========================================================= */

.announcement-page-empty {
    min-height: 180px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #919b97;

    text-align: center;
}

.announcement-page-empty > span:not(.announcement-page-loader) {
    font-size: 28px;
}

.announcement-page-empty strong {
    color: #5d6964;

    font-size: 10px;
}

.announcement-page-empty small {
    color: #929b97;

    font-size: 8px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 420px) {

    .announcement-page-content {
        width:
            calc(100% - 20px);
    }

    .all-announcement-footer {
        align-items: flex-start;
    }

}

/* =========================================================
   CLICKABLE ANNOUNCEMENT
========================================================= */

.clickable-announcement {
    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.clickable-announcement:active {
    transform:
        scale(.985);
}


/* =========================================================
   ANNOUNCEMENT DETAIL PAGE
========================================================= */

.announcement-detail-page {
    position: fixed;

    inset: 0;

    z-index: 300;

    display: none;

    overflow-y: auto;

    background:
        #f3f7f5;

    overscroll-behavior:
        contain;
}

.announcement-detail-page.active {
    display: block;
}

body.announcement-detail-open {
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.announcement-detail-header {
    position: sticky;

    top: 0;

    z-index: 20;

    min-height: 67px;

    padding:
        10px
        max(
            14px,
            env(safe-area-inset-right)
        );

    display: grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items: center;

    gap: 9px;

    border-bottom:
        1px solid #dde7e2;

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.announcement-detail-header > div {
    min-width: 0;
}

.announcement-detail-header span {
    display: block;

    color: #89948f;

    font-size: 7px;
}

.announcement-detail-header h2 {
    margin: 2px 0 0;

    color: #1b2822;

    font-size: 14px;
    font-weight: 800;
}

.announcement-detail-back,
.announcement-detail-header-action {
    width: 40px;
    height: 40px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid #dce5e1;

    border-radius: 12px;

    background: #ffffff;

    color: #087f5b;
}

.announcement-detail-back {
    font-size: 22px;
}

.announcement-detail-header-action {
    font-size: 15px;
}

.announcement-detail-header-action.saved {
    background: #e3f5ee;
}


/* =========================================================
   CONTENT
========================================================= */

.announcement-detail-content {
    width:
        calc(100% - 24px);

    max-width:
        620px;

    margin:
        0 auto;

    padding:
        18px 0
        calc(
            55px +
            env(safe-area-inset-bottom)
        );
}


/* =========================================================
   BADGES
========================================================= */

.announcement-detail-badges {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}

.announcement-detail-badge {
    min-height: 25px;

    padding:
        0 8px;

    display: inline-flex;

    align-items: center;

    border-radius: 8px;

    font-size: 7px;

    font-weight: 800;
}

.announcement-detail-badge.normal {
    background: #edf3f0;

    color: #62706a;
}

.announcement-detail-badge.important {
    background: #fff0df;

    color: #a35a00;
}

.announcement-detail-badge.danger {
    background: #ffe5e8;

    color: #b52130;
}

.announcement-detail-badge.pinned {
    background: #e8edff;

    color: #495db2;
}

.announcement-detail-badge.scope {
    background: #e1f5ee;

    color: #087f5b;
}


/* =========================================================
   TITLE
========================================================= */

.announcement-detail-title {
    margin:
        15px 0 0;

    color: #17251f;

    font-size: 21px;

    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   META
========================================================= */

.announcement-detail-meta {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 8px;
}

.announcement-detail-meta > div {
    min-width: 0;

    padding: 11px;

    display: flex;

    align-items: center;

    gap: 9px;

    border:
        1px solid #e0e8e4;

    border-radius: 13px;

    background: #ffffff;
}

.announcement-detail-meta > div > span {
    width: 31px;
    height: 31px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #e7f5f0;
}

.announcement-detail-meta > div > div {
    min-width: 0;

    display: flex;

    flex-direction: column;
}

.announcement-detail-meta small {
    color: #929b97;

    font-size: 7px;
}

.announcement-detail-meta strong {
    margin-top: 2px;

    overflow: hidden;

    color: #44514b;

    font-size: 8px;

    line-height: 1.45;

    text-overflow: ellipsis;
}


/* =========================================================
   BODY
========================================================= */

.announcement-detail-body {
    margin-top: 12px;

    padding: 17px;

    border:
        1px solid #dfe8e4;

    border-radius: 17px;

    background: #ffffff;
}

.announcement-detail-section-label {
    display: block;

    color: #087f5b;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .55px;
}

.announcement-detail-description {
    margin-top: 11px;

    color: #4d5a54;

    font-size: 10px;

    line-height: 1.8;

    white-space: pre-line;
}


/* =========================================================
   INFORMATION
========================================================= */

.announcement-detail-info-card {
    margin-top: 10px;

    padding: 15px;

    border:
        1px solid #dfe8e4;

    border-radius: 16px;

    background: #ffffff;
}

.announcement-detail-info-row {
    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border-bottom:
        1px solid #edf1ef;
}

.announcement-detail-info-row:last-child {
    border-bottom: 0;
}

.announcement-detail-info-row span {
    color: #83908a;

    font-size: 8px;
}

.announcement-detail-info-row strong {
    color: #3d4a44;

    font-size: 8px;

    text-align: right;
}


/* =========================================================
   PUBLISHER
========================================================= */

.announcement-publisher-card {
    margin-top: 10px;

    padding: 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid #dfe8e4;

    border-radius: 15px;

    background: #ffffff;
}

.announcement-publisher-icon {
    width: 41px;
    height: 41px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: #e5f5ef;

    font-size: 17px;
}

.announcement-publisher-card > div:last-child {
    min-width: 0;

    display: flex;

    flex-direction: column;
}

.announcement-publisher-card small {
    color: #929b97;

    font-size: 7px;
}

.announcement-publisher-card strong {
    margin-top: 2px;

    color: #35423c;

    font-size: 9px;
}

.announcement-publisher-card span {
    margin-top: 2px;

    color: #087f5b;

    font-size: 7px;

    font-weight: 700;
}


/* =========================================================
   ACTIONS
========================================================= */

.announcement-detail-actions {
    margin-top: 13px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}

.announcement-detail-save,
.announcement-detail-share {
    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius: 13px;

    font-size: 9px;
}

.announcement-detail-save {
    border:
        1px solid #cadfd7;

    background: #ffffff;

    color: #087f5b;
}

.announcement-detail-save.saved {
    border-color: #087f5b;

    background: #e5f5ef;
}

.announcement-detail-share {
    border: 0;

    background: #087f5b;

    color: #ffffff;
}

.announcement-detail-actions strong {
    font-weight: 800;
}


/* =========================================================
   FOOTER
========================================================= */

.announcement-detail-footer-note {
    margin-top: 13px;

    padding: 12px;

    display: flex;

    align-items: flex-start;

    gap: 8px;

    border-radius: 13px;

    background: #eef6f3;
}

.announcement-detail-footer-note p {
    margin: 0;

    color: #70807a;

    font-size: 7px;

    line-height: 1.55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 420px) {

    .announcement-detail-content {
        width:
            calc(100% - 20px);
    }


    .announcement-detail-title {
        font-size: 18px;
    }


    .announcement-detail-meta {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   SAVED ANNOUNCEMENTS PAGE
========================================================= */

.saved-announcements-page {
    position: fixed;
    inset: 0;
    z-index: 290;

    display: none;

    overflow-y: auto;

    background: #f3f7f5;

    overscroll-behavior: contain;
}

.saved-announcements-page.active {
    display: block;
}

body.saved-announcements-open {
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.saved-announcements-header {
    position: sticky;
    top: 0;

    z-index: 20;

    min-height: 67px;

    padding:
        10px
        max(
            14px,
            env(safe-area-inset-right)
        );

    display: grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items: center;

    gap: 9px;

    border-bottom:
        1px solid #dde7e2;

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.saved-announcements-header > div {
    min-width: 0;
}

.saved-announcements-header span {
    display: block;

    color: #89948f;

    font-size: 7px;
}

.saved-announcements-header h2 {
    margin: 2px 0 0;

    color: #1b2822;

    font-size: 14px;
    font-weight: 800;
}

.saved-announcements-back,
.saved-announcements-clear {
    width: 40px;
    height: 40px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid #dce5e1;

    border-radius: 12px;

    background: #ffffff;

    color: #087f5b;
}

.saved-announcements-back {
    font-size: 22px;
}


/* =========================================================
   CONTENT
========================================================= */

.saved-announcements-content {
    width:
        calc(100% - 24px);

    max-width:
        620px;

    margin:
        0 auto;

    padding:
        16px 0
        calc(
            50px +
            env(safe-area-inset-bottom)
        );
}


/* =========================================================
   INTRO
========================================================= */

.saved-announcements-intro {
    padding: 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    border:
        1px solid #dfe8e4;

    border-radius: 16px;

    background: #ffffff;
}

.saved-announcements-intro-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e6f5ef;

    font-size: 18px;
}

.saved-announcements-intro span {
    color: #087f5b;

    font-size: 7px;

    font-weight: 800;
}

.saved-announcements-intro h3 {
    margin: 3px 0 0;

    color: #26332d;

    font-size: 12px;

    font-weight: 800;
}

.saved-announcements-intro p {
    margin: 4px 0 0;

    color: #7c8983;

    font-size: 8px;

    line-height: 1.55;
}


/* =========================================================
   RESULT
========================================================= */

.saved-announcements-result {
    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.saved-announcements-result span {
    color: #6f7d77;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   LIST
========================================================= */

.saved-announcements-list {
    margin-top: 9px;

    display: grid;

    gap: 9px;
}


/* =========================================================
   CARD
========================================================= */

.saved-announcement-card {
    padding: 14px;

    border:
        1px solid #dfe8e4;

    border-radius: 16px;

    background: #ffffff;

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.saved-announcement-card:active {
    transform:
        scale(.985);
}

.saved-announcement-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;
}

.saved-announcement-scope {
    min-height: 23px;

    padding:
        0 8px;

    display: inline-flex;

    align-items: center;

    border-radius: 8px;

    background: #e3f5ee;

    color: #087f5b;

    font-size: 7px;

    font-weight: 800;
}

.saved-announcement-remove {
    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid #e2e8e5;

    border-radius: 9px;

    background: #ffffff;

    color: #8f9995;

    font-size: 11px;
}

.saved-announcement-card h3 {
    margin:
        10px 0 0;

    color: #24312b;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.45;
}

.saved-announcement-card p {
    margin: 6px 0 0;

    overflow: hidden;

    color: #6c7973;

    font-size: 9px;

    line-height: 1.6;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    line-clamp: 3;
}

.saved-announcement-meta {
    margin-top: 11px;

    padding-top: 9px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    border-top:
        1px solid #edf1ef;
}

.saved-announcement-meta span {
    min-width: 0;

    overflow: hidden;

    color: #89938f;

    font-size: 7px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   EMPTY
========================================================= */

.saved-announcements-empty {
    padding:
        38px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border:
        1px solid #dfe8e4;

    border-radius: 16px;

    background: #ffffff;
}

.saved-announcements-empty > span {
    font-size: 30px;
}

.saved-announcements-empty strong {
    margin-top: 10px;

    color: #34423b;

    font-size: 11px;
}

.saved-announcements-empty p {
    max-width: 280px;

    margin:
        5px 0 0;

    color: #8a9690;

    font-size: 8px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 420px) {

    .saved-announcements-content {
        width:
            calc(100% - 20px);
    }


    .saved-announcement-meta {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* =========================================================
   WARGAHUB - IN APP NOTIFICATIONS
========================================================= */


/* =========================================================
   HEADER BADGE
========================================================= */

.notification-button {
    position: relative;
}


.notification-count-badge {
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: none;

    align-items: center;
    justify-content: center;

    border: 2px solid #ffffff;

    border-radius: 999px;

    background: #dc3545;

    color: #ffffff;

    font-size: 7px;
    font-weight: 800;

    line-height: 1;
}


.notification-count-badge.show {
    display: flex;
}



/* =========================================================
   BOTTOM NAV BADGE
========================================================= */

.notification-nav-icon {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;
}


.notification-nav-badge {
    position: absolute;

    top: -8px;
    right: -12px;

    min-width: 16px;
    height: 16px;

    padding: 0 4px;

    display: none;

    align-items: center;
    justify-content: center;

    border: 2px solid #ffffff;

    border-radius: 999px;

    background: #dc3545;

    color: #ffffff;

    font-size: 6px;
    font-weight: 800;

    line-height: 1;
}


.notification-nav-badge.show {
    display: flex;
}



/* =========================================================
   PAGE HEADER
========================================================= */

.notification-page-header {
    padding:
        18px
        18px
        12px;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.notification-page-caption {
    color: #087f5b;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .07em;
}


.notification-page-header h2 {
    margin:
        3px 0 0;

    color: #1f2d27;

    font-size: 20px;
    font-weight: 850;
}


.notification-page-header p {
    margin:
        4px 0 0;

    color: #89938f;

    font-size: 9px;
}


.notification-read-all {
    min-height: 34px;

    padding:
        0 11px;

    flex: 0 0 auto;

    border:
        1px solid #dbe6e1;

    border-radius: 10px;

    background: #ffffff;

    color: #087f5b;

    font-size: 8px;
    font-weight: 750;

    cursor: pointer;
}


.notification-read-all:disabled {
    opacity: .45;

    cursor: default;
}



/* =========================================================
   SUMMARY
========================================================= */

.notification-page-summary {
    margin:
        0 18px
        14px;

    padding: 13px;

    display: flex;

    align-items: center;

    gap: 11px;

    border:
        1px solid #dfe9e4;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f7fffb,
            #ffffff
        );
}


.notification-summary-icon {
    width: 41px;
    height: 41px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e3f5ed;

    font-size: 17px;
}


.notification-page-summary strong {
    display: block;

    color: #293630;

    font-size: 10px;
    font-weight: 800;
}


.notification-page-summary span {
    display: block;

    margin-top: 3px;

    color: #84908a;

    font-size: 8px;
}



/* =========================================================
   LIST
========================================================= */

.notification-list {
    padding:
        0 18px
        110px;

    display: grid;

    gap: 9px;
}



/* =========================================================
   NOTIFICATION CARD
========================================================= */

.notification-item {
    position: relative;

    padding: 13px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 11px;

    border:
        1px solid #e0e8e4;

    border-radius: 16px;

    background: #ffffff;

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;
}


.notification-item:active {
    transform:
        scale(.985);
}


.notification-item.unread {
    border-color:
        #bae0d1;

    background:
        linear-gradient(
            135deg,
            #f4fcf8,
            #ffffff
        );
}


.notification-item.read {
    opacity: .76;
}



/* =========================================================
   ICON
========================================================= */

.notification-item-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #edf7f3;

    font-size: 18px;
}



/* =========================================================
   BODY
========================================================= */

.notification-item-body {
    min-width: 0;
}


.notification-item-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;
}


.notification-item-badges {
    min-width: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 4px;
}


.notification-status {
    min-height: 20px;

    padding:
        0 7px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    font-size: 6px;
    font-weight: 800;
}


.notification-status.scope {
    background: #e5f5ef;

    color: #087f5b;
}


.notification-status.important {
    background: #fff2d8;

    color: #a66400;
}


.notification-status.danger {
    background: #ffe3e5;

    color: #b4232d;
}


.notification-status.pinned {
    background: #edf0ff;

    color: #4d5bb5;
}


.notification-unread-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #e63946;

    box-shadow:
        0 0 0 3px
        rgba(230,57,70,.10);
}



/* =========================================================
   TEXT
========================================================= */

.notification-item h3 {
    margin:
        8px 0 0;

    color: #25332d;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.4;
}


.notification-item.unread h3 {
    color: #18251f;
}


.notification-item p {
    margin:
        5px 0 0;

    overflow: hidden;

    color: #6f7c76;

    font-size: 8px;

    line-height: 1.55;

    max-height: 3.1em;
}



/* =========================================================
   META
========================================================= */

.notification-item-meta {
    margin-top: 9px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;
}


.notification-item-meta span {
    min-width: 0;

    overflow: hidden;

    color: #909b96;

    font-size: 7px;

    text-overflow: ellipsis;

    white-space: nowrap;
}



/* =========================================================
   EMPTY
========================================================= */

.notification-empty-state {
    min-height: 240px;

    padding:
        35px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border:
        1px solid #e0e8e4;

    border-radius: 17px;

    background: #ffffff;
}


.notification-empty-state > span {
    font-size: 31px;
}


.notification-empty-state strong {
    margin-top: 10px;

    color: #314039;

    font-size: 11px;
}


.notification-empty-state p {
    max-width: 280px;

    margin:
        5px 0 0;

    color: #8b9691;

    font-size: 8px;

    line-height: 1.6;
}


.notification-retry-button {
    margin-top: 13px;

    min-height: 34px;

    padding:
        0 14px;

    border: none;

    border-radius: 10px;

    background: #087f5b;

    color: #ffffff;

    font-size: 8px;
    font-weight: 800;
}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .notification-page-header {
        padding-left: 14px;
        padding-right: 14px;
    }


    .notification-page-summary {
        margin-left: 14px;
        margin-right: 14px;
    }


    .notification-list {
        padding-left: 14px;
        padding-right: 14px;
    }


    .notification-read-all {
        padding:
            0 8px;

        font-size: 7px;
    }

}

/* =========================================================
   WARGAHUB PUSH NOTIFICATION SETTING
========================================================= */

.push-notification-setting {
    width: 100%;
}

.push-setting-content {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 3px;

    text-align: left;
}

.push-setting-title {
    font-size: inherit;
    font-weight: 600;
    color: inherit;
}

.push-setting-description {
    display: block;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;

    color: #7b8494;
}

.push-notification-setting:disabled {
    opacity: 0.65;
    cursor: default;
}

.push-notification-status {
    margin:
        -4px
        14px
        8px
        48px;

    padding:
        7px
        10px;

    border-radius: 8px;

    background:
        #f6f8fb;

    color:
        #667085;

    font-size:
        11px;

    line-height:
        1.4;
}

.push-notification-status[data-status="success"] {
    background:
        #ecfdf3;

    color:
        #027a48;
}

.push-notification-status[data-status="warning"] {
    background:
        #fffaeb;

    color:
        #b54708;
}

.push-notification-status[data-status="error"] {
    background:
        #fef3f2;

    color:
        #b42318;
}

.push-notification-status[data-status="loading"] {
    background:
        #eff8ff;

    color:
        #175cd3;
}

/* =========================================================
   PROFILE LOGOUT BUTTON - FINAL
========================================================= */

#btnLogout.profile-logout-btn {
    width: 100% !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    display: grid !important;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        20px !important;

    align-items: center !important;

    gap: 0 !important;

    border: none !important;
    border-top: 1px solid var(--border) !important;

    border-radius: 0 !important;

    background: #ffffff !important;

    box-shadow: none !important;

    text-align: left !important;
}


/* IKON */

#btnLogout .profile-logout-icon {
    width: 30px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    font-size: 17px !important;
    line-height: 1 !important;
}


/* TEXT */

#btnLogout .profile-logout-text {
    display: block !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #dc3545 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* PANAH */

#btnLogout .profile-logout-arrow {
    display: block !important;

    margin: 0 !important;

    text-align: right !important;

    color: var(--text-soft) !important;

    font-size: 18px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
}


/* SAAT DITEKAN */

#btnLogout.profile-logout-btn:active {
    background: #fff4f4 !important;
}


/* HP KECIL */

@media (max-width: 350px) {

    #btnLogout.profile-logout-btn {

        min-height: 56px !important;

        padding:
            0 14px !important;

        grid-template-columns:
            28px
            minmax(0, 1fr)
            18px !important;
    }


    #btnLogout .profile-logout-text {
        font-size: 10px !important;
    }

}

/* =========================================================
   WARGAHUB
   GLOBAL UI CONSISTENCY SYSTEM
   FINAL POLISH
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

    /* Typography */
    --wh-font-xs: 8px;
    --wh-font-sm: 10px;
    --wh-font-md: 12px;
    --wh-font-base: 14px;
    --wh-font-lg: 17px;
    --wh-font-xl: 21px;
    --wh-font-2xl: 24px;

    /* Radius */
    --wh-radius-xs: 8px;
    --wh-radius-sm: 12px;
    --wh-radius-md: 16px;
    --wh-radius-lg: 19px;
    --wh-radius-xl: 24px;

    /* Spacing */
    --wh-space-xs: 6px;
    --wh-space-sm: 10px;
    --wh-space-md: 14px;
    --wh-space-lg: 18px;
    --wh-space-xl: 24px;

    /* Component heights */
    --wh-touch-height: 48px;
    --wh-menu-height: 56px;
    --wh-header-height: 68px;

    /* Surface */
    --wh-card-border: #e2e9e5;

    --wh-card-shadow:
        0 6px 20px
        rgba(27, 55, 44, .045);

    --wh-card-shadow-active:
        0 4px 13px
        rgba(27, 55, 44, .035);

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

body {
    font-weight: 400;
    line-height: 1.5;
}


h1,
h2,
h3,
h4,
strong {
    text-rendering: optimizeLegibility;
}


.app-page h2,
.subpage-header h2 {
    font-weight: 800;
    letter-spacing: -0.015em;
}


.app-page h3 {
    font-weight: 800;
}


.section-caption,
.header-caption,
.notification-page-caption,
.announcement-detail-section-label {
    font-weight: 800;
    letter-spacing: .07em;
}


/* =========================================================
   STANDARD CONTENT WIDTH
========================================================= */

.page-content {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}


/* =========================================================
   STANDARD CARD LANGUAGE
========================================================= */

.profile-region-card,
.profile-menu,
.form-card,
.notification-card,
.page-empty-card,
.home-location-card,
.home-important-card,
.home-stat-row,
.home-announcement-card,
.home-event-card,
.saved-announcement-card,
.saved-announcements-intro,
.saved-announcements-empty,
.notification-item,
.notification-page-summary,
.announcement-detail-info-card,
.announcement-publisher-card {

    border-color:
        var(--wh-card-border);

    box-shadow:
        var(--wh-card-shadow);

}


/* =========================================================
   CARD INTERACTION
========================================================= */

.home-announcement-card,
.home-event-card,
.notification-item,
.saved-announcement-card,
.clickable-announcement {

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease;

}


.home-announcement-card:active,
.home-event-card:active,
.notification-item:active,
.saved-announcement-card:active,
.clickable-announcement:active {

    transform:
        scale(.986);

    box-shadow:
        var(--wh-card-shadow-active);

}


/* =========================================================
   STANDARD BUTTON FEEDBACK
========================================================= */

button {
    transition:
        transform .14s ease,
        opacity .14s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


button:active:not(:disabled) {
    transform:
        scale(.985);
}


button:focus-visible {
    outline:
        3px solid
        rgba(8, 127, 91, .15);

    outline-offset:
        2px;
}


/* =========================================================
   STANDARD PRIMARY BUTTON
========================================================= */

.primary-button {

    min-height:
        50px;

    border-radius:
        14px;

    font-size:
        13px;

    font-weight:
        750;

}


/* =========================================================
   PROFILE MENU
========================================================= */

.profile-menu {

    border:
        1px solid
        var(--wh-card-border);

    border-radius:
        var(--wh-radius-lg);

}


.profile-menu button {

    min-height:
        var(--wh-menu-height);

    padding:
        0 16px;

    font-size:
        11px;

    line-height:
        1.3;

}


.profile-menu button > span:first-child {

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

}


.profile-menu b {

    font-size:
        18px;

    font-weight:
        700;

}


/* =========================================================
   PROFILE REGION
========================================================= */

.profile-region-card {

    border:
        1px solid
        var(--wh-card-border);

    border-radius:
        var(--wh-radius-lg);

    padding:
        15px;

}


.profile-region-card span {

    font-size:
        9px;

    line-height:
        1.35;

}


.profile-region-card strong {

    margin-top:
        5px;

    font-size:
        12px;

    line-height:
        1.55;

}


/* =========================================================
   HEADERS
========================================================= */

.subpage-header {

    min-height:
        var(--wh-header-height);

    display:
        flex;

    align-items:
        center;

}


.subpage-header span {

    font-size:
        9px;

}


.subpage-header h2 {

    margin-top:
        3px;

    font-size:
        20px;

    line-height:
        1.25;

}


/* =========================================================
   OVERLAY PAGE HEADERS
========================================================= */

.announcement-page-header,
.announcement-detail-header,
.saved-announcements-header {

    min-height:
        var(--wh-header-height);

    border-bottom:
        1px solid
        var(--wh-card-border);

    box-shadow:
        0 2px 10px
        rgba(25, 50, 40, .025);

}


/* =========================================================
   HEADER BUTTON
========================================================= */

.announcement-back-button,
.announcement-refresh-button,
.announcement-detail-back,
.announcement-detail-header-action,
.saved-announcements-back,
.saved-announcements-clear {

    width:
        40px;

    height:
        40px;

    min-height:
        40px;

    border-radius:
        12px;

}


/* =========================================================
   BADGE STANDARD
========================================================= */

.badge,
.home-badge,
.notification-status,
.saved-announcement-scope,
.saved-badge {

    min-height:
        22px;

    padding:
        0 8px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    font-size:
        7px;

    font-weight:
        800;

    line-height:
        1;

}


/* =========================================================
   STATUS COLORS
========================================================= */

.notification-status.scope,
.saved-announcement-scope {

    background:
        #e5f5ef;

    color:
        #087f5b;

}


.notification-status.important,
.saved-badge.important {

    background:
        #fff2d8;

    color:
        #a66400;

}


.notification-status.danger,
.saved-badge.danger {

    background:
        #ffe3e5;

    color:
        #b4232d;

}


.notification-status.pinned,
.saved-badge.pinned {

    background:
        #edf0ff;

    color:
        #4d5bb5;

}


/* =========================================================
   NOTIFICATION LIST
========================================================= */

.notification-item {

    border-radius:
        var(--wh-radius-md);

    padding:
        14px;

}


.notification-item-icon {

    width:
        42px;

    height:
        42px;

    border-radius:
        13px;

}


.notification-item h3 {

    font-size:
        11px;

    line-height:
        1.45;

}


.notification-item p {

    font-size:
        9px;

    line-height:
        1.55;

}


.notification-item-meta span {

    font-size:
        7px;

}


/* =========================================================
   ANNOUNCEMENT CARDS
========================================================= */

.home-announcement-card,
.all-announcement-card,
.saved-announcement-card {

    border-radius:
        var(--wh-radius-md);

}


.home-announcement-card h3,
.all-announcement-card h3,
.saved-announcement-card h3 {

    font-size:
        12px;

    line-height:
        1.45;

}


.home-announcement-card p,
.all-announcement-card p,
.saved-announcement-card p {

    font-size:
        9px;

    line-height:
        1.6;

}


/* =========================================================
   EMPTY STATE STANDARD
========================================================= */

.page-empty-card,
.notification-empty-state,
.saved-announcements-empty,
.announcement-page-empty {

    min-height:
        190px;

    padding:
        32px 20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.notification-empty-state,
.saved-announcements-empty {

    border:
        1px solid
        var(--wh-card-border);

    border-radius:
        var(--wh-radius-md);

    background:
        #ffffff;

}


.notification-empty-state > span,
.saved-announcements-empty > span,
.announcement-page-empty > span:not(.announcement-page-loader) {

    font-size:
        30px;

    line-height:
        1;

}


.page-empty-card h3,
.notification-empty-state strong,
.saved-announcements-empty strong,
.announcement-page-empty strong {

    margin-top:
        11px;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.4;

}


.page-empty-card p,
.notification-empty-state p,
.saved-announcements-empty p,
.announcement-page-empty small {

    max-width:
        290px;

    margin-top:
        6px;

    color:
        var(--text-soft);

    font-size:
        9px;

    line-height:
        1.6;

}


/* =========================================================
   GLOBAL LOADING
========================================================= */

.global-loading {

    background:
        rgba(255, 255, 255, .86);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

}


.loading-spinner {

    width:
        36px;

    height:
        36px;

    border-width:
        3px;

}


.global-loading span {

    font-size:
        11px;

    font-weight:
        700;

}


/* =========================================================
   TOAST
========================================================= */

.toast {

    padding:
        12px 15px;

    border-radius:
        13px;

    font-size:
        11px;

    font-weight:
        600;

    box-shadow:
        0 10px 28px
        rgba(20, 40, 32, .16);

    transition:
        opacity .22s ease,
        transform .22s ease;

}


/* =========================================================
   FORM CONTROLS
========================================================= */

input,
select,
textarea {

    border-radius:
        14px;

    font-size:
        13px;

}


input,
select {

    min-height:
        48px;

}


textarea {

    line-height:
        1.55;

}


/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav {

    border-top:
        1px solid
        var(--wh-card-border);

    box-shadow:
        0 -5px 20px
        rgba(30, 55, 45, .04);

}


.nav-item {

    min-height:
        56px;

}


.nav-item small {

    margin-top:
        1px;

    font-size:
        8px;

    font-weight:
        650;

}


/* =========================================================
   MOTION
========================================================= */

.app-page.active {

    animation:
        whPageEnter
        .18s
        ease-out;

}


@keyframes whPageEnter {

    from {

        opacity:
            .35;

        transform:
            translateY(3px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .page-content {

        padding-left:
            13px;

        padding-right:
            13px;

    }


    .profile-menu button {

        min-height:
            54px;

        padding:
            0 14px;

    }


    .subpage-header h2 {

        font-size:
            19px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 330px) {

    .profile-menu button {

        font-size:
            10px;

    }


    .primary-button {

        font-size:
            12px;

    }

}

/* =========================================================
   WARGAHUB
   DETAIL PENGUMUMAN - PROFESSIONAL FINAL UI
   ========================================================= */


/* =========================================================
   PAGE
========================================================= */

#pageAnnouncementDetail {
    position: fixed;
    inset: 0;
    z-index: 2200;

    display: none;
    flex-direction: column;

    width: 100%;
    min-height: 100dvh;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            #f8fbfa 0%,
            #f3f8f6 100%
        );

    color: #1f2d27;

    -webkit-overflow-scrolling: touch;
}


#pageAnnouncementDetail.active {
    display: flex;
}


/* =========================================================
   HEADER
========================================================= */

#pageAnnouncementDetail .announcement-detail-header {
    position: sticky;
    top: 0;
    z-index: 20;

    width: 100%;
    min-height: 74px;

    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 14px;

    padding:
        max(12px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        12px
        max(20px, env(safe-area-inset-left));

    border-bottom: 1px solid #e4ece8;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 4px 18px rgba(31, 55, 44, 0.04);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


#pageAnnouncementDetail .announcement-detail-header > div {
    min-width: 0;
}


#pageAnnouncementDetail .announcement-detail-header > div > span {
    display: block;

    margin-bottom: 2px;

    color: #7b8b84;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: 0.02em;
}


#pageAnnouncementDetail .announcement-detail-header h2 {
    margin: 0;

    overflow: hidden;

    color: #1c2923;

    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   HEADER BUTTON
========================================================= */

#pageAnnouncementDetail .announcement-detail-back,
#pageAnnouncementDetail .announcement-detail-header-action {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #dce7e2;
    border-radius: 14px;

    background: #ffffff;

    color: #087f5b;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


#pageAnnouncementDetail .announcement-detail-back {
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
}


#pageAnnouncementDetail .announcement-detail-header-action .wh-icon {
    width: 20px;
    height: 20px;
}


#pageAnnouncementDetail .announcement-detail-back:hover,
#pageAnnouncementDetail .announcement-detail-header-action:hover {
    border-color: #bcded1;

    background: #f0faf6;

    box-shadow:
        0 6px 18px rgba(8, 127, 91, 0.09);
}


#pageAnnouncementDetail .announcement-detail-back:active,
#pageAnnouncementDetail .announcement-detail-header-action:active {
    transform: scale(0.96);
}


/* =========================================================
   CONTENT WRAPPER
========================================================= */

#pageAnnouncementDetail .announcement-detail-content {
    width: min(100% - 32px, 760px);

    margin: 0 auto;

    padding:
        30px
        0
        calc(44px + env(safe-area-inset-bottom));
}


/* =========================================================
   BADGES
========================================================= */

#pageAnnouncementDetail .announcement-detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    min-height: 28px;

    margin-bottom: 14px;
}


#pageAnnouncementDetail .announcement-detail-badges:empty {
    display: none;
}


#pageAnnouncementDetail .announcement-detail-badges span {
    min-height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 11px;

    border-radius: 999px;

    background: #e7f7f1;

    color: #087f5b;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}


#pageAnnouncementDetail .announcement-detail-badges span:first-child {
    background: #fff0f2;
    color: #c3344c;
}


/* =========================================================
   TITLE
========================================================= */

#pageAnnouncementDetail .announcement-detail-title {
    margin:
        0
        0
        22px;

    color: #14221c;

    font-size: clamp(25px, 4vw, 34px);
    font-weight: 850;
    line-height: 1.22;

    letter-spacing: -0.025em;

    overflow-wrap: anywhere;
}


/* =========================================================
   META
========================================================= */

#pageAnnouncementDetail .announcement-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 14px;
}


#pageAnnouncementDetail .announcement-detail-meta > div {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 76px;

    padding: 14px 16px;

    border: 1px solid #dde8e3;
    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 4px 14px rgba(31, 55, 44, 0.035);
}


#pageAnnouncementDetail .announcement-detail-meta > div > span {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e8f7f1;

    color: #087f5b;
}


#pageAnnouncementDetail .announcement-detail-meta .wh-icon {
    width: 20px;
    height: 20px;
}


#pageAnnouncementDetail .announcement-detail-meta > div > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


#pageAnnouncementDetail .announcement-detail-meta small {
    color: #85928c;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}


#pageAnnouncementDetail .announcement-detail-meta strong {
    display: block;

    margin: 0;

    overflow: visible;

    color: #25352e;

    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;

    text-overflow: initial;
    white-space: normal;

    overflow-wrap: anywhere;
}


/* =========================================================
   COMMON CARD
========================================================= */

#pageAnnouncementDetail .announcement-detail-body,
#pageAnnouncementDetail .announcement-detail-info-card,
#pageAnnouncementDetail .announcement-publisher-card {
    border: 1px solid #dde8e3;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(31, 55, 44, 0.035);
}


/* =========================================================
   BODY / ISI PENGUMUMAN
========================================================= */

#pageAnnouncementDetail .announcement-detail-body {
    margin-top: 14px;

    padding: 22px;

    border-radius: 18px;
}


#pageAnnouncementDetail .announcement-detail-section-label {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #087f5b;

    font-size: 10px;
    font-weight: 850;
    line-height: 1.25;

    letter-spacing: 0.08em;
}


#pageAnnouncementDetail .announcement-detail-section-label::before {
    content: "";

    width: 4px;
    height: 14px;

    border-radius: 999px;

    background: #0b936b;
}


#pageAnnouncementDetail .announcement-detail-description {
    margin-top: 16px;

    color: #35463e;

    font-size: 15px;
    font-weight: 450;
    line-height: 1.8;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =========================================================
   INFORMATION CARD
========================================================= */

#pageAnnouncementDetail .announcement-detail-info-card {
    margin-top: 14px;

    padding:
        20px
        22px
        8px;

    border-radius: 18px;
}


#pageAnnouncementDetail .announcement-detail-info-card
.announcement-detail-section-label {
    margin-bottom: 9px;
}


#pageAnnouncementDetail .announcement-detail-info-row {
    min-height: 55px;

    display: grid;
    grid-template-columns: minmax(120px, 0.65fr) minmax(0, 1.35fr);
    align-items: center;

    gap: 20px;

    border-bottom: 1px solid #edf2ef;
}


#pageAnnouncementDetail .announcement-detail-info-row:last-child {
    border-bottom: 0;
}


#pageAnnouncementDetail .announcement-detail-info-row > span {
    color: #7e8c85;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}


#pageAnnouncementDetail .announcement-detail-info-row > strong {
    color: #26372f;

    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;

    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================================
   PUBLISHER
========================================================= */

#pageAnnouncementDetail .announcement-publisher-card {
    margin-top: 14px;

    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 16px 18px;

    border-radius: 18px;
}


#pageAnnouncementDetail .announcement-publisher-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #e8f7f1,
            #dff3eb
        );

    color: #087f5b;
}


#pageAnnouncementDetail .announcement-publisher-icon .wh-icon {
    width: 22px;
    height: 22px;
}


#pageAnnouncementDetail .announcement-publisher-card > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


#pageAnnouncementDetail .announcement-publisher-card small {
    color: #87948e;

    font-size: 10px;
    font-weight: 500;
}


#pageAnnouncementDetail .announcement-publisher-card strong {
    margin: 2px 0 0;

    color: #22342c;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}


#pageAnnouncementDetail .announcement-publisher-card
#detailAnnouncementAuthorRole {
    margin-top: 2px;

    color: #087f5b;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

#pageAnnouncementDetail .announcement-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 16px;
}


#pageAnnouncementDetail .announcement-detail-actions button {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 18px;

    border-radius: 16px;

    cursor: pointer;

    font-family: inherit;

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease;
}


#pageAnnouncementDetail .announcement-detail-actions button:active {
    transform: scale(0.985);
}


#pageAnnouncementDetail .announcement-detail-save {
    border: 1px solid #bcded1;

    background: #ffffff;

    color: #087f5b;
}


#pageAnnouncementDetail .announcement-detail-save:hover {
    border-color: #87c9b1;

    background: #f2faf7;
}


#pageAnnouncementDetail .announcement-detail-share {
    border: 1px solid #087f5b;

    background:
        linear-gradient(
            135deg,
            #087f5b,
            #0a9068
        );

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(8, 127, 91, 0.14);
}


#pageAnnouncementDetail .announcement-detail-share:hover {
    box-shadow:
        0 10px 24px rgba(8, 127, 91, 0.2);
}


#pageAnnouncementDetail .announcement-detail-actions button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
}


#pageAnnouncementDetail .announcement-detail-actions button .wh-icon {
    width: 18px;
    height: 18px;
}


#pageAnnouncementDetail .announcement-detail-actions button strong {
    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   SAVED STATE
========================================================= */

#pageAnnouncementDetail .announcement-detail-save.saved,
#pageAnnouncementDetail .announcement-detail-save.active {
    border-color: #087f5b;

    background: #e8f7f1;

    color: #087f5b;
}


#pageAnnouncementDetail
.announcement-detail-header-action.saved,
#pageAnnouncementDetail
.announcement-detail-header-action.active {
    border-color: #b7dccf;

    background: #e7f6f0;

    color: #087f5b;
}


/* =========================================================
   FOOTER NOTE
========================================================= */

#pageAnnouncementDetail .announcement-detail-footer-note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-top: 14px;

    padding: 14px 16px;

    border: 1px solid #e3eee9;
    border-radius: 15px;

    background: #edf8f4;

    color: #65766e;
}


#pageAnnouncementDetail .announcement-detail-footer-note > span {
    flex: 0 0 auto;

    display: inline-flex;

    margin-top: 1px;

    color: #087f5b;
}


#pageAnnouncementDetail .announcement-detail-footer-note .wh-icon {
    width: 18px;
    height: 18px;
}


#pageAnnouncementDetail .announcement-detail-footer-note p {
    margin: 0;

    color: #66766f;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

#pageAnnouncementDetail button:focus-visible {
    outline: 3px solid rgba(8, 127, 91, 0.18);
    outline-offset: 2px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    #pageAnnouncementDetail .announcement-detail-header {
        min-height: 68px;

        grid-template-columns:
            44px
            minmax(0, 1fr)
            44px;

        gap: 11px;

        padding-left:
            max(14px, env(safe-area-inset-left));

        padding-right:
            max(14px, env(safe-area-inset-right));
    }


    #pageAnnouncementDetail .announcement-detail-content {
        width: min(100% - 28px, 680px);

        padding-top: 23px;
    }


    #pageAnnouncementDetail .announcement-detail-title {
        margin-bottom: 18px;

        font-size: 25px;
    }


    #pageAnnouncementDetail .announcement-detail-description {
        font-size: 14px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    #pageAnnouncementDetail .announcement-detail-header {
        min-height: 64px;
    }


    #pageAnnouncementDetail .announcement-detail-header h2 {
        font-size: 16px;
    }


    #pageAnnouncementDetail .announcement-detail-header > div > span {
        font-size: 9px;
    }


    #pageAnnouncementDetail .announcement-detail-back,
    #pageAnnouncementDetail .announcement-detail-header-action {
        width: 40px;
        height: 40px;

        border-radius: 12px;
    }


    #pageAnnouncementDetail .announcement-detail-content {
        width: calc(100% - 24px);

        padding:
            18px
            0
            calc(34px + env(safe-area-inset-bottom));
    }


    #pageAnnouncementDetail .announcement-detail-badges {
        margin-bottom: 12px;
    }


    #pageAnnouncementDetail .announcement-detail-badges span {
        min-height: 26px;

        padding: 5px 9px;

        font-size: 10px;
    }


    #pageAnnouncementDetail .announcement-detail-title {
        margin-bottom: 16px;

        font-size: 22px;
        line-height: 1.28;
    }


    #pageAnnouncementDetail .announcement-detail-meta {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    #pageAnnouncementDetail .announcement-detail-meta > div {
        min-height: 68px;

        padding: 12px 13px;

        border-radius: 15px;
    }


    #pageAnnouncementDetail .announcement-detail-meta > div > span {
        width: 39px;
        height: 39px;

        flex-basis: 39px;

        border-radius: 12px;
    }


    #pageAnnouncementDetail .announcement-detail-meta strong {
        font-size: 12px;
    }


    #pageAnnouncementDetail .announcement-detail-body {
        padding: 18px 16px;

        border-radius: 16px;
    }


    #pageAnnouncementDetail .announcement-detail-description {
        margin-top: 13px;

        font-size: 14px;
        line-height: 1.72;
    }


    #pageAnnouncementDetail .announcement-detail-info-card {
        padding:
            18px
            16px
            6px;

        border-radius: 16px;
    }


    #pageAnnouncementDetail .announcement-detail-info-row {
        min-height: 52px;

        grid-template-columns:
            minmax(90px, 0.7fr)
            minmax(0, 1.3fr);

        gap: 12px;
    }


    #pageAnnouncementDetail .announcement-detail-info-row > span {
        font-size: 11px;
    }


    #pageAnnouncementDetail .announcement-detail-info-row > strong {
        font-size: 12px;
    }


    #pageAnnouncementDetail .announcement-publisher-card {
        min-height: 76px;

        padding: 14px;

        border-radius: 16px;
    }


    #pageAnnouncementDetail .announcement-publisher-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 14px;
    }


    #pageAnnouncementDetail .announcement-detail-actions {
        gap: 9px;

        margin-top: 14px;
    }


    #pageAnnouncementDetail .announcement-detail-actions button {
        min-height: 50px;

        padding: 0 12px;

        border-radius: 14px;
    }


    #pageAnnouncementDetail .announcement-detail-actions button strong {
        font-size: 12px;
    }


    #pageAnnouncementDetail .announcement-detail-footer-note {
        padding: 12px 13px;
    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 360px) {

    #pageAnnouncementDetail .announcement-detail-content {
        width: calc(100% - 18px);
    }


    #pageAnnouncementDetail .announcement-detail-title {
        font-size: 20px;
    }


    #pageAnnouncementDetail .announcement-detail-actions {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   WARGAHUB
   PENGUMUMAN + DETAIL PENGUMUMAN
   RESPONSIVE ALL ANDROID
   FINAL OVERRIDE
========================================================= */


/* =========================================================
   GLOBAL SAFE MOBILE
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


img,
svg {
    max-width: 100%;
}


/* =========================================================
   ANNOUNCEMENT PAGE
========================================================= */

#pageAnnouncements {
    width: 100%;
    min-height: 100dvh;

    overflow-x: hidden;

    background: #f5faf8;
}


/* =========================================================
   HEADER
========================================================= */

#pageAnnouncements .announcement-page-header {
    position: sticky;
    top: 0;
    z-index: 50;

    width: 100%;
    min-height: 64px;

    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;

    gap: 10px;

    padding:
        max(10px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        10px
        max(12px, env(safe-area-inset-left));

    border-bottom: 1px solid #e3ece8;

    background: rgba(255, 255, 255, 0.97);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


#pageAnnouncements .announcement-page-header > div {
    min-width: 0;
}


#pageAnnouncements .announcement-page-header span {
    display: block;

    margin-bottom: 2px;

    color: #819089;

    font-size: 9px;
    line-height: 1.2;
}


#pageAnnouncements .announcement-page-header h2 {
    margin: 0;

    overflow: hidden;

    color: #1d2b25;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;

    text-overflow: ellipsis;
    white-space: nowrap;
}


#pageAnnouncements .announcement-back-button,
#pageAnnouncements .announcement-refresh-button {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #dce7e2;
    border-radius: 12px;

    background: #ffffff;

    color: #087f5b;

    cursor: pointer;
}


#pageAnnouncements .announcement-back-button {
    font-size: 25px;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

#pageAnnouncements .announcement-page-content {
    width: min(
        calc(100% - 24px),
        720px
    );

    margin: 0 auto;

    padding:
        16px
        0
        calc(28px + env(safe-area-inset-bottom));
}


/* =========================================================
   INTRO CARD
========================================================= */

#pageAnnouncements .announcement-page-intro {
    width: 100%;

    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;

    gap: 12px;

    padding: 16px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #087f5b,
            #0aa578
        );

    color: #ffffff;

    box-shadow:
        0 8px 24px rgba(8, 127, 91, 0.12);
}


#pageAnnouncements .announcement-page-intro-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;

    background: rgba(255,255,255,.12);
}


#pageAnnouncements .announcement-page-intro-icon .wh-icon {
    width: 21px;
    height: 21px;
}


#pageAnnouncements .announcement-page-intro > div:last-child {
    min-width: 0;
}


#pageAnnouncements .announcement-page-intro span {
    display: block;

    margin-bottom: 4px;

    color: rgba(255,255,255,.82);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .04em;
}


#pageAnnouncements .announcement-page-intro h3 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
    font-weight: 850;
    line-height: 1.3;

    overflow-wrap: anywhere;
}


#pageAnnouncements .announcement-page-intro p {
    margin: 5px 0 0;

    color: rgba(255,255,255,.88);

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   FILTER
========================================================= */

#pageAnnouncements .announcement-filter-row {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    padding:
        0
        0
        4px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


#pageAnnouncements .announcement-filter-row::-webkit-scrollbar {
    display: none;
}


#pageAnnouncements .announcement-filter {
    flex: 0 0 auto;

    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 13px;

    border: 1px solid #dbe6e1;
    border-radius: 12px;

    background: #ffffff;

    color: #34443c;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
}


#pageAnnouncements .announcement-filter.active {
    border-color: #087f5b;

    background: #087f5b;

    color: #ffffff;
}


/* =========================================================
   RESULT BAR
========================================================= */

#pageAnnouncements .announcement-result-bar {
    width: 100%;

    margin:
        10px
        0
        8px;

    padding:
        0
        2px;

    color: #788981;

    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   ANNOUNCEMENT LIST
========================================================= */

#pageAnnouncements .all-announcements-list {
    width: 100%;

    display: grid;

    gap: 10px;
}


/* =========================================================
   ANNOUNCEMENT CARD
========================================================= */

#pageAnnouncements .all-announcement-card {
    width: 100%;

    min-width: 0;

    padding: 16px;

    border: 1px solid #dde8e3;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 5px 18px rgba(31, 55, 44, 0.035);

    cursor: pointer;
}


#pageAnnouncements .all-announcement-card-top {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}


#pageAnnouncements .all-announcement-badges {
    min-width: 0;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


#pageAnnouncements .announcement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 24px;

    padding: 4px 8px;

    border-radius: 999px;

    background: #e9f7f2;

    color: #087f5b;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}


#pageAnnouncements .announcement-badge.important {
    background: #fff0f2;

    color: #c63e54;
}


#pageAnnouncements .all-announcement-date {
    flex: 0 0 auto;

    color: #8b9892;

    font-size: 9px;
    line-height: 1.4;

    white-space: nowrap;
}


#pageAnnouncements .all-announcement-card h3 {
    margin:
        12px
        0
        0;

    color: #1e2e27;

    font-size: 16px;
    font-weight: 850;
    line-height: 1.35;

    overflow-wrap: anywhere;
}


#pageAnnouncements .all-announcement-card p {
    margin:
        9px
        0
        0;

    color: #58675f;

    font-size: 12px;
    line-height: 1.65;

    overflow-wrap: anywhere;
}


#pageAnnouncements .all-announcement-meta {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 13px;

    padding-top: 11px;

    border-top: 1px solid #edf2ef;

    color: #7c8983;

    font-size: 9px;
    line-height: 1.45;
}


#pageAnnouncements .all-announcement-meta span {
    min-width: 0;

    overflow-wrap: anywhere;
}


#pageAnnouncements .all-announcement-meta span:last-child {
    flex: 0 0 auto;

    text-align: right;
}


/* =========================================================
   EMPTY STATE
========================================================= */

#pageAnnouncements .announcement-page-empty {
    width: 100%;

    min-height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 24px;

    border: 1px dashed #d8e5df;
    border-radius: 18px;

    background: #ffffff;

    text-align: center;
}


#pageAnnouncements .announcement-page-empty > span {
    font-size: 30px;
}


#pageAnnouncements .announcement-page-empty strong {
    color: #2b3a33;

    font-size: 14px;
    font-weight: 800;
}


#pageAnnouncements .announcement-page-empty p {
    max-width: 320px;

    margin: 0;

    color: #87948e;

    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   DETAIL PAGE
========================================================= */

#pageAnnouncementDetail {
    width: 100%;
    min-height: 100dvh;

    overflow-x: hidden;

    background: #f5faf8;
}


/* =========================================================
   DETAIL HEADER
========================================================= */

#pageAnnouncementDetail .announcement-detail-header {
    position: sticky;
    top: 0;
    z-index: 60;

    width: 100%;
    min-height: 64px;

    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;

    gap: 10px;

    padding:
        max(10px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        10px
        max(12px, env(safe-area-inset-left));

    border-bottom: 1px solid #e3ece8;

    background: rgba(255,255,255,.97);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


#pageAnnouncementDetail .announcement-detail-header > div {
    min-width: 0;
}


#pageAnnouncementDetail .announcement-detail-header > div > span {
    display: block;

    margin-bottom: 2px;

    color: #819089;

    font-size: 9px;
}


#pageAnnouncementDetail .announcement-detail-header h2 {
    margin: 0;

    overflow: hidden;

    color: #1d2b25;

    font-size: 17px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}


#pageAnnouncementDetail .announcement-detail-back,
#pageAnnouncementDetail .announcement-detail-header-action {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #dce7e2;
    border-radius: 12px;

    background: #ffffff;

    color: #087f5b;
}


/* =========================================================
   DETAIL CONTENT
========================================================= */

#pageAnnouncementDetail .announcement-detail-content {
    width: min(
        calc(100% - 24px),
        720px
    );

    margin: 0 auto;

    padding:
        18px
        0
        calc(32px + env(safe-area-inset-bottom));
}


/* =========================================================
   DETAIL BADGES
========================================================= */

#pageAnnouncementDetail .announcement-detail-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 11px;
}


#pageAnnouncementDetail .announcement-detail-badges span {
    min-height: 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 9px;

    border-radius: 999px;

    background: #e7f6f0;

    color: #087f5b;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}


#pageAnnouncementDetail .announcement-detail-badges span:first-child {
    background: #fff0f2;

    color: #c43c51;
}


/* =========================================================
   DETAIL TITLE
========================================================= */

#pageAnnouncementDetail .announcement-detail-title {
    margin:
        0
        0
        16px;

    color: #182720;

    font-size: clamp(
        21px,
        6vw,
        28px
    );

    font-weight: 850;
    line-height: 1.28;

    letter-spacing: -.02em;

    overflow-wrap: anywhere;
}


/* =========================================================
   DETAIL META
========================================================= */

#pageAnnouncementDetail .announcement-detail-meta {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;
}


#pageAnnouncementDetail .announcement-detail-meta > div {
    width: 100%;
    min-width: 0;
    min-height: 66px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 12px 13px;

    border: 1px solid #dde8e3;
    border-radius: 15px;

    background: #ffffff;
}


#pageAnnouncementDetail .announcement-detail-meta > div > span {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e8f7f1;

    color: #087f5b;
}


#pageAnnouncementDetail .announcement-detail-meta small {
    color: #88968f;

    font-size: 9px;
}


#pageAnnouncementDetail .announcement-detail-meta strong {
    display: block;

    margin-top: 2px;

    color: #2f4038;

    font-size: 11px;
    font-weight: 750;
    line-height: 1.45;

    white-space: normal;
    overflow-wrap: anywhere;
}


/* =========================================================
   DETAIL BODY
========================================================= */

#pageAnnouncementDetail .announcement-detail-body {
    margin-top: 10px;

    padding: 16px;

    border: 1px solid #dde8e3;
    border-radius: 16px;

    background: #ffffff;
}


#pageAnnouncementDetail .announcement-detail-section-label {
    color: #087f5b;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: .06em;
}


#pageAnnouncementDetail .announcement-detail-description {
    margin-top: 12px;

    color: #3f5047;

    font-size: 13px;
    line-height: 1.72;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =========================================================
   DETAIL INFO
========================================================= */

#pageAnnouncementDetail .announcement-detail-info-card {
    margin-top: 10px;

    padding:
        15px
        14px
        4px;

    border: 1px solid #dde8e3;
    border-radius: 16px;

    background: #ffffff;
}


#pageAnnouncementDetail .announcement-detail-info-row {
    min-height: 50px;

    display: grid;
    grid-template-columns: minmax(90px, .75fr) minmax(0, 1.25fr);
    align-items: center;

    gap: 10px;

    border-bottom: 1px solid #edf2ef;
}


#pageAnnouncementDetail .announcement-detail-info-row:last-child {
    border-bottom: 0;
}


#pageAnnouncementDetail .announcement-detail-info-row span {
    color: #7e8c85;

    font-size: 10px;
}


#pageAnnouncementDetail .announcement-detail-info-row strong {
    min-width: 0;

    color: #2c3d34;

    font-size: 11px;
    font-weight: 750;

    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================================
   DETAIL PUBLISHER
========================================================= */

#pageAnnouncementDetail .announcement-publisher-card {
    margin-top: 10px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px;

    border: 1px solid #dde8e3;
    border-radius: 16px;

    background: #ffffff;
}


#pageAnnouncementDetail .announcement-publisher-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #e7f6f0;

    color: #087f5b;
}


#pageAnnouncementDetail .announcement-publisher-card small {
    color: #89968f;

    font-size: 9px;
}


#pageAnnouncementDetail .announcement-publisher-card strong {
    margin-top: 2px;

    color: #26372f;

    font-size: 12px;
    font-weight: 800;
}


#pageAnnouncementDetail #detailAnnouncementAuthorRole {
    margin-top: 2px;

    color: #087f5b;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   DETAIL ACTIONS
========================================================= */

#pageAnnouncementDetail .announcement-detail-actions {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 11px;
}


#pageAnnouncementDetail .announcement-detail-actions button {
    min-width: 0;
    min-height: 49px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0 10px;

    border-radius: 14px;

    font-family: inherit;

    cursor: pointer;
}


#pageAnnouncementDetail .announcement-detail-save {
    border: 1px solid #bcded1;

    background: #ffffff;

    color: #087f5b;
}


#pageAnnouncementDetail .announcement-detail-share {
    border: 1px solid #087f5b;

    background: #087f5b;

    color: #ffffff;
}


#pageAnnouncementDetail .announcement-detail-actions button strong {
    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   DETAIL FOOTER
========================================================= */

#pageAnnouncementDetail .announcement-detail-footer-note {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-top: 10px;

    padding: 11px 12px;

    border-radius: 14px;

    background: #ebf7f3;

    color: #687970;
}


#pageAnnouncementDetail .announcement-detail-footer-note p {
    margin: 0;

    font-size: 9px;
    line-height: 1.55;
}


/* =========================================================
   440PX AND BELOW
========================================================= */

@media (max-width: 440px) {

    #pageAnnouncements .announcement-page-content,
    #pageAnnouncementDetail .announcement-detail-content {
        width: calc(100% - 20px);
    }


    #pageAnnouncements .announcement-page-intro {
        padding: 14px;
    }


    #pageAnnouncements .all-announcement-card {
        padding: 14px;
    }

}


/* =========================================================
   390PX AND BELOW
========================================================= */

@media (max-width: 390px) {

    #pageAnnouncements .announcement-page-header,
    #pageAnnouncementDetail .announcement-detail-header {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            40px;
    }


    #pageAnnouncements .announcement-page-intro {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 10px;
    }


    #pageAnnouncements .announcement-page-intro-icon {
        width: 40px;
        height: 40px;
    }


    #pageAnnouncements .announcement-page-intro h3 {
        font-size: 15px;
    }


    #pageAnnouncements .all-announcement-card h3 {
        font-size: 15px;
    }


    #pageAnnouncementDetail .announcement-detail-title {
        font-size: 21px;
    }

}


/* =========================================================
   360PX AND BELOW
========================================================= */

@media (max-width: 360px) {

    #pageAnnouncements .announcement-page-content,
    #pageAnnouncementDetail .announcement-detail-content {
        width: calc(100% - 16px);
    }


    #pageAnnouncements .announcement-page-header,
    #pageAnnouncementDetail .announcement-detail-header {
        padding-left:
            max(8px, env(safe-area-inset-left));

        padding-right:
            max(8px, env(safe-area-inset-right));
    }


    #pageAnnouncements .announcement-filter {
        min-height: 36px;

        padding: 7px 11px;

        font-size: 9px;
    }


    #pageAnnouncements .all-announcement-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }


    #pageAnnouncements .all-announcement-meta span:last-child {
        text-align: left;
    }


    #pageAnnouncementDetail .announcement-detail-info-row {
        grid-template-columns: 1fr;

        gap: 4px;

        padding: 10px 0;
    }


    #pageAnnouncementDetail .announcement-detail-info-row strong {
        text-align: left;
    }

}


/* =========================================================
   320PX AND BELOW
========================================================= */

@media (max-width: 320px) {

    #pageAnnouncements .announcement-page-intro {
        grid-template-columns: 1fr;
    }


    #pageAnnouncements .announcement-page-intro-icon {
        margin-bottom: 2px;
    }


    #pageAnnouncementDetail .announcement-detail-actions {
        grid-template-columns: 1fr;
    }


    #pageAnnouncementDetail .announcement-detail-title {
        font-size: 19px;
    }

}


/* =========================================================
   LANDSCAPE PHONE
========================================================= */

@media (
    max-height: 500px
)
and
(
    orientation: landscape
) {

    #pageAnnouncements .announcement-page-content,
    #pageAnnouncementDetail .announcement-detail-content {
        width: min(
            calc(100% - 32px),
            760px
        );

        padding-top: 12px;
    }


    #pageAnnouncements .announcement-page-header,
    #pageAnnouncementDetail .announcement-detail-header {
        min-height: 56px;

        padding-top: 7px;
        padding-bottom: 7px;
    }


    #pageAnnouncementDetail .announcement-detail-meta {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   WARGAHUB
   PENGUMUMAN + DETAIL
   FINAL RESPONSIVE ANDROID OVERRIDE
========================================================= */


/* =========================================================
   DESKTOP / TABLET BESAR
========================================================= */

#pageAnnouncements .announcement-page-content,
#pageAnnouncementDetail .announcement-detail-content {
    width: min(100% - 32px, 760px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   ANDROID / MOBILE
========================================================= */

@media (max-width: 600px) {

    /* =============================================
       PAGE
    ============================================== */

    #pageAnnouncements,
    #pageAnnouncementDetail {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        background: #f5faf8 !important;
    }


    /* =============================================
       HEADER
    ============================================== */

    #pageAnnouncements .announcement-page-header,
    #pageAnnouncementDetail .announcement-detail-header {
        width: 100% !important;

        min-height: 62px !important;

        grid-template-columns:
            40px
            minmax(0, 1fr)
            40px !important;

        gap: 9px !important;

        padding-top:
            max(9px, env(safe-area-inset-top)) !important;

        padding-right:
            max(10px, env(safe-area-inset-right)) !important;

        padding-bottom:
            9px !important;

        padding-left:
            max(10px, env(safe-area-inset-left)) !important;
    }


    #pageAnnouncements .announcement-page-header h2,
    #pageAnnouncementDetail .announcement-detail-header h2 {
        font-size: 16px !important;
        line-height: 1.25 !important;
    }


    #pageAnnouncements .announcement-page-header span,
    #pageAnnouncementDetail .announcement-detail-header > div > span {
        font-size: 8px !important;
    }


    #pageAnnouncements .announcement-back-button,
    #pageAnnouncements .announcement-refresh-button,
    #pageAnnouncementDetail .announcement-detail-back,
    #pageAnnouncementDetail .announcement-detail-header-action {
        width: 40px !important;
        height: 40px !important;

        border-radius: 12px !important;
    }


    /* =============================================
       CONTENT FULL WIDTH
    ============================================== */

    #pageAnnouncements .announcement-page-content,
    #pageAnnouncementDetail .announcement-detail-content {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        box-sizing: border-box !important;
    }


    #pageAnnouncements .announcement-page-content {
        padding-top: 14px !important;
        padding-bottom:
            calc(24px + env(safe-area-inset-bottom)) !important;
    }


    #pageAnnouncementDetail .announcement-detail-content {
        padding-top: 16px !important;
        padding-bottom:
            calc(28px + env(safe-area-inset-bottom)) !important;
    }


    /* =============================================
       INTRO
    ============================================== */

    #pageAnnouncements .announcement-page-intro {
        width: 100% !important;

        grid-template-columns:
            42px
            minmax(0, 1fr) !important;

        gap: 11px !important;

        padding: 14px !important;

        border-radius: 16px !important;
    }


    #pageAnnouncements .announcement-page-intro-icon {
        width: 42px !important;
        height: 42px !important;

        border-radius: 13px !important;
    }


    #pageAnnouncements .announcement-page-intro h3 {
        font-size: 15px !important;
    }


    #pageAnnouncements .announcement-page-intro p {
        font-size: 9px !important;
        line-height: 1.5 !important;
    }


    /* =============================================
       FILTER
    ============================================== */

    #pageAnnouncements .announcement-filter-row {
        width: 100% !important;

        gap: 7px !important;

        margin-top: 10px !important;

        overflow-x: auto !important;

        padding-bottom: 4px !important;

        scroll-snap-type: x proximity;
    }


    #pageAnnouncements .announcement-filter {
        min-height: 36px !important;

        padding: 7px 11px !important;

        border-radius: 11px !important;

        font-size: 9px !important;

        scroll-snap-align: start;
    }


    /* =============================================
       RESULT
    ============================================== */

    #pageAnnouncements .announcement-result-bar {
        margin-top: 8px !important;
        margin-bottom: 7px !important;

        font-size: 9px !important;
    }


    /* =============================================
       LIST
    ============================================== */

    #pageAnnouncements .all-announcements-list {
        width: 100% !important;

        gap: 9px !important;
    }


    /* =============================================
       CARD
    ============================================== */

    #pageAnnouncements .all-announcement-card {
        width: 100% !important;

        padding: 14px !important;

        border-radius: 16px !important;

        box-shadow:
            0 4px 13px
            rgba(31, 55, 44, 0.035) !important;
    }


    #pageAnnouncements .all-announcement-card-top {
        gap: 8px !important;
    }


    #pageAnnouncements .announcement-badge {
        min-height: 23px !important;

        padding: 4px 7px !important;

        font-size: 8px !important;
    }


    #pageAnnouncements .all-announcement-date {
        font-size: 8px !important;
    }


    #pageAnnouncements .all-announcement-card h3 {
        margin-top: 10px !important;

        font-size: 15px !important;
        line-height: 1.35 !important;
    }


    #pageAnnouncements .all-announcement-card p {
        margin-top: 7px !important;

        font-size: 11px !important;
        line-height: 1.6 !important;
    }


    #pageAnnouncements .all-announcement-meta {
        margin-top: 10px !important;

        padding-top: 9px !important;

        font-size: 8px !important;
    }


    /* =====================================================
       DETAIL
    ====================================================== */

    #pageAnnouncementDetail .announcement-detail-badges {
        gap: 6px !important;

        margin-bottom: 10px !important;
    }


    #pageAnnouncementDetail .announcement-detail-badges span {
        min-height: 24px !important;

        padding: 4px 8px !important;

        font-size: 8px !important;
    }


    #pageAnnouncementDetail .announcement-detail-title {
        margin-bottom: 14px !important;

        font-size: 22px !important;
        line-height: 1.25 !important;
    }


    /* =============================================
       META
    ============================================== */

    #pageAnnouncementDetail .announcement-detail-meta {
        grid-template-columns: 1fr !important;

        gap: 8px !important;
    }


    #pageAnnouncementDetail .announcement-detail-meta > div {
        width: 100% !important;

        min-height: 64px !important;

        gap: 10px !important;

        padding: 11px 12px !important;

        border-radius: 14px !important;
    }


    #pageAnnouncementDetail .announcement-detail-meta > div > span {
        width: 38px !important;
        height: 38px !important;

        flex-basis: 38px !important;

        border-radius: 11px !important;
    }


    #pageAnnouncementDetail .announcement-detail-meta small {
        font-size: 8px !important;
    }


    #pageAnnouncementDetail .announcement-detail-meta strong {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }


    /* =============================================
       BODY
    ============================================== */

    #pageAnnouncementDetail .announcement-detail-body {
        margin-top: 9px !important;

        padding: 15px !important;

        border-radius: 15px !important;
    }


    #pageAnnouncementDetail .announcement-detail-section-label {
        font-size: 8px !important;
    }


    #pageAnnouncementDetail .announcement-detail-description {
        margin-top: 11px !important;

        font-size: 12px !important;
        line-height: 1.7 !important;
    }


    /* =============================================
       INFORMATION
    ============================================== */

    #pageAnnouncementDetail .announcement-detail-info-card {
        margin-top: 9px !important;

        padding:
            14px
            13px
            4px !important;

        border-radius: 15px !important;
    }


    #pageAnnouncementDetail .announcement-detail-info-row {
        min-height: 48px !important;

        grid-template-columns:
            minmax(85px, .7fr)
            minmax(0, 1.3fr) !important;

        gap: 9px !important;
    }


    #pageAnnouncementDetail .announcement-detail-info-row span {
        font-size: 9px !important;
    }


    #pageAnnouncementDetail .announcement-detail-info-row strong {
        font-size: 10px !important;
    }


    /* =============================================
       PUBLISHER
    ============================================== */

    #pageAnnouncementDetail .announcement-publisher-card {
        margin-top: 9px !important;

        gap: 10px !important;

        padding: 12px !important;

        border-radius: 15px !important;
    }


    #pageAnnouncementDetail .announcement-publisher-icon {
        width: 42px !important;
        height: 42px !important;

        flex-basis: 42px !important;

        border-radius: 12px !important;
    }


    #pageAnnouncementDetail .announcement-publisher-card small {
        font-size: 8px !important;
    }


    #pageAnnouncementDetail .announcement-publisher-card strong {
        font-size: 11px !important;
    }


    #pageAnnouncementDetail #detailAnnouncementAuthorRole {
        font-size: 8px !important;
    }


    /* =============================================
       ACTION BUTTON
    ============================================== */

    #pageAnnouncementDetail .announcement-detail-actions {
        gap: 8px !important;

        margin-top: 10px !important;
    }


    #pageAnnouncementDetail .announcement-detail-actions button {
        min-height: 48px !important;

        padding: 0 9px !important;

        border-radius: 13px !important;
    }


    #pageAnnouncementDetail .announcement-detail-actions button strong {
        font-size: 10px !important;
    }


    /* =============================================
       FOOTER
    ============================================== */

    #pageAnnouncementDetail .announcement-detail-footer-note {
        margin-top: 9px !important;

        padding: 10px 11px !important;

        border-radius: 13px !important;
    }


    #pageAnnouncementDetail .announcement-detail-footer-note p {
        font-size: 8px !important;
        line-height: 1.5 !important;
    }

}


/* =========================================================
   ANDROID KECIL
   320 - 359 px
========================================================= */

@media (max-width: 359px) {

    #pageAnnouncements .announcement-page-content,
    #pageAnnouncementDetail .announcement-detail-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    #pageAnnouncements .announcement-page-intro {
        padding: 12px !important;
    }


    #pageAnnouncements .announcement-filter {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    #pageAnnouncementDetail .announcement-detail-title {
        font-size: 20px !important;
    }


    #pageAnnouncementDetail .announcement-detail-info-row {
        grid-template-columns: 1fr !important;

        gap: 3px !important;

        padding: 8px 0 !important;
    }


    #pageAnnouncementDetail .announcement-detail-info-row strong {
        text-align: left !important;
    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 330px) {

    #pageAnnouncementDetail .announcement-detail-actions {
        grid-template-columns: 1fr !important;
    }

}


/* =========================================================
   ANDROID BESAR 400 - 600
========================================================= */

@media (min-width: 400px) and (max-width: 600px) {

    #pageAnnouncements .announcement-page-content,
    #pageAnnouncementDetail .announcement-detail-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    #pageAnnouncements .all-announcement-card {
        padding: 15px !important;
    }


    #pageAnnouncementDetail .announcement-detail-title {
        font-size: 23px !important;
    }

}


/* =========================================================
   LANDSCAPE ANDROID
========================================================= */

@media
(max-height: 520px)
and
(orientation: landscape) {

    #pageAnnouncements .announcement-page-content,
    #pageAnnouncementDetail .announcement-detail-content {
        width: min(
            calc(100% - 28px),
            760px
        ) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    #pageAnnouncementDetail .announcement-detail-meta {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}

/* =========================================================
   WARGAHUB - ADMIN APPLICATION SHEET NO COVER FINAL
   Supaya seluruh isi Pengajuan Admin tidak tertutup bottom nav
========================================================= */

:root {
    --wh-bottom-nav-height: 72px;
}

/* Overlay / sheet utama */
.admin-application-sheet,
.admin-apply-sheet,
.admin-role-sheet,
.admin-request-sheet,
.admin-rt-modal {
    padding-bottom:
        calc(
            var(--wh-bottom-nav-height)
            + 22px
            + env(safe-area-inset-bottom)
        ) !important;
}

/* Card / panel putih */
.admin-application-sheet-card,
.admin-apply-sheet-card,
.admin-role-sheet-card,
.admin-request-sheet-card,
.admin-rt-modal-card {
    max-height:
        calc(
            100dvh
            - var(--wh-bottom-nav-height)
            - 22px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

    overflow-y: auto !important;
    overscroll-behavior: contain !important;

    padding-bottom:
        calc(
            24px
            + env(safe-area-inset-bottom)
        ) !important;
}

/* Jika isi daftar punya container sendiri */
.admin-application-list,
.admin-apply-list,
.admin-role-list,
.admin-request-list {
    padding-bottom:
        calc(
            28px
            + var(--wh-bottom-nav-height)
            + env(safe-area-inset-bottom)
        ) !important;
}

/* Item terakhir jangan mepet */
.admin-application-list > *:last-child,
.admin-apply-list > *:last-child,
.admin-role-list > *:last-child,
.admin-request-list > *:last-child {
    margin-bottom: 18px !important;
}

/* Bottom nav tetap di atas */
.bottom-nav {
    z-index: 2147483000 !important;
}

/* Mobile */
@media (max-width: 560px) {
    .admin-application-sheet,
    .admin-apply-sheet,
    .admin-role-sheet,
    .admin-request-sheet,
    .admin-rt-modal {
        align-items: flex-end !important;
        padding-bottom:
            calc(
                var(--wh-bottom-nav-height)
                + 10px
                + env(safe-area-inset-bottom)
            ) !important;
    }

    .admin-application-sheet-card,
    .admin-apply-sheet-card,
    .admin-role-sheet-card,
    .admin-request-sheet-card,
    .admin-rt-modal-card {
        width: 100% !important;

        max-height:
            calc(
                100dvh
                - var(--wh-bottom-nav-height)
                - 10px
                - env(safe-area-inset-top)
            ) !important;

        border-radius: 24px 24px 0 0 !important;

        padding-bottom:
            calc(
                26px
                + env(safe-area-inset-bottom)
            ) !important;
    }
}