/* =========================================================
   APRI LANDING GLOBAL
   ========================================================= */


/* =========================================================
   VARIABLE
   ========================================================= */

:root {

    --apri-primary: #075ca8;
    --apri-primary-dark: #03477f;
    --apri-primary-light: #eaf4fc;

    --apri-text: #1f2937;
    --apri-text-muted: #6b7280;

    --apri-border: #e5e7eb;

    --apri-white: #ffffff;
    --apri-background: #f7f9fc;

    --apri-container: 1400px;

    --apri-radius: 10px;

    --apri-shadow:
        0 4px 18px rgba(15,23,42,.06);

}



/* =========================================================
   GLOBAL RESET
   HANYA UNTUK LANDING PAGE
   ========================================================= */


/*
   Jangan gunakan:
   *
   karena bisa mempengaruhi plugin,
   header, dan komponen lain
*/


.landing-page,
.landing-page * {

    box-sizing:border-box;

}



.landing-page {

    width:100%;

    min-height:100vh;

    overflow-x:hidden;

}



/* =========================================================
   HTML & BODY DASAR
   ========================================================= */


html {

    scroll-behavior:smooth;

}



body {

    margin:0;

    padding:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:var(--apri-text);

    background:var(--apri-white);

    line-height:1.5;

}



/* =========================================================
   ELEMENT DASAR LANDING
   ========================================================= */


.landing-page button,
.landing-page input,
.landing-page textarea,
.landing-page select {

    font-family:inherit;

}



.landing-page a {

    color:inherit;

    text-decoration:none;

}



.landing-page img {

    max-width:100%;

    height:auto;

    display:block;

}



/* =========================================================
   CONTAINER GLOBAL APRI
   ========================================================= */


/*
   Jangan gunakan:
   .container

   karena bentrok dengan:
   Bootstrap,
   header,
   plugin lain
*/


.apri-container {


    width:min(
        calc(100% - 40px),
        var(--apri-container)
    );


    margin-left:auto;

    margin-right:auto;


}



/* =========================================================
   KONTEN SETELAH HEADER FIXED
   ========================================================= */


/*
   Header APRI menggunakan fixed.
   Jarak atas ditangani di sini,
   bukan di landing-page.
*/


.apri-content-space {

    padding-top:74px;

}




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


@media(max-width:850px){


    .apri-content-space {

        padding-top:66px;

    }


    .apri-container {

        width:calc(100% - 30px);

    }


}

/* =========================================================
   HTML BODY SUPPORT STICKY
========================================================= */

html {

    scroll-behavior:smooth;

    overflow:visible !important;

}


body {

    margin:0;

    padding:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:var(--apri-text);

    background:var(--apri-white);

    line-height:1.5;

    overflow:visible !important;

}