/* =========================================================
   MIMA ASIK
   MAIN CSS
   File : assets/css/mima.css

   STRUKTUR:
   1. RESET & DASAR
   2. OPENING
   3. OPENING — RESPONSIVE HP
   4. NAVBAR
   5. HERO
   6. PROFIL
   7. PROFIL — RESPONSIVE HP
   8. CERITA KITA
   9. CERITA KITA — RESPONSIVE HP
========================================================= */


/* =========================================================
   1. RESET & DASAR
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body {
    overflow-x:hidden;
    overflow-y:auto;
    scroll-snap-type:y mandatory;
    font-family:Arial, Helvetica, sans-serif;
}


/* =========================================================
   2. OPENING WEBSITE
========================================================= */

.opening {
    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;
    scroll-snap-align:start;
    /* Langit biru cerah */
    background:
        linear-gradient(
            180deg,
            #bdeeff 0%,
            #dff8ff 55%,
            #ffffff 100%
        );
}


/* =========================================================
   OPENING
   DEKORASI BACKGROUND
========================================================= */

.opening::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    top: -230px;
    left: -180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.45);

    filter: blur(5px);

    z-index: 0;

    animation:
        cahayaBergerak
        8s
        ease-in-out
        infinite
        alternate;
}


.opening::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -170px;
    top: -180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.5);

    filter: blur(8px);

    z-index: 0;
}


/* =========================================================
   OPENING
   AWAN
========================================================= */

.cloud {
    position: absolute;

    z-index: 1;

    width: 150px;

    pointer-events: none;

    opacity: 0.75;
}


.cloud img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   AWAN PERTAMA
========================================================= */

.cloud-2 {
    top: 18%;
    left: -60px;

    animation:
        awanJalan
        40s
        linear
        infinite;
}


/* =========================================================
   AWAN KEDUA
========================================================= */

.cloud-4 {
    top: 42%;
    left: -60px;

    width: 120px;

    opacity: 0.55;

    animation:
        awanJalan
        45s
        linear
        infinite;

    animation-delay:
        -20s;
}


/* =========================================================
   ANIMASI AWAN
========================================================= */

@keyframes awanJalan {

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

    100% {
        transform:
            translateX(calc(100vw + 100px));
    }

}


/* =========================================================
   OPENING
   DEKORASI LINGKARAN
========================================================= */

.opening::marker {
    display: none;
}


/* =========================================================
   DEKORASI DI SEKITAR TEKS
========================================================= */

.welcome-text::before,
.welcome-text::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    z-index: -1;
}


/* Lingkaran pink */

.welcome-text::before {
    width: 130px;
    height: 130px;

    left: -100px;
    top: -70px;

    background:
        rgba(255, 170, 205, 0.28);
}


/* Lingkaran kuning */

.welcome-text::after {
    width: 100px;
    height: 100px;

    right: -80px;
    bottom: -40px;

    background:
        rgba(255, 220, 100, 0.3);
}


/* =========================================================
   OPENING
   ANIMASI CAHAYA
========================================================= */

@keyframes cahayaBergerak {

    from {
        transform:
            translate(0, 0)
            scale(1);
    }

    to {
        transform:
            translate(40px, 20px)
            scale(1.08);
    }

}


/* =========================================================
   OPENING
   MASKOT
========================================================= */

.maskot {
    position: absolute;

    bottom: 0;

    width:
        min(32vw, 420px);

    z-index: 5;
}


.maskot img {
    display: block;

    width: 100%;
    height: auto;

    user-select: none;
    pointer-events: none;
}


/* =========================================================
   MI
   MASUK DARI KIRI
========================================================= */

.maskot-mi {

    left: 7%;

    transform:
        translateX(-130%);

    animation:
        miMasuk
        1.5s
        cubic-bezier(.22,.61,.36,1)
        0.4s
        forwards,

        miMelambai
        1s
        ease-in-out
        2.8s
        2;
}


/* =========================================================
   MA
   MASUK DARI KANAN
========================================================= */

.maskot-ma {

    right: 7%;

    transform:
        translateX(130%);

    animation:
        maMasuk
        1.5s
        cubic-bezier(.22,.61,.36,1)
        1.8s
        forwards,

        maMelambai
        1s
        ease-in-out
        4.1s
        2;
}


/* =========================================================
   ANIMASI MASUK MI
========================================================= */

@keyframes miMasuk {

    0% {
        transform:
            translateX(-130%);
    }

    70% {
        transform:
            translateX(8%);
    }

    100% {
        transform:
            translateX(0);
    }

}


/* =========================================================
   ANIMASI MASUK MA
========================================================= */

@keyframes maMasuk {

    0% {
        transform:
            translateX(130%);
    }

    70% {
        transform:
            translateX(-8%);
    }

    100% {
        transform:
            translateX(0);
    }

}


/* =========================================================
   GERAKAN MI
========================================================= */

@keyframes miMelambai {

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

    25% {
        transform:
            translateY(-5px)
            rotate(-1deg);
    }

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

    75% {
        transform:
            translateY(-3px)
            rotate(-1deg);
    }

}


/* =========================================================
   GERAKAN MA
========================================================= */

@keyframes maMelambai {

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

    25% {
        transform:
            translateY(-5px)
            rotate(1deg);
    }

    50% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    75% {
        transform:
            translateY(-3px)
            rotate(1deg);
    }

}


/* =========================================================
   OPENING
   TEKS SAMBUTAN
========================================================= */

.welcome-text {

    position: absolute;

    left: 50%;
    top: 45%;

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

    width:
        min(90%, 700px);

    text-align: center;

    z-index: 10;

    opacity: 0;

    animation:
        welcomeMuncul
        1s
        ease
        4.8s
        forwards;
}


/* =========================================================
   HI
========================================================= */

.welcome-title {

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

    font-weight: 800;

    margin-bottom: 12px;
}


/* =========================================================
   SELAMAT DATANG
========================================================= */

.welcome-main {

    font-size:
        clamp(24px, 3.5vw, 44px);

    font-weight: 600;

    line-height: 1.25;
}


/* =========================================================
   SUBTITLE
========================================================= */

