:root {
  --bg: #0b1529;
  --bgSoft: #1f3050;
  --text: #dee4eb;
  --textSoft: #cbd2d9;
  --accent-light: #007bff;
  --accent-dark: #1a73e8;
  --border-light: #ddd;
  --border-dark: #333;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.1);
  --bg-dark: #121212;
  --text-dark: #e0e0e0;
  --bg-light: #ffffff;
  --text-light: #333333;
  --highlight-dark: #1e88e5;
  --highlight-light: #0056b3;
  --secondary-dark: #888888;
  --secondary-light: #555555;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Georgia', serif;
  background-color: var(--bg-light);
  color: var(--text-light);
  line-height: 1.8;
  transition: background-color 0.3s ease, color 0.3s ease;
}




a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1366px;
  padding-left: 25px;
  padding-right: 25px;
  margin: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background-color: white;

}


/* Accordion Start */
.accordion {
  position: fixed;
  top: 70px;
  left: -400px;
  /* Tersembunyi secara default */
  width: 400px;
  height: 100%;
  padding: 20px;
  background-color: #1a1a1a;
  z-index: 10;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
  transition: left 0.4s ease-in-out;
  border-right: 2px solid #333;
}

.accordion.active {
  left: 0;
  /* Tampilkan saat class "active" ditambahkan */
}


.searchButton_accordeon {
  display: flex;
  align-items: center;
  background-color: var(--bg-light);
  color: var(--text-light);
  padding: 8px 15px;
  border-radius: 5px;
  position: relative;
  /* Untuk memastikan hasil pencarian ditempatkan relatif terhadap ini */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  margin-bottom: 20px;
  height: 60px;
}

.searchButton_accordeon button {
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  /* Rounded corners di sisi kanan */
  background-color: #007bff;
  /* Contoh warna */
  height: 60px;
  width: 60px;
  color: white;
}

.searchButton_accordeon i {
  font-size: 20px;
}

.searchButton_accordeon input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-light);
  font-size: 16px;
  height: 20px;
  width: 260px;
}

.searchButton_accordeon input::placeholder {
  color: #bbb;
}

.searchButton_accordeon:hover {
  background-color: var(--border-light);
}


.accordion-item {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-item a {
  text-decoration: none;
  color: #f0f0f0;
  font-size: 20px;
  padding: 10px 15px;
  background-color: #333;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.accordion-item a:hover {
  background-color: #555;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #333;
  color: #fff;
  font-size: 20px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion-button:hover {
  background-color: #444;
}

.accordion-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.panel.open {
  max-height: 300px;
  /* Disesuaikan dengan isi */
}

.accordion-category_page {
  background-color: #222;
  padding: 15px;
  border-radius: 8px;
  color: #fff;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-category_page a {
  text-decoration: none;
  color: #ccc;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.accordion-category_page a:hover {
  background-color: #444;
  color: #fff;
  transform: translateX(10px);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

/* Accordion End */

/* NAVBAR START */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  background-image: linear-gradient(135deg, #211C84, #4D55CC, #7A73D1, #B5A8D5);
  color: #fff;
  z-index: 1000;

}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo .icon .fas {
  color: white;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 7px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #ffba08;
}

.logo i {
  font-size: 28px;
  cursor: pointer;
  color: black;
  transition: transform 0.3s ease, color 0.3s ease;
}

.logo i:hover {
  transform: scale(1.2);
  color: #ffba08;
}

.links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.links a {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.links a:hover {
  color: black;
}

.links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #ffba08;
  transition: width 0.3s ease;
}

.links a:hover::after {
  width: 100%;
}

.searchButton {
  display: flex;
  align-items: center;
  gap: 10px;

  background-color: var(--bg-light);
  color: var(--text-light);
  box-shadow: 0 2px 5px rgba(200, 200, 200, 0.5);
  padding: 8px 15px;
  border-radius: 5px;
  position: relative;
  /* Untuk memastikan hasil pencarian ditempatkan relatif terhadap ini */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}


.searchButton input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-light);
  font-size: 16px;
  width: 200px;
}

.searchButton input::placeholder {
  color: #bbb;
}

.searchButton svg {

  fill: var(--text-light);
  transition: fill 0.3s ease;

}


.searchButton:hover {
  background-color: var(--border-light);
}




.resume-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.search-form {
  position: sticky;
  top: 0;
  /* Tetap di atas */
  background: white;
  /* Agar tidak transparan */
  padding: 10px;
  z-index: 1;
  width: 100%;
  max-width: 600px;
}

.search-container h1 {
  font-size: 60px;
}

#search-results {
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
  /* Jarak dari form pencarian */
  min-height: 300px;
  /* Menjaga ruang agar form tidak turun */
}

