@import url(./rvp-new-variables.css);

/* #region ============= GLOBAL ============= */
    body {
        color: var(--fontBlack);
        font-size: 1rem;
        font-family: var(--fontSecondary);
        background-color: var(--mainBg) !important;
        overflow-x: hidden;
    }
    body.popover-open {
        overflow: hidden !important;
    }
    :target {
        scroll-margin-block: 0 !important;
    }
    section:not(.pswp__scroll-wrap) {
        width: 100%;
        max-width: var(--maxPage);
        min-height: 100vh;
        margin-inline: auto;
    }
    .subtitle {
        color: var(--primary);
        font-family: var(--fontMain);
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: capitalize;
        margin-bottom: 1.25rem;
    }
    .desc {
        font-size: 1.15rem;
    }
/* #endregion ========== GLOBAL ============= */

/* #region ============= SCROLLBAR ============= */
    *::-webkit-scrollbar {
        height: 10px;
        width: 8px;
    }
    *::-webkit-scrollbar-track {
        background: var(--border);
        margin: 0;
    }
    *::-webkit-scrollbar-thumb {
        background-color: var(--primary);
        background: linear-gradient(to top, var(--primary) 0%, var(--primary) 60%);
        border: 2px solid transparent;
        border-radius: 10px;
        background-clip: content-box;
    }
/* #endregion ========== SCROLLBAR ============= */

/* #region ============= BACK TO TOP ============= */
    #bttBtn {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        border: none;
        outline: none;
        color: var(--putih);
        font-size: 2.25rem;
        background-color: var(--green);
        border-radius: 50%;
        box-shadow: 2px 2px 8px var(--shadow);
        transform: scale(0);
        transition: var(--anim);
        transform-origin: center bottom;
        cursor: pointer;
        z-index: 99;
    }
/* #endregion ========== BACK TO TOP ============= */

/* #region ============= HIDE ARROW INPUT ============= */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
/* #endregion ========== HIDE ARROW INPUT ============= */

/* #region ============= CUSTOM SELECTION COLOR ============= */
    ::selection {
        color: var(--putih);
        background: var(--red);
    }
    ::-moz-selection {
        color: var(--putih);
        background: var(--red);
    }
/* #endregion ========== CUSTOM SELECTION COLOR ============= */

/* #region ============= CUSTOM BROKEN IMAGE ============= */
    img {
        position: relative;
    }
    img::after {
        content: "Gagal menampilkan gambar \A'" attr(alt) "'\A 😞" / " ";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: var(--grey);
        font-weight: 600;
        text-align: center;
        background-color: var(--putih);
        border: 2px dashed var(--border);
        border-radius: .5rem;
        white-space: pre-wrap;
    }
/* #endregion ========== CUSTOM BROKEN IMAGE ============= */

/* #region ============= NAVBAR ============= */
    #navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-width: var(--maxPage);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem 4rem;
        margin-inline: auto;
        transition: var(--anim);
        isolation: isolate;
        z-index: 100;
        
        #nav-toggle {
            display: none;
        }

        .brand {
            display: flex;
            align-items: center;

            a {
                display: grid;
                place-items: center;
                color: var(--putih);
                text-decoration: none;
            }
            svg {
                width: auto;
                height: 40px;
            }
        }
        
        .nav-menu {
            display: flex;
            justify-content: center;

            ul {
                display: flex;
                align-items: center;
                gap: 3rem;
                padding: 0;
                margin: 0;

                li {
                    list-style: none;

                    a {
                        color: var(--putih);
                        font-size: 1.1rem;
                        text-decoration: none;
                        text-transform: capitalize;
                        transition: var(--anim);

                        &:is(:hover, :active) {
                            color: var(--primary);
                        }
                    }
                }
            }
        }

        .git {
            display: inline-block;
            color: var(--putih);
            font-size: .9rem;
            font-weight: 600;
            text-transform: capitalize;
            text-decoration: none;
            padding: .75rem 1rem;
            background-color: var(--secondary);
            border: none;
            outline: none;
            border-radius: 3rem;
            transition: all var(--anim);
            cursor: pointer;

            i {
                font-size: 1.25rem;
                vertical-align: -3px;
                margin-right: .5rem;
            }
        }

        .theme {
            display: flex;
            align-items: center;
            gap: 1rem;

            .toggle-dark {
                width: 3rem;
                aspect-ratio: 16 / 9;
                border-radius: 3rem;
                overflow: hidden;

                #darkModeToggle {
                    display: none;
                }

                label {
                    width: 100%;
                    height: 100%;
                    cursor: pointer;

                    div {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(to top, #1ddffd, #10cae7);
                        box-shadow: inset 0 0 4px #00000040;
                        transition: var(--anim);
                        z-index: 0;

                        &::before {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 8%;
                            transform: translateY(-50%);
                            height: 75%;
                            aspect-ratio: 1;
                            background-color: var(--putih);
                            border-radius: 50%;
                            box-shadow: 0 0 8px #00000040;
                            transition: var(--anim);
                            z-index: 3;
                        }
                        #darkModeToggle:checked ~ &::before {
                            left: 49%;
                        }

                        span:first-child {
                            position: absolute;
                            left: -20%;
                            bottom: -117%;
                            aspect-ratio: 1;
                            height: 150%;
                            border-radius: 50%;
                            background-color: var(--putih);
                            z-index: 1;

                            &::after {
                                content: '';
                                position: absolute;
                                left: 65%;
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                                background-color: var(--primary);
                                transition: var(--anim);
                            }
                        }
                        #darkModeToggle:checked ~ & span:first-child {
                            background-color: #4a554c;
                        }
                        #darkModeToggle:checked ~ & span:first-child::after {
                            background-color: #55775e;
                        }
                        span:last-child {
                            position: absolute;
                            top: 39%;
                            left: 70%;
                            aspect-ratio: 1;
                            height: 32%;
                            border-radius: 50%;
                            background-color: #fff679;
                            box-shadow: 0 0 8px #fff679c4;
                            transition: var(--anim);
                            z-index: -1;
                        }
                        #darkModeToggle:checked ~ & span:last-child {
                            top: 22%;
                            left: 12%;
                            background-color: #fefcda;
                            box-shadow: 0 0 6px #fefcdac4;
                        }
                    }
                    #darkModeToggle:checked ~ div {
                        background: linear-gradient(to top, #a5a5a5, #939393);
                    }
                }
            }
        }

        label[for="nav-toggle"] {
            display: none;
            place-items: center;
            width: 2.2rem;
            height: 2.2rem;
            cursor: pointer;

            i {
                font-size: 2rem;
                color: var(--putih);

                &:last-child {
                    display: none;
                    color: var(--red);
                }
            }
        }

        .ly-top {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, var(--black), transparent);
            transition: .5s ease;
            opacity: 1;
            z-index: -1;
        }
        .ly-bot {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--black);
            transition: .5s ease;
            opacity: 0;
            z-index: -2;
        }
    }
/* #endregion ========== NAVBAR ============= */