.welcome-sub {

    margin-top: 12px;

    font-size:
        clamp(17px, 2vw, 25px);

    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   ANIMASI TEKS
========================================================= */

@keyframes welcomeMuncul {

    0% {

        opacity: 0;

        transform:
            translate(-50%, -40%)
            scale(.95);
    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}


/* =========================================================
   OPENING
   EDUKASI MELINGKAR
========================================================= */

.edu-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 430px;
    height: 300px;

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

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   BUSUR
========================================================= */

.edu-arc {

    position: absolute;

    left: 50%;

    width: 360px;

    display: flex;

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

    font-size: 25px;

    white-space: nowrap;

    will-change:
        transform;
}


/* =========================================================
   BUSUR ATAS
========================================================= */

.edu-arc-top {

    top: -25px;

    transform:
        translateX(-50%);

    animation:
        putarBusurAtas
        8s
        ease-in-out
        infinite;
}


/* =========================================================
   BUSUR BAWAH
========================================================= */

.edu-arc-bottom {

    bottom: 0;

    transform:
        translateX(-50%);

    animation:
        putarBusurBawah
        8s
        ease-in-out
        infinite;
}


/* =========================================================
   BENTUK LENGKUNG ATAS
========================================================= */

.edu-arc-top span:nth-child(1) {
    transform:
        translateY(35px)
        rotate(-12deg);
}

.edu-arc-top span:nth-child(2) {
    transform:
        translateY(12px)
        rotate(-6deg);
}

.edu-arc-top span:nth-child(3) {
    transform:
        translateY(0);
}

.edu-arc-top span:nth-child(4) {
    transform:
        translateY(12px)
        rotate(6deg);
}

.edu-arc-top span:nth-child(5) {
    transform:
        translateY(35px)
        rotate(12deg);
}


/* =========================================================
   BENTUK LENGKUNG BAWAH
========================================================= */

.edu-arc-bottom span:nth-child(1) {
    transform:
        translateY(-35px)
        rotate(12deg);
}

.edu-arc-bottom span:nth-child(2) {
    transform:
        translateY(-12px)
        rotate(6deg);
}

.edu-arc-bottom span:nth-child(3) {
    transform:
        translateY(0);
}

.edu-arc-bottom span:nth-child(4) {
    transform:
        translateY(-12px)
        rotate(-6deg);
}

.edu-arc-bottom span:nth-child(5) {
    transform:
        translateY(-35px)
        rotate(-12deg);
}


/* =========================================================
   ANIMASI BUSUR ATAS
========================================================= */

@keyframes putarBusurAtas {

    0% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    25% {
        transform:
            translateX(-50%)
            rotate(12deg);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-50%)
            rotate(-12deg);
    }

    100% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

}


/* =========================================================
   ANIMASI BUSUR BAWAH
========================================================= */

@keyframes putarBusurBawah {

    0% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    25% {
        transform:
            translateX(-50%)
            rotate(-12deg);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    75% {
        transform:
            translateX(-50%)
            rotate(12deg);
    }

    100% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

}


/* =========================================================
   OPENING
   ANGKA EDUKASI
========================================================= */

.edu-number {

    left: 6%;
    top: 60%;

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

    animation-duration:
        4s;
}


.edu-number-two {

    right: 7%;
    top: 55%;

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

    animation-duration:
        5.5s;

    animation-delay:
        -2s;
}


/* =========================================================
   GERAKAN ANGKA
========================================================= */

@keyframes eduMelayang {

    0% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    100% {
        transform:
            translateY(-12px)
            rotate(5deg);
    }

}


/* =========================================================
   OPENING
   BUBBLE SEMBURAN
========================================================= */

.bubble-burst {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 40%;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;

    opacity: 0;

    animation:
        bubbleSembur
        3s
        ease-out
        infinite;
}


.burst-bubble {

    position: absolute;

    bottom: -50px;

    width: 35px;
    height: auto;

    opacity: 0;

    animation:
        bubbleSembur
        2.8s
        ease-out
        infinite;
}


/* =========================================================
   BUBBLE GELEMBUNG
========================================================= */

.b1  { left: -2%; width: 90px;  animation-delay: 0s; }
.b2  { left: 4%;  width: 125px; animation-delay: .3s; }
.b3  { left: 10%; width: 75px;  animation-delay: .7s; }
.b4  { left: 16%; width: 140px; animation-delay: .2s; }
.b5  { left: 23%; width: 95px;  animation-delay: .6s; }
.b6  { left: 29%; width: 130px; animation-delay: .1s; }

.b7  { left: 36%; width: 80px;  animation-delay: .5s; }
.b8  { left: 42%; width: 145px; animation-delay: .3s; }
.b9  { left: 49%; width: 90px;  animation-delay: .8s; }
.b10 { left: 55%; width: 135px; animation-delay: .4s; }
.b11 { left: 62%; width: 75px;  animation-delay: .1s; }
.b12 { left: 67%; width: 125px; animation-delay: .7s; }

.b13 { left: 73%; width: 95px;  animation-delay: 1.1s; }
.b14 { left: 79%; width: 140px; animation-delay: 1.4s; }
.b15 { left: 85%; width: 80px;  animation-delay: 1.7s; }
.b16 { left: 90%; width: 125px; animation-delay: 1.2s; }
.b17 { left: 95%; width: 90px;  animation-delay: 1.6s; }

.b18 { left: 2%;  width: 70px;  animation-delay: 1.3s; }
.b19 { left: 14%; width: 115px; animation-delay: 1.8s; }
.b20 { left: 27%; width: 85px;  animation-delay: 1.5s; }
.b21 { left: 40%; width: 110px; animation-delay: 1.9s; }
.b22 { left: 53%; width: 75px;  animation-delay: 1.4s; }
.b23 { left: 66%; width: 120px; animation-delay: 1.8s; }
.b24 { left: 88%; width: 100px; animation-delay: 1.5s; }


/* =========================================================
   ANIMASI BUBBLE
========================================================= */

@keyframes bubbleSembur {

    0% {

        transform:
            translate(0, 0)
            scale(.5);

        opacity: 0;
    }

    15% {
        opacity: .8;
    }

    70% {
        opacity: .65;
    }

    100% {

        transform:
            translate(
                var(--arah, 0px),
                -220px
            )
            scale(1);

        opacity: 0;
    }

}


/* =========================================================
   OPENING
   BUBBLE WARNA-WARNI
========================================================= */

.color-burst {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 40%;

    z-index: 3;

    pointer-events: none;

    overflow: hidden;
}


.color-bubble {

    position: absolute;

    bottom: -40px;

    border-radius: 50%;

    opacity: 0;

    animation:
        colorBubbleSembur
        2.5s
        ease-out
        infinite;
}


/* =========================================================
   WARNA BUBBLE
========================================================= */

.cb1 {
    left: 5%;
    width: 28px;
    height: 28px;
    background: #ff8fc7;
    animation-delay: .2s;
}

.cb2 {
    left: 13%;
    width: 45px;
    height: 45px;
    background: #ffd85c;
    animation-delay: .7s;
}

.cb3 {
    left: 21%;
    width: 25px;
    height: 25px;
    background: #65d9ff;
    animation-delay: .4s;
}

.cb4 {
    left: 31%;
    width: 40px;
    height: 40px;
    background: #b98cff;
    animation-delay: 1s;
}

.cb5 {
    left: 40%;
    width: 30px;
    height: 30px;
    background: #ff9f68;
    animation-delay: .5s;
}

.cb6 {
    left: 49%;
    width: 48px;
    height: 48px;
    background: #ff8fc7;
    animation-delay: .9s;
}

.cb7 {
    left: 58%;
    width: 25px;
    height: 25px;
    background: #ffd85c;
    animation-delay: .3s;
}

.cb8 {
    left: 67%;
    width: 42px;
    height: 42px;
    background: #65d9ff;
    animation-delay: .8s;
}

.cb9 {
    left: 75%;
    width: 30px;
    height: 30px;
    background: #b98cff;
    animation-delay: .5s;
}

.cb10 {
    left: 83%;
    width: 45px;
    height: 45px;
    background: #ff9f68;
    animation-delay: 1.1s;
}

.cb11 {
    left: 90%;
    width: 25px;
    height: 25px;
    background: #ff8fc7;
    animation-delay: .6s;
}

.cb12 {
    left: 96%;
    width: 35px;
    height: 35px;
    background: #65d9ff;
    animation-delay: .9s;
}


/* =========================================================
   ANIMASI BUBBLE WARNA
========================================================= */

@keyframes colorBubbleSembur {

    0% {

        transform:
            translateY(0)
            scale(.5);

        opacity: 0;
    }

    15% {
        opacity: .8;
    }

    70% {
        opacity: .65;
    }

    100% {

        transform:
            translateY(-200px)
            scale(1);

        opacity: 0;
    }

}



/* =========================================================
   3. NAVBAR MIMA ASIK
========================================================= */

.navbar-mima {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

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

    backdrop-filter:
        blur(12px);

    border-bottom:
        2px solid
        rgba(100,180,255,.15);

    z-index: 1000;
}

.nav-container {

    width:
        min(1200px, 92%);

    margin: auto;

    min-height: 72px;

    display: flex;

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

    gap: 30px;
}


/* =========================================================
   NAVBAR — LOGO
========================================================= */

.nav-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    font-size: 21px;
    font-weight: 900;

    color: #168de2;
}


.nav-logo img {

    width: 48px;
    height: 48px;

    object-fit: contain;
}


/* =========================================================
   NAVBAR — MENU
========================================================= */

.nav-menu {

    display: flex;

    align-items: center;

    gap: 8px;
}


.nav-menu a {

    padding: 10px 15px;

    border-radius: 14px;

    text-decoration: none;

    color: #555;

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

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.nav-menu a:hover {

    background:
        #e8f7ff;

    color:
        #168de2;

    transform:
        translateY(-2px);
}


.nav-menu a.active {

    background:
        #168de2;

    color:
        white;
}


/* =========================================================
   4. HERO MIMA ASIK
========================================================= */

.hero-mima {

    position: relative;

    min-height: 620px;

    overflow: hidden;

    display: flex;

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

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #dff5ff 0%,
            #ffffff 48%,
            #ffe4f2 100%
        );
}


/* =========================================================
   HERO — ISI
========================================================= */

.hero-content {

    position: relative;

    z-index: 5;

    width:
        min(700px, 90%);

    margin-top: -20px;
}


.hero-badge {

    display: inline-block;

    padding: 9px 18px;

    margin-bottom: 18px;

    border-radius: 30px;

    background:
        white;

    color:
        #168de2;

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(0,0,0,.08);
}


.hero-content h1 {

    margin: 0;

    font-size:
        clamp(38px, 6vw, 68px);

    line-height: 1.05;

    color:
        #168de2;
}


.hero-content h1 strong {

    display: block;

    color:
        #ef5fa8;
}


.hero-content p {

    margin:
        22px auto 28px;

    max-width: 560px;

    font-size: 19px;

    line-height: 1.6;

    color:
        #555;
}


/* =========================================================
   HERO — BUTTON
========================================================= */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;
}


