/* full gambar header */
.pkp_site_name {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .pkp_site_name > a {
    padding-top: 0;
    padding-bottom: 0;
  }
  .pkp_site_name .is_img img {
    max-height: 200px !important;
  }
  .pkp_site_name_wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  .pkp_navigation_user_wrapper {
    top: 0;
    right: 0;
    padding-right: 30px;
  }
  .pkp_structure_page {
    margin-top: 20px !important;
    margin-bottom: 20 !important;
    padding-bottom: 20 !important;
  }
  
  /* General Footer Styling */
  .pkp_structure_footer_wrapper {
      background-color: #f9f9f9; /* Light background color */
      padding: 20px 40px; /* Adequate padding for neat layout */
      font-family: 'Arial', sans-serif;
      font-size: 14px;
      color: #333333;
      text-align: center; /* Center align text */
      border-top: 3px solid #ffca2b; /* Green top border */
      border-bottom: 3px solid #ffca2b; /* Green bottom border */
  }
  
  /* Footer Structure */
  .pkp_structure_footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap; /* Ensures responsive layout */
      gap: 20px;
  }
  
  /* Footer Content Styling */
  .pkp_footer_content {
      flex: 1 1 50%; /* Takes up 50% of the available space */
      line-height: 1.6;
      margin-bottom: 10px;
  }
  
  .pkp_footer_content p {
      margin: 10px 0;
       text-align: center; /* Memusatkan teks dalam paragraf */
  }
  
  .pkp_footer_content a {
      color: #007bff; /* Blue color for links */
      text-decoration: none;
  }
  
  .pkp_footer_content a:hover {
      text-decoration: underline;
  }
  
  .pkp_footer_content img {
      vertical-align: middle;
      margin-top: 10px;
  }
  
  /* Branding Section Styling */
  .pkp_brand_footer {
      flex: 1 1 30%; /* Takes up 30% of the available space */
      text-align: right; /* Aligns the branding to the right */
      display: flex;
      justify-content: flex-end;
  }
  
  .pkp_brand_footer img {
      max-height: 40px; /* Controls the size of the logo */
      opacity: 0.8;
      transition: opacity 0.3s ease;
  }
  
  .pkp_brand_footer img:hover {
      opacity: 1;
  }
  
  /* Bottom Section Styling */
  .pkp_structure_footer_wrapper .bottom-section {
      margin-top: 20px;
      background-color: #2f7b26; /* Dark green background for the bottom section */
      color: white;
      padding: 10px;
      font-size: 12px;
  }
  
  .pkp_structure_footer_wrapper .bottom-section a {
      color: #ffffff;
      text-decoration: underline;
  }
  
  .pkp_structure_footer_wrapper .bottom-section img {
      vertical-align: middle;
      margin-left: 10px;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
      .pkp_structure_footer {
          flex-direction: column;
          align-items: center;
          text-align: center;
      }
  
      .pkp_footer_content, .pkp_brand_footer {
          flex: 1 1 100%; /* Full width on smaller screens */
          text-align: center;
      }
  }
  
  /* Informasi */
  .pkp_block {
    overflow: hidden;
    border-radius: 2px !important;
    background: white !important;
    box-shadow: 0 10px 10px -5px;
    padding: 1px !important;
    margin: 10px 12px !important;
  }
  
  .pkp_block .title {
    display: block;
    background-color: #ffca2b; /* Warna biru tua */
    color: #ffffff; /* Teks putih */
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 3px solid #1E6292; /* Garis bawah emas */
    margin: 0;
  }
  
  .pkp_block .content ul {
    list-style-type: none; /* Hilangkan bullet */
    margin: 0;
    padding: 0;
  }
  
  .pkp_block .content ul li {
    display: flex; /* Flexbox untuk menyusun ikon dan teks horizontal */
    align-items: center; /* Pusatkan secara vertikal */
    border-top: 2px solid #e0e0e0; /* Garis pemisah antar item */
    background-color: #f8f8f8; /* Warna abu muda */
  }
  
  .pkp_block .content ul li:first-child {
    border-top: none; /* Hilangkan garis di item pertama */
  }
  
  .pkp_block .content ul li a {
    display: flex; /* Flexbox untuk menyusun ikon dan teks */
    align-items: center; /* Pusatkan ikon dan teks */
    text-decoration: none;
    color: #335c63; /* Warna teks hijau tua */
    padding: 12px 15px;
    font-size: 14px;
    width: 100%; /* Pastikan link memenuhi ruang */
  }
  
  /* Ikon Styling */
  .pkp_block .content ul li a em {
    font-size: 18px; /* Ukuran ikon */
    color: #335c63; /* Warna ikon */
    margin-right: 15px; /* Jarak antara ikon dan garis */
    position: relative; /* Untuk garis vertikal */
  }
  
  .pkp_block .content ul li a em::after {
    content: ""; /* Separator vertikal */
    position: absolute;
    width: 2px; /* Lebar garis */
    height: 100%; /* Tinggi garis vertikal */
    background-color: #e0e0e0; /* Warna garis */
    right: -8px; /* Tempatkan di sebelah kanan ikon */
    top: 20%; /* Pusatkan secara vertikal */
  }
  
  /* Teks Styling */
  .pkp_block .content ul li a span {
    margin-left: 10px; /* Jarak teks setelah garis */
  }
  
  /* Hover Efek */
  .pkp_block .content ul li a {
    position: relative; /* Untuk efek tambahan */
    transition: all 0.3s ease; /* Animasi halus */
  }
  
  .pkp_block .content ul li a:hover {
    background-color: #8ecdfa; /* Warna hover biru muda */
    color: #ffffff; /* Warna teks putih */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Bayangan lembut */
    transform: scale(1.02); /* Efek sedikit membesar */
  }
  
  /* Garis Animasi di Bawah saat Hover */
  .pkp_block .content ul li a::before {
    content: "";
    position: absolute;
    bottom: 0; /* Letakkan di bagian bawah */
    left: 0;
    width: 0; /* Awalnya tidak terlihat */
    height: 3px; /* Tebal garis */
    background-color: #1E6292; /* Warna garis emas */
    transition: width 0.9s ease; /* Animasi lebar garis */
  }
  
  .pkp_block .content ul li a:hover::before {
    width: 100%; /* Garis memanjang penuh saat hover */
  }
  
  /* Ikon Hover Efek */
  .pkp_block .content ul li a em {
    font-size: 18px; /* Ukuran ikon */
    color: #335c63; /* Warna ikon */
    transition: color 0.3s ease, transform 0.3s ease; /* Animasi warna dan transformasi */
  }
  
  .pkp_block .content ul li a:hover em {
    color: #1E6292; /* Warna ikon emas */
    transform: rotate(15deg); /* Ikon sedikit berputar */
  }
  
  /* Fungsi Login Samping */
  .login-container {
    width: 100%;
    max-width: 320px;
    margin: 0;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #333;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .login-container:hover {
    transform: scale(1.02); /* Membesar sedikit saat hover */
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.15);
  }
  
  /* Header / Legend */
  .login-header {
    background-color: #ffca2b; /* Warna biru tua */
    color: #ffffff;
    text-align: center;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 3px solid #1E6292; /* Garis bawah emas */
  }
  
  /* Form Fieldset */
  .login-form {
    padding: 15px;
  }
  
  .login-form label {
    font-size: 12px;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
    display: block;
  }
  
  .login-form input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 12px;
    transition: border 0.3s ease;
  }
  
  .login-form input:focus {
    border: 1px solid #ffca2b;
    outline: none;
    box-shadow: 0 0 5px rgba(30, 98, 146, 0.3);
  }
  
  /* Button dan Link */
  .login-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  
  .login-buttons button,
  .login-buttons a {
    font-size: 12px;
    font-weight: bold;
    color: #ffca2b;
    text-decoration: none;
    background-color: #1E6292;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .login-buttons button:hover,
  .login-buttons a:hover {
    background-color: #ffca2b;
    color: #ffffff;
  }
  
  
  /* INDEXING */
  .indexing-container {
    background-color: #ffca2b; /* Latar belakang biru tua */
    color: #ffffff; /* Warna teks putih */
    text-align: center;
    padding: 15px;
    border-radius: 8px; /* Border radius untuk elemen utama */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Efek shadow lembut */
    margin: 0px auto;
    max-width: 800px; /* Lebar maksimum */
    overflow: hidden;
  }
  
  /* Judul */
  .indexing-container h2 {
    margin: 0;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    border-bottom: 3px solid #1E6292; /* Garis bawah emas */
    padding-bottom: 10px;
    display: inline-block;
  }
  
  /* Content Block */
  .indexing-content {
    background-color: #ffffff; /* Latar belakang putih */
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    display: flex; /* Flexbox untuk mengatur gambar */
    justify-content: center; /* Pusatkan konten secara horizontal */
    flex-wrap: wrap; /* Bungkus jika konten berlebih */
    gap: 15px; /* Jarak antar gambar */
  }
  
  /* Gambar */
  .indexing-content img {
    width: 151px; /* Lebar gambar */
    height: 76px; /* Tinggi gambar */
    object-fit: contain; /* Pastikan gambar proporsional */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efek hover */
    border-radius: 5px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
  }
  
  .indexing-content img:hover {
    transform: scale(1.1); /* Perbesar gambar saat hover */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Tambahkan shadow lebih dalam */
  }
  
  /* TEMPLET */
  .template-container {
    background-color: #ffca2b; /* Latar belakang biru tua */
    color: #ffffff; /* Teks putih */
    text-align: center;
    padding: 15px;
    border-radius: 8px; /* Border radius */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Efek shadow */
    margin: 0px auto;
    max-width: 600px; /* Lebar maksimum */
    overflow: hidden;
  }
  
  /* Judul */
  .template-container h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    border-bottom: 3px solid #1E6292; /* Garis bawah emas */
    display: inline-block;
    padding-bottom: 10px;
  }
  
  /* Kontainer Konten */
  .template-content {
    background-color: #ffffff; /* Latar belakang putih */
    padding: 15px;
    border-radius: 8px; /* Border radius */
    margin-top: 15px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .template-content:hover {
    transform: scale(1.02); /* Membesar sedikit saat hover */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  }
  
  /* Gambar */
  .template-content img {
    max-width: 100%; /* Gambar responsif */
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s ease;
  }
  
  .template-content img:hover {
    transform: scale(1.05); /* Gambar membesar sedikit saat hover */
  }
  
  /* Link Download */
  .template-content a {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #ffca2b; /* Warna biru tua */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .template-content a:hover {
    color: #1E6292; /* Warna emas saat hover */
    text-decoration: underline;
  }