/* #region ============= HEADER ============= */
    header {
        position: relative;
        width: 100%;
        height: 100vh;
        max-width: var(--maxPage);
        margin: 0 auto;
        background-color: var(--hitam);
        isolation: isolate;
        overflow: hidden;
        
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, var(--black), rgba(33, 37, 41, .3), rgba(33, 37, 41, .15) 80%);
            z-index: 2;
        }
        .hero {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 1;
            
            video {
                display: block;
                width: 100%;
                max-width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .toggle-sound {
            position: absolute;
            right: 4.5rem;
            bottom: 4rem;
            display: grid;
            place-items: center;
            width: 45px;
            height: 45px;
            font-size: 1.35rem;
            color: var(--border);
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 100%;
            opacity: .75;
            cursor: pointer;
            z-index: 2;

            &:hover {
                color: var(--grey);
                background-color: var(--border);
                opacity: 1;
            }
        }

        .text {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            color: var(--putih);
            text-transform: uppercase;
            padding: 0 0 4.5rem 4rem;
            z-index: 2;

            p:first-of-type {
                font-family: var(--fontMain);
                font-size: 6.5rem;
                font-weight: 700;
                line-height: 1;
                margin-bottom: .0;
                text-shadow: 0 0 20px rgba(0,0,0,.75);
            }
            p:nth-of-type(2) {
                font-family: var(--fontMain);
                font-size: 7rem;
                font-weight: 700;
                line-height: 1;
                margin-bottom: .5rem;
                text-shadow: 0 0 20px rgba(0,0,0,.75);
            }
            p:last-of-type {
                font-size: 2rem;
                text-wrap: pretty;
                margin-bottom: 0;
                text-transform: capitalize;
                text-shadow: 0 0 5px rgb(0,0,0);
            }
        }
    }
/* #endregion ========== HEADER ============= */

/* #region ============= TENTANG ============= */
    #about {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 4rem;
        padding: 6rem 8%;
        margin-top: 5rem;

        .images {
            position: relative;
            width: 100%;
            height: 100%;

            div {
                position: absolute;
                background-color: var(--primary);
                background-size: cover;
                background-repeat: no-repeat;
                border-radius: 1rem;

                &:first-child {
                    top: 0;
                    left: 0;
                    width: calc(60% - .5rem);
                    height: calc(50% - .5rem);
                    background-image: url('https://rv-affiliate.azureedge.net/rv-membership/images/img-about1.webp');
                    background-position: left top;

                    span {
                        left: -2rem;
                        bottom: -1.5rem;
                        opacity: 0;
                    }
                }
                &:nth-child(2) {
                    top: 0;
                    right: 0;
                    width: calc(40% - .5rem);
                    height: calc(50% - .5rem);
                    background-image: url('https://rv-affiliate.azureedge.net/rv-membership/images/img-about2.webp');
                    background-position: 25% top;

                    span {
                        left: -2rem;
                        top: 4rem;
                        opacity: 0;
                    }
                }
                &:nth-child(3) {
                    bottom: 0;
                    left: 0;
                    width: calc(35% - .5rem);
                    height: calc(50% - .5rem);
                    background-image: url('https://rv-affiliate.azureedge.net/rv-membership/images/img-about3.webp');
                    background-position: left top;

                    span {
                        right: -3rem;
                        top: 3rem;
                        opacity: 0;
                    }
                }
                &:last-child {
                    bottom: 0;
                    right: 0;
                    width: calc(65% - .5rem);
                    height: calc(50% - .5rem);
                    background-image: url('https://rv-affiliate.azureedge.net/rv-membership/images/img-about4.webp');
                    background-position: left top;

                    span {
                        right: -1rem;
                        bottom: -3rem;
                        opacity: 0;
                    }
                }
                span {
                    position: absolute;
                    display: block;
                    color: var(--primary);
                    font-size: .9rem;
                    font-weight: 600;
                    padding: 1rem 1.15rem 1rem .75rem;
                    background-color: var(--putih);
                    border-radius: .75rem;
                    box-shadow: 2px 3px 15px rgba(0,0,0,.25);
                    transition: var(--anim);
                    z-index: 5;

                    i {
                        font-size: 1.25rem;
                        font-weight: 400;
                        vertical-align: -3px;
                        margin-right: .5rem;
                    }
                }
            }
        }

        .text {
            .top {
                margin-bottom: 3rem;

                p:first-child {
                    font-family: var(--fontMain);
                    font-size: 1.75rem;
                    line-height: 1;
                    margin-bottom: .75rem;
                }
                span {
                    display: block;
                    margin-top: 1rem;
                }
            }
            .info {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 2rem;

                > div {
                    display: flex;
                    flex-direction: column;

                    span:first-child {
                        position: relative;
                        color: var(--primary);
                        font-family: var(--fontMain);
                        font-size: 2.5rem;
                        font-weight: 600;
                        line-height: 1;

                        &::after {
                            content: "+";
                            position: absolute;
                            font-size: 1.75rem;
                            margin-left: .25rem;
                        }
                    }
                }

                a {
                    display: inline-block;
                    color: var(--putih);
                    font-size: 1.1rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    text-decoration: none;
                    padding: 1rem 1.5rem;
                    background-color: var(--secondary);
                    border: none;
                    outline: none;
                    border-radius: 3rem;
                    transition: all var(--anim);
                    cursor: pointer;

                    &:hover {
                        transform: translate(-2px, -2px);
                        box-shadow: 2px 4px 0 var(--grey);
                    }
                    i {
                        font-size: 1.5rem;
                        vertical-align: -3px;
                        margin-left: 1rem;
                    }
                }
            }
        }
    }
/* #endregion ========== TENTANG ============= */

/* #region ============= USAHA SEDIKIT ============= */
    #effortless {
        padding: 8rem 8%;

        .title {
            text-align: center;
            margin-bottom: 4rem;
        }
        .wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;

            .item {
                position: relative;
                padding: 2rem 1.5rem;
                background: linear-gradient(30deg, hsl(from var(--orange) h s 90), hsl(from var(--orange) h s 98));
                border: 1px solid var(--border);
                border-radius: 1.5rem;
                transition: all var(--anim);

                &:hover {
                    color: var(--putih);
                    background: var(--orange);
                    border-color: hsl(from var(--orange) h s 65);
                }
                &::before {
                    content: attr(data-urut, "0");
                    position: absolute;
                    top: -.25rem;
                    right: 2rem;
                    color: var(--orange);
                    font-family: var(--fontMain);
                    font-size: 8rem;
                    font-weight: 700;
                    opacity: .15;
                    transition: var(--anim);
                }
                &:hover::before {
                    color: var(--putih);
                    font-size: 5.5rem;
                    opacity: .5;
                }
                i {
                    display: grid;
                    place-items: center;
                    width: 60px;
                    height: 60px;
                    color: var(--putih);
                    font-size: 2rem;
                    margin-bottom: 1.5rem;
                    background: linear-gradient(30deg, var(--orange), hsl(from var(--orange) h s 70));
                    border-radius: 1rem;
                    transition: var(--anim);
                }
                &:hover i {
                    color: var(--orange);
                    background: linear-gradient(30deg, var(--putih), var(--putih));
                }
                p:first-of-type {
                    font-size: 1.15rem;
                    font-weight: 600;
                    margin-bottom: .5rem;
                }
                p:last-of-type {
                    font-size: .95rem;
                    margin-bottom: .0;
                }
            }
        }
    }
/* #endregion ========== USAHA SEDIKIT ============= */

