*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{

    background:
    linear-gradient(
        135deg,
        #ffe8f3,
        #f8b6d5,
        #ff7dbb
    );

}

.container{
    width:100%;
    max-width:900px;
}

.survey-card{

    padding:50px;

border-radius:30px;

box-shadow:
0 30px 60px rgba(0,0,0,.12),
0 0 50px rgba(255,105,180,.12);

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

    backdrop-filter:
    blur(25px);

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

}

.logo-wrapper{

    display:flex;
    justify-content:center;

    margin-bottom:20px;
}

.logo-wrapper img{
    width:120px;
}

h1{

    text-align:center;

    color:#c21875;

    font-size:36px;

    margin-bottom:10px;

    font-weight:800;

}

.subtitle{

    text-align:center;

    color:#7b4b68;

    margin-bottom:35px;

    font-size:15px;

}

.form-group{

    display:flex;
    flex-direction:column;

    margin-bottom:20px;
}

.form-group label{

    margin-bottom:8px;

    font-weight:600;

    color:#7b1b57;

}

.form-group input,
.form-group select{

    height:55px;

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

    border-radius:14px;

    padding:0 15px;

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

    font-size:15px;

    transition:.35s;

}

.form-group input:focus,
.form-group select:focus{

    outline:none;

    transform:translateY(-2px);

    box-shadow:
    0 0 0 3px rgba(255,77,166,.25),
    0 15px 30px rgba(233,30,99,.25);

}

.btn-next{

    position:relative;
overflow:hidden;

    width:100%;

    height:55px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        #e5499d,
        #f26db6
    );
}

.section-title{
    margin:35px 0 20px;
    color:#d83f92;
}

.rating-box{

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

    border-radius:20px;

    padding:24px;

    margin-bottom:20px;

    transition:.35s;

}

.rating-box h3{
    margin-bottom:15px;
}

.rating-box label{

    display:block;

    margin-bottom:10px;

    cursor:pointer;
}

.alasan{

    width:100%;

    border:none;

    border-radius:12px;

    background:#f6f6f6;

    resize:none;

    opacity:0;

    max-height:0;

    overflow:hidden;

    margin-top:0;

    padding:0 15px;

    transition:
        max-height .35s ease,
        opacity .35s ease,
        margin-top .35s ease,
        padding .35s ease;

}

.btn-center{
    line-height:48px;
}

.logo-company{

    width:450px;

    max-width:100%;

    display:block;

    margin:0 auto 15px;

}

.input-success{

    border:2px solid #16a34a !important;

}

button:disabled{

    opacity:.7;

    cursor:not-allowed;

}

/* ==========================
   TELEPON VALIDATION UI
========================== */

.form-group input.input-error{

    border:2px solid #ef4444 !important;

    box-shadow:
    0 0 0 4px rgba(239,68,68,.12);

    animation:shake .35s;

}

/* ==========================
   ALERT BOX
========================== */

.input-alert{

    display:none;

    align-items:center;
    gap:14px;

    margin-top:12px;

    padding:14px 18px;

    background:
    linear-gradient(
        135deg,
        rgba(239,68,68,.08),
        rgba(239,68,68,.03)
    );

    border-left:4px solid #ef4444;

    border-radius:16px;

    color:#b91c1c;

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

    backdrop-filter:blur(10px);

    animation:slideFade .3s ease;

}

/* ==========================
   PREMIUM WARNING ICON
========================== */

.alert-icon{

    position:relative;

    width:32px;
    height:32px;

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

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color:#fff;

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

    flex-shrink:0;

    animation:
    premiumWarning 2s ease-in-out infinite;

}

.alert-icon::before{

    content:'';

    position:absolute;

    inset:-6px;

    border-radius:50%;

    background:
    rgba(239,68,68,.25);

    z-index:-1;

    animation:
    warningAura 2s ease-out infinite;

}

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

