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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

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

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    font-size: 14px;

    color: #172033;

    background:
        radial-gradient(
            circle at top left,
            #dbeafe 0%,
            transparent 35%
        ),
        radial-gradient(
            circle at top right,
            #f3e8ff 0%,
            transparent 35%
        ),
        #f8fafc;
}


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

.judul {
    width: min(1400px, calc(100% - 32px));

    margin: 20px auto 28px;

    padding: 25px 28px;

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

    border:
        1px solid rgba(15, 23, 42, 0.08);

    border-radius: 24px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);

    overflow: hidden;
}


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

.awal {
    font-size:
        clamp(30px, 5vw, 48px);

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -1.5px;

    color:
        #0f172a;

    text-shadow:
        2px 3px 8px rgba(0, 0, 0, 0.12);

    margin-bottom:
        16px;
}


/* =========================================================
   RUNNING TEXT
========================================================= */

.running-text {
    width: 100%;

    overflow: hidden;

    background:
        #f1f5f9;

    border-radius:
        14px;

    padding:
        10px 0;

    white-space:
        nowrap;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.running-text img {
    width:
        72px;

    height:
        auto;

    flex-shrink:
        0;

    margin-left:
        15px;
}

.running-text span {
    color:
        #475569;

    font-weight:
        600;

    white-space:
        nowrap;

    animation:
        runningText 30s linear infinite;
}

@keyframes runningText {

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

    100% {
        transform:
            translateX(-100%);
    }
}


/* =========================================================
   APPLICATION GRID
========================================================= */

.app-grid {

    width:
        min(1400px, calc(100% - 32px));

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap:
        26px;

    padding-bottom:
        40px;
}


/* =========================================================
   APPLICATION CARD
========================================================= */

.app-card {

    position:
        relative;

    /*
       CARD DIPERBESAR
       agar tidak terlihat terlalu memanjang
    */
    min-height:
        430px;

    padding:
        26px 22px;

    border-radius:
        24px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    overflow:
        hidden;

    border:
        1px solid rgba(255, 255, 255, 0.45);

    box-shadow:
        0 12px 25px rgba(15, 23, 42, 0.12);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.app-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 20px 35px rgba(15, 23, 42, 0.18);
}


/* =========================================================
   AUTO COLOR SYSTEM
========================================================= */

.app-card:nth-child(8n + 1) {

    background:
        linear-gradient(
            135deg,
            #cffafe,
            #22d3ee
        );

    color:
        #083344;
}


.app-card:nth-child(8n + 2) {

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #f59e0b
        );

    color:
        #451a03;
}


.app-card:nth-child(8n + 3) {

    background:
        linear-gradient(
            135deg,
            #ede9fe,
            #8b5cf6
        );

    color:
        #2e1065;
}


.app-card:nth-child(8n + 4) {

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #3b82f6
        );

    color:
        #172554;
}


.app-card:nth-child(8n + 5) {

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

    color:
        #052e16;
}


.app-card:nth-child(8n + 6) {

    background:
        linear-gradient(
            135deg,
            #ffe4e6,
            #f43f5e
        );

    color:
        #4c0519;
}


.app-card:nth-child(8n + 7) {

    background:
        linear-gradient(
            135deg,
            #fce7f3,
            #ec4899
        );

    color:
        #500724;
}


.app-card:nth-child(8n + 8) {

    background:
        linear-gradient(
            135deg,
            #e2e8f0,
            #64748b
        );

    color:
        #0f172a;
}


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

.app-card::before {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    border-radius:
        50%;

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

    top:
        -75px;

    right:
        -65px;
}


.app-card::after {

    content:
        "";

    position:
        absolute;

    width:
        110px;

    height:
        110px;

    border-radius:
        50%;

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

    bottom:
        -45px;

    left:
        -35px;
}


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