#search-results h1 {
  font-size: 30px;
}


#search-results.has-results h1 {
  margin-top: 0px;
  /* Saat ada hasil, hilangkan margin */
}


.search-form {
  width: 100%;
  max-width: 500px;
}

#search-query {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

#search-query:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#search-results {
  width: 100%;
  max-width: 600px;
  text-align: left;
}

.search-form .input-group {
  display: flex;
  /* Menggunakan Flexbox untuk menyelaraskan input dan tombol */
  width: 600px;
  align-items: center;
  margin-left: -13%;
}

.search-form input[type="search"] {
  flex-grow: 1;
  /* Input akan mengisi ruang yang tersedia */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  /* Rounded corners di sisi kiri */
}

.search-form button[type="submit"] {
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  /* Rounded corners di sisi kanan */
  background-color: #007bff;
  /* Contoh warna */
  width: 50px;
  height: 43px;
  color: white;

  margin-left: -50px;
  margin-top: -0.2px;
}

/* Menyembunyikan teks tombol secara visual, tapi tetap terbaca pembaca layar */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* Tambahan */
}


.page-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 12px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
}

.page-btn.active {
  background: #0056b3;
}

.page-btn:hover {
  background: #0056b3;
}




/* Styling untuk hasil pencarian */
#results {
  position: absolute;
  top: calc(100% + 5px);
  /* Letakkan tepat di bawah input */
  left: 0;
  width: 100%;
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(200, 200, 200, 0.3);
  max-height: 200px;
  /* Maksimal tinggi untuk menampilkan 5 hasil */
  overflow-y: auto;
  /* Tambahkan scroll jika lebih dari 5 hasil */
  z-index: 1;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.search-result-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#search-result-template img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

.result-item {
  padding: 10px 15px;
  font-size: 14px;
  color: var(--text-light);
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.2s, color 0.3s;
}


.result-item a {
  color: var(--highlight-light);
  text-decoration: none;
  transition: color 0.3s;
}


.result-item:hover {
  background-color: var(--border-light);
}


.result-item a:hover {
  color: var(--text-light);
}

.no-results {
  padding: 10px 15px;
  color: #666;
  font-size: 14px;
  text-align: center;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #333;
  border-radius: 20px;
  padding: 5px;
  position: relative;
  width: 50px;
  cursor: pointer;
}

.ball {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  left: calc(100% - 45px);

  transition: left 0.3s ease;
}


/* NAVBAR END */




/* CATEGORY START */



.list_h1_category {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin: 20px 0;
  margin-top: 30px;
  color: black;
}

.list_h1_category a {
  text-decoration: underline;
}

.list_h1_category h1 :hover {
  color: var(--highlight-dark);
}



.category_page_title {
  display: flex;
  justify-content: center;
  font-size: 40px;
  font-family: 'Arial', sans-serif;
  border: 3px solid rgba(255, 255, 255, 0.3);
  margin-top: -200px;
  border-radius: 50px;
  backdrop-filter: blur(20px);
  padding: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(183, 75, 75, 0.7);
  transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(183, 75, 75, 0.9);
  transform: translateY(-5px) rotateX(5deg);
  background-color: rgba(255, 255, 255, 0.2);
  perspective: 1000px;
}

.category_page_title:hover {
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 75, 75, 0.7);
  transform: translateY(-5px) rotateX(5deg);
  background-color: rgba(255, 255, 255, 0.2);
}




.category_page {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  text-align: center;

}

.category-link {
  flex: 0 1 calc(20% - 20px);
  box-sizing: border-box;
  font-size: 30px;
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s, transform 0.3s;
  /* Transisi untuk hover */
  perspective: 1000px;
  /* Memberikan perspektif untuk efek 3D */
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}

.category-link:hover {
  transform: rotateX(30deg);
  color: #0056b3;
}

.category-name {
  font-weight: bold;
}

.category-count {
  color: gray;
  font-size: 20px;
}

/* CATEGORY END */






