/* =====================================================
   JOYFUL MATH
   style.css
===================================================== */


/* =====================================================
   RESET
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f8f7ff;
    color: #25204a;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}


/* =====================================================
   HEADER BERANDA
===================================================== */

.header {
    width: 100%;
    min-height: 90px;
    padding: 15px 4%;

    background: #ffffff;

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

    border-bottom: 1px solid #eeeaff;

    position: sticky;
    top: 0;
    z-index: 1000;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 290px;
    height: auto;
    display: block;
}

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

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

    background: #fff3a8;
    border-radius: 50%;

    font-size: 30px;
}


/* NAVIGATION */

.navbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar a {
    padding: 10px 14px;
    border-radius: 20px;

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

    color: #514b70;

    transition: 0.25s ease;
}

.navbar a:hover {
    background: #f1edff;
    color: #5934d6;
}

.navbar a.active {
    background: #eee9ff;
    color: #5632d5;
}


/* =====================================================
   HEADER PENCAPAIAN
===================================================== */

.main-header {
    width: 100%;
    min-height: 90px;
    padding: 15px 4%;

    background: #ffffff;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #eeeaff;

    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-area .logo-icon {
    width: 55px;
    height: 55px;

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

    background: #fff3a8;
    border-radius: 50%;

    font-size: 30px;
}

.logo-area h1 {
    margin: 0;

    color: #38269a;
    font-size: 25px;
    line-height: 1;
}

.logo-area p {
    margin-top: 5px;

    color: #77718f;
    font-size: 12px;
}


/* =====================================================
   HERO
===================================================== */

.hero {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    min-height: 600px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    overflow: hidden;

    border-radius: 0 0 35px 35px;

    background: linear-gradient(
        135deg,
        #dff5ff,
        #fffdf0
    );
}

.hero-illustration {
    min-height: 600px;

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

    overflow: hidden;
}

.hero-illustration img {
    width: 88%;
    max-width: 760px;
    height: auto;
    display: block;
}

.hero-content {
    padding: 50px 70px 50px 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-small {
    color: #6842e8;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hero-content h2 {
    color: #38269a;
    font-size: 44px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.hero-content h2 span {
    color: #e94276;
}

.hero-content > p {
    color: #4f4a72;
    font-size: 18px;
    line-height: 1.7;
    max-width: 570px;
    margin-bottom: 30px;
}


/* TOMBOL MULAI */

.btn-start {
    display: inline-block;
    width: fit-content;

    background: linear-gradient(
        135deg,
        #7145ec,
        #5730d4
    );

    color: #ffffff;

    padding: 17px 35px;

    border-radius: 35px;

    font-size: 17px;
    font-weight: bold;

    box-shadow: 0 8px 20px rgba(83, 48, 210, 0.25);

    transition: 0.25s;
}

.btn-start:hover {
    transform: translateY(-3px);
}


/* =====================================================
   SECTION UMUM
===================================================== */

.challenge-section,
.example-section,
.material-section {
    width: 92%;
    max-width: 1450px;
    margin: 0 auto 45px;
}

.section-title {
    text-align: center;
    margin-bottom: 25px;
}

.section-title h2 {
    font-size: 28px;
    color: #35227f;
    margin-bottom: 5px;
}

.section-title p {
    color: #77718f;
    font-size: 15px;
}


/* =====================================================
   TANTANGAN
===================================================== */

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.challenge-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}

.challenge-card {
    min-height: 270px;

    padding: 25px 17px;

    border-radius: 24px;

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

    text-align: center;

    transition: 0.3s ease;

    box-shadow: 0 7px 20px rgba(70, 52, 150, 0.08);
}

.challenge-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 13px 28px rgba(70, 52, 150, 0.15);
}

.challenge-card img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 12px;
}

.challenge-icon {
    width: 75px;
    height: 75px;

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

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

    border-radius: 22px;

    font-size: 43px;

    margin-bottom: 14px;
}