.app-card h1,
.app-card h2,
.app-card h3 {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 14px;

    font-size:
        clamp(21px, 2vw, 28px);

    font-weight:
        900;

    line-height:
        1.2;

    letter-spacing:
        -0.4px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.app-card p {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 10px;

    max-width:
        300px;

    line-height:
        1.55;

    font-weight:
        600;
}


/*
   Untuk description yang menggunakan <div>
*/
.app-card > div:not(.link1) {

    position:
        relative;

    z-index:
        2;

    max-width:
        300px;

    line-height:
        1.55;

    font-weight:
        600;
}


/* =========================================================
   LINK
========================================================= */

.link1 {

    position:
        relative;

    z-index:
        2;

    margin:
        6px 0 18px;

    font-size:
        13px;

    font-style:
        italic;

    font-weight:
        700;

    word-break:
        break-word;

    overflow-wrap:
        anywhere;

    opacity:
        0.8;
}


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

.btn1 {

    position:
        relative;

    z-index:
        3;

    border:
        none;

    border-radius:
        12px;

    background:
        rgba(245, 4, 4, 0.95);

    min-height:
        44px;

    width:
        min(190px, 100%);

    padding:
        10px 18px;

    color:
        #fcf9f9;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.btn1:hover {

    transform:
        translateY(-2px);

    background:
        #ffffff;

    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.18);
}


.btn1:active {

    transform:
        translateY(1px);

    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   QR CODE
========================================================= */

.app-card img {

    position:
        relative;

    z-index:
        2;

    width:
        150px;

    height:
        150px;

    max-width:
        70%;

    margin-top:
        auto;

    margin-bottom:
        4px;

    padding:
        8px;

    background:
        #ffffff;

    border-radius:
        14px;

    object-fit:
        contain;

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

    transition:
        transform 0.2s ease;
}


.app-card img:hover {

    transform:
        scale(1.04);
}


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

@media (max-width: 900px) {

    .judul {

        width:
            calc(100% - 24px);

        padding:
            20px;
    }

    .app-grid {

        width:
            calc(100% - 24px);

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(260px, 1fr)
            );

        gap:
            20px;
    }

    .app-card {

        min-height:
            420px;

        padding:
            24px 20px;
    }
}


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

@media (max-width: 600px) {

    body {

        font-size:
            13px;
    }


    .judul {

        width:
            calc(100% - 20px);

        margin:
            10px auto 20px;

        padding:
            18px 16px;

        border-radius:
            20px;
    }


    .awal {

        font-size:
            32px;

        letter-spacing:
            -1px;
    }


    .running-text {

        padding:
            8px 0;

        font-size:
            12px;
    }


    .running-text img {

        width:
            60px;
    }


    .app-grid {

        width:
            calc(100% - 20px);

        grid-template-columns:
            1fr;

        gap:
            18px;

        padding-bottom:
            24px;
    }


    .app-card {

        width:
            100%;

        min-height:
            410px;

        padding:
            24px 18px;

        border-radius:
            20px;
    }


    .app-card h1,
    .app-card h2,
    .app-card h3 {

        font-size:
            22px;
    }


    .btn1 {

        width:
            min(210px, 90%);
    }


    .app-card img {

        width:
            145px;

        height:
            145px;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 380px) {

    .awal {

        font-size:
            28px;
    }


    .judul {

        padding:
            16px 14px;
    }


    .app-grid {

        width:
            calc(100% - 16px);
    }


    .app-card {

        min-height:
            400px;

        padding:
            22px 14px;
    }


    .app-card img {

        width:
            130px;

        height:
            130px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.btn1:focus-visible {

    outline:
        3px solid rgba(59, 130, 246, 0.5);

    outline-offset:
        3px;
}


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

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;
    }

    .running-text span {

        animation:
            none;
    }

    .app-card,
    .btn1,
    .app-card img {

        transition:
            none;
    }
}
/* =========================================================
   BLUR CARD LAIN SAAT HOVER
========================================================= */

.app-grid:has(.app-card:hover) .app-card:not(:hover) {
    filter: blur(4px);
    opacity: 0.55;
    transform: scale(0.98);
}

.app-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease,
        opacity 0.25s ease;
}