* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #111315;
    color: #f5f5f5;
}

body {
    overflow-x: hidden;
}

button {
    font-family: inherit;
    color: inherit;
    border: none;
    cursor: pointer;
}

.app {
    width: 100%;
    max-width: 500px;
    min-height: 100vh;
    margin: auto;
    background: #111315;
    position: relative;
    padding-bottom: 100px;
}

/* =====================================================
   HEADER - ULTRA PREMIUM
===================================================== */

.header {
    min-height: 245px;

    position: relative;

    padding: 20px 20px 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(96,220,255,.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(0,70,120,.25),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #087db4 0%,
            #0674a8 48%,
            #075f91 100%
        );

    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.08);
}


/* =====================================================
   PREMIUM BACKGROUND PATTERN
===================================================== */

.header::before {
    content: "";

    position: absolute;

    inset: -90px;

    background-image:
        linear-gradient(
            135deg,
            transparent 46%,
            rgba(255,255,255,.045) 47%,
            transparent 48%
        ),
        linear-gradient(
            45deg,
            transparent 46%,
            rgba(255,255,255,.025) 47%,
            transparent 48%
        );

    background-size: 85px 85px;

    transform: rotate(10deg);

    pointer-events: none;

    opacity: .8;
}


/* =====================================================
   SOFT GLOW
===================================================== */

.header::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -70px;

    border-radius: 50%;

    background: rgba(91,215,255,.13);

    filter: blur(35px);

    pointer-events: none;
}


/* =====================================================
   MAIN LOGO - LEFT
===================================================== */

.main-logo {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    margin-top: 2px;

    padding-left: 2px;
}

.main-logo img {
    display: block;

    width: auto;

    max-width: 80px;

    max-height: 48px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 12px rgba(0,0,0,.14)
        );
}

/* =====================================================
   TIMEZONE CLOCK - TOP RIGHT
===================================================== */

.timezone-clock {
    position: absolute;

    z-index: 5;

    top: 16px;
    right: 18px;

    display: flex;

    align-items: center;

    gap: 4px;

    white-space: nowrap;
}


/* =====================================================
   EACH TIMEZONE BADGE
===================================================== */

.timezone-clock span {
    display: inline-flex;

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

    height: 27px;

    padding: 0 7px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.045)
        );

    border: 1px solid rgba(255,255,255,.16);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 3px 9px rgba(0,0,0,.10);

    backdrop-filter: blur(10px);

    color: rgba(255,255,255,.94);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .15px;

    font-variant-numeric: tabular-nums;
}


/* =====================================================
   SEPARATOR
===================================================== */

.timezone-clock i {
    display: none;
}

/* =====================================================
   OFFICIAL INFORMATION
===================================================== */

.official-info {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 22px;

    margin-top: 38px;

    padding: 13px 3px 0;

    border-top: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 -1px 0 rgba(0,0,0,.05);
}


/* =====================================================
   REGISTERED
===================================================== */

.registered {
    flex: 1;

    min-width: 0;
}

.info-title {
    font-size: 10px;
    font-weight: 500;

    line-height: 1.4;

    color: rgba(255,255,255,.72);

    margin-bottom: 8px;

    letter-spacing: .1px;
}


/* =====================================================
   OFFICIAL LOGOS
===================================================== */

.official-logos {
    display: flex;

    align-items: center;

    gap: 8px;
}