/* TOP BLOG START */


@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}


/* TOP BLOG END */













/* FOOTER START */


.footer {
  margin-top: 60px;
  background-color: #18191a;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links,
.footer-social {
  width: 30%;
  text-align: left;
}

.footer-title {
  font-size: 1.3em;
  font-weight: bold;
  text-align: left;
}

.footer-border-title {
  border-bottom: 3px solid #f41a1a;
  width: 60px;
  margin-bottom: 20px;
}

.footer-list,
.footer-social-list {
  list-style: none;
  display: flex;
  padding: 0;
  text-decoration: none;
  transition: color 0.3s ease;
  text-align: left;
  gap: 20px;
}

.footer-social-list .fab {
  font-size: 20px;
  /* Sesuaikan ukuran sesuai keinginan */

}

.footer-social-list a {
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #4b4c4e;
  border-radius: 50%;
  margin-top: 0px;
  transition: 0.3s ease;
  color: #b74b4b;
  text-decoration: none;
  color: #fff;
}


.footer-list,
.footer-social-list a:hover {
  background-color: #ffffff;
  color: #0b1529;
}

.footer-list,
.footer-porto-list {
  list-style: none;
  padding: 0;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 22px;
  text-align: left;
}

.footer-list,
.footer-porto-list a:hover {
  color: #ffba08;
}

.footer-list li,
.footer-social-list li {
  margin: 8px 0;
}



.social-icon {
  display: inline-block;
  padding: 10px;
  border-radius: 50%;
  text-align: center;
  width: 35px;
  height: 35px;
  margin: 0 10px;
  background-color: #444;
  color: #fff;
}

.social-icon:hover {
  background-color: #555;
}

.footer-powered {
  margin-top: 30px;
  margin-right: 40px;
  text-align: right;
}

.footer-powered a {
  color: #fff;
  text-decoration: none;
}

.footer-powered a:hover {
  text-decoration: underline;
}




/* FOOTER END */

/* LIST START */
.list_h1 {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin: 20px 0;
  margin-top: 700px;
  color: black;
}

.list_h2 {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin: 20px 0;
  margin-top:20px;
  color: black;
}



.list_h1_porto {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: -80px;
  color: black;
}


.list_h1 a {
  text-decoration: underline;
}

.list_h1 h1 :hover {
  color: var(--highlight-dark);
}

.listContainer {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 12px;
}

.listItem {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.listItem:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.listItemImage {
  width: 100%;
  width: 300px;
  height: 200px;
  object-fit: cover;
  background-color: #eee;
}

.listItemTexts {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
}


.listItemTexts h1 {
  font-size: 1rem;
  margin: 0;
  color: #5E686D;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


.listItemTexts h1 a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s;
}

.listItemTexts h1 a:hover {
  color: #007BFF;
}

.listItemCategories {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.listItemTitle {
  flex-shrink: 0;
  /* Mencegah judul mengecil */
  margin-bottom: 8px;
  /* Memberi jarak antara judul dan kategori */
  word-wrap: break-word;
  /* Mengatur agar teks judul tidak keluar dari container */
}

.listItemCategory {
  padding: 1px 5px;
  background-color: #007BFF;
  color: white;
  font-size: 0.875rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.listItemtags {
  padding: 1px 5px;
  background-color: #70b50e;
  color: white;
  font-size: 0.875rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.listItemCategory:hover {
  background-color: #0056b3;
}

.listItemDesc {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.5;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.page-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background-color: white;
  transition: background-color 0.3s, color 0.3s;
}

.page-item:hover {
  background-color: #007BFF;
  color: white;
  cursor: pointer;
}

.page-item.active {
  background-color: #007BFF;
  color: white;
  font-weight: bold;
}

.page-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* LIST END */

/* Single Post Container */
.single {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  color: #333333;
  border-radius: 8px;
}



/* Single Head Section */
.singleHead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: -40px;
}

.singleHeadTitle {
  font-size: 32px;
  font-weight: bold;
  color: #000000;
  text-align: left;
  margin-bottom: 15px;
}

.singleHeadImg {
  display: flex;
  max-width: 100%;
  max-height: 100%;
  align-items: center;
}


.singleHeadDetail {
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 10px;
  color: #888888;
}

.single-meta-item span{
  font-size: 16px;
}
/* SINGLE TAGS START*/
.single-tags {
  display: flex; /* Gunakan flexbox untuk menata elemen-elemen secara horizontal */
  align-items: center; /* Menyelaraskan elemen-elemen di tengah vertikal */
  margin-top: 20px; /* Menambahkan margin atas */
  gap: 10px; /* Menambahkan jarak antar elemen */
  padding: 20px;
}

.single-icon-tag{
  background-color: #ec1919;
  width: 35px;
  height: 35px;
  text-align: center;
}

.icon-tag {
  width: 20px;
  height: 20px;
  margin-top: 7px;
  fill: rgb(255, 255, 255);

}


.single-tags .tag {
  background-color: #000000; /* Warna latar belakang tag */
  color: #ffffff;
  font-weight: bold;
  padding: 5px 10px; /* Ruang di sekitar teks */
  font-size: 14px; /* Ukuran font */
  text-decoration: none; /* Menghilangkan garis bawah pada link */
  transition: background-color 0.3s ease; /* Efek transisi */
}

.single-tags .tag:hover {
  background-color: #d1211b; /* Warna latar belakang saat hover */
  text-decoration: none;
  color: white;

}

/* Youtube */
.youtube1 {
  max-width: 800px;
  height: 420px;
}
/* Youtube end */


/* SINGLE TAGS END*/
.single-code {
  font: inherit;
  font-size: 100%;
  background: blue;
  border: inherit;
  color: #515151;
  text-align: center;
  align-items: center;
}

.singleRelatedPosts {
  margin-top: 60px;
}

.singleRelatedPosts a {
  font-size: 18px;
}

.singleRelatedPosts a:hover {
  color: rgb(89, 89, 192);
}


.singleHeadDetail :hover {
  color: #888888;
  color: var(--highlight-dark);
}



.singleHeadDesc {
  font-size: 16px;
  color: #444444;
  margin-bottom: 18px;
  text-align: justify;
}


/* Content Section */
.singleContent {
  font-size: 16px;
  line-height: 1.85;
  color: #333333;
}

/* TABLE OF CONTENT START */
#TableOfContents {
  background: #ffffff; /* Latar belakang putih */
  color: #333; /* Warna teks lebih gelap untuk kontras */
  padding: 15px;
  border-radius: 10px;
  width: 70%;
  
}

.toc-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  
}

.toc-toggle {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  background: #ffffff; /* Warna tombol biru */
  color: rgb(0, 0, 0);
  font-weight: bold;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
  border-radius: 5px;
  font-size: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  transition: background 0.3s;
}

.toc-toggle:hover {
  background: #0056b3; /* Warna lebih gelap saat hover */
  color: #dee4eb;
}

#toc-content {
  display: none; /* Awalnya disembunyikan */
  margin-top: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

#TableOfContents ul {
  padding-left: 15px;
}

#TableOfContents li {
  margin-bottom: 5px;
}

