/*
Theme Name: Bakti Untuk Rakyat
Theme URI: https://baktiuntukrakyat.id/
Author: user
Description: Clean rebuild of baktiuntukrakyat.id - pixel-perfect WordPress theme. Custom classic theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: baktiuntukrakyat
*/

/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                          GLOBALS                             */

/*----- Fonts: Adrianna (Adobe Typekit, exactly as live) -----*/
/* Served from use.typekit.net - works on the same domain (baktiuntukrakyat.id) */
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/66da5c/0000000000000000773597ae/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/66da5c/0000000000000000773597ae/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/66da5c/0000000000000000773597ae/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/91acd2/0000000000000000773597ba/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"), url("https://use.typekit.net/af/91acd2/0000000000000000773597ba/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"), url("https://use.typekit.net/af/91acd2/0000000000000000773597ba/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
}
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/c255b5/0000000000000000773597b3/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"), url("https://use.typekit.net/af/c255b5/0000000000000000773597b3/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"), url("https://use.typekit.net/af/c255b5/0000000000000000773597b3/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
}
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/560035/0000000000000000773597c4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"), url("https://use.typekit.net/af/560035/0000000000000000773597c4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"), url("https://use.typekit.net/af/560035/0000000000000000773597c4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 600;
    font-stretch: normal;
}
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/419f5a/0000000000000000773597ca/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/419f5a/0000000000000000773597ca/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/419f5a/0000000000000000773597ca/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
}
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/81c377/0000000000000000773597be/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"), url("https://use.typekit.net/af/81c377/0000000000000000773597be/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"), url("https://use.typekit.net/af/81c377/0000000000000000773597be/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
}
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/964695/0000000000000000773597c9/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"), url("https://use.typekit.net/af/964695/0000000000000000773597c9/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"), url("https://use.typekit.net/af/964695/0000000000000000773597c9/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 800;
    font-stretch: normal;
}
@font-face {
    font-family: "adrianna";
    src: url("https://use.typekit.net/af/e1df81/0000000000000000773597d0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("woff2"), url("https://use.typekit.net/af/e1df81/0000000000000000773597d0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("woff"), url("https://use.typekit.net/af/e1df81/0000000000000000773597d0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 800;
    font-stretch: normal;
}
/* Open Sans, Poppins, Roboto are enqueued from Google Fonts in functions.php */

/*----- CSS Variables (brand tokens, exact values from live) -----*/
:root {
    /* Brand colors */
    --coral: #ff4255;        /* hero CTA (btn-red) */
    --coral-header: #f6555c; /* header "Masuk" button / btn-orange */
    --coral-alt: #f8555c;    /* send-terms variant */
    --primary: #ea5455;      /* platform primary (color-1) */
    --orange: #f18344;       /* secondary (color-3) */
    --blue: #1e8fe1;         /* default campaign primary-button */
    --blue-light: #deefff;   /* light-blue section background */
    --pink: #ce3689;         /* h2 underline (front bar) */
    --yellow: #f8b531;       /* h2 underline (back bar) */
    --navy: #012556;         /* mobile menu background */

    --text: #000000;
    --text-gray: #6e6c6c;    /* nav + footer links */
    --white: #ffffff;

    /* Fonts */
    --font-display: "adrianna", sans-serif;
    --font-body: "Open Sans", sans-serif;
    --font-nav: "Poppins", sans-serif;

    /* Layout */
    --header-height: 90px;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--text);
    background-color: var(--white);
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* Push content below the fixed header */
body {
    padding-top: var(--header-height);
}

/*----- Typography (Adrianna headings, exact from live) -----*/
h1 {
    font-family: var(--font-display);
    font-size: 96px;
    line-height: 1;
    letter-spacing: -1.73px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 35px;
}

@media (max-width: 991px) {
    h1 {
        font-size: 60px;
        line-height: 1;
    }
}

@media (max-width: 500px) {
    h1 {
        font-size: 60px;
    }
}

h2 {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 42px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 55px;
    padding-bottom: 10px;
    position: relative;
    display: inline-block;
}

/* h2 decorative double underline: pink bar (front) over yellow bar (back) */
h2::before {
    content: "";
    background-color: var(--pink);
    height: 8px;
    width: 96px;
    border-radius: 6px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}

h2::after {
    content: "";
    background-color: var(--yellow);
    height: 8px;
    width: 100%;
    border-radius: 6px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

h3 {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 5px;
}

h4 {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 15px;
}

h5 {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 7px;
}

/*----- Buttons -----*/
/* Campaign pill button (Adrianna), color-agnostic base */
.btn-pill {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 32px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    padding: 13px 33px;
    border-radius: 36px;
    border: 1px solid transparent;
    background-color: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 3px 6px rgba(255, 255, 255, 0.16);
    transition: filter 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-pill:hover {
    color: var(--white);
    filter: brightness(85%);
}

/* Color variants */
.btn-pill--red {
    background-color: var(--coral);
    border-color: var(--coral);
}

.btn-pill--coral {
    background-color: var(--coral-header);
    border-color: var(--coral-header);
}

.btn-pill--blue {
    background-color: var(--blue);
    border-color: var(--blue);
}

/* "send-terms" style: coral, hover inverts to outline */
.btn-pill--send {
    background-color: var(--coral-alt);
    border-color: var(--coral-alt);
}

.btn-pill--send:hover {
    background-color: transparent;
    color: var(--coral-alt);
    filter: brightness(100%);
}

/* Header "Masuk" (login) button: small coral pill */
.btn-login {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--white);
    text-align: center;
    padding: 6px 21px;
    border-radius: 40px;
    border: 1px solid var(--coral-header);
    background-color: var(--coral-header);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-login:hover {
    color: var(--white);
    background-color: #1E8FE1;
    border-color: #1E8FE1;
}

/* Mobile-bar Masuk: hidden on desktop, shown in the bar below 1200px */
.btn-login--bar {
    display: none;
}

/*----- Header -----*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--white);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    z-index: 999;
}

/* Offset the fixed header below the WP admin bar (logged-in users only) */
body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

.site-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 1372px;
    margin: 0 auto;
    padding: 0 15px;
}

.site-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
}

.site-logo img {
    display: block;
    width: 131px;
    height: 60px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
}

.site-nav__list li {
    position: relative;
}

.site-nav__list a {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-gray);
    padding: 0 8px;
    transform: scale(1);
    transform-origin: top left;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.site-nav__list a:hover {
    color: var(--coral-header);
    transform: scale(1.02);
}

/* Dropdown caret for items with a submenu */
.site-nav__list .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--coral);
}

/* Submenu (click dropdown) */
.site-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--white);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
    z-index: 10;
}

.site-nav__list li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav__list .sub-menu a {
    padding: 8px 18px;
    white-space: nowrap;
}

.site-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #616161;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Hover: change colour + zoom in, exactly like live (scale anchored top-left) */
.site-social a {
    transform-origin: top left;
}

.site-social a:hover {
    color: #F6555C;
    transform: scale(1.15);
}

.site-social svg {
    display: block;
    width: auto;
    height: 22px;
}

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
}

.nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--coral-header);
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Header responsive: 1200px stays desktop, full-screen white overlay menu below
   1200px (like live: hamburger left, logo centered, Masuk right). */
@media (max-width: 1199px) {
    .nav-toggle {
        display: flex;
        order: -1;        /* hamburger on the far left */
        margin-left: 0;
    }

    .site-logo {
        margin: 0 auto;   /* logo centered between hamburger and Masuk */
    }

    /* Masuk pill stays in the bar on the right (separate mobile-only button) */
    .btn-login--bar {
        display: inline-block;
        margin: 0;
    }

    /* ...but hides while the overlay is open, like live */
    body.nav-open .btn-login--bar {
        display: none;
    }

    /* The nav's own Masuk belongs to the desktop row only — hide it in the overlay */
    .site-nav > .btn-login {
        display: none;
    }

    /* Full-screen white overlay, content centered, fades in */
    .site-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        overflow-y: auto;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 26px;        /* menu list -> social (live) */
        margin-left: 0;
        padding: 26px 20px 30px;
        background-color: var(--white);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease-in-out, visibility 0.25s;
    }

    body.nav-open .site-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* When logged in, the WP admin bar pushes the fixed header down; push the
       overlay down by the same amount so it doesn't cover the logo.
       The WP var is 32px and auto-switches to 46px at <=782px. */
    body.admin-bar .site-nav {
        top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
        height: calc(100vh - var(--header-height) - var(--wp-admin--admin-bar--height, 0px));
    }

    .site-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 11px;        /* between menu items (live) */
        width: 100%;
    }

    .site-nav__list li {
        width: 100%;
        text-align: center;
    }

    .site-nav__list a {
        color: var(--text-gray);   /* gray on white, like live */
        font-family: var(--font-body);
        font-size: 3vw;
        font-weight: 500;
        padding: 4px 0 0;
        text-align: center;
        /* No hover scale on mobile: full-width centered links scaled from
           top-left would shift the text sideways. Keep only the colour change. */
        transform: none;
        transition: color 0.2s ease-in-out;
    }

    .site-nav__list a:hover {
        transform: none;
    }

    /* Bigger caret in the overlay (~16x8), same coral colour as desktop (not live's teal) */
    .site-nav__list .menu-item-has-children > a::after {
        border-left-width: 8px;
        border-right-width: 8px;
        border-top-width: 8px;
        border-top-color: var(--coral);
    }

    /* Submenu: simple accordion — hidden until the parent is clicked.
       Plain display toggle (no max-height/transform jank) + a clean fade-in. */
    .site-nav__list .sub-menu {
        position: static;
        min-width: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        text-align: center;
        transform: none;
        transition: none;
        display: none;
    }

    .site-nav__list li.is-open > .sub-menu {
        display: block;
        padding: 6px 0 4px;
        animation: bur-submenu-fade 0.2s ease-in-out;
    }

    .site-nav__list .sub-menu a {
        color: var(--text-gray);
        font-size: 20px;
        white-space: normal;
    }

    /* Social icons centered + gray on the white overlay (default color, NOT white) */
    .site-social {
        justify-content: center;
    }

    /* Hamburger morphs into an X when the overlay is open */
    body.nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    body.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Clean fade-in for the mobile submenu (no janky height animation) */
@keyframes bur-submenu-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*----- Footer -----*/
.site-footer {
    background-color: var(--white);
    padding: 30px 0 15px;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1372px;
    margin: 0 auto;
    padding: 0 15px;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
}

.site-footer__logo img {
    display: block;
    width: 115px;
    height: 53px;
}

.site-footer__tagline {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.site-footer__list {
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-footer__list a {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-gray);
    text-transform: uppercase;
    transition: color 0.2s ease-in-out;
}

.site-footer__list a:hover {
    color: var(--coral);
}

.site-footer__copyright {
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray);
    margin: 12px 0 7px;
}

/* Footer responsive: 1200px stays desktop, stack groups below 1200px.
   Spacing matches live (bakti): logo->tagline 2rem, then 10px between groups. */
@media (max-width: 1199px) {
    .site-footer__inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .site-footer__logo {
        margin-bottom: 2rem; /* logo image -> #TemanBerbakti tagline */
    }

    .site-footer__tagline {
        margin-bottom: 15px; /* tagline -> menu (measured on live) */
        text-align: center;
    }

    .site-footer__nav {
        margin-bottom: 26px; /* menu -> social (measured on live) */
    }

    .site-footer__list {
        justify-content: center;
        gap: 16px; /* live: li margin 8px each side */
        text-align: center;
    }

    .site-social {
        margin-bottom: 0; /* live overrides social margin to 0 below 1200px */
    }

    .site-footer__copyright {
        margin-top: 15px; /* social -> copyright (measured on live) */
    }
}

/* Footer: stack the menu items themselves only below 768px (like live, 5px gap) */
@media (max-width: 768px) {
    .site-footer__list {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
}


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

/*----- Shared section container (matches live .container, max 1372px) -----*/
.bur-container {
    max-width: 1372px;
    margin: 0 auto;
    padding: 0 15px;
}

/*----- Hero -----*/
/* Bootstrap-style row: 75/25 split, no gutter gap, content top-aligned.
   The right column holds the decorative "follower rain" gif (328x586),
   which sets the section height to 586px exactly like live. */
.home-hero__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 -15px;
    gap: 0;
}

.home-hero__row > .wp-block-column {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
}

.home-hero__text {
    padding: 50px 15px 0;
}

.home-hero__media {
    padding: 0 15px;
}

/* Lead paragraph (Open Sans 24/600, exact from live) */
.home-hero__lead {
    font-family: var(--font-body);
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    color: var(--text);
    max-width: 676px;
    margin: 0 0 15px;
}

/* CTA pill button (coral), 36px Adrianna — live hero button.
   p->button gap on live is 35px (15px p-margin + 20px here). */
.home-hero__cta {
    margin: 20px 0 0;
}

/* Logged-in members are already "joined" — hide the "Ayo Gabung Sekarang"
   CTAs (hero + community). WP adds .logged-in on <body> automatically. */
body.logged-in .home-hero__cta,
body.logged-in .home-community__cta {
    display: none;
}

/* Below 1366px the CTA gets bottom breathing room (live adds margin-bottom:50px
   to the hero button-widget below 1366px). Also applied on mobile (<=767px,
   stacked) so there's space under the button there too. */
@media (max-width: 1365px) {
    .home-hero__cta {
        margin-bottom: 50px;
    }
}

.home-hero .wp-block-button__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    color: var(--white);
    background-color: var(--coral);
    padding: 19px 32px;
    border-radius: 36px;
    border: 0;
    transition: filter 0.2s ease-in-out;
}

.home-hero .wp-block-button__link:hover {
    color: var(--white);
    filter: brightness(85%);
}

/* Decorative hero gif: natural size, top-aligned in the right column */
.home-hero__gif {
    margin: 0;
}

.home-hero__gif img {
    width: 328px;
    max-width: 100%; /* 328px when the 25% column has room (wide desktop, like live),
                        but shrinks to the column on narrower desktops so it never
                        overflows — matches live's global img{max-width:100%} */
    height: auto;
}

/* Keep the 75/25 split down to live's md breakpoint (768px). WordPress core
   auto-stacks .wp-block-columns at <=781px, which would drop the gif below the
   text in the 768-781px gap; override that so the columns stay side-by-side
   until 767px, exactly like live's Bootstrap col-md. (.wp-block-column added
   to the selector to out-specify core's stacking rule.) */
@media (min-width: 768px) {
    .home-hero__row > .home-hero__text.wp-block-column {
        flex-basis: 75% !important;
    }

    .home-hero__row > .home-hero__media.wp-block-column {
        flex-basis: 25% !important;
    }
}

/* Hero responsive: at <=767px the columns stack and the decorative gif is
   hidden (like live), text goes full width. */
@media (max-width: 767px) {
    .home-hero__media {
        display: none;
    }

    .home-hero__text {
        padding-top: 30px;
    }
}

/*----- 8 Program (light-blue banner) -----*/
/* Full-width light-blue band; live uses a container-fluid grid where the
   image+text block sits in the centre 66.667% (image 2/12, text 6/12, with
   16.667% empty spacer columns each side). */