.hero-btn {

    display: inline-flex;

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

    min-width: 155px;

    padding: 13px 22px;

    border-radius: 18px;

    text-decoration: none;

    font-weight: 800;

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


.hero-btn:hover {

    transform:
        translateY(-4px);

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


.hero-btn-primary {

    background:
        #168de2;

    color:
        white;
}


.hero-btn-secondary {

    background:
        white;

    color:
        #ef5fa8;

    border:
        2px solid
        #ffd0e5;
}


/* =========================================================
   HERO — MASKOT
========================================================= */

.hero-maskot {

    position: absolute;

    bottom: -10px;

    z-index: 3;

    pointer-events: none;
}


.hero-maskot img {

    display: block;

    width: 190px;

    height: auto;

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


.hero-mi {

    left: 5%;

    animation:
        heroMi
        3s
        ease-in-out
        infinite
        alternate;
}


.hero-ma {

    right: 5%;

    animation:
        heroMa
        3.4s
        ease-in-out
        infinite
        alternate;
}


@keyframes heroMi {

    from {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    to {
        transform:
            translateY(-12px)
            rotate(2deg);
    }

}


@keyframes heroMa {

    from {
        transform:
            translateY(-5px)
            rotate(2deg);
    }

    to {
        transform:
            translateY(-17px)
            rotate(-2deg);
    }

}


/* =========================================================
   HERO — BUBBLE SEMBURAN
========================================================= */

.bubble-burst {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 40%;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;

    opacity: 0;

    animation:
        bubbleSembur
        3s
        ease-out
        infinite;
}


.burst-bubble {

    position: absolute;

    bottom: -50px;

    width: 35px;
    height: auto;

    opacity: 0;

    animation:
        bubbleSembur
        2.8s
        ease-out
        infinite;
}


/* =========================================================
   HERO — BUBBLE POSISI
========================================================= */

.b1  { left: -2%; width: 90px;  animation-delay: 0s; }
.b2  { left: 4%;  width: 125px; animation-delay: .3s; }
.b3  { left: 10%; width: 75px;  animation-delay: .7s; }
.b4  { left: 16%; width: 140px; animation-delay: .2s; }
.b5  { left: 23%; width: 95px;  animation-delay: .6s; }
.b6  { left: 29%; width: 130px; animation-delay: .1s; }
.b7  { left: 36%; width: 80px;  animation-delay: .5s; }
.b8  { left: 42%; width: 145px; animation-delay: .3s; }
.b9  { left: 49%; width: 90px;  animation-delay: .8s; }
.b10 { left: 55%; width: 135px; animation-delay: .4s; }
.b11 { left: 62%; width: 75px;  animation-delay: .1s; }
.b12 { left: 67%; width: 125px; animation-delay: .7s; }
.b13 { left: 73%; width: 95px;  animation-delay: 1.1s; }
.b14 { left: 79%; width: 140px; animation-delay: 1.4s; }
.b15 { left: 85%; width: 80px;  animation-delay: 1.7s; }
.b16 { left: 90%; width: 125px; animation-delay: 1.2s; }
.b17 { left: 95%; width: 90px;  animation-delay: 1.6s; }
.b18 { left: 2%;  width: 70px;  animation-delay: 1.3s; }
.b19 { left: 14%; width: 115px; animation-delay: 1.8s; }
.b20 { left: 27%; width: 85px;  animation-delay: 1.5s; }
.b21 { left: 40%; width: 110px; animation-delay: 1.9s; }
.b22 { left: 53%; width: 75px;  animation-delay: 1.4s; }
.b23 { left: 66%; width: 120px; animation-delay: 1.8s; }
.b24 { left: 88%; width: 100px; animation-delay: 1.5s; }


/* =========================================================
   HERO — ANGKA EDUKASI
========================================================= */

.edu-number {

    left: 6%;
    top: 60%;

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

    animation-duration:
        4s;
}


.edu-number-two {

    right: 7%;
    top: 55%;

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

    animation-duration:
        5.5s;

    animation-delay:
        -2s;
}


/* =========================================================
   HERO — BUBBLE WARNA
========================================================= */

.color-burst {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 40%;

    z-index: 3;

    pointer-events: none;

    overflow: hidden;
}


.color-bubble {

    position: absolute;

    bottom: -40px;

    border-radius: 50%;

    opacity: 0;

    animation:
        colorBubbleSembur
        2.5s
        ease-out
        infinite;
}


.cb1 {
    left: 5%;
    width: 28px;
    height: 28px;
    background: #ff8fc7;
    animation-delay: .2s;
}

.cb2 {
    left: 13%;
    width: 45px;
    height: 45px;
    background: #ffd85c;
    animation-delay: .7s;
}

.cb3 {
    left: 21%;
    width: 25px;
    height: 25px;
    background: #65d9ff;
    animation-delay: .4s;
}

.cb4 {
    left: 31%;
    width: 40px;
    height: 40px;
    background: #b98cff;
    animation-delay: 1s;
}

.cb5 {
    left: 40%;
    width: 30px;
    height: 30px;
    background: #ff9f68;
    animation-delay: .5s;
}

.cb6 {
    left: 49%;
    width: 48px;
    height: 48px;
    background: #ff8fc7;
    animation-delay: .9s;
}

.cb7 {
    left: 58%;
    width: 25px;
    height: 25px;
    background: #ffd85c;
    animation-delay: .3s;
}

.cb8 {
    left: 67%;
    width: 42px;
    height: 42px;
    background: #65d9ff;
    animation-delay: .8s;
}

.cb9 {
    left: 75%;
    width: 30px;
    height: 30px;
    background: #b98cff;
    animation-delay: .5s;
}

.cb10 {
    left: 83%;
    width: 45px;
    height: 45px;
    background: #ff9f68;
    animation-delay: 1.1s;
}

.cb11 {
    left: 90%;
    width: 25px;
    height: 25px;
    background: #ff8fc7;
    animation-delay: .6s;
}

.cb12 {
    left: 96%;
    width: 35px;
    height: 35px;
    background: #65d9ff;
    animation-delay: .9s;
}


/* =========================================================
   HERO — ANIMASI BUBBLE WARNA
========================================================= */

@keyframes colorBubbleSembur {

    0% {

        transform:
            translateY(0)
            scale(.5);

        opacity: 0;
    }

    15% {
        opacity: .8;
    }

    70% {
        opacity: .65;
    }

    100% {

        transform:
            translateY(-200px)
            scale(1);

        opacity: 0;
    }

}


/* =========================================================
   5. PROFIL MIMA ASIK
   HOLOGRAM PROJECTION
========================================================= */

.profil-mima {

    position: relative;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(255,255,255,.98) 0%,
            rgba(220,247,255,.95) 28%,
            rgba(175,228,255,.96) 60%,
            rgba(255,215,240,.98) 100%
        );
}


/* =========================================================
   PROFIL
   MASKOT
========================================================= */

.profil-maskot {

    position: absolute;

    left: 2%;
    bottom: 0;

    width:
        min(30vw, 360px);

    z-index: 4;

    transform:
        rotate(-4deg)
        translateY(10px);

    pointer-events: none;

    animation:
        profilMaskotMasuk
        .9s
        ease-out
        forwards;
}


.profil-maskot img {

    display: block;

    width: 100%;
    height: auto;

    filter:
        drop-shadow(
            0 12px 25px
            rgba(0,100,200,.22)
        );
}


@keyframes profilMaskotMasuk {

    from {

        opacity: 0;

        transform:
            translateX(-80px)
            rotate(-10deg)
            translateY(30px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0)
            rotate(-4deg)
            translateY(10px);
    }

}


/* =========================================================
   PROFIL
   SINAR HOLOGRAM
========================================================= */

.holo-beam {

    position: absolute;

    left: 13%;
    bottom: 7%;

    width: 40%;
    height: 48%;

    z-index: 6;

    transform:
        rotate(-18deg);

    transform-origin:
        bottom left;

    background:
        linear-gradient(
            90deg,
            rgba(0,200,255,.38) 0%,
            rgba(80,225,255,.24) 35%,
            rgba(80,225,255,.14) 70%,
            rgba(120,235,255,0) 100%
        );

    clip-path:
        polygon(
            0 44%,
            100% 38%,
            100% 48%,
            0 56%
        );

    filter:
        blur(7px);

    opacity:
        .65;

    pointer-events:
        none;

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


@keyframes holoBeamPulse {

    0% {
        opacity: .30;
        filter: blur(8px);
    }

    25% {
        opacity: .72;
        filter: blur(5px);
    }

    50% {
        opacity: .38;
        filter: blur(8px);
    }

    75% {
        opacity: .78;
        filter: blur(5px);
    }

    100% {
        opacity: .30;
        filter: blur(8px);
    }

}


/* =========================================================
   PROFIL
   GLOW
========================================================= */

.holo-glow {

    position: absolute;

    left: 21%;
    bottom: 20%;

    width: 75px;
    height: 75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(120,240,255,.65) 0%,
            rgba(0,200,255,.30) 35%,
            rgba(0,180,255,0) 75%
        );

    filter:
        blur(12px);

    z-index: 7;

    pointer-events: none;

    animation:
        holoGlow
        2.5s
        ease-in-out
        infinite
        alternate;
}


@keyframes holoGlow {

    from {

        opacity: .45;

        transform:
            scale(.8);
    }

    to {

        opacity: .9;

        transform:
            scale(1.25);
    }

}


/* =========================================================
   PROFIL
   PARTIKEL
========================================================= */

.holo-particles {

    position: absolute;

    left: 35%;
    top: 22%;

    width: 40%;
    height: 45%;

    z-index: 3;

    pointer-events: none;
}


.holo-particles span {

    position: absolute;

    color: #ffffff;

    font-size: 20px;

    text-shadow:
        0 0 8px #00bfff,
        0 0 18px #00bfff;

    animation:
        particleFloat
        2.5s
        ease-in-out
        infinite
        alternate;
}


.holo-particles span:nth-child(1) {
    left: 10%;
    top: 65%;
}

.holo-particles span:nth-child(2) {
    left: 25%;
    top: 45%;
}

.holo-particles span:nth-child(3) {
    left: 42%;
    top: 25%;
}

.holo-particles span:nth-child(4) {
    left: 58%;
    top: 55%;
}

.holo-particles span:nth-child(5) {
    left: 70%;
    top: 18%;
}

.holo-particles span:nth-child(6) {
    left: 82%;
    top: 42%;
}

.holo-particles span:nth-child(7) {
    left: 48%;
    top: 70%;
}

.holo-particles span:nth-child(8) {
    left: 90%;
    top: 10%;
}


@keyframes particleFloat {

    from {

        transform:
            translateY(8px)
            scale(.8);

        opacity: .45;
    }

    to {

        transform:
            translateY(-12px)
            scale(1.2);

        opacity: 1;
    }

}


/* =========================================================
   PROFIL
   AREA HOLOGRAM
========================================================= */

.profil-hologram {

    position: absolute;

    right: 5%;
    top: 12%;

    width:
        min(58%, 700px);

    z-index: 10;
}


/* =========================================================
   JUDUL HOLOGRAM
========================================================= */

.profil-holo-title {

    margin-bottom: 10px;

    text-align: center;

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

    color: #008fd5;

    text-shadow:
        0 0 10px
        rgba(0,180,255,.45);
}


/* =========================================================
   PROFIL
   AREA KARTU
========================================================= */

.profil-cards {

    position: relative;

    width: 100%;

    min-height: 350px;

    display: flex;

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


/* =========================================================
   PROFIL
   KARTU
========================================================= */

.profil-card {

    position: absolute;

    width: 100%;

    padding: 32px 38px;

    box-sizing: border-box;

    border-radius: 28px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(0,190,255,.20),
            rgba(50,210,255,.10),
            rgba(0,130,255,.18)
        );

    border:
        2px solid
        rgba(80,225,255,.75);

    box-shadow:

        0 0 12px
        rgba(0,210,255,.65),

        0 0 35px
        rgba(0,180,255,.35),

        inset 0 0 25px
        rgba(0,210,255,.18);

    backdrop-filter:
        blur(8px);

    color:
        #e9fbff;

    opacity: 0;

    transform:
        translateX(50px)
        scale(.94);

    pointer-events:
        none;

    transition:
        opacity .4s ease,
        transform .4s ease;

    overflow:
        hidden;
}


.profil-card::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -20%;

    height: 2px;

    background:
        rgba(150,245,255,.8);

    box-shadow:
        0 0 10px
        rgba(0,220,255,.9);

    animation:
        holoScan
        3s
        linear
        infinite;
}


@keyframes holoScan {

    0% {
        top: -10%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }

}


/* =========================================================
   KARTU AKTIF
========================================================= */

.profil-card.active {

    opacity: 1;

    transform:
        translateX(0)
        scale(1);

    pointer-events:
        auto;
}


/* =========================================================
   IKON
========================================================= */

.profil-card-icon {

    font-size: 46px;

    margin-bottom: 5px;

    filter:
        drop-shadow(
            0 0 8px
            rgba(0,220,255,.8)
        );
}


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

.profil-card-label {

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    color:
        #9df4ff;

    text-shadow:
        0 0 8px #00cfff,
        0 0 18px rgba(0,200,255,.7);

    margin-bottom: 8px;
}


/* =========================================================
   JUDUL KARTU
========================================================= */

.profil-card h2 {

    margin:
        0 0 12px;

    font-size: 30px;

    line-height: 1.15;

    color:
        #ffffff;

    font-weight: 900;

    text-shadow:
        0 2px 4px rgba(0,70,120,.75),
        0 0 8px rgba(0,210,255,.9);
}


/* =========================================================
   ISI KARTU
========================================================= */

.profil-card p {

    margin:
        0 auto;

    max-width: 560px;

    font-size: 16px;

    line-height: 1.7;

    color:
        #f3fdff;

    font-weight: 600;

    text-shadow:
        0 2px 4px rgba(0,70,120,.75);
}


/* =========================================================
   PROFIL
   NAVIGASI KARTU
========================================================= */

.profil-navigation {

    display: flex;

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

    gap: 18px;

    margin-top: 15px;
}


.profil-navigation button {

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 50%;

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

    color:
        #008fd5;

    font-size: 28px;

    cursor: pointer;

    box-shadow:
        0 5px 18px
        rgba(0,120,200,.18);
}


.profil-dots {

    display: flex;

    gap: 7px;
}


.profil-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        rgba(0,150,220,.25);

    transition:
        .3s ease;
}


.profil-dot.active {

    width: 25px;

    border-radius: 10px;

    background:
        #00a9ed;
}


/* =========================================================
   PROFIL
   TOMBOL KEMBALI
========================================================= */

.profil-back {

    position: absolute;

    left: 22px;
    bottom: 20px;

    z-index: 30;

    padding: 9px 16px;

    border: none;

    border-radius: 20px;

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

    color:
        #0877b8;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 18px
        rgba(0,100,180,.15);
}



/* =========================================================
   6. CERITA KITA MIMA ASIK
========================================================= */

.cerita-mima {

    position: relative;

    width: 100%;

    min-height: 100dvh;

    padding:
        45px 5vw 15px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.75),
            transparent 25%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(255,255,255,.55),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #dff5ff,
            #eef9ff 45%,
            #ffe8f4
        );

    overflow:
        hidden;
}


