html, body{
  overflow-x: hidden;
}
    * {
      box-sizing: border-box;
      scroll-behavior: smooth;
      font-family: Arial, sans-serif;
    }


    body {
      margin: 0;
      background: #f5f7fb;
    }

    header {
      position: fixed;
      top: 0;
      width: 100%;
      background: linear-gradient(90deg, #00FFFF, #007fff);;
      padding: 10px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.4);
      z-index: 999;
    }

    header h1 {
      color: #0b3c5d;  
      font-size: 22px;     
      margin: 3px; 
      font-weight: 800; 
    }

/* NAVBAR BOOTSTRAP MENYATU DENGAN HEADER */

header .navbar{
  background: transparent !important;
  width: 100%;
}


.navbar .navbar-brand{
  font-size: 24px;
  font-weight: 600;
}
.navbar .nav-link {
  color: black !important;
  font-size: 19px;
  font-weight: 600; /* agak tebal */
}

.navbar .nav-link:hover {
  background: rgba(37, 99, 235, 0.1); /* biru soft */
  color: #ffffff !important;
}


header .container-fluid{
  padding:0;
}

.navbar-nav{
  margin-left:auto;
}

.navbar .dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* animasi halus */
.dropdown-menu {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.25s ease;
}

.navbar .dropdown:hover .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
}
.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}



/* TEXT HYCARE */
.navbar-brand {
  font-size: 22px;
  font-weight: 800;
  color: #0b3c5d !important;
}

/* KOTAK JARGON */
.jargon-box {
  margin-left: 1px;
  top: 1%;
  background: #e53935;
  color: white;

  font-size: 16px; /* lebih besar */
  font-weight: 800;
  padding: 8px 14px;

  border-radius: 8px;
  line-height: 1.3;
  text-align: center;


}



    .home section {
      min-height: 100vh;
      padding: 120px 80px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

    .home .left, 
    .home .right { 
      width: 50%; 
    }

    .home .hero { 
      background: 
        linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),url('../image/ug-beranda.png'); 
      background-size: cover;
      background-position: center;
      flex-direction: column;
      align-items: flex-start;
    }

    .hero h2 { color:#1e3a5f;
      letter-spacing:2px;
      margin-bottom:5px;
      font-weight: 700; }
    .hero h1 { font-size: 48px; margin: 10px 0;font-weight: 800; }

    .hero-content{
      text-align: left;
    }
    .hero-text{
      max-width:auto;
    }

    .home .box-info{
      display:flex;
      margin-top:110px;
      gap:20px;
      width:100%;
      justify-content:space-between;
    }
    .hero-desc{
      text-align: left;
      line-height: 1.6;
      max-width: 600px;
      font-weight: 600;
    }


    .home .card {
      flex: 1;
      padding: 20px;
      background: linear-gradient(135deg, #007fff, #30D5C8);
      border-radius: 12px;
      color: white;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      transition: 0.3s ease;
      text-align: center;   /* ini yang membuat isi kartu kembali ke tengah */
    }

    .box-info .card h3{
      font-weight:700;
      margin-bottom:8px;
    }

    .card p{
      text-align: justify;
      line-height: 1.6;
    }

    .card:hover {
      transform: translateY(-6px);
    }
    .box-info .card p{
      font-weight:500;
    }

    .btn-tips {
      width: 100%;
      padding: 12px;
      margin-top: 10px;

      background: #4cbb17;
      color: white;
      border: none;
      border-radius: 10px;

      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.5px;

      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* hover effect */
    .btn-tips:hover {
      background: linear-gradient(135deg, #0097a7, #00796b);
      transform: translateY(-2px);
      box-shadow: 0 5px 12px rgba(0,0,0,0.2);
    }

    /* saat diklik */
    .btn-tips:active {
      transform: scale(0.97);
    }
        .tips-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
      background: white; /* ⬅️ ganti */
      margin-top: 10px;
      border-radius: 10px;
      padding: 0 15px;
      color: #333; /* ⬅️ penting */
      text-align: left;
    }

    .tips-content ul {
      color: #333;
    }

    .tips-content.active {
      max-height: 500px;
      padding: 15px;
    }

    .btn-share {
      display: inline-block;
      margin-top: 10px;
      padding: 8px 15px;
      background: #25D366;
      color: white;
      border-radius: 8px;
      text-decoration: none;
    }

    /* =========================
   EDUKASI SECTION MODERN
========================= */

    .edukasi {
      background: #f5f9ff;
      padding: 80px 40px;
      flex-direction: column !important;
      text-align: center;
    }

    .section-title {
      font-size: 32px;
      font-weight: 800;
      color: #0b3c5d;
      margin-bottom: 40px;
    }

    .card-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 🔥 paksa 3 kolom */;
      gap: 25px;
    }

    .card-container {
      justify-content: center;
    }

    .card-container .edu-card {
      max-width: 320px;
    }
    /* 🔥 CARD KHUSUS EDUKASI */
    .edu-card {
      background: white;
      padding: 20px;
      border-radius: 16px;
      text-align: left;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      transition: 0.3s ease;
      border: 1px solid #e6f0ff;
    }

    .edu-card:hover {
      transform: translateY(-6px);
    }

    .edu-card h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color: black;
      font-weight: bold;
    }

    .edu-card p{
      font-size: 14px;
    }
    .edu-card ul {
      font-size: 16px;
      color: black;
      line-height: 1.6;
    }

    .edu-card ul {
      padding-left: 18px;
    }

    /* CTA bawah */
    .edukasi .cta {
      margin-top: 40px;
    }

    .edukasi .cta h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.edukasi .cta h2 {
  font-size: 18px;
  opacity: 0.95;
  color: black;
}

    .edukasi .btn {
      background: linear-gradient(135deg, #ff5fad, #7b61ff);
      border-radius: 30px;
      padding: 8px 20px;
      font-weight: bold;
      color: white;
    }

        /* HOVER */
    .edukasi .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(37, 99, 255, 0.4);
      filter: brightness(1.1);
    }

    /* KLIK */
    .edukasi .btn:active {
      transform: scale(0.96);
    }

 