#TableOfContents a {
  text-decoration: none;
  color: #007bff; /* Warna link */
  font-size: 14px;
  transition: color 0.3s;
}

#TableOfContents a:hover {
  color: #000000; /* Warna lebih gelap saat hover */
}

:target::before {
  content: "";
  display: block;
  height: 80px; /* Sesuaikan dengan tinggi header */
  margin-top: -80px; /* Mengimbangi header */
}

/* TABLE OF CONTENT END */

.singleContent p {
  margin-bottom: 20px;
  text-align: justify;
  text-indent: 30px;
  /* First line indent */
  font-family: 'Roboto', sans-serif;
}

.singleContent li {
  text-indent: 0px;
  text-align: left;
  margin: 0px 0px 0px 20px;
  font-family: 'Roboto', sans-serif;
  color: black;
}

.singleContent li p {
  text-indent: 0px;
}

.singleContent a {
  color: #0056b3;
}

.singleContent a:hover {
  text-decoration: underline;
}




.singleContent h1 {
  font-size: 32px;
  font-weight: bold;
  margin: 30px 0px 20px;
  color: black;
}

.singleContent h2 {
  color: black;
  /* Warna hijau untuk h3 */
  text-align: left;
  margin: 30px 0px 20px;
  /* H3 di tengah */
}

.singleContent h3 {
  color: black;
  /* Warna hijau untuk h3 */
  text-align: left;
  margin: 30px 0px 20px;
  /* H3 di tengah */
}


