* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: #000;
	min-height: 100vh;
	overflow: hidden;
	font-family: "Space Grotesk", sans-serif;
}
canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.wrap {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	text-align: center;
}
.eyebrow {
	font-family: "Space Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.25em;
	color: #666;
	text-transform: uppercase;
	margin-bottom: 32px;
}
.eyebrow span {
	color: #c084fc;
}
h1 {
	font-size: clamp(52px, 10vw, 100px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	margin-bottom: 24px;
}
h1 em {
	font-style: normal;
	color: transparent;
	-webkit-text-stroke: 1px rgba(192, 132, 252, 0.6);
}
.tagline {
	font-size: clamp(14px, 2vw, 18px);
	font-weight: 300;
	color: #666;
	max-width: 420px;
	line-height: 1.7;
	margin-bottom: 48px;
}
.tagline strong {
	color: #c084fc;
	font-weight: 400;
}
.form-wrap {
	display: flex;
	gap: 0;
	max-width: 420px;
	width: 100%;
	border: 1px solid rgba(192, 132, 252, 0.25);
	border-radius: 100px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(8px);
	transition: border-color 0.3s;
}
.form-wrap:focus-within {
	border-color: rgba(192, 132, 252, 0.6);
	box-shadow: 0 0 24px rgba(192, 132, 252, 0.12);
}
input[type="email"] {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	padding: 14px 22px;
	font-family: "Space Grotesk", sans-serif;
	font-size: 14px;
	color: #fff;
	min-width: 0;
}
input[type="email"]::placeholder {
	color: #444;
}
.cta {

	display:inline-flex;
	align-items:center;
	justify-content:center;
     animation:floatText 5s ease-in-out infinite;

	background:
		linear-gradient(
			135deg,
			#a855f7,
			#7c3aed
		);

	border:none;
	border-radius:100px;

	padding:14px 28px;

	font-family:"Space Grotesk", sans-serif;
	font-size:14px;
	font-weight:700;

	color:#fff;
	text-decoration:none;

	cursor:pointer;

	letter-spacing:.05em;

	margin-top:20px;

	transition:
		transform .2s ease,
		opacity .2s ease,
		box-shadow .2s ease;

	box-shadow:
		0 10px 30px rgba(124,58,237,.25);
}

.cta:hover {

	opacity:.9;

	transform:translateY(-2px);

	box-shadow:
		0 15px 35px rgba(124,58,237,.35);
}

.cta:active {

	transform:scale(.96);
}
.hint {
	margin-top: 16px;
	font-family: "Space Mono", monospace;
	font-size: 10px;
	color: #333;
	letter-spacing: 0.15em;
}
.pulse {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c084fc;
	margin-right: 8px;
	vertical-align: middle;
	animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.5);
	}
	50% {
		opacity: 0.6;
		box-shadow: 0 0 0 8px rgba(192, 132, 252, 0);
	}
}
.success {
	color: #a78bfa;
	font-size: 14px;
	margin-top: 12px;
	opacity: 0;
	transition: opacity 0.4s;
	font-family: "Space Mono", monospace;
	letter-spacing: 0.05em;
}
.success.show {
	opacity: 1;
}

/* judul depan */
/* CONTAINER */

.title-wrap{
    position:relative;
    z-index:5;

    min-height:100vh;

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

    width:100%;

    padding:40px 20px;

    text-align:center;
}

/* LOGO */

.strawberry{
    width:100%;
    max-width:900px;

    display:flex;
    justify-content:flex-start;

    margin-bottom:20px;
}

.strawberry img{
    width:clamp(90px,18vw,170px);
    height:auto;
	padding-left:50px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 18px rgba(255,255,255,.15));

    animation:floatText 4s ease-in-out infinite;
}

/* TITLE */

.cosmic{
    margin:0;

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

    gap:clamp(4px,1vw,14px);

    font-size:clamp(42px,10vw,120px);
    line-height:1.1;

    font-weight:700;
    text-transform:uppercase;

    padding:0 10px;

    max-width:1000px;
}

.cosmic span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    animation:floatText 3s ease-in-out infinite;

    text-shadow:
        0 0 12px rgba(255,255,255,.08),
        0 0 24px rgba(255,255,255,.04);
}

/* SVG */