.official-logo {
    height: 27px;

    display: flex;

    align-items: center;

    padding: 4px 7px;

    border-radius: 7px;

    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(8px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}

.official-logo img {
    width: auto;

    max-width: 60px;

    height: 19px;

    object-fit: contain;
}

.logo-divider {
    color: rgba(255,255,255,.35);

    font-size: 15px;

    font-weight: 300;
}


/* =====================================================
   OFFICIAL PARTNER
===================================================== */

.partner {
    width: 96px;

    flex-shrink: 0;
}

.partner-title {
    font-size: 10px;
    font-weight: 500;

    color: rgba(255,255,255,.72);

    margin-bottom: 8px;

    white-space: nowrap;

    letter-spacing: .1px;
}

.partner-logo {
    height: 27px;

    display: flex;

    align-items: center;

    padding: 4px 7px;

    width: fit-content;

    min-width: 75px;

    border-radius: 7px;

    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(8px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}

.partner-logo img {
    width: auto;

    max-width: 82px;

    height: 19px;

    object-fit: contain;
}


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

@media (max-width: 390px) {

    .header {
        min-height: 225px;

        padding-left: 17px;
        padding-right: 17px;
    }

    .main-logo {
        padding-left: 2px;
    }

    .main-logo img {
        max-width: 125px;

        max-height: 42px;
    }

    .official-info {
        margin-top: 34px;

        gap: 13px;

        padding-top: 11px;
    }

    .info-title,
    .partner-title {
        font-size: 12px;
    }

    .official-logo {
        height: 25px;

        padding: 3px 5px;
    }

    .official-logo img {
        max-width: 52px;

        height: 17px;
    }

    .partner {
        width: 85px;
    }

    .partner-logo {
        height: 25px;

        min-width: 68px;

        padding: 3px 5px;
    }

    .partner-logo img {
        max-width: 72px;

        height: 17px;
    }
}

/* =====================================================
   PROMO BADGES - ULTRA COMPACT PREMIUM
===================================================== */

.header-promos {
    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 6px;

    width: 100%;

    margin-top: 18px;

    padding: 0 2px;

    overflow: hidden;
}


/* =====================================================
   PROMO BADGE
===================================================== */

.header-promo {
    height: 27px;

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 0 9px 0 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.045)
        );

    border: 1px solid rgba(255,255,255,.14);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 3px 9px rgba(0,0,0,.09);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    color: rgba(255,255,255,.95);

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}


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

.promo-mini-icon {
    width: 20px;

    height: 20px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #6be2ff,
            #219bc8
        );

    color: #fff;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.20),
        0 2px 5px rgba(0,0,0,.14);
}


/* =====================================================
   FONT AWESOME ICON
===================================================== */

.promo-mini-icon i {
    font-size: 9px;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =====================================================
   BPKB ICON
===================================================== */

.promo-mini-icon.bpkb {
    background:
        linear-gradient(
            145deg,
            #72d3f5,
            #197da7
        );
}

.promo-mini-icon.bpkb i {
    font-size: 9px;
}


/* =====================================================
   PROMO TEXT
===================================================== */

.header-promo > span:not(.promo-mini-icon) {
    display: block;

    color: rgba(255,255,255,.94);

    font-size: 9px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: .05px;
}


/* =====================================================
   ARROW
===================================================== */

.header-promo b {
    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 1px;

    font-size: 14px;

    font-weight: 300;

    line-height: 1;

    color: rgba(255,255,255,.72);
}


/* =====================================================
   HOVER
===================================================== */

.header-promo:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.17),
            rgba(255,255,255,.065)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 12px rgba(0,0,0,.12);
}


/* =====================================================
   PRESS EFFECT
===================================================== */

.header-promo:active {
    transform: scale(.96);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.19),
            rgba(255,255,255,.07)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 2px 7px rgba(0,0,0,.10);
}


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

@media (max-width: 390px) {

    .header-promos {
        gap: 5px;

        margin-top: 16px;

        padding: 0 1px;
    }

    .header-promo {
        height: 26px;

        gap: 4px;

        padding: 0 7px 0 3px;

        border-radius: 999px;

        font-size: 8px;
    }

    .promo-mini-icon {
        width: 19px;

        height: 19px;

        border-radius: 50%;
    }

    .promo-mini-icon i {
        font-size: 8px;
    }

    .header-promo > span:not(.promo-mini-icon) {
        font-size: 8px;
    }

    .header-promo b {
        font-size: 13px;
    }
}

/* =====================================================
   CONTENT - PREMIUM FLOATING
===================================================== */

.content {
    position: relative;

    z-index: 10;

    margin-top: -42px;

    padding:
        27px
        22px
        45px;

    border-radius:
        32px
        32px
        0
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255,255,255,.035),
            transparent 24%
        ),
        radial-gradient(
            circle at 95% 18%,
            rgba(43,151,190,.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #15181b 0%,
            #111315 45%,
            #0f1113 100%
        );

    border-top:
        1px solid
        rgba(255,255,255,.07);

    box-shadow:
        0 -15px 35px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.035);
}


