:root {
    --bs-primary: #4f90df;
    --bs-primary-dark: #3a72ca;
    --bs-ungu: #7B3BD4;
    --bs-coklat: #42414497;
    --bs-kuning: #FFFF00;

    --bs-ungu-rgb: 123, 59, 212;
    --bs-kuning-rgb: 255, 255, 0;
}

.btn-ungu {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-ungu);
    --bs-btn-border-color: var(--bs-ungu);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6930B8;
    --bs-btn-hover-border-color: #6930B8;

    --bs-btn-focus-shadow-rgb: var(--bs-ungu-rgb);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5D2AA5;
    --bs-btn-active-border-color: #5D2AA5;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-ungu);
    --bs-btn-disabled-border-color: var(--bs-ungu);

    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn-ungu:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-ungu:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-ungu-rgb), 0.25);
}

.btn-ungu:active {
    color: var(--bs-btn-active-color) !important;
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
}

.text-bg-ungu {
    color: #fff !important;
    background-color: var(--bs-ungu) !important;
}

.bg-ungu {
    --bs-bg-opacity: 1;
    background-color: rgba(
        123,
        59,
        212,
        var(--bs-bg-opacity)
    ) !important;
}

.text-ungu {
    color: var(--bs-ungu) !important;
}

.border-ungu {
    border-color: var(--bs-ungu) !important;
}

.border-ungu-subtle {
    border-color: color-mix(in srgb, var(--bs-ungu) 25%, white) !important;
}

.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
    --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
    --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
    --bs-bg-opacity: 0.75;

}

.bg-opacity-100 {
    --bs-bg-opacity: 1;
}

.bg-coklat {
    --bs-bg-opacity: 1;
    background-color: rgba(
        123,
        59,
        212,
        var(--bs-bg-opacity)
    ) !important;
}

.text-coklat {
    color: var(--bs-coklat) !important;
}

.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
    --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
    --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
    --bs-bg-opacity: 0.75;

}

.bg-opacity-100 {
    --bs-bg-opacity: 1;
}


.bg-kuning {
    background-color: var(--bs-kuning) !important;
}


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

.section-shop {
    position: relative;

    background:
        linear-gradient(
            170deg,
            var(--bs-primary-dark, #3a72ca) 0%,
            var(--bs-primary, #4f90df) 35%,
            #8dc9f2 65%,
            #ffffff 100%
        );

    isolation: isolate;
}


/* =========================================================
   PRIMARY DARK
========================================================= */

.text-primary-dark {
    color: var(--bs-primary-dark, #3a72ca) !important;
}


/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.shop-decoration {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}


/* Lingkaran kiri bawah */

.shop-circle-left {
    width: 260px;
    height: 260px;

    left: -80px;
    bottom: -80px;

    border-radius: 50%;

    background: rgba(70, 145, 220, 0.30);
}


/* Lingkaran kanan atas */

.shop-circle-right {
    width: 330px;
    height: 330px;

    right: -80px;
    top: -120px;

    border-radius: 50%;

    background: rgba(50, 125, 205, 0.35);
}


/* =========================================================
   DOT PATTERN
========================================================= */

.shop-dots {
    position: absolute;

    display: grid;

    grid-template-columns: repeat(6, 8px);

    gap: 13px;

    pointer-events: none;
}


/* Titik kiri atas */

.shop-dots-left {
    left: 220px;
    top: 25px;
}


/* Titik kanan bawah */

.shop-dots-right {
    right: 70px;
    bottom: 55px;
}


/* Titik */

.shop-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.194);
}


/* Titik kanan dibuat biru */

.shop-dots-right span {
    background: #078ce3;
}


/*=====================================================
PAKET
=====================================================*/

.section-paket{

    background:
        radial-gradient(circle at top right,
            #d28df24f,
            transparent 80%);

}

.section-fitur{
    background:
        radial-gradient(circle at top left,
            #c5f28d4f,
            transparent 70%);
}

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

.shop-icon {
    width: 55px;
    height: 55px;

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

    border-radius: 16px;

    background: rgba(79, 144, 223, 0.12);

    color: var(--bs-primary, #4f90df);

    font-size: 25px;
}


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

.shop-mini-card {
    min-height: 100px;

    display: flex;
    flex-direction: column;

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

    gap: 8px;

    padding: 15px;

    border-radius: 15px;

    background: #f8f9fa;

    border: 1px solid #eef0f3;

    transition: all 0.25s ease;
}


.shop-mini-card i {
    font-size: 25px;
}


.shop-mini-card span {
    font-size: 14px;

    font-weight: 600;

    color: #495057;
}


.shop-mini-card:hover {
    background: rgba(79, 144, 223, 0.08);

    border-color: rgba(79, 144, 223, 0.25);

    transform: translateY(-3px);
}


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

@media (max-width: 991.98px) {

    .section-shop {
        min-height: auto;
    }

    .shop-circle-right {
        width: 250px;
        height: 250px;

        right: -100px;
        top: -100px;
    }

    .shop-circle-left {
        width: 200px;
        height: 200px;

        left: -80px;
        bottom: -80px;
    }

    .shop-dots-left {
        left: 30px;
        top: 35px;
    }

    .shop-dots-right {
        right: 30px;
        bottom: 30px;
    }

}


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

@media (max-width: 575.98px) {

    .section-shop {
        background:
            linear-gradient(
                170deg,
                var(--bs-primary-dark, #3a72ca) 0%,
                var(--bs-primary, #4f90df) 45%,
                #ffffff 100%
            );
    }

    .shop-dots-left {
        left: 20px;
        top: 25px;

        transform: scale(0.75);
        transform-origin: top left;
    }

    .shop-dots-right {
        right: 20px;
        bottom: 25px;

        transform: scale(0.75);
        transform-origin: bottom right;
    }

    .shop-circle-right {
        width: 180px;
        height: 180px;

        right: -90px;
        top: -70px;
    }

    .shop-circle-left {
        width: 150px;
        height: 150px;

        left: -70px;
        bottom: -70px;
    }

    .shop-card {
        padding: 20px !important;
    }

}