.challenge-card h3 {
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.challenge-card p {
    font-size: 13px;
    color: #514b62;
    margin-bottom: auto;
}

.challenge-card span {
    margin-top: 18px;

    padding: 7px 15px;

    border-radius: 20px;

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

    font-size: 12px;
    font-weight: 700;
}


/* WARNA KARTU */

.card-orange {
    background: #fff0d7;
}

.card-orange h3 {
    color: #e66c00;
}

.card-green {
    background: #e8f8d9;
}

.card-green h3 {
    color: #319c3b;
}

.card-blue {
    background: #e1f1ff;
}

.card-blue h3 {
    color: #2874d8;
}

.card-purple {
    background: #eee5ff;
}

.card-purple h3 {
    color: #7040d6;
}

.card-pink {
    background: #ffe2ea;
}

.card-pink h3 {
    color: #e34a78;
}


/* =====================================================
   AYO BERMAIN DI BERANDA
===================================================== */

.play-home-section {
    width: 92%;
    max-width: 1050px;
    margin: 50px auto;
}

.play-home-card {
    background: #ffffff;

    border-radius: 30px;

    padding: 35px 45px;

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

    gap: 30px;

    text-align: left;

    box-shadow: 0 10px 30px rgba(70, 52, 150, 0.08);
}

.play-home-icon {
    font-size: 70px;
    flex-shrink: 0;
}

.play-home-content {
    flex: 1;
}

.play-home-content h2 {
    color: #3e2a96;
    font-size: 30px;
    margin-bottom: 10px;
}

.play-home-content p {
    color: #706982;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.btn-play {
    display: inline-block;

    background: #6842e8;
    color: #ffffff;

    padding: 14px 25px;

    border-radius: 28px;

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

    white-space: nowrap;

    transition: 0.25s;
}

.btn-play:hover {
    background: #5433c7;
    transform: translateY(-3px);
}


/* =====================================================
   AYO BERMAIN - HALAMAN
===================================================== */

.play-page {
    width: 92%;
    max-width: 1050px;

    margin: 45px auto 70px;
}

.play-card {
    background: #ffffff;

    border-radius: 30px;

    padding: 45px 35px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(70, 52, 150, 0.08);
}

.play-icon {
    font-size: 75px;
    margin-bottom: 12px;
}

.play-label {
    display: inline-block;

    background: #fff0d9;
    color: #d86619;

    padding: 8px 22px;

    border-radius: 25px;

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

    margin-bottom: 15px;
}

.play-card h1 {
    color: #3e2a96;
    font-size: 38px;
    margin-bottom: 12px;
}

.play-card h1 span {
    color: #e66c00;
}

.intro {
    max-width: 680px;

    margin: 0 auto 35px;

    color: #706982;

    font-size: 16px;
    line-height: 1.7;
}

.choose-box {
    background: #f8f5ff;

    border-radius: 25px;

    padding: 30px;

    max-width: 100%;

    margin: 0 auto;
}

.choose-box h2 {
    color: #4d369b;
    font-size: 24px;
    margin-bottom: 10px;
}

.choose-box > p {
    color: #756d8e;
    font-size: 14px;
    margin-bottom: 25px;
}


/* =====================================================
   PILIH TANTANGAN
===================================================== */

.challenge-option {
    display: block;

    background: #ffffff;

    border: 2px solid #e7e1f7;

    border-radius: 22px;

    padding: 25px 12px;

    text-decoration: none;

    text-align: center;

    min-width: 0;

    transition: 0.25s ease;
}

.challenge-option:hover {
    transform: translateY(-5px);

    border-color: #6842e8;

    box-shadow:
        0 8px 20px rgba(70, 52, 150, 0.10);
}

.challenge-number {
    display: inline-flex;

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

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: #eee8ff;
    color: #6042c8;

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

    margin-bottom: 12px;
}

.challenge-option h3 {
    color: #4d4380;
    font-size: 17px;
    margin-bottom: 8px;
}

.challenge-option p {
    color: #827b99;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.challenge-option.wide {
    grid-column: auto;
    max-width: none;
    width: auto;
    justify-self: stretch;
}

.back-button {
    display: block;

    margin-top: 25px;

    color: #756d8e;

    text-decoration: none;

    font-size: 14px;
}

.back-button:hover {
    color: #6842e8;
}


/* =====================================================
   EXAMPLE FLOW
===================================================== */

.example-section {
    padding: 30px;

    background: #ffffff;

    border-radius: 28px;

    box-shadow: 0 7px 25px rgba(70, 52, 150, 0.06);
}

.example-flow {
    display: flex;

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

    gap: 8px;
}

.example-card {
    flex: 1;

    min-width: 0;

    padding: 18px 13px;

    border: 1px solid #ece9f5;

    border-radius: 18px;

    background: #ffffff;

    position: relative;

    text-align: center;
}

.example-card .number {
    width: 30px;
    height: 30px;

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

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #6842e8;
    color: #ffffff;

    font-weight: 700;
}

.example-card h3 {
    font-size: 14px;

    color: #443d61;

    margin-bottom: 10px;
}

.example-icon {
    font-size: 40px;

    margin-bottom: 10px;
}

.example-card p {
    font-size: 12px;

    color: #77718f;

    min-height: 78px;
}

.arrow {
    display: flex;
    align-items: center;

    font-size: 25px;

    color: #a79fc4;
}


/* LABEL */

.label {
    display: inline-block;

    padding: 5px 12px;

    border-radius: 15px;

    font-size: 10px;
    font-weight: 700;
}

.label.orange {
    background: #fff0d7;
    color: #e66c00;
}

.label.green {
    background: #e8f8d9;
    color: #319c3b;
}

.label.blue {
    background: #e1f1ff;
    color: #2874d8;
}

.label.purple {
    background: #eee5ff;
    color: #7040d6;
}

.label.pink {
    background: #ffe2ea;
    color: #e34a78;
}


/* =====================================================
   MATERIAL
===================================================== */

.material-section {
    padding: 35px 0;
}

.material-grid {
    display: grid;

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

    gap: 15px;
}

.material-card {
    padding: 25px 15px;

    background: #ffffff;

    border: 1px solid #ece9f5;

    border-radius: 20px;

    text-align: center;

    transition: 0.25s ease;
}

.material-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 22px rgba(70, 52, 150, 0.10);
}