/* =====================================================
   SERVICES CARD
===================================================== */

.services-card {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        19px
        14px
        18px;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.045),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #292e32 0%,
            #23272b 48%,
            #1d2124 100%
        );

    border:
        1px solid
        rgba(255,255,255,.055);

    box-shadow:
        0 16px 35px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 0 rgba(0,0,0,.30);

    overflow: hidden;
}


/* =====================================================
   CARD PREMIUM LIGHT
===================================================== */

.services-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.11),
            transparent
        );

    pointer-events: none;
}


/* =====================================================
   CARD CORNER GLOW
===================================================== */

.services-card::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    left: -65px;
    bottom: -65px;

    border-radius: 50%;

    background:
        rgba(63,178,220,.045);

    filter: blur(22px);

    pointer-events: none;
}


/* =====================================================
   SERVICE GRID
===================================================== */

.service-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px
        7px;
}


/* =====================================================
   SERVICE
===================================================== */

.service {
    width: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;

    min-width: 0;

    color: #eeeeee;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform .16s ease;
}

.service:active {
    transform: scale(.93);
}


/* =====================================================
   SERVICE ICON
===================================================== */

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

    flex: 0 0 55px;

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

    position: relative;

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 35% 20%,
            rgba(255,255,255,.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #383e43 0%,
            #2a2f33 52%,
            #22262a 100%
        );

    border:
        1px solid
        rgba(255,255,255,.055);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.075),
        inset 0 -2px 3px rgba(0,0,0,.28),
        0 7px 16px rgba(0,0,0,.20);

    overflow: hidden;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


/* =====================================================
   ICON TOP SHINE
===================================================== */

.service-icon::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.065),
            transparent 42%,
            transparent 70%,
            rgba(0,0,0,.06)
        );

    pointer-events: none;
}


/* =====================================================
   ICON IMAGE
===================================================== */

.service-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;

    display: block;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 3px 5px rgba(0,0,0,.22)
        );

    user-select: none;

    -webkit-user-drag: none;

    transition:
        transform .16s ease;
}


/* =====================================================
   SERVICE LABEL
===================================================== */

.service > span {
    width: 100%;

    margin-top: 8px;

    padding: 0 2px;

    color: #dfe2e4;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.25;

    text-align: center;

    letter-spacing: -.08px;

    white-space: normal;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =====================================================
   PRESS
===================================================== */

.service:active .service-icon {
    transform: translateY(1px) scale(.97);

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.04),
        inset 0 -2px 4px rgba(0,0,0,.35),
        0 4px 9px rgba(0,0,0,.18);
}

.service:active .service-icon img {
    transform: scale(.94);
}


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

@media (max-width: 390px) {

    .content {
        margin-top: -38px;

        padding:
            25px
            17px
            40px;

        border-radius:
            29px
            29px
            0
            0;
    }

    .services-card {
        padding:
            18px
            11px
            17px;

        border-radius: 23px;
    }

    .service-grid {
        gap: 17px 5px;
    }

    .service-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        border-radius: 16px;
    }

    .service-icon img {
        width: 30px;
        height: 30px;
    }

    .service > span {
        font-size: 10.5px;
    }
}


/* =====================================================
   VERY SMALL SCREEN
===================================================== */

@media (max-width: 350px) {

    .content {
        margin-top: -35px;

        padding-left: 14px;
        padding-right: 14px;
    }

    .services-card {
        padding-left: 9px;
        padding-right: 9px;
    }

    .service-icon {
        width: 49px;
        height: 49px;

        flex-basis: 49px;
    }

    .service-icon img {
        width: 28px;
        height: 28px;
    }
}

/* =====================================================
   PROMO UNTUK KAMU
===================================================== */

.dummy-card {
    margin-top: 24px;
    padding: 19px 16px 16px;

    position: relative;
    overflow: hidden;

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(54,185,225,.06),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #2a2f33 0%,
            #24282c 50%,
            #1d2124 100%
        );

    border: 1px solid rgba(255,255,255,.055);

    box-shadow:
        0 15px 32px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 0 rgba(0,0,0,.28);
}