.home-program {
    background-color: var(--blue-light);
    padding: 112px 0 48px;
}

.home-program__row {
    width: 66.667%;
    margin: 0 auto;
    gap: 0; /* the inter-column gap comes from the text's padding-left, not the
               core columns default 2em gap (which would skew the proportions) */
    align-items: center; /* text block vertically centred against the taller image */
}

.home-program__row > .wp-block-column {
    padding: 0;
    margin: 0;
}

/* Image fills the full 2/12 (16.667%) span like live; text gets the ~30px
   inter-column gutter as left padding so it starts where live's does (~36%). */
.home-program__img {
    flex: 0 0 25%;
}

.home-program__img img {
    display: block;
    width: 100%;
    height: auto;
}

.home-program__text {
    flex: 0 0 75%;
}

/* Text starts 4rem (64px) in from the image — live's
   .section-8program_description has padding-left:4rem. The selector is more
   specific than the `.home-program__row > .wp-block-column { padding:0 }`
   reset above, so the left padding actually applies. */
.home-program__row > .home-program__text.wp-block-column {
    padding-left: 4rem;
}

/* Eyebrow above the title (Open Sans 24/700) */
.home-program__eyebrow {
    font-family: var(--font-body);
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 15px;
}

/* Section title (Adrianna 60/800) — no decorative underline, unlike global h2 */
.home-program__title {
    display: block;
    font-family: var(--font-display);
    font-size: 60px;
    line-height: 60px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 35px;
    padding: 0;
}

.home-program__title::before,
.home-program__title::after {
    content: none;
}

/* 8 Program responsive: title shrinks, and below 768px the row stacks with the
   illustration on top (pulled down to overlap the text, like live). */
@media (max-width: 991px) {
    .home-program__row {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* When the columns stack (core stacks at <=781px), drop the 4rem text indent —
   it's the image-to-text gutter, not wanted once the text is full width. */
@media (max-width: 781px) {
    .home-program__row > .home-program__text.wp-block-column {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .home-program {
        padding: 32px 0 48px;
    }

    .home-program__row {
        flex-direction: column;
        align-items: center;
    }

    .home-program__img {
        flex: 0 0 auto;
        margin-bottom: -5rem;
    }

    .home-program__img img {
        max-width: 300px;
        margin: 0 auto;
    }

    .home-program__text {
        flex: 0 0 auto;
        width: 100%;
        padding-left: 0;
    }

    .home-program__title {
        font-size: 45px;
        line-height: 1;
    }
}

@media (max-width: 500px) {
    .home-program__img {
        margin-bottom: -7rem;
    }

    .home-program__img img {
        max-width: 180px;
    }

    .home-program__title {
        font-size: 40px;
    }
}

/* CTA pill (blue), centred below the row.
   Shared with the Intro section's CTA (identical blue pill). */
.home-program__cta .wp-block-button__link,
.home-intro__cta .wp-block-button__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 32px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--blue);
    padding: 13px 33px;
    border-radius: 36px;
    border: 0;
    transition: filter 0.2s ease-in-out;
}

.home-program__cta .wp-block-button__link:hover,
.home-intro__cta .wp-block-button__link:hover {
    color: var(--white);
    filter: brightness(85%);
}

/*----- Intro (big statement + image) -----*/
/* Full-width #f8f8f8 band; live grid is [2 spacer][5 text][5 image] — text and
   image each 41.667% (5/12), content starting at 16.667% from the left. */
.home-intro {
    background-color: #f8f8f8;
    padding: 0 0 75px;
}

.home-intro__row {
    margin: 0 0 0 16.667%;
    gap: 0; /* avoid the core columns 2em gap on top of the 16.667% left margin,
               which would push the image 32px past the right edge (h-scroll) */
    align-items: center;
}

.home-intro__row > .wp-block-column {
    margin: 0;
    padding: 0;
}

.home-intro__text {
    flex: 0 0 50%;
}

/* 30px gap between the text and the image, like live (text col padding-right
   15px + image col padding-left 15px). Selector out-specifies the
   `.home-intro__row > .wp-block-column { padding:0 }` reset so it applies. */
.home-intro__row > .home-intro__text.wp-block-column {
    padding-right: 30px;
}

.home-intro__media {
    flex: 0 0 50%;
    margin-bottom: 20px;
}

.home-intro__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Keep the 50/50 split down to live's md breakpoint (768px). Core stacks
   .wp-block-columns at <=781px; override so text/image stay side-by-side until
   767px, exactly like live (col-md-5 + col-md-5). (.wp-block-column added to
   out-specify core's stacking rule.) */
@media (min-width: 768px) {
    .home-intro__row > .home-intro__text.wp-block-column,
    .home-intro__row > .home-intro__media.wp-block-column {
        flex-basis: 50% !important;
    }
}

/* Big statement paragraph (Open Sans 44/400) */
.home-intro__lead {
    font-family: var(--font-body);
    font-size: 44px;
    line-height: 66px;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 20px;
}

.home-intro__cta {
    margin: 20px 0 0;
}

/* Decorative blob (pink/teal/green pills) at the image's bottom-left, exactly
   like live (CSS ::before with an inline SVG). Hidden on mobile. */
.home-intro__media .wp-block-image {
    position: relative;
    margin: 0;
}

.home-intro__media .wp-block-image::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='114.092' height='360.716' viewBox='0 0 114.092 360.716'%3E%3Cg id='Group_232' data-name='Group 232' transform='translate(-1014.954 -3164.332)'%3E%3Cpath id='Path_14' data-name='Path 14' d='M23.523,205.163h0A23.524,23.524,0,0,1,0,181.64V85.351a23.523,23.523,0,0,1,47.046,0V181.64a23.524,23.524,0,0,1-23.523,23.523' transform='translate(1014.954 3102.504)' fill='%23cd3688'/%3E%3Cpath id='Path_16' data-name='Path 16' d='M23.523,205.163h0A23.524,23.524,0,0,1,0,181.64V85.351a23.523,23.523,0,0,1,47.046,0V181.64a23.524,23.524,0,0,1-23.523,23.523' transform='translate(1082 3319.885)' fill='%232cd7b6'/%3E%3Cpath id='Path_15' data-name='Path 15' d='M23.523,47.046h0A23.523,23.523,0,1,1,47.046,23.523,23.524,23.524,0,0,1,23.523,47.046' transform='translate(1014.954 3334.667)' fill='%23188e72'/%3E%3C/g%3E%3C/svg%3E%0A");
    position: absolute;
    bottom: -8%;
    left: -6%;
    z-index: 2;
}

/* Side-by-side (>=768px): match live — the image sits at the TOP of the row and
   the text is pushed down 5rem (.section-intro_text margin-top:5rem), instead of
   vertically centring the columns. The columns carry core's
   `is-vertically-aligned-center` (align-self:center, 0,2,0), so override
   align-self on the columns with a more specific selector. */
@media (min-width: 768px) {
    .home-intro__row > .home-intro__text.wp-block-column,
    .home-intro__row > .home-intro__media.wp-block-column {
        align-self: flex-start;
    }

    .home-intro__row > .home-intro__text.wp-block-column {
        margin-top: 5rem;
    }
}

/* At <=767px the columns stack (like live's col-md), full width, text on top.
   Live gives the content ~16px side padding (container pl-3/pr-3) and ~30px
   top/bottom breathing room (row margin-top/bottom:30px). */
@media (max-width: 767px) {
    .home-intro {
        padding: 75px 15px 60px;
    }

    .home-intro__media .wp-block-image::before {
        display: none;
    }

    .home-intro__row {
        margin-left: 0;
    }

    .home-intro__row > .home-intro__text.wp-block-column {
        padding-right: 0;
    }

    /* Image first/on top, text below (image is 2nd in the DOM, so order:-1). */
    .home-intro__row > .home-intro__media.wp-block-column {
        order: -1;
        margin-bottom: 20px;
    }

    .home-intro__lead {
        font-size: 30px;
        line-height: 1.4;
    }
}

/*----- Community (3 feature cards in a white floating card) -----*/
/* Full-width blurred crowd photo background (like live); the white card floats
   on top of it. Large vertical padding (≥992px: 180px / 257px; below: 80 / 177)
   keeps the background visible around the card; the big bottom padding also
   leaves room for the CTA that floats below the card. */
.home-community {
    padding: 180px 0 257px;
    background-image: url("assets/images/community-bg.jpg");
    background-position: 0 0;
    background-size: cover;
}

@media (max-width: 991px) {
    .home-community {
        padding: 80px 0 177px;
    }
}

/* The content sits in a white rounded card with a soft shadow (live .container).
   position:relative anchors the floating CTA. Overrides bur-container padding. */
.home-community__box {
    position: relative;
    background-color: var(--white);
    border-radius: 40px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    padding: 55px 20px;
    /* Match live: the card follows Bootstrap `.container` widths (centred, with
       side margins) rather than the flat 1372 bur-container, so on smaller
       resolutions it doesn't stretch edge-to-edge. bur-container's margin:0 auto
       centres it; these caps widen it per breakpoint (540/720/960/1140). */
    max-width: 540px;
}

@media (min-width: 768px) {
    .home-community__box {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .home-community__box {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .home-community__box {
        max-width: 1140px;
    }
}

@media (max-width: 576px) {
    .home-community__box {
        width: 95%;
        max-width: none;
    }
}

/* The h2 is inline-block (global, with the pink/yellow underline). Centre the
   whole heading box (so the underline stays text-width) via fit-content + auto
   margins, keeping the global 55px bottom margin. */
.home-community__title {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 3 centred cards (icon -> title -> description), like live. */
.home-community__cards {
    gap: 30px;
    margin-top: 0;
}

.home-community__card {
    margin: 0;
    text-align: center;
}

/* Each card gets 40px horizontal padding on wide screens (live: ≥1200px). */
@media (min-width: 1200px) {
    .home-community__card {
        padding: 0 40px;
    }
}

/* Fixed-height icon area (= the tallest icon) with the icon centred, so the
   titles below start at the same vertical position across all three cards. */
.home-community__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 97px;
    margin: 0;
}

.home-community__icon img {
    display: block;
    width: auto;
    height: auto;
}

/* Card title: Adrianna bold 24px (live wraps it in <strong> at 24/700).
   20px gap below separates it from the Open Sans 16/400 description. */
.home-community__card-title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 30px 0 20px;
}

.home-community__card-desc {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--text);
    margin: 0;
}

/* CTA pill (coral #f5555c ≈ --coral-header) floats at the bottom centre of the
   card, overflowing below it by ~125px exactly like live. */
.home-community__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -125px;
    margin: 0;
    justify-content: center; /* centre the button within the full card width so
                                its width isn't capped at 50% (which cramped the
                                label on mobile); it wraps naturally like live */
}

.home-community__cta .wp-block-button__link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 32px;
    font-weight: 700;
    color: var(--white);
    background-color: var(--coral-header);
    padding: 13px 33px;
    border-radius: 36px;
    border: 1px solid #707070;
    box-shadow: 0 3px 6px rgba(255, 255, 255, 0.16);
    transition: filter 0.2s ease-in-out;
}

.home-community__cta .wp-block-button__link:hover {
    color: var(--white);
    filter: brightness(85%);
}


/* ------------------------------------------------------------ */
/*             HOME — "Ruang Diskusi" (static snapshot)         */
/* Mirrors live .homepage-discussion-section: a #f8f8f8 band with */
/* topic cards (author + points + title + intro + comment count) */
/* and a teal "view all" cell. Rendered by [bur_discussion].     */

.home-discussion {
    background-color: #f8f8f8;
    padding: 5rem 0 3.5rem;
}

@media (min-width: 992px) {
    .home-discussion {
        padding: 10rem 0 8.375rem;
    }
}

.home-discussion__title {
    margin: 0 0 2rem; /* h2 keeps the global pink/yellow underline */
}

.home-discussion__list {
    position: relative;
    z-index: 2;
}

/* Decorative blob behind the cards, bottom-left (live .topic-list::before). */
@media (min-width: 992px) {
    .home-discussion__list::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='163' height='208' viewBox='0 0 163 208'%3E%3Cg id='Group_233' data-name='Group 233' transform='translate(-320 -5040)'%3E%3Crect id='Rectangle_45' data-name='Rectangle 45' width='47' height='90' rx='23.5' transform='translate(320 5158)' fill='%23f5555c'/%3E%3Crect id='Rectangle_46' data-name='Rectangle 46' width='96' height='191' rx='48' transform='translate(387 5040)' fill='%23188e72'/%3E%3C/g%3E%3C/svg%3E%0A");
        position: absolute;
        bottom: -55px;
        left: 10px;
        z-index: -1;
    }
}

.home-discussion__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

