/* ======================================================
   Mini Marine Platform
   Version : 0.2.1
   Module  : Main Style (Mobile First)
   ====================================================== */


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

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:75px;
}

body{
    min-height:100vh;

    font-family:'Poppins',sans-serif;

    color:#ffffff;

    background:
        radial-gradient(
            circle at top,
            #0b5fa5 0%,
            #003B73 35%,
            #001F3F 70%,
            #000814 100%
        );

    overflow-x:hidden;
}


/* ==========================
   NAVBAR
========================== */

.navbar{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    min-height:64px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

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

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

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

    z-index:999;
}


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

.logo{
    font-size:20px;

    font-weight:700;

    color:#00D4FF;

    text-decoration:none;

    line-height:1;
}


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

.menu{
    display:none;

    list-style:none;

    flex-direction:column;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:
        rgba(1,41,77,.98);

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

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


.menu.active{
    display:flex;
}


.menu li{
    width:100%;

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


.menu li:last-child{
    border-bottom:none;
}


.menu a{
    display:block;

    width:100%;

    padding:16px 20px;

    color:#ffffff;

    text-decoration:none;

    font-weight:500;

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


.menu a:hover{
    background:#003B73;

    color:#00D4FF;
}


/* ==========================
   MENU TOGGLE
========================== */

.menu-toggle{
    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    line-height:1;

    cursor:pointer;

    color:#ffffff;

    user-select:none;

    -webkit-user-select:none;
}


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

.hero{
    position:relative;

    min-height:100vh;

    /* Dynamic viewport untuk mobile */
    min-height:100dvh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:
        100px 20px
        80px;

    overflow:hidden;

    isolation:isolate;
}


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

.hero h1{
    position:relative;

    max-width:900px;

    font-size:
        clamp(
            36px,
            10vw,
            72px
        );

    font-weight:800;

    line-height:1.1;

    letter-spacing:2px;

    text-transform:uppercase;

    z-index:2;
}


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

.hero p{
    position:relative;

    max-width:700px;

    margin-top:20px;

    font-size:
        clamp(
            16px,
            4vw,
            20px
        );

    line-height:1.8;

    color:#dcefff;

    z-index:2;
}


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

.button{
    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:100%;

    max-width:320px;

    margin-top:35px;

    padding:18px 25px;

    border:none;

    border-radius:16px;

    text-align:center;

    text-decoration:none;

    font-weight:700;

    color:#001F3F;

    background:#00D4FF;

    cursor:pointer;

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

    box-shadow:
        0 0 30px
        rgba(0,212,255,.4);

    z-index:2;
}


.button:hover{
    background:#ffffff;

    color:#001F3F;

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 35px
        rgba(0,212,255,.55);
}


.button:active{
    transform:
        translateY(-1px);
}


.button:focus-visible{
    outline:
        3px solid
        rgba(255,255,255,.9);

    outline-offset:4px;
}


/* ==========================
   SCROLL INDICATOR
========================== */

.scroll{
    position:absolute;

    left:50%;

    bottom:30px;

    transform:
        translateX(-50%);

    font-size:30px;

    color:#9be9ff;

    animation:
        updown 2s
        ease-in-out infinite;

    z-index:2;
}


@keyframes updown{

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

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

}


/* ==========================
   SONAR WAVES
========================== */

.waves{
    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;
}


/* Sonar Pulse */

.waves span{
    position:absolute;

    width:250px;

    height:250px;

    left:50%;

    top:50%;

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

    border-radius:50%;

    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.25);

    animation:
        wave 8s
        linear infinite;
}


/* Gelombang pertama */

.waves span:nth-child(1){
    animation-delay:0s;
}


/* Gelombang kedua */

.waves span:nth-child(2){
    animation-delay:-2.67s;
}


/* Gelombang ketiga */

.waves span:nth-child(3){
    animation-delay:-5.33s;
}


/* Sonar Animation */

@keyframes wave{

    0%{
        opacity:.75;

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

    70%{
        opacity:.2;
    }

    100%{
        opacity:0;

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

}


/* ==========================
   ABOUT
========================== */

.about{
    position:relative;

    padding:
        80px 25px;

    background:#ffffff;

    color:#222222;

    text-align:center;
}


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

.about h2{
    margin-bottom:20px;

    font-size:
        clamp(
            28px,
            7vw,
            40px
        );

    line-height:1.2;

    color:#003B73;
}


/* ==========================
   ABOUT TEXT
========================== */

.about p{
    max-width:700px;

    margin:
        0 auto;

    font-size:16px;

    line-height:1.8;

    color:#555555;
}


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

@media (min-width:768px){

    /* Navbar */

    .navbar{
        padding:
            16px 5%;
    }


    /* Logo */

    .logo{
        font-size:22px;
    }


    /* Desktop Navigation */

    .menu{
        position:static;

        display:flex;

        flex-direction:row;

        align-items:center;

        width:auto;

        gap:28px;

        background:transparent;

        -webkit-backdrop-filter:none;
        backdrop-filter:none;

        box-shadow:none;
    }


    .menu li{
        width:auto;

        border:none;
    }


    .menu a{
        position:relative;

        width:auto;

        padding:
            8px 0;

        background:transparent;
    }


    .menu a:hover{
        background:transparent;

        color:#00D4FF;
    }


    /* Underline navigation */

    .menu a::after{
        content:"";

        position:absolute;

        left:0;

        bottom:0;

        width:0;

        height:2px;

        background:#00D4FF;

        transition:
            width .3s ease;
    }


    .menu a:hover::after{
        width:100%;
    }


    /* Hide hamburger */

    .menu-toggle{
        display:none;
    }


    /* Hero */

    .hero{
        padding:
            120px 40px
            90px;
    }


    .hero h1{
        letter-spacing:3px;
    }


    .button{
        width:auto;

        min-width:220px;

        padding:
            17px 30px;
    }


    /* About */

    .about{
        padding:
            100px 40px;
    }


    .about p{
        font-size:17px;
    }

}


/* ==========================
   DESKTOP
========================== */

@media (min-width:1024px){

    .navbar{
        padding:
            18px 7%;
    }


    .logo{
        font-size:24px;
    }


    .menu{
        gap:35px;
    }


    .hero{
        padding-left:7%;

        padding-right:7%;
    }


    .hero h1{
        max-width:1000px;
    }


    .hero p{
        max-width:760px;
    }


    .about{
        padding:
            120px 7%;
    }


    .about p{
        max-width:800px;
    }

}


/* ==========================
   LARGE DESKTOP
========================== */

@media (min-width:1440px){

    .navbar{
        padding-left:10%;

        padding-right:10%;
    }


    .hero{
        padding-left:10%;

        padding-right:10%;
    }


    .about{
        padding-left:10%;

        padding-right:10%;
    }

}


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

@media (max-width:380px){

    .navbar{
        padding:
            14px 16px;
    }


    .logo{
        font-size:18px;
    }


    .menu-toggle{
        font-size:29px;
    }


    .hero{
        padding-left:16px;

        padding-right:16px;
    }


    .hero h1{
        font-size:34px;

        letter-spacing:1px;
    }


    .hero p{
        font-size:15px;

        line-height:1.7;
    }


    .button{
        max-width:290px;

        padding:16px;
    }


    .about{
        padding:
            70px 20px;
    }

}


/* ==========================
   ACCESSIBILITY
   REDUCED MOTION
========================== */

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

    html{
        scroll-behavior:auto;
    }


    .waves span{
        animation:none;
    }


    .scroll{
        animation:none;

        transform:
            translateX(-50%);
    }


    .button,
    .menu a,
    .menu a::after{
        transition:none;
    }

}