* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    background: #f7f8fc;
    overflow: hidden;
}

body {
    color: #303342;
}

button, input, select, textarea {
    font-family: 'Inter', sans-serif;
}

/* =====================================================
    APP
====================================================== */

.rating-app {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* =====================================================
    SPLASH SCREEN
====================================================== */

.splash-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 90% 25%, rgba(133,110,255,.20), transparent 28%),
        linear-gradient(145deg, #28a7c4 0%, #2854cb 50%, #536df5 100%);
    transform: translateY(0);
    transition: transform .6s cubic-bezier(.77,0,.18,1);
    touch-action: none;
}

.splash-screen.hide {
    transform: translateY(-100%);
    pointer-events: none;
}

/* =====================================================
    SPLASH DECORATION
====================================================== */

.splash-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.circle-one {
    width: 300px;
    height: 300px;
    top: -150px;
    right: -110px;
    background: radial-gradient(circle, rgba(255,255,255,.15), rgba(255,255,255,0));
}

.circle-two {
    width: 230px;
    height: 230px;
    left: -130px;
    bottom: 80px;
    background: radial-gradient(circle, rgba(111,130,255,.25), rgba(111,130,255,0));
}

.splash-screen::before {
    display: none;
}

.splash-wave {
    position: absolute;
    left: -10%;
    bottom: -130px;
    width: 120%;
    height: 300px;
    background: linear-gradient(135deg, rgba(99, 128, 255, 0.65), rgba(73,104,255,.15));
    border-radius: 50% 50% 0 0;
    transform: rotate(-5deg);
    pointer-events: none;
}

/* =====================================================
    SPLASH CONTENT
====================================================== */

.splash-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 420px;
    padding: 30px;
    text-align: center;
    color: #fff;
}

/* =====================================================
    LOGO
====================================================== */

.logo-wrapper {
    width: 125px;
    height: 125px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
    backdrop-filter: blur(15px);
}

.logo-wrapper img {
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;
}

.brand-subtitle {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 4px;
    opacity: .75;
}

/* =====================================================
    SWIPE AREA
====================================================== */

.swipe-area {
    position: absolute;
    left: 50%;
    bottom: 82px;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
}

.swipe-icon {
    position: relative;
    width: 52px;
    height: 70px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.swipe-icon::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 34px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}

.swipe-icon i {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #536df5;
    font-size: 13px;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    animation: swipeUpGesture 1.8s ease-in-out infinite;
}

.swipe-text {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .7;
}

@keyframes swipeUpGesture {
    0% {
        opacity: .4;
        transform: translateY(18px);
    }
    20% {
        opacity: 1;
    }
    55% {
        opacity: 1;
        transform: translateY(-13px);
    }
    75% {
        opacity: .2;
        transform: translateY(-25px);
    }
    100% {
        opacity: .4;
        transform: translateY(18px);
    }
}

/* =====================================================
    FORM SCREEN
====================================================== */

.form-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    padding: 20px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 90% 0%, #e9e7ff, transparent 28%),
        #f7f8fc;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.77,0,.18,1);
    scrollbar-width: thin;
}

.form-screen.show {
    transform: translateY(0);
}

.form-container {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding-bottom: 30px;
}

/* =====================================================
    HEADER IMAGE
====================================================== */

.review-header {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #ecebff, #f4f5ff);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(40,45,90,.08);
}

.review-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(20,25,70,.12));
    pointer-events: none;
}

.review-header-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* =====================================================
    FORM CARD
====================================================== */

.form-card {
    position: relative;
    margin: 18px 0 30px;
    padding: 25px 22px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 12px 40px rgba(40,45,90,.07);
}

/* =====================================================
    FORM GROUP
====================================================== */

.form-group-modern {
    margin-bottom: 21px;
}

.form-label-modern {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
    color: #353847;
    font-size: 11px;
    font-weight: 600;
}

.label-icon {
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    border-radius: 9px;
    background: #f0efff;
    color: #6759da;
    font-size: 11px;
}

/* =====================================================
    INPUT
====================================================== */

.input-modern {
    width: 100%;
    height: 45px;
    padding: 0 13px;
    border: 1px solid #e7e8ef;
    border-radius: 11px;
    outline: none;
    background: #fafbfe;
    color: #353847;
    font-size: 11px;
    transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}