.cosmic svg{
    width:clamp(38px,7vw,90px);
    height:auto;

    transform:translateY(5px);

    filter:
        drop-shadow(0 0 10px rgba(255,192,203,.35));
}

/* TEXT */

.penjelasan{
    margin-top:28px;

    color:#a1a1aa;

    font-size:clamp(14px,2vw,20px);

    line-height:1.8;

    letter-spacing:.3px;

    max-width:760px;

    text-align:center;

    padding:0 20px;
	color: #c084fc;

    animation:fadeUp 2s ease;
	animation:floatText 3s ease-in-out infinite;
}

/* MOBILE */
@media(max-width:768px){

    .title-wrap{
        padding:40px 16px;

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

    /* LOGO */

    .strawberry{
    width:100%;

    display:flex;

    justify-content:flex-start;

    margin-bottom:10px;

    padding-left:0;

    transform:translateX(-18px);
}

    .strawberry img{
        width:120px;
        height:auto;
    }

    /* TITLE */

    .cosmic{
        gap:clamp(4px,2vw,10px);

        line-height:1.2;

        font-size:clamp(18px,11vw,38px);
    }

    /* TEXT */

    .penjelasan{
        margin-top:20px;

        font-size:13px;

        line-height:1.8;

        padding:0 8px;

        max-width:95%;
		color: #c084fc;
    }

    /* SVG */

    .cosmic svg{
        width:40px;
         transform:translateY(-3px);
    }
}
/* auto warna looping */

.cosmic span:nth-child(6n+1){
    color:#7CFFB2;
}

.cosmic span:nth-child(6n+2){
    color:#FFA63D;
}

.cosmic span:nth-child(6n+3){
    color:#FF5FD2;
}

.cosmic span:nth-child(6n+4){
    color:#7CFFD4;
}

.cosmic span:nth-child(6n+5){
    color:#FFA63D;
}

.cosmic span:nth-child(6n+6){
    color:#FF4D4D;
}

/* auto delay animasi */

.cosmic span:nth-child(1){ animation-delay:0s; }
.cosmic span:nth-child(2){ animation-delay:.1s; }
.cosmic span:nth-child(3){ animation-delay:.2s; }
.cosmic span:nth-child(4){ animation-delay:.3s; }
.cosmic span:nth-child(5){ animation-delay:.4s; }
.cosmic span:nth-child(6){ animation-delay:.5s; }
.cosmic span:nth-child(7){ animation-delay:.6s; }
.cosmic span:nth-child(8){ animation-delay:.7s; }
.cosmic span:nth-child(9){ animation-delay:.8s; }
.cosmic span:nth-child(10){ animation-delay:.9s; }
.cosmic span:nth-child(11){ animation-delay:1s; }
.cosmic span:nth-child(12){ animation-delay:1.1s; }



@keyframes floatText{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-12px);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes glow{
    from{
        opacity:.5;
        letter-spacing:8px;
    }
    to{
        opacity:1;
        letter-spacing:12px;
    }
}



/*======= whatsapp floating =========*/
.wa-float{
    position:fixed;

    right:20px;
    bottom:20px;

    width:50px;
    height:50px;

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

    background:#25D366;

    color:#fff;

    border-radius:50%;

    text-decoration:none;

    font-size:30px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.3);

    z-index:9999;

    animation:waBounce 1.5s infinite;
}

/* ICON */

.wa-float i{
    line-height:1;
}

/* HOVER */

.wa-float:hover{
    transform:scale(1.1);

    box-shadow:
        0 10px 25px rgba(0,0,0,.4);
}

/* ANIMATION */

@keyframes waBounce{

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

    50%{
        transform:translateY(-8px);
    }
}
/*end whats app*/

/* =========================
   ALIEN COSMIC SCENE
========================= */

.alien-scene{

    position:absolute;

    left:-260px;
    top:78%;

    width:420px;
    height:220px;

    z-index:5;

    pointer-events:none;

    animation:
        alienMove 18s linear infinite;
}

/* =========================
   UFO IMAGE
========================= */

.alien-img{

    position:absolute;

    width:120px;

    left:220px;
    top:0;

    z-index:5;

    filter:
        drop-shadow(0 0 20px rgba(124,58,237,.45));

    animation:
        alienFloat 3s ease-in-out infinite;
}

/* =========================
   BLACK HOLE
========================= */