/* col-lg-3 / col-md-6 / col-12 (live). */
.home-discussion__cell {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .home-discussion__cell {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .home-discussion__cell {
        flex-basis: 25%;
        max-width: 25%;
    }
}

.home-discussion .discussion-topic-link,
.home-discussion .discussion-topic-link:hover {
    color: #000;
    text-decoration: none;
    display: block;
    height: 100%;
}

.home-discussion .discussion-topic-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 1.25rem 1.25rem 0.625rem;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.home-discussion .discussion-topic-card-header {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: "photo author" "photo score";
    column-gap: 15px;
    min-height: 50px;
    margin-bottom: 10px;
}

.home-discussion .discussion-topic-card-header img {
    grid-area: photo;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.home-discussion .topic-author-name {
    grid-area: author;
    align-self: end;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 700;
}

.home-discussion .topic-author-points {
    grid-area: score;
    align-self: start;
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: #1e8fe1;
}

.home-discussion .topic-article-title {
    min-height: 80px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    color: #000;
}

.home-discussion .topic-article-date {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: #c6c3c3;
}

.home-discussion .topic-article-intro {
    margin: 35px 0 20px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
}

.home-discussion .topic-comments {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.home-discussion .topic-comments-text {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.home-discussion .topic-comments-text span {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: #c6c3c3;
}

.home-discussion .topic-comments-link {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: #f6555c;
}

.home-discussion .discussion-topic-link:hover .topic-comments-link {
    text-decoration: underline;
}

/* Teal "view all" cell. */
.home-discussion .topics-view-all {
    position: relative;
    z-index: 2;
}

.home-discussion .topics-view-all a {
    display: block;
    height: 100%;
    background-color: #2cd7b6;
    border-radius: 16px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.home-discussion .topics-view-all-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 1.25rem 2.5rem 0.9375rem 0.9375rem;
}

.home-discussion .topics-view-all-text {
    padding-top: 2.5rem;
    padding-bottom: 0.625rem;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
}

@media (min-width: 768px) {
    .home-discussion .topics-view-all-content .arrow {
        width: 100%;
    }
}

/* Decorative blob behind the view-all cell, top-right (live). */
@media (min-width: 992px) {
    .home-discussion .topics-view-all-content::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='163.046' height='317.56'%3E%3Cg data-name='Group 231'%3E%3Cpath fill='%23cd3688' d='M23.523 208.881a23.523 23.523 0 1 1 23.523-23.523 23.524 23.524 0 0 1-23.523 23.523' data-name='Path 40'/%3E%3Cpath fill='%23f8b531' d='M115.046 317.56c-26.509 0-48-18.953-48-42.332V101.949c0-23.379 21.491-42.332 48-42.332s48 18.953 48 42.332v173.28c0 23.378-21.491 42.332-48 42.332' data-name='Path 39'/%3E%3Cpath fill='%231e8fe1' d='M23.523 143.335A23.524 23.524 0 0 1 0 119.812V23.523a23.523 23.523 0 0 1 47.046 0v96.289a23.524 23.524 0 0 1-23.523 23.523' data-name='Path 41'/%3E%3C/g%3E%3C/svg%3E");
        position: absolute;
        top: -193px;
        right: 9px;
        z-index: -1;
    }
}


/* ------------------------------------------------------------ */
/*             HOME — "Dukungan" (endorsement, static)          */
/* Mirrors live .section-endorsement: the "Dukungan" illustration */
/* on the left + the "Teman Paling Aktif" scrollable member panel */
/* on the right. The dynamic message feed is empty on live too,   */
/* so it's omitted. Rendered by [bur_endorsement].               */

.home-endorsement {
    padding: 70px 0;
    overflow-x: clip; /* the decorative PNGs extend past the content — clip h-scroll */
}

.home-endorsement__title {
    margin: 0 0 2rem; /* h2 keeps the global pink/yellow underline */
}

.home-endorsement__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* image far-left, members panel toward the
                                       right with a big empty middle, like live */
    align-items: flex-start;
    gap: 30px;
}

@media (min-width: 1200px) {
    .home-endorsement__row {
        padding-right: 117px; /* live row padding-right:132px (incl. the 15px container gutter) */
    }
}

/* Left: illustration held at its natural width, left-aligned (live col-md-9). */
.home-endorsement__topic {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

.home-endorsement__image {
    position: relative;
}

.home-endorsement__image img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* Decorative blob behind the illustration (live topics_decoration.png) — shown
   at all widths, like live. */
.home-endorsement__image::before {
    content: "";
    position: absolute;
    left: 40px;
    top: -60px;
    width: 346px;
    height: 765px;
    z-index: -1;
    background: url("assets/images/endorsement/topics-decoration.png") center / cover no-repeat;
}

/* Stacked: centre it behind the illustration (live centres at <=991). */
@media (max-width: 1199px) {
    .home-endorsement__image::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Phone: a short full-width strip at the top (live <=500). */
@media (max-width: 500px) {
    .home-endorsement__image::before {
        width: 100%;
        height: 200px;
        background-position: top center;
    }
}

/* Right: "Teman Paling Aktif" panel (col-md-3-ish). */
.home-endorsement__members {
    position: relative;
    flex: 0 0 310px;
    max-width: 310px;
    background-color: #f8f8f8;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    padding: 10px 15px;
}

/* Decorative blob to the right of the members panel (live members_decoration.png)
   — shown at all widths, like live. */
.home-endorsement__members::before {
    content: "";
    position: absolute;
    right: -116px;
    top: -140px;
    width: 212px;
    height: 453px;
    z-index: -1;
    background: url("assets/images/endorsement/members-decoration.png") center / cover no-repeat;
}

/* Phone: pull it in to the panel edge so it doesn't overflow (live <=500). */
@media (max-width: 500px) {
    .home-endorsement__members::before {
        right: 0;
    }
}

.home-endorsement__members-title {
    margin: 5px 0 15px;
    padding: 0 5px;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 600;
    color: #000;
}

/* Scrollable member list (live max-height 343px, thin scrollbar). */
.home-endorsement__list {
    max-height: 343px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 2;
}

.home-endorsement__list::-webkit-scrollbar {
    width: 5px;
    background: #bdbdbd;
}

.home-endorsement__list::-webkit-scrollbar-thumb {
    background: #616161;
}

.home-endorsement .member-user {
    margin-bottom: 22px;
}

.home-endorsement .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.home-endorsement .user-image {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home-endorsement .member-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    color: #000;
}

.home-endorsement .user-points {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: #1e8fe1;
}

/* Below xl: stack — illustration on top, members panel full width below
   (live stacks the endorsement columns at <=1200px). */
@media (max-width: 1199px) {
    .home-endorsement__topic {
        flex-basis: 100%;
        text-align: center;
    }

    .home-endorsement__image img {
        margin: 0 auto;
    }

    .home-endorsement__members {
        flex-basis: 100%;
        max-width: 100%;
        margin-top: 40px;
    }
}


/* ------------------------------------------------------------ */
/*        HOME — become-supporter / login (CF7, static)         */
/* Mirrors live .section-form-become-supporter: a background photo */
/* + overlay, a white login card (title + desc + CF7 login form)  */
/* on the left, the supporter counter on the right.              */

.home-join {
    position: relative;
    padding: 4rem 0;
    background: url("assets/images/join/join-bg.jpg") center / cover no-repeat;
    overflow: hidden;
}

.home-join::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/images/join/overlay-footer.png") center / cover no-repeat;
    z-index: 0;
}

.home-join .bur-container {
    position: relative;
    z-index: 1;
}

.home-join__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

/* Login card (live col-md-4). */
.home-join__card {
    flex: 0 0 calc(33.333% - 15px);
    max-width: calc(33.333% - 15px);
    margin-left: 15px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1rem;
    padding: 25px 20px;
}

.home-join__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 40px; /* live: 40px (era 30) */
    line-height: 1.1;
    font-weight: 700;
    color: #000;
}

/* This card's h2 has no decorative underline (live hides it here). */
.home-join__title::before,
.home-join__title::after {
    display: none;
}

.home-join__desc {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

/* Counter (live col-md-8, content bottom-aligned). */
.home-join__counter {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 5rem;
    text-align: center;
}

.home-join__count {
    margin: 0;
    font-family: var(--font-body);
    font-size: 160px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}

/* Live renders the "+" smaller than the digits (120px vs 160px), as a <sup>. */
.home-join__count-plus {
    font-size: 120px;
    vertical-align: baseline;
    top: 0;
}

.home-join__count-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

/* --- CF7 login form --- */
.home-join .bur-login-form__field {
    margin: 0 0 12px;
}

.home-join .wpcf7-form-control-wrap {
    display: block;
}

.home-join .form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
}

.home-join .form-control:focus {
    outline: none;
    border-color: var(--blue);
}

.home-join .bur-login-form__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0 16px;
}

.home-join .bur-login-form__check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #c6c3c3;
}

.home-join .bur-login-form__forgot {
    font-family: var(--font-body);
    font-size: 12px;
    color: #1e8fe1;
    text-decoration: none;
}

.home-join .bur-login-form__submit {
    display: block;
    width: 100%;
    padding: 13px 33px;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    background-color: #f8555c;
    border: 1px solid #f8555c;
    border-radius: 36px;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}

.home-join .bur-login-form__submit:hover {
    filter: brightness(92%);
}

.home-join .bur-login-form__register {
    margin: 20px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    color: #c6c3c3;
}

.home-join .bur-login-form__register a {
    color: #1e8fe1;
    text-decoration: none;
}

/* CF7 response/validation text kept subtle. */
.home-join .wpcf7-response-output {
    margin: 12px 0 0;
    font-size: 13px;
    border-radius: 8px;
}

/* Below lg: stack — card full width on top, counter below (live <=991). */
@media (max-width: 991px) {
    .home-join__card {
        flex-basis: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
    }

    .home-join__counter {
        flex-basis: 100%;
        padding-bottom: 0;
    }

    .home-join__count {
        font-size: 80px;
    }

    .home-join__count-plus {
        font-size: 60px;
    }

    .home-join__count-label {
        font-size: 28px;
    }
}


/* ------------------------------------------------------------ */
/*        HOME — "Aksi Berbakti" carousel (article slider)      */
/* Mirrors live .section-article-slider: a white rounded card of */
/* article boxes on a #f8f8f8 band, with decorative corner blobs */
/* and a slick-like slider (4/2/1 slides). Rendered by the       */
/* [bur_article_carousel] shortcode in the Beranda page content. */

.home-articles {
    background-color: #f8f8f8;
    padding: 4.7rem 0 12rem;
    overflow-x: clip; /* the corner blobs extend past the card — clip h-scroll */
    /* On the single-article page the article body's bottom decoration blob
       (absolutely positioned, so painted late) would otherwise sprawl down
       over the carousel; a stacking context here makes the carousel (opaque
       #f8f8f8 bg) paint over it, so only the blob's top peeks in the article
       area above the carousel — matching live. Harmless on the homepage. */
    position: relative;
    z-index: 1;
}

/* The 66.667% centred column (live col-md-8); also anchors the blobs. */
.home-articles__inner {
    position: relative;
    width: 66.667%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Decorative blobs: pink/teal/coral top-right, yellow/teal/coral bottom-left. */
.home-articles__inner::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='114.092' height='220.667' viewBox='0 0 114.092 220.667'%3E%3Cg id='Element_1' data-name='Element 1' transform='translate(-1478.954 -1639)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M91.77,171.281h0a23.524,23.524,0,0,1-23.523-23.523V51.469a23.523,23.523,0,1,1,47.046,0v96.289A23.524,23.524,0,0,1,91.77,171.281' transform='translate(1477.753 1643.577)' fill='%23ce3689'/%3E%3Cpath id='Path_2' data-name='Path 2' d='M23.523,205.163h0A23.524,23.524,0,0,1,0,181.64V85.351a23.523,23.523,0,0,1,47.046,0V181.64a23.524,23.524,0,0,1-23.523,23.523' transform='translate(1478.954 1654.505)' fill='%232cd7b6'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M23.523,47.046h0A23.523,23.523,0,1,1,47.046,23.523,23.524,23.524,0,0,1,23.523,47.046' transform='translate(1478.954 1639)' fill='%23f6555c'/%3E%3C/g%3E%3C/svg%3E%0A");
    position: absolute;
    top: -2rem;
    right: 0;
    z-index: 0;
}

.home-articles__inner::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230.092' height='208.526' viewBox='0 0 230.092 208.526'%3E%3Cg id='Element_2' data-name='Element 2' transform='translate(-1547.954 -1620.332)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M91.77,208.754h0c-12.991,0-23.523-13.285-23.523-29.673V57.619c0-16.387,10.532-29.673,23.523-29.673s23.523,13.285,23.523,29.673V179.081c0,16.387-10.532,29.673-23.523,29.673' transform='translate(1479.707 1620.104)' fill='%23f8b531'/%3E%3Cpath id='Path_2' data-name='Path 2' d='M23.523,205.163h0A23.524,23.524,0,0,1,0,181.64V85.351a23.523,23.523,0,0,1,47.046,0V181.64a23.524,23.524,0,0,1-23.523,23.523' transform='translate(1731 1558.505)' fill='%232cd7b6'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M23.523,47.046h0A23.523,23.523,0,1,1,47.046,23.523,23.524,23.524,0,0,1,23.523,47.046' transform='translate(1615 1724.954)' fill='%23f6555c'/%3E%3C/g%3E%3C/svg%3E%0A");
    position: absolute;
    bottom: -9rem;
    left: 0;
    z-index: 0;
}

/* The h2 is inline-block with the global pink/yellow underline (live's
   .bakti-untuk-rakyat h2 default) — left-aligned at the card's left edge. */
.home-articles__title {
    margin: 0 0 2rem;
}

.home-articles__wrapper {
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-radius: 1rem;
    padding: 1.5rem 2.5rem;
}

.home-articles__slider {
    position: relative;
}

.home-articles__viewport {
    overflow: hidden;
}

.home-articles__track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.4s ease;
    will-change: transform;
}

/* One page = one viewport; slides at 25/50/100% => 4/2/1 visible (live slick). */
.article-slide {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    padding: 0 0.5rem; /* live slick slide margin 0 .5rem */
}

.article-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
    border-bottom: 0.95rem solid #f8555c;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.home-articles .img-container {
    display: block;
    position: relative;
    height: 238px;
}

.home-articles .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-articles .img-container a:hover {
    text-decoration: none;
}

/* Category label: colour cycles by slide position (live slick nth-of-type). */
.home-articles .article-category-label {
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    margin-top: -2rem;
    padding: 0.25rem 1rem;
    border-radius: 0 1rem 0 0;
    background-color: #f8b531;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
}

.article-slide:nth-child(4n + 1) .article-category-label {
    background-color: #ce3689;
}
.article-slide:nth-child(4n + 2) .article-category-label {
    background-color: #1e8fe1;
}
.article-slide:nth-child(4n + 3) .article-category-label {
    background-color: #2cd7b6;
}
.article-slide:nth-child(4n) .article-category-label {
    background-color: #f8b531;
}

.home-articles .description-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 1rem 1rem;
}

.home-articles .article-title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
    color: #000;
    margin-top: 2.4rem;
    margin-bottom: 0.15rem;
    min-height: 88px;
}

.home-articles .article-title a {
    color: #000;
}

.home-articles .article-title a:hover {
    text-decoration: none;
}

.home-articles .article-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: #c6c3c3;
    margin: 0 0 0.5rem;
}

.home-articles .article-date svg {
    flex: 0 0 auto;
}

.home-articles .article-description {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    min-height: 120px;
    margin: 0 0 0.75rem;
}

.home-articles .ibtn-clean {
    position: relative;
    align-self: flex-start;
    margin-top: auto;
    padding-right: 20px;
    color: #f8555c;
    font-weight: 700;
    text-decoration: none;
}

.home-articles .ibtn-clean::after {
    content: "\2192";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    color: transparent;
    transition: all 0.3s ease-out;
}

.home-articles .ibtn-clean:hover {
    text-decoration: underline;
}

.home-articles .ibtn-clean:hover::after {
    width: 15px;
    right: 0;
    color: #f8555c;
}

/* Prev/next arrows (live prev.svg; right one is the mirror). */
.home-articles .left-arrow,
.home-articles .right-arrow {
    position: absolute;
    top: 50%;
    width: 58px;
    height: 58px;
    z-index: 10;
    cursor: pointer;
    background-image: url("assets/images/prev.svg");
    background-size: 58px 58px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Push the arrows out onto the card's outer edges (live centres them on the
   white card edge; our slider sits 2.5rem inside the card's padding, so offset
   by that padding to land the arrow centres on the card edge, half outside). */
.home-articles .left-arrow {
    left: -2.5rem;
    transform: translate(-50%, -50%);
}

.home-articles .right-arrow {
    right: -2.5rem;
    transform: translate(50%, -50%) rotate(180deg);
}

.home-articles .left-arrow.is-disabled,
.home-articles .right-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.home-articles__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.home-articles__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
}

.home-articles__dot.is-active {
    background: #f8b531;
}

/* Tablet: 2 slides, arrows drop to the bottom-right (live @<=1024). */
@media (max-width: 1024px) {
    .article-slide {
        flex-basis: 50%;
        max-width: 50%;
    }

    .home-articles__wrapper {
        padding-bottom: 5rem;
    }

    /* Anchor the arrows to the card (wrapper) instead of the slider, so they
       sit in the padding zone BELOW the cards — positioned lower, like live. */
    .home-articles__slider {
        position: static;
    }

    .home-articles .left-arrow,
    .home-articles .right-arrow {
        width: 40px;
        height: 40px;
        background-size: 40px 40px;
        top: auto;
        bottom: 1.2rem;
    }

    .home-articles .left-arrow {
        left: auto;
        right: 4.5rem;
        transform: none;
    }

    .home-articles .right-arrow {
        right: 1.5rem;
        transform: rotate(180deg);
    }
}

