/*------------------12.09.2025---21:37-----------------*/
/* NILAI CUSTOM */
/*--------------*/
:root {
        interpolate-size    :   allow-keywords;

    /*  BRANDS COLORS - SESUAIKAN DENGAN WARNA LOGO CUSTOMER  */    
        --color-brand-1 : #18a1f7; /*hsl(203, 93%, 53%); WARNA LOGO UTAMA SWANS IMAGE INDONESIA*/
        --color-brand-2 : #69bcf9; /*hsl(205, 92%, 69%); BIRU MUDA */
        --color-brand-3 : #1798e9; /*hsl(203, 83%, 50%); BIRU TUA */

        --color-grey-modern : #333333; /* hsl(0, 0%, 20%); ABU TUA  - GREY MODERN */
        --color-grey        : #676a76; /* hsl(228, 7%, 43%) ABU */
        /*--color-grey-light  : #ebebeb;  hsl(0, 0%, 92%) ABU MUDA */
        --color-grey-light  : #f5f5f7;    /*hsl(240, 11%, 96%) ABU MUDA */
  
    /*  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-50      : 0.438rem;     /*  small - 7px (phone & tablet)   */
        --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 */
        --size-1100 : 7rem;     /* 112 px */
        --size-1200 : 8rem;     /* 128 px */

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

    /*  BEZIER  */
        --bezier    :   cubic-bezier(0.38, 0.01, 0.5, 0.99);
}

/*--------------------------------------*/
/* 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{scroll-behavior: smooth;}

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

body{
    line-height     : 1.6;
    min-height      : 100svh;  /* untuk mendorong footer tetap dibawah layar jika isi web sedikit */
    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-grey-modern);
    font-size       : var(--font-size-200);
}

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

.link-primary{          color: var(--color-brand-1);}
.link-primary:hover{    color: var(--color-brand-2);}

.link-secondary{        color: var(--color-brand-2);}
.link-secondary:hover{  color: var(--color-brand-1);}

.link-grey-light{ color:var(--color-grey-light);}
.link-grey-light:hover{ color:var(--color-grey-modern);}

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;}
.button_height_0{height: 0;}

::-webkit-scrollbar {width: 15px;}/* scrollbar width */
::-webkit-scrollbar-track {background: var(--color-grey75);}/* scrollbar track */
::-webkit-scrollbar-thumb {background: var(--color-grey25);}/* scrollbar handle */
::-webkit-scrollbar-thumb:hover {background: var(--color-brand-1); }/* scrollbar handle on hover */

/* 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;
    }
}

/*--------------------------------------*/
/* KELAS TERAPAN LANGSUNG   */
/*--------------------------*/
.flex{display : flex; 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;

    /*border: 1px solid var(--color-red); untuk tes aja*/
}
.container-1200{
    --max-width         : 1200px;
    --container-padding : 2rem;
    margin-inline       : auto;
    width               : min(var(--max-width), 100% - (var(--container-padding)*2));
    align-content       : start;

    /*border: 1px solid var(--color-red); untuk tes aja*/
}
.container-800{
    --max-width         : 800px;
    --container-padding : 2rem;
    margin-inline       : auto;
    width               : min(var(--max-width), 100% - (var(--container-padding)*2));
    align-content       : start;

    /*border: 1px solid var(--color-red); untuk tes aja*/
}

@media( width > 1150px){
	.container-125-200{
		display                 : grid;
		gap                     : 2rem;
		grid-template-columns   : 1.25fr 2fr;
		justify-content			: center;
		padding-block			: var(--size-600);
	}
	.container-200-125{
		display                 : grid;
		gap                     : 2rem;
		grid-template-columns   : 2fr 1.25fr;
		justify-content			: center;
		padding-block			: var(--size-600);
	}
}