.singleContent blockquote {
  font-size: 22px;
  font-style: italic;
  color: #555555;
  border-left: 4px solid #ccc;
  margin: 20px 0;
  padding-left: 15px;
}

.singleContent img {
  width: 100%;
  margin: 30px 0;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}


.singleContent pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


.singleContent code {
  background-color: #b36464;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  color: #ffffff;
  white-space: pre-wrap;
  /* Mengizinkan pembungkusan pada elemen <code> */
  word-wrap: break-word;
}

/* Footer Section */
.singleBottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.singleAuthor {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  padding: 15px 0;
  border-top: 1px solid #eeeeee;
}

.singleAuthor img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}



.singleAuthorName {
  font-size: 16px;
  font-weight: bold;
}



.singleAuthorBio {
  font-size: 14px;

  color: #555555;
}

/* SOCIAL MEDIA SHARE START*/
.social-share {
  display: flex;
  justify-content: flex-start;
  align-items: center;
	top: -0.5em;
  margin-top: -48px;
}
.share-container {
  display: flex;
  align-items: center;
  gap: 15px; /* Jarak antara "SHARE ON" dan ikon */
}
.share-title {
  display: flex;
  background-color: #0056b3;
  align-items: center;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  width: 20%;
  height: 40px;
  margin-left: 20px;
  color: rgb(255, 255, 255);
  margin-top: 8px;
  
}

.share-title p {
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
  text-indent: 0px;
  text-transform: uppercase;
}

.icon-share {
  width: 20px;
  height: 20px;
  fill: rgb(255, 255, 255);
  
}
 
.social-share ul {
	margin: 0;
  padding: 20px;
  margin-left: -10px;
  
}
 
.social-share ul li p {
	display: none;
}
 
.social-share .share-icons li {
	padding: 0 !important;
	padding-bottom: 10px !important;
}
 
.social-share .share-btn {
	padding: 0.15em;
  height: 40px;
	width: 3em;
  
}
 
.social-share-nav .share-btn h3{
	color: #ffffff;
}

ul.share-icons {
  display: flex;
	cursor: default;
	list-style: none;
	padding-left: 0;
	margin-top: 1em;
  
}

ul.share-icons li {
	display: inline-block;
	padding: 0 1em 0 0;
}

ul.share-icons li:last-child {
	padding-right: 0;
}

ul.share-icons li > * {
	text-decoration: none;
	border: 0;
  
}

ul.share-icons li > *:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

ul.share-icons li > * .label {
	display: none;
  
}
 
.share-btn {
	display: inline-block;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	outline: none;
	text-align: center;
	text-decoration: none;
}


 
.share-btn:hover {
	color: #ffffff !important;
}

.share-btn:active {
	position: relative;
	top: 2px;
	box-shadow: none;
	color: #e2e2e2;
	outline: none;
  
}
.share-btn .widget-social__link-icon {
	margin: 0;
  margin-top: 5px;
}
 