/* Below md: card goes full width. The decorative corner blobs stay visible
   (live keeps them on mobile — the section's overflow-x:clip stops any
   horizontal scroll they'd otherwise cause). */
@media (max-width: 767px) {
    .home-articles {
        padding: 3rem 0 6rem;
    }

    .home-articles__inner {
        width: auto;
    }

    .home-articles__wrapper {
        padding: 1.25rem 1rem 5rem;
    }
}

/* Phone: 1 slide. */
@media (max-width: 500px) {
    .article-slide {
        flex-basis: 100%;
        max-width: 100%;
    }
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                       ARTICLE (single)                       */

/*----- Layout: centred reading column (live col-lg-8 = 66.667% of the
   1372 container, full width below 992px) -----*/
.single-article {
    padding: 75px 0 60px;
    overflow-x: clip; /* the decorative side blobs extend past the column; clip
                         them at the viewport edge so they never cause h-scroll */
}

.single-article__col {
    width: 66.667%;
    max-width: 915px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 991px) {
    /* live caps the article column to the Bootstrap 720 container (~690 content) */
    .single-article__col {
        width: auto;
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    /* live goes near full-width with a single 15px gutter (clona avea dublu
       padding: bur-container 15 + col 15 = text indentat 30 în loc de 15) */
    .single-article__col {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/*----- Title + byline -----*/
.single-article__title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 42px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 10px;
}

/* Title decoration blob (top-right), hidden on mobile like live.
   Live anchors it right:15px on the FULL-WIDTH title row (1372px
   container), NOT on the 915px text column — anchoring it to the
   column put the pills over the title text on long titles. */
.single-article > .bur-container {
    position: relative;
}

.single-article > .bur-container::after {
    content: "";
    position: absolute;
    right: 15px;
    top: -70px;
    width: 114px;
    height: 255px;
    background: url("assets/images/informative-article_decoration-title.svg") bottom center / cover no-repeat;
    pointer-events: none;
}

@media (max-width: 991px) {
    .single-article > .bur-container::after {
        display: none;
    }
}

/* Author + date byline (gray, 12px; "|" separator after the name) */
.article-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: #c6c3c3;
    margin-bottom: 24px;
}

.article-info .article-author-img {
    display: inline-flex;
    padding-right: 10px;
}

.article-info .article-author-img img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.article-info .article-author-name {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    padding-right: 15px;
}

.article-info .article-author-name::after {
    content: "|";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
}

.article-info .article-date {
    font-size: 12px;
    font-weight: 500;
}

/*----- Body -----*/
.single-article__body {
    position: relative; /* anchors the body decoration blob */
}

/* Featured image: full column width, no radius (24px above comes from
   .article-info's bottom margin, 23px below to the first paragraph) */
.single-article__featured {
    margin: 0 0 23px;
}

.single-article__featured img {
    display: block;
    width: 100%;
    height: auto;
}

/* Body decoration blob (bottom-right), hidden on mobile like live */
.single-article__body::after {
    content: "";
    position: absolute;
    left: calc(100% - 15px);
    top: 100%;
    width: 226px;
    height: 623px;
    background: url("assets/images/informative-article_decoration-bottom.svg") bottom center / cover no-repeat;
    pointer-events: none;
}

@media (max-width: 991px) {
    .single-article__body::after {
        display: none;
    }
}

/* Body text (Open Sans 16/24) */
.single-article__content {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--text);
}

.single-article__content p {
    margin: 0 0 25px;
}

.single-article__content img {
    max-width: 100%;
    height: auto;
    margin: 0 0 20px;
}

/*----- Archive: Aksi Berbakti listing -----*/
.article-archive {
    padding-bottom: 60px;
    overflow-x: clip;
}

/* Title sits in the same centred 66.667% column as the article content */
.article-archive__head {
    max-width: 915px;
    margin: 0 auto;
    padding: 65px 15px 30px;
}

.article-archive__title {
    color: #616161; /* gray, like live (keeps the global h1 size/weight) */
    margin: 0;
}

/* Decorative pills right of the title (live .page-title .container:before:
   114x221 anchored right:120px on the FULL 1372 container, z1 so it
   overlaps the cover top edge; hidden <=991px). */
.article-archive__title-wrap {
    position: relative;
}

.article-archive__title-wrap::before {
    content: "";
    position: absolute;
    right: 120px;
    top: 89px;
    width: 114px;
    height: 221px;
    background: url("assets/images/aksi-decoration-title.svg") center / cover no-repeat;
    z-index: 1;
}

@media (max-width: 991px) {
    .article-archive__title-wrap::before {
        display: none;
    }
}

/* Live constrains the listing (filter + grid + load-more) to a centred
   915px column (col-lg-8 incl. its 15px side padding) — the cards are
   ~200px wide, 4 per row of the column. */
.article-archive__col {
    max-width: 915px;
    margin: 0 auto;
    padding: 0 15px;
}

/*----------------------------------------------------------------*/
/*   PASAR RAKYAT — "Coming Soon" placeholder (shop deferred)      */
/*----------------------------------------------------------------*/
.coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 100px 0;
    text-align: center;
}

.coming-soon__title {
    margin: 0 0 12px;
    color: var(--text);
}

.coming-soon__msg {
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    color: var(--coral);
}

@media (max-width: 767px) {
    .coming-soon {
        min-height: 45vh;
        padding: 64px 0;
    }

    .coming-soon__msg {
        font-size: 28px;
    }
}

/* Full-width cover banner */
.article-archive__cover {
    width: 100%;
    height: 460px;
    margin-bottom: 40px;
    background: url("assets/images/aksi-berbakti-cover.png") center / cover no-repeat;
}

/*----- Category filter -----*/
/* Live renders it as a DROPDOWN at every width (the tabs markup exists on
   live but is inline-style hidden by their JS): "FILTER" label Adrianna
   24/700 uppercase + a white pill button (Adrianna 24, border #707070,
   radius 33) opening a plain bordered menu. */
.article-archive__filter {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.article-archive__filter-label {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin-right: 30px;
}

.article-archive__dd {
    position: relative;
}

.article-archive__dd-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-width: 291px;
    height: 66px;
    padding: 0 30px;
    background: transparent;
    border: 1px solid #707070;
    border-radius: 33px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
}

/* On phones the pill shrinks to fit beside the FILTER label, like live
   (~181px vs the 291px desktop min-width). */
@media (max-width: 500px) {
    .article-archive__dd-toggle {
        min-width: 0;
        padding: 0 24px;
    }
}

.article-archive__dd-caret {
    flex: 0 0 auto;
}

.article-archive__dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    min-width: 100%;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #707070;
    border-radius: 4px;
}

.article-archive__dd-menu[hidden] {
    display: none;
}

.article-archive__dd-item {
    display: block;
    width: 100%;
    padding: 4px 24px;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #212529;
    cursor: pointer;
}

.article-archive__dd-item:hover,
.article-archive__dd-item.is-active {
    background-color: #f0f0f0;
}

/*----- Card grid (responsive: 4 / 3 / 2 / 1 like live) -----*/
.article-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px 70px;
    position: relative;
}

/* Decorațiunile de sub grilă (live .articles-list-data-container-js
   :before/:after, prabowo.css:8782/8801): blob stânga-jos 230x208 +
   disc dreapta-jos 47x47, ambele z-index -1 în spatele cardurilor. */
.article-grid::before {
    content: "";
    position: absolute;
    left: -40px;
    bottom: -100px;
    width: 230px;
    height: 208px;
    background: url(assets/images/pg-listing-article_decoration-body.svg) center / cover no-repeat;
    z-index: -1;
}

@media screen and (max-width: 1650px) {
    .article-grid::before {
        left: 15px;
        bottom: -50px;
    }
}

.article-grid::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: -20px;
    width: 47px;
    height: 47px;
    background: url(assets/images/pg-listing-article_decoration-disc.svg) center / cover no-repeat;
    z-index: -1;
}

/* White card box like live .article-item-wrap: radius only on the TOP
   corners, drop shadow, red bar at the bottom (live border-bottom 16px
   #F8555C, prabowo.css:8821), image + text inside. */
.article-card__box {
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-bottom: 16px solid #F8555C;
    overflow: hidden;
    height: 100%;
}

/* Load-more: cardurile noi apar UNUL CÂTE UNUL (pe live percepția vine
   din încărcarea secvențială a imaginilor; DOM-ul inserează 9 odată) —
   JS-ul le dezvăluie eșalonat și fiecare intră cu un fade scurt. */
.article-card.is-revealing {
    animation: bur-card-reveal 0.3s ease both;
}

@keyframes bur-card-reveal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.article-card {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 15px;
    margin-bottom: 60px;
}

@media (max-width: 1199px) {
    .article-card {
        flex-basis: 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 991px) {
    .article-card {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .article-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Card hidden by the show-more logic */
.article-card.is-hidden {
    display: none;
}

.article-card__media {
    position: relative;
    overflow: hidden;
}

.article-card__media img {
    display: block;
    width: 100%;
    height: 238px;
    object-fit: cover;
}

/* Category badge: bottom-left of the image, rounded top-right corner.
   Live colours it PER CATEGORY (not one colour for all): Berita pink,
   Polling yellow, Bahasan Populer blue, Beri komentarmu teal,
   Ruang Diskusi black. */
.article-category-label {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #000;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    padding: 5px 20px;
    border-radius: 0 16px 0 0;
}

.article-archive .article-category-label--berita {
    background-color: #ce3689;
}

.article-archive .article-category-label--polling {
    background-color: #f8b531;
}

.article-archive .article-category-label--bahasan-populer {
    background-color: #1e8fe1;
}

.article-archive .article-category-label--beri-komentarmu {
    background-color: #2cd7b6;
}

.article-archive .article-category-label--ruang-diskusi {
    background-color: #000;
}

/* Text area inside the white box (live .article-item_text-wrap). */
.article-card__text {
    padding: 40px 20px 20px;
}

.article-card__title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.article-card__title a {
    color: inherit;
}

.article-card__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: #c6c3c3;
    margin: 10px 0;
}

.article-card__excerpt {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--text);
    margin-bottom: 12px;
}

.article-card__more {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--coral-alt);
    transition: color 0.2s ease-in-out;
}

.article-card__more:hover {
    color: var(--coral-alt);
    text-decoration: underline;
}

/*----- Show more button (coral pill, centred) -----*/
.article-archive__more-wrap {
    margin-top: 20px;
    text-align: center;
}

.article-archive__more {
    /* uses .btn-pill .btn-pill--red */
}

.article-archive__more.is-hidden {
    display: none;
}


/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/*                     PETISI (petition page)                   */
/* Static recreation of live's petition page: title + hero      */
/* banner with the pledge counter card & progress + details +   */
/* share + "Reaksi" + sign button. Rendered by [bur_petisi].    */

/* --- Title --- */
.petisi__title-sec {
    padding: 95px 0 0; /* live: title starts ~170px from top (clona era ~135) */
}

.petisi__title-wrap {
    position: relative;
}

.petisi__title {
    max-width: 885px;
    margin: 0 auto 60px; /* centred 885px column + ~60px gap la banner, ca live */
    font-family: var(--font-display);
    font-size: 96px;
    line-height: 1;
    letter-spacing: -1.73px;
    font-weight: 800;
    color: #000;
}

/* Decorative blob to the right of the title (live pg-petition_hero-decoration). */
@media (min-width: 1025px) {
    .petisi__title-wrap::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 0;
        width: 226px;
        height: 523px;
        z-index: 1;
        background: url("assets/images/petisi/hero-decoration.svg") center / cover no-repeat;
    }
}

/* --- Hero banner with the counter card --- */
/* .petisi__hero is a full-width wrapper; the flags image is constrained to the
   container width (via .bur-container) on .petisi__hero-banner, like live (the
   image is 1342px wide inside the container, NOT full viewport). */
.petisi__hero-banner {
    min-height: 591px;
    background-size: cover;
    background-position: 50% 70%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.petisi__counter-card {
    box-sizing: border-box;
    max-width: 885px;
    width: 100%;
    margin: 0 auto 50px;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 20px;
}

.petisi__count {
    margin: 0;
    font-family: var(--font-display);
    font-size: 96px;
    line-height: 1;
    letter-spacing: -1.73px;
    font-weight: 800;
    color: #000;
}

.petisi__count-sub {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 42px;
    font-weight: 700;
    color: #000;
}

.petisi__progress-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.petisi__progress {
    flex: 1 1 auto;
    max-width: 778px;
    height: 18px;
    margin-right: 20px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}

.petisi__progress-fill {
    display: block;
    height: 100%;
    background-color: #010101;
    border-radius: 10px;
}

.petisi__progress-no {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #000;
}

/* --- Details (heading + description + share + reaksi + sign) --- */
.petisi__details {
    margin: 70px 0 0;
    padding-bottom: 40px;
}

.petisi__details-wrap {
    position: relative;
}

/* Centred content column (~915px), like live. The decoration stays on the
   full-width wrap; only the text/share/reaksi are constrained + centred. */
.petisi__details-inner {
    max-width: 885px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Decorative blobs around the details + Reaksi area, matching live's four
   petition decorations. Hidden on mobile (live shows them only on desktop).
   Anchored to .petisi__details-wrap (the full-width container); the centred
   .petisi__details-inner sits above them via z-index. */
.petisi__deco {
    display: none;
}

@media (min-width: 1025px) {
    .petisi__deco {
        display: block;
        position: absolute;
        z-index: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: none;
    }

    /* Left column alongside the details text + Reaksi list. On live this is the
       only left decoration (pg-petision_decoration-comments); the petition-body
       blob lives in a d-none row on live, so it is intentionally NOT recreated. */
    .petisi__deco--comments {
        top: 102px;
        left: 15px;
        width: 163px;
        height: 467px;
        background-image: url("assets/images/petisi/pg-petision_decoration-comments.svg");
    }

    /* Bottom-right, low down by the end of the Reaksi list — on live the blob's
       bottom sits just below the last (5th) visible signer, ~189px under the
       list top (pg-petision_decoration-comments-bottom). */
    .petisi__deco--comments-bottom {
        top: 517px;
        right: 0;
        width: 230px;
        height: 209px;
        background-image: url("assets/images/petisi/pg-petision_decoration-comments-bottom.svg");
    }
}

.petisi__details-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #000;
}

.petisi__details-desc {
    max-width: 915px;
    margin: 0 0 30px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.petisi__share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 40px;
}

.petisi__share-label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.petisi__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #f8555c;
    color: #fff;
    transition: filter 0.2s ease-in-out;
}

.petisi__share-btn:hover {
    color: #fff;
    filter: brightness(90%);
}

/* Reaksi heading (left) + sign button (right). */
.petisi__reaksi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.petisi__reaksi-title {
    margin: 0; /* keeps the global pink/yellow underline */
    font-size: 40px;
}