/* =========================================================
   CERITA
   WRAPPER
========================================================= */

.cerita-wrapper {

    width: 100%;

    max-width: 1400px;

    min-height:
        calc(100dvh - 90px);

    margin:
        -35px auto 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(330px, .75fr);

    gap: 30px;

    align-items:
        center;
}


/* =========================================================
   CERITA
   KONTEN KIRI
========================================================= */

.cerita-content {
    width: 100%;
}


.cerita-heading {
    margin-bottom: 25px;
}


.cerita-kecil {

    display: inline-block;

    padding: 7px 14px;

    border-radius: 30px;

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

    color:
        #1677b8;

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

    box-shadow:
        0 5px 20px rgba(0,0,0,.06);
}


.cerita-heading h1 {

    margin-top: 10px;

    font-size:
        clamp(36px, 5vw, 64px);

    line-height: 1;

    color:
        #1677b8;
}


.cerita-heading p {

    max-width: 600px;

    margin-top: 12px;

    color:
        #557080;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   CERITA
   GRID POLAROID
========================================================= */

.cerita-polaroid-grid {

    width: 100%;

    display: grid;

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

    gap: 28px;

    align-items:
        start;
}


/* =========================================================
   POLAROID
========================================================= */

.cerita-polaroid {

    position: relative;

    background:
        #fff;

    padding:
        12px 12px 20px;

    border-radius:
        4px;

    box-shadow:
        0 15px 35px rgba(35,80,110,.16),
        0 3px 8px rgba(0,0,0,.08);

    transform:
        rotate(var(--rotasi));

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


.cerita-polaroid:hover {

    transform:
        rotate(0deg)
        translateY(-8px);

    box-shadow:
        0 25px 45px rgba(35,80,110,.22);
}


/* =========================================================
   FOTO
========================================================= */

.polaroid-photo {

    width: 100%;

    overflow:
        hidden;

    background:
        #f5f8fa;
}


.polaroid-photo img {

    width: 100%;
    height: 100%;

    object-fit:
        cover;

    display:
        block;
}


/* =========================================================
   CAPTION POLAROID
========================================================= */

.polaroid-caption {

    padding:
        15px 7px 4px;
}


.polaroid-date {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #ec5d91;

    font-size:
        11px;

    font-weight:
        700;
}


.polaroid-caption h2 {

    margin-bottom:
        7px;

    color:
        #176d9e;

    font-size:
        18px;

    line-height:
        1.25;
}


.polaroid-caption p {

    color:
        #657783;

    font-size:
        13px;

    line-height:
        1.5;

    display:
        -webkit-box;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;
}


/* =========================================================
   TOMBOL LIHAT SELENGKAPNYA
========================================================= */

.btn-lihat-cerita {

    margin-top:
        12px;

    padding:
        8px 13px;

    border:
        0;

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            #2196d3,
            #e95d93
        );

    color:
        white;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .25s ease;
}


.btn-lihat-cerita span {
    margin-left:
        5px;
}


.btn-lihat-cerita:hover {

    transform:
        translateX(3px);

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


/* =========================================================
   CERITA
   AREA MASKOT MA
========================================================= */

.cerita-ma-area {

    position: relative;

    min-height:
        600px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;
}


/* =========================================================
   CERITA
   BUBBLE MA
========================================================= */

.cerita-bubble {

    position: absolute;

    top: 45px;
    right: 5%;

    padding:
        17px 22px;

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

    border-radius:
        22px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.10);

    text-align:
        center;

    z-index:
        3;
}


.cerita-bubble::after {

    content: "";

    position: absolute;

    bottom: -12px;
    left: 35px;

    border-width:
        12px 10px 0;

    border-style:
        solid;

    border-color:
        rgba(255,255,255,.88)
        transparent
        transparent
        transparent;
}


.cerita-bubble span {

    display:
        block;

    color:
        #ec5d91;

    font-size:
        13px;

    font-weight:
        700;
}


.cerita-bubble strong {

    display:
        block;

    margin-top:
        4px;

    color:
        #176d9e;

    font-size:
        17px;

    line-height:
        1.3;
}


/* =========================================================
   CERITA
   SINAR HOLOGRAM MA
========================================================= */

.cerita-sinar {

    position: absolute;

    right: 70%;
    bottom: 185px;

    width: 480px;
    height: 260px;

    pointer-events:
        none;

    z-index:
        1;

    clip-path:
        polygon(
            100% 46%,
            100% 54%,
            0% 100%,
            0% 0%
        );

    background:
        linear-gradient(
            90deg,
            rgba(90,220,255,0),
            rgba(90,220,255,.10) 25%,
            rgba(90,220,255,.20) 60%,
            rgba(255,255,255,.40)
        );

    filter:
        blur(2px)
        drop-shadow(
            0 0 15px rgba(70,210,255,.45)
        );

    transform-origin:
        right center;

    animation:
        sinarHologram
        2.8s
        ease-in-out
        infinite;
}


/* =========================================================
   CAHAYA INTI
========================================================= */

.cerita-sinar span {

    position: absolute;

    right: 0;
    top: 50%;

    width: 100%;
    height: 3px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(130,235,255,.25),
            rgba(255,255,255,.85)
        );

    box-shadow:
        0 0 8px rgba(100,220,255,.7),
        0 0 18px rgba(100,220,255,.5);
}


