/*--------------*/
/* NILAI CUSTOM */
/*--------------*/
:root {
    /*  BRANDS COLORS - SESUAIKAN DENGAN WARNA LOGO CUSTOMER  */    
        --color-brand-1   :   hsl(203, 83%, 50%); /*  #1798e9 Biru */
        --color-brand-2   :   hsl(203, 93%, 53%); /*  #18a1f7 Biru LOGO UTAMA */
        --color-brand-3   :   hsl(205, 92%, 69%); /*  #69bcf9 Biru */
        --color-brand-4   :   hsl(220, 13%, 27%); /*  #3d434f Abu-Abu */
        --color-brand-5   :   hsl(228, 7%, 43%);  /*  #676a76 Abu-Abu */
        --color-brand-6   :   hsl(220, 16%, 53%); /*  #74819b Abu-Abu */
        --color-brand-7   :   hsl(0, 0%, 92%);    /*  #ebebeb Abu-Abu */


    /*  SYSTEM COLORS */
        --color-red         :   hsl(3, 100%, 69%);
        --color-yellow      :   hsl(59, 87%, 51%);
        --color-green       :   hsl(120, 73%, 75%);
        --color-white       :   hsl(0, 0%, 100%);
        --color-grey75      :   hsl(0, 0%, 75%);
        --color-grey50      :   hsl(0, 0%, 50%);
        --color-grey25      :   hsl(0, 0%, 25%);
        --color-black       :   hsl(0, 0%, 0%);

    /*  FONT SIZE SCALE */
        --font-size-100     : 0.8706rem;    /*  small - 14px (phone & tablet)   */
        --font-size-200     : 1rem;         /*  paragraph - 16px (phone & tablet)   */
        --font-size-300     : 1.1487rem;    /*  h5  - 18px (tablet & large screen)  */
        --font-size-400     : 1.3195rem;    /*  h4  - 21px (tablet & large screen)  */
        --font-size-500     : 1.5157rem;    /*  h3  - 24px  */
        --font-size-600     : 1.7411rem;    /*  h2  - 28px  */
        --font-size-700     : 2rem;         /*  h1  - 32px  */
        --font-size-800     : 2.488rem;     /*        39.81px   */
        --font-size-900     : 2.986rem;     /*        47.78px   */
        --font-size-1000    : 3.815rem;     /*        61.04px   */

    /* FONT BOLDNESS */
        --font-weight-regular   :   400;
        --font-weight-semi-bold :   500;
        --font-weight-bold      :   700;

    /* UKURAN */
        --size-100  : 0.25rem;  /*  4 px */
        --size-200  : 0.5rem;   /*  8 px */
        --size-300  : 0.75rem;  /* 12 px */
        --size-400  : 1rem;     /* 16 px */
        --size-500  : 1.5rem;   /* 24 px */
        --size-600  : 2rem;     /* 32 px */
        --size-700  : 3rem;     /* 48 px */
        --size-800  : 4rem;     /* 64 px */
        --size-900  : 5rem;     /* 80 px */
        --size-1000 : 6rem;     /* 96 px */

    /* SUDUT LENGKUNG */
        --capsul        : 100vmax;
        --radius-100    : 1rem;      /*  16px */
        --radius-75     : 0.75rem;   /*  8px  */
        --radius-50     : 0.50rem;   /*  5px  */
        --radius-25     : 0.25rem;   /*  3px  */
}

/*-------------*/
/* ATURAN AWAL */
/*-------------*/
*, *::before, *::after{box-sizing : border-box;}

*{font : inherit; margin : 0; padding : 0;}

html:focus-within{scroll-behavior : smooth;}
html{
    scroll-behavior: smooth;
    /* scroll-padding: 5.326rem; */
}
html, body{
    height : 100vh;
    scroll-behavior: smooth;
}

body,h1,h2,h3,h4,h5,h6,p,figure,picture{margin:0;}

body{
    line-height     : 1.6;
    min-height      : 100svh;  /* atau min-height: 100vh juga bisa - baru ditambah*/
    text-rendering  : optimizeSpeed;
    font-family     : system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color           : var(--color-grey25);
    font-size       : var(--font-size-200);
}

a{
    text-decoration : none;
    transition      : all 300ms ease-in;
}

ul[role="list"], ol[role="list"], li[role="list"]{list-style : none;}

li{list-style: none;}

img, video, iframe, picture, svg{
    display             : block;
    max-width           : 100%;
    /* block-size       : auto; */ /* max-inline-size  : 100%; */
}

input,button,textarea,select{font: inherit;}

/* scrollbar width */
::-webkit-scrollbar {
    width: 18px;
}

/* scrollbar track */
::-webkit-scrollbar-track {
    background: var(--color-grey75) 
}

/* scrollbar handle */
::-webkit-scrollbar-thumb {
    background: var(--color-grey25)
}

/* scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand-1); 
}
/* UNTUK PENGGUNA YANG MEMATIKAN ANIMASI */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration          : 0.01ms !important;
        animation-iteration-count   : 1 !important;
        transition-duration         : 0.01ms !important;
        scroll-behavior             : auto !important;
    }
}

/*---------------------------*/
/*          LAYOUT           */
/*---------------------------*/
body{
    display                 : grid;
    grid-template-areas     :   "header"
                                "main"
                                "footer";
    grid-template-columns   : 1fr;
    grid-template-rows      : max-content auto max-content;
    overflow-x              : hidden;
}
header{
    display                 : grid;
    grid-area               : header;
}
main{
    display                 : grid;
    grid-area               : main;
    /*margin-block-start: 95px;  UNTUK ADJUST TINGGI HEADER - NAVIGASI */
}
footer{
    display                 : grid;
    grid-area               : footer;
    grid-column             : 1/-1;   /*AGAR POSISI FOOTER TETAP DIBAWAH */
}

/*--------------------------*/
/* KELAS TERAPAN LANGSUNG   */
/*--------------------------*/
.flex{
    display : flex;
    gap     : var(--gap, 1rem);
}
.grid{
    display : grid;
    gap     : var(--gap, 1rem);
}
.container-1500{
    --max-width         : 1500px;
    --container-padding : 2rem;
    margin-inline       : auto;
    width               : min(var(--max-width), 100% - (var(--container-padding)*2));
    align-content       : start;
}
.container-1200{
    --max-width         : 1200px;
    --container-padding : 2rem;
    margin-inline       : auto;
    width               : min(var(--max-width), 100% - (var(--container-padding)*2));
    align-content       : start;
}
.container-800{
    --max-width         : 800px;
    --container-padding : 2rem;
    margin-inline       : auto;
    width               : min(var(--max-width), 100% - (var(--container-padding)*2));
    align-content       : start;
}
/* HANYA UNTUK SCREEN READER */
.sr-only{
    position    : absolute;
    width       : 1px;
    height      : 1px;
    padding     : 0;
    margin      : -1px;
    overflow    : hidden;
    clip        : rect(0,0,0,0);
    border      : 0;
}
/*  WARNA LATAR BELAKANG    */
.bgc-brand-1{background-color:var(--color-brand-1);}
.bgc-black{background-color:var(--color-black);}
.bgc-grey50{background-color:var(--color-grey50);}
.bgc-white{background-color:var(--color-white);}

/* WARNA HURUF */
.fc-brand-1{color: var(--color-brand-1);}
.fc-black{color: var(--color-black);}
.fc-grey50{color: var(--color-grey50);}
.fc-white{color: var(--color-white);}

/*  JENIS HURUF */
.bold{font-weight: var(--font-weight-bold);}
.semi-bold{font-weight: var(--font-weight-semi-bold);}
.regular{font-weight: var(--font-weight-regular);}
.italic {font-style: italic;}
.uppercase{text-transform: uppercase;}

/*  UKURAN HURUF    */
.fs-100 { font-size: var(--font-size-100);}
.fs-200 { font-size: var(--font-size-200);}
.fs-300 { font-size: var(--font-size-300);}
.fs-400 { font-size: var(--font-size-400);}
.fs-500 { font-size: var(--font-size-500);}
.fs-600 { font-size: var(--font-size-600);}
.fs-700 { font-size: var(--font-size-700);}
.fs-800 { font-size: var(--font-size-800);}
.fs-900 { font-size: var(--font-size-900);}
.fs-1000 { font-size: var(--font-size-1000);}
.fs-600,.fs-700,.fs-800,.fs-900,.fs-1000{line-height: 1.1;}

/*  JARAK   */
.padding-100{ padding-block       : var(--size-100);}
.padding-200{ padding-block       : var(--size-200);}
.padding-300{ padding-block       : var(--size-300);}
.padding-400{ padding-block       : var(--size-400);}
.padding-500{ padding-block       : var(--size-500);}
.padding-600{ padding-block       : var(--size-600);}
.padding-700{ padding-block       : var(--size-700);}
.padding-800{ padding-block       : var(--size-800);}
.padding-900{ padding-block       : var(--size-900);}
.padding-1000{ padding-block       : var(--size-1000);}

/*  SUDUT LENGKUNG  */
.capsul     { border-radius: var(--capsul);}
.radius-100 { border-radius: var(--radius-100);}
.radius-75  { border-radius: var(--radius-75);}
.radius-50  { border-radius: var(--radius-50);}
.radius-25  { border-radius: var(--radius-25);}

.shadow{box-shadow          : 0 1.125em 1em -1em var(--color-red);}