.petisi__sign-btn {
    display: inline-block;
    padding: 15px 40px;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    background-color: #f8555c;
    border-radius: 36px;
    text-decoration: none;
    transition: filter 0.2s ease-in-out;
}

.petisi__sign-btn:hover {
    color: #fff;
    filter: brightness(90%);
}

/* Reaksi feed — snapshot of live's pledge/signer list (ul.comments). */
.petisi__reaksi-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 16px;
}

.petisi__reaksi-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
    padding-bottom: 15px; /* live: ~16px of space below the name before the divider */
    margin-bottom: 36px;
    border-bottom: 1px solid #c6c3c3;
}

.petisi__reaksi-item.is-hidden {
    display: none;
}

.petisi__reaksi-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 28px; /* matches live .user-name */
    color: #000;
}

.petisi__reaksi-date {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #c6c3c3;
}

.petisi__reaksi-more-wrap {
    text-align: center;
}

.petisi__reaksi-more {
    display: inline-block;
    padding: 13px 33px;
    margin-top: 16px;
    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #bfbfbf;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 36px;
    text-decoration: none;
    transition: filter 0.2s ease-in-out;
}

.petisi__reaksi-more:hover {
    color: #595959;
}

@media (max-width: 991px) {
    .petisi__title {
        font-size: 60px;
    }

    .petisi__count {
        font-size: 60px;
    }

    .petisi__count-sub {
        font-size: 20px;
        line-height: 24px;
    }

    .petisi__hero-banner {
        min-height: 0;
        padding-top: 200px;
    }

    /* Live caps the content column to the Bootstrap 720 container (~690px
       centred) at tablet; la mobil containerul e < 690 deci fără efect. */
    .petisi__title,
    .petisi__details-inner,
    .petisi__counter-card {
        max-width: 690px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    /* live keeps the petition title 60px on mobile (nu 40px) */

    /* Live stacks the header on mobile: the sign button goes FULL-WIDTH on top
       (order 1) and the "Reaksi" heading sits below it, left-aligned (order 2). */
    .petisi__reaksi-title {
        order: 2;
        width: 100%;
        font-size: 30px; /* live: 30px pe mobil (era 40px) */
    }

    .petisi__sign-btn {
        order: 1;
        width: 100%;
        text-align: center;
    }
}

/*----------------------------------------------------------------*/
/*        PAGE-TEXT (plain text pages: Aturan Komunitas,          */
/*        Kebijakan Privasi — live "default-page" layout)         */
/*----------------------------------------------------------------*/
/* Live serves these in a Bootstrap 1140px container (not the 1372
   campaign container) with quill (ql-*) markup kept verbatim; the
   list markers are rendered by CSS below, copied from live. */
.page-text {
    padding: 24px 0 55px;
}

/* Live serves these in a Bootstrap fixed `.container` (nu fluid). Replicăm
   lățimile standard pe breakpoint-uri ca lățimea coloanei să fie ca live
   (720 tabletă, 960, 1140). */
.page-text .bur-container {
    max-width: 100%;
}

@media (min-width: 576px) {
    .page-text .bur-container { max-width: 540px; }
}

@media (min-width: 768px) {
    .page-text .bur-container { max-width: 720px; }
}

@media (min-width: 992px) {
    .page-text .bur-container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .page-text .bur-container { max-width: 1140px; }
}

.page-text__content p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
    margin: 0 0 15px;
}

.page-text__content h3 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    margin: 32px 0 30px;
}

.page-text__content a {
    color: #007bff;
    text-decoration: none;
}

.page-text__content em {
    font-style: italic;
}

.page-text__content .ql-align-center {
    text-align: center;
}

.page-text__content .ql-align-justify {
    text-align: justify;
}

/* Quill lists (live: .text-widget ol + li[data-list] rules) */
.page-text__content ol {
    list-style: none;
    counter-reset: section;
    padding-left: 40px;
    margin: 0 0 16px;
}

.page-text__content ol li {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #000;
}

.page-text__content li[data-list="ordered"] span.ql-ui::before {
    counter-increment: section;
    content: counter(section) ".";
    margin-right: 10px;
    margin-left: -18px;
}

.page-text__content li[data-list="bullet"] {
    display: table;
}

.page-text__content li[data-list="bullet"] span.ql-ui {
    display: table-cell;
    vertical-align: middle;
    padding-right: 5px;
    font-size: 25px;
    position: relative;
}

.page-text__content li[data-list="bullet"] > .ql-ui::before {
    content: "\2022";
    font-size: 25px;
    position: absolute;
    left: -15px;
    top: -6px;
}

@media (max-width: 500px) {
    .page-text__content p,
    .page-text__content li {
        text-align: left !important;
    }

    /* live: titlul h3 scade la 35px pe telefoane mici (era 40px) */
    .page-text__content h3 {
        font-size: 35px;
    }
}

/*----------------------------------------------------------------*/
/*                  TUJUAN KAMI (manifesto page)                  */
/*----------------------------------------------------------------*/
/* Live: title + text in a 915px column centred in the 1372
   container; banner image at natural size (1620px) centred,
   max-width 100%; decoration SVG right of the title extends down
   over the banner (hidden <=768 like live). */
.tujuan-title {
    padding-top: 74px;
    overflow-x: clip;
}

.tujuan-title__wrap {
    max-width: 885px;
    margin: 0 auto;
    position: relative;
}

.tujuan-title__wrap::after {
    content: "";
    background: url(assets/images/tujuan/decoration-title.svg) center center / cover no-repeat;
    position: absolute;
    left: calc(100% - 15px);
    top: 0;
    width: 212px;
    height: 453px;
    z-index: -1; /* live: decorațiunea stă ÎN SPATELE banner-ului (galben tăiat, magenta ascuns) */
}

.tujuan-title__subtitle {
    font-size: 24px;
    /* live: 16px h5 with a 24px span renders a 38px line box */
    line-height: 38px;
    font-weight: 700;
    margin: 0 0 7px;
}

.tujuan-banner__img {
    margin: 23px 0 0;
    text-align: center;
}

.tujuan-banner__img img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.tujuan-text {
    padding: 73px 0 50px;
}

.tujuan-text__col {
    max-width: 885px;
    margin: 0 auto;
}

/* Live caps the content column to the Bootstrap 720 container (~690px) at
   tablet; la mobil containerul e < 690 deci fără efect. */
@media (max-width: 991px) {
    .tujuan-title__wrap,
    .tujuan-text__col {
        max-width: 690px;
    }
}

.tujuan-text__col p {
    margin: 0 0 15px;
}

@media (max-width: 768px) {
    .tujuan-title__wrap::after {
        display: none;
    }
}

/*----------------------------------------------------------------*/
/*        VISI MISI 02 — "Bersama Indonesia Maju" (program)       */
/*----------------------------------------------------------------*/
/* Ported from live prabowo.css "Page: Program" block. The two
   accordions keep live's Bootstrap markup (.card/.collapse/
   data-toggle) — behavior is a vanilla-JS re-implementation in
   theme-main.js. .program-col = live col-md-8 (66.667% of the
   viewport, NOT of the 1372 container). */
.program-col {
    width: 66.667%;
    margin: 0 auto;
    padding: 0 15px;
}

.program-section-hero-banner .ql-align-center,
.program-section-articles .ql-align-center,
.program-section-two-column .ql-align-center {
    text-align: center;
}

/* Bootstrap-equivalent bits the accordions rely on */
.program-section-articles .collapse,
.program-section-two-column .collapse {
    display: none;
}

.program-section-articles .collapse.show,
.program-section-two-column .collapse.show {
    display: block;
}

.program-section-articles .collapsing,
.program-section-two-column .collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

.program-section-articles button,
.program-section-two-column button {
    display: block;
    width: 100%;
    font-family: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    padding: 6px 12px;
    cursor: pointer;
}

.program-section-articles .card,
.program-section-two-column .card {
    position: relative;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 4px;
}

.program-section-articles .card h2,
.program-section-two-column .card h3 {
    margin: 0;
}

.program-section-articles .card h2::before,
.program-section-articles .card h2::after {
    display: none;
}

/*----- Hero -----*/
.program-section-hero-banner {
    padding-top: 20px;
}

.program-section-hero-banner h1 {
    font-size: 60px;
    line-height: 60px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.program-section-hero-banner h1 strong {
    font-weight: 700;
}

.program-section-hero-banner .program-section-hero-title h1 {
    margin: 1rem 0 2rem;
}

.program-section-hero-banner .program-section-hero-title-second {
    /* live: 4rem 0 2rem inside extra row/col spacing; measured doc
       offsets need 79px above and 102px below to match live */
    margin: 79px 0 102px;
}

.program-section-hero-banner .program-section-hero-title-second h1 {
    font-weight: 600;
}

.program-hero__banner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/*----- 8-program accordion (light-blue band) -----*/
.program-section-articles {
    background-color: #DEEFFF;
    /* live: 6rem 0 2rem plus platform row/col spacing; measured
       doc offsets need 100/86 to match live's section height */
    padding: 100px 0 86px;
}

.program-section-articles .card {
    margin-bottom: 2rem;
    border-radius: 10px !important;
    padding: 0 4rem;
}

.program-section-articles .card .number {
    position: absolute;
    left: 2rem;
    top: 2rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background-color: #1E8FE1;
    border-radius: 50%;
    padding: 0.15rem 0.5rem;
}

.program-section-articles .card h2 {
    padding-bottom: 0;
    width: 100%;
}

.program-section-articles .card h2 button {
    font-size: 1.2rem;
    line-height: 1.25;
    color: #000;
    font-weight: 600;
    text-decoration: none !important;
    padding-left: 0;
    position: relative;
}

.program-section-articles .card h2 button .plus-minus {
    width: 20px;
    height: 20px;
    right: -40px;
    top: 40%;
    transform: translateY(-40%);
    position: absolute;
    display: block;
}

.program-section-articles .card h2 button .plus-minus::before,
.program-section-articles .card h2 button .plus-minus::after {
    content: "";
    position: absolute;
    background-color: rgb(30, 143, 225);
    transition: transform 0.25s ease-out;
}

/* vertical line */
.program-section-articles .card h2 button .plus-minus::before {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    transform: rotate(90deg);
}

/* horizontal line */
.program-section-articles .card h2 button .plus-minus::after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    transform: rotate(180deg);
}

.program-section-articles .card h2 button.collapsed span::before,
.program-section-articles .card h2 button.collapsed span::after {
    transform: rotate(0deg);
}

.program-section-articles .card p {
    color: #6E6C6C;
    margin: 0 0 16px;
}

.program-section-articles .card .card-header {
    background-color: #fff;
    border-bottom: 0;
    padding: 1.25rem 1.25rem;
}

.program-section-articles .card .card-body {
    padding: 0 1.25rem 1.25rem;
}

.program-section-articles .card:first-of-type .number {
    width: 32px;
    padding-left: 0.55rem;
    box-sizing: border-box;
}