@keyframes sinarHologram {

    0%,
    100% {

        opacity:
            .55;

        transform:
            scaleX(.96);
    }

    50% {

        opacity:
            .95;

        transform:
            scaleX(1);
    }

}


/* =========================================================
   CERITA
   MASKOT HOLOGRAM MA
========================================================= */

.cerita-maskot-ma {

    position: absolute;

    bottom: -35px;
    right: 10%;

    width:
        min(82%, 370px);

    max-height:
        550px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 20px 25px
            rgba(30,100,140,.20)
        );

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


@keyframes ceritaMaskotFloat {

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

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

}


/* =========================================================
   CERITA
   BELUM ADA CERITA
========================================================= */

.cerita-kosong {

    grid-column:
        1 / -1;

    padding:
        45px;

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

    border-radius:
        25px;

    text-align:
        center;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);
}


.cerita-kosong-icon {

    font-size:
        45px;

    margin-bottom:
        10px;
}


.cerita-kosong h2 {

    color:
        #176d9e;
}


.cerita-kosong p {

    margin-top:
        5px;

    color:
        #71818b;
}

/* =========================================================
   GAME MIMA ASIK
========================================================= */

.game-mima {

    position: relative;

    width: 100%;
    min-height: 100dvh;

    padding: 100px 6vw 50px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e8f7ff 0%,
            #ffffff 48%,
            #fff0f7 100%
        );
}