.edu-card:nth-child(1) { border-top: 4px solid #007fff; }
.edu-card:nth-child(2) { border-top: 4px solid #ef4444; }
.edu-card:nth-child(3) { border-top: 4px solid #30D5C8; }
.edu-card:nth-child(4) { border-top: 4px solid #ffc107; }
.edu-card:nth-child(5) { border-top: 4px solid #28a745; }
.edu-card:nth-child(1) i { color: #2563eb; } /* biru */
.edu-card:nth-child(2) i { color: #f59e0b; } /* kuning */
.edu-card:nth-child(3) i { color: #10b981; } /* hijau */
.edu-card:nth-child(4) i { color: #ef4444; } /* merah */
.edu-card:nth-child(5) i { color: #7c3aed; } /* ungu */


    .profil { background: white; }
    .profil h2 {
      font-size: 30px;  
      margin-bottom: 10px;
      color: #1e3a5f;
      font-weight: 750;
    }

    .profil h3 {
     font-size: 35px;   
     color: black;
     letter-spacing: 1px;
     font-weight: 800;
    }

    .profil p { font-size: 16px; text-align: justify;}

    .pdf-btn {
      display: flex !important;          /* 🔥 paksa flex */
      justify-content: center;           /* 🔥 tengah horizontal */
      align-items: center;               /* 🔥 tengah vertikal */
      gap: 8px;                          /* jarak icon & teks */
      text-align: center;
      width: fit-content;                /* biar tidak kepanjangan */
      margin: 20px auto 0 auto;          /* 🔥 bikin tombol ke tengah */
    }
    /* icon */
    .pdf-btn i {
      font-size: 18px;
    }

    /* hover lebih hidup */
    .pdf-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .videoyt-btn-merah {
      background-color: #e53935; /* merah */
      color: #fff;
      padding: 10px 16px;
      border-radius: 8px;
      text-decoration: none;
      display: flex !important;          /* 🔥 paksa flex */
      justify-content: center;           /* 🔥 tengah horizontal */
      align-items: center;               /* 🔥 tengah vertikal */
      gap: 8px;                          /* jarak icon & teks */
      text-align: center;
      width: fit-content;                /* biar tidak kepanjangan */
      margin: 20px auto 0 auto;
      transition: 0.3s ease;
    }

    .videoyt-btn-merah:hover {
      background-color: #c62828; /* merah lebih gelap saat hover */
    }

    .skrining { background:  white; }

    #skrining .right h2 {
      font-size: 40px;
      color: #0b3c5d;
      font-weight: 800;
      margin-bottom: 30px;
      margin-top: -20px;
      line-height: 1.2;
    }

    .manajemen {
      background: #eaf2ff;
      flex-direction: column;
      text-align: center;
      padding-top: 60px !important;  
      padding-bottom: 40px !important;
    }

    .manajemen .btn {
      margin-top: 6px;      
    }

    .manajemen h2 {
      font-size: 40px;
      margin: 0 0 6px 0 !important;
      color: #0b3c5d;
    }

    .manajemen p {
      max-width: 800px;
      margin: 0 0 10px 0 !important;
      line-height: 1.6;
    }
    #manajemen {
      min-height: auto !important;     
      align-items: flex-start !important; 
      justify-content: flex-start !important;
    }

    #manajemen .cta-manajemen {
      margin-bottom: 8px !important;
    }

    #manajemen .icons {
      margin-top: 8px !important;

    }



    #manajemen .btn {
      background: linear-gradient(135deg, #007fff, #00f2fe);
      color: white;
      font-weight: bold;
      border-radius: 10px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      transition: 0.3s ease;
      margin-top: 4px !important;
    }
    



    .icon-card {
      background: white;
      padding: 20px 10px;
      border-radius: 12px;
      text-align: center;
      font-weight: 600;
      box-shadow: 0 6px 15px rgba(0,0,0,0.08);
      transition: 0.3s ease;
      cursor: default;

    }

    .icon-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

    .home .icons {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      margin-top: 8px;
    }



    

    .icon-card:nth-child(1) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(2) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(3) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(4) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(5) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(6) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(7) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(8) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(9) { border-top: 4px solid #007fff; }
    .icon-card:nth-child(10){ border-top: 4px solid #007fff; }

    .btn {
      display: inline-block;
      padding: 10px 22px;
      border-radius: 30px;
      font-weight: 600;
      color: white;
      text-decoration: none;
      transition: all 0.25s ease;
    }

    #beranda .btn {
      background: linear-gradient(135deg, #ff5fad, #7b61ff);
      color: white;
      font-weight: bold;
      border-radius: 20px;
      padding: 8px 20px;
      }

    #beranda .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
      filter: brightness(1.1);
    }

    #beranda .btn:active {
      transform: scale(0.96);
    }

    

    #skrining .btn {
      background: linear-gradient(135deg, #ff5fad, #7b61ff);
      color: white;
      font-weight: bold;
      border-radius: 25px;
      padding: 8px 20px;
    }

    #skrining .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(255, 95, 173, 0.4);
      filter: brightness(1.1);
    }

    #skrining .btn:active {
      transform: scale(0.96);
    }

    #skrining .image-stack {
      position: relative;
      padding-top: 1px;
      padding-right: 20px;
      min-height: 420px;  
    }

    #skrining .image-stack img {
      width: 53%;
      border-radius: 12px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }

    #skrining .img-top {
      position: relative;
      z-index: 2;
      display: block;
    }

    #skrining .img-bottom {
      position: absolute;
      right: 0;
      top: 120px;    
      width: 50%;
      z-index: 1;
      opacity: 0.95;

    }
    #skrining .image-stack p {
      position: relative;
      margin-top: 190px;    
      z-index: 3;    
      text-align: justify;      
    }
    
    .kontak {
      background: #1e3a5f;
      color: white;
      min-height: auto;        
      padding: 80px 80px 60px;
    }

    .kontak-item {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }

    .by-nhm {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 15px;
    }

    .by-nhm img {
      width: 45px;
      height: auto;
    }

    .by-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    .by-text span {
      font-size: 14px;
      color: #cbd5e1; /* abu soft */
    }

    .by-text strong {
      font-size: 16px;
      color: #ffffff;
    }

    
    .label {
      width: 160px;   /* kalau masih kepanjangan/pendek, ubah angkanya */
      font-weight: bold;
    }

    .colon {
      width: 10px;
    }

    .value {
      flex: 1;
    }
    .left img {
      border-radius: 12px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }
    
    .cta-manajemen {
      max-width: 700px;
      margin: 0 auto 10px auto; 
      text-align: center;
    }

    #manajemen .cta-manajemen h2 {
      font-size: 42px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    #manajemen .cta-manajemen p {
      font-size: 17px;
      line-height: 1.7;
      margin-bottom: 20px;
      color: #333;
    }

    .btn-manajemen {
      display: inline-block;
      padding: 12px 28px;
      border-radius: 10px;
      background: linear-gradient(135deg, #30D5C8, #007fff); /* samakan dengan btn skrining */
      color: #fff;
      font-weight: 600;
      text-decoration: none;
      transition: 0.2s ease;
      font-size: 17px;
      justify-content: center;
    }

    .btn-manajemen:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    }

  

    /* =========================
       HALAMAN MANAJEMEN DIRI
    ========================= */
      .hero-manajemen,
      .bagan-skrining {
        display: block;
        min-height: auto;
      }
      /* Hero Section untuk Manajemen Diri */
      .hero-manajemen {
        margin-top: 80px; /* supaya header tidak menutupi */
        background: linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)), url('../image/ug-beranda.png');
        background-size: cover;
        background-position: center;
        padding: 80px 20px;
        text-align: center;
        color: #0b3c5d;;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
      }
      .hero-manajemen h2 {
        font-size: 36px; margin-bottom: 20px; font-weight: 700;
        text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
      }
      .hero-manajemen p {
        font-size: 18px; line-height: 1.6; max-width: 800px;
        margin: 0 auto; text-shadow: 1px 1px 6px rgba(0,0,0,0.4);
      }
      /* BAGAN HASIL SKRINING */
      .bagan-skrining {
        padding: 40px 20px;
        background: #ffffff;
        text-align: center;
        margin-top: -20px;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
      }

      .bagan-skrining h2 {
        font-size: 32px;
        margin-bottom: 12px;
        color: #0b3c5d;
      }

      .bagan-skrining p {
        font-size: 16px;
        margin-bottom: 30px;
        color: black;
      }

      .bagan-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        background: #fff;         /* background putih */
        padding: 20px;
      } 

      .bagan {
        flex: 1 1 30%;
        min-width: 0;
        max-width: 32%;
        padding: 25px 15px;
        border-radius: 20px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
        border: 1px solid rgba(0,0,0,0.05);
        color: white;
      }

      .bagan .icon {
        font-size: 36px;
        margin-bottom: 12px;
      }

      .bagan h3 {
        font-size: 24px;
        margin-bottom: 10px;
        font-weight: 700;
        text-align: center;
      }

      .bagan p {
        font-size: 14px;
        text-align: center;
      }
      .bagan.hijau p {
        color: #ffffff; /* putih jelas di hijau */
      }

      .bagan.kuning p {
        color: #ffffff; /* hitam gelap jelas di kuning */
      }

      .bagan.merah p {
        color: #ffffff; /* putih jelas di merah */
      }

      .bagan:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.2);
        filter: brightness(1.05);
      }

      /* WARNA BAGAN */
      .bagan.hijau { 
        background: linear-gradient(135deg, #28a745, #218838);
        color: #fff;
      }

      .bagan.kuning { 
        background: linear-gradient(135deg, #ffc107, #e0a800);
        color: #fff;
      }
        
      .bagan.merah { 
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: #fff;
      }

      .fa-person-running {
        color: #3b82f6;
      }

      .fa-bowl-food {
        color: #374151;
      }

      .fa-burger {
        color: #f59e0b;
      }

      .fa-joint {
        color: #ef4444;
      }

      .fa-wine-glass {
        color: #8b5cf6;
      }

      .fa-weight-scale {
        color: #2563eb;
      }

      .fa-spa {
        color: #10b981;
      }

      .fa-stethoscope {
        color: #dc2626;
      }

      .fa-pills {
        color: #ec4899;
      }

      .fa-hospital {
        color: #0ea5e9;
      }

      .fa-apple-whole { color: #22c55e; } /* hijau sehat */
      .fa-fish { color: #0ea5e9; } /* biru laut */
      .fa-utensils { color: #f59e0b; }


      
      main {
        max-width: 900px; margin: 40px auto; padding: 0 20px;
      }
      main h3 { font-size: 28px; margin: 24px 0 12px 0; color: #0b3c5d; font-weight: bold;}
      main p { font-size: 16px; line-height: 1.6; margin-bottom: 16px; text-align: justify; }
      main ul { list-style: none; padding-left: 0; margin-bottom: 16px; }
      main ul li {
        font-size: 16px; line-height: 1.6; margin-bottom: 10px; position: relative; padding-left: 30px;
      }
      main ul li::before { content: "📌"; position: absolute; left: 0; top: 0; }

      .back-btn {
        display: inline-block; margin-top: 20px; padding: 12px 28px;
        background: linear-gradient(135deg, #00c6ff, #0072ff);
        color: white; font-weight: 600; text-decoration: none; border-radius: 10px;
        transition: 0.2s ease;
      }
      .back-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }

      


                          /* =================================
                     PERBAIKAN HALAMAN HASIL MANAJEMEN
                  ================================= */

                  .hasilmanajemen-page .hero-hasil{
                  display:block;
                  min-height:auto;
                  padding:80px 20px;
                  margin-top:80px;
                  text-align:center;
                  background:
                  linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),
                  url('../image/ug-beranda.png');
                  background-size:cover;
                  background-position:center;
                  border-radius:12px;
                  box-shadow:0 6px 20px rgba(0,0,0,0.15);
                  }
                  
                  .hasilmanajemen-page section{
                  display:block;
                  flex-direction:column;
                  }
                  /* HASIL MANAJEMEN*/
                  .hasilmanajemen-page .hero{
                  margin-top:80px;
                  background:
                  linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),
                  url('../image/ug-beranda.png');

                  background-size:cover;
                  padding:80px 20px;
                  text-align:center;
                  border-radius:12px;
                  box-shadow:0 6px 20px rgba(0,0,0,0.15);
                  }

                  .hasilmanajemen-page .hero h3{
                  font-size:34px;
                  margin-bottom:5px;
                  }

                  .hasilmanajemen-page .hero h2{
                  font-size:36px;
                  margin-bottom:15px;
                  font-weight: bold;
                  }

                  .hasilmanajemen-page .hero p{
                  font-size:18px;
                  max-width:800px;
                  margin:auto;
                  line-height:1.6;
                  }

                  .list-kategori {
                    margin: 20px auto 0 auto;
                    max-width: 700px;        /* biar tidak terlalu lebar */
                    padding: 15px 25px;
                    border-radius: 12px;
                    text-align: left;
                  }

                  .list-kategori li {
                    margin-bottom: 10px;
                    line-height: 1.6;
                  }

                  /* biar bullet lebih menarik */
                  .list-kategori li::marker {
                    color: #007fff;
                    font-weight: bold;
                  }

                  /* WARNA KATEGORI */

                  .hasilmanajemen-page .aman h2{
                  color:#28a745;
                  }

                  .hasilmanajemen-page .rendah h2{
                  color:#ffc107;
                  }


                  .hasilmanajemen-page .tinggi h2{
                  color:#e53935;
                  }

                  /* SECTION EDUKASI */

                  .hasilmanajemen-page .section-edukasi{
                  padding:25px 20px;
                  }

                  .hasilmanajemen-page .section-alt{
                  background:#eaf2ff;
                  }

                  .hasilmanajemen-page .section-edukasi h2{
                  font-size:28px;
                  margin-bottom:15px;
                  color:#0b3c5d;
                   font-weight: bold;
                  }

                  /* SCROLL */

                  .hasilmanajemen-page .scroll-area{
                  display:flex;
                  gap:10px;
                  overflow-x:auto !important;;
                  padding-bottom:20px;
                  flex-direction:row;

                  }

                  /* KOTAK */

                  .hasilmanajemen-page .kotak{
                  min-width:300px;
                  height:250px;
                  background:#f2f2f2;
                  display:flex;
                  align-items:center;
                  justify-content:center;
                  border-radius:12px;
                  overflow:hidden;
                  }

                  /* ARTIKEL */
                  .hasilmanajemen-page .kotak.artikel{
                    aspect-ratio: 16 / 9;
                  }

                  .hasilmanajemen-page .artikel{
                  position:relative;
                  text-decoration:none;
                  color:white;
                  }

                  .hasilmanajemen-page .artikel img{
                  width:100%;
                  height:100%;
                  object-fit:cover;
                  }

                  .hasilmanajemen-page .judul-artikel{
                  position:absolute;
                  bottom:0;
                  left:0;
                  width:100%;
                  padding:12px;
                  background:linear-gradient(transparent,rgba(0,0,0,0.7));
                  font-weight:bold;
                  font-size: 25px;
                  color: #fff;
                  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
                  }

                  /* VIDEO */

                  .hasilmanajemen-page .video img:not(.yt-icon){
                    width:100%;
                    height:100%;
                    object-fit:cover;
                    display:block;
                  }

                  .hasilmanajemen-page .kotak.video{
                    display:block; /* 🔥 matiin flex khusus video */
                  }

                  .hasilmanajemen-page .video a{
                    display:block;
                    width:100%;
                    height:100%;
                  }

                  .hasilmanajemen-page .judul-yt{
                  position:absolute;
                  top:0;
                  left:0;
                  width:100%;
                  padding:12px;
                  background:linear-gradient(rgba(0,0,0,0.7),transparent);
                  font-weight:bold;
                  font-size: 19px;
                  color: #fff;
                  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
                  }

                  /* GAMBAR */

                  .hasilmanajemen-page .kotak img:not(.yt-icon){
                  width:100%;
                  height:100%;
                  object-fit:cover;     /* kunci utama */
                  object-position:center; /* biar fokus tengah */
                  display:block;
                  }
                  .hasilmanajemen-page .kotak.gambaredukasi img{
                    object-fit:contain;
                    background:#fff; /* opsional */
                  }

                  /* BUTTON */

                  .hasilmanajemen-page .back-btn{
                  display:inline-block;
                  margin:40px;
                  padding:12px 28px;
                  color:white;
                  text-decoration:none;
                  border-radius:10px;
                  font-weight:600;
                  background:linear-gradient(135deg,#00c6ff,#0072ff);
                  }

                  .video{
                    position:relative;
                  }

                  .video a{
                    display:block;
                    width:100%;
                    height:100%;
                    position:relative;
                  }

                  .video img:not(.yt-icon){
                    width:100%;
                    height:100%;
                    object-fit:cover;
                    border-radius:12px;
                  }

                  /* logo youtube */
                  .yt-icon{
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    width:60px;
                    height:auto;
                    z-index:10;
                    pointer-events:none;
                  }

                  /* hover biar hidup */
                  .video:hover .yt-icon{
                    transform:translate(-50%,-50%) scale(1.1);
                  }

                  .goal-ui{
                    padding: 20px;
                    font-family: 'Segoe UI', sans-serif;
                  }

                  /* HERO */
                  .goal-hero{
                    background: linear-gradient(135deg, #dbeafe, #eff6ff);
                    border-radius: 20px;
                    padding: 20px;
                    margin-bottom: 20px;
                  }

                  .goal-text h1{
                    font-size: 28px;  /*  BESAR */
                    margin-bottom: 10px;
                    font-weight: bold;
                  }

                  .goal-text p{
                    font-size: 16px;  /*  BESAR */
                    line-height: 1.6;
                  }

                  /* GRID */
                  .goal-grid{
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 20px;
                  }

                  /* CARD UMUM */
                  .goal-card{
                    border-radius: 18px;
                    padding: 16px;
                    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
                    transition: 0.2s;

                  }

                  .goal-card:hover{
                    transform: translateY(-4px);
                  }

                  /* JUDUL */
                  .goal-card h3{
                    font-size: 22px;  /*  BESAR */
                    margin-bottom: 10px;
                  }

                  .goal-card p{
                    font-size: 16px ;
                  }

                  /* ITEM */
                  .item{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    background: rgba(255,255,255,0.8);
                    padding: 10px;
                    border-radius: 10px;
                    margin-bottom: 8px;
                    font-size: 15px;
                  }

                  .item i{
                    color: #555;
                    min-width: 20px;
                  }

                  /* WARNA PER CARD */
                  .goal-card.start{
                    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
                  }

                  .goal-card.target{
                    background: linear-gradient(135deg, #fef3c7, #fffbeb);
                  }

                  .goal-card.tips{
                    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
                  }
                  .fa-bullseye {
                    color: #dc3545;
                  }
                  .start h3 i { color: #28a745; }
                  .target h3 i { color: #dc3545; }
                  .tips h3 i { color: #6f42c1; }




/* =====================
   ZOOM MODAL (GLOBAL)
   ===================== */

#zoomModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
}

#zoomModal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px black;
  animation: zoomIn 0.3s ease;
}

#zoomModal .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  }


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

                      @media (max-width: 768px) {
                      .home section {
                        
                        padding: 150px 12px 32px;
                        gap: 4px;
                      }

                      .left, .right {
                        width: 100%;
                      }
                      header {
                        flex-direction: row !important;
                        padding: 10px 12px;
                      }
                      header h1 {
                        font-size: 16px;
                      }

                      nav a {
                        margin-left: 0;
                        font-size: 14px;
                        padding: 6px 8px;
                      }

                      .hero h1 { font-size: 30px; }
                      .hero h2 { font-size: 18px; letter-spacing: 1px; }
                      .hero-desc { font-size: 18px;font-weight: 600; }
                      

                      .box-info {
                        flex-direction: column !important; 
                        margin-top: 24px;
                        gap: 8px;
                      }
                      .card {
                        padding: 10px;
                        font-size: 15px;
                      }

                      .card h3 {
                        font-size: 20px;
                        font-weight: 700;
                      }
                      .card p{
                        font-size:16px;
                        text-align:justify;
                        line-height: 1.5
                      }

                      .card-container {
                        grid-template-columns: 1fr;
                      }

                      .edu-card h3 {
                        font-size: 18px;
                        margin-bottom: 10px;
                        color: black;
                        font-weight: bold;
                      }

                      .edu-card p,{
                        font-size: 14px;
                      }
                      .edu-card ul {
                        font-size: 16px;
                        color: black;
                        line-height: 1.6;
                      }

                      .profil h2{ font-size: 22px;text-align: center; }
                      .profil h3 { font-size: 20px; }
                      .profil p { font-size: 14px; text-align: justify;}

                      .profil{
                        flex-direction: column !important;
                        
                        min-height: auto !important;   /* hapus tinggi layar */
                        align-items: flex-start !important;
                        justify-content: flex-start !important;
                        padding-top: 40px !important;
                      }

                        .profil .left,
                        .profil .right{
                          width:100%;
                        }

                        .profil .left{
                          order:1;   /* gambar di atas */
                        }

                        .profil .right{
                          order:2;   /* teks di bawah */
                        }

                        .profil img{
                          width:100%;
                          max-width:320px;
                          margin:auto;
                          display:block;
                          margin-bottom:8px;
                        }

                                  
                      .skrining {flex-direction: row;}
                      #skrining .right h2 { 
                        font-size: 32px;  
                        font-weight: 800; /* tebal */
                        color: #0b3c5d;  
                        margin-top: 0;
                        line-height: 1.2;
                      }

                      #skrining .image-stack {
                        position: relative;
                        padding-top: 1px;
                        padding-right: 20px;
                      }

                      #skrining .image-stack img {
                        border-radius: 12px;
                        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
                      }

                      #skrining .image-stack p {
                        position: relative;
                        margin-top: 12px;  /* ganti 190px → 20px */
                        z-index: 3;  
                        text-align: justify;        
                      }

                      #skrining .img-top,
                      #skrining .img-bottom {
                        position: relative !important;  /* ubah dari absolute ke relative */
                        width: 100% !important;         /* penuh container */
                        margin-bottom: 12px;            /* jarak antar gambar */
                        top: 0 !important;
                        right: 0 !important;
                        z-index: 1 !important;
                        opacity: 1;
                      }


                      .manajemen {flex-direction: row;}
                      .manajemen h2 { font-size: 22px; }
                      .manajemen p { font-size: 14px; color: black;}
                      
                      .icon-card {
                        padding: 10px 6px;
                        font-size: 14px;
                      }

                       #manajemen {
                        flex-direction: column !important;
                        align-items: center !important;
                      }

                      #manajemen .cta-manajemen {
                        width: 100%;
                        margin-bottom: 12px;
                      }

                      #manajemen .icons {
                        width: 100%;
                        grid-template-columns: repeat(2, 1fr) !important;
                        gap: 12px;
                      }

                      .kontak{
                        padding:40px 16px 20px; 
                        flex-direction:column;
                        gap:4px;
                        
                        min-height:auto !important;     /* HAPUS tinggi layar */
                        height:auto !important;

                        justify-content:flex-start !important; /* jangan direnggangkan */
                        align-items:stretch;
                      }

                      .kontak h2{
                        text-align:left;
                        margin-bottom:2px;
                      }

                      /* layout tulisan */
                      .kontak-item{
                        display:flex;
                        gap:4px;
                        margin-bottom:1px;
                        align-items:flex-start;
                        font-size: 12px;
                      }
                      .kontak .left,
                      .kontak .right{
                        width:100%;
                      }

                      .label{
                        width:120px;
                        font-weight:600;
                      }

                      .value{
                        margin: 0;
                      }

                      /* maps */
                      .kontak iframe{
                        width:100%;
                        height:300px;
                        border-radius:10px;
                        margin-top:2px;
                      }



                      .hasilmanajemen-page .scroll-area{
                        display: flex;
                        flex-direction: row;        /* 🔥 jadi horizontal */
                        overflow-x: auto;           /* 🔥 aktifin scroll */
                        gap: 4px;
                        padding-bottom: 10px;
                        padding-left: 12px;
                        padding-right: 20px; 
                        scroll-snap-type: x mandatory; /* opsional biar enak geser */
                      }

                      .hasilmanajemen-page .kotak{
                        min-width: 85%;   /* 🔥 penting biar keliatan geser */
                        flex: 0 0 auto;
                        height: 220px;

                        scroll-snap-align: start;
                      }

                      /* biar scrollbar keliatan */
                      .hasilmanajemen-page .scroll-area::-webkit-scrollbar{
                        height: 6px;
                      }

                      .hasilmanajemen-page .scroll-area::-webkit-scrollbar-track{
                        background: #eee;
                        border-radius: 10px;
                      }

                      .hasilmanajemen-page .scroll-area::-webkit-scrollbar-thumb{
                        background: #007fff;
                        border-radius: 10px;
                      }
                      .goal-grid{
                        grid-template-columns: 1fr;
                      }

                      .goal-text p {
                        font-size: 19px;
                      }
                      .goal-card h3{
                        font-size: 22px;
                      }

                      .goal-card p{
                        font-size: 19px;
                      }

                      .item{
                        font-size: 18px;
                      }
                      
                      .bagan-container {
                        flex-direction: column;
                        align-items: center;
                      }

                      .bagan {
                        flex: 1 1 100%;
                        max-width: 100%;
                        width: 100%;
                        padding: 30px 20px;
                      }

                      .bagan h3 {
                        font-size: 22px;
                      }

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

                      .bagan .icon {
                        font-size: 40px;
                      }                 
                    }


                        /* =========================
                           AREA SKRINING BOOTSTRAP MINI (FORM)
                        ========================= */

                        .list-hasil {
                          text-align: left;
                          margin-top: 10px;
                          padding-left: 20px;
                        }

                        .list-hasil li {
                          margin-bottom: 6px;
                          line-height: 1.5;
                        }
                        .container{
                        max-width:1100px;
                        margin:auto;
                        padding:0 20px;
                        }

                        .mt-5{margin-top:50px;}
                        .mb-5{margin-bottom:50px;}
                        .mb-3{margin-bottom:15px;}
                        .mt-4{margin-top:25px;}

                        .text-center{
                        text-align:center;
                        }

                        /* GRID */

                        .row{
                        display:flex;
                        flex-wrap:wrap;
                        margin-bottom:10px;
                        }

                        .col-md-2{
                        width:16.66%;
                        }

                        .col-md-10{
                        width:83.33%;
                        }

                        @media(max-width:768px){

                        .col-md-2,
                        .col-md-10{
                        width:100%;
                        }

                        }

                        /* CARD */

                        .card{
                        background:#fff;
                        border-radius:10px;
                        box-shadow:0 6px 20px rgba(0,0,0,0.1);
                        padding:20px;
                        }

                        .card-body{
                        padding:10px;
                        }

                        /* FORM */

                        label{
                        font-weight:600;
                        }

                        .form-control{
                        width:100%;
                        padding:10px;
                        border:1px solid #ccc;
                        border-radius:6px;
                        font-size:14px;
                        }

                        .form-control:focus{
                        border-color:#0d6efd;
                        outline:none;
                        box-shadow:0 0 5px rgba(13,110,253,0.3);
                        }

                        /* TABLE */

                        .table{
                        width:100%;
                        border-collapse:collapse;
                        }

                        .table th,
                        .table td{
                        padding:10px;
                        border:1px solid #ddd;
                        }

                        .table-bordered{
                        border:1px solid #ddd;
                        }

                        .table-primary{
                        background:#0d6efd;
                        color:white;
                        }

                        /* BUTTON */
                        /* TOMBOL SIMPAN DI TENGAH */
                        .btn-center {
                          display: block;           /* jadikan block agar bisa diatur margin */
                          margin: 20px auto 0 auto; /* margin atas 20px, horizontal auto untuk center */
                          padding: 10px 30px;       /* ukuran tombol */
                          font-size: 16px;
                          font-weight: bold;
                          border-radius: 8px;
                          cursor: pointer;
                          transition: background 0.3s;
                          background-color: #0d6efd; /* sama dengan btn-primary */
                          color: white;
                        }

                        .btn-center:hover {
                          background-color: #0b5ed7; /* sama hover btn-primary */
                        }

                        /* RESPONSIVE TABLE */

                        .table-responsive{
                        overflow-x:auto;
                        }