/* #region ============= USAHA SENDIRI ============= */
    #selfEmployed {
        padding: 6rem 8%;

        .subtitle {
            text-align: center;
        }
        .wrapper {
            position: relative;
            height: 100vh;
            overflow: hidden;

            .big-image {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                height: 100%;
                isolation: isolate;
                
                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 100px;
                    background: linear-gradient(to top, var(--mainBg), transparent);
                    z-index: 3;
                }
                img {
                    height: 75%;
                }
            }
 
            .wheel-prob {
                --wheelHeightProb: 600px;
                --iconWidthProb: 70px;
                --spreadProb: calc(var(--wheelHeightProb) / 2);

                &::before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: var(--wheelHeightProb);
                    aspect-ratio: 1;
                    border: 5px dashed var(--border);
                    border-radius: 50%;
                    z-index: -3;
                }
                
                .rotating-prob {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(0deg);
                    display: grid;
                    place-items: center;
                    width: var(--wheelHeightProb);
                    aspect-ratio: 1;
                    will-change: transform;
                    
                    .item-prob {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin: calc(var(--iconWidthProb) / -2);
                        transform: rotate(90deg) translate(var(--spreadProb)) rotate(-90deg);

                        div {
                            display: grid;
                            place-items: center;
                            width: var(--iconWidthProb);
                            aspect-ratio: 1;
                            color: var(--white);
                            font-size: 2.25rem;
                            background: linear-gradient(30deg, var(--red), var(--secondary));
                            border-radius: 50%;

                            p {
                                position: relative;
                                display: grid;
                                place-items: center;
                                margin-bottom: 0;

                                span {
                                    content: 'Text disisni';
                                    position: absolute;
                                    top: calc(100% + 1.5rem);
                                    color: var(--fontBlack);
                                    font-size: 1.2rem;
                                    font-weight: 500;
                                    text-align: center;
                                    text-transform: capitalize;
                                    white-space: nowrap;
                                    
                                    b {
                                        font-weight: 500;
                                    }
                                }
                            }
                        }
                    }

                    &:nth-child(1) {
                        div p {
                            transform: rotate(-45deg);
                        }
                    }
                    &:nth-child(2) {
                        div p {
                            transform: rotate(-90deg);
                        }
                    }
                    &:nth-child(3) {
                        div p {
                            transform: rotate(-135deg);
                        }
                    }
                    &:nth-child(4) {
                        div p {
                            transform: rotate(-180deg);
                        }
                    }
                    &:nth-child(5) {
                        div p {
                            transform: rotate(-225deg);
                        }
                    }
                    &:nth-child(6) {
                        div p {
                            transform: rotate(-270deg);
                        }
                    }
                    &:nth-child(7) {
                        div p {
                            transform: rotate(-315deg);
                        }
                    }
                }
            }
        }
    }
/* #endregion ========== USAHA SENDIRI ============= */

/* #region ============= NABUNG ============= */
    #saving {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 6rem 8%;

        .inflasi {
            .title {
                text-align: center;
                margin-bottom: 4rem;
            }

            .perbedaan {
                width: 100%;

                .compare {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 2rem;
                    padding: 0 1rem;
                    margin-bottom: 1rem;

                    .home,
                    .money {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        height: 100%;
                        padding: 1.5rem;
                        background: linear-gradient(to top, hsl(from var(--primary) h s 88), var(--white) 80%);
                        border: 1px solid var(--border);
                        border-radius: 1rem;
                        transition: var(--anim);

                        > p {
                            font-size: 1.5rem;
                            font-weight: 600;
                            text-transform: capitalize;
                            margin-bottom: .5rem;
                        }
                        .wrapper {
                            flex: 1;
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;
                            gap: 1rem;

                            .txt {
                                p:first-child {
                                    font-size: 1.25rem;
                                    font-weight: 700;
                                    line-height: 1.2;
                                    margin-bottom: 0;
                                }
                                p:nth-child(2) {
                                    font-size: 4.5rem;
                                    font-weight: 700;
                                    line-height: 1;
                                    margin-bottom: 0;
                                    transition: var(--anim);
                                }
                                p:last-child {
                                    font-size: 1.2rem;
                                    font-weight: 400;
                                    margin-top: .75rem;
                                    margin-bottom: 0;
                                }
                            }

                            .wrap-img {
                                position: relative;
                                display: flex;
                                justify-content: center;
                                align-items: flex-end;
                                height: 160px;
                                aspect-ratio: 1;
                                isolation: isolate;
                                overflow: hidden;

                                svg {
                                    position: absolute;
                                    right: 0;
                                    width: 60px;
                                    height: 60px;
                                    opacity: 0;
                                    z-index: -1;
                                }
                            }
                        }
                    }

                    &.max {
                        .home {
                            background: linear-gradient(to top, hsl(from var(--green) h s 85), hsl(from var(--green) h s 95) 80%);
                            border-color: hsl(from var(--green) h s 80);

                            .wrapper {
                                .txt {
                                    p:first-child,
                                    p:nth-child(2) {
                                        color: var(--green);
                                    }
                                }
                                .wrap-img {
                                    svg {
                                        top: 100%;
                                        fill: var(--green);
                                        opacity: .85;
                                        transform: rotate(180deg);
                                        animation: arrowCompareTop 1.1s linear infinite;
                                    }
                                }
                            }
                        }
                        .money {
                            background: linear-gradient(to top, hsl(from var(--red) h s 85), hsl(from var(--red) h s 95) 80%);
                            border-color: hsl(from var(--red) h s 85);

                            .wrapper {
                                .txt {
                                    p:first-child,
                                    p:nth-child(2) {
                                        color: var(--red);
                                    }
                                }
                                .wrap-img {
                                    svg {
                                        top: -100%;
                                        fill: var(--red);
                                        opacity: .85;
                                        animation: arrowCompareDown 1.1s linear infinite;
                                    }
                                }
                            }
                        }
                    }
                }

                .slider {
                    position: relative;
                    width: 100%;
                    height: fit-content;
                    isolation: isolate;

                    input[type="range"] {
                        position: relative;
                        width: 100%;
                        margin: 0;
                        background: none;
                        outline: none;
                        appearance: none;
                    }
                    input[type="range"]::-webkit-slider-thumb {
                        appearance: none;
                        width: 48px;
                        height: 40px;
                        margin-top: 6px;
                        background-image: url(https://rv-affiliate.azureedge.net/rv-membership/images/img-knob.png);
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: contain;
                        filter: drop-shadow(5px 3px 5px rgba(0,0,0,.35));
                        cursor: ew-resize;
                    }

                    .line {
                        position: absolute;
                        top: 16px;
                        left: 0;
                        width: 100%;
                        height: 20px;
                        border-radius: 2rem;
                        overflow: hidden;
                        z-index: -1;
                        
                        span {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 0;
                            height: 100%;
                            background-color: var(--primary);
                            box-shadow: inset 0 0 15px 0 rgba(0,0,0,.5);

                            &:last-child {
                                width: 100%;
                                background-color: #cfcfcf;
                                z-index: -1;
                            }
                        }
                    }

                    datalist {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        writing-mode: sideways-lr;
                        width: 100%;

                        option {
                            position: relative;
                            color: var(--grey);
                            font-weight: 600;
                            padding: 0;
                            transform: rotate(90deg);

                            &::before {
                                content: "";
                                position: absolute;
                                top: 50%;
                                right: 1.55rem;
                                transform: translateY(-50%);
                                width: 6px;
                                border-top: 1px solid var(--grey);
                            }
                        }
                    }
                }
            }
        }
    }
    @keyframes arrowCompareTop {
        to {
            top: -100%;
        }
    }
    @keyframes arrowCompareDown {
        to {
            top: 100%;
        }
    }
/* #endregion ========== NABUNG ============= */