/* =========================================================
   WRAPPER
========================================================= */

.game-wrapper {

    position: relative;

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

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.game-heading {

    text-align: center;

    margin-bottom: 35px;
}


.game-kecil {

    display: inline-block;

    margin-bottom: 8px;

    padding: 7px 16px;

    border-radius: 999px;

    background: #ffffff;

    color: #0047ff;

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

    box-shadow:
        0 8px 25px rgba(0, 71, 255, .10);
}


.game-heading h1 {

    margin: 0;

    color: #0047ff;

    font-size: clamp(40px, 5vw, 64px);

    font-weight: 800;

    line-height: 1.1;
}


.game-heading p {

    max-width: 600px;

    margin: 14px auto 0;

    color: #555;

    font-size: 18px;

    line-height: 1.5;
}


/* =========================================================
   PILIHAN GAME
========================================================= */

.game-pilihan {

    display: grid;

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

    gap: 50px;

    max-width: 1000px;

    margin: 0 auto;
}


/* =========================================================
   GAME CARD
   BUKAN KARTU LAGI
========================================================= */

.game-card {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    min-height: 480px;

    padding: 0;

    border: none;

    border-radius: 0;

    background: transparent;

    overflow: visible;

    box-shadow: none;

    transition:
        transform .25s ease;
}


/* HAPUS DEKORASI KARTU */

.game-card::before {

    display: none;
}


/* =========================================================
   GAMBAR MASKOT
========================================================= */

/* =========================================================
   UKURAN MASKOT
========================================================= */

.game-card-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;

    border-radius: 40px;

    transition: transform .3s ease;
}
/* =========================================================
   MASKOT BERGERAK SAAT HOVER
========================================================= */