.blackhole{

    position:absolute;

    right:4%;
    top:4%;

    width:210px;
    height:210px;

    border-radius:50%;

    z-index:2;

    opacity:0;

    background:
        radial-gradient(
            circle,
            #000 28%,
            #4c1d95 55%,
            rgba(168,85,247,.18) 75%,
            transparent 100%
        );

    box-shadow:
        0 0 35px rgba(168,85,247,.35),
        0 0 80px rgba(124,58,237,.25);

    animation:
        blackholePulse 18s linear infinite;
}

/* =========================
   UFO MOVE
========================= */

@keyframes alienMove{

    0%{

        left:-320px;
        top:84%;

        opacity:0;

        transform:
            rotate(-10deg)
            scale(.9);
    }

    8%{
        opacity:1;
    }

    30%{

        transform:
            rotate(4deg)
            scale(1);
    }

    55%{

        transform:
            rotate(12deg)
            scale(1.02);
    }

    75%{

        transform:
            rotate(18deg)
            scale(1.04);

        opacity:1;
    }

    /* mulai kesedot */

    100%{

        left:82%;
        top:5%;

        opacity:0;

        transform:
            rotate(720deg)
            scale(.08);
    }
}

/* =========================
   FLOAT EFFECT
========================= */

@keyframes alienFloat{

    0%,100%{

        transform:
            translateY(0px);
    }

    50%{

        transform:
            translateY(-12px);
    }
}

/* =========================
   BLACK HOLE EFFECT
========================= */

@keyframes blackholePulse{

    0%,68%{

        opacity:0;

        transform:
            scale(.2)
            rotate(0deg);
    }

    75%{

        opacity:1;

        transform:
            scale(1)
            rotate(120deg);
    }

    100%{

        opacity:1;

        transform:
            scale(1.3)
            rotate(360deg);
    }
}

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

@media(max-width:768px){

    /* UFO AREA */

    /* BLACK HOLE MOBILE */

.blackhole{

    animation:
        blackholePulseMobile 10s linear infinite;
}

/* MOBILE BLACK HOLE */

@keyframes blackholePulseMobile{

    0%,55%{

        opacity:0;

        transform:
            scale(.2)
            rotate(0deg);
    }

    65%{

        opacity:1;

        transform:
            scale(1)
            rotate(120deg);
    }

    100%{

        opacity:1;

        transform:
            scale(1.25)
            rotate(360deg);
    }
}

    .alien-scene{

        width:180px;
        height:100px;

        left:-100px;
        top:72%;

        animation:
            alienMoveMobile 10s linear infinite;
    }

    /* UFO */

    .alien-img{

        width:58px;

        left:95px;
        top:0;
    }

    /* BLACK HOLE */

    .blackhole{

        width:75px;
        height:75px;

        right:4%;
        top:10%;

        box-shadow:
            0 0 18px rgba(168,85,247,.28),
            0 0 35px rgba(124,58,237,.18);
    }

    /* FLOAT */

    @keyframes alienFloat{

        0%,100%{
            transform:translateY(0px);
        }

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

    /* MOBILE PATH */

    @keyframes alienMoveMobile{

        0%{

            left:-120px;
            top:78%;

            opacity:0;

            transform:
                rotate(-8deg)
                scale(.9);
        }

        8%{
            opacity:1;
        }

        40%{

            transform:
                rotate(5deg)
                scale(1);
        }

        75%{

            opacity:1;

            transform:
                rotate(12deg)
                scale(1.02);
        }

        100%{

            left:74%;
            top:8%;

            opacity:0;

            transform:
                rotate(540deg)
                scale(.08);
        }
    }
}
/* end */



/* =========================
   PRETEST QUIZ CARD
========================= */

/* =========================
   QUIZ
========================= */

.quiz-container{

    position:relative;
    z-index:5;

    width:100%;
    max-width:950px;

    margin:auto;

    min-height:100vh;

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

    padding:30px 20px;
}

/* CARD */

.quiz-card{

    width:100%;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,.88),
            rgba(2,6,23,.92)
        );

    border:
        1px solid rgba(192,132,252,.15);

    border-radius:30px;

    padding:34px;

    backdrop-filter:blur(14px);

    box-shadow:
        0 0 40px rgba(124,58,237,.08),
        0 20px 60px rgba(0,0,0,.45);

    overflow:hidden;
}

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