/* #region ============= CARA KERJA ============= */
    #howItWorks {
        padding: 0 8%;
        
        .wrapper {
            display: grid;
            grid-template-columns: 46% auto;
            align-items: center;
            height: 100vh;
            gap: 3rem;

            .image {
                position: relative;
                display: grid;
                place-items: center;
                height: 100%;
                
                div {
                    position: absolute;
                    width: 100%;
                    aspect-ratio: 1;
                    border-radius: 1rem;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;

                        &:not(:first-child) {
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                            transition: var(--anim);
                        }
                    }
                }
            }

            .text {
                .list-text {
                    .item {
                        position: relative;
                        display: flex;
                        align-items: center;
                        gap: 1rem;

                        &:not(:last-child) {
                            margin-bottom: 1rem;
                        }
                        span {
                            position: relative;
                            display: grid;
                            place-items: center;
                            height: 45px;
                            aspect-ratio: 1;
                            color: var(--grey);
                            font-size: 1.5rem;
                            font-weight: 700;
                            background-color: var(--soft-grey);
                            border-radius: 100%;
                            transition: all var(--anim);

                            &::before {
                                content: '';
                                position: absolute;
                                top: 100%;
                                left: calc(50% - 2px);
                                height: 200%;
                                width: 4px;
                                background-color: var(--grey);
                                opacity: .2;
                            }
                        }
                        &:last-child span::before {
                            display: none;
                        }
                        div {
                            flex: 1;
                            color: var(--grey);
                            padding: .75rem 1rem;
                            background-color: var(--soft-grey);
                            border-radius: 1rem;
                        }
                        p:first-child {
                            font-size: 1.1rem;
                            font-weight: 700;
                            text-transform: capitalize;
                            margin-bottom: 0;
                        }
                        p:last-child {
                            font-size: .95rem;
                            margin-bottom: 0;
                        }
                        &.active div {
                            color: var(--black);
                            background-color: var(--white);
                            box-shadow: var(--shadow);
                        }
                        &.active span {
                            color: var(--putih);
                            background-color: var(--primary);

                            &::before {
                                background-color: hsl(from var(--primary) h s 50);
                            }
                        }
                    }
                }
            }

            &:has(.text .item:nth-child(2).active) {
                .image img:nth-child(2) {
                    opacity: 1;
                }
            }
            &:has(.text .item:nth-child(3).active) {
                .image img:nth-child(3) {
                    opacity: 1;
                }
            }
            &:has(.text .item:nth-child(4).active) {
                .image img:nth-child(4) {
                    opacity: 1;
                }
            }
            &:has(.text .item:nth-child(5).active) {
                .image img:nth-child(5) {
                    opacity: 1;
                }
            }
        }
    }
/* #endregion ========== CARA KERJA ============= */

/* #region ============= REVOLUTION ============= */
    #revolution {
        position: relative;

        .solusi {
            text-align: center;
            margin: 10rem 0 0 0;
        }

        .building {
            position: relative;
            height: 100vh;
            isolation: isolate;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 50vh;
                background: linear-gradient(to bottom, var(--mainBg) 10%, hsl(from var(--mainBg) h s 50 / .25));
                z-index: -1;
            }
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background-color: var(--clr600);
                z-index: -2;
            }
            img {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center bottom;
            }
        }

        .revo-desc {
            padding: 2rem 8%;
            background: linear-gradient(to bottom, var(--clr600) 0%, var(--clr300) 40%);

            .logo {
                text-align: center;
                margin-bottom: 3rem;

                svg {
                    color: var(--putih);
                    width: 100px;
                    height: auto;
                    text-align: center;
                    margin-bottom: 1.25rem;
                }
                .subtitle {
                    color: var(--putih);
                }
            }

            .keunggulan {
                margin-bottom: 10rem;

                .text {
                    display: grid;
                    grid-template-columns: repeat(3, minmax(100px, 1fr));
                    gap: 1.75rem;
                    margin-bottom: 5rem;

                    .item {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        padding: 2.5rem 1.25rem 2rem 1.25rem;
                        background-color: var(--putih);
                        border-radius: 1.5rem;
                        transition: var(--anim);
                        cursor: pointer;

                        &::before {
                            content: '';
                            position: absolute;
                            inset: 0;
                            background-image: url(https://ik.imagekit.io/tvlk/image/imageResource/2025/02/18/1739854917308-920665746155b8077c727c2178b84b96.svg?tr=dpr-2,h-116,q-75,w-215);
                            background-repeat: no-repeat;
                            background-size: contain;
                            background-position: right bottom;
                        }
                        &:hover {
                            transform: scale(1.025);
                        }
                        img {
                            height: 75px;
                            width: auto;
                            margin-bottom: 1.25rem;
                        }
                        p:nth-of-type(1) {
                            font-size: 1.25rem;
                            font-weight: 600;
                            text-transform: capitalize;
                            margin-bottom: .25rem;
                        }
                        p:nth-of-type(2) {
                            color: var(--grey);
                            font-size: 1rem;
                            margin-bottom: 0;
                        }
                    }
                }

                .running-img {
                    --card-w: clamp(250px, 30vw, 400px);
                    --ratio: 4/3;
                    --speed: 25s;
                    --gap: 0px;

                    padding: 0 1rem;
                    -webkit-mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
                    mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
                    overflow: hidden;

                    .track {
                        display: flex;
                        gap: var(--gap);
                        width: max-content;
                        animation: scrollRunImg var(--speed) linear infinite;
                        will-change: transform;

                        &::-webkit-scrollbar {
                            display: none;
                        }
                        div {
                            position: relative;

                            img {
                                flex: 0 0 auto;
                                width: var(--card-w);
                                aspect-ratio: var(--ratio);
                                object-fit: cover;
                                user-select: none;
                                pointer-events: none;
                            }
                            span {
                                position: absolute;
                                inset: 0;
                                display: flex;
                                align-items: flex-end;
                                color: var(--putih);
                                font-size: 1.1rem;
                                font-weight: 600;
                                text-transform: capitalize;
                                padding: 1rem 1.25rem;
                                background: linear-gradient(to top, rgba(0,0,0,.5), transparent 30%);
                                user-select: none;
                                z-index: 2;
                            }
                        }
                    }
                    &:hover .track {
                        animation-play-state: paused;
                    }
                }
            }

            > svg {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                color: var(--clr300);
            }
        }
    }

    @keyframes scrollRunImg {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-1 * (var(--card-w) + var(--gap)) * 6));
        }
    }

    @media (prefers-reduced-motion: reduce){
        .running-img .track {
            animation: none;
        }
    }
/* #endregion ========== REVOLUTION ============= */