/* TOP LINE */

.dummy-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    right: 12%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );
}


/* GLOW */

.dummy-card::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    right: -75px;
    top: -70px;

    border-radius: 50%;

    background: rgba(42,184,224,.07);

    filter: blur(28px);

    pointer-events: none;
}


/* =====================================================
   TITLE
===================================================== */

.promo-title {
    position: relative;
    z-index: 2;

    margin-bottom: 15px;
}

.promo-title h3 {
    margin: 0;

    color: #f2f4f5;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.25px;
}

.promo-title p {
    margin: 5px 0 0;

    color: #92999e;

    font-size: 10.5px;
    font-weight: 400;

    line-height: 1.3;
}


/* =====================================================
   PROMO LIST
===================================================== */

.promo-list {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* =====================================================
   PROMO ITEM
===================================================== */

.promo-item {
    width: 100%;

    min-height: 66px;

    padding: 9px 10px;

    display: flex;
    align-items: center;

    gap: 11px;

    position: relative;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    border: 1px solid rgba(255,255,255,.035);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

    transition:
        transform .16s ease,
        background .16s ease;
}

.promo-item:active {
    transform: scale(.985);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        );
}


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

.promo-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.08),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #373d42,
            #292e32
        );

    border: 1px solid rgba(255,255,255,.055);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.07),
        inset 0 -2px 3px rgba(0,0,0,.25),
        0 5px 12px rgba(0,0,0,.18);
}

.promo-icon i {
    font-size: 17px;

    color: #dce3e6;

    filter:
        drop-shadow(
            0 2px 4px rgba(0,0,0,.25)
        );
}


/* =====================================================
   INFO
===================================================== */

.promo-info {
    min-width: 0;
    flex: 1;
}

.promo-info strong {
    display: block;

    color: #edf0f1;

    font-size: 12.5px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.1px;
}

.promo-info p {
    margin: 5px 0 0;

    color: #92999e;

    font-size: 10.5px;
    font-weight: 400;

    line-height: 1.25;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =====================================================
   ARROW
===================================================== */

.promo-arrow {
    flex: 0 0 auto;

    color: #687177;

    font-size: 10px;

    margin-right: 2px;
}


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

@media (max-width: 360px) {

    .dummy-card {
        margin-top: 22px;
        padding: 17px 13px 14px;

        border-radius: 22px;
    }

    .promo-title h3 {
        font-size: 15px;
    }

    .promo-item {
        min-height: 62px;

        padding: 8px;

        gap: 9px;

        border-radius: 15px;
    }

    .promo-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        border-radius: 13px;
    }

    .promo-icon i {
        font-size: 15px;
    }

    .promo-info strong {
        font-size: 12px;
    }

    .promo-info p {
        font-size: 10px;
    }

}

/* =====================================================
   PROMO SECTION - FULL LANDSCAPE SLIDER
===================================================== */

.promo-section {
    width: 100%;

    margin-top: 22px;

    position: relative;

    overflow: hidden;
}


/* =====================================================
   PROMO SLIDER
===================================================== */

.promo-grid {
    display: flex;

    width: 100%;

    gap: 12px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}

.promo-grid::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   PROMO BANNER
===================================================== */

.promo-banner {
    position: relative;

    flex:
        0 0
        100%;

    width: 100%;

    aspect-ratio: 16 / 7;

    overflow: hidden;

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #343a3f 0%,
            #22272b 100%
        );

    border:
        1px solid
        rgba(255,255,255,.06);

    box-shadow:
        0 12px 28px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.07);

    scroll-snap-align: start;

    scroll-snap-stop: always;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


/* =====================================================
   POSTER IMAGE
===================================================== */

.promo-banner img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;
}


/* =====================================================
   PREMIUM OVERLAY
===================================================== */

.promo-banner::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            transparent 35%,
            rgba(0,0,0,.08)
        );

    pointer-events: none;
}


/* =====================================================
   TOP LIGHT
===================================================== */

.promo-banner::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;

    left: 10%;
    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    pointer-events: none;
}