.program-section-articles .card:nth-of-type(2) .number { background-color: #F6555C; }
.program-section-articles .card:nth-of-type(3) .number { background-color: #2CD7B6; }
.program-section-articles .card:nth-of-type(4) .number { background-color: #CE3689; top: 1.5rem; }
.program-section-articles .card:nth-of-type(5) .number { background-color: #F8B531; top: 1.5rem; }
.program-section-articles .card:nth-of-type(6) .number { background-color: #F6555C; top: 1.5rem; }
.program-section-articles .card:nth-of-type(7) .number { background-color: #188E72; }
.program-section-articles .card:last-of-type .number { background-color: #1E8FE1; top: 1.5rem; }

/*----- 17-priorities two-column accordion -----*/
.program-section-two-column {
    padding-top: 5rem;
}

.program-section-two-column .two-column-container {
    padding-top: 5rem;
    padding-bottom: 4rem;
}

.program-two-column__title {
    max-width: 915px;
    margin: 0 auto;
}

.program-section-two-column h1 {
    font-size: 60px;
    line-height: 60px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.program-section-two-column h1 strong {
    font-weight: 700;
}

/* closing "Mari BERSAMA Prabowo..." h2s (no global pink/yellow underline) */
.program-two-column__closing {
    max-width: 915px;
    margin: 0 auto;
    /* live keeps ~150px between this text and the footer */
    padding-bottom: 150px;
}

.program-section-two-column h2 {
    display: block;
    font-size: 40px;
    font-weight: 700;
    width: 100%;
    margin-bottom: 0;
}

.program-section-two-column h2::before,
.program-section-two-column h2::after {
    display: none;
}

.program-section-two-column .card .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.program-section-two-column .card .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
    position: relative;
    box-sizing: border-box;
}

.program-section-two-column button {
    color: #000;
    font-size: 28px;
    font-weight: 700;
    position: relative;
}

.program-section-two-column button .plus-minus {
    width: 20px;
    height: 20px;
    right: -2rem;
    top: 11rem;
    transform: translateY(-10rem);
    position: absolute;
    display: block;
    z-index: 33;
}

.program-section-two-column button .plus-minus::before,
.program-section-two-column button .plus-minus::after {
    content: "";
    position: absolute;
    background-color: rgb(30, 143, 225);
    transition: transform 0.25s ease-out;
}

.program-section-two-column button .plus-minus::before {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
    transform: rotate(90deg);
}

.program-section-two-column button .plus-minus::after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    transform: rotate(180deg);
}

.program-section-two-column button.collapsed span::before,
.program-section-two-column button.collapsed span::after {
    transform: rotate(0deg);
}

.program-section-two-column button:hover {
    color: #000;
}

/* Live are butoanele celor 17 priorități cu atributul `disabled`
   (secțiune STATICĂ: toate panourile deschise, nimic nu se închide);
   vizual identice cu cele active (opacity 1, negru), doar inerte. */
.program-section-two-column button:disabled {
    cursor: default;
    pointer-events: none;
    opacity: 1;
    color: #000;
}

.program-section-two-column .card {
    border: 0;
    overflow: visible;
    border-radius: 4px 4px 0 0;
}

.program-section-two-column .card .card-header {
    border: 0;
    background: transparent;
    padding: 0.75rem 1.25rem;
}

.program-section-two-column .card .card-body {
    padding: 0 1rem 1rem;
    color: #6E6C6C;
}

.program-section-two-column .card .card-body .listing {
    list-style: disc;
    padding-left: 40px;
    margin: 0 0 16px;
}

.program-section-two-column .card .card-body .listing .item {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.program-section-two-column .card .image-column {
    padding-bottom: 6rem;
}

.program-section-two-column .card .image-column .container-img {
    width: 350px;
    margin: 0 auto;
}

.program-section-two-column .card .image-column .container-img img {
    width: 100%;
    height: auto;
}

.program-section-two-column .card .col-md-6:first-of-type {
    border-right: 2px solid #D4D4D4;
}

.program-section-two-column .card .number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    background-color: #1E8FE1;
    border-radius: 50%;
    padding: 0.35rem 0.6rem;
    position: absolute;
    z-index: 5;
}

.program-section-two-column .card:first-of-type .number { top: 0; left: -1rem; padding: 0.4rem 0.7rem; font-size: 21px; }
.program-section-two-column .card:nth-of-type(2) .number { top: 1.25rem; background-color: #2CD7B6; right: -1rem; }
.program-section-two-column .card:nth-of-type(3) .number { top: 1.25rem; background-color: #F8B531; left: -1rem; }
.program-section-two-column .card:nth-of-type(4) .number { top: 1.25rem; background-color: #F6555C; right: -1rem; }
.program-section-two-column .card:nth-of-type(5) .number { top: 1.25rem; background-color: #1E8FE1; left: -1rem; }
.program-section-two-column .card:nth-of-type(6) .number { top: 1.25rem; background-color: #2CD7B6; right: -1rem; }
.program-section-two-column .card:nth-of-type(7) .number { top: 1.25rem; background-color: #F6555C; left: -1rem; }
.program-section-two-column .card:nth-of-type(8) .number { top: 1.25rem; background-color: #F8B531; right: -1rem; }
.program-section-two-column .card:nth-of-type(9) .number { top: 1.25rem; background-color: #1E8FE1; left: -1rem; }
.program-section-two-column .card:nth-of-type(10) .number { top: 1.25rem; background-color: #F6555C; right: -1.2rem; padding: 0.35rem 0.3rem; }
.program-section-two-column .card:nth-of-type(11) .number { top: 1.25rem; background-color: #2CD7B6; left: -0.95rem; padding: 0.35rem 0.35rem; }
.program-section-two-column .card:nth-of-type(12) .number { top: 1.25rem; background-color: #F8B531; right: -1.2rem; padding: 0.35rem 0.3rem; }
.program-section-two-column .card:nth-of-type(13) .number { top: 1.25rem; background-color: #F6555C; left: -0.95rem; padding: 0.35rem 0.3rem; }
.program-section-two-column .card:nth-of-type(14) .number { top: 1.25rem; background-color: #1E8FE1; right: -1.2rem; padding: 0.35rem 0.3rem; }
.program-section-two-column .card:nth-of-type(15) .number { top: 1.25rem; background-color: #2CD7B6; left: -0.95rem; padding: 0.35rem 0.3rem; }
.program-section-two-column .card:nth-of-type(16) .number { top: 1.25rem; background-color: #F8B531; right: -1.2rem; padding: 0.35rem 0.3rem; }

.program-section-two-column .card:nth-of-type(16) .image-column {
    position: relative;
}

.program-section-two-column .card:nth-of-type(16) .image-column::before {
    content: "";
    height: 20px;
    width: 2px;
    bottom: -20px;
    left: -2px;
    position: absolute;
    background-color: #D4D4D4;
    z-index: 4;
}

.program-section-two-column .card:nth-of-type(17) .col-md-6 {
    border: 0;
}

.program-section-two-column .card:nth-of-type(17) .number { top: 1.25rem; background-color: #1E8FE1; left: -0.95rem; padding: 0.35rem 0.3rem; }

.program-section-two-column .card:nth-of-type(even) button .plus-minus {
    left: -2rem;
    right: auto;
}

/*----- Responsive (live @768 rules) -----*/
@media (max-width: 768px) {
    .program-col {
        width: 100%;
    }

    .program-section-hero-banner h1,
    .program-section-two-column h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }

    .program-section-two-column h2 {
        font-size: 25px !important;
        line-height: 1.2;
        padding-bottom: 0;
    }

    .program-section-articles .card {
        padding: 3rem 1rem 0;
    }

    .program-section-articles .card .number {
        top: 1.5rem;
        left: 2.25rem;
    }

    .program-section-articles .card h2 button .plus-minus {
        top: -2.5rem;
        right: 0;
        transform: translateY(0);
    }

    .program-section-two-column button {
        font-size: 21px;
    }

    .program-section-two-column button .plus-minus {
        top: -2.5rem;
        right: 0;
        transform: translateY(0);
    }

    .program-section-two-column .card .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .program-section-two-column .card .col-md-6:first-of-type {
        border-right: 0;
    }

    .program-section-two-column .card .description-accordion-column {
        padding-bottom: 1rem;
    }

    .program-section-two-column .card .image-column {
        padding-bottom: 3rem;
    }

    .program-section-two-column .card .image-column .container-img {
        width: 270px;
    }

    .program-section-two-column .card {
        border-bottom: 2px solid #D4D4D4 !important;
        border-radius: 0 !important;
        margin-bottom: 3rem;
    }

    .program-section-two-column .card:nth-of-type(16) .image-column::before {
        display: none;
    }

    /* Live stacks EVERY card content-first, image-below on mobile. Card DOM
       alternates (odd = image-column first, even = description first). Live
       stacks EVERY card IMAGE-first on mobile, so: odd cards are already
       image-first (natural, no reverse); even cards need column-reverse to
       bring the image on top. */
    .program-section-two-column .card:nth-of-type(even) .row {
        flex-direction: column-reverse;
    }

    .program-section-two-column .card:nth-of-type(even) .number,
    .program-section-two-column .card:nth-of-type(odd) .number {
        left: 3rem;
        right: auto;
        top: -1.75rem;
    }

    .program-section-two-column .card:nth-of-type(even) button .plus-minus {
        top: -2.5rem;
        right: 0;
        left: auto;
        transform: translateY(0);
    }

    .program-section-two-column .card .card-body .listing .item {
        font-size: 20px;
    }
}

/* Live shrinks the two-column illustration further on small phones. */
@media (max-width: 500px) {
    .program-section-two-column .card .image-column .container-img {
        width: 220px;
    }

    /* live shrinks the 8-program accordion title on small phones
       (h2 wrapper 40->30, button text 19.2->16) */
    .program-section-articles .card h2 {
        font-size: 30px;
    }

    .program-section-articles .card h2 button {
        font-size: 16px;
    }
}

/*----------------------------------------------------------------*/
/*        AUTH — Theme My Login forms, login modal, account       */
/*----------------------------------------------------------------*/
/* The TML form (.tml) renders inside: the login modal, the Home
   become-supporter card and the /login /register /lostpassword
   pages. Fields mirror the live login card (radius-10 inputs,
   coral pill submit). */
.tml .tml-field-wrap {
    margin: 0 0 12px;
}

.tml .tml-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
}

.tml .tml-field:focus {
    outline: none;
    border-color: var(--blue);
}

.tml .tml-label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #000;
}

/* "Tetap masuk" + "Lupa kata sandi?" share one row, like live. */
.tml-login .tml-rememberme-wrap,
.tml-login .tml-bur_forgot-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #c6c3c3;
}

.tml-login .tml-rememberme-wrap {
    float: left;
}

.tml-login .tml-rememberme-wrap .tml-label {
    display: inline;
    margin: 0;
    font-size: 14px;
    color: #c6c3c3;
}

.tml-login .tml-bur_forgot-wrap {
    float: right;
    justify-content: flex-end;
}

.tml-login .tml-submit-wrap {
    clear: both;
}

.bur-forgot-link {
    font-family: var(--font-body);
    font-size: 12px;
    color: #1e8fe1;
    text-decoration: none;
}

.tml .tml-checkbox {
    width: auto;
    margin: 0;
}

.tml .tml-button {
    display: block;
    width: 100%;
    padding: 13px 33px;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    background-color: #f8555c;
    border: 1px solid #f8555c;
    border-radius: 36px;
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
}

.tml .tml-button:hover {
    filter: brightness(92%);
}

.tml .tml-errors,
.tml .tml-messages,
.tml .tml-alerts {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 13px;
}

.tml .tml-errors {
    color: #d63638;
}

.tml .tml-messages {
    color: #188e72;
}

.tml .tml-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #d63638;
}

/* Register: terms checkbox row. */
.tml-register .tml-bur_terms-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #6e6c6c;
}

.tml-register .tml-bur_terms-wrap .tml-label {
    display: inline;
    margin: 0;
    font-size: 13px;
    color: #6e6c6c;
}

.tml-register .tml-bur_terms-wrap a {
    color: #1e8fe1;
    text-decoration: none;
}

/* "Belum punya akun? Daftar sekarang!" under the form. */
.bur-login-card__register {
    margin: 20px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    color: #c6c3c3;
}

.bur-login-card__register a {
    color: #1e8fe1;
    text-decoration: none;
}

/*----- Social login buttons (live: "atau" + FB + Google) -----*/
.bur-social {
    margin-top: 8px;
}

.bur-social__sep {
    text-align: center;
    margin: 4px 0 12px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #194363;
}

.bur-social-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    font-family: "Roboto", var(--font-body);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    overflow: hidden;
}

.bur-social-btn:last-of-type {
    margin-bottom: 0;
}

.bur-social-btn__icon {
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
}

.bur-social-btn__label {
    flex: 1 1 auto;
    text-align: center;
    padding-right: 46px; /* balance the icon box so the label stays centred */
}

.bur-social-btn--fb {
    background-color: #4267b2;
    color: #fff;
}

.bur-social-btn--fb .bur-social-btn__icon {
    background-color: rgba(0, 0, 0, 0.08);
}

.bur-social-btn--google {
    background-color: #fff;
    color: #757575;
    border: 1px solid #dadce0;
}

.bur-social-btn:hover {
    filter: brightness(0.97);
}

.bur-social__note {
    margin: 4px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    color: #c6c3c3;
}

/*----- Login modal (live #signInModal replica) -----*/
.bur-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bur-modal[hidden] {
    display: none;
}

.bur-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.bur-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 1rem;
    padding: 25px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.bur-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: #c6c3c3;
    cursor: pointer;
}

.bur-modal__close:hover {
    color: #000;
}

body.bur-modal-open {
    overflow: hidden;
}

.bur-login-card__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
    color: #000;
}

.bur-login-card__title::before,
.bur-login-card__title::after {
    display: none;
}

.bur-login-card__desc {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

/*----- Standalone auth pages (/login /register /lostpassword) -----*/
.page-auth {
    padding: 60px 15px 80px;
    background: #f8f8f8;
}

.page-auth .tml {
    max-width: 420px;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem;
    padding: 30px 25px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.page-auth .page-auth__title {
    max-width: 420px;
    margin: 0 auto 20px;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: #000;
    text-align: center;
}

.page-auth .page-auth__title::before,
.page-auth .page-auth__title::after {
    display: none;
}

.page-auth .tml-links {
    max-width: 420px;
    margin: 16px auto 0;
    padding: 0;
    list-style: none;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
}

.page-auth .tml-links a {
    color: #1e8fe1;
    text-decoration: none;
}

/*----- Header account (logged-in state) -----*/
.bur-account {
    position: relative;
}

.bur-account__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 4px 6px;
    font-family: var(--font-body);
}

.bur-account__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.bur-account__name {
    font-size: 15px;
    font-weight: 600;
    color: #595959;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bur-account__points {
    font-size: 12px;
    font-weight: 700;
    color: #1e8fe1;
    white-space: nowrap;
}

.bur-account__menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    padding: 8px 0;
    z-index: 100;
}

.bur-account.is-open .bur-account__menu {
    display: block;
}

.bur-account__menu a {
    display: block;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #595959;
    text-decoration: none;
}

.bur-account__menu a:hover {
    color: #f6555c;
}

/* Home join card: logged-in greeting. */
.home-join__greeting {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #000;
}

.home-join__logout {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 14px;
    color: #1e8fe1;
    text-decoration: none;
}

/* Mobile: desktop-nav account hidden in overlay; bar variant shown <=1199. */
@media (max-width: 1199px) {
    .site-nav > .bur-account {
        display: none;
    }

    .bur-account.btn-login--bar {
        display: block;
    }

    body.nav-open .bur-account.btn-login--bar {
        display: none;
    }
}

/* Password hint on the register page: small gray helper text. */
.tml .description,
.tml .indicator-hint {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: #c6c3c3;
}

/*----------------------------------------------------------------*/
/*        FORUM — "Ruang Diskusi" (archive + single topic)        */
/*----------------------------------------------------------------*/
/* Values measured on live /topics/ruang-diskusi and /topic/<slug>
   at 1536px: content column ~895px centred, yellow Adrianna-96
   title, white cards radius 20 + shadow, message previews with
   0.8px #c6c3c3 separators. */
.forum-archive {
    padding: 65px 0 80px;
    overflow-x: clip; /* the side decorations overflow the container on narrower desktops */
}

.forum-archive__col {
    max-width: 915px;
    margin: 0 auto;
    position: relative;
}

.forum-archive__title {
    color: #F8B531;
    margin: 0 0 20px;
}

/* Decorative pills right of the title (live .img-decorator-top, d-lg-block). */
.forum-archive__deco-top {
    display: none;
}

@media (min-width: 992px) {
    .forum-archive__deco-top {
        display: block;
        position: absolute;
        right: -15rem;
        top: -2rem;
        z-index: 2;
    }
}

/* Alternating decorative pills in the side gutters of the cards, like live
   (.topic-row:nth-child(odd/even)::after, ≥1200px). left/right calc places
   them at the container content edge; z-index -1 tucks them behind the
   white card. */
@media (min-width: 1200px) {
    /* extra specificity: the base .topic-card{overflow:hidden} rule sits
       LATER in this file and would win at equal specificity, clipping the
       gutter decorations; the image sits mid-card so the 20px corners
       don't need cropping */
    .forum-archive__list > .topic-card {
        position: relative;
        overflow: visible;
    }

    .topic-card:nth-child(odd)::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='365.576' height='824.113' viewBox='0 0 365.576 824.113'%3E%3Cg id='Group_317' data-name='Group 317' transform='translate(2002.53 3180.278) rotate(180)'%3E%3Cpath id='Path_1009' data-name='Path 1009' d='M23.523,47.046h0A23.523,23.523,0,1,1,47.046,23.523,23.524,23.524,0,0,1,23.523,47.046' transform='translate(1840 2776.543)' fill='%23cd3688'/%3E%3Cpath id='Path_1011' data-name='Path 1011' d='M48,319.771h0c-26.509,0-48-18.953-48-42.332V104.16C0,80.781,21.491,61.828,48,61.828S96,80.781,96,104.16V277.44c0,23.378-21.491,42.332-48,42.332' transform='translate(1906.53 2632.789)' fill='%23f8b531'/%3E%3Cpath id='Path_1012' data-name='Path 1012' d='M23.523,205.163h0A23.524,23.524,0,0,1,0,181.64V85.351a23.523,23.523,0,0,1,47.046,0V181.64a23.524,23.524,0,0,1-23.523,23.523' transform='translate(1840 2294.337)' fill='%231e8fe1'/%3E%3Cpath id='Path_1013' data-name='Path 1013' d='M91.77,208.754h0c-12.991,0-23.523-13.285-23.523-29.673V57.619c0-16.387,10.532-29.673,23.523-29.673s23.523,13.285,23.523,29.673V179.081c0,16.387-10.532,29.673-23.523,29.673' transform='translate(1568.707 2705.239)' fill='%23f6555c'/%3E%3Cpath id='Path_1014' data-name='Path 1014' d='M23.523,205.163h0A23.524,23.524,0,0,1,0,181.64V-64.89A23.524,23.524,0,0,1,23.523-88.413,23.524,23.524,0,0,1,47.046-64.89V181.64a23.524,23.524,0,0,1-23.523,23.523' transform='translate(1840 2975.115)' fill='%232cd7b6'/%3E%3Cpath id='Path_1010' data-name='Path 1010' d='M23.523,47.046h0A23.523,23.523,0,1,1,47.046,23.523,23.524,23.524,0,0,1,23.523,47.046' transform='translate(1955.484 2611.477)' fill='%23cd3688'/%3E%3C/g%3E%3C/svg%3E%0A");
        position: absolute;
        left: calc((100% - min(1342px, 100vw - 30px)) / 2);
        top: 22rem;
        z-index: -1;
    }

    .topic-card:nth-child(even)::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='162.53' height='467.424' viewBox='0 0 162.53 467.424'%3E%3Cg id='Group_366' data-name='Group 366' transform='translate(2002.53 2823.589) rotate(180)'%3E%3Cpath id='Path_1009' data-name='Path 1009' d='M23.523,47.046h0A23.523,23.523,0,1,1,47.046,23.523,23.524,23.524,0,0,1,23.523,47.046' transform='translate(1840 2776.543)' fill='%23cd3688'/%3E%3Cpath id='Path_1012' data-name='Path 1012' d='M23.523,205.163h0A23.524,23.524,0,0,1,0,181.64V85.351a23.523,23.523,0,0,1,47.046,0V181.64a23.524,23.524,0,0,1-23.523,23.523' transform='translate(1840 2294.337)' fill='%231e8fe1'/%3E%3Cpath id='Path_1013' data-name='Path 1013' d='M91.77,208.754h0c-12.991,0-23.523-13.285-23.523-29.673V57.619c0-16.387,10.532-29.673,23.523-29.673s23.523,13.285,23.523,29.673V179.081c0,16.387-10.532,29.673-23.523,29.673' transform='translate(1818.799 2516.65)' fill='%23f6555c'/%3E%3Cpath id='Path_1010' data-name='Path 1010' d='M23.523,47.046h0A23.523,23.523,0,1,1,47.046,23.523,23.524,23.524,0,0,1,23.523,47.046' transform='translate(1955.484 2611.477)' fill='%23cd3688'/%3E%3C/g%3E%3C/svg%3E%0A");
        position: absolute;
        right: calc((100% - min(1342px, 100vw - 30px)) / 2);
        top: 10rem;
        z-index: -1;
    }

    .topic-card:last-of-type::after {
        max-height: 600px;
        overflow: hidden;
    }
}

.forum-archive__propose {
    margin: 0 0 60px;
}

/* Live title-cases the button ("Usulkan Topik") via text-transform, uses the
   softer coral #F6555C (not the hero #FF4255), and a larger pill (14x45/r40). */
.forum-archive__propose .btn-pill {
    text-transform: capitalize;
    padding: 14px 45px;
    border-radius: 40px;
    background-color: #f6555c;
    border-color: #f6555c;
}

.forum-archive__notice {
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: #188e72;
}

.forum-archive__notice--error {
    color: #d63638;
}

.forum-archive__empty {
    font-family: var(--font-body);
    font-size: 16px;
    color: #6e6c6c;
}

/*----- Topic card (live .topic-row .wrapper-inside) -----*/
.topic-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-bottom: 50px;
    overflow: hidden;
}

.topic-card.is-hidden {
    display: none;
}

.topic-card__info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 15px;
}

.topic-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.topic-card__byline {
    display: flex;
    flex-direction: column;
}

.topic-card__author {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.topic-card__date {
    font-family: var(--font-body);
    font-size: 12px;
    color: #c6c3c3;
}

.topic-card__image {
    display: block;
    height: 338px;
    background-size: cover;
    /* live anchors the crop near the top (bakti override: 50% 20%),
       not dead-centre */
    background-position: 50% 20%;
}

.topic-card__body {
    padding: 20px 15px 25px;
}

.topic-card__title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: #000;
    margin: 0 0 16px;
}

/* no global pink/yellow underline on card titles */
.topic-card__title::before,
.topic-card__title::after {
    display: none;
}

.topic-card__intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin: 0 0 15px;
}

.topic-card__recent span {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

/* Lista de mesaje = cutie FIXĂ 280px cu scroll vertical, la ORICE lățime
   (live .messages-preview-container: height 280 + overflow-y scroll,
   prabowo.css:15216; scrollbar stilizat 10px din override-ul bakti,
   prabowo.css:16923) — cardul nu se întinde cât are comentarii. */
.topic-card__messages {
    height: 280px;
    overflow-y: scroll;
}

.topic-card__messages::-webkit-scrollbar {
    width: 10px;
    border-radius: 20px;
    background-color: #F5F5F5;
}

.topic-card__messages::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: #c1c1c1;
}

.topic-card__message {
    padding: 15px;
    margin: 0 10px 10px 0;
    border-bottom: 0.8px solid #c6c3c3;
}

.topic-card__message:last-child {
    border-bottom: 0;
}

.topic-card__message-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topic-card__message-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.topic-card__message-author-col {
    display: flex;
    flex-direction: column;
}

.topic-card__message-author {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.topic-card__message-ago {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500; /* live uses 500, not the default 400 */
    color: #c6c3c3;
}

.topic-card__message-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 22px;
    color: #001c2b;
    margin: 10px 0 15px;
}

.topic-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
}

/* "N pesan" cu balonul de mesaj gri la stânga (live: .message-count
   padding-left 2rem + .messages::before SVG data-URI 26px la left -30,
   prabowo.css ~16830) */
.topic-card__count {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: #c6c3c3;
    position: relative;
    padding-left: 32px;
}

.topic-card__count-nr {
    position: relative;
    display: inline-block;
    padding: 3px 0 0 4px;
}

.topic-card__count-nr::before {
    content: url("data:image/svg+xml,%3Csvg id='Group_351' data-name='Group 351' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='26.695' height='27.414' viewBox='0 0 26.695 27.414'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_614' data-name='Rectangle 614' width='26.695' height='27.414' fill='%23e9e9e9'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_350' data-name='Group 350' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_1050' data-name='Path 1050' d='M23.429,18.187a11.749,11.749,0,0,0,3.266-8.063C26.695,4.542,23,0,18.449,0H8.246C3.7,0,0,4.542,0,10.124c0,5.462,3.611,10,8.051,10.122.976,0,1.025.05,1.048,1.057v5.534a.692.692,0,0,0,.131.494.294.294,0,0,0,.221.083,1.608,1.608,0,0,0,.626-.207l.483-.269c.4-.222,9.778-5.47,12.87-8.75m-15.184.1c-3.463,0-6.281-3.661-6.281-8.161S4.782,1.964,8.246,1.964h10.2c3.464,0,6.281,3.661,6.281,8.161A9.853,9.853,0,0,1,22,16.841c-1.939,2.058-6.982,5.2-9.816,6.886a2.271,2.271,0,0,1-.821.354c-.281,0-.3-.275-.3-.847V19.1a.783.783,0,0,0-.818-.812Z' fill='%23e9e9e9'/%3E%3C/g%3E%3C/svg%3E%0A");
    position: absolute;
    left: -30px;
    top: 0;
    width: 26px;
    height: auto;
}

.topic-card__more {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #f6555c;
    text-decoration: none;
}

.forum-archive__more-wrap {
    text-align: center;
    margin-top: 10px;
}

/* Live: uppercase text + softer coral #F6555C (not the hero #FF4255). */
.forum-archive__more {
    text-transform: uppercase;
    background-color: #f6555c;
    border-color: #f6555c;
}

/*----- Topic form modal -----*/
.bur-topic-form input[type="text"],
.bur-topic-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
}

.bur-topic-form p {
    margin: 0 0 12px;
}

.bur-topic-form input[type="text"]:focus,
.bur-topic-form textarea:focus {
    outline: none;
    border-color: var(--blue);
}

.bur-topic-form__file label {
    display: block;
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 14px;
    color: #6e6c6c;
}

.bur-topic-form__file input {
    font-family: var(--font-body);
    font-size: 14px;
}

.bur-topic-form__submit {
    width: 100%;
    border: 0;
    cursor: pointer;
}

/*----- Single topic -----*/
.single-topic {
    padding: 50px 0 80px;
}

.single-topic__col {
    max-width: 915px;
    margin: 0 auto;
}

/* Live caps the topic column to ~660px at tablet, and (via the global h1 rule)
   grows the title to 60px on small phones. */
@media (max-width: 991px) {
    .single-topic__col {
        max-width: 660px;
    }
}

@media (max-width: 500px) {
    /* higher specificity so it beats the base .single-topic__title 40px rule
       defined later in the file */
    .single-topic .single-topic__title {
        font-size: 60px;
    }
}

.single-topic__title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: normal;
    font-weight: 700;
    color: #000;
    margin: 0 0 20px;
}

.single-topic__subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    color: #000;
    margin: 0 0 15px;
}

.single-topic__subtitle::before,
.single-topic__subtitle::after {
    display: none;
}

/* Byline like live .topic-article-info: 30px round avatar + bold author,
   1x16px vertical separator, then the date — all 12px #C6C3C3. */
.single-topic__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 24px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: #c6c3c3;
}

.single-topic__byline-avatar {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.single-topic__author {
    font-weight: 700;
}

.single-topic__author::after {
    content: "";
    width: 1px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: 4px;
    left: 4px;
    background-color: #C6C3C3;
}

.single-topic__image {
    margin: 0 0 25px;
}

.single-topic__image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.single-topic__description {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin: 0 0 25px;
}

.single-topic__description p {
    margin: 0 0 15px;
}

.single-topic__share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 40px;
}

.single-topic__share-icon {
    width: 21px;
    height: auto;
}

.single-topic__share-label {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.single-topic__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f6555c;
    color: #fff;
}

.single-topic__share-btn:hover {
    filter: brightness(92%);
}

.single-topic__write {
    margin: 0 0 30px;
}

.single-topic__form {
    margin: 0 0 30px;
}

.single-topic__form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.single-topic__form textarea:focus {
    outline: none;
    border-color: var(--blue);
}

.single-topic__form .bur-message-submit {
    border: 0;
    cursor: pointer;
    margin-top: 12px;
}

/* "Terkini" is an <h2> so it gets the global pink/yellow underline like live. */
.single-topic__sort {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 20px;
}

/* "Sort by" row + dropdown, replica of live's comment sort control. */
.single-topic__sortbar {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 30px 0 24px;
}

.single-topic__sortbar-label {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000;
}

.bur-sort-dd {
    position: relative;
}

.bur-sort-dd__toggle {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--white);
    border: 1px solid #d9d6d6;
    border-radius: 28px;
    padding: 13px 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #000;
    cursor: pointer;
}

.bur-sort-dd__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    white-space: nowrap;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--white);
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    z-index: 20;
}