.material-card div {
    font-size: 40px;
    margin-bottom: 8px;
}

.material-card h3 {
    font-size: 14px;
    color: #514b70;
}


/* =====================================================
   CTA
===================================================== */

.cta {
    width: 92%;
    max-width: 1450px;

    margin: 10px auto 45px;

    padding: 30px 40px;

    display: flex;
    align-items: center;

    gap: 20px;

    background: linear-gradient(
        100deg,
        #eee8ff,
        #fff5d8
    );

    border-radius: 25px;

    border: 1px solid #e5defa;
}

.cta-icon {
    font-size: 50px;
}

.cta h2 {
    color: #4930a5;
    font-size: 24px;
}

.cta p {
    color: #6e6880;
    font-size: 14px;
}

.btn-cta {
    margin-left: auto;

    padding: 12px 23px;

    background: #6842e8;
    color: #ffffff;

    border-radius: 25px;

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

    transition: 0.25s ease;
}

.btn-cta:hover {
    background: #5733d2;
    transform: translateY(-2px);
}


/* =====================================================
   PETUNJUK
===================================================== */

.petunjuk-page {
    max-width: 900px;

    margin: 0 auto;

    padding: 35px 20px 60px;
}

.petunjuk-title {
    text-align: center;

    margin-bottom: 30px;
}

.petunjuk-title h2 {
    color: #3e2a96;

    font-size: 32px;

    margin-bottom: 10px;
}

.petunjuk-title p {
    color: #706982;

    font-size: 17px;

    line-height: 1.6;
}

.petunjuk-card {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 18px;

    padding: 20px 25px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 7px 20px rgba(70, 52, 150, 0.08);
}

.petunjuk-number {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #eee8ff;

    color: #6042c8;

    font-size: 23px;

    font-weight: bold;
}

.petunjuk-content h3 {
    color: #4d4380;

    font-size: 20px;

    margin-bottom: 6px;
}

.petunjuk-content p {
    color: #706982;

    font-size: 15px;

    line-height: 1.6;

    margin: 0;
}

.petunjuk-pesan {
    margin-top: 30px;

    padding: 25px;

    text-align: center;

    background: #fff8df;

    border-radius: 22px;

    border: 1px solid #f4e6b7;
}

.petunjuk-pesan h2 {
    color: #4d369b;

    margin-bottom: 10px;
}

.petunjuk-pesan p {
    color: #706982;

    line-height: 1.6;
}

.petunjuk-highlight {
    margin-top: 15px;

    color: #6842e8 !important;

    font-size: 18px;

    font-weight: bold;
}

.petunjuk-tombol {
    text-align: center;

    margin-top: 30px;
}

.petunjuk-tombol a {
    display: inline-block;

    padding: 13px 25px;

    background: #6842e8;

    color: #ffffff;

    border-radius: 25px;

    font-weight: bold;

    transition: 0.25s ease;
}

.petunjuk-tombol a:hover {
    background: #5733d2;

    transform: translateY(-2px);
}


/* =====================================================
   HALAMAN PENCAPAIAN
===================================================== */

.pencapaian-page {
    width: 92%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 40px 0 60px;
}


/* HERO PENCAPAIAN */

.pencapaian-hero {
    display: flex;
    align-items: center;

    gap: 25px;

    padding: 30px;

    margin-bottom: 30px;

    background: linear-gradient(
        135deg,
        #fff3c4,
        #e7f5ff
    );

    border-radius: 25px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);
}