@keyframes slideFade{

    from{

        opacity:0;

        transform:
        translateY(-10px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

@keyframes premiumWarning{

    0%{

        transform:
        translateY(0)
        scale(1)
        rotate(0deg);

    }

    25%{

        transform:
        translateY(-2px)
        scale(1.08)
        rotate(-3deg);

    }

    50%{

        transform:
        translateY(-4px)
        scale(1.18)
        rotate(3deg);

        box-shadow:
        0 0 15px rgba(239,68,68,.55),
        0 0 35px rgba(239,68,68,.25);

    }

    75%{

        transform:
        translateY(-2px)
        scale(1.08)
        rotate(-2deg);

    }

    100%{

        transform:
        translateY(0)
        scale(1)
        rotate(0deg);

    }

}

@keyframes warningAura{

    0%{

        transform:scale(.8);

        opacity:.7;

    }

    70%{

        transform:scale(1.8);

        opacity:0;

    }

    100%{

        transform:scale(1.8);

        opacity:0;

    }

}

@keyframes shake{

    0%,100%{
        transform:translateX(0);
    }

    20%{
        transform:translateX(-4px);
    }

    40%{
        transform:translateX(4px);
    }

    60%{
        transform:translateX(-4px);
    }

    80%{
        transform:translateX(4px);
    }

}

/* ==========================
   POPUP WARNING PREMIUM
========================== */

.popup-warning-icon{

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

    margin-bottom:15px;

}

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    background:
    linear-gradient(
        135deg,
        #ffe8f3,
        #f8b6d5,
        #ff7dbb
    );

}

.popup-warning-icon svg{

    display:inline-block;

    font-size:64px;

    transform-origin:center;

    animation:
    popupWarningPremium 1.5s ease-in-out infinite;

}

@keyframes popupWarningPremium{

    0%{
        transform:
        translateY(0)
        scale(1)
        rotate(0deg);

        filter:
        drop-shadow(0 0 0 rgba(245,158,11,0));
    }

    20%{
        transform:
        translateY(-4px)
        scale(1.05)
        rotate(-4deg);
    }

    40%{
        transform:
        translateY(-8px)
        scale(1.12)
        rotate(4deg);

        filter:
        drop-shadow(
            0 0 18px rgba(245,158,11,.8)
        );
    }

    60%{
        transform:
        translateY(-4px)
        scale(1.08)
        rotate(-3deg);
    }

    80%{
        transform:
        translateY(-2px)
        scale(1.04)
        rotate(2deg);
    }

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

        filter:
        drop-shadow(0 0 0 rgba(245,158,11,0));
    }

}

.popup-warning-icon{

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

    margin-bottom:12px;

}

.action-group{

    display:flex;
    gap:8px;

}

.btn-delete{

    border:none;

    background:#dc2626;

    color:white;

    padding:8px 12px;

    border-radius:8px;

    cursor:pointer;

    font-size:12px;

    font-weight:600;

}

.btn-delete:hover{

    background:#b91c1c;

}

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

.btn-next::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

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

    animation:
    shine 3s infinite;

}

@keyframes shine{

    0%{
        left:-120%;
    }

    100%{
        left:120%;
    }

}

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

body::before{

    content:'';

    position:fixed;

    width:800px;
    height:800px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.15),
        transparent 70%
    );

    top:-250px;
    left:-250px;

    animation:
    glowMove 12s ease-in-out infinite;

    pointer-events:none;

    z-index:-1;

}

body::after{

    content:'';

    position:fixed;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,20,147,.18),
        transparent 70%
    );

    bottom:-200px;
    right:-200px;

    animation:
    glowMove2 15s ease-in-out infinite;

    pointer-events:none;

    z-index:-1;

}

@keyframes glowMove{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(120px,80px);
    }

    100%{
        transform:translate(0,0);
    }

}

@keyframes glowMove2{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-120px,-80px);
    }

    100%{
        transform:translate(0,0);
    }

}

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

.form-group input,
.form-group select{

    transition:.3s;

}

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

.rating-box:hover{

    transform:
    translateY(-5px);

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);

}

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

.logo-company{

    animation:
    logoFloat 5s ease-in-out infinite;

}

@keyframes logoFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}

.survey-card{
    position:relative;
}

.survey-card::before{

    content:'';

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,105,180,.25),
        transparent
    );

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

    filter:blur(50px);

    animation:
    orbMove 10s ease-in-out infinite;

}

@keyframes orbMove{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-40px,40px);
    }

    100%{
        transform:translate(0,0);
    }

}

.rating-box{

    transition:
        all .35s ease;

}

.rating-box.active{

    transform:
    translateY(-3px);

    box-shadow:
    0 10px 30px rgba(233,30,99,.15);

}

/* ==========================
   SUCCESS PAGE
========================== */

.success-icon{

    width:90px;
    height:90px;

    margin:0 auto 25px;

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

    border-radius:50%;

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

    color:white;

    background:
    linear-gradient(
        135deg,
        #10b981,
        #34d399
    );

    box-shadow:
    0 15px 35px rgba(16,185,129,.35);

}

.btn-back-survey{

    display:inline-flex;

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

    height:55px;

    padding:0 30px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    color:white;

    background:
    linear-gradient(
        135deg,
        #e5499d,
        #ff6bb8
    );

    box-shadow:
    0 10px 25px rgba(229,73,157,.25);

    transition:.3s;

}

.btn-back-survey:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 18px 35px rgba(229,73,157,.35);

}