/* =====================================================
   PRESS
===================================================== */

.promo-banner:active {
    transform: scale(.985);

    box-shadow:
        0 7px 16px rgba(0,0,0,.18);
}


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

@media (max-width: 390px) {

    .promo-section {
        margin-top: 20px;
    }

    .promo-grid {
        gap: 10px;
    }

    .promo-banner {
        flex-basis: 100%;

        aspect-ratio: 16 / 7;

        border-radius: 17px;
    }
}

/* =====================================================
   MINI LOADING
===================================================== */

.mini-loading {
    position: fixed;

    inset: 0;

    z-index: 99999;

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

    background: rgba(8, 10, 12, .42);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


/* SHOW */

.mini-loading.show {
    opacity: 1;
    visibility: visible;
}


/* =====================================================
   LOADING BOX
===================================================== */

.mini-loading-box {

    min-width: 105px;

    padding: 15px 17px;

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

    gap: 9px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(48,53,58,.97),
            rgba(29,33,36,.97)
        );

    border: 1px solid rgba(255,255,255,.07);

    box-shadow:
        0 15px 35px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.07);

    transform: scale(.92);

    transition:
        transform .2s ease;
}


.mini-loading.show .mini-loading-box {
    transform: scale(1);
}


/* =====================================================
   SPINNER
===================================================== */

.mini-spinner {

    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    border-radius: 50%;

    border:
        2px solid rgba(255,255,255,.16);

    border-top-color: #ffffff;

    animation:
        miniSpin .7s linear infinite;
}


@keyframes miniSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =====================================================
   TEXT
===================================================== */

.mini-loading-box span {

    color: #e9edef;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

}


/* =====================================================
   CLICK EFFECT
===================================================== */

.service.clicked,
.promo-item.clicked,
.promo-banner.clicked {

    transform: scale(.985);

}

/* =====================================================
   POPULAR BADGE - GOPAY BLUE PREMIUM
===================================================== */

.service-icon {
    overflow: visible;
}


/* BADGE */

.popular-badge {

    position: absolute;

    top: -7px;
    right: -9px;

    z-index: 10;

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

    min-width: 43px;
    height: 17px;

    padding: 0 6px;

    border-radius: 999px;

    color: #ffffff;

    font-size: 7.5px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: .1px;

    white-space: nowrap;

    /* GOPAY BLUE */

    background:
        linear-gradient(
            135deg,
            #00a9e8 0%,
            #008ed3 48%,
            #0076b9 100%
        );

    border: 1px solid rgba(255,255,255,.30);

    box-shadow:

        0 4px 10px
        rgba(0,120,190,.32),

        0 2px 5px
        rgba(0,0,0,.25),

        inset 0 1px 0
        rgba(255,255,255,.30),

        inset 0 -1px 0
        rgba(0,50,90,.20);

    text-shadow:
        0 1px 2px
        rgba(0,60,100,.35);

}


/* =====================================================
   PREMIUM HIGHLIGHT
===================================================== */

.popular-badge::before {

    content: "";

    position: absolute;

    top: 1px;

    left: 12%;
    right: 12%;

    height: 1px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    opacity: .75;

    pointer-events: none;
}


/* =====================================================
   SOFT BLUE GLOW
===================================================== */

.popular-badge::after {

    content: "";

    position: absolute;

    inset: -3px;

    z-index: -1;

    border-radius: inherit;

    background:
        rgba(0,166,229,.28);

    filter: blur(7px);

    opacity: .35;

    pointer-events: none;
}


/* =====================================================
   ACTIVE
===================================================== */

.service:active .popular-badge {

    transform: scale(.94);

    box-shadow:

        0 2px 6px
        rgba(0,120,190,.25),

        inset 0 1px 0
        rgba(255,255,255,.20);

}


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

@media (max-width: 390px) {

    .popular-badge {

        top: -6px;
        right: -8px;

        min-width: 41px;
        height: 16px;

        padding: 0 5px;

        font-size: 7px;

    }

}


@media (max-width: 350px) {

    .popular-badge {

        top: -6px;
        right: -7px;

        min-width: 38px;
        height: 15px;

        font-size: 6.5px;

    }

}