/* General Body Styling */
body {
  font-family: 'Lora', serif; /* Gunakan font serif untuk tampilan klasik dan elegan */
  background: linear-gradient(135deg, #ffefba, #ffffff); /* Latar belakang gradasi cerah */
  color: #000000; /* Warna teks hitam */
  margin: 0;
  padding: 0;
  line-height: 1.8;
  font-size: 16px; /* Ukuran font yang sedikit lebih besar untuk meningkatkan keterbacaan */
}

/* Header Styling */
h1, h2, h3, h4, h5, h6 {
  color: #000000; /* Warna teks hitam */
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Sedikit spasi antar huruf untuk keterbacaan yang lebih baik */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Bayangan lembut untuk menambah dimensi */
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: 'Lora', serif;
  transition: color 0.3s ease, transform 0.3s ease;
}

h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
  color: #333333; /* Warna abu-abu tua saat di-hover */
  transform: scale(1.05); /* Sedikit membesar saat di-hover */
}

/* Paragraph Styling */
p {
  line-height: 1.8; /* Line height yang lebih tinggi untuk meningkatkan keterbacaan */
  color: #000000; /* Warna teks hitam */
  margin: 20px 0;
  text-align: justify; /* Rata kanan-kiri untuk tampilan teks yang rapi */
  font-family: 'Lora', serif;
}

/* Link Styling */
a {
  color: #007acc; /* Warna link biru lembut */
  text-decoration: none;
  border-bottom: 2px solid #007acc; /* Garis bawah untuk menekankan link */
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

a:hover {
  color: #0056b3; /* Warna biru tua saat di-hover */
  border-bottom-color: #0056b3; /* Warna garis bawah berubah saat di-hover */
}

/* Button Styling */
button, .obj_galley_link {
  background-color: #007acc; /* Latar belakang biru lembut */
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Lora', serif;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover, .obj_galley_link:hover {
  background-color: #0056b3; /* Warna biru tua saat di-hover */
  transform: scale(1.05); /* Sedikit membesar saat di-hover */
}

button:active, .obj_galley_link:active {
  background-color: #003f7f; /* Warna biru lebih gelap saat diklik */
  transform: scale(1.1); /* Sedikit membesar lebih lagi saat diklik */
}

/* Blockquote Styling */
blockquote {
  border-left: 4px solid #007acc;
  padding-left: 15px;
  color: #555555; /* Warna teks abu-abu untuk blockquote */
  font-style: italic;
  margin: 20px 0;
  font-family: 'Lora', serif;
  background-color: #f9f9f9;
}

/* List Styling */
ul, ol {
  margin: 20px 0;
  padding-left: 40px;
  font-family: 'Lora', serif;
}

li {
  margin-bottom: 10px;
  color: #000000; /* Warna teks hitam untuk daftar */
}

/* Breadcrumb Styling */
.cmp_breadcrumbs {
  font-size: 14px;
  color: #333333; /* Warna abu-abu gelap */
  text-transform: capitalize;
  font-family: 'Lora', serif;
}

.cmp_breadcrumbs a {
  color: #007acc;
  transition: color 0.3s ease, transform 0.3s ease;
}

.cmp_breadcrumbs a:hover {
  color: #0056b3;
  transform: scale(1.05);
}

/* Footer Styling */
.pkp_structure_footer_wrapper {
  background-color: #f5f5f5;
  color: #666666;
  padding: 20px;
  text-align: center;
  font-family: 'Lora', serif;
}

.pkp_structure_footer_wrapper a {
  color: #007acc;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.pkp_structure_footer_wrapper a:hover {
  color: #0056b3;
  text-decoration: none;
}

/* Animation Keyframes */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body, h1, h2, h3, h4, h5, h6, p, a, button, blockquote, ul, ol, li {
  animation: fadeIn 1s ease-in-out;
}