.input-modern:focus {
    background: #fff;
    border-color: #7467e9;
    box-shadow: 0 0 0 3px rgba(116,103,233,.09);
}

.input-modern::placeholder {
    color: #adb1bd;
}

/* =====================================================
    SELECT
====================================================== */

select.input-modern {
    appearance: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #999 50%),
        linear-gradient(135deg, #999 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 18px,
        calc(100% - 12px) 18px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* =====================================================
   SELECT2 - KAKAK TENTOR
===================================================== */

#KelasReview-tentor + .select2-container {
    width: 100% !important;
    font-family: inherit;
}

/* SELECT UTAMA */
#KelasReview-tentor + .select2-container .select2-selection--single {
    height: 45px !important;
    min-height: 45px !important;
    padding: 0 42px 0 14px !important;

    display: flex;
    align-items: center;

    background: #fff;
    border: 1px solid #dfe3eb !important;
    border-radius: 11px !important;

    cursor: pointer;
    transition: all .25s ease;
}

/* TEXT */
#KelasReview-tentor + .select2-container .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;

    color: #4b5563 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: normal !important;

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

/* PLACEHOLDER */
#KelasReview-tentor + .select2-container .select2-selection__placeholder {
    color: #9ca3af !important;
}

/* ARROW */
#KelasReview-tentor + .select2-container .select2-selection__arrow {
    width: 36px !important;
    height: 100% !important;
    top: 0 !important;
    right: 4px !important;
}

#KelasReview-tentor + .select2-container .select2-selection__arrow b {
    border-color: #9ca3af transparent transparent transparent !important;
    border-width: 6px 6px 0 6px !important;
    margin-left: -6px !important;
    margin-top: -3px !important;
    transition: transform .2s ease;
}

/* FOCUS / OPEN */
#KelasReview-tentor + .select2-container--focus .select2-selection--single,
#KelasReview-tentor + .select2-container--open .select2-selection--single {
    border-color: #9c8cff !important;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, .10) !important;
}

/* ARROW KETIKA OPEN */
#KelasReview-tentor + .select2-container--open .select2-selection__arrow b {
    transform: rotate(180deg);
}

/* HOVER */
#KelasReview-tentor + .select2-container .select2-selection--single:hover {
    border-color: #c8c3f5 !important;
}

/* =====================================================
   DROPDOWN
===================================================== */

.select2-container--bootstrap4 .select2-dropdown {
    margin-top: 6px;
    border: 1px solid #e6e8ef !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow:
        0 10px 30px rgba(30, 35, 50, .10),
        0 2px 8px rgba(30, 35, 50, .05);

    overflow: hidden;
}

/* SEARCH AREA */
.select2-container--bootstrap4 .select2-search--dropdown {
    padding: 10px !important;
    background: #fff;
}

/* SEARCH INPUT */
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    height: 40px !important;

    padding: 0 12px !important;

    border: 1px solid #e5e7eb !important;
    border-radius: 9px !important;

    background: #f8f9fc;

    font-family: inherit;
    font-size: 11px;

    outline: none !important;

    transition: all .2s ease;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: #b8b0ff !important;
    background: #fff;

    box-shadow: 0 0 0 3px rgba(108, 92, 231, .08) !important;
}

/* =====================================================
   OPTION
===================================================== */

.select2-container--bootstrap4 .select2-results__option {
    padding: 10px 14px !important;

    color: #4b5563 !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 400 !important;

    line-height: 1.4 !important;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease;
}

/* HOVER */
.select2-container--bootstrap4 .select2-results__option--highlighted {
    background: #f3f1ff !important;
    color: #5b4fd6 !important;
}

/* SELECTED */
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background: #f7f5ff !important;
    color: #5b4fd6 !important;
    font-weight: 500 !important;
}

/* SELECTED + HOVER */
.select2-container--bootstrap4 .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
    background: #eeeaff !important;
    color: #5145cd !important;
}

/* =====================================================
   CLEAR BUTTON
===================================================== */

#KelasReview-tentor + .select2-container .select2-selection__clear {
    position: absolute;

    right: 27px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    color: #b5b8c0 !important;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: color .2s ease;
}

#KelasReview-tentor + .select2-container .select2-selection__clear:hover {
    color: #ef6b73 !important;
}

/* =====================================================
   DISABLED
===================================================== */