.bur-sort-dd__menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 6px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #6e6c6c;
    cursor: pointer;
}

.bur-sort-dd__menu button:hover {
    color: #000;
    background: #f7f7f7;
}

.single-topic__messages {
    margin-top: 20px;
}

.topic-message {
    padding: 5px 90px 0 0;
    margin: 0 0 36px;
    border-bottom: 0.8px solid #c6c3c3;
}

.topic-message.is-hidden {
    display: none;
}

.topic-message__head {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #000;
}

.topic-message__author {
    font-weight: 600;
}

.topic-message__date {
    color: #c6c3c3;
    margin-left: 6px;
}

.topic-message__text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin: 8px 0 12px;
}

.topic-message__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 15px;
}

.topic-message__replies {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: #c6c3c3;
}

/* Live's reply "hook" arrow — the exact SVG data-URI from prabowo.css
   (.message-replies-topics::before). */
.topic-message__replies::before,
.bur-msg-modal__balasan::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none' aria-hidden='true'%3E%3Cpath fill='%23c6c3c3' d='M.813 1.219A.407.407 0 0 0 .406.812.407.407 0 0 0 0 1.22v4.468A2.03 2.03 0 0 0 2.031 7.72h9.583l-2.557 2.557a.408.408 0 0 0 0 .573.408.408 0 0 0 .574 0l3.25-3.25a.408.408 0 0 0 0-.573l-3.25-3.25a.408.408 0 0 0-.574 0 .408.408 0 0 0 0 .573l2.557 2.557H2.03A1.22 1.22 0 0 1 .812 5.688v-4.47Z'/%3E%3C/svg%3E");
    position: relative;
    top: 2px;
    margin-right: 4px;
}

.topic-message__reply-link {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: #1e8fe1;
    text-decoration: none;
}

.topic-message__replies-list {
    margin: 0 0 15px 30px;
    border-left: 2px solid #eee;
    padding-left: 15px;
}

.topic-message__reply {
    margin-bottom: 12px;
}

.single-topic__more-wrap {
    text-align: center;
    margin-top: 10px;
}

/* Gray "Baca selengkapnya" pill, replica of live's comments load-more. */
.single-topic__more {
    display: inline-block;
    background: var(--white);
    border: 1px solid #c6c3c3;
    border-radius: 28px;
    padding: 13px 33px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #9b9b9b;
    cursor: pointer;
}

.single-topic__more:hover {
    color: #6e6c6c;
    border-color: #9b9b9b;
}

.single-topic__empty {
    font-family: var(--font-body);
    font-size: 16px;
    color: #6e6c6c;
    margin-top: 20px;
}

/* The list message opens the modal, like live. */
.topic-message__text.js-open-message,
.topic-message__replies.js-open-message {
    cursor: pointer;
}

/*----- Message modal — replica of live's #messageModal -----*/
.bur-msg-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.bur-msg-modal__dialog {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 30px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--white);
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 28px 32px;
    z-index: 1060;
}

.bur-msg-modal__close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #6e6c6c;
    cursor: pointer;
}

.bur-msg-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bur-msg-modal__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.bur-msg-modal__user {
    display: flex;
    flex-direction: column;
}

.bur-msg-modal__name {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.bur-msg-modal__time {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #9b9b9b;
}

.bur-msg-modal__warning {
    font-family: var(--font-body);
    font-size: 13px;
    color: #e04f5f;
    margin: 10px 0 0;
}

.bur-msg-modal__message-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 18px;
}

.bur-msg-modal__text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin: 0;
    flex: 1 1 auto;
}

.bur-msg-modal__vote {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: #9b9b9b;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
}

.bur-msg-modal__share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.bur-msg-modal__balasan {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: #c6c3c3;
}

.bur-msg-modal__share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bur-msg-modal__share-icon {
    width: 16px;
}

.bur-msg-modal__share-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-right: 4px;
}

.bur-msg-modal__hr {
    border: 0;
    border-top: 1px solid #e5e2e2;
    margin: 20px 0 0;
}

.bur-msg-modal__reply {
    padding: 20px 0 0 16px;
    border-bottom: 1px solid #f0eded;
    padding-bottom: 16px;
}

.bur-msg-modal__reply:last-child {
    border-bottom: 0;
}

.bur-msg-modal__avatar--reply {
    width: 36px;
    height: 36px;
}

.bur-msg-modal__reply-text {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 22px;
    color: #000;
    margin: 10px 0 0;
}

.bur-msg-modal__reply-form {
    margin-top: 26px;
}

.bur-msg-modal__reply-title {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #6e6c6c;
}

.bur-msg-modal__reply-hr {
    border: 0;
    border-top: 1px solid #e5e2e2;
    margin: 8px 0 22px;
}

