/* ==========================================================
   RUANG BESTARI AUTH
   LOGIN DESKTOP V1
   CSS ONLY — no PHP modification
   ========================================================== */

@media (min-width: 901px) {

    /* ======================================================
       1. PAGE FOUNDATION
       ====================================================== */

    body.rb-auth-login {
        --rb-auth-orange: #ff751f;
        --rb-auth-orange-hover: #e96817;
        --rb-auth-ink: #23272a;
        --rb-auth-text: #4f575c;
        --rb-auth-muted: #747c81;
        --rb-auth-line: #dfe3e5;
        --rb-auth-bg: #f6f7f8;
        --rb-auth-cream: #fff7e9;
    }

    /*
     * Hide Kadence page title area:
     * "Login" besar di atas form.
     */
    body.rb-auth-login .entry-hero,
    body.rb-auth-login .entry-hero-container,
    body.rb-auth-login .page-header,
    body.rb-auth-login article.page > .entry-header {
        display: none !important;
    }

    body.rb-auth-login #inner-wrap {
        background: var(--rb-auth-bg);
    }

    body.rb-auth-login .content-area,
    body.rb-auth-login #primary,
    body.rb-auth-login #main.site-main,
    body.rb-auth-login .content-wrap,
    body.rb-auth-login article.page,
    body.rb-auth-login .entry-content-wrap {
        width: 100% !important;
        max-width: none !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.rb-auth-login .content-container.site-container {
        width: 100% !important;
        max-width: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================
       2. MAIN AUTH CARD
       ====================================================== */

    body.rb-auth-login .entry-content.single-content {
        position: relative;

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

        width: calc(100% - 80px);
        max-width: 1120px;
        min-height: 560px;

        margin: 58px auto 68px !important;
        padding: 58px 68px 58px calc(46% + 68px) !important;

        overflow: hidden;

        background:
            linear-gradient(
                90deg,
                var(--rb-auth-cream) 0%,
                var(--rb-auth-cream) 46%,
                #ffffff 46%,
                #ffffff 100%
            );

        border: 1px solid #e3e6e8;
        border-radius: 24px;

        box-shadow:
            0 18px 55px rgba(32, 38, 42, 0.07);

        box-sizing: border-box;
    }


    /* Divider kiri/kanan */

    body.rb-auth-login .entry-content.single-content::before {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh.";

        white-space: pre-line;

        position: absolute;
        z-index: 2;

        top: 134px;
        left: 58px;

        width: calc(46% - 110px);
        max-width: 390px;

        color: var(--rb-auth-ink);

        font-size: 39px;
        font-weight: 760;
        line-height: 1.10;
        letter-spacing: -0.035em;
    }


    /*
     * Branding dan deskripsi panel kiri.
     */

    body.rb-auth-login .entry-content.single-content::after {
        content:
            "RUANG BESTARI\A\A"
            "Masuk dan lanjutkan perjalanan literasimu bersama pembaca dan penulis dari berbagai penjuru Indonesia.";

        white-space: pre-line;

        position: absolute;
        z-index: 2;

        top: 73px;
        left: 58px;

        width: calc(46% - 110px);
        max-width: 390px;

        color: #786b5b;

        font-size: 13px;
        font-weight: 600;
        line-height: 1.72;
        letter-spacing: 0;
    }


    /*
     * Dekorasi lembut panel kiri.
     */

    body.rb-auth-login .entry-content.single-content {
        isolation: isolate;
    }

    body.rb-auth-login .entry-content.single-content > .um {
        position: relative;
        z-index: 5;
    }


    /* ======================================================
       3. LOGIN FORM WIDTH
       ====================================================== */

    body.rb-auth-login .um.um-login.um-14896 {
        width: 100% !important;
        max-width: 430px !important;

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

        opacity: 1 !important;
    }

    body.rb-auth-login .um-login .um-form {
        width: 100% !important;

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


    /* ======================================================
       4. FORM TITLE ABOVE UM FORM
       ====================================================== */

    body.rb-auth-login .um-login .um-form::before {
        content: "Selamat datang kembali.";

        display: block;

        margin: 0 0 8px;

        color: var(--rb-auth-ink);

        font-size: 31px;
        font-weight: 750;
        line-height: 1.15;
        letter-spacing: -0.025em;
    }

    body.rb-auth-login .um-login .um-form::after {
        content: "Masuk ke akun Ruang Bestari untuk melanjutkan.";

        display: block;

        margin-top: 20px;

        color: var(--rb-auth-muted);

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

        text-align: center;
    }


    /* ======================================================
       5. FORM ROW
       ====================================================== */

    body.rb-auth-login .um-login .um-row {
        margin: 30px 0 24px !important;
    }

    body.rb-auth-login .um-login .um-field {
        margin: 0 0 19px !important;
        padding: 0 !important;
    }


    /* ======================================================
       6. LABEL
       ====================================================== */

    body.rb-auth-login .um-login .um-field-label {
        margin: 0 0 8px !important;
    }

    body.rb-auth-login .um-login .um-field-label-icon {
        display: none !important;
    }

    body.rb-auth-login .um-login .um-field-label label {
        color: #363c40 !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }


    /* ======================================================
       7. INPUT
       ====================================================== */

    body.rb-auth-login
    .um-login
    .um-field-area
    input.um-form-field {
        display: block !important;

        width: 100% !important;
        height: 50px !important;

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

        color: #252a2e !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;

        background: #ffffff !important;

        border: 1px solid #d9dee1 !important;
        border-radius: 11px !important;

        outline: none !important;
        box-shadow: none !important;

        box-sizing: border-box !important;

        transition:
            border-color 160ms ease,
            box-shadow 160ms ease;
    }

    body.rb-auth-login
    .um-login
    .um-field-area
    input.um-form-field:hover {
        border-color: #c8ced2 !important;
    }

    body.rb-auth-login
    .um-login
    .um-field-area
    input.um-form-field:focus {
        border-color: rgba(255, 117, 31, 0.82) !important;

        box-shadow:
            0 0 0 4px rgba(255, 117, 31, 0.10) !important;
    }


    /* ======================================================
       8. CHECKBOX
       ====================================================== */

    body.rb-auth-login .um-login .um-col-alt {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.rb-auth-login .um-login .um-field-c {
        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    body.rb-auth-login
    .um-login
    .um-field-checkbox {
        margin: 0 !important;
    }

    body.rb-auth-login
    .um-login
    .um-field-checkbox-option {
        color: var(--rb-auth-muted) !important;

        font-size: 0 !important;
        font-weight: 500 !important;
    }

    body.rb-auth-login
    .um-login
    .um-field-checkbox-option::after {
        content: "Tetap masuk";

        font-size: 12.5px;
    }

    body.rb-auth-login
    .um-login
    .um-field-checkbox-state {
        color: #8a9297 !important;
    }


    /* ======================================================
       9. BUTTON ROW
       ====================================================== */

    body.rb-auth-login .um-login .um-left,
    body.rb-auth-login .um-login .um-right {
        float: none !important;

        width: auto !important;

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

    body.rb-auth-login .um-login .um-col-alt {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        row-gap: 0;
    }

    body.rb-auth-login .um-login .um-field-c,
    body.rb-auth-login .um-login .um-clear {
        grid-column: 1 / -1;
    }


    /* MASUK */

    body.rb-auth-login
    .um-login
    input[type="submit"].um-button {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        height: 48px !important;

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

        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1 !important;

        background: var(--rb-auth-orange) !important;

        border: 1px solid var(--rb-auth-orange) !important;
        border-radius: 11px !important;

        box-shadow: none !important;

        cursor: pointer;

        transition:
            background-color 160ms ease,
            border-color 160ms ease,
            transform 160ms ease;
    }

    body.rb-auth-login
    .um-login
    input[type="submit"].um-button:hover {
        background: var(--rb-auth-orange-hover) !important;
        border-color: var(--rb-auth-orange-hover) !important;

        transform: translateY(-1px);
    }


    /* DAFTAR */

    body.rb-auth-login
    .um-login
    a.um-button.um-alt {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        height: 48px !important;

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

        color: #41484d !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-decoration: none !important;

        background: #ffffff !important;

        border: 1px solid #d8dde0 !important;
        border-radius: 11px !important;

        box-shadow: none !important;

        transition:
            color 160ms ease,
            background-color 160ms ease,
            border-color 160ms ease,
            transform 160ms ease;
    }

    body.rb-auth-login
    .um-login
    a.um-button.um-alt:hover {
        color: var(--rb-auth-orange) !important;

        background: #fff9f5 !important;

        border-color: rgba(255, 117, 31, 0.50) !important;

        transform: translateY(-1px);
    }


    /* ======================================================
       10. FORGOT PASSWORD
       ====================================================== */

    body.rb-auth-login .um-login .um-col-alt-b {
        margin: 17px 0 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    body.rb-auth-login
    .um-login
    .um-link-alt {
        color: #697177 !important;

        font-size: 0 !important;
        font-weight: 600 !important;

        text-decoration: none !important;
    }

    body.rb-auth-login
    .um-login
    .um-link-alt::after {
        content: "Lupa kata sandi?";

        font-size: 12.5px;
    }

    body.rb-auth-login
    .um-login
    .um-link-alt:hover {
        color: var(--rb-auth-orange) !important;
    }


    /* ======================================================
       11. ERROR / VALIDATION
       ====================================================== */

    body.rb-auth-login .um-login .um-field-error {
        margin-top: 7px !important;

        color: #b84239 !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    body.rb-auth-login .um-login .um-notice {
        margin: 0 0 22px !important;

        border-radius: 10px !important;
    }


    /* ======================================================
       12. REMOVE UM INLINE MAX WIDTH
       ====================================================== */

    body.rb-auth-login .um-14896.um {
        max-width: 430px !important;
    }

}

/* END LOGIN DESKTOP V1 */


/* ==========================================================
   LOGIN DESKTOP — GRID LAYOUT FIX
   Fix UM form collapsing on right side
   ========================================================== */

@media (min-width: 901px) {

    /* ------------------------------------------------------
       SHELL
       ------------------------------------------------------ */

    body.rb-auth-login .entry-content.single-content {
        display: grid !important;
        grid-template-columns: 46% 54% !important;
        align-items: center !important;
        justify-content: initial !important;

        width: calc(100% - 80px) !important;
        max-width: 1120px !important;
        min-height: 560px !important;

        margin: 58px auto 68px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                90deg,
                #fff7e9 0%,
                #fff7e9 46%,
                #ffffff 46%,
                #ffffff 100%
            ) !important;

        border: 1px solid #e3e6e8 !important;
        border-radius: 24px !important;

        box-shadow:
            0 18px 55px rgba(32, 38, 42, 0.07) !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       LEFT CONTENT
       ------------------------------------------------------ */

    body.rb-auth-login .entry-content.single-content::before {
        top: 142px !important;
        left: 58px !important;

        width: calc(46% - 116px) !important;
        max-width: 390px !important;

        font-size: 39px !important;
        line-height: 1.09 !important;
    }

    body.rb-auth-login .entry-content.single-content::after {
        top: 72px !important;
        left: 58px !important;

        width: calc(46% - 116px) !important;
        max-width: 390px !important;
    }


    /* ------------------------------------------------------
       RIGHT FORM COLUMN
       ------------------------------------------------------ */

    body.rb-auth-login .entry-content.single-content > .um.um-login {
        grid-column: 2 !important;

        justify-self: center !important;
        align-self: center !important;

        display: block !important;

        width: calc(100% - 100px) !important;
        max-width: 430px !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;
    }

    body.rb-auth-login .um-login .um-form,
    body.rb-auth-login .um-login form {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       UM ROW/COLUMN RESET
       ------------------------------------------------------ */

    body.rb-auth-login .um-login .um-row,
    body.rb-auth-login .um-login .um-col-1,
    body.rb-auth-login .um-login .um-field,
    body.rb-auth-login .um-login .um-field-area {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-login .um-login .um-row {
        margin: 30px 0 24px !important;
    }


    /* ------------------------------------------------------
       INPUT SAFETY
       ------------------------------------------------------ */

    body.rb-auth-login .um-login input.um-form-field {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       BUTTON AREA
       ------------------------------------------------------ */

    body.rb-auth-login .um-login .um-col-alt {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 12px !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    body.rb-auth-login .um-login .um-field-c,
    body.rb-auth-login .um-login .um-col-alt > .um-clear {
        grid-column: 1 / -1 !important;
    }

    body.rb-auth-login .um-login .um-left,
    body.rb-auth-login .um-login .um-right,
    body.rb-auth-login .um-login .um-half {
        float: none !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

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

    body.rb-auth-login .um-login .um-button {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       PREVENT VERTICAL LETTER WRAPPING
       ------------------------------------------------------ */

    body.rb-auth-login .um-login,
    body.rb-auth-login .um-login *,
    body.rb-auth-login .um-login *::before,
    body.rb-auth-login .um-login *::after {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

}

/* END LOGIN DESKTOP — GRID LAYOUT FIX */


/* ==========================================================
   LOGIN DESKTOP — LEFT PANEL POLISH
   ========================================================== */

@media (min-width: 901px) {

    /* Label + deskripsi di atas */
    body.rb-auth-login .entry-content.single-content::after {
        top: 78px !important;
        left: 58px !important;

        width: calc(46% - 116px) !important;
        max-width: 390px !important;

        color: #756b5f !important;

        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    /* Judul utama: beri ruang setelah deskripsi */
    body.rb-auth-login .entry-content.single-content::before {
        top: 185px !important;
        left: 58px !important;

        width: calc(46% - 116px) !important;
        max-width: 390px !important;

        font-size: 38px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
    }

}

/* END LOGIN DESKTOP — LEFT PANEL POLISH */


/* ==========================================================
   LOGIN DESKTOP — ALIGN WITH HEADER CONTAINER
   ========================================================== */

@media (min-width: 901px) {

    body.rb-auth-login .entry-content.single-content {
        width: calc(100% - 96px) !important;
        max-width: 1240px !important;
    }

}

/* END LOGIN DESKTOP — ALIGN WITH HEADER CONTAINER */



/* ==========================================================
   RUANG BESTARI AUTH
   REGISTER DESKTOP V1
   ========================================================== */

@media (min-width: 901px) {

    /* ======================================================
       1. PAGE FOUNDATION
       ====================================================== */

    body.rb-auth-register {
        --rb-auth-orange: #ff751f;
        --rb-auth-orange-hover: #e96817;
        --rb-auth-ink: #23272a;
        --rb-auth-text: #4f575c;
        --rb-auth-muted: #747c81;
        --rb-auth-line: #dfe3e5;
        --rb-auth-bg: #f6f7f8;
        --rb-auth-cream: #fff7e9;
    }

    /* Hilangkan hero/page title bawaan Kadence */
    body.rb-auth-register .entry-hero,
    body.rb-auth-register .entry-hero-container,
    body.rb-auth-register .page-header,
    body.rb-auth-register article.page > .entry-header {
        display: none !important;
    }

    body.rb-auth-register #inner-wrap {
        background: var(--rb-auth-bg) !important;
    }

    body.rb-auth-register .content-area,
    body.rb-auth-register #primary,
    body.rb-auth-register #main.site-main,
    body.rb-auth-register .content-wrap,
    body.rb-auth-register article.page,
    body.rb-auth-register .entry-content-wrap {
        width: 100% !important;
        max-width: none !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.rb-auth-register .content-container.site-container {
        width: 100% !important;
        max-width: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================
       2. MAIN REGISTER CARD
       ====================================================== */

    body.rb-auth-register .entry-content.single-content {
        position: relative;

        display: grid !important;
        grid-template-columns: 46% 54% !important;
        align-items: center !important;

        width: calc(100% - 96px) !important;
        max-width: 1240px !important;
        min-height: 700px !important;

        margin: 48px auto 64px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                90deg,
                var(--rb-auth-cream) 0%,
                var(--rb-auth-cream) 46%,
                #ffffff 46%,
                #ffffff 100%
            ) !important;

        border: 1px solid #e3e6e8 !important;
        border-radius: 24px !important;

        box-shadow:
            0 18px 55px rgba(32, 38, 42, 0.07) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       3. LEFT BRAND PANEL
       ====================================================== */

    body.rb-auth-register .entry-content.single-content::after {
        content:
            "RUANG BESTARI\A\A"
            "Ruang untuk membaca, menulis, dan bertumbuh.";

        white-space: pre-line;

        position: absolute;
        z-index: 2;

        top: 78px;
        left: 58px;

        width: calc(46% - 116px);
        max-width: 390px;

        color: #756b5f;

        font-size: 13px;
        font-weight: 650;
        line-height: 1.65;
        letter-spacing: 0;
    }

    body.rb-auth-register .entry-content.single-content::before {
        content:
            "Mulai perjalanan\A"
            "literasimu bersama kami.";

        white-space: pre-line;

        position: absolute;
        z-index: 2;

        top: 185px;
        left: 58px;

        width: calc(46% - 116px);
        max-width: 410px;

        color: var(--rb-auth-ink);

        font-size: 38px;
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.035em;
    }


    /* ======================================================
       4. REGISTER FORM COLUMN
       ====================================================== */

    body.rb-auth-register
    .entry-content.single-content > .um.um-register {
        grid-column: 2 !important;

        justify-self: center !important;
        align-self: center !important;

        display: block !important;

        width: calc(100% - 100px) !important;
        max-width: 470px !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;
    }

    body.rb-auth-register .um-register::before {
        content: "Buat akun Ruang Bestari.";

        display: block;

        margin: 0 0 7px;

        color: var(--rb-auth-ink);

        font-size: 25px;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    body.rb-auth-register .um-register::after {
        content: "Isi data berikut untuk mulai bergabung.";

        display: block;

        margin: 0 0 27px;

        color: var(--rb-auth-muted);

        font-size: 13px;
        font-weight: 500;
        line-height: 1.55;
    }

    body.rb-auth-register .um-register .um-form,
    body.rb-auth-register .um-register form {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;
    }


    /* ======================================================
       5. UM STRUCTURE RESET
       ====================================================== */

    body.rb-auth-register .um-register .um-row {
        width: 100% !important;

        margin: 0 0 22px !important;
        padding: 0 !important;
    }

    body.rb-auth-register .um-register .um-col-1 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 12px !important;
        row-gap: 16px !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;
    }

    body.rb-auth-register .um-register .um-field {
        grid-column: 1 / -1;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;
    }

    /* Nama depan + belakang berdampingan di desktop */
    body.rb-auth-register .um-register .um-field-first_name {
        grid-column: 1;
    }

    body.rb-auth-register .um-register .um-field-last_name {
        grid-column: 2;
    }

    body.rb-auth-register .um-register .um-field-area {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       6. LABEL
       ====================================================== */

    body.rb-auth-register .um-register .um-field-label {
        margin: 0 0 7px !important;
        padding: 0 !important;
    }

    body.rb-auth-register .um-register .um-field-label label {
        display: block !important;

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

        color: #41484d !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }

    /* Hilangkan ikon pada label bawaan UM */
    body.rb-auth-register .um-register .um-field-label label > i {
        display: none !important;
    }


    /* ======================================================
       7. INPUT
       ====================================================== */

    body.rb-auth-register .um-register input.um-form-field,
    body.rb-auth-register .um-register input[type="text"],
    body.rb-auth-register .um-register input[type="email"],
    body.rb-auth-register .um-register input[type="password"] {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 48px !important;

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

        color: #343a3e !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 48px !important;

        background: #ffffff !important;

        border: 1px solid #d8dde0 !important;
        border-radius: 11px !important;

        box-shadow: none !important;
        outline: none !important;

        box-sizing: border-box !important;

        transition:
            border-color 160ms ease,
            box-shadow 160ms ease,
            background-color 160ms ease;
    }

    body.rb-auth-register .um-register input.um-form-field:focus,
    body.rb-auth-register .um-register input[type="text"]:focus,
    body.rb-auth-register .um-register input[type="email"]:focus,
    body.rb-auth-register .um-register input[type="password"]:focus {
        background: #ffffff !important;

        border-color: rgba(255, 117, 31, 0.72) !important;

        box-shadow:
            0 0 0 3px rgba(255, 117, 31, 0.10) !important;
    }


    /* ======================================================
       8. BUTTON AREA
       ====================================================== */

    body.rb-auth-register .um-register .um-col-alt {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 12px !important;

        width: 100% !important;

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

    body.rb-auth-register .um-register .um-left,
    body.rb-auth-register .um-register .um-right,
    body.rb-auth-register .um-register .um-half {
        float: none !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

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

    body.rb-auth-register
    .um-register
    input[type="submit"].um-button {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        height: 48px !important;

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

        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1 !important;

        background: var(--rb-auth-orange) !important;

        border: 1px solid var(--rb-auth-orange) !important;
        border-radius: 11px !important;

        box-shadow: none !important;

        cursor: pointer;

        transition:
            background-color 160ms ease,
            border-color 160ms ease,
            transform 160ms ease;
    }

    body.rb-auth-register
    .um-register
    input[type="submit"].um-button:hover {
        background: var(--rb-auth-orange-hover) !important;
        border-color: var(--rb-auth-orange-hover) !important;

        transform: translateY(-1px);
    }

    body.rb-auth-register
    .um-register
    a.um-button.um-alt {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        height: 48px !important;

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

        color: #41484d !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-decoration: none !important;

        background: #ffffff !important;

        border: 1px solid #d8dde0 !important;
        border-radius: 11px !important;

        box-shadow: none !important;
    }


    /* ======================================================
       9. VALIDATION / SAFETY
       ====================================================== */

    body.rb-auth-register .um-register .um-field-error {
        margin-top: 7px !important;

        color: #b84239 !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    body.rb-auth-register .um-register,
    body.rb-auth-register .um-register *,
    body.rb-auth-register .um-register *::before,
    body.rb-auth-register .um-register *::after {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

}

/* END REGISTER DESKTOP V1 */


/* ==========================================================
   RUANG BESTARI AUTH
   LOGIN — MOBILE V1
   Desktop styles remain untouched.
   ========================================================== */

@media (max-width: 900px) {

    body.rb-auth-login {
        --rb-auth-orange: #ff751f;
        --rb-auth-orange-hover: #e96817;
        --rb-auth-ink: #23272a;
        --rb-auth-text: #4f575c;
        --rb-auth-muted: #747c81;
        --rb-auth-line: #dfe3e5;
        --rb-auth-bg: #f6f7f8;
        --rb-auth-cream: #fff7e9;
    }


    /* ======================================================
       1. KADENCE / PAGE RESET
       ====================================================== */

    body.rb-auth-login .entry-hero,
    body.rb-auth-login .entry-hero-container,
    body.rb-auth-login .page-header,
    body.rb-auth-login article.page > .entry-header {
        display: none !important;
    }

    body.rb-auth-login #inner-wrap {
        background: var(--rb-auth-bg) !important;
    }

    body.rb-auth-login .content-area,
    body.rb-auth-login #primary,
    body.rb-auth-login #main.site-main,
    body.rb-auth-login .content-wrap,
    body.rb-auth-login article.page,
    body.rb-auth-login .entry-content-wrap {
        width: 100% !important;
        max-width: none !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.rb-auth-login .content-container.site-container {
        width: 100% !important;
        max-width: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================
       2. MOBILE AUTH CARD
       ====================================================== */

    body.rb-auth-login .entry-content.single-content {
        display: flex !important;
        flex-direction: column !important;

        width: calc(100% - 40px) !important;
        max-width: 520px !important;

        min-height: 0 !important;

        margin: 24px auto 36px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #e3e6e8 !important;
        border-radius: 20px !important;

        box-shadow:
            0 12px 35px rgba(32, 38, 42, 0.06) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       3. CREAM INTRO — BAGIAN ATAS
       ====================================================== */

    body.rb-auth-login .entry-content.single-content::before {
        content:
            "RUANG BESTARI\A\A"
            "Masuk dan lanjutkan perjalanan literasimu bersama pembaca dan penulis dari berbagai penjuru Indonesia.";

        order: 1;

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 24px 22px 8px !important;

        white-space: pre-line;

        color: #756b5f !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-login .entry-content.single-content::after {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh.";

        order: 2;

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 8px 22px 24px !important;

        white-space: pre-line;

        color: var(--rb-auth-ink) !important;

        font-size: clamp(26px, 7.2vw, 32px) !important;
        font-weight: 760 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       4. UM FORM WRAPPER
       ====================================================== */

    body.rb-auth-login
    .entry-content.single-content > .um.um-login {
        order: 3;

        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 25px 20px 23px !important;

        opacity: 1 !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-login .um-login .um-form,
    body.rb-auth-login .um-login form,
    body.rb-auth-login .um-login .um-row,
    body.rb-auth-login .um-login .um-col-1,
    body.rb-auth-login .um-login .um-field,
    body.rb-auth-login .um-login .um-field-area {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       5. FORM HEADING
       ====================================================== */

    body.rb-auth-login .um-login .um-form::before {
        content: "Selamat datang kembali.";

        display: block !important;

        margin: 0 0 7px !important;

        color: var(--rb-auth-ink) !important;

        font-size: 24px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
    }

    body.rb-auth-login .um-login .um-form::after {
        content: "Masuk ke akun Ruang Bestari untuk melanjutkan.";

        display: block !important;

        margin: 20px 0 0 !important;

        color: var(--rb-auth-muted) !important;

        font-size: 11.5px !important;
        line-height: 1.5 !important;

        text-align: center !important;
    }


    /* ======================================================
       6. FORM SPACING
       ====================================================== */

    body.rb-auth-login .um-login .um-row {
        margin: 24px 0 20px !important;
    }

    body.rb-auth-login .um-login .um-field {
        margin: 0 0 17px !important;
        padding: 0 !important;
    }


    /* ======================================================
       7. LABELS
       ====================================================== */

    body.rb-auth-login .um-login .um-field-label {
        margin: 0 0 7px !important;
    }

    body.rb-auth-login .um-login .um-field-label-icon {
        display: none !important;
    }

    body.rb-auth-login .um-login .um-field-label label {
        color: #363c40 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }


    /* ======================================================
       8. INPUTS
       ====================================================== */

    body.rb-auth-login
    .um-login
    input.um-form-field {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 49px !important;

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

        color: #252a2e !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;

        background: #ffffff !important;

        border: 1px solid #d9dee1 !important;
        border-radius: 11px !important;

        outline: none !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-login
    .um-login
    input.um-form-field:focus {
        border-color: rgba(255, 117, 31, 0.82) !important;

        box-shadow:
            0 0 0 4px rgba(255, 117, 31, 0.10) !important;
    }


    /* ======================================================
       9. CHECKBOX
       ====================================================== */

    body.rb-auth-login .um-login .um-field-c {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body.rb-auth-login .um-login .um-field-checkbox {
        margin: 0 !important;
    }

    body.rb-auth-login
    .um-login
    .um-field-checkbox-option {
        color: var(--rb-auth-muted) !important;

        font-size: 0 !important;
        font-weight: 500 !important;
    }

    body.rb-auth-login
    .um-login
    .um-field-checkbox-option::after {
        content: "Tetap masuk";

        font-size: 12.5px !important;
    }


    /* ======================================================
       10. BUTTON AREA — STACKED
       ====================================================== */

    body.rb-auth-login .um-login .um-col-alt {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;

        width: 100% !important;

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

    body.rb-auth-login .um-login .um-field-c,
    body.rb-auth-login .um-login .um-col-alt > .um-clear {
        grid-column: 1 !important;
    }

    body.rb-auth-login .um-login .um-left,
    body.rb-auth-login .um-login .um-right,
    body.rb-auth-login .um-login .um-half {
        float: none !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

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


    /* MASUK */

    body.rb-auth-login
    .um-login
    input[type="submit"].um-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

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

        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 750 !important;

        background: var(--rb-auth-orange) !important;

        border: 1px solid var(--rb-auth-orange) !important;
        border-radius: 11px !important;

        box-shadow: none !important;
    }


    /* DAFTAR */

    body.rb-auth-login
    .um-login
    a.um-button.um-alt {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

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

        color: #41484d !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;

        text-decoration: none !important;

        background: #ffffff !important;

        border: 1px solid #d8dde0 !important;
        border-radius: 11px !important;

        box-shadow: none !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       11. FORGOT PASSWORD
       ====================================================== */

    body.rb-auth-login .um-login .um-col-alt-b {
        margin: 16px 0 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }

    body.rb-auth-login .um-login .um-link-alt {
        color: #697177 !important;

        font-size: 0 !important;
        font-weight: 600 !important;

        text-decoration: none !important;
    }

    body.rb-auth-login .um-login .um-link-alt::after {
        content: "Lupa kata sandi?";

        font-size: 12.5px !important;
    }


    /* ======================================================
       12. VALIDATION
       ====================================================== */

    body.rb-auth-login .um-login .um-field-error {
        margin-top: 7px !important;

        color: #b84239 !important;

        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    body.rb-auth-login .um-login .um-notice {
        margin: 0 0 18px !important;

        border-radius: 10px !important;
    }


    /* Prevent accidental narrow wrapping from UM */
    body.rb-auth-login .um-login,
    body.rb-auth-login .um-login * {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

}

/* END LOGIN MOBILE V1 */

/* ==========================================================
   RB LOGIN MOBILE — HERO TITLE 2 LINES
   ========================================================== */
@media (max-width: 767px) {
    body.rb-auth-login .entry-content.single-content::before {
        font-size: 25px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
    }
}

/* ==========================================================
   RB AUTH — MOBILE TYPOGRAPHY FINAL
   Tagline 2 baris, branding tetap kecil.
   ========================================================== */
@media (max-width: 767px) {

    /* RUANG BESTARI + deskripsi */
    body.rb-auth-login
    .entry-content.single-content::after {
        font-size: 13px !important;
        line-height: 1.48 !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    /* "Ruang untuk membaca, menulis, dan bertumbuh." */
    body.rb-auth-login
    .entry-content.single-content::before {
        font-size: 23px !important;
        line-height: 1.12 !important;
        font-weight: 750 !important;
        letter-spacing: -0.025em !important;
    }

}

/* ==========================================================
   REGISTER DESKTOP — POLISH 1
   ========================================================== */

@media (min-width: 901px) {

    /* Card sedikit lebih proporsional */
    body.rb-auth-register .entry-content.single-content {
        min-height: 660px !important;
    }

    body.rb-auth-register
    .entry-content.single-content > .um.um-register {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }


    /* ------------------------------------------------------
       FORM INTRO
       ------------------------------------------------------ */

    /* Heading tetap berada di atas form */
    body.rb-auth-register .um-register::before {
        margin-bottom: 6px !important;
    }

    /* Subtitle lama berada setelah seluruh form: matikan */
    body.rb-auth-register .um-register::after {
        content: none !important;
        display: none !important;
    }

    /* Subtitle baru tepat di bawah heading */
    body.rb-auth-register .um-register .um-form::before {
        content: "Isi data berikut untuk mulai bergabung.";

        display: block !important;

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

        color: var(--rb-auth-muted) !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;
    }


    /* ------------------------------------------------------
       REMOVE ULTIMATE MEMBER LABEL ICONS
       ------------------------------------------------------ */

    body.rb-auth-register
    .um-register
    .um-field-label-icon {
        display: none !important;
    }

    body.rb-auth-register
    .um-register
    .um-field-label {
        display: block !important;
    }


    /* ------------------------------------------------------
       REGISTER BUTTON — FULL WIDTH
       ------------------------------------------------------ */

    body.rb-auth-register
    .um-register
    .um-col-alt {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;

        width: 100% !important;
    }

    body.rb-auth-register
    .um-register
    .um-col-alt .um-left,
    body.rb-auth-register
    .um-register
    .um-col-alt .um-right,
    body.rb-auth-register
    .um-register
    .um-col-alt .um-half {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: none !important;

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

    body.rb-auth-register
    .um-register
    input[type="submit"].um-button {
        width: 100% !important;
        max-width: none !important;
    }

}

/* END REGISTER DESKTOP — POLISH 1 */

/* ==========================================================
   REGISTER DESKTOP — FINAL POLISH
   ========================================================== */

@media (min-width: 901px) {

    /* Sedikit seimbangkan posisi konten panel kiri */
    body.rb-auth-register
    .entry-content.single-content::after {
        top: 92px !important;
    }

    body.rb-auth-register
    .entry-content.single-content::before {
        top: 199px !important;
    }


    /* ------------------------------------------------------
       LOGIN PATH
       ------------------------------------------------------ */

    body.rb-auth-register
    .um-register
    .rb-register-login {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        width: 100% !important;

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

        color: #747c81 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;

        text-align: center !important;
    }

    body.rb-auth-register
    .um-register
    .rb-register-login span {
        color: #747c81 !important;
    }

    body.rb-auth-register
    .um-register
    .rb-register-login a {
        color: var(--rb-auth-orange) !important;

        font-weight: 700 !important;

        text-decoration: none !important;

        transition: color 160ms ease;
    }

    body.rb-auth-register
    .um-register
    .rb-register-login a:hover {
        color: var(--rb-auth-orange-hover) !important;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }

}

/* END REGISTER DESKTOP — FINAL POLISH */

/* ==========================================================
   REGISTER DESKTOP — FINAL TUNING
   ========================================================== */

@media (min-width: 901px) {

    /* ------------------------------------------------------
       LEFT PANEL — TIGHTER CONTENT GROUP
       ------------------------------------------------------ */

    body.rb-auth-register
    .entry-content.single-content::after {
        top: 92px !important;
    }

    body.rb-auth-register
    .entry-content.single-content::before {
        top: 187px !important;
    }


    /* ------------------------------------------------------
       LOGIN PATH — SLIGHTLY STRONGER READABILITY
       ------------------------------------------------------ */

    body.rb-auth-register
    .um-register
    .rb-register-login,
    body.rb-auth-register
    .um-register
    .rb-register-login span {
        color: #687078 !important;
    }

}

/* END REGISTER DESKTOP — FINAL TUNING */

/* ==========================================================
   RUANG BESTARI AUTH
   REGISTER — MOBILE V1
   Desktop remains untouched.
   ========================================================== */

@media (max-width: 900px) {

    body.rb-auth-register {
        --rb-auth-orange: #ff751f;
        --rb-auth-orange-hover: #e96817;
        --rb-auth-ink: #23272a;
        --rb-auth-text: #4f575c;
        --rb-auth-muted: #747c81;
        --rb-auth-line: #dfe3e5;
        --rb-auth-bg: #f6f7f8;
        --rb-auth-cream: #fff7e9;
    }


    /* ======================================================
       1. KADENCE / PAGE RESET
       ====================================================== */

    body.rb-auth-register .entry-hero,
    body.rb-auth-register .entry-hero-container,
    body.rb-auth-register .page-header,
    body.rb-auth-register article.page > .entry-header {
        display: none !important;
    }

    body.rb-auth-register #inner-wrap {
        background: var(--rb-auth-bg) !important;
    }

    body.rb-auth-register .content-area,
    body.rb-auth-register #primary,
    body.rb-auth-register #main.site-main,
    body.rb-auth-register .content-wrap,
    body.rb-auth-register article.page,
    body.rb-auth-register .entry-content-wrap {
        width: 100% !important;
        max-width: none !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.rb-auth-register .content-container.site-container {
        width: 100% !important;
        max-width: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================
       2. MOBILE REGISTER CARD
       ====================================================== */

    body.rb-auth-register .entry-content.single-content {
        display: flex !important;
        flex-direction: column !important;

        width: calc(100% - 40px) !important;
        max-width: 520px !important;
        min-height: 0 !important;

        margin: 24px auto 36px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #e3e6e8 !important;
        border-radius: 20px !important;

        box-shadow:
            0 12px 35px rgba(32, 38, 42, 0.06) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       3. CREAM INTRO
       ====================================================== */

    body.rb-auth-register .entry-content.single-content::before {
        content:
            "RUANG BESTARI\A\A"
            "Mulai perjalanan literasimu bersama pembaca dan penulis dari berbagai penjuru Indonesia.";

        order: 1;

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 24px 22px 8px !important;

        white-space: pre-line;

        color: #756b5f !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-register .entry-content.single-content::after {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh.";

        order: 2;

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 8px 22px 24px !important;

        white-space: pre-line;

        color: var(--rb-auth-ink) !important;

        font-size: 23px !important;
        font-weight: 750 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       4. UM FORM WRAPPER
       ====================================================== */

    body.rb-auth-register
    .entry-content.single-content > .um.um-register {
        order: 3;

        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 25px 20px 23px !important;

        opacity: 1 !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-register .um-register .um-form,
    body.rb-auth-register .um-register form,
    body.rb-auth-register .um-register .um-row,
    body.rb-auth-register .um-register .um-col-1,
    body.rb-auth-register .um-register .um-field,
    body.rb-auth-register .um-register .um-field-area {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       5. FORM HEADING
       ====================================================== */

    body.rb-auth-register .um-register::before {
        content: "Buat akun Ruang Bestari.";

        display: block !important;

        margin: 0 0 6px !important;

        color: var(--rb-auth-ink) !important;

        font-size: 24px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
    }

    body.rb-auth-register .um-register::after {
        content: none !important;
        display: none !important;
    }

    body.rb-auth-register .um-register .um-form::before {
        content: "Isi data berikut untuk mulai bergabung.";

        display: block !important;

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

        color: var(--rb-auth-muted) !important;

        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }


    /* ======================================================
       6. FORM SPACING
       ====================================================== */

    body.rb-auth-register .um-register .um-row {
        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    body.rb-auth-register .um-register .um-col-1 {
        display: block !important;
    }

    body.rb-auth-register .um-register .um-field,
    body.rb-auth-register .um-register .um-field-first_name,
    body.rb-auth-register .um-register .um-field-last_name {
        display: block !important;

        width: 100% !important;

        margin: 0 0 17px !important;
        padding: 0 !important;
    }


    /* ======================================================
       7. LABELS
       ====================================================== */

    body.rb-auth-register .um-register .um-field-label {
        display: block !important;

        margin: 0 0 7px !important;
        padding: 0 !important;
    }

    body.rb-auth-register .um-register .um-field-label-icon {
        display: none !important;
    }

    body.rb-auth-register .um-register .um-field-label label {
        display: block !important;

        color: #363c40 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }


    /* ======================================================
       8. INPUTS
       ====================================================== */

    body.rb-auth-register
    .um-register
    input.um-form-field {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 49px !important;

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

        color: #252a2e !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;

        background: #ffffff !important;

        border: 1px solid #d9dee1 !important;
        border-radius: 11px !important;

        outline: none !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-register
    .um-register
    input.um-form-field:focus {
        border-color: rgba(255, 117, 31, 0.82) !important;

        box-shadow:
            0 0 0 4px rgba(255, 117, 31, 0.10) !important;
    }


    /* ======================================================
       9. BUTTON
       ====================================================== */

    body.rb-auth-register .um-register .um-col-alt {
        display: block !important;

        width: 100% !important;

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

    body.rb-auth-register .um-register .um-center,
    body.rb-auth-register .um-register .um-left,
    body.rb-auth-register .um-register .um-right,
    body.rb-auth-register .um-register .um-half {
        float: none !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

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

    body.rb-auth-register
    .um-register
    input[type="submit"].um-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;
        height: 48px !important;

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

        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 750 !important;

        background: var(--rb-auth-orange) !important;

        border: 1px solid var(--rb-auth-orange) !important;
        border-radius: 11px !important;

        box-shadow: none !important;
    }


    /* ======================================================
       10. LOGIN PATH
       ====================================================== */

    body.rb-auth-register
    .um-register
    .rb-register-login {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        width: 100% !important;

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

        color: #687078 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;

        text-align: center !important;
    }

    body.rb-auth-register
    .um-register
    .rb-register-login span {
        color: #687078 !important;
    }

    body.rb-auth-register
    .um-register
    .rb-register-login a {
        color: var(--rb-auth-orange) !important;

        font-weight: 700 !important;

        text-decoration: none !important;
    }


    /* ======================================================
       11. VALIDATION
       ====================================================== */

    body.rb-auth-register .um-register .um-field-error {
        margin-top: 7px !important;

        color: #b84239 !important;

        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    body.rb-auth-register .um-register .um-notice {
        margin: 0 0 18px !important;

        border-radius: 10px !important;
    }

    body.rb-auth-register .um-register,
    body.rb-auth-register .um-register * {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

}

/* END REGISTER MOBILE V1 */

/* ==========================================================
   LOGIN MOBILE — MATCH REGISTER HERO
   Register mobile becomes the visual reference.
   Desktop remains untouched.
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Bagian atas:
     * RUANG BESTARI + kalimat pengantar kecil
     */
    body.rb-auth-login
    .entry-content.single-content::before {
        content:
            "RUANG BESTARI\A\A"
            "Masuk dan lanjutkan perjalanan literasimu bersama pembaca dan penulis dari berbagai penjuru Indonesia." !important;

        order: 1 !important;

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 24px 22px 8px !important;

        white-space: pre-line !important;

        color: #756b5f !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }


    /*
     * Tagline utama mengikuti Register mobile
     */
    body.rb-auth-login
    .entry-content.single-content::after {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh." !important;

        order: 2 !important;

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 8px 22px 24px !important;

        white-space: pre-line !important;

        color: var(--rb-auth-ink) !important;

        font-size: 23px !important;
        font-weight: 750 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }

}

/* END LOGIN MOBILE — MATCH REGISTER HERO */

/* ==========================================================
   AUTH DESKTOP — COPY SYNC
   Login & Register follow their mobile copy.
   ========================================================== */

@media (min-width: 901px) {

    /* ======================================================
       LOGIN
       ====================================================== */

    body.rb-auth-login
    .entry-content.single-content::after {
        content:
            "RUANG BESTARI\A\A"
            "Masuk dan lanjutkan perjalanan literasimu bersama pembaca dan penulis dari berbagai penjuru Indonesia." !important;
    }

    body.rb-auth-login
    .entry-content.single-content::before {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh." !important;
    }


    /* ======================================================
       REGISTER
       ====================================================== */

    body.rb-auth-register
    .entry-content.single-content::after {
        content:
            "RUANG BESTARI\A\A"
            "Mulai perjalanan literasimu bersama pembaca dan penulis dari berbagai penjuru Indonesia." !important;
    }

    body.rb-auth-register
    .entry-content.single-content::before {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh." !important;
    }

}

/* END AUTH DESKTOP — COPY SYNC */

/* ==========================================================
   AUTH — EXACT HOMEPAGE VERTICAL SPACING
   Homepage:
   > 767px : 32px top / 64px bottom
   <=767px : 24px top / 48px bottom
   ========================================================== */

/* Desktop + tablet */
@media (min-width: 768px) {

    body.rb-auth-login .entry-content.single-content,
    body.rb-auth-register .entry-content.single-content {
        margin-top: 32px !important;
        margin-bottom: 64px !important;
    }

}

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

    body.rb-auth-login .entry-content.single-content,
    body.rb-auth-register .entry-content.single-content {
        margin-top: 24px !important;
        margin-bottom: 48px !important;
    }

}

/* END AUTH — EXACT HOMEPAGE VERTICAL SPACING */

/* ==========================================================
   RUANG BESTARI AUTH
   PASSWORD RESET — DESKTOP V1
   ========================================================== */

@media (min-width: 901px) {

    body.rb-auth-password-reset {
        --rb-auth-orange: #ff751f;
        --rb-auth-orange-hover: #e96817;
        --rb-auth-ink: #23272a;
        --rb-auth-text: #4f575c;
        --rb-auth-muted: #747c81;
        --rb-auth-line: #dfe3e5;
        --rb-auth-bg: #f6f7f8;
        --rb-auth-cream: #fff7e9;
    }


    /* ======================================================
       1. PAGE RESET
       ====================================================== */

    body.rb-auth-password-reset .entry-hero,
    body.rb-auth-password-reset .entry-hero-container,
    body.rb-auth-password-reset .page-header,
    body.rb-auth-password-reset article.page > .entry-header {
        display: none !important;
    }

    body.rb-auth-password-reset #inner-wrap {
        background: var(--rb-auth-bg) !important;
    }

    body.rb-auth-password-reset .content-area,
    body.rb-auth-password-reset #primary,
    body.rb-auth-password-reset #main.site-main,
    body.rb-auth-password-reset .content-wrap,
    body.rb-auth-password-reset article.page,
    body.rb-auth-password-reset .entry-content-wrap {
        width: 100% !important;
        max-width: none !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.rb-auth-password-reset .content-container.site-container {
        width: 100% !important;
        max-width: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================
       2. AUTH CARD
       Homepage vertical rhythm: 32px / 64px
       ====================================================== */

    body.rb-auth-password-reset .entry-content.single-content {
        position: relative;

        display: grid !important;
        grid-template-columns: 46% 54% !important;
        align-items: center !important;

        width: calc(100% - 96px) !important;
        max-width: 1240px !important;
        min-height: 520px !important;

        margin: 32px auto 64px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                90deg,
                var(--rb-auth-cream) 0%,
                var(--rb-auth-cream) 46%,
                #ffffff 46%,
                #ffffff 100%
            ) !important;

        border: 1px solid #e3e6e8 !important;
        border-radius: 24px !important;

        box-shadow:
            0 18px 55px rgba(32, 38, 42, 0.07) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       3. LEFT BRAND PANEL
       ====================================================== */

    body.rb-auth-password-reset
    .entry-content.single-content::after {
        content:
            "RUANG BESTARI\A\A"
            "Pulihkan akses akunmu agar perjalanan literasimu tetap berlanjut bersama pembaca dan penulis dari berbagai penjuru Indonesia.";

        white-space: pre-line;

        position: absolute;
        z-index: 2;

        top: 82px;
        left: 58px;

        width: calc(46% - 116px);
        max-width: 390px;

        color: #756b5f !important;

        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.65 !important;
    }

    body.rb-auth-password-reset
    .entry-content.single-content::before {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh.";

        white-space: pre-line;

        position: absolute;
        z-index: 2;

        top: 210px;
        left: 58px;

        width: calc(46% - 116px);
        max-width: 410px;

        color: var(--rb-auth-ink) !important;

        font-size: 38px !important;
        font-weight: 800 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
    }


    /* ======================================================
       4. PASSWORD FORM COLUMN
       ====================================================== */

    body.rb-auth-password-reset
    .entry-content.single-content > .um.um-password {
        grid-column: 2 !important;

        justify-self: center !important;
        align-self: center !important;

        display: block !important;

        width: calc(100% - 100px) !important;
        max-width: 430px !important;
        min-width: 0 !important;

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

        box-sizing: border-box !important;
    }


    /* Heading */
    body.rb-auth-password-reset
    .um-password::before {
        content: "Lupa kata sandi?";

        display: block !important;

        margin: 0 0 7px !important;

        color: var(--rb-auth-ink) !important;

        font-family: inherit !important;
        font-size: 25px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.025em !important;
    }


    /* Subtitle */
    body.rb-auth-password-reset
    .um-password
    .um-form::before {
        content:
            "Masukkan nama pengguna atau alamat surel yang terhubung dengan akunmu.";

        display: block !important;

        margin: 0 0 27px !important;

        color: var(--rb-auth-muted) !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;
    }


    body.rb-auth-password-reset .um-password .um-form,
    body.rb-auth-password-reset .um-password form {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

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

        box-sizing: border-box !important;
    }


    /* ======================================================
       5. HIDE OLD UM DESCRIPTION
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-field-block {
        display: none !important;
    }


    /* ======================================================
       6. INPUT LABEL
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-field-username_b::before {
        content: "Nama Pengguna atau Alamat Surel";

        display: block !important;

        margin: 0 0 7px !important;

        color: #41484d !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }

    body.rb-auth-password-reset
    .um-password
    .um-field-username_b {
        width: 100% !important;

        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    body.rb-auth-password-reset
    .um-password
    .um-field-area {
        width: 100% !important;
    }


    /* ======================================================
       7. INPUT
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    input.um-form-field {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        height: 48px !important;

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

        color: #343a3e !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;

        background: #ffffff !important;

        border: 1px solid #d8dde0 !important;
        border-radius: 11px !important;

        outline: none !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-password-reset
    .um-password
    input.um-form-field:focus {
        border-color: rgba(255, 117, 31, 0.72) !important;

        box-shadow:
            0 0 0 3px rgba(255, 117, 31, 0.10) !important;
    }


    /* ======================================================
       8. BUTTON
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-col-alt {
        width: 100% !important;

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

    body.rb-auth-password-reset
    .um-password
    .um-center {
        display: block !important;

        width: 100% !important;

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

    body.rb-auth-password-reset
    .um-password
    input[type="submit"].um-button {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        height: 48px !important;

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

        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 750 !important;

        background: var(--rb-auth-orange) !important;

        border: 1px solid var(--rb-auth-orange) !important;
        border-radius: 11px !important;

        box-shadow: none !important;

        cursor: pointer !important;
    }

    body.rb-auth-password-reset
    .um-password
    input[type="submit"].um-button:hover {
        background: var(--rb-auth-orange-hover) !important;
        border-color: var(--rb-auth-orange-hover) !important;
    }


    /* ======================================================
       9. LOGIN PATH
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .rb-password-login {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        width: 100% !important;

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

        color: #687078 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }

    body.rb-auth-password-reset
    .um-password
    .rb-password-login a {
        color: var(--rb-auth-orange) !important;

        font-weight: 700 !important;

        text-decoration: none !important;
    }

    body.rb-auth-password-reset
    .um-password
    .rb-password-login a:hover {
        color: var(--rb-auth-orange-hover) !important;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }


    /* ======================================================
       10. VALIDATION
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-field-error {
        margin-top: 7px !important;

        color: #b84239 !important;

        font-size: 12px !important;
        line-height: 1.45 !important;
    }

}

/* END PASSWORD RESET DESKTOP V1 */

/* ==========================================================
   PASSWORD RESET DESKTOP — FINAL TUNING
   ========================================================== */

@media (min-width: 901px) {

    /* Lebih ringkas karena form reset hanya satu field */
    body.rb-auth-password-reset
    .entry-content.single-content {
        min-height: 480px !important;
    }

    /* Sedikit rapikan kelompok konten kiri */
    body.rb-auth-password-reset
    .entry-content.single-content::after {
        top: 76px !important;
    }

    body.rb-auth-password-reset
    .entry-content.single-content::before {
        top: 190px !important;
    }

    /* Form kanan tetap terasa ringan */
    body.rb-auth-password-reset
    .um-password
    .um-form::before {
        margin-bottom: 24px !important;
    }

}

/* END PASSWORD RESET DESKTOP — FINAL TUNING */

/* ==========================================================
   AUTH — HOMEPAGE GEOMETRY FINAL

   Homepage:
   >=1200px
   container 1280px - 24px - 24px = 1232px content line

   901–1199px
   homepage horizontal gutter = 20px

   Vertical:
   32px top / 64px bottom
   ========================================================== */


/* Desktop lebar — persis inner line homepage */
@media (min-width: 1200px) {

    body.rb-auth-login .entry-content.single-content,
    body.rb-auth-register .entry-content.single-content,
    body.rb-auth-password-reset .entry-content.single-content {
        width: calc(100% - 48px) !important;
        max-width: 1232px !important;

        margin-top: 32px !important;
        margin-right: auto !important;
        margin-bottom: 64px !important;
        margin-left: auto !important;
    }

}


/* Desktop/tablet — homepage memakai gutter 20px */
@media (min-width: 901px) and (max-width: 1199px) {

    body.rb-auth-login .entry-content.single-content,
    body.rb-auth-register .entry-content.single-content,
    body.rb-auth-password-reset .entry-content.single-content {
        width: calc(100% - 40px) !important;
        max-width: none !important;

        margin-top: 32px !important;
        margin-right: auto !important;
        margin-bottom: 64px !important;
        margin-left: auto !important;
    }

}

/* END AUTH — HOMEPAGE GEOMETRY FINAL */


/* ==========================================================
   PASSWORD RESET — GEOMETRY LOCK
   Match final Login/Register/Homepage outer alignment.
   ========================================================== */

@media (min-width: 1200px) {
    body.rb-auth-password-reset .entry-content.single-content {
        width: calc(100% - 48px) !important;
        max-width: 1232px !important;

        margin-top: 32px !important;
        margin-right: auto !important;
        margin-bottom: 64px !important;
        margin-left: auto !important;

        box-sizing: border-box !important;
    }
}

@media (min-width: 901px) and (max-width: 1199px) {
    body.rb-auth-password-reset .entry-content.single-content {
        width: calc(100% - 40px) !important;
        max-width: none !important;

        margin-top: 32px !important;
        margin-right: auto !important;
        margin-bottom: 64px !important;
        margin-left: auto !important;

        box-sizing: border-box !important;
    }
}

/* END PASSWORD RESET — GEOMETRY LOCK */

/* ==========================================================
   PASSWORD RESET DESKTOP — VIEWPORT ALIGNMENT
   Short reset page must use the same scrollbar geometry
   as Homepage / Login / Register.
   ========================================================== */

@media (min-width: 901px) {
    html:has(body.rb-auth-password-reset) {
        overflow-y: scroll !important;
        scrollbar-gutter: auto !important;
    }
}

/* END PASSWORD RESET DESKTOP — VIEWPORT ALIGNMENT */

/* ==========================================================
   PASSWORD RESET — STATUS STATES
   ========================================================== */

body.rb-auth-password-reset .rb-reset-status {
    margin: 20px 0 0 !important;
    padding: 14px 16px !important;

    border: 1px solid rgba(255,117,31,.22) !important;
    border-radius: 11px !important;
    background: #fff7e9 !important;

    color: #5f554d !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    text-align: left !important;

    box-sizing: border-box !important;
}

/* Email reset berhasil dikirim */
body.rb-reset-state-checkemail
.um-password::before {
    content: "Periksa emailmu." !important;
}

body.rb-reset-state-checkemail
.um-password .um-form::before {
    content: "Jika akun sesuai dengan data yang dimasukkan, tautan pemulihan telah dikirim ke email yang terhubung." !important;
}

/* Password berhasil diubah */
body.rb-reset-state-password-changed
.um-password::before {
    content: "Kata sandi berhasil diubah." !important;
}

body.rb-reset-state-password-changed
.um-password .um-form::before {
    content: "Kamu sekarang dapat masuk kembali menggunakan kata sandi yang baru." !important;
}

/* Link expired */
body.rb-reset-state-expired
.um-password::before {
    content: "Tautan telah kedaluwarsa." !important;
}

body.rb-reset-state-expired
.um-password .um-form::before {
    content: "Masukkan kembali nama pengguna atau alamat surel untuk memperoleh tautan pemulihan baru." !important;
}

/* Link invalid */
body.rb-reset-state-invalid
.um-password::before {
    content: "Tautan tidak dapat digunakan." !important;
}

body.rb-reset-state-invalid
.um-password .um-form::before {
    content: "Masukkan kembali nama pengguna atau alamat surel untuk memperoleh tautan pemulihan baru." !important;
}

/* END PASSWORD RESET — STATUS STATES */

/* ==========================================================
   PASSWORD RESET — CHANGE PASSWORD STATE
   ========================================================== */

body.rb-auth-password-reset.rb-reset-change-password
.um-password::before {
    content: "Buat kata sandi baru." !important;
}

body.rb-auth-password-reset.rb-reset-change-password
.um-password .um-form::before {
    content: "Masukkan kata sandi baru untuk mengamankan kembali akunmu." !important;
}

/* END PASSWORD RESET — CHANGE PASSWORD STATE */

/* ==========================================================
   PASSWORD RESET — CHANGE PASSWORD SPACING FINAL
   ========================================================== */

@media (min-width: 901px) {

    /* Jarak subjudul ke kelompok field */
    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-form::before {
        margin-bottom: 30px !important;
    }

    /* Normalisasi setiap field */
    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-field {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    /* Label ke input */
    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-field-label {
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-field-area {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Field terakhir tidak membawa margin bawaan ke tombol */
    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-field:last-of-type {
        margin-bottom: 0 !important;
    }

    /* Ruang yang jelas sebelum tombol */
    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-col-alt,
    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-col-alt-b {
        margin: 20px 0 0 !important;
        padding: 0 !important;
    }

    body.rb-auth-password-reset.rb-reset-change-password
    .um-password .um-center {
        margin: 0 !important;
        padding: 0 !important;
    }

    body.rb-auth-password-reset.rb-reset-change-password
    .um-password input[type="submit"].um-button {
        margin: 0 !important;
    }

    /* Tombol ke jalur kembali login */
    body.rb-auth-password-reset.rb-reset-change-password
    .rb-password-login {
        margin-top: 16px !important;
    }
}

/* END PASSWORD RESET — CHANGE PASSWORD SPACING FINAL */

/* RB PASSWORD RESET — ERROR TEXT START */
body.rb-auth-password-reset .um-field-error,
body.rb-auth-password-reset .um-field-error *,
body.rb-auth-password-reset .um-field-error a {
    color: #ffffff !important;
}
/* RB PASSWORD RESET — ERROR TEXT END */

/* RB PASSWORD RESET — FORCE ERROR TEXT WHITE */
body.page-id-18828 .um-field-error,
body.page-id-18828 .um-field-error *,
body.page-id-18828 .um-field-error span,
body.page-id-18828 .um-field-error p,
body.page-id-18828 .um-field-error a,
body.rb-auth-password-reset .um-field-error,
body.rb-auth-password-reset .um-field-error * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* ==========================================================
   PASSWORD RESET — MOBILE V1
   Match Register mobile.
   Desktop remains untouched.
   ========================================================== */

@media (max-width: 900px) {

    body.rb-auth-password-reset {
        --rb-auth-orange: #ff751f;
        --rb-auth-orange-hover: #e96817;
        --rb-auth-ink: #23272a;
        --rb-auth-text: #4f575c;
        --rb-auth-muted: #747c81;
        --rb-auth-line: #dfe3e5;
        --rb-auth-bg: #f6f7f8;
        --rb-auth-cream: #fff7e9;
    }


    /* ======================================================
       1. KADENCE / PAGE RESET
       ====================================================== */

    body.rb-auth-password-reset .entry-hero,
    body.rb-auth-password-reset .entry-hero-container,
    body.rb-auth-password-reset .page-header,
    body.rb-auth-password-reset article.page > .entry-header {
        display: none !important;
    }

    body.rb-auth-password-reset #inner-wrap {
        background: var(--rb-auth-bg) !important;
    }

    body.rb-auth-password-reset .content-area,
    body.rb-auth-password-reset #primary,
    body.rb-auth-password-reset #main.site-main,
    body.rb-auth-password-reset .content-wrap,
    body.rb-auth-password-reset article.page,
    body.rb-auth-password-reset .entry-content-wrap {
        width: 100% !important;
        max-width: none !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.rb-auth-password-reset .content-container.site-container {
        width: 100% !important;
        max-width: none !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* ======================================================
       2. MOBILE CARD
       ====================================================== */

    body.rb-auth-password-reset .entry-content.single-content {
        display: flex !important;
        flex-direction: column !important;

        width: calc(100% - 40px) !important;
        max-width: 520px !important;
        min-height: 0 !important;

        margin: 24px auto 36px !important;
        padding: 0 !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid #e3e6e8 !important;
        border-radius: 20px !important;

        box-shadow:
            0 12px 35px rgba(32, 38, 42, 0.06) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       3. CREAM INTRO
       ====================================================== */

    body.rb-auth-password-reset
    .entry-content.single-content::before {
        content:
            "RUANG BESTARI\A\A"
            "Pulihkan akses akunmu agar perjalanan literasimu tetap berlanjut bersama pembaca dan penulis dari berbagai penjuru Indonesia." !important;

        order: 1 !important;

        display: block !important;
        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 24px 22px 8px !important;

        white-space: pre-line !important;

        color: #756b5f !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;
        letter-spacing: 0 !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-password-reset
    .entry-content.single-content::after {
        content:
            "Ruang untuk membaca,\A"
            "menulis, dan bertumbuh." !important;

        order: 2 !important;

        display: block !important;
        position: static !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 8px 22px 24px !important;

        white-space: pre-line !important;

        color: var(--rb-auth-ink) !important;

        font-size: 23px !important;
        font-weight: 750 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;

        background: var(--rb-auth-cream) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       4. UM FORM WRAPPER
       ====================================================== */

    body.rb-auth-password-reset
    .entry-content.single-content > .um.um-password {
        order: 3 !important;

        position: relative !important;
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 25px 20px 23px !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-password-reset .um-password .um-form,
    body.rb-auth-password-reset .um-password form,
    body.rb-auth-password-reset .um-password .um-row,
    body.rb-auth-password-reset .um-password .um-col-1,
    body.rb-auth-password-reset .um-password .um-field,
    body.rb-auth-password-reset .um-password .um-field-area {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       5. HEADING + SUBTITLE
       ====================================================== */

    body.rb-auth-password-reset .um-password::before {
        content: "Lupa kata sandi?";

        display: block !important;

        margin: 0 0 6px !important;

        color: var(--rb-auth-ink) !important;

        font-size: 24px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
    }

    body.rb-auth-password-reset .um-password::after {
        content: none !important;
        display: none !important;
    }

    body.rb-auth-password-reset
    .um-password
    .um-form::before {
        content:
            "Masukkan nama pengguna atau alamat surel yang terhubung dengan akunmu.";

        display: block !important;

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

        color: var(--rb-auth-muted) !important;

        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }


    /* ======================================================
       6. HIDE OLD UM DESCRIPTION
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-field-block {
        display: none !important;
    }


    /* ======================================================
       7. FIELD SPACING + LABELS
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-field {
        margin: 0 0 17px !important;
        padding: 0 !important;
    }

    body.rb-auth-password-reset
    .um-password
    .um-field-username_b::before {
        content: "Nama Pengguna atau Alamat Surel";

        display: block !important;

        margin: 0 0 7px !important;

        color: #363c40 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }

    body.rb-auth-password-reset
    .um-password
    .um-field-label {
        display: block !important;

        margin: 0 0 7px !important;
        padding: 0 !important;
    }

    body.rb-auth-password-reset
    .um-password
    .um-field-label-icon {
        display: none !important;
    }

    body.rb-auth-password-reset
    .um-password
    .um-field-label label {
        display: block !important;

        color: #363c40 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }


    /* ======================================================
       8. INPUT
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    input.um-form-field {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 49px !important;

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

        color: #252a2e !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;

        background: #ffffff !important;

        border: 1px solid #d9dee1 !important;
        border-radius: 11px !important;

        outline: none !important;
        box-shadow: none !important;

        box-sizing: border-box !important;
    }

    body.rb-auth-password-reset
    .um-password
    input.um-form-field:focus {
        border-color: rgba(255, 117, 31, 0.82) !important;

        box-shadow:
            0 0 0 4px rgba(255, 117, 31, 0.10) !important;
    }


    /* ======================================================
       9. BUTTON
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-col-alt,
    body.rb-auth-password-reset
    .um-password
    .um-col-alt-b {
        display: block !important;

        width: 100% !important;

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

    body.rb-auth-password-reset
    .um-password
    .um-center,
    body.rb-auth-password-reset
    .um-password
    .um-left,
    body.rb-auth-password-reset
    .um-password
    .um-right,
    body.rb-auth-password-reset
    .um-password
    .um-half {
        float: none !important;

        display: block !important;

        width: 100% !important;
        max-width: none !important;

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

    body.rb-auth-password-reset
    .um-password
    input[type="submit"].um-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;
        height: 48px !important;

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

        color: #ffffff !important;

        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 750 !important;

        background: var(--rb-auth-orange) !important;

        border: 1px solid var(--rb-auth-orange) !important;
        border-radius: 11px !important;

        box-shadow: none !important;
    }


    /* ======================================================
       10. LOGIN PATH
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .rb-password-login {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        width: 100% !important;

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

        color: #687078 !important;

        font-family: inherit !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;

        text-align: center !important;
    }

    body.rb-auth-password-reset
    .um-password
    .rb-password-login span {
        color: #687078 !important;
    }

    body.rb-auth-password-reset
    .um-password
    .rb-password-login a {
        color: var(--rb-auth-orange) !important;

        font-weight: 700 !important;

        text-decoration: none !important;
    }


    /* ======================================================
       11. VALIDATION / STATUS
       ====================================================== */

    body.rb-auth-password-reset
    .um-password
    .um-field-error {
        margin-top: 7px !important;

        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    body.rb-auth-password-reset
    .rb-reset-status {
        margin: 0 0 20px !important;

        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }

    body.rb-auth-password-reset .um-password,
    body.rb-auth-password-reset .um-password * {
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

}


/* Mobile — sama dengan homepage/auth final */
@media (max-width: 767px) {

    body.rb-auth-password-reset
    .entry-content.single-content {
        margin-top: 24px !important;
        margin-bottom: 48px !important;
    }

}


/* Tablet auth — mengikuti ritme desktop/homepage */
@media (min-width: 768px) and (max-width: 900px) {

    body.rb-auth-password-reset
    .entry-content.single-content {
        margin-top: 32px !important;
        margin-bottom: 64px !important;
    }

}


/* Change-password state mobile */
@media (max-width: 900px) {

    body.rb-auth-password-reset.rb-reset-change-password
    .um-password
    .um-form::before {
        margin-bottom: 24px !important;
    }

    body.rb-auth-password-reset.rb-reset-change-password
    .um-password
    .um-field {
        margin-bottom: 17px !important;
    }

    body.rb-auth-password-reset.rb-reset-change-password
    .um-password
    .um-col-alt,
    body.rb-auth-password-reset.rb-reset-change-password
    .um-password
    .um-col-alt-b {
        margin-top: 3px !important;
    }

}

/* END PASSWORD RESET — MOBILE V1 */


/* ==========================================================
   LOGIN — ERROR MESSAGE CONTRAST
   ========================================================== */

body.rb-auth-login .um-field-error,
body.rb-auth-login .um-field-error *,
body.rb-auth-login .um-field-error span,
body.rb-auth-login .um-field-error p,
body.rb-auth-login .um-field-error a,
body.rb-auth-login .um-notice.err,
body.rb-auth-login .um-notice.err *,
body.rb-auth-login .um-notice.err span,
body.rb-auth-login .um-notice.err p,
body.rb-auth-login .um-notice.err a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* END LOGIN — ERROR MESSAGE CONTRAST */


/* ==========================================================
   AUTH — PASSWORD VISIBILITY TOGGLE
   ========================================================== */

body.rb-auth-page .rb-password-toggle-area {
    position: relative !important;
}

body.rb-auth-page
input.rb-password-toggle-input {
    padding-right: 48px !important;
}

body.rb-auth-page
.rb-password-toggle {
    position: absolute !important;
    z-index: 4 !important;

    top: 50% !important;
    right: 14px !important;

    width: 28px !important;
    height: 28px !important;

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

    transform: translateY(-50%) !important;

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

    color: #7a8287 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 7px !important;

    box-shadow: none !important;
    outline: none !important;

    cursor: pointer !important;
}

body.rb-auth-page
.rb-password-toggle svg {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    pointer-events: none !important;
}

body.rb-auth-page
.rb-password-toggle:hover,
body.rb-auth-page
.rb-password-toggle:focus-visible {
    color: #343a40 !important;
    background: rgba(25, 28, 31, 0.05) !important;
}

/* END AUTH — PASSWORD VISIBILITY TOGGLE */

/* ==========================================================
   AUTH DESKTOP — OUTER RHYTHM FINAL
   Header 32px / Footer 48px
   ========================================================== */

@media (min-width: 901px) {

    body.rb-auth-login .entry-content.single-content,
    body.rb-auth-register .entry-content.single-content,
    body.rb-auth-password-reset .entry-content.single-content {
        margin-top: 32px !important;
        margin-bottom: 48px !important;
    }

}

/* END AUTH DESKTOP — OUTER RHYTHM FINAL */

/* ==========================================================
   AUTH DESKTOP — MATCH HOMEPAGE OUTER RHYTHM
   ========================================================== */

@media (min-width: 901px) {

    body.rb-auth-login .entry-content.single-content,
    body.rb-auth-register .entry-content.single-content,
    body.rb-auth-password-reset .entry-content.single-content {
        margin-top: 32px !important;
        margin-bottom: 32px !important;
    }

}

/* END AUTH DESKTOP — MATCH HOMEPAGE OUTER RHYTHM */

/* ==========================================================
 * RB LOGIN — HOMEPAGE WIDTH ALIGNMENT V1
 * Homepage remains the master reference.
 * 1280px container - 24px left/right = 1232px.
 * ========================================================== */

@media (min-width: 901px) {

    body.rb-auth-login .entry-content.single-content {
        width: calc(100% - 48px) !important;
        max-width: 1232px !important;
    }

}