.game-card:hover
.game-card-image img {

    transform:
        translateY(-8px)
        scale(1.03);
}


/* =========================================================
   TOMBOL PLAY
========================================================= */

.game-play-button {
    position: absolute;

    top: 46%;

    width: 76px;
    height: 76px;

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

    padding: 0;

    border: 5px solid #ffffff;
    border-radius: 50%;

    background: #e52323;
    color: #ffffff;

    font-size: 30px;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    z-index: 5;

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

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

    transition:
        background .2s ease;
}

/* MA — tombol di sebelah kiri */
.game-petualangan .game-play-button {
    left: 10%;
    transform: translate(-50%, -50%);
}


/* MI — tombol di sebelah kanan */
.game-cerdas .game-play-button {
    left: 90%;
    transform: translate(-50%, -50%);
}

/* =========================================================
   DENYUT PLAY
========================================================= */

@keyframes gamePlayPulse {

    0%,
    100% {

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

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .20),
            0 0 0 0 rgba(229, 35, 35, .45);
    }

    50% {

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

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .20),
            0 0 0 16px rgba(229, 35, 35, 0);
    }

}


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

.game-play-button:hover {

    background: #c91414;

    animation: none;

    transform:
        translate(-50%, -50%)
        scale(1.15);
}


/* =========================================================
   ISI GAME
========================================================= */

.game-card-content {

    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        5px 25px 0;

    text-align: center;
}


.game-card-label {

    display: inline-block;

    margin-bottom: 7px;

    color: #0047ff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.game-cerdas .game-card-label {

    color: #d4145a;
}


.game-card h2 {

    margin:
        0 0 10px;

    color: #222;

    font-size: 29px;

    font-weight: 800;
}


.game-card p {

    max-width: 390px;

    margin: 0 auto;

    color: #666;

    font-size: 15px;

    line-height: 1.55;
}


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