.bur-msg-modal__reply-input {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px dashed #c6c3c3;
    font-family: var(--font-body);
    font-size: 14px;
    color: #000;
    padding: 6px 2px 10px;
    resize: none;
    outline: none;
    background: transparent;
}

.bur-msg-modal__reply-input::placeholder {
    color: #9b9b9b;
}

.bur-msg-modal__form-msg {
    font-family: var(--font-body);
    font-size: 13px;
    color: #2e9e5b;
    margin: 12px 0 0;
}

.bur-msg-modal__form-msg.is-error {
    color: #e04f5f;
}

.bur-msg-modal__form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.bur-msg-modal__post {
    background: var(--coral);
    border: 0;
    border-radius: 28px;
    padding: 12px 40px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    cursor: pointer;
}

/*----- Responsive -----*/
@media (max-width: 991px) {
    .topic-card__image {
        height: 240px;
    }

    /* Live caps the forum column to the Bootstrap 720px container at tablet
       (clona era fluidă ~771px). La mobil col e deja < 720, deci fără efect. */
    .forum-archive__col {
        max-width: 720px;
    }

    .forum-archive__title {
        color: #F8B531;
    }

    .topic-message {
        padding-right: 0;
    }
}

@media (max-width: 500px) {
    .topic-card__image {
        height: 180px;
    }

    /* live keeps the card title 40px down to 600px, drops to 30px only <=500 */
    .topic-card__title {
        font-size: 30px;
    }
}

/*----- "Tulis artikel" page (user article submission) -----*/
.bur-article-form-section {
    padding: 65px 0 80px;
}

.bur-article-form__col {
    max-width: 700px;
    margin: 0 auto;
}

.bur-article-form__title {
    font-size: 60px;
    color: #616161;
    margin: 0 0 30px;
}

.bur-article-form__login {
    font-family: var(--font-body);
    font-size: 16px;
    color: #6e6c6c;
    margin: 0 0 16px;
}

/* "Tulis artikel" CTA on the article archive (logged-in members) */
.article-archive__write {
    margin: 0 0 30px;
}

/*----------------------------------------------------------------*/
/*        ARTICLE "Komentar" section (live comments-container)    */
/*----------------------------------------------------------------*/
/* Live: 504px column left-aligned in the article col; gray cards
   bg #f5f5f5 radius 30px 0, avatar 50px round, name Open Sans
   14/600 with the time stacked under it, text 14/22. */
.single-article__subtitle {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 36px;
    font-weight: 400;
    color: #000;
    margin: 0 0 10px;
}

.article-comments {
    max-width: 504px;
    margin-top: 40px;
}

/* Share row after the body. Live's .bakti-untuk-rakyat .share_article rules
   are NOT gated by a media query — the compact style (flex row, Adrianna 16
   label, 25px coral round buttons, hover blue, 12px icons) applies at EVERY
   width, mobile included. */
.share_article {
    margin: 50px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.share_article img {
    margin-right: 10px;
}

.share_article p {
    margin: 0 20px 0 0;
    font-size: 16px;
    line-height: 28px;
    font-family: var(--font-display);
    font-weight: 700;
    color: #000;
}

.share_article__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #F6555C;
    color: #fff;
    transition: all 0.3s linear;
}

.share_article__btn svg {
    width: 12px;
    height: 12px;
}

.share_article__btn:hover {
    background-color: #1E8FE1;
    color: #fff;
}

.article-comments__title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: #000;
    margin: 0 0 20px;
}

.article-comments__write {
    margin: 0 0 16px;
}

.article-comments__form {
    margin: 0 0 24px;
}

.article-comments__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-comments__item {
    background: #f5f5f5;
    border-radius: 30px 0;
    padding: 20px 16px;
    margin: 0 0 32px;
}

.article-comments__item.is-hidden {
    display: none;
}

.article-comments__user {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
}

.article-comments__avatar {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 15px;
}

.article-comments__name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.article-comments__ago {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: #001c2b;
}

.article-comments__text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 22px;
    color: #000;
    margin: 0;
}

/* live .tertiary-button (same as the petition Reaksi load-more) */
.article-comments__more {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    color: #bfbfbf;
    background: #fff;
    border: 1px solid #707070;
    border-radius: 36px;
    padding: 10px 30px;
    cursor: pointer;
}

.article-comments__empty {
    font-family: var(--font-body);
    font-size: 14px;
    color: #6e6c6c;
}

/*----------------------------------------------------------------*/
/*  SHARE PAGE (rând "Bagikan:" înainte de footer — live           */
/*  .share-page-section; doar pe Tujuan Kami + Bersama Indonesia   */
/*  Maju, via shortcode [bur_share_page])                          */
/*----------------------------------------------------------------*/
/* Live: containerul Bootstrap fix (540/720/960, apoi 1372 la ≥1200 —
   override-ul .bakti-untuk-rakyat .container, prabowo.css:423) cu <hr>
   deasupra; butoane rotunde 60px coral #F8555C, iconițe albe 31px
   (bloc bakti prabowo.css:7913 care suprascrie baza galbenă),
   hover albastru #1E8FE1; ≤500px butoane 52px / iconițe 24px. */
.share-page__container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 576px) {
    .share-page__container { max-width: 540px; }
}

@media (min-width: 768px) {
    .share-page__container { max-width: 720px; }
}

@media (min-width: 992px) {
    .share-page__container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .share-page__container { max-width: 1372px; }
}

/* <hr> Bootstrap (reboot): 1px rgba(0,0,0,.1), margin 1rem 0 */
.share-page__hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.share-page-section {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.share-page-section__label {
    font-size: 16px;
    /* masurat live: Open Sans 16, #000; bold vine din <b> */
    font-family: var(--font-body);
    color: #000;
    margin-right: 10px;
    vertical-align: middle;
    text-decoration: none;
}

.share-page-section__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #F8555C;
    color: #fff;
    margin: 3px 5px 3px 0;
    vertical-align: middle;
    transition: all 0.3s linear;
}

.share-page-section__btn svg {
    height: 31px;
    width: auto;
    fill: currentColor;
}

.share-page-section__btn:hover,
.share-page-section__btn:focus {
    background-color: #1E8FE1;
    color: #fff;
}

@media (max-width: 500px) {
    .share-page-section__btn {
        width: 52px;
        height: 52px;
    }

    .share-page-section__btn svg {
        height: 24px;
    }
}

/*----------------------------------------------------------------*/
/*  PROFILE (pagina de membru /profile/<nicename>/ — live          */
/*  .header-profile .timeline-cover + taburi + POIN SAYA)          */
/*----------------------------------------------------------------*/
/* Live: bandă coral #EA5455 (platform color-1) ~550px cu avatar
   235px rotund border 5px alb + nume Adrianna 54/600 alb; taburi
   Open Sans 12 uppercase (activ #F18344 cu border-bottom 1px);
   timeline .friend-activity (border #e6e6e6, text 13/500 #616161);
   POIN SAYA rânduri 20px cu highlight rgba(241,130,73,.05). */
.bur-profile__cover {
    background-color: #EA5455;
    min-height: 550px;
    display: flex;
    align-items: center;
}

.bur-profile__cover .bur-container {
    width: 100%;
}

.bur-profile__cover-row {
    display: flex;
    align-items: center;
}

.bur-profile__avatar {
    flex: 0 0 235px;
    width: 235px;
    height: 235px;
    border-radius: 50%;
    border: 5px solid #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #fff;
}

.bur-profile__details {
    padding-left: 30px;
}

.bur-profile__name {
    font-family: var(--font-display);
    font-size: 54px;
    line-height: 1.2;
    font-weight: 600;
    color: #fff;
    letter-spacing: normal;
    margin: 0 0 2rem;
}

/* numele nu ia underline-ul global de h2 și nici stilul de h1 96px */
.bur-profile__name::before,
.bur-profile__name::after {
    display: none;
}

.bur-profile__points {
    font-family: var(--font-body);
    font-size: 16px;
    color: #fff;
}

.bur-profile__body {
    padding: 40px 0 80px;
}

.bur-profile__col {
    max-width: 915px;
    margin: 0 auto;
    padding: 0 15px;
}

/*----- Taburi (live .nav-tabs.activity: 12px uppercase, activ #F18344) -----*/
.bur-profile__tabs {
    display: flex;
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    border-bottom: 1px solid #dee2e6;
}

.bur-profile__tabs li {
    flex: 1;
    text-align: center;
}

.bur-profile__tab-link {
    display: block;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #616161;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
}

.bur-profile__tab-link.is-active {
    color: #F18344;
    border-bottom-color: #F18344;
}

.bur-profile__tab {
    display: none;
}

.bur-profile__tab.is-active {
    display: block;
}

/*----- Timeline (live .friend-activity) -----*/
.bur-profile__event {
    border: 1px solid #e6e6e6;
    margin-bottom: 20px;
}

.bur-profile__event-inner {
    background: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
}

.bur-profile__event-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    flex-shrink: 0;
}

.bur-profile__event-text,
.bur-profile__event-date {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #616161;
}

.bur-profile__event-text strong {
    color: #000;
}

.bur-profile__event-text a {
    color: #F6555C;
    text-decoration: none;
}

.bur-profile__event-date {
    margin-top: 4px;
}

/*----- POIN SAYA (live .my-points) -----*/
.bur-profile__points-title {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #616161;
    margin: 0 0 10px;
    letter-spacing: normal;
}

.bur-profile__points-title::before,
.bur-profile__points-title::after {
    display: none;
}

.bur-profile__points-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bur-profile__points-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5px;
}

.bur-profile__points-list li.is-highlight {
    background-color: rgba(241, 130, 73, 0.05);
}

.bur-profile__points-label {
    font-family: var(--font-body);
    font-size: 14px;
    color: #616161;
    text-transform: uppercase;
}

.bur-profile__points-value {
    font-family: var(--font-body);
    font-size: 14px;
    color: #616161;
    text-align: right;
}

/*----- Mobil (live ≤767: avatar 100 centrat, nume 25 centrat) -----*/
@media (max-width: 767px) {
    .bur-profile__cover {
        min-height: 0;
        padding: 60px 0;
    }

    .bur-profile__cover-row {
        flex-direction: column;
    }

    .bur-profile__avatar {
        flex-basis: auto;
        width: 100px;
        height: 100px;
    }

    .bur-profile__details {
        padding-left: 0;
        width: 100%;
        text-align: center;
    }

    .bur-profile__name {
        font-size: 25px;
        margin: 15px 0 10px;
    }

    .bur-profile__tab-link {
        font-size: 11px;
    }

    .bur-profile__points-label {
        padding-right: 10px;
    }
}

/*----------------------------------------------------------------*/
/*  MEMBERS (directorul /members — live "Daftar anggota")          */
/*----------------------------------------------------------------*/
/* Live: titlu Adrianna 54/600 #111; căutare 448x48 radius 10
   border #6E6C6C; taburi 12px (activ #F18344, ca la profil);
   grilă .col-lg-2/.col-4 (6 pe rând desktop, 3 pe mobil, padding
   0 15, mb 42), avatar 150px rotund bg cover mb 20, nume Adrianna
   14/600 #111 centrat, puncte Open Sans 12/500 #BDBDBD mt 4. */
.bur-members {
    padding: 60px 0 80px;
}

.bur-members__title {
    font-family: var(--font-display);
    font-size: 54px;
    font-weight: 600;
    color: #111;
    letter-spacing: normal;
    margin: 0 0 40px;
}

.bur-members__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
}

.bur-members__search {
    position: relative;
    width: 448px;
    max-width: 100%;
}

.bur-members__search-input {
    width: 100%;
    height: 48px;
    border: 1px solid #6E6C6C;
    border-radius: 10px;
    padding: 0 44px 0 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #111;
    background: #fff;
}

.bur-members__search-input::placeholder {
    color: #9e9e9e;
}

.bur-members__search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9e9e9e;
    pointer-events: none;
}

.bur-members__tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #dee2e6;
    flex: 1;
    max-width: 600px;
}

.bur-members__tabs li {
    flex: 1;
    text-align: center;
}

.bur-members__tab-link {
    display: block;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #616161;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
}

.bur-members__tab-link.is-active {
    color: #F18344;
    border-bottom-color: #F18344;
}

.bur-members__grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.bur-members__cell {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
    padding: 0 15px;
    margin-bottom: 42px;
}

.bur-members__cell.is-hidden {
    display: none;
}

.bur-members__card {
    display: block;
    text-decoration: none;
    text-align: center;
}

.bur-members__avatar {
    display: block;
    width: 150px;
    height: 150px;
    max-width: 100%;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #e0e0e0;
}

.bur-members__name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: #111;
    letter-spacing: normal;
    margin: 0;
}

.bur-members__points {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: #BDBDBD;
    margin: 4px 0 0;
}

.bur-members__empty {
    font-family: var(--font-body);
    font-size: 16px;
    color: #6e6c6c;
}

.bur-members__empty.is-hidden {
    display: none;
}

@media (max-width: 991px) {
    .bur-members__cell {
        flex-basis: 33.3333%;
        max-width: 33.3333%;
    }

    .bur-members__title {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    .bur-members__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .bur-members__tabs {
        max-width: none;
    }

    .bur-members__avatar {
        width: 100px;
        height: 100px;
    }
}

/*----- Editare profil propriu („Ubah profil") -----*/
/* Link în cover ca pe live (.timeline-cover .user-details a: alb,
   uppercase, subliniat, 16px); formular în stilul site-ului. */
.bur-profile__edit-toggle {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: underline;
}

.bur-profile__edit-toggle:hover {
    color: #fff;
}

.bur-profile__editbar {
    padding-top: 40px;
}

.bur-profile__editbar .bur-profile__col > .bur-profile__notice {
    margin: 0 0 20px;
}

.bur-profile__notice {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 10px;
}

.bur-profile__notice--ok {
    background: #e6f6ee;
    color: #1c7c4b;
    border: 1px solid #bce5d0;
}

.bur-profile__notice--err {
    background: #fdeaea;
    color: #b52f37;
    border: 1px solid #f5c6cb;
}

.bur-profile__edit {
    display: none;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 30px;
}

.bur-profile__edit.is-open {
    display: block;
}

.bur-profile__edit-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: #000;
    letter-spacing: normal;
    margin: 0 0 20px;
}

.bur-profile__edit-title::before,
.bur-profile__edit-title::after {
    display: none;
}

.bur-profile__edit-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 25px 0 15px;
}

.bur-profile__edit-subtitle span {
    font-weight: 400;
    color: #6e6c6c;
    font-size: 13px;
}

.bur-profile__field {
    display: block;
    margin-bottom: 15px;
}

.bur-profile__field span {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: #6e6c6c;
    margin-bottom: 5px;
}

.bur-profile__input {
    width: 100%;
    height: 44px;
    border: 1px solid #ced4da;
    border-radius: 10px;
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: #111;
    background: #fff;
}

.bur-profile__input--file {
    padding: 9px 14px;
    height: auto;
}

.bur-profile__save {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: #F8555C;
    border: 0;
    border-radius: 36px;
    padding: 12px 45px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

.bur-profile__save:hover {
    background: #1E8FE1;
}