/* ==========================================================
   RUANG BESTARI — START WRITING
   AUTH VISUAL SYNC V1

   /mulai-menulis/
   Senada dengan Login / Register / Password Reset
   ========================================================== */

body.rb-start-writing-page {
    --rb-sw-orange: #ff751f;
    --rb-sw-orange-hover: #e96817;
    --rb-sw-ink: #23272a;
    --rb-sw-text: #4f575c;
    --rb-sw-muted: #747c81;
    --rb-sw-line: #dfe3e5;
    --rb-sw-bg: #f6f7f8;
    --rb-sw-cream: #fff7e9;

    background: var(--rb-sw-bg) !important;
}


/* ----------------------------------------------------------
   Kadence page chrome
   ---------------------------------------------------------- */

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

body.rb-start-writing-page #inner-wrap {
    background: var(--rb-sw-bg) !important;
}

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

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

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

body.rb-start-writing-page article.entry,
body.rb-start-writing-page article.page,
body.rb-start-writing-page .entry-content-wrap {
    background: transparent !important;
}

body.rb-start-writing-page .entry-content.single-content {
    width: calc(100% - 48px) !important;
    max-width: 1232px !important;

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


/* ----------------------------------------------------------
   Main card
   ---------------------------------------------------------- */

body.rb-start-writing-page .rb-start-writing {
    width: 100%;

    margin: 0;
    padding: 0;
}

body.rb-start-writing-page .rb-start-writing__shell {
    display: grid;
    grid-template-columns:
        minmax(0, 0.94fr)
        minmax(0, 1.06fr);

    width: 100%;

    overflow: hidden;

    border: 1px solid var(--rb-sw-line);
    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 10px 32px rgba(20, 31, 35, .055);

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Cream brand panel
   ---------------------------------------------------------- */

body.rb-start-writing-page .rb-start-writing__visual {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 500px;

    padding: 54px 56px;

    overflow: hidden;

    background: var(--rb-sw-cream);

    box-sizing: border-box;
}

body.rb-start-writing-page .rb-start-writing__brand {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 430px;
}

body.rb-start-writing-page
.rb-start-writing__brand-kicker {
    display: block;

    margin: 0 0 18px;

    color: #d77b00;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .14em;
    text-transform: uppercase;
}

body.rb-start-writing-page
.rb-start-writing__brand-description {
    max-width: 390px;

    margin: 0 0 22px !important;

    color: #60676b;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

body.rb-start-writing-page
.rb-start-writing__brand-title {
    max-width: 440px;

    margin: 0 !important;

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

    font-size: clamp(30px, 2.55vw, 39px);
    font-weight: 750;
    line-height: 1.12;

    letter-spacing: -.035em;
}


/* Subtle pen decoration */

body.rb-start-writing-page
.rb-start-writing__visual-ring {
    position: absolute;

    right: 38px;
    bottom: 34px;

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

    width: 82px;
    height: 82px;

    color: rgba(215, 123, 0, .48);

    border: 1px solid rgba(215, 123, 0, .14);
    border-radius: 50%;

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

body.rb-start-writing-page
.rb-start-writing__pen {
    display: block;

    width: 30px;
    height: 30px;
}


/* ----------------------------------------------------------
   White content panel
   ---------------------------------------------------------- */

body.rb-start-writing-page
.rb-start-writing__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: 48px 52px;

    background: #fff;

    box-sizing: border-box;
}

body.rb-start-writing-page
.rb-start-writing__title {
    margin: 0 0 7px !important;

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

    font-size: clamp(25px, 2vw, 31px);
    font-weight: 750;
    line-height: 1.15;

    letter-spacing: -.03em;
}

body.rb-start-writing-page
.rb-start-writing__lead {
    margin: 0 0 22px !important;

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

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

body.rb-start-writing-page
.rb-start-writing__description {
    max-width: 580px;

    margin: 0 0 22px !important;

    color: var(--rb-sw-text);

    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.65;
}


/* ----------------------------------------------------------
   Benefits
   ---------------------------------------------------------- */

body.rb-start-writing-page
.rb-start-writing__benefits {
    display: grid;

    gap: 11px;

    margin: 0 0 26px;
}

body.rb-start-writing-page
.rb-start-writing__benefit {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: #42494d;

    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
}

body.rb-start-writing-page
.rb-start-writing__check {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    margin-top: -1px;

    color: #d97800;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    border-radius: 50%;

    background: #fff3df;
}


/* ----------------------------------------------------------
   CTA + Login
   ---------------------------------------------------------- */

body.rb-start-writing-page
.rb-start-writing__actions {
    display: flex;
    align-items: center;

    gap: 18px;

    margin: 0;
}

body.rb-start-writing-page
.rb-start-writing__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 48px;

    padding: 0 20px;

    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none !important;

    border-radius: 10px;

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

    box-sizing: border-box;
}

body.rb-start-writing-page
.rb-start-writing__button--primary {
    color: #fff !important;

    border: 1px solid var(--rb-sw-orange);

    background: var(--rb-sw-orange);
}

body.rb-start-writing-page
.rb-start-writing__button--primary:hover,
body.rb-start-writing-page
.rb-start-writing__button--primary:focus-visible {
    color: #fff !important;

    border-color: var(--rb-sw-orange-hover);

    background: var(--rb-sw-orange-hover);

    transform: translateY(-1px);
}

body.rb-start-writing-page
.rb-start-writing__login {
    margin: 0 !important;

    color: #687078;

    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
}

body.rb-start-writing-page
.rb-start-writing__login a {
    color: var(--rb-sw-orange) !important;

    font-weight: 700;

    text-decoration: none !important;
}

body.rb-start-writing-page
.rb-start-writing__login a:hover {
    color: var(--rb-sw-orange-hover) !important;
}


/* ----------------------------------------------------------
   Fine print
   ---------------------------------------------------------- */

body.rb-start-writing-page
.rb-start-writing__note {
    margin: 24px 0 0 !important;
    padding: 18px 0 0;

    color: #83898d;

    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.55;

    border-top: 1px solid #eceeef;
}


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

@media (max-width: 900px) {

    body.rb-start-writing-page
    .entry-content.single-content {
        width: calc(100% - 32px) !important;
        max-width: none !important;

        margin-top: 20px !important;
        margin-bottom: 28px !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__shell {
        grid-template-columns: 1fr;

        border-radius: 18px;
    }

    body.rb-start-writing-page
    .rb-start-writing__visual {
        min-height: 0;

        padding: 28px 24px 30px;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand {
        max-width: none;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand-kicker {
        margin-bottom: 14px;

        font-size: 10px;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand-description {
        max-width: 100%;

        margin-bottom: 16px !important;

        font-size: 11.5px;
        line-height: 1.6;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand-title {
        max-width: 350px;

        font-size: 25px;
        line-height: 1.14;
    }

    body.rb-start-writing-page
    .rb-start-writing__visual-ring {
        display: none;
    }

    body.rb-start-writing-page
    .rb-start-writing__content {
        padding: 28px 24px 26px;
    }

    body.rb-start-writing-page
    .rb-start-writing__title {
        margin-bottom: 6px !important;

        font-size: 24px;
        line-height: 1.16;
    }

    body.rb-start-writing-page
    .rb-start-writing__lead {
        margin-bottom: 22px !important;

        font-size: 11.5px;
    }

    body.rb-start-writing-page
    .rb-start-writing__description {
        margin-bottom: 21px !important;

        font-size: 11.5px;
        line-height: 1.6;
    }

    body.rb-start-writing-page
    .rb-start-writing__benefits {
        gap: 10px;

        margin-bottom: 24px;
    }

    body.rb-start-writing-page
    .rb-start-writing__benefit {
        gap: 9px;

        font-size: 11.5px;
    }

    body.rb-start-writing-page
    .rb-start-writing__check {
        flex-basis: 20px;

        width: 20px;
        height: 20px;

        font-size: 10px;
    }

    body.rb-start-writing-page
    .rb-start-writing__actions {
        flex-direction: column;
        align-items: stretch;

        gap: 14px;
    }

    body.rb-start-writing-page
    .rb-start-writing__button {
        width: 100%;
        min-height: 48px;

        padding: 0 16px;
    }

    body.rb-start-writing-page
    .rb-start-writing__login {
        width: 100%;

        text-align: center;
    }

    body.rb-start-writing-page
    .rb-start-writing__note {
        margin-top: 21px !important;
        padding-top: 17px;

        text-align: center;
    }
}


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

@media (max-width: 480px) {

    body.rb-start-writing-page
    .entry-content.single-content {
        width: calc(100% - 28px) !important;

        margin-top: 18px !important;
        margin-bottom: 24px !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__visual {
        padding: 25px 21px 27px;
    }

    body.rb-start-writing-page
    .rb-start-writing__content {
        padding: 26px 21px 24px;
    }

}

/* END RUANG BESTARI — START WRITING AUTH VISUAL SYNC V1 */

/* ==========================================================
   START WRITING MOBILE AUTH MATCH V2

   /mulai-menulis/
   Mobile mengikuti Login / Register / Password Reset.
   Desktop tetap.
   ========================================================== */

@media (max-width: 900px) {

    /* PAGE / CARD */

    body.rb-start-writing-page
    .entry-content.single-content {
        width: calc(100% - 40px) !important;
        max-width: 520px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__shell {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !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;
    }


    /* CREAM INTRO */

    body.rb-start-writing-page
    .rb-start-writing__visual {
        position: relative !important;

        display: block !important;

        min-height: 0 !important;

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

        background: #fff7e9 !important;

        box-sizing: border-box !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand {
        width: 100% !important;
        max-width: none !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand-kicker {
        display: block !important;

        margin: 0 0 20px !important;

        color: #756b5f !important;

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

        letter-spacing: 0 !important;
        text-transform: uppercase !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand-description {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 18px !important;

        color: #756b5f !important;

        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.55 !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__brand-title {
        width: 100% !important;
        max-width: 360px !important;

        margin: 0 !important;

        color: #23272a !important;

        font-size: 23px !important;
        font-weight: 750 !important;
        line-height: 1.12 !important;

        letter-spacing: -0.025em !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__visual-ring {
        display: none !important;
    }


    /* WHITE CONTENT */

    body.rb-start-writing-page
    .rb-start-writing__content {
        display: block !important;

        min-width: 0 !important;

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

        background: #ffffff !important;

        box-sizing: border-box !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__title {
        margin: 0 0 6px !important;

        color: #23272a !important;

        font-size: 24px !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;

        letter-spacing: -0.025em !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__lead {
        margin: 0 0 24px !important;

        color: #747c81 !important;

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

    body.rb-start-writing-page
    .rb-start-writing__description {
        width: 100% !important;
        max-width: none !important;

        margin: 0 0 22px !important;

        color: #4f575c !important;

        font-size: 12.5px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;
    }


    /* BENEFITS */

    body.rb-start-writing-page
    .rb-start-writing__benefits {
        display: grid !important;

        gap: 10px !important;

        margin: 0 0 24px !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__benefit {
        display: flex !important;
        align-items: flex-start !important;

        gap: 9px !important;

        color: #42494d !important;

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

    body.rb-start-writing-page
    .rb-start-writing__check {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 20px !important;

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

        margin-top: 0 !important;

        color: #d97800 !important;

        font-size: 10px !important;
        font-weight: 800 !important;

        border-radius: 50% !important;

        background: #fff3df !important;
    }


    /* CTA + LOGIN */

    body.rb-start-writing-page
    .rb-start-writing__actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 15px !important;

        width: 100% !important;

        margin: 0 !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

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

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

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

        border-radius: 11px !important;

        box-sizing: border-box !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__button--primary {
        color: #ffffff !important;

        background: #ff751f !important;
        border: 1px solid #ff751f !important;

        box-shadow: none !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__button--primary:hover,
    body.rb-start-writing-page
    .rb-start-writing__button--primary:focus-visible {
        color: #ffffff !important;

        background: #e96817 !important;
        border-color: #e96817 !important;

        transform: none !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__login {
        width: 100% !important;

        margin: 0 !important;

        color: #687078 !important;

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

        text-align: center !important;
    }

    body.rb-start-writing-page
    .rb-start-writing__login a {
        color: #ff751f !important;

        font-weight: 700 !important;
    }


    /* NOTE */

    body.rb-start-writing-page
    .rb-start-writing__note {
        margin: 20px 0 0 !important;
        padding: 17px 0 0 !important;

        color: #83898d !important;

        font-size: 10.5px !important;
        font-weight: 400 !important;
        line-height: 1.55 !important;

        text-align: center !important;

        border-top: 1px solid #eceeef !important;
    }

}


/* MOBILE — mengikuti rhythm Auth */

@media (max-width: 767px) {

    body.rb-start-writing-page
    .entry-content.single-content {
        width: calc(100% - 40px) !important;

        margin-top: 24px !important;
        margin-bottom: 48px !important;
    }

}


/* TABLET */

@media (min-width: 768px) and (max-width: 900px) {

    body.rb-start-writing-page
    .entry-content.single-content {
        margin-top: 32px !important;
        margin-bottom: 64px !important;
    }

}

/* END START WRITING MOBILE AUTH MATCH V2 */


/* ==========================================================
   START WRITING MOBILE OUTER RHYTHM SYNC V1

   Hilangkan outer spacing bawaan Kadence agar ritme:
   header -> card -> footer
   sama dengan Login / Register / Password Reset.

   Card:
   top    = 24px
   bottom = 48px
   ========================================================== */

@media (max-width: 767px) {

    html body.rb-start-writing-page
    .content-wrap,

    html body.rb-start-writing-page
    .content-container.site-container,

    html body.rb-start-writing-page
    #primary,

    html body.rb-start-writing-page
    #main.site-main,

    html body.rb-start-writing-page
    .content-area,

    html body.rb-start-writing-page
    article.page,

    html body.rb-start-writing-page
    article.entry,

    html body.rb-start-writing-page
    .entry-content-wrap {
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /*
     * Jangan biarkan #inner-wrap menambah ruang vertikal.
     * Spacing final sepenuhnya dimiliki entry-content.
     */
    html body.rb-start-writing-page
    #inner-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /*
     * Persis ritme auth mobile.
     */
    html body.rb-start-writing-page
    .entry-content.single-content {
        margin-top: 24px !important;
        margin-right: auto !important;
        margin-bottom: 48px !important;
        margin-left: auto !important;
    }

}

/* END START WRITING MOBILE OUTER RHYTHM SYNC V1 */