/* #region ============= KEUNTUNGAN ============= */
    #keuntungan {
        position: relative;
        padding-top: 20rem;
        isolation: isolate;
        
        .title {
            text-align: center;
            padding: 0 15%;
            margin-bottom: 6rem;

            span {
                position: absolute;
                top: 4rem;
                left: 0;
                display: block;
                font-size: 12rem;
                font-weight: 800;
                text-transform: uppercase;
                line-height: 1;
                white-space: nowrap;
                color: transparent;
                -webkit-text-stroke-width: 2px;
                -webkit-text-stroke-color: var(--hitam);
                margin-bottom: 0;
                transform: translateX(-50%);
                will-change: transform;
                opacity: .2;
                z-index: -1;
            }
        }

        .wrap-benefit {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        .benefit-item {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 0 8% 4rem 8%;
            color: var(--putih);
            background: linear-gradient(30deg, var(--clr500) 10%, var(--hitam) 85%);
            will-change: translate;
            isolation: isolate;
            overflow: hidden;

            &:not(:first-child) {
                opacity: 0;
            }
            > p {
                color: var(--secondary);
                font-size: 5rem;
                font-weight: 700;
                text-transform: capitalize;
                margin-bottom: .5rem;
            }
            > img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: .15;
                z-index: -1;
            }
        }
        .teks {
            transform-origin: top;
            max-width: 75%;
            overflow: hidden;
            
            p {
                font-size: 1.2rem;
                margin-bottom: 2rem;
            }
            .info {
                display: flex;
                align-items: center;
                gap: 2rem;

                div {
                    text-align: center;
                }
                img {
                    min-width: 125px;
                    width: 125px;
                    height: auto;
                    margin-bottom: .75rem;
                    border-radius: 1rem;
                }
                span {
                    display: block;
                    font-size: 1rem;
                    text-transform: capitalize;
                }
            }
        }
        
        .explain {
            position: relative;
            height: 0;
            overflow: hidden;
            z-index: 3;
        }
        .explain-benefit {
            > p {
                font-size: 1.1rem;
                font-weight: 600;
                margin-bottom: .5rem;
                
                i {
                    margin-right: .5rem;
                }
            }
            > ul {
                margin-top: 0;
                margin-bottom: 1.5rem;
            }
            .contoh {
                display: flex;
                align-items: flex-start;
                gap: 6%;

                img {
                    max-width: 400px;
                    height: auto;
                }
            }
            .item-contoh > p {
                width: fit-content;
                color: var(--putih);
                font-size: .9rem;
                font-weight: 600;
                text-transform: capitalize;
                padding: .25rem 1rem;
                margin-top: 1rem;
                margin-left: 2rem;
                margin-bottom: .5rem;
                background-color: var(--secondary);
                border-radius: 3rem;
            }
            .item-contoh > ul {
                padding-left: 3rem;
                margin-top: 0;
                margin-bottom: 1.5rem;

                li div p {
                    display: inline-block;
                    text-transform: capitalize;
                    margin-bottom: 0;
                    
                    &:first-child{
                        min-width: 150px;
                    }
                }
                li div span:first-child {
                    position: relative;

                    &::before {
                        content: ':';
                        position: absolute;
                        left: -.75rem;
                    }
                    &::after {
                        content: '';
                        position: absolute;
                        top: .75rem;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background-color: var(--red);
                        transform: rotate(172deg);
                    }
                }
            }
            .item-contoh:nth-child(2) ul {
                position: relative;

                &::after {
                    content: '* Include driver & BBM';
                    display: block;
                    font-style: italic;
                    margin-top: .5rem;
                }
            }
        }        
        .explain-bisnis {
            > p {
                font-size: 1.1rem;
                font-weight: 600;
                margin-bottom: .5rem;
                
                i {
                    margin-right: .5rem;
                }
            }            
            .contoh {
                > p {
                    margin-left: 2rem;
                    margin-bottom: 2rem;
                }
                ul {
                    padding-left: 3rem;
                    margin: 0;

                    li div p {
                        position: relative;
                        display: inline-block;
                        font-size: 1.25rem;
                        text-transform: capitalize;
                        margin-bottom: 0;
                        
                        &:first-child{
                            min-width: 150px;
                        }
                        &:last-child::before {
                            content: ':';
                            position: absolute;
                            left: -.75rem;
                        }
                    }
                    li:not(:last-child) {
                        margin-bottom: .5rem;
                    }
                    li:last-child div p:last-child {
                        color: var(--secondary);
                        font-weight: 700;
                        text-decoration: underline;
                    }
                }
            }
            .hasil {
                display: flex;
                align-items: center;
                gap: 8%;

                .pembagian {
                    display: flex;
                    align-items: flex-start;
                    gap: 3rem;
                    text-align: center;
                    padding-left: 8%;
                    border-left: 1px dashed var(--border);

                    div:last-child {
                        color: var(--secondary);
                        -webkit-animation: pulse40 1.5s ease-in-out infinite both;
                        animation: pulse40 1.5s ease-in-out infinite both;
                    }
                    p:first-child {
                        font-size: 1.1rem;
                        font-weight: 600;
                        margin-bottom: .5rem;
                    }
                    p:nth-child(2) {
                        font-size: 5rem;
                        font-weight: 800;
                        line-height: 1;
                        margin-bottom: 0;
                    }
                    p:last-child {
                        font-size: 1.25rem;
                        font-style: italic;
                        margin-top: .5rem;
                        margin-bottom: 0;
                    }
                }
            }
        }
        .explain-capital {
            p {
                font-size: 1.25rem;
                margin-bottom: .0;
            }
            img {
                width: auto;
                max-height: 460px;
            }
        }
        .explain-exchange {
            > p {
                font-size: 1.25rem;
                font-weight: 600;
                margin-bottom: 3rem;
            }
            .tukar > p {
                margin-top: 2rem;
                margin-bottom: 0;
            }
            .tukar-harga {
                display: flex;
                align-items: center;
                gap: 1.5rem;
                width: fit-content;
                color: var(--primary);
                text-transform: capitalize;
                padding: 1rem 2rem 1rem 1rem;
                margin-bottom: 2rem;
                background-color: var(--putih);             
                border: 1px solid var(--border);
                border-radius: 1rem;

                img {
                    width: 70px;
                    height: auto;
                }
                p:first-child {
                    font-size: 1.1rem;
                    font-weight: 600;
                    margin-bottom: 0;
                }
                p:last-child {
                    font-size: 2rem;
                    font-weight: 800;
                    margin-bottom: 0;
                }
            }
            .tukar-item {
                display: flex;
                align-items: center;
                gap: 3rem;

                > div {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }
                i {
                    display: grid;
                    place-items: center;
                    width: 55px;
                    height: 55px;
                    color: var(--primary);
                    font-size: 2.25rem;
                    background-color: var(--putih);
                    border-radius: 100%;
                }
                p:nth-of-type(1) {
                    font-size: 1.35rem;
                    font-weight: 700;
                    margin-bottom: 0;
                }
                p:nth-of-type(2) {
                    font-size: 1.1rem;
                    margin-bottom: 0;
                }
            }
        }
    }

    @-webkit-keyframes pulse40 {
        from {
            -webkit-transform: scale(1);
                    transform: scale(1);
            -webkit-transform-origin: center center;
                    transform-origin: center center;
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
        }
        10% {
            -webkit-transform: scale(0.91);
                    transform: scale(0.91);
            -webkit-animation-timing-function: ease-in;
                    animation-timing-function: ease-in;
        }
        17% {
            -webkit-transform: scale(0.98);
                    transform: scale(0.98);
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
        }
        33% {
            -webkit-transform: scale(0.87);
                    transform: scale(0.87);
            -webkit-animation-timing-function: ease-in;
                    animation-timing-function: ease-in;
        }
        45% {
            -webkit-transform: scale(1);
                    transform: scale(1);
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
        }
    }
    @keyframes pulse40 {
        from {
            -webkit-transform: scale(1);
                    transform: scale(1);
            -webkit-transform-origin: center center;
                    transform-origin: center center;
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
        }
        10% {
            -webkit-transform: scale(0.91);
                    transform: scale(0.91);
            -webkit-animation-timing-function: ease-in;
                    animation-timing-function: ease-in;
        }
        17% {
            -webkit-transform: scale(0.98);
                    transform: scale(0.98);
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
        }
        33% {
            -webkit-transform: scale(0.87);
                    transform: scale(0.87);
            -webkit-animation-timing-function: ease-in;
                    animation-timing-function: ease-in;
        }
        45% {
            -webkit-transform: scale(1);
                    transform: scale(1);
            -webkit-animation-timing-function: ease-out;
                    animation-timing-function: ease-out;
        }
    }
/* #endregion ========== KEUNTUNGAN ============= */