#KelasReview-tentor + .select2-container--disabled .select2-selection--single {
    background: #f8f9fb !important;
    border-color: #e5e7eb !important;
    color: #adb3bd !important;
    cursor: not-allowed;
}

#KelasReview-tentor + .select2-container--disabled .select2-selection__rendered {
    color: #adb3bd !important;
}


/* =====================================================
   FORM VALIDATION
===================================================== */

.form-group-modern.is-invalid .input-modern {
    border-color: #ef6b73 !important;
    background-color: #fffafa;
    box-shadow: 0 0 0 3px rgba(239, 107, 115, .08);
}

.form-group-modern.is-invalid .input-modern:focus {
    border-color: #ef6b73 !important;
    box-shadow: 0 0 0 3px rgba(239, 107, 115, .10);
}

.form-group-modern.is-invalid .form-label-modern {
    color: #d94b55;
}

.form-group-modern.is-invalid .label-icon {
    color: #ef6b73;
    background: #fff0f1;
}

/* Pesan error */
.form-error-message {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 7px;
    padding-left: 3px;

    color: #dc5962;
    font-size: 8px;
    font-weight: 500;

    line-height: 1.4;

    animation: formErrorShow .25s ease;
}

.form-error-message i {
    font-size: 8px;
}

/* Animasi muncul */
@keyframes formErrorShow {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   SELECT2 ERROR
===================================================== */

.form-group-modern.is-invalid
.select2-container .select2-selection--single {
    border-color: #ef6b73 !important;
    background-color: #fffafa !important;
    box-shadow: 0 0 0 3px rgba(239, 107, 115, .08) !important;
}

.form-group-modern.is-invalid
.select2-container--focus .select2-selection--single {
    border-color: #ef6b73 !important;
    box-shadow: 0 0 0 3px rgba(239, 107, 115, .10) !important;
}

/* =====================================================
    TEXTAREA
====================================================== */

textarea.input-modern {
    height: 105px;
    padding: 13px;
    line-height: 1.6;
    resize: none;
}

/* =====================================================
    RATING BOX
====================================================== */
.rating-box-premium {
    position: relative;
    overflow: hidden;
    padding: 28px 20px 24px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 193, 7, .13), transparent 45%),
        linear-gradient(145deg, #ffffff, #f8faff);
    border: 1px solid rgba(226, 232, 240, .9);
    box-shadow:
        0 15px 40px rgba(15, 23, 42, .07),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    text-align: center;
}

.rating-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.rating-emoji {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff8df, #ffffff);
    box-shadow:
        0 8px 20px rgba(255, 193, 7, .16),
        inset 0 0 0 1px rgba(255, 193, 7, .15);
    transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
}

.rating-emoji span {
    font-size: 28px;
    display: block;
}

