/* ==================================
   GEMA AI - LANDING PAGE STYLE
   ================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

body{
    background:#eef5ff;
    color:#071b45;
}

html{
    scroll-behavior:smooth;
}
.container{
    max-width:1320px;
}

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

.navbar-gema{
    background:#ffffff;
    margin:16px 30px;
    border-radius:22px;
    min-height:68px;
    box-shadow:
    0 15px 40px rgba(0,0,0,0.08);
}

.logo{
    width:190px;
}

.nav-link{
    margin:0 22px;
    color:#06183f;
    font-size:15px;
    font-weight:600;
}

.nav-link.active{
    color:#0066ff;
    border-bottom:
    4px solid #0066ff;
}

.btn-login{
    background:
    linear-gradient(
    135deg,
    #0066ff,
    #0052ff
    );
    color:white;
    padding:
    14px 30px;
    border-radius:14px;
    font-weight:600;
}

.btn-login:hover{
    color:white;
}

/* ================= NAVBAR ALIGN FIX ================= */

.navbar-gema .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.navbar-brand{
    display:flex;
    align-items:center;
    margin:0;
}

.navbar-nav{
    align-items:center;
}

.btn-login{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.navbar-toggler{
    border:1px solid #d9e3f3;
    border-radius:12px;
    padding:8px 10px;
}

.navbar-toggler:focus{
    box-shadow:none;
}

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

.hero{
    margin:0 30px 20px;
    padding:30px 0 45px;
    background:
    linear-gradient(
    120deg,
    #ffffff,
    #eaf3ff
    );
    border-radius:22px;
}

.hero .row{
    align-items:center;
} 

.hero .col-md-6:first-child{
    margin-top:-20px;
}

.hero h1{
    margin-top:0px;
    font-size:52px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-1px;
}

.hero h1 span{
    color:#0066ff;
}

.hero p{
    margin-top:25px;
    max-width:600px;
    color:#4f6080;
    line-height:1.8;
    font-size:16px;
}

.btn-start{
    margin-top:25px;
    background:#0066ff;
    color:white;
    padding:14px 30px;
    border-radius:15px;
    font-weight:600;
    box-shadow:
    0 15px 30px rgba(0,102,255,.25);
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.btn-start:hover,
.btn-start:focus,
.btn-start:active{
    background:#0066ff;
    color:#ffffff;
    text-decoration:none;
    box-shadow:0 15px 30px rgba(0,102,255,.25);
}

.hero-img{
    width:82%;
    max-width:480px;
}

/* ================= FITUR ================= */

.features{
    margin-top:45px;
    display:grid;
    grid-template-columns:
    repeat(4,1fr);
    gap:30px;
}

.feature-item{
    background:white;
    min-height:170px;
    padding:28px;
    border-radius:22px;
    box-shadow:
    0 15px 40px rgba(0,0,0,.07);
}

.feature-item i{
    font-size:35px;
    color:#0066ff;
}

.feature-item h6{
    margin-top:20px;
    font-weight:700;
}

.feature-item p{
    margin-top:15px;
    color:#687899;
    font-size:13px;
}

/* ================= CARA KERJA ================= */

.steps{
    margin-top:50px;
    background:#dcecff;
    padding:35px;
    border-radius:25px;
}

.steps h4{
    font-weight:800;
}

.step-box{
    margin-top:20px;
    display:grid;
    grid-template-columns:
    repeat(3,1fr);
    text-align:center;
}

.step-box b{
    width:60px;
    height:60px;
    background:#0066ff;
    color:white;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-size:22px;
}

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

footer{
    background:#031126;
    color:white;
    padding:32px;
    text-align:center;
}

footer h6{
    font-weight:700;
}

footer p{
    font-size:13px;
}



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

@media (min-width:769px) and (max-width:1199px){

    .navbar-gema{
        margin:16px;
    }

    .logo{
        width:150px;
    }

    .nav-link{
        margin:0 12px;
        font-size:14px;
    }

    .btn-login{
        padding:10px 20px;
        font-size:14px;
    }

    /* hamburger MATI di tablet */

    .navbar-toggler{
        display:none;
    }

    .navbar-collapse{
        display:flex !important;
        justify-content:space-between;
        align-items:center;
    }

    .hero{
        margin:16px;
        padding:40px;
    }

    .hero h1{
        font-size:42px;
    }

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

    .hero-img{
        width:100%;
        max-width:360px;
    }

    .features{
        grid-template-columns:repeat(4,1fr);
        gap:18px;
    }

    .feature-item{
        padding:22px;
        min-height:170px;
    }
}

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

@media (max-width:768px){

    .navbar-gema{
        margin:12px;
        padding:10px 15px;
        border-radius:18px;
    }

    .logo{
        width:140px;
    }

    .navbar-collapse{
        margin-top:15px;
        text-align:center;
    }

    .navbar-nav{
        gap:10px;
    }

    .btn-login{
        width:100%;
        margin-top:18px;
        justify-content:center;
    }

    .hero{
        margin:12px;
        padding:25px;
    }

    .hero .row{
        flex-direction:column-reverse;
        text-align:center;
    }

    .hero h1{
        font-size:42px;
        margin-top:25px;
    }

    .hero p{
        max-width:100%;
        margin:auto;
        margin-top:18px;
        font-size:15px;
    }

    .hero-img{
        width:100%;
        max-width:280px;
    }

    .btn-start{
        width:100%;
        justify-content:center;
    }

    /* FITUR */

    .features{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .feature-item{
        min-height:auto;
        padding:20px;
    }

    /* CARA KERJA */

    .step-box{
        grid-template-columns:1fr;
        gap:30px;
    }

    footer{
        padding:22px;
    }

}