/* #region ============= RUNNING PROPERTY ============= */
    #runningProp {
        position: relative;
        padding: 8rem 8%;
        margin-bottom: 10rem;

        .title {
            text-align: center;
            margin-bottom: 5rem;
        }

        .lokasi-nama {
            position: relative;
            padding: 0 8%;

            .carousel-resort {
                height: 100%;

                .carousel-cell {
                    --bgHeight: 450px;

                    position: relative;
                    width: 100%;
                    margin-right: 3rem;
                    background-color: var(--black);
                    border-radius: 2rem;
                    isolation: isolate;
                    
                    &::before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: var(--bgHeight);
                        background-image: var(--head-runProp);
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center bottom;
                        border-radius: 2rem 2rem 0 0;
                        z-index: -2;
                    }
                    &::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: calc(var(--bgHeight) + 100px);
                        background: linear-gradient(to top, var(--black) 25%, transparent 60%);
                        z-index: -1;
                    }

                    .resort-item-head {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        align-items: flex-start;
                        height: var(--bgHeight);
                        padding: 1.5rem 2.5rem;
                        
                        .resort-item-txt {
                            position: relative;
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;
                            gap: 1.5rem;
                            width: 100%;
                            color: var(--putih);
                            
                            div {
                                p:first-child {
                                    font-size: 2.5rem;
                                    font-weight: 700;
                                    text-transform: capitalize;
                                    text-shadow: 0 0 6px rgba(0,0,0,.8);
                                    margin-bottom: 0;
                                }
                                p:last-child {
                                    font-size: 1.1rem;
                                    font-weight: 400;
                                    margin-bottom: 0;
                                }
                            }
                            a {
                                display: block;
                                width: fit-content;
                                color: var(--putih);
                                font-size: 1rem;
                                font-weight: 600;
                                text-transform: uppercase;
                                text-decoration: none;
                                white-space: nowrap;
                                padding: .75rem 1.25rem;
                                background-color: var(--secondary);
                                border: none;
                                outline: none;
                                border-radius: 3rem;
                                transition: all var(--anim);
                                cursor: pointer;

                                &:hover {
                                    transform: translate(-2px, -2px);
                                    box-shadow: 2px 4px 0 var(--grey);
                                }
                                i {
                                    font-size: 1.5rem;
                                    vertical-align: -3px;
                                    margin-left: 1rem;
                                }
                            }
                        }
                    }

                    .desc-resort {
                        padding: .5rem 2.5rem 2.5rem 2.5rem;

                        .desc-resort-pics {
                            display: grid;
                            grid-template-columns: 1fr .5fr .5fr;
                            gap: 1rem;
                            
                            a {
                                position: relative;
                                width: 100%;
                                height: 100%;
                                background-color: var(--grey);
                                border-radius: .75rem;
                                overflow: hidden;

                                &:first-child {
                                    grid-row: span 2;
                                }
                                img {
                                    min-width: 106%;
                                    height: 100%;
                                    object-fit: cover;
                                    transition: .5s ease;
                                }
                                &:hover img {
                                    transform: translateX(-5%);
                                }
                                span {
                                    position: absolute;
                                    left: 0;
                                    bottom: 0;
                                    width: 100%;
                                    color: var(--putih);
                                    font-size: .9rem;
                                    font-weight: 500;
                                    text-transform: capitalize;
                                    padding: .4rem 1rem;
                                    background: linear-gradient(to right, rgba(0,0,0,.6), transparent);
                                    z-index: 2;
                                }
                                &:first-child span {
                                    font-size: 1.1rem;
                                    padding: .65rem 1rem;
                                }
                            }
                        }                        
                    }
                }

                .flickity-prev-next-button {
                    top: 25%;
                    width: 55px;
                    height: 55px;
                    background-color: var(--primary);
                    border: 5px solid var(--mainBg);
                    border-radius: 100%;
                    box-shadow: none;
                    z-index: 5;
                }
                & .flickity-prev-next-button.previous {
                    left: -3%;
                }
                .flickity-prev-next-button.next {
                    right: -3%;
                }
                .flickity-prev-next-button .flickity-button-icon {
                    fill: var(--putih);
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 50%;
                    height: 50%;  
                }
                .flickity-page-dots .dot {
                    background: var(--primary);
                }
            }
        }
    }
/* #endregion ========== RUNNING PROPERTY ============= */

/* #region ============= NEXT DEV ============= */
    #nextProp {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        padding: 5rem 0 4rem 0;
        background: linear-gradient(30deg, var(--clr600), var(--primary));
        isolation: isolate;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url(https://rv-affiliate.azureedge.net/rv-membership/images/img-next-dev.webp);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            opacity: .15;
            user-select: none;
            z-index: -1;
        }
        .title {
            text-align: center;
            margin-bottom: 2rem;

            .subtitle {
                color: var(--putih);
            }
        }

        .swiper {
            width: 100%;
            padding: 0 0 50px 0;
        }
        .swiper-slide {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 400px;
            aspect-ratio: 3/4;
            background-color: var(--white);
            border-radius: 1.5rem;
            isolation: isolate;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                background-color: rgba(0,0,0,.5);
                z-index: -1;
            }
            div {
                text-align: center;
                transition: var(--anim);
                z-index: 2;

                span {
                    display: block;
                    color: var(--putih);
                    text-shadow: 0 0 2px var(--black);

                    &:first-child {
                        font-size: 2.25rem;
                        font-weight: 700;
                    }
                    &:last-child {
                        font-size: 1.25rem;
                    }
                }
            }
            img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: blur(3px);
                transition: var(--anim);
                z-index: -2;
            }
            &.swiper-slide-active.plotted:hover {
                &::before {
                    background-color: rgba(0,0,0,.15);
                }
                img {
                    filter: blur(0);
                }
                div {
                    transform: translateY(50px);
                    opacity: 0;
                }
            }
        }
    }
/* #endregion ========== NEXT DEV ============= */

/* #region ============= TESTIMONI ============= */
    #testimoni {
        position: relative;
        margin-top: 15rem;
        margin-bottom: 8rem;

        .photos {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;

            .wrap {
                display: grid;
                grid-template-columns: repeat(9, 1fr);
                gap: 1rem;
                padding: 0 2rem;
                transform: translateY(-2rem);
                
                .column {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    transition: var(--anim);

                    &:first-child,
                    &:nth-child(5),
                    &:last-child {
                        margin-top: 4rem;
                    }
                    &:nth-child(3),
                    &:nth-child(7) {
                        margin-top: 5rem;
                    }
                    &:nth-child(4) {
                        margin-top: 1rem;
                    }

                    .photo {
                        width: 100%;
                        height: 175px;
                        background-color: var(--grey);
                        border-radius: 1rem;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
            }
        }

        .comments {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            height: 100vh;
            padding: 0 8%;
            will-change: transform, opacity;
            overflow: hidden;

            .title {
                max-width: 70%;
                text-align: center;
                margin-inline: auto;
                margin-bottom: 3rem;
            }

            .review {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: nowrap;
                gap: 1.5rem;
                padding: 0 5% 5rem 5%;

                > div {
                    min-width: 300px;
                }
                .review-item {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    min-height: 325px;
                    padding: 2rem 1.5rem 1.5rem 1.5rem;
                    background: var(--putih);
                    border-radius: 1rem;
                    box-shadow: 2px 4px 15px rgba(0,0,0,.15);
                    transition: var(--anim);

                    &::before {
                        content: '\e615';
                        font-family: crumbsicon;
                        font-size: 5rem;
                        color: var(--primary);
                        position: absolute;
                        top: -.5rem;
                        right: 1rem;
                        opacity: .25;
                        transition: var(--anim);
                    }
                    &:hover {
                        color: var(--putih);
                        background: linear-gradient(30deg, var(--clr600), var(--clr200));
                    }
                    &:hover::before {
                        color: var(--putih);
                    }
                    .star {
                        display: flex;
                        align-items: center;
                        gap: .25rem;
                        color: var(--gold);
                        font-size: 1.25rem;
                        margin-bottom: 1rem;
                    }
                    > p {
                        flex: 1;
                        font-size: 1rem;
                        margin-bottom: 2rem;
                    }
                    .user {
                        display: flex;
                        align-items: center;
                        gap: 1rem;

                        img {
                            width: 40px;
                            aspect-ratio: 1;
                            border-radius: 50%;
                        }
                        span:first-child {
                            display: block;
                            font-size: 1rem;
                            font-weight: 600;
                            line-height: 1.3;
                        }
                        span:last-child {
                            display: block;
                            font-size: .8rem;
                        }
                    }
                }
            }
        }
    }
/* #endregion ========== TESTIMONI ============= */

/* #region ============= MINI STRIP ============= */
    #miniStrip {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 300px;
        padding: 0 8%;
        background-color: var(--clr700);
        isolation: isolate;
        overflow: hidden;
        
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url(https://rv-affiliate.azureedge.net/rv-membership/images/img-strip.webp);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            pointer-events: none;
            opacity: .15;
            z-index: -1;
        }
        .wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 25%;
            width: 100%;

            div {
                color: var(--putih);
                text-align: center;

                p:first-child {
                    font-size: 3.5rem;
                    font-family: var(--fontMain);
                    font-weight: 700;
                    margin-bottom: 0;
                }
                p:last-child {
                    font-size: 1.25rem;
                    margin-bottom: 0;
                }
            }
        }
    }