.share-btn.twitter     { background: #55acee; }
.share-btn.copy-link   { background: #000000; }  
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.pinterest   { background: #BD081C; }
.share-btn.reddit      { background: #ff5700; }
.share-btn.email       { background: #444444; }
.share-btn.whatsapp    { background: #25d366; }


.share-btn.twitter:hover     { background: #4c9ad6; }
.share-btn.copy-link:hover        { background: #311b1b; }  
.share-btn.whatsapp:hover    { background: #3ae177; }
.share-btn.google-plus:hover { background: #c64333; }
.share-btn.facebook:hover    { background: #2f4779; }
.share-btn.linkedin:hover    { background: #4069a2; }
.share-btn.stumbleupon:hover { background: #d3401f; }
.share-btn.pinterest:hover   { background: #AD0000; }
.share-btn.reddit:hover      { background: #e54e00; }
.share-btn.email:hover       { background: #363636; }

/* SOCIAL MIDA SHARE END */




/* Single Pagination START*/
.singlePagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding: 20px 0;
  border-top: 1px solid;
}

.singlePagination .pagination-link {
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #ff6b6b;
  transition: color 0.3s;
}

.singlePagination .pagination-link:hover {
  color: #e84118;
}

.singlePagination .prev {
  text-align: left;
}

.singlePagination .next {
  text-align: right;
}

/* Single Pagination END */

/* SINGLE END */


/* RIGHTBAR START */


.rightBar {
  position: sticky;
  top: 100px;
}

.rightBarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rightBarImgHr {
  display: none;
}





/* Coding Template Start */

.coding body {
  color: pink;
}

pre {
  position: relative;
  /* Ensures the button is positioned relative to the <pre> element */
  padding: 10px;
  border: 1px solid #ddd;
  background: #f9f9f9;
  border-radius: 4px;
  margin-bottom: 20px;
}

.copy-button {
  position: absolute;
  top: -10px;
  right: 7px;
  background: #3C3D37;
  width: 60px;
  height: 40px;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}

.copy-button:hover {
  background: #0056b3;
}

.language-label {
  font-weight: bold;
  background-color: #e0e0e0;
  /* Gray background for the label */
  color: #333;
  /* Text color for better readability */
  padding: 5px;
  /* Padding around the text */
  border-radius: 3px;
  /* Rounded corners for a better look */
  margin-bottom: 25px;
  display: block;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
}

/* Coding Template END */




/* RIGHTBAR END */

@media (max-width: 1536px) {
  .container {
    max-width: 1366px;
  }
}

@media (max-width: 1366px) {
  .container {
    max-width: 1280px;
  }
}

@media (max-width: 1280px) {
  .container {
    max-width: 1024px;
  }
}

@media (max-width: 1024px) {
  .container {
    max-width: 768px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .singleHeadImg {
    display: flex;
  }

  .singleBottom {
    flex-direction: column-reverse;
  }

  .footer-title {
    font-size: 1.2em;
  }

  .footer-links p {
    font-size: 12px;
  }

  .footer-list,
  .footer-porto-list {
    font-size: 18px;
  }

  .footer-social-list {
    flex-wrap: wrap;
    /* Membungkus item ke baris baru jika perlu */
    gap: 20px;
    /* Memberikan jarak antar elemen */
  }

  .rightBarImg {
    display: none;
  }

  .rightBarImgHr {
    display: block;
    width: 100%;
  }
}

@media (max-width: 728px) {

  .container {
    max-width: 620px;
  }

  /* Navbar */
  .links {
    display: none;
  }

  .searchButton span {
    display: none;
  }

  /* Navbar end */

  /*List Start*/
  .listContainer {
    grid-template-columns: repeat(1, 1fr);
    /* Membuat 4 kolom yang sama lebar */
    padding: 0 10px;
    /* Jarak di kiri dan kanan seluruh kontainer */
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .listItem {
    margin-bottom: 40px;
    margin-top: -20px;
    display: flex;
    flex-direction: column;
    align-items: auto;
    padding: 0px;
    border: #000000 1px solid;
    width: 350px;
    height: 350px;
  }

  .list_h1 {
    margin-bottom: 40px;
    margin-left: 5px;
  }
  .list_h2 {
    margin-bottom: 40px;
    margin-left: 5px;
  }

  .list_h1 h1 {
    font-size: 30px;
    margin-top: 180px;
  }

  .list_h2 h1 {
    font-size: 30px;
    margin-top: 20px;
  }


  .listItemImage {
    display: flex;
    width: 350px;
    margin-left: 0%;
    margin-top: -4px;
    height: 200px;

  }




  .listItemTexts .listItemDesc {
    font-size: 14px;
  }

  .listItemTexts {
    gap: 20px;
  }

  .listItemTexts p {
    font-size: 20px;
  }

  .pagination {
    margin-left: 30px;
    gap: 5px
  }

  .list_h1_porto {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 50px;
    margin-bottom: -400px;
    z-index: 5;
  }

  /* ===== Styling untuk Container Paginasi (pagination) ===== */
  .pagination {
    display: flex;
    justify-content: center;
    /* Pusatkan paginasi */
    align-items: center;
    /* Pusatkan item vertikal */
    padding: 1.5em 2em;
    background-color: #fff;
    /* Latar belakang putih atau warna terang lain */
    border-top: 1px solid #eee;
    /* Garis pemisah di atas paginasi */
    margin-top: 2em;
    /* Spasi atas dari konten di atasnya */
    border-radius: 0 0 8px 8px;
    /* Rounded bottom corners jika container daftar juga rounded top corners */
  }

  /* ===== Styling untuk Item Paginasi (pagination-item & pagination-number) ===== */
  .pagination-item,
  .pagination-number {
    display: inline-flex;
    /* Agar bisa diatur tinggi dan lebarnya */
    justify-content: center;
    align-items: center;
    min-width: 40px;
    /* Lebar minimum item paginasi */
    height: 40px;
    /* Tinggi item paginasi */
    margin: 0 0.5em;
    /* Spasi horizontal antar item */
    border-radius: 6px;
    /* Sudut membulat */
    font-size: 1em;
    font-weight: 500;
    /* Sedikit bold */
    color: #555;
    /* Warna teks item paginasi */
    background-color: #f0f0f0;
    /* Latar belakang item paginasi */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Transisi hover effect */
    text-decoration: none;
    /* Pastikan tidak ada garis bawah dari link */
  }

  .pagination-item:hover {
    background-color: #e0e0e0;
    /* Warna latar belakang saat hover */
    color: #333;
    /* Warna teks saat hover */
  }

  /* Styling khusus untuk link 'Newer' dan 'Older' */
  .pagination-newer,
  .pagination-older {
    padding: 0 1.2em;
    /* Padding horizontal lebih lebar untuk teks 'Newer'/'Older' */
  }

  /* Styling untuk angka halaman saat ini (pagination-number) */
  .pagination-number {
    background-color: transparent;
    /* Hilangkan latar belakang untuk angka halaman saat ini */
    color: #777;
    /* Warna teks angka halaman saat ini */
    font-weight: normal;
    /* Berat font normal untuk angka halaman */
    pointer-events: none;
    /* Non-interactive, bukan link */
  }


  /* ===== Styling untuk Simbol Panah (opsional, jika Anda ingin mengganti simbol default) ===== */
  .pagination-item span[aria-hidden="true"] {
    display: inline-block;
    margin: 0;
    /* Hilangkan margin default */
    font-size: 1em;
    /* Ukuran simbol panah */
    line-height: 1;
    /* Pastikan simbol panah sejajar vertikal */
  }

  /* List item END */

  /* SINGLE START */

  .single {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 620px;
    padding: 0px;
    margin-left: -5px;

  }

  .singleContent img {
    align-items: center;
    display: flex;
    width: 30px;
    width: 60px;
  }

  .singleHeadTexts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .singleHeadTitle {
    font-size: 30px;
    margin-bottom: 10px;
    font-family: 'Times New Roman', Times, serif;
    color: grey;
    text-align: left;
  }




  .singleBottom {
    justify-content: space-between;
    gap: 50px;
    margin-top: 50px;
  }

  .singleContent {
    padding: 2px;
    flex: 3;
    font-size: 18px;
    line-height: 1.6;
    font-family: 'Times New Roman', Times, serif;
  }

  .dashboard iframe {
    max-height: 400px;
    height: 200px;
  }


  .singleContent p,
  .singleContent h1,
  .singleContent h2,
  .singleContent h3,
  .singleContent ul,
  .singleContent ol,
  .singleContent li {
    margin: 0px 0px;
    /* Memberikan jarak kiri dan kanan 100px */
    max-width: 100%;
    /* Membatasi lebar maksimal elemen agar tidak lebih dari 100% dari kontainer induk */

  }

  .singleContent p {
    text-indent: 20px;
    font-size: 16px;
    margin-bottom: 10px;
    margin-left: 5px;
  }

  .singleContent ul {
    left: -22px;
  }

  .singleContent li {
    margin-left: -20px;
  }

  /* Styling untuk h1 */
  .singleContent h1 {
    color: black;
    /* Warna biru untuk h1 */
    text-align: left;
    /* H1 di tengah */
    margin: 30px 0px 20px;
  }

  /* Styling untuk h2 */
  .singleContent h2 {
    color: black;
    margin: 30px 0px 20px;
    /* Warna merah untuk h2 */
    text-align: left;
    /* H2 di tengah */
  }

  /* Styling untuk h3 */
  .singleContent h3 {
    color: black;
    /* Warna hijau untuk h3 */
    text-align: left;
    margin: 30px 0px 20px;
    /* H3 di tengah */
  }

  .singleContent img {
    width: 100%;
    object-fit: cover;
  }

  /* SINGLE END */


  /* CATEGORY START */

  .list_h1_category {
    font-size: 1rem;
    margin: 40px 0;
    margin-top: 30px;
  }

  /* CATEGORY END */
  /* FOOTER START */
  .footer-powered {
    font-size: 12px;
    margin-right: 20px;
  }

  /* FOOTER END */


  /* Search Start */
  .search .search-form {
    padding: 0px;
    z-index: 1;
    width: 30px;
    align-items: center;
  }

  .search-form .input-group {
    text-align: center;
    width: 350px;
    margin-left: 0px;
  }

  .search-container {
    max-width: 100%;
    right: auto;
    left: auto;
    align-items: center;
    text-align: center;
  }

  #search-results {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
    /* Jarak dari form pencarian */
    min-height: 300px;
    /* Menjaga ruang agar form tidak turun */
  }

  .search-result-item {
    margin-bottom: 30px;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 10px;
    border: 2px solid blue;

  }

  .search-result-item h4 {
    font-size: 14px;
  }

  .search-result-item div {
    font-size: 12px;
  }

  .search-result-image {
    width: 100%;
    align-items: center;
    height: 225px;
    object-fit: cover;
    margin-bottom: 30px;
    border-radius: 8px;
    margin-left: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  #search-results.has-results h1 {
    margin-top: 0px;
    /* Saat ada hasil, hilangkan margin */
  }

  /* Search End   */
}

@media (max-width: 411px) {

  .container {
    max-width: 100%;
    margin-left: 3px;

  }

  .single {
    max-width: 100%;
  }
  #TableOfContents {
    width: 100%;
  }

  #toc-content {
    padding: 14px;
    margin-top: 0px;
    box-shadow: none;
  }

  .singleHeadDetail {
    font-size: 13px;
    gap: 2px;
    color: #888888;
  }

  .single-meta-item span{
    font-size: 13px;
  }

  .singleHeadTitle {
    font-size: 25px;
  }

  .singleContent p {
    text-indent: 20px;
    font-size: 14px;
    margin-bottom: 10px;
    ;
  }

  .singleContent li {
    font-size: 14px;
  }

  .singleContent h1 {
    font-size: 18px;
  }

  /* Styling untuk h2 */
  .singleContent h2 {
    font-size: 16px;
  }

  /* Styling untuk h3 */
  .singleContent h3 {
    font-size: 14px;
  }

  .single-code p {
    font-size: 10px;
  }



  .singleContent code {
    font-size: 12px;
  }

  /* SOCIAL MEDIA SHARE START*/

 
.social-share {
  display: flex;
  justify-content: flex-start;
  align-items: center;
	top: -0.5em;
  margin-top: -48px;
  position: relative;
  padding: 5px;
}
.share-container {
  display: flex;
  align-items: center;
  gap: 15px; /* Jarak antara "SHARE ON" dan ikon */
}
.share-title {
  padding: 15px;
  margin-top: -40px;
  width: 150px;
}

.share-title p {
  font-size: 12px;
  margin-top: 10px;
  text-indent: 0px;
}

 
.social-share ul {
  margin-left: -10px; 
}

ul.share-icons {
  display: block;
	padding-left: 0;
	margin-top: 1em;
}

.share-btn {
  margin-left: 40px;
  margin-top:5px;
}

/* SOCIAL MIDA SHARE END */

  /* Footer */

  .footer-title {
    font-size: 1em;
    text-align: center;
  }


  .footer-container {
    flex-direction: column;
    align-items: center;
    
  }

  .footer-links p {
    font-size: 12px;
    text-align: center;
  }
  .footer-links {
    order: 1; /* Tentang Website di atas */
    width: 100%;
    margin-bottom: 30px;
  }

  .footer-list,
  .footer-porto-list {
    font-size: 16px;
    margin-bottom: 30px;
    width: 100%;
  }

  .footer-porto-list{
    text-align: center;
  }

.footer-border-title{
    align-items: center;
    width: 100%;
  }

  .footer-porto,
  .footer-social a{
  align-items: center;
  }

  .footer-porto {
    order: 2;
  }

  .footer-social-list {
    flex-wrap: wrap;
    gap: 10px;
  }
  .footer-social {
    order: 3; 
    width: 200px;
  }

  .footer-powered {
    font-size: 12px;
    margin-right: 20px;
  }

  .list_h1_porto {
    margin-bottom: -300px;
  }

  /* Footer */
}

@media (max-width: 320px) {

  .container {
    max-width: 320px;
    margin-left: 15px;
  }

  body {
    width: 120%;
  }
}