:root {
  --pColor:     #00738e;
  --sColor:     #00738e;
  --aColor:     #DF8C43;

  --tColor:     #2C2A27;

--pLightColor:#4da2be;
--pDarkColor: #004761;
--pTextColor: #ffffff;

--font-heading: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
--font-body:    'Inter', 'Segoe UI', sans-serif;
--font-mono:    'JetBrains Mono', 'Courier New', monospace;

 --tSize:   16px;   /* body utama */
 --h3Size:  24px;   /* H2 sub-section */
 --h2Size:  32px;   /* H2 section */
 --h1Size:  40px;   /* H1 utama */



}


/* Heading — semua pakai Plus Jakarta Sans */
h1, h2, h3,
.h1, .h2, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--tColor);
}

h1, .h1 {
  font-size: var(--h1Size);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-size: var(--h2Size);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  font-size: var(--h3Size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
}


.hero h1{
  font-size: 56px;
  letter-spacing:1;
  line-height: 1;
  font-weight: bold;        /* extra bold */
}


.img-hero {
  /* Gunakan max-width agar tidak kebesaran di layar desktop */
    width: 80%;
    max-width: 280px;

    /* KUNCI: Menjaga lebar dan tinggi selalu 1:1 */
    aspect-ratio: 1 / 1;

    /* Hapus height manual agar tidak konflik dengan aspect-ratio */
    height: auto;

    object-fit: cover;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background: #fff;

    /* Layouting */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto; /* Menjaga posisi di tengah jika kontainer mengecil */
}



* { box-sizing: border-box; }

body {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--color-warm-text);
  background-color: var(--color-warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: #1D5C7C;

  /* Gradien menggunakan background-attachment: fixed agar tidak ikut tergulung */
  background-image:
    radial-gradient(
      farthest-corner at center left,
      #6ECEFF 0%,
      #1D5C7C 60%,
      transparent
    ),
    radial-gradient(
      farthest-corner at bottom right,
      #6ECEFF 0%,
      #1D5C7C 80%,
      transparent
    );

  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* KUNCI: Agar background tetap penuh meski konten di-scroll */

  /* Memastikan tinggi minimal adalah setinggi layar */
  min-height: 100vh;
}


img, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--aColor);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}



.hide{display: none;}
/* .hide,.hidden{display: none;} */
/* .hidden{visibility: hidden} */
.orange{color:orange;

       /* text-transform: uppercase; */
      line-height:1;
    }
.sub{
  position:absolute;
top:55px;
left:0px;
  font-size: 14px;
    padding-left: 0px;
     /* font-weight: 600; */
    /* text-transform: uppercase; */
    color:white;
    letter-spacing: 4px;

  }

.img  {width: 100%; height: auto;  }
.img svg{width: 100%; height: auto;   }

 .img svg path { fill: white; stroke:none; }

.simg svg{ stroke: black;
  height: 70px;
  width: 70px;
}

.img-32 svg{ stroke: black;
  height: 32px;
  width: 32px;
}



.main{
margin: auto;
width: 80%;
/* float:none; */
}

/* style="width:70px; float:left;"  */
* { box-sizing: border-box; }





/* input */
input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
select, textarea, .input {
background:white; width:100%; padding:10px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; margin-top:5px; margin-bottom:10px; resize:vertical; }
input[type=submit], button, input[type=button], .slcBtn{background:#000000; padding:12px 20px; border:none; border-radius:4px; cursor:pointer; margin:2px;color:white; }

/* table */
.table { overflow: auto; }
.table table { border-collapse:collapse; border-spacing:0; width:100%; color: #000; }
.table tr { background:#f8f8f8; }
.table tr:nth-child(even){ background:var(--pPage) }
.table th { height:37px; }
.table th,.table td { border:none; text-align:left; padding:8px; }


.gading{
background: #F2F3EB;
}

.footer{
padding: 20px 0px;
color: #ffffff;
border-top: 5px solid black;


}

.page4{
/* border-bottom: 5px solid black; */
border-top: 15px solid #F4F4F4;
background: #ffffff;
}

.page{
  border-bottom: 15px solid #F4F4F4;
  background: #D5EAF5;
   background-image:
  linear-gradient(100deg,
  rgba(255, 255, 255, 0.1) 35%,
  rgba(255, 255, 255, 0.3) 37%,
  transparent 8.5%,
  rgba(255, 255, 255, 0.1) 45%,
  rgba(255, 255, 255, 0.2) 47%,
  transparent 8.5%,
  transparent 78%
  ),

  linear-gradient(85deg,
  rgba(255, 255, 255, 0.2) 55%,
  rgba(255, 255, 255, 0.3) 57%,
  transparent 8.5%,
  transparent 78%
  ),

  linear-gradient(102deg,
  rgba(255, 255, 255, 0.2) 75%,
  rgba(255, 255, 255, 0.4) 77%,
  transparent 8.5%,
  transparent 100%
  );


  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% auto;

}
.judul{
  font-size: 25px;
  font-weight: bold;        /* extra bold */

}
.judul2 {
  font-size: 4em;
  line-height: 1em;
}
.artikel{

  padding: 20px 30px;
font: normal 16px Georgia, "Times New Roman", Times, serif;
color: #000000;
line-height: 1.8em;
margin: 0;
}


.header{   font-size: 2em;  padding: 20px 0px; color: white;
font: bold 2em times new roman;
position:relative;

}



.kiri{float: left;}
.kanan{float:right;
right: 0;
}


.striped-bg-both {
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0.2) 16%, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.1) 17%, rgba(255, 255, 255, 0.1) 23%, transparent 8.5%, transparent 78%, rgba(255, 255, 255, 0.1) 78%, rgba(255, 255, 255, 0.1) 84%, rgba(255, 255, 255, 0.2) 84%, rgba(255, 255, 255, 0.2));
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% auto;
}