/* #endregion ========== MINI STRIP ============= */

/* #region ============= HARGA ============= */
    #harga {
        padding: 0 8%;
        margin-top: 10rem;

        .title {
            text-align: center;
            margin-bottom: 5rem;
        }

        .opsi {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            padding: 0 10%;
            margin-bottom: 10rem;

            .paket {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: flex-start;

                .wrap {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: 100%;
                    color: var(--hitam);
                    padding: 2.5rem 1.75rem;
                    background: radial-gradient(circle at right top, var(--putih), var(--putih), hsl(from var(--putih) h s 93));
                    border: 2px solid var(--border);
                    border-radius: 2rem;
                    box-shadow: 0 2px 20px rgba(0,0,0,.1);
                    transition: all .4s ease;

                    .best {
                        display: flex;
                        align-items: center;
                        gap: .75rem;
                        margin-bottom: 1.5rem;

                        svg {
                            width: 30px;
                            height: 30px;
                            transition: var(--anim);
                        }
                        span {
                            font-size: 1.1rem;
                            font-weight: 500;
                            text-transform: uppercase;
                        }
                    }
                    .info {
                        margin-bottom: 1rem;

                        p:first-child {
                            font-size: 1.5rem;
                            font-weight: 700;
                            text-transform: capitalize;
                            margin-bottom: 0;
                        }
                        p:nth-child(2) {
                            font-size: 1rem;
                            font-weight: 400;
                            text-transform: capitalize;
                            margin-bottom: .5rem;
                        }
                        p:last-child {
                            font-size: 2.5rem;
                            font-weight: 700;
                            margin-bottom: 0;
                        }
                    }
                    .isi {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        gap: .75rem;
                        margin-bottom: 2rem;

                        div {
                            display: flex;
                            align-items: flex-start;
                            gap: .75rem;
                            font-size: 1rem;
                            text-transform: capitalize;

                            i {
                                font-size: 1.15rem;
                                margin-top: 4px;
                            }
                        }
                    }
                    a {
                        width: 100%;
                        color: var(--primary);
                        font-size: 1.1rem;
                        font-weight: 600;
                        text-align: center;
                        text-transform: uppercase;
                        text-decoration: none;
                        padding: 1rem 1.5rem;
                        background-color: hsl(from var(--primary) h s l / .1);
                        border: none;
                        outline: none;
                        border-radius: 3rem;
                        cursor: pointer;
                    }
                }
                &.popular .wrap {
                    border-color: var(--primary);

                    .info p:first-child {
                        color: var(--primary);
                    }
                    a {
                        color: var(--putih);
                        background-color: var(--primary);
                    }
                }
                &:hover .wrap {
                    color: var(--putih);
                    background: radial-gradient(circle at right top, hsl(from var(--primary) h s 75), hsl(from var(--primary) h s 65), var(--primary));                    
                    border-color: var(--putih);
                    box-shadow: 2px 6px 30px rgba(0,0,0,.5);
                    transform: translateY(-20px);

                    .best svg {
                        width: 40px;
                        height: 40px;
                    }
                    .best span {
                        color: var(--yellow);
                    }
                    .info p:first-child {
                        color: var(--putih);
                    }
                    a {
                        color: var(--putih);
                        background-color: var(--secondary);
                    }
                }
            }
        }

        .faq {
            display: grid;
            grid-template-columns: 35% auto;
            align-items: center;
            gap: 1rem;
            padding: 0 5%;
            margin-bottom: 10rem;

            .faq-more {
                img {
                    width: 125px;
                    height: auto;
                    margin-bottom: 1rem;
                }
                .subtitle {
                    color: var(--hitam);
                    font-size: 2.75rem;
                    line-height: 1.4;
                    margin-bottom: .75rem;
                }
                .desc {
                    margin-bottom: 2rem;
                }
                a {
                    display: block;
                    width: fit-content;
                    color: var(--putih);
                    font-size: 1.1rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    text-decoration: none;
                    padding: 1rem 1.5rem;
                    background-color: var(--primary);
                    border: none;
                    outline: none;
                    border-radius: 3rem;
                    transition: all var(--anim);
                    cursor: pointer;

                    &:hover {
                        background-color: var(--secondary);
                        transform: translate(-2px, -2px);
                        box-shadow: 2px 4px 0 var(--grey);
                    }
                    i {
                        font-size: 1.5rem;
                        vertical-align: -3px;
                        margin-left: 1rem;
                    }
                }
            }

            .faq-list {
                display: flex;
                flex-direction: column;
                gap: 1rem;

                .faq-item {
                    padding: .75rem;
                    background-color: var(--putih);
                    border-radius: 1rem;

                    input {
                        display: none;
                    }
                    label {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-weight: 600;
                        padding: .5rem 1rem;
                        margin: 0;
                        border-radius: .5rem;
                        transition: var(--anim);
                        user-select: none;
                        cursor: pointer;
                        
                        span:first-child {
                            font-size: 1.15rem;
                            text-transform: capitalize;
                            
                            & i {
                                font-size: 1.5rem;
                                vertical-align: -2px;
                                margin-right: .75rem;
                            }
                        }
                        span:last-child {
                            display: block;
                            font-size: 1.5rem;
                            transition: var(--anim);
                        }
                    }
                    input:checked + label {
                        color: var(--primary);
                        background-color: hsl(from var(--primary) h s l / .15);
                    }
                    input:checked + label span:last-child {
                        transform: rotateX(180deg);
                    }
                    div {
                        display: grid;
                        grid-template-rows: 0fr;
                        transition: var(--anim);
                        overflow: hidden;
                        
                        p {
                            min-height: 0;
                            font-size: 1.1rem;
                            margin-bottom: 0;
                        }
                    }
                    input:checked ~ div {
                        grid-template-rows: 1fr;
                        padding: 1rem 0 .5rem 1.5rem;
                    }
                }
            }
        }
    }
/* #endregion ========== HARGA ============= */