.rating-emoji.animate {
    animation: emojiBounce .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes emojiBounce {
    0% {
        transform: scale(.7) rotate(-10deg);
    }

    50% {
        transform: scale(1.2) rotate(8deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.rating-score {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.rating-score span {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #1e293b;
}

.rating-score small {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

.rating-title-premium {
    margin-top: 14px;
    font-size: 12px;
    color: #515152;
}

.rating-stars-premium {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
}

.rating-star-premium {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #dbe1ea;
    cursor: pointer;
    outline: none !important;
    transition:
        transform .25s cubic-bezier(.34, 1.56, .64, 1),
        color .25s ease,
        filter .25s ease;
}

.rating-star-premium i {
    display: block;
    font-size: 30px;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.rating-star-premium:hover {
    transform: translateY(-6px);
}

.rating-star-premium:hover i {
    transform: scale(1.18) rotate(-6deg);
    color: #ffc107;
}

.rating-star-premium.active {
    color: #ffc107;
    filter: drop-shadow(0 5px 8px rgba(255, 193, 7, .35));
}

.rating-star-premium.active i {
    animation: premiumStarPop .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes premiumStarPop {
    0% {
        transform: scale(.4) rotate(-20deg);
    }

    55% {
        transform: scale(1.35) rotate(10deg);
    }

    80% {
        transform: scale(.92) rotate(-3deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.rating-star-premium.sparkle::before,
.rating-star-premium.sparkle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    border-radius: 50%;
}

.rating-star-premium.sparkle::before {
    width: 7px;
    height: 7px;
    background: #ffc107;
    animation: sparkleBurst .6s ease-out forwards;
}

.rating-star-premium.sparkle::after {
    width: 4px;
    height: 4px;
    background: #ffda6a;
    animation: sparkleBurstReverse .6s ease-out forwards;
}

@keyframes sparkleBurst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(-25px, -28px)
            scale(1.3);
    }
}

@keyframes sparkleBurstReverse {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(27px, -22px)
            scale(1.2);
    }
}

.rating-description-premium {
    min-height: 25px;
    margin-top: 15px;
    font-size: 15px;
    font-weight: 800;
    color: #475569;
    transition: all .25s ease;
}

.rating-description-premium.change {
    animation: descriptionChange .35s ease;
}

@keyframes descriptionChange {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.rating-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #94a3b8;
}

@media (max-width: 480px) {

    .rating-box-premium {
        padding: 24px 12px 20px;
    }

    .rating-stars-premium {
        gap: 2px;
    }

    .rating-star-premium {
        width: 42px;
        height: 42px;
    }

    .rating-star-premium i {
        font-size: 27px;
    }

    .rating-score span {
        font-size: 30px;
    }
}


/* .rating-box {
    padding: 20px;
    text-align: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #faf9ff, #f5f6ff);
    border: 1px solid #f0efff;
}

.rating-title {
    margin-bottom: 13px;
    color: #969aa7;
    font-size: 10px;
}

.rating-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rating-star {
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 11px;
    outline: none !important;
    background: #fff;
    color: #d8dae3;
    font-size: 19px;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}

.rating-star:hover {
    transform: translateY(-3px);
    color: #ffb52e;
}

.rating-star.active {
    color: #ffb52e;
    background: #fff8e8;
    box-shadow: 0 6px 16px rgba(255,181,46,.14);
}

.rating-description {
    min-height: 15px;
    margin-top: 12px;
    color: #777b89;
    font-size: 10px;
    font-weight: 600;
} */

/* =====================================================
    SUBMIT
====================================================== */

.btn-submit {
    width: 100%;
    height: 49px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 13px;
    outline: none !important;
    background: linear-gradient(135deg, #7162e8, #5369ef);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(93,88,222,.20);
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(93,88,222,.27);
}

.btn-submit:active {
    transform: translateY(0);
}

.btn-submit i {
    margin-left: 9px;
    font-size: 11px;
}

/* =====================================================
    FOOTER
====================================================== */

.form-footer {
    margin-top: 17px;
    text-align: center;
    color: #a1a5b0;
    font-size: 9px;
    line-height: 1.5;
}

.form-footer i {
    margin-right: 4px;
}

/* =====================================================
    DESKTOP
====================================================== */

@media (min-width: 768px) {
    .form-screen {
        padding: 30px 20px;
    }

    .review-header {
        border-radius: 15px;
    }

    .form-card {
        margin: 20px 0 30px;
    }
}

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

@media (max-width: 480px) {
    .form-screen {
        padding: 20px 14px;
    }

    .logo-wrapper {
        width: 115px;
        height: 115px;
        border-radius: 32px;
    }

    .logo-wrapper img {
        max-width: 82px;
        max-height: 82px;
    }

    .review-header {
        border-radius: 15px;
    }

    .form-card {
        padding: 22px 17px;
    }

    .rating-star {
        width: 40px;
        height: 40px;
    }
}

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

@media (max-width: 360px) {
    .form-screen {
        padding: 16px 12px;
    }

    .logo-wrapper {
        width: 105px;
        height: 105px;
        border-radius: 30px;
    }

    .logo-wrapper img {
        max-width: 75px;
        max-height: 75px;
    }

    .review-header {
        border-radius: 15px;
    }

    .form-card {
        padding: 20px 15px;
    }

    .rating-stars {
        gap: 5px;
    }

    .rating-star {
        width: 37px;
        height: 37px;
        font-size: 17px;
    }
}

/* =====================================================
    REDUCE MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {
    .splash-screen,
    .form-screen,
    .swipe-icon i {
        transition: none;
        animation: none;
    }
}

/* =====================================================
    REVIEW TITLE
====================================================== */
.review-title {
    padding: 22px 15px 5px;
    text-align: center;
}

.review-title h1 {
    margin: 0;
    color: #292c3d;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.6px;
}

.review-title p {
    max-width: 400px;
    margin: 7px auto 0;
    color: #9296a5;
    font-size: 10px;
    line-height: 1.6;
}




/* =====================================================
   REVIEW SUCCESS SCREEN
===================================================== */

.review-success-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background:
        radial-gradient(circle at 15% 15%, rgba(108, 92, 231, .10), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(155, 140, 255, .12), transparent 30%),
        #f8f9fd;

    overflow: hidden;
}

/* =====================================================
   DECORATION
===================================================== */

.success-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.success-decoration-one {
    width: 260px;
    height: 260px;
    top: -130px;
    right: -80px;
    background: rgba(108, 92, 231, .08);
}

.success-decoration-two {
    width: 200px;
    height: 200px;
    bottom: -100px;
    left: -70px;
    background: rgba(155, 140, 255, .08);
}

/* =====================================================
   CONTENT
===================================================== */

.success-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 480px;
    padding: 42px 32px 30px;
    text-align: center;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 28px;
    box-shadow:
        0 25px 60px rgba(37, 39, 56, .10),
        0 5px 20px rgba(37, 39, 56, .04);
    backdrop-filter: blur(12px);
    animation: successCardShow .6s cubic-bezier(.22, 1, .36, 1);
}

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

.success-icon-wrapper {
    display: flex;
    justify-content: center;

    margin-bottom: 22px;
}

.success-icon {
    position: relative;

    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #6b93ea,
        #9cd5f8
    );
    color: #fff;
    font-size: 30px;
    box-shadow:
        0 12px 30px rgba(108, 92, 231, .25);
    animation: successIconPop .7s cubic-bezier(.34, 1.56, .64, 1);
}

.success-icon::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(108, 92, 231, .15);
}

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

.success-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 11px;
    border-radius: 30px;
    background: #eff6ff;
    color: #5c96e7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
}

.success-badge i {
    font-size: 10px;
}

.success-title h1 {
    margin: 0 0 10px;
    color: #292b38;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.6px;
}

.success-title p {
    margin: 0 auto;
    max-width: 380px;
    color: #7b7f8d;
    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================
   RATING
===================================================== */

.success-rating {
    margin-top: 28px;
    padding: 18px;
    border-radius: 18px;
    background: #fafaff;
    border: 1px solid #eeeef8;
}

.success-rating-label {
    margin-bottom: 8px;
    color: #9295a1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.success-stars {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 8px;
}

.success-stars i {
    color: #f5b83d;
    font-size: 20px;
    filter: drop-shadow(0 3px 5px rgba(245, 184, 61, .20));
    animation: starAppear .35s ease both;
}

.success-stars i:nth-child(1) {
    animation-delay: .15s;
}

.success-stars i:nth-child(2) {
    animation-delay: .22s;
}

.success-stars i:nth-child(3) {
    animation-delay: .29s;
}

.success-stars i:nth-child(4) {
    animation-delay: .36s;
}

.success-stars i:nth-child(5) {
    animation-delay: .43s;
}

.success-rating-text {
    color: #5c96e7;
    font-size: 13px;
    font-weight: 600;
}

/* =====================================================
   MESSAGE
===================================================== */

.success-message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    text-align: left;
    background: #f8f7ff;
    border: 1px solid #eeecff;
    border-radius: 15px;
}

.success-message-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #ebe8ff;
    color: #e75c5c;
    font-size: 15px;
}

.success-message strong {
    display: block;
    margin-bottom: 3px;
    color: #3b3d4b;
    font-size: 12px;
    font-weight: 600;
}

.success-message span {
    display: block;
    color: #9295a1;
    font-size: 11px;
    line-height: 1.5;
}

/* =====================================================
   FOOTER
===================================================== */

.success-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    color: #a1a4af;
    font-size: 10px;
}

.success-footer i {
    color: #80bde8;
    font-size: 10px;
}

/* =====================================================
   ANIMATION
===================================================== */

@keyframes successCardShow {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes successIconPop {
    from {
        opacity: 0;
        transform: scale(.4) rotate(-15deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes starAppear {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.5);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@media (max-width: 480px) {

    .review-success-screen {
        padding: 20px 15px;
    }

    .success-content {
        padding: 34px 22px 25px;
        border-radius: 24px;
    }

    .success-icon {
        width: 68px;
        height: 68px;
        font-size: 27px;
    }

    .success-title h1 {
        font-size: 27px;
    }

    .success-title p {
        font-size: 13px;
    }

    .success-rating {
        margin-top: 23px;
    }
}

/* ==================================================
LOADING REVIEW SUKSES
================================================== */

.review-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.review-loading-box {
    text-align: center;
    padding: 32px 40px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
    animation: loadingBoxIn .35s ease;
}
.review-loading-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff4d6, #ffe3a1);
    box-shadow: 0 8px 25px rgba(255, 193, 7, .2);
    animation: loadingPulse 1.4s ease-in-out infinite;
}
.review-loading-spinner i {
    font-size: 26px;
    color: #f5b301;
    animation: loadingStar 1.2s linear infinite;
}
.review-loading-title {
    font-size: 17px;
    font-weight: 700;
    color: #252525;
    margin-bottom: 6px;
}
.review-loading-text {
    font-size: 13px;
    color: #8a8a8a;
}
@keyframes loadingPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(255, 193, 7, .2);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 12px 32px rgba(255, 193, 7, .3);
    }
}
@keyframes loadingStar {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.12);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}
@keyframes loadingBoxIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ==================================================
REDIRECT SCREEN
================================================== */

.redirect-screen {
    position: fixed;
    inset: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, #153d70 0%, #09284d 38%, #04182f 75%, #020f20 100%);
    font-family: inherit;
}
.redirect-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}
.redirect-bg-glow-one {
    width: 480px;
    height: 480px;
    top: -280px;
    right: -140px;
    background: rgba(44, 134, 255, .18);
}
.redirect-bg-glow-two {
    width: 420px;
    height: 420px;
    bottom: -250px;
    left: -160px;
    background: rgba(0, 174, 255, .1);
}
.redirect-grid {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
}
.redirect-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 470px;
    padding: 44px 42px 30px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 30px;
    background: rgba(255,255,255,.075);
    box-shadow: 0 30px 90px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: redirectCardIn .65s cubic-bezier(.22,1,.36,1);
}
.redirect-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}
.redirect-logo img {
    width: 125px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.18));
}
.redirect-icon-wrapper {
    width: 82px;
    height: 82px;
    margin: 0 auto 24px;
    padding: 1px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.05));
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}
.redirect-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #145da0, #0a3768);
    animation: redirectIconFloat 3s ease-in-out infinite;
}
.redirect-icon i {
    color: #fff;
    font-size: 30px;
    transform: rotate(-12deg);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.redirect-content {
    margin-bottom: 30px;
}
.redirect-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50px;
    background: rgba(255,255,255,.07);
    color: #8fc9ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}
.redirect-content h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 29px;
    font-weight: 750;
    letter-spacing: -.7px;
}
.redirect-content p {
    max-width: 360px;
    margin: 0 auto;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.75;
}
.redirect-button {
    position: relative;
    width: 100%;
    min-height: 56px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: linear-gradient(135deg, #1477c9, #2299ed);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(18,126,211,.28);
    transition: all .3s ease;
}
.redirect-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
.redirect-button span,
.redirect-button i {
    position: relative;
    z-index: 1;
}
.redirect-button i {
    font-size: 12px;
    transition: transform .3s ease;
}
.redirect-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(18,126,211,.38);
}
.redirect-button:hover::before {
    left: 130%;
}
.redirect-button:hover i {
    transform: translateX(5px);
}
.redirect-footer {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,.35);
    font-size: 10px;
    letter-spacing: .7px;
}
.redirect-footer-line {
    width: 28px;
    height: 1px;
    background: rgba(255,255,255,.15);
}
.redirect-bottom-text {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,.16);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 4px;
}
@keyframes redirectCardIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes redirectIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
@media (max-width: 480px) {
    .redirect-screen {
        padding: 18px;
    }
    .redirect-card {
        padding: 36px 24px 28px;
        border-radius: 25px;
    }
    .redirect-logo img {
        width: 110px;
    }
    .redirect-icon-wrapper {
        width: 72px;
        height: 72px;
    }
    .redirect-icon i {
        font-size: 26px;
    }
    .redirect-content h1 {
        font-size: 25px;
    }
    .redirect-content p {
        font-size: 13px;
    }
}