/* =========================================
   MOLEKTOTO - PREMIUM BLUE
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: Georgia, "Times New Roman", serif;
    color: #fff;
    background:
        radial-gradient(
            circle at 50% 0%,
            #12385d 0%,
            #061525 30%,
            #02070d 70%
        );

    overflow-x: hidden;
}


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

body::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(35, 130, 200, .07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(35, 130, 200, .07) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


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

.page {
    min-height: 100vh;

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

    padding: 18px 10px 105px;
}


/* =========================================
   CONTAINER
========================================= */

.container {
    position: relative;
    isolation: isolate;

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

    padding: 18px 15px 30px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #071a2b,
            #03101c 55%,
            #02070d
        );

    border: 1px solid rgba(40, 155, 235, .45);

    box-shadow:
        0 20px 50px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.06);
}


/* =========================================
   CAHAYA BERGERAK DI TEPI
========================================= */

.container::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 180%;
    height: 180%;

    top: -40%;
    left: -40%;

    background:
        conic-gradient(
            transparent 0deg,
            transparent 70deg,
            rgba(0, 130, 255, .15) 80deg,
            #38c7ff 92deg,
            #ffffff 98deg,
            #087cff 105deg,
            transparent 120deg,
            transparent 360deg
        );

    animation: borderSpin 6s linear infinite;
}

.container::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 2px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #071a2b,
            #03101c 55%,
            #02070d
        );
}

@keyframes borderSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

.logo {
    position: relative;
    z-index: 3;

    width: 100%;
    height: 58px;

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

    margin: 0 auto 4px;

    overflow: visible;
}

.logo img {
    display: block;

    /*
       TINGGI LOGO
       ubah angka ini kalau perlu
    */
    height: 43px;

    /*
       Lebar otomatis mengikuti
       ukuran asli gambar
    */
    width: auto;

    max-width: 190px;

    object-fit: contain;

    margin: 0 auto;

    filter:
        drop-shadow(
            0 4px 9px
            rgba(0, 120, 255, .25)
        );

    transition: transform .25s ease;
}

.logo img:hover {
    transform: scale(1.03);
}


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

.subtitle {
    position: relative;
    z-index: 2;

    text-align: center;

    margin-bottom: 17px;

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

    letter-spacing: 2.5px;

    color: #9bb7ca;

    text-shadow:
        0 2px 8px rgba(0,100,200,.25);
}

.subtitle span {
    color: #54c8ff;
}


/* =========================================
   BANNER
========================================= */

.banner {
    position: relative;
    z-index: 2;

    width: 100%;

    overflow: hidden;

    border-radius: 16px;

    border: 1px solid #1398e8;

    background: #02070c;

    box-shadow:
        0 12px 28px rgba(0,0,0,.65),
        0 0 15px rgba(0,120,220,.18);
}

.banner img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform .5s ease;
}

.banner:hover img {
    transform: scale(1.025);
}


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

.running-text {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 34px;

    margin-top: 13px;

    overflow: hidden;

    display: flex;
    align-items: center;

    border-radius: 9px;

    border: 1px solid rgba(50,155,225,.3);

    background:
        linear-gradient(
            90deg,
            #061827,
            #0b253d,
            #061827
        );
}

.running-track {
    display: flex;

    width: max-content;

    white-space: nowrap;

    animation:
        runningText 14s linear infinite;
}

.running-track span {
    flex-shrink: 0;

    margin-right: 65px;

    font-family: Arial, sans-serif;

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

    letter-spacing: 1.3px;

    color: #8fd6ff;
}

@keyframes runningText {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================================
   BUTTONS
========================================= */

.buttons {
    position: relative;
    z-index: 2;

    margin-top: 18px;
}

.btn {
    position: relative;

    display: flex;

    width: 100%;
    height: 49px;

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

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 26px;

    text-decoration: none;

    font-family: Georgia, serif;

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

    letter-spacing: 1.5px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #38d5e8,
            #087fd5 55%,
            #0751ae
        );

    border: 1px solid #2bd6ff;

    box-shadow:
        0 7px 20px rgba(0,0,0,.45),
        0 0 12px rgba(0,150,255,.3);

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

.btn::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 45%;
    height: 100%;

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

    transform: skewX(-20deg);

    animation:
        buttonShine 4s linear infinite;
}

@keyframes buttonShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 150%;
    }
}

.btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);
}

.btn:active {
    transform: scale(.98);
}


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

.description {
    position: relative;
    z-index: 2;

    margin-top: 7px;

    padding: 16px 13px;

    text-align: center;

    font-family: Arial, sans-serif;

    font-size: 9px;

    line-height: 18px;

    color: #91aec2;

    border-radius: 13px;

    border: 1px solid rgba(40,140,210,.28);

    background:
        rgba(8,35,58,.35);
}

.description h1 {
    margin-bottom: 7px;

    font-family: Georgia, serif;

    font-size: 17px;

    letter-spacing: 1.5px;

    color: #d9efff;
}

.description strong {
    color: #4fc6ff;
}


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

footer {
    position: relative;
    z-index: 2;

    margin-top: 23px;

    padding-top: 14px;

    text-align: center;

    border-top: 1px solid rgba(60,140,200,.18);

    font-family: Arial, sans-serif;

    font-size: 9px;

    color: #557083;
}


/* =========================================
   BOTTOM NAV
========================================= */

.bottom-nav {
    position: fixed;

    z-index: 9999;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

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

    height: 68px;

    display: grid;

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

    background:
        rgba(2,12,25,.97);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border-top:
        1px solid rgba(40,160,240,.35);

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

.bottom-item {
    position: relative;

    display: flex;

    flex-direction: column;

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

    padding-bottom: 7px;

    border: 0;
    border-right:
        1px solid rgba(40,110,160,.2);

    background: transparent;

    color: #fff;

    text-decoration: none;

    transition: background .2s ease;
}

.bottom-item:last-child {
    border-right: none;
}

.bottom-item:hover {
    background:
        rgba(0,120,220,.08);
}

.bottom-item.active {
    background:
        rgba(0,120,220,.1);
}

.nav-icon {
    position: absolute;

    top: -22px;

    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 12px;

    border: 1px solid #39caff;

    background:
        linear-gradient(
            145deg,
            #fff,
            #d6f5ff
        );

    font-size: 24px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.5),
        0 0 9px rgba(0,180,255,.4);
}

.bottom-item small {
    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .5px;
}


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

@media (max-width: 500px) {

    .page {
        padding:
            14px 8px 100px;
    }

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

    /*
       LOGO MOBILE
       Tetap proporsional
    */
    .logo {
        height: 52px;
    }

    .logo img {
        height: 38px;
        max-width: 170px;
    }

    .banner {
        border-radius: 15px;
    }

    .btn {
        height: 49px;
    }
}