/* #region ============= HUBUNGI ============= */
    #hubungi {
        position: relative;
        display: grid;
        grid-template-columns: 40% auto;
        align-items: center;
        gap: 3rem;
        padding: 0 10%;
        margin-bottom: 15rem;

        .kontak-area {
            position: relative;
            display: flex;
            height: 85%;
            padding: 2rem;
            background-color: var(--putih);
            border-radius: 1rem;
            box-shadow: var(--shadow);
            isolation: isolate;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                background-image: url(https://rv-affiliate.azureedge.net/rv-membership/images/img-office-map.webp);
                background-repeat: no-repeat;
                background-position: right bottom;
                background-size: 135%;
                transition: .5s ease;
                opacity: .4;
                z-index: -3;
            }
            &:hover::before {
                background-size: 125%;
                opacity: .6;
            }
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at right bottom, transparent 30%, var(--putih) 37%, var(--putih) 100%);
                z-index: -2;
            }
            .office-map {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 50%;
                background-image: url(https://rv-affiliate.azureedge.net/rv-membership/images/img-office-loc.webp);
                background-repeat: no-repeat;
                background-position: center bottom;
                background-size: cover;
                z-index: -1;
            }
            .kontak-list {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 1rem;
                font-size: 1rem;
                margin-top: calc(50% + 4rem);

                .address {
                    p:first-child {
                        font-size: 1.25rem;
                        font-weight: 700;
                        margin-bottom: 0;
                    }
                    p:not(:first-child, :nth-child(2)) {
                        margin-bottom: .35rem;

                        i {
                            font-size: 1.1rem;
                            margin-right: .75rem;
                        }
                    }
                }

                .socmed {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 1rem;

                    > div {
                        display: flex;
                        align-items: center;
                        gap: 1rem;

                        a {
                            display: grid;
                            place-items: center;
                            width: 40px;
                            aspect-ratio: 1;
                            color: var(--putih);
                            font-size: 1.5rem;
                            text-decoration: none;
                            background: linear-gradient(30deg, var(--hitam), hsl(from var(--hitam) h s 50));
                            border-radius: 50%;

                            &:first-child {
                                background: linear-gradient(30deg, #1877F2, hsl(from #1877F2 h s 50));
                            }
                            &:nth-child(2) {
                                background: linear-gradient(30deg, #C837AB, hsl(from #C837AB h s 50));
                            }
                        }
                    }

                    > a {
                        display: inline-block;
                        color: var(--putih);
                        font-size: 1rem;
                        font-weight: 600;
                        text-transform: uppercase;
                        text-decoration: none;
                        padding: .5rem 1rem;
                        background-color: var(--primary);
                        border: none;
                        outline: none;
                        border-radius: 3rem;
                        transition: all var(--anim);
                        cursor: pointer;

                        &:hover {
                            transform: translate(-2px, -2px);
                            box-shadow: 2px 4px 0 var(--grey);
                        }
                        i {
                            font-size: 1.1rem;
                            margin-left: .25rem;
                        }
                    }
                }
            }
        }

        .form-area {
            .title {
                margin-bottom: 2rem;
            }
            form {
                display: flex;
                flex-direction: column;
                gap: 2rem;

                label {
                    position: relative;
                    width: 100%;

                    input {
                        appearance: none;
                        width: 100%;
                        font-size: 1.1rem;
                        font-weight: 400;
                        padding: .75rem 1.25rem;
                        background-color: var(--putih);
                        border: 1px solid var(--border);
                        border-radius: .5rem;
                        outline: none;
                        transition: all .2s ease;

                        &:focus {
                            outline: none;
                        }
                        &:not(:placeholder-shown) {
                            border-color: var(--primary);
                        }
                    }
                    span {
                        position: absolute;
                        top: 50%;   
                        left: 1rem;
                        color: var(--grey);
                        font-size: 1rem;
                        font-weight: 400;
                        border-radius: .25rem;
                        transform-origin: left;
                        transform: translateY(-50%) scale(1);
                        transition: all .2s ease;
                        white-space: nowrap;
                        pointer-events: none;
                    }
                    &:has(input:focus, textarea:focus) span,
                    &:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) span {
                        top: 0;
                        left: .75rem;
                        color: var(--putih);
                        font-weight: 600;
                        padding: .1rem .75rem .15rem .75rem;
                        background-color: var(--primary);
                        transform: translateY(-50%) scale(.7);
                    }
                }

                button {
                    width: 100%;
                    color: var(--putih);
                    font-size: 1.1rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    text-decoration: none;
                    padding: 1rem 1.5rem;
                    margin-top: .5rem;
                    background-color: var(--secondary);
                    border: none;
                    outline: none;
                    border-radius: 3rem;
                    transition: all var(--anim);
                    cursor: pointer;

                    &:hover {
                        transform: translate(-2px, -2px);
                        box-shadow: 2px 4px 0 var(--grey);
                    }
                    &:disabled {
                        opacity: .8;
                        pointer-events: none;
                    }
                    .spinner-border {
                        display: none;
                        width: 1.25rem;
                        height: 1.25rem;
                        vertical-align: -3px;
                        border: 3px solid var(--putih);
                        border-top-color: transparent;
                        border-radius: 50%;
                        animation: spinnerAnim .5s linear infinite;
                    }
                    &.loading .spinner-border {
                        display: inline-block;
                    }
                    &.loading span {
                        display: none;
                    }
                }
            }
            
            .invalid-feedback {
                display: none;
                color: var(--red);
                font-size: .8rem;
                margin-top: .25rem;
            }
            .was-validated :invalid ~ .invalid-feedback {
                display: block;
                position: absolute;
            }
        }
    }
/* #endregion ========== HUBUNGI ============= */

/* #region ============= FOOTER ============= */
    #footer {
        padding: 3rem 8% 1rem 8%;
        background: linear-gradient(30deg, var(--clr600), var(--primary));

        .wrap {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 3rem;

            .logo {
                color: var(--putih);
                width: 100%;
                max-width: 300px;

                div {
                    width: 60px;
                    height: 60px;
                    padding: 1.1rem .75rem .75rem .75rem;
                    margin-bottom: 1rem;
                    background-color: var(--putih);
                    border-radius: 100%;

                    svg {
                        color: var(--hitam);
                        width: 100%;
                        height: 100%;
                    }
                }
                p:nth-of-type(1) {
                    font-size: 1.75rem;
                    font-family: var(--fontMain);
                    font-weight: 700;
                    text-transform: capitalize;
                    line-height: 1.2;
                    margin-bottom: .25rem;
                }
                p:nth-of-type(2) {
                    font-size: .95rem;
                    margin-bottom: 0;
                }
            }

            .navigasi {
                color: var(--putih);

                p {
                    font-weight: 700;
                }
                div {
                    display: flex;
                    gap: 4rem;
                    
                    ul {
                        text-transform: capitalize;
                        padding: 0;
                        margin: 0;
                        list-style-type: none;
                        
                        li:not(:last-child) {
                            margin-bottom: .5rem;
                        }
                        a {
                            text-decoration: none;

                            &:hover {
                                color: var(--secondary);
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }

            .member {
                display: grid;
                grid-template-columns: auto 30%;
                align-items: flex-end;
                width: 100%;
                max-width: 400px;

                div:first-child {
                    color: var(--putih);

                    p:first-child {
                        font-weight: 700;
                    }
                    p:last-of-type {
                        margin-bottom: 1.75rem;
                    }
                    a {
                        color: var(--putih);
                        font-size: .85rem;
                        font-weight: 600;
                        text-decoration: none;
                        padding: .65rem 1rem;
                        background-color: var(--secondary);
                        border-radius: 2rem;

                        i {
                            font-size: 1rem;
                            vertical-align: -2px;
                            margin-left: .5rem;
                        }
                    }
                }
                div:last-child {
                    position: relative;
                    isolation: isolate;

                    &::before {
                        content: '';
                        position: absolute;
                        left: -15%;
                        bottom: -1.5rem;
                        width: 130%;
                        height: 25px;
                        background-color: var(--hitam);
                        border-radius: 50%;
                        filter: blur(5px);
                        opacity: .5;
                    }
                    img {
                        position: absolute;
                        right: 0;
                        bottom: -1rem;
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }

        .mark {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding-top: 1rem;
            margin-top: 3rem;
            border-top: 1px solid var(--clr300);

            > div {
                display: flex;
                align-items: center;
                gap: .75rem;

                a {
                    display: grid;
                    place-items: center;
                    width: 28px;
                    aspect-ratio: 1;
                    color: var(--putih);
                    font-size: 1rem;
                    text-decoration: none;
                    background: linear-gradient(30deg, var(--hitam), hsl(from var(--hitam) h s 50));
                    border-radius: 50%;

                    &:first-child {
                        background: linear-gradient(30deg, #1877F2, hsl(from #1877F2 h s 50));
                    }
                    &:nth-child(2) {
                        background: linear-gradient(30deg, #C837AB, hsl(from #C837AB h s 50));
                    }
                }
            }
            .copyright {
                color: var(--putih);
                font-size: .9rem;
                text-align: center;
                margin-bottom: 0;
            }
        }
    }
/* #endregion ========== FOOTER ============= */