.pencapaian-hero-icon {
    font-size: 70px;

    min-width: 90px;

    text-align: center;
}

.pencapaian-hero h2 {
    margin: 0 0 8px;

    color: #4b3f72;

    font-size: 32px;
}

.pencapaian-hero p {
    margin: 0;

    color: #555;

    font-size: 17px;

    line-height: 1.6;
}


/* RINGKASAN */

.pencapaian-ringkasan {
    display: grid;

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

    gap: 20px;

    margin-bottom: 40px;
}

.pencapaian-stat {
    text-align: center;

    background: #ffffff;

    padding: 22px;

    border-radius: 20px;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.08);
}

.pencapaian-stat div {
    font-size: 38px;

    margin-bottom: 8px;
}

.pencapaian-stat strong {
    display: block;

    font-size: 28px;

    color: #4b3f72;
}

.pencapaian-stat span {
    display: block;

    margin-top: 5px;

    color: #777;
}


/* SECTION PENCAPAIAN */

.pencapaian-section {
    margin-bottom: 40px;
}

.pencapaian-section h3 {
    text-align: center;

    margin-bottom: 25px;

    color: #4b3f72;

    font-size: 26px;
}


/* LENCANA */

.lencana-grid {
    display: grid;

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

    gap: 15px;
}

.lencana-card {
    text-align: center;

    padding: 20px 14px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.07);

    transition: 0.2s ease;
}

.lencana-card:hover {
    transform: translateY(-4px);
}

.lencana-card.belum {
    opacity: 0.7;
}

.lencana-icon {
    font-size: 48px;

    margin-bottom: 10px;
}

.lencana-card h4 {
    margin: 0 0 8px;

    color: #4b3f72;

    font-size: 17px;
}

.lencana-card p {
    min-height: 45px;

    margin: 0 0 12px;

    color: #666;

    font-size: 13px;

    line-height: 1.5;
}

.status-lencana {
    display: inline-block;

    padding: 6px 9px;

    background: #f1f1f1;

    border-radius: 15px;

    color: #777;

    font-size: 11px;
}


/* PERJALANAN MISI */

.misi-perjalanan {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.misi-item {
    display: flex;

    align-items: center;

    gap: 18px;

    padding: 16px 20px;

    background: #ffffff;

    border-radius: 18px;

    box-shadow:
        0 5px 13px rgba(0, 0, 0, 0.07);
}

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

    display: flex;

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

    background: #fff3c4;

    border-radius: 15px;

    font-size: 30px;
}

.misi-info {
    flex: 1;
}

.misi-info h4 {
    margin: 0 0 4px;

    color: #4b3f72;

    font-size: 18px;
}

.misi-info p {
    margin: 0;

    color: #777;

    font-size: 14px;
}

.misi-status {
    font-size: 25px;
}


/* PESAN */

.pesan-pencapaian {
    display: flex;

    align-items: center;

    gap: 20px;

    padding: 25px 30px;

    margin-top: 10px;

    background: linear-gradient(
        135deg,
        #e8f8e8,
        #fff8d9
    );

    border-radius: 23px;

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.07);
}

.pesan-icon {
    font-size: 55px;
}

.pesan-pencapaian h3 {
    margin: 0 0 7px;

    color: #4b3f72;

    font-size: 22px;
}

.pesan-pencapaian p {
    margin: 0;

    color: #555;

    line-height: 1.6;
}


/* TOMBOL PENCAPAIAN */

.pencapaian-button {
    text-align: center;

    margin-top: 35px;
}

.btn-kembali {
    display: inline-block;

    padding: 13px 25px;

    background: #6842e8;

    color: #ffffff;

    border-radius: 25px;

    font-weight: bold;

    transition: 0.25s ease;
}

.btn-kembali:hover {
    background: #5733d2;

    transform: translateY(-2px);
}


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

.footer,
.main-footer {
    padding: 30px 20px;

    text-align: center;

    background: #30216d;

    color: #ffffff;
}

.footer-logo {
    font-size: 20px;

    margin-bottom: 5px;
}

.footer > p,
.main-footer p {
    font-size: 13px;

    color: #d9d4ed;

    margin-bottom: 5px;
}

.footer .copyright {
    margin-top: 15px;

    font-size: 11px;

    color: #aaa2c9;
}


/* =====================================================
   RESPONSIVE TABLET
===================================================== */