.spotlights {
  position: absolute;
  background:
  radial-gradient(55% 85% at 48% 50%,
  rgba(110, 206, 255, 0.8) 10%,
  rgba(110, 206, 255, 0) 100%),
  linear-gradient(
  rgba(110, 206, 255, 0) 0%, #1D5C7C 80%);
  z-index: -1;
}







.menu-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 10px 20px; */
  flex-wrap: wrap;

  background-color: black;

 }




.nav-links {
  display: flex;
  gap: 0px;

}

.nav-links a, .burger {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 30px;
  text-decoration: none;

}

.burger {
  display: none;
   cursor: pointer;
}


.nav-links a:hover,.burger:hover {
   background-image: linear-gradient(#353535, black);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .burger {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;

    position: absolute;
    top: 60px;
    left: 0;
    background-color: #000;
    z-index: 9;
  }

  .nav-links a {
    text-align: left;
  }

  .nav-links.active {
    display: flex;
  }

  .menu-bar {
    position: relative;
    flex-direction: row;
  }
}



.row { width: 100%; display: table; table-layout: fixed; }
.row::after { content: ""; clear: both; }
[class*='col-'] { float: left;   word-wrap: break-word;}
.col-1-1 { width: 100%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.33%; }
.col-1-4 { width: 25%; }
.col-1-5 { width: 20%; }
.col-2-3 { width: 66.66%; }
.col-3-4 { width: 75%; }
.col-4-5 { width: 80%; }
@media screen and (max-width: 700px) {
[class*='col-'] { width: 50%; }
}
@media screen and (max-width: 450px) {
[class*='col-'],.main { width: 100%; }
#page1, #page5 { padding: 20px 30px; }
.sub { left: 20px;}
.header,.footer{ padding: 20px;}


}

/* pub card */
.pub-item {
    border-left: 4px solid var(--pLightColor);
    padding: 8px 14px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.6);
}
.pub-year  { font-size: 0.78em; color: #555; font-weight: 700; }
.pub-title { font-weight: 700; font-size: 0.93em; }
.pub-src   { font-size: 0.8em; color: #555; }

/* skill bar */
.skill-row { margin-bottom: 8px; }
.skill-label { font-size: 0.85em; font-weight: 600; }
.skill-track { background: var(--pLightColor); border-radius: 10px; height: 6px; margin-top: 3px; }
.skill-fill  { background: var(--pDarkColor); height: 6px; border-radius: 10px; }

/* kbli card */
.kbli-row {
    border-left: 4px solid var(--pLightColor);
    padding: 6px 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.55);
}
.kbli-code { font-weight: 800; color: #004761; font-size: 1em; }
.kbli-name { font-size: 0.88em; }
.kbli-risk { font-size: 0.75em; color: #777; }

/* timeline */
.tl-item {
    border-left: 3px solid var(--pLightColor);
    padding: 2px 0 14px 14px;
    position: relative;
}
.tl-item::before {
    content: '';
    width: 9px; height: 9px;
    background: var(--pLightColor);
    border-radius: 50%;
    position: absolute;
    left: -6px; top: 5px;
}
.tl-year  { font-size: 0.75em; color: var(--pLightColor); font-weight: 700; }
.tl-title { font-weight: 700; }
.tl-desc  { font-size: 0.85em; color: #444; }

/* badge */
.badge {
    display: inline-block;
    background: #004761;
    color: #fff;
    font-size: 0.72em;
    padding: 2px 9px;
    border-radius: 20px;
    margin: 2px 2px;
    font-weight: 600;
}