.game-card-button {

    display: inline-flex;

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

    gap: 10px;

    margin-top: 18px;

    padding: 11px 20px;

    border: none;

    border-radius: 999px;

    background: #0047ff;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

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


.game-card-button:hover {

    transform:
        translateY(-2px);

    background: #0034bd;
}


.game-cerdas .game-card-button {

    background: #d4145a;
}


.game-cerdas .game-card-button:hover {

    background: #b30e4b;
}


/* =========================================================
   GAME BELUM TERSEDIA
========================================================= */

.game-coming-soon {

    opacity: .55;

    cursor: not-allowed;
}


.game-coming-soon:hover {

    transform: none;

    background: #d4145a;
}


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

.game-footer {

    display: flex;

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

    gap: 15px;

    margin-top: 30px;

    color: #777;

    font-size: 14px;

    font-weight: 600;
}


.game-footer p {

    margin: 0;
}

/* =========================================================
   7. MOBILE
   SEMUA PENGATURAN HP ADA DI SINI
========================================================= */


/* =========================================================
   7A. MOBILE — BERANDA
========================================================= */

@media screen and (max-width: 600px) {

    /* -----------------------------------------------------
       HALAMAN
    ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        overflow-x: hidden;
        overflow-y: hidden;
    }


    /* -----------------------------------------------------
       OPENING / BERANDA
    ----------------------------------------------------- */

    .opening {
        position: relative;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       MASKOT
    ----------------------------------------------------- */

    .opening .maskot {
        position: absolute;
        bottom: 0;

        width: 42vw;
        max-width: 220px;
        height: auto;

        object-fit: contain;

        z-index: 5;
    }


    .opening .maskot-mi {
        left: 2%;
    }


    .opening .maskot-ma {
        right: 2%;
    }


    /* -----------------------------------------------------
       TEKS WELCOME
    ----------------------------------------------------- */

    .opening .welcome-text {
        position: absolute;

        left: 50%;
        top: 39%;

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

        width: 82%;
        max-width: 520px;

        text-align: center;

        z-index: 10;
    }


    .opening .welcome-title {
        font-size: clamp(27px, 7vw, 38px);
        line-height: 1.15;

        margin-bottom: 10px;
    }


    .opening .welcome-main {
        font-size: clamp(21px, 5.5vw, 31px);
        line-height: 1.25;
    }


    .opening .welcome-sub {
        margin-top: 10px;

        font-size: clamp(14px, 3.8vw, 19px);
        line-height: 1.4;
    }


    /* -----------------------------------------------------
       ORBIT PENDIDIKAN
    ----------------------------------------------------- */

    .opening .edu-orbit {
        width: 310px;
        height: 240px;

        left: 50%;
        top: 48%;

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

        z-index: 2;
    }

}
/* =========================================================
   7D. MOBILE — CERITA
========================================================= */

@media screen and (max-width: 600px) {

    /* -----------------------------------------------------
       HALAMAN CERITA
    ----------------------------------------------------- */

    .cerita-mima {
        position: relative;

        width: 100%;
        height: 100dvh;
        min-height: 100dvh;

        padding: 70px 20px 20px;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       WRAPPER
    ----------------------------------------------------- */

    .cerita-wrapper {
        position: relative;

        width: 100%;
        height: 100%;

        margin: 0;
    }


    /* -----------------------------------------------------
       JUDUL CERITA
    ----------------------------------------------------- */

    .cerita-heading {
        position: absolute;

        top: 5px;
        left: 0;

        width: 100%;

        text-align: center;

        z-index: 20;
    }


    .cerita-heading h1 {
        margin: 0;

        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.1;
    }


    .cerita-heading p {
        margin-top: 6px;

        font-size: clamp(14px, 3.8vw, 18px);
        line-height: 1.35;
    }


    /* -----------------------------------------------------
       AREA FOTO CERITA
    ----------------------------------------------------- */

    .cerita-polaroid-grid {
        position: absolute;

        top: 90px;
        right: 3%;

        width: 62%;

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

        z-index: 10;
    }


    .cerita-polaroid {
        width: 100%;
        max-width: 230px;

        margin: 0;
    }


    .polaroid-photo {
        width: 100%;

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


    .polaroid-photo img {
        width: 100%;
        height: auto;

        max-height: 45vh;

        object-fit: contain;
    }


    /* -----------------------------------------------------
       CAPTION
    ----------------------------------------------------- */

    .polaroid-caption {
        text-align: center;
    }


    .polaroid-caption h2 {
        font-size: 18px;
        line-height: 1.2;
    }


    .polaroid-caption p {
        font-size: 13px;
        line-height: 1.35;
    }


    /* -----------------------------------------------------
       AREA MA
    ----------------------------------------------------- */

    .cerita-ma-area {
        position: absolute;

        left: 1%;
        bottom: 0;

        width: 34%;

        z-index: 15;
    }


    .cerita-maskot-ma {
        width: 100%;
        max-width: 145px;

        height: auto;

        object-fit: contain;
    }


    /* -----------------------------------------------------
       BUBBLE MA
    ----------------------------------------------------- */

    .cerita-bubble {
        position: absolute;

        left: 80%;
        bottom: 65%;

        width: 150px;

        font-size: 12px;
        line-height: 1.35;

        z-index: 20;
    }


    /* -----------------------------------------------------
       SINAR
    ----------------------------------------------------- */

    .cerita-sinar {
        position: absolute;

        left: 17%;
        bottom: 15%;

        z-index: 5;
    }

}
/* =====================================================
   INFO & KONTAK MIMA ASIK
===================================================== */

.info-kontak-mima{
    width:100%;
    height:100vh;
    min-height:100vh;
    scroll-snap-align:start;
    overflow:hidden;
}

.info-kontak-wrapper{
    width:100%;
    height:100%;
    padding:80px 6vw 35px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.info-kontak-heading{
    text-align:center;
    margin-bottom:25px;
}

.info-kontak-kecil{
    display:inline-block;
    font-size:13px;
    font-weight:800;
    color:#d4145a;
    margin-bottom:8px;
}

.info-kontak-heading h1{
    margin:0;
    font-size:clamp(30px,4vw,48px);
    font-weight:900;
    color:#17324d;
}

.info-kontak-heading p{
    max-width:650px;
    margin:10px auto 0;
    font-size:15px;
    line-height:1.6;
    color:#60758a;
}

.info-kontak-grid{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.info-kontak-card{
    background:#ffffff;
    border-radius:24px;
    padding:25px;
    text-align:center;
    border:2px solid #edf1f6;
}

.info-kontak-icon{
    font-size:36px;
    margin-bottom:12px;
}

.info-kontak-card h2{
    margin:0 0 10px;
    font-size:20px;
    color:#17324d;
}

.info-kontak-card p{
    margin:0;
    font-size:14px;
    line-height:1.6;
    color:#60758a;
}

.info-kontak-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    padding:10px 18px;
    border-radius:999px;
    background:#0047ff;
    color:#ffffff;
    text-decoration:none;
    font-size:13px;
    font-weight:800;
}

.promo-daftar-mima{
    width:100%;
    max-width:1100px;
    margin:25px auto 0;
    padding:22px 28px;
    border-radius:26px;
    background:#0047ff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

.promo-daftar-text span{
    font-size:12px;
    font-weight:900;
    color:#ffffff;
}

.promo-daftar-text h2{
    margin:6px 0;
    color:#ffffff;
    font-size:24px;
}

.promo-daftar-text p{
    margin:0;
    color:#ffffff;
    font-size:14px;
}

.promo-daftar-button{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:999px;
    background:#ffffff;
    color:#0047ff;
    text-decoration:none;
    font-weight:900;
    white-space:nowrap;
}