@media (max-width: 1100px) {

    .header {
        flex-direction: column;

        gap: 15px;
    }

    .navbar {
        flex-wrap: wrap;

        justify-content: center;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .hero-illustration {
        min-height: 320px;

        order: 2;
    }

    .hero-content {
        padding: 40px;

        text-align: center;

        align-items: center;
    }

    .hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .challenge-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .material-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .example-flow {
        flex-wrap: wrap;
    }

    .example-card {
        flex: 0 0 calc(50% - 10px);
    }

    .arrow {
        display: none;
    }

    .challenge-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .lencana-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


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

@media (max-width: 700px) {

    .header,
    .main-header {
        padding: 12px 15px;
    }

    .logo img {
        width: 230px;
    }

    .navbar a {
        padding: 7px 9px;

        font-size: 12px;
    }

    .hero {
        width: 100%;

        margin-top: 0;

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

    .hero-illustration {
        min-height: 240px;
    }

    .hero-illustration img {
        width: 90%;
    }

    .hero-content {
        padding: 30px 20px;
    }

    .hero-content h2 {
        font-size: 31px;
    }

    .hero-content > p {
        font-size: 14px;
    }

    .challenge-section,
    .example-section,
    .material-section {
        width: 94%;
    }

    .challenge-grid {
        grid-template-columns: 1fr 1fr;
    }

    .challenge-card {
        min-height: 250px;
    }

    .challenge-list {
        grid-template-columns: 1fr;
    }

    .example-card {
        flex: 0 0 100%;
    }

    .material-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cta {
        width: 94%;

        flex-direction: column;

        text-align: center;

        padding: 25px 20px;
    }

    .btn-cta {
        margin-left: 0;
    }

    .play-home-section {
        width: 94%;
    }

    .play-home-card {
        flex-direction: column;

        text-align: center;

        padding: 35px 25px;
    }

    .play-home-icon {
        font-size: 60px;
    }

    .play-home-content h2 {
        font-size: 26px;
    }

    .play-page {
        width: 94%;
    }

    .play-card {
        padding: 35px 20px;
    }

    .play-card h1 {
        font-size: 30px;
    }

    .challenge-option {
        padding: 25px 20px;
    }


    /* PETUNJUK */

    .petunjuk-page {
        padding: 25px 15px 45px;
    }

    .petunjuk-title h2 {
        font-size: 27px;
    }

    .petunjuk-title p {
        font-size: 15px;
    }

    .petunjuk-card {
        align-items: flex-start;

        gap: 14px;

        padding: 16px;
    }

    .petunjuk-number {
        width: 45px;
        height: 45px;

        font-size: 20px;
    }

    .petunjuk-content h3 {
        font-size: 18px;
    }

    .petunjuk-content p {
        font-size: 14px;
    }


    /* PENCAPAIAN */

    .pencapaian-page {
        width: 94%;

        padding: 30px 0 45px;
    }

    .pencapaian-hero {
        flex-direction: column;

        text-align: center;

        padding: 25px 20px;
    }

    .pencapaian-hero h2 {
        font-size: 27px;
    }

    .pencapaian-hero p {
        font-size: 15px;
    }

    .pencapaian-ringkasan {
        grid-template-columns: 1fr;
    }

    .lencana-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pesan-pencapaian {
        flex-direction: column;

        text-align: center;
    }
}


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

@media (max-width: 450px) {

    .lencana-grid {
        grid-template-columns: 1fr;
    }

    .pencapaian-hero-icon {
        font-size: 55px;
    }

    .misi-item {
        padding: 14px;
    }
    }
/* =========================================
   ILUSTRASI HERO TANTANGAN
========================================= */

.hero-illustration {
    position: relative;
    min-height: 600px;

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

    overflow: visible;
}

/* Lingkaran latar ilustrasi */



/* Karakter */

.children {
    position: relative;

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

    gap: 15px;

    z-index: 2;
}

.child {
    font-size: 180px;
    line-height: 1;
}


/* Simbol */

.math-symbol {
    position: absolute;

    line-height: 1;

    z-index: 3;
}

.symbol-one {
    top: 23%;
    left: 25%;

    font-size: 70px;
}

.symbol-two {
    top: 32%;
    right: 20%;

    font-size: 65px;
}

.symbol-three {
    bottom: 23%;
    left: 27%;

    font-size: 65px;
}

.symbol-four {
    bottom: 20%;
    right: 28%;

    font-size: 60px;
}


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

@media (max-width: 700px) {

    .hero-illustration {
        min-height: 350px;
    }

   
    }

    .child {
        font-size: 110px;
    }

    .symbol-one {
        font-size: 50px;
    }

    .symbol-two {
        font-size: 45px;
    }

    .symbol-three {
        font-size: 45px;
    }

    .symbol-four {
        font-size: 40px;
    }

}