.quiz-top{

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

    gap:12px;

    margin-bottom:18px;

    flex-wrap:wrap;
}

.quiz-title{

    color:#c084fc;

    font-size:
        clamp(24px,3vw,36px);
        

    font-weight:700;

    letter-spacing:.5px;
}

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

.quiz-info{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:26px;
}

.quiz-pill{

    padding:10px 16px;

    border-radius:999px;

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

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

    color:#fff;

    font-size:14px;

    backdrop-filter:blur(10px);
}

/* TIMER */

.timer-pill{

    color:#f472b6;

    font-weight:700;
}

/* =========================
   PROGRESS
========================= */

.quiz-progress{

    width:100%;

    height:12px;

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

    border-radius:999px;

    overflow:hidden;

    margin-bottom:34px;
}

.quiz-progress-bar{

    width:10%;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #7CFFB2,
            #7CFFD4,
            #FF5FD2
        );

    box-shadow:
        0 0 18px rgba(255,95,210,.35);

    transition:.35s ease;
}

/* =========================
   QUESTION
========================= */

.quiz-box{

    display:none;

    animation:fadeQuestion .45s ease;
}

.quiz-box.active{
    display:block;
}

.quiz-question{

    color:#fff;

    font-size:
        clamp(24px,4vw,28px);

    line-height:1.45;

    font-weight:700;

    margin-bottom:30px;
}

/* =========================
   OPTIONS
========================= */

.quiz-options{

    display:grid;

    gap:18px;
}

.quiz-option{

    position:relative;

    background:
        rgba(2,6,23,.88);

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

    border-radius:22px;

    padding:20px 22px;

    display:flex;
    align-items:center;

    gap:16px;

    cursor:pointer;

    transition:
        .25s ease;

    color:#fff;

    font-size:18px;

    overflow:hidden;
}

/* HOVER */

.quiz-option:hover{

    transform:
        translateY(-3px);

    border-color:#c084fc;

    box-shadow:
        0 0 28px rgba(192,132,252,.16);
}

/* SELECTED */

.quiz-option.selected{

    border-color:#c084fc;

    background:
        rgba(192,132,252,.12);

    box-shadow:
        0 0 30px rgba(192,132,252,.18);

    transform:scale(1.02);
}

/* RADIO */

.quiz-option input{

    transform:scale(1.25);

    accent-color:#c084fc;

    cursor:pointer;
}

/* OPTION TEXT */

.quiz-option span{

    flex:1;

    line-height:1.6;
}

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

.quiz-bottom{

    margin-top:36px;
}

.quiz-btn{

    width:100%;

    border:none;

    padding:18px 24px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

.quiz-btn:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 0 25px rgba(34,197,94,.28);
}

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

@keyframes fadeQuestion{

    from{
        opacity:0;
        transform:translateY(18px);
    }

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

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

@media(max-width:768px){

    .quiz-container{
        padding:18px;
    }

    .quiz-card{

        padding:24px;

        border-radius:24px;
    }

    .quiz-title{
        font-size:24px;
    }

    .quiz-question{

        font-size:22px;

        line-height:1.5;
    }

    .quiz-option{

        padding:16px;

        font-size:16px;

        border-radius:18px;
    }

    .quiz-pill{

        font-size:13px;

        padding:8px 14px;
    }

    .quiz-btn{

        padding:16px;

        font-size:15px;
    }
}
@media(max-width:768px){

    body{
        overflow-y:auto;
    }

    .quiz-container{

        min-height:auto;

        display:block;

        padding:
            24px 16px 60px;
    }

    .quiz-card{

        margin-top:20px;
        margin-bottom:40px;
    }

}

.finish-screen{

    text-align:center;

    padding:80px 20px;

    animation:
        fadeFinish 1s ease;
}

.finish-screen h1{

    color:#fff;

    font-size:
        clamp(32px,5vw,60px);

    margin-bottom:20px;
}

.finish-screen p{

    color:#cbd5e1;

    font-size:22px;

    margin-bottom:30px;
}

.loading-next{

    color:#a855f7;

    font-size:18px;

    animation:
        blink 1s infinite;
}

@keyframes fadeFinish{

    from{

        opacity:0;

        transform:
            scale(.8);
    }

    to{

        opacity:1;

        transform:
            scale(1);
    }
}

@keyframes blink{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:.4;
    }
}
/* end quis pretes */

/* =========================
   COSMIC MAP MATERI
========================= */

.cosmic-map{

    position:fixed;

    inset:0;

    z-index:2;

    pointer-events:none;

    overflow:hidden;
}



/* =========================
   ALIEN
========================= */

.alien-player{

    position:absolute;

    width:90px;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    z-index:5;

    opacity:0;

    transition:
        all 2.5s ease-in-out;

    filter:
        drop-shadow(0 0 20px rgba(168,85,247,.5));

    animation:
        alienFloat 3s ease-in-out infinite;

    will-change:
        left,
        top,
        transform;
}

@keyframes alienFloat{

    0%,100%{

        transform:
            translate(-50%,-50%)
            translateY(0px);
    }

    50%{

        transform:
            translate(-50%,-50%)
            translateY(-10px);
    }
}

/* =========================
   BOTTLE
========================= */

.bottle{

    position:absolute;

    opacity:.35;

    transition:.5s ease;
}

.bottle img{

    width:90px;

    filter:
        drop-shadow(0 0 20px rgba(255,255,255,.2));

    animation:
        bottleFloat 4s ease-in-out infinite;
}

@keyframes bottleFloat{

    0%,100%{

        transform:
            translateY(0px);
    }

    50%{

        transform:
            translateY(-10px);
    }
}

/* =========================
   POSISI BOTOL
========================= */

.bottle-1{

    left:8%;
    bottom:10%;
}

.bottle-2{

    left:45%;
    top:48%;
}

.bottle-3{

    right:8%;
    top:10%;
}

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

.bottle.active{

    opacity:1;

    transform:
        scale(1.12);
}

.bottle.active img{

    filter:
        drop-shadow(0 0 30px rgba(192,132,252,.9));
}

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

.cosmic-intro{

    position:fixed;

    left:50%;
    top:14%;

    transform:
        translateX(-50%);

    z-index:20;

    text-align:center;

    color:#fff;

    animation:
        introFade 1s ease;

    transition:.5s ease;
}

.cosmic-intro h1{

    font-size:
        clamp(28px,4vw,54px);

    margin-bottom:10px;
}

.cosmic-intro p{

    color:#cbd5e1;

    font-size:18px;
}

@keyframes introFade{

    from{

        opacity:0;

        transform:
            translateX(-50%)
            translateY(20px);
    }

    to{

        opacity:1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}

/* =========================
   POPUP
========================= */

.materi-popup{

    position:fixed;

    inset:0;

    z-index:30;

    display:flex;

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

    opacity:0;

    pointer-events:none;

    transition:.5s ease;

    padding:20px;
}

.materi-popup.show{

    opacity:1;

    pointer-events:auto;
}

.materi-popup-card{

    width:min(92%,700px);

    max-height:85vh;

    overflow-y:auto;

    background:
        rgba(15,23,42,.92);

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

    border-radius:30px;

    padding:35px;

    backdrop-filter:blur(14px);

    box-shadow:
        0 0 40px rgba(124,58,237,.2);

    animation:
        popupShow .5s ease;
}

@keyframes popupShow{

    from{

        opacity:0;

        transform:
            scale(.8);
    }

    to{

        opacity:1;

        transform:
            scale(1);
    }
}

.materi-popup-card h2{

    color:#fff;

    margin-bottom:20px;

    font-size:34px;
}

.materi-content{

    color:#cbd5e1;

    line-height:1.9;

    font-size:17px;
}

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

.next-btn{

    margin-top:30px;

    padding:14px 26px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #7c3aed
        );

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

.next-btn:hover{

    transform:
        translateY(-3px);
}


/* =========================
   POSTTEST BUTTON
========================= */

.posttest-wrap{

    position:fixed;

    left:50%;
    bottom:90px;

    transform:
        translateX(-50%)
        translateY(40px);

    z-index:999;

    opacity:0;

    transition:.5s ease;
}

.posttest-wrap.show{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0);
}

.posttest-btn{

    display:flex;
    animation:
        finishFloat 5s ease-in-out infinite;

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

    padding:16px 34px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #2a064a,
            #8b29e8
        );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    box-shadow:
        0 0 30px rgba(34,197,94,.35);
}

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

@media(max-width:768px){

  


    .alien-player{

        width:62px;
    }

    .bottle img{

        width:60px;
    }

    .cosmic-intro{

        width:90%;

        top:10%;
    }

    .cosmic-intro h1{

        font-size:28px;
    }

    .cosmic-intro p{

        font-size:15px;
    }

    .materi-popup-card{

        padding:24px;

        border-radius:24px;
    }

    .materi-popup-card h2{

        font-size:26px;
    }

    .materi-content{

        font-size:15px;

        line-height:1.8;
    }

    .next-btn{

        width:100%;
    }

    .posttest-btn{

        padding:15px 24px;

        font-size:14px;
    }

}

/* =========================
   FINISH ALIEN
========================= */

.alien-finish{

    width:240px;

    margin-bottom:30px;

    filter:
        drop-shadow(0 0 25px rgba(168,85,247,.45));

    animation:
        finishFloat 3s ease-in-out infinite;
}

/* floating */

@keyframes finishFloat{

    0%,100%{

        transform:
            translateY(0px);
    }

    50%{

        transform:
            translateY(-14px);
    }
}

/* wrap */
/* =========================
   POSTTEST WRAP
========================= */

.posttest-wrap{

    position:fixed;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    z-index:999;

    display:flex;

    flex-direction:column;

    align-items:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.6s ease;
}

.posttest-wrap.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

/* =============== End Materi ===================== */

/* =========================
   HASIL PAGE
========================= */

.hasil-wrap{

    min-height:100vh;

    display:flex;

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

    padding:40px 20px;

    position:relative;

    z-index:5;
}

.hasil-card{

    width:100%;
    max-width:760px;

    background:
        rgba(15,23,42,.72);

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

    border-radius:32px;

    padding:50px 35px;

    backdrop-filter:blur(14px);

    text-align:center;

    overflow:hidden;

    box-shadow:
        0 0 60px rgba(124,58,237,.18);
}

/* alien */

.hasil-alien{

    width:140px;

    margin-bottom:18px;

    animation:
        alienFloat 3s ease-in-out infinite;

    filter:
        drop-shadow(0 0 25px rgba(168,85,247,.45));
}

@keyframes alienFloat{

    0%,100%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-12px);
    }
}

/* title */

.hasil-title{

    font-size:42px;

    color:#fff;

    margin-bottom:14px;
}

.hasil-status{

    display:inline-flex;

    padding:10px 22px;

    border-radius:999px;

    background:
        rgba(168,85,247,.16);

    color:#c084fc;

    font-weight:700;

    margin-bottom:18px;
}

.hasil-desc{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:35px;
}

/* score */

.hasil-grid{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:20px;

    margin-bottom:30px;
}

.hasil-box{

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

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

    border-radius:24px;

    padding:30px 20px;
}

.hasil-box h3{

    color:#cbd5e1;

    margin-bottom:16px;
}

.hasil-score{

    font-size:52px;

    font-weight:800;

    color:#fff;
}

.active-score{

    color:#22c55e;

    text-shadow:
        0 0 20px rgba(34,197,94,.35);
}

/* improve */

.hasil-improve{

    margin-bottom:26px;

    color:#fff;

    font-size:18px;
}

.hasil-improve strong{

    color:#22c55e;
}

/* progress */

.hasil-progress{

    width:100%;
    height:16px;

    border-radius:999px;

    overflow:hidden;

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

    margin-bottom:40px;
}

.hasil-progress-bar{

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #86efac
        );

    box-shadow:
        0 0 20px rgba(34,197,94,.35);
}

/* button */

.hasil-action{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;
}

.hasil-btn{

    padding:16px 28px;

    border-radius:18px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    transition:.3s ease;
}

.primary-btn{

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );
}

.secondary-btn{

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

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

.hasil-btn:hover{

    transform:
        translateY(-3px);
}

/* mobile */

@media(max-width:768px){

    .hasil-title{

        font-size:30px;
    }

    .hasil-grid{

        grid-template-columns:1fr;
    }

    .hasil-score{

        font-size:42px;
    }

    .hasil-card{

        padding:40px 22px;
    }

    .hasil-alien{

        width:100px;
    }
}
/* =============== end selesai ==================== */