/* 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;
}
.border-top{border-top   : solid 0.3px var(--color-grey75);}
.border-bottom{border-bottom   : solid 0.3px var(--color-grey75);}

/*  WARNA LATAR BELAKANG    */
.bgc-brand-1{background-color : var(--color-brand-1);}
.bgc-brand-2{background-color : var(--color-brand-2);}
.bgc-brand-3{background-color : var(--color-brand-3);}
.bgc-aksen-1{background-color : var(--color-aksen-1);}      
.bgc-aksen-2{background-color : var(--color-aksen-2);}      
.bgc-aksen-3{background-color : var(--color-aksen-3);}      
.bgc-aksen-4{background-color : var(--color-aksen-4);}      
.bgc-white  {background-color : var(--color-white);}
.bgc-grey75 {background-color : var(--color-grey75);}
.bgc-grey50 {background-color : var(--color-grey50);}
.bgc-grey25 {background-color : var(--color-grey25);}
.bgc-black  {background-color : var(--color-black);}
.bgc-green  {background-color : var(--color-green);}
.bgc-red    {background-color : var(--color-red);}
.bgc-brand-gradient-3-1-2{
    background-image: linear-gradient(to bottom, #1798e9, #179aeb, #189bee, #189df0, #189ff3, #24a2f5, #2da5f6, #35a8f8, #44adf8, #52b2f9, #5eb7f9, #69bcf9);
}

/* WARNA HURUF */
.fc-brand-1 {color: var(--color-brand-1);}
.fc-brand-2 {color: var(--color-brand-2);}
.fc-brand-3 {color: var(--color-brand-3);}
.fc-grey-light{color:var(--color-grey-light)}
.fc-black   {color: var(--color-black);}
.fc-grey50  {color: var(--color-grey50);}
.fc-white   {color: var(--color-white);}
.fc-grey-modern         {color: var(--color-grey-modern);}
.fc-grey-blue-cool      {color: var(--color-grey-blue-cool);}
.fc-grey-yellow-warm    {color: var(--color-grey-yellow-warm);}

/*  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);} /*  paragraph - 16px (phone & tablet)   */
.fs-300 { font-size: var(--font-size-300);} /*  h5  - 18px (tablet & large screen)  */
.fs-400 { font-size: var(--font-size-400);} /*  h4  - 21px (tablet & large screen)  */
.fs-500 { font-size: var(--font-size-500);} /*  h3  - 24px  */
.fs-600 { font-size: var(--font-size-600);} /*  h2  - 28px  */
.fs-700 { font-size: var(--font-size-700);} /*  h1  - 32px  */
.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 DALAM ATAS BAWAH (2 SISI) -> PADDING BLOCK   */
.pad-block-100{ padding-block     : var(--size-100);}
.pad-block-200{ padding-block     : var(--size-200);}
.pad-block-300{ padding-block     : var(--size-300);}
.pad-block-400{ padding-block     : var(--size-400);}
.pad-block-500{ padding-block     : var(--size-500);}
.pad-block-600{ padding-block     : var(--size-600);}
.pad-block-700{ padding-block     : var(--size-700);}
.pad-block-800{ padding-block     : var(--size-800);}
.pad-block-900{ padding-block     : var(--size-900);}
.pad-block-1000{ padding-block    : var(--size-1000);}
.pad-block-1100{ padding-block    : var(--size-1100);}
.pad-block-1200{ padding-block    : var(--size-1200);}

/*  JARAK DALAM KANAN KIRI (2 SISI) -> PADDING INLINE   */
.pad-inline-100{ padding-inline     : var(--size-100);}
.pad-inline-200{ padding-inline     : var(--size-200);}
.pad-inline-300{ padding-inline     : var(--size-300);}
.pad-inline-400{ padding-inline     : var(--size-400);}
.pad-inline-500{ padding-inline     : var(--size-500);}
.pad-inline-600{ padding-inline     : var(--size-600);}
.pad-inline-700{ padding-inline     : var(--size-700);}
.pad-inline-800{ padding-inline     : var(--size-800);}
.pad-inline-900{ padding-inline     : var(--size-900);}
.pad-inline-1000{ padding-inline    : var(--size-1000);}
.pad-inline-1100{ padding-inline    : var(--size-1100);}
.pad-inline-1200{ padding-inline    : var(--size-1200);}

/*  JARAK DALAM KANAN KIRI ATAS BAWAH (4 SISI) -> PADDING   */
.pad-100{ padding     : var(--size-100);}
.pad-200{ padding     : var(--size-200);}
.pad-300{ padding     : var(--size-300);}
.pad-400{ padding     : var(--size-400);}
.pad-500{ padding     : var(--size-500);}
.pad-600{ padding     : var(--size-600);}
.pad-700{ padding     : var(--size-700);}
.pad-800{ padding     : var(--size-800);}
.pad-900{ padding     : var(--size-900);}
.pad-1000{ padding    : var(--size-1000);}
.pad-1100{ padding    : var(--size-1100);}
.pad-1200{ padding    : var(--size-1200);}

/*  JARAK LUAR ATAS */
.margin-top-100{margin-top  : var(--size-100);}
.margin-top-200{margin-top  : var(--size-200);}
.margin-top-300{margin-top  : var(--size-300);}
.margin-top-400{margin-top  : var(--size-400);}
.margin-top-500{margin-top  : var(--size-500);}
.margin-top-600{margin-top  : var(--size-600);}
.margin-top-700{margin-top  : var(--size-700);}
.margin-top-800{margin-top  : var(--size-800);}
.margin-top-900{margin-top  : var(--size-900);}
.margin-top-1000{margin-top : var(--size-1000);}
.margin-top-1100{margin-top : var(--size-1100);}
.margin-top-1200{margin-top : var(--size-1200);}

.margin-bottom-100{margin-bottom    : var(--size-100);}
.margin-bottom-200{margin-bottom    : var(--size-200);}
.margin-bottom-300{margin-bottom    : var(--size-300);}
.margin-bottom-400{margin-bottom    : var(--size-400);}
.margin-bottom-500{margin-bottom    : var(--size-500);}
.margin-bottom-600{margin-bottom    : var(--size-600);}
.margin-bottom-700{margin-bottom    : var(--size-700);}
.margin-bottom-800{margin-bottom    : var(--size-800);}
.margin-bottom-900{margin-bottom    : var(--size-900);}
.margin-bottom-1000{margin-bottom   : var(--size-1000);}
.margin-bottom-1100{margin-bottom   : var(--size-1100);}
.margin-bottom-1200{margin-bottom   : var(--size-1200);}


/*  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);}
.circle{
    aspect-ratio    : 1;
    border-radius   : 50%;
    background      : var(--color-aksen-3);
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 0.2rem;
}
.top-radius-100{border-top-right-radius : var(--radius-100);border-top-left-radius  : var(--radius-100);}
.top-radius-75{border-top-right-radius : var(--radius-75);border-top-left-radius  : var(--radius-75);}
.top-radius-50{border-top-right-radius : var(--radius-50);border-top-left-radius  : var(--radius-50);}
.top-radius-25{border-top-right-radius : var(--radius-25);border-top-left-radius  : var(--radius-25);}

.bottom-radius-100{border-bottom-right-radius : var(--radius-100);border-bottom-left-radius  : var(--radius-100);}
.bottom-radius-75{border-bottom-right-radius : var(--radius-75);border-bottom-left-radius  : var(--radius-75);}
.bottom-radius-50{border-bottom-right-radius : var(--radius-50);border-bottom-left-radius  : var(--radius-50);}
.bottom-radius-25{border-bottom-right-radius : var(--radius-25);border-bottom-left-radius  : var(--radius-25);}

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

/* POSISI TEKS */
.text-center{text-align: center;}
.text-left  {text-align: left;}
.text-right {text-align: right;}
.text-max-25{max-width: 25ch;}
.text-max-65{max-width: 65ch;}
.text-max-70{max-width: 70ch;}

/* POSISI OBJEK ADA DI TENGAH SECARA VERTIKAL */
.vertical-align-items-center {align-items: center;}

/* POSISI OBJEK ADA DI BAWAH SECARA VERTIKAL */
.vertical-align-items-end{align-items: end;}

.justify-content-center{justify-content: center;}
.justify-content-space-between{justify-content: space-between;}

.display-none{display: none;}
.opacity-0{opacity: 0;}

.flash-message{
    display     : grid;
    padding     : 1rem;
    justify-content : center;
    z-index     : 1000;
    /* opacity     : 0.6; */
    position    : absolute;
    top         : 0;
    right       : 0;
    left        : 0;
}

.img-border{
    border: solid 1px var(--color-brand-2);
    padding: 0.5rem;
}
.img-border:hover{
    border: solid 1px var(--color-brand-1);
    padding: 0.5rem;
}
.thumbnail-border{
    border: solid 1px var(--color-brand-2);
    padding: 0.15rem;
}
.thumbnail-border:hover{
    border: solid 1px var(--color-brand-1);
    padding: 0.15rem;
}
.kolom_2{columns: 2; column-gap: 2.5rem;}
.kolom_3{columns: 3; column-gap: 2.5rem;}