body {
  font-family: "Poppins", sans-serif; /* Menggunakan Poppins atau font sans-serif serupa */
  margin: 0;
  padding: 0;
  background-color: #f8f9fa; /* Warna latar belakang terang */
  color: #333; /* Warna teks utama */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%; /* Mencegah pembesaran font otomatis di iOS */
  text-size-adjust: 100%;
}

.container {
  max-width: 800px; /* Lebar konten maksimum */
  margin: 20px auto; /* Pusatkan kontainer */
  padding: 15px; /* Sedikit kurangi padding default */
  background-color: #fff; /* Latar belakang konten putih */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Bayangan halus */
  border-radius: 8px;
  text-align: center; /* Pusatkan teks secara default */
}

header {
  display: flex; /* Gunakan Flexbox */
  flex-direction: column; /* Susun item secara vertikal */
  align-items: center; /* Pusatkan item secara horizontal */
  text-align: center; /* Pastikan teks tetap terpusat */
  margin-bottom: 30px; /* Tambahkan margin bawah */
}

.header-images {
  /* Buat wadah untuk gambar header jika diperlukan */
  display: flex;
  justify-content: center;
  gap: 20px; /* Jarak antar gambar */
  margin-bottom: 20px; /* Jarak antara gambar dan teks */
}

h1,
h2 {
  color: #2c3e50; /* Warna judul lebih gelap */
  margin-bottom: 15px;
}

h1 {
  font-size: 2.2em;
  margin-top: 0;
}

h2 {
  font-size: 1.8em;
  border-bottom: 2px solid #f1c40f; /* Garis bawah kuning untuk H2 */
  display: inline-block;
  padding-bottom: 5px;
  margin-top: 30px;
}

p {
  margin-bottom: 15px;
  font-size: 1.1em;
}

section {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee; /* Pemisah antar bagian */
}

section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

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

ul {
  list-style: none; /* Hapus gaya daftar default */
  padding: 10px; /* Kurangi padding kiri daftar di mobile */
  text-align: left; /* Ratakan kiri untuk daftar */
  max-width: 600px; /* Batasi lebar daftar */
  margin: 20px auto; /* Pusatkan daftar */
}

li {
  margin-bottom: 15px;
  font-size: 1.1em;
  padding-left: 1.2em; /* Sesuaikan padding kiri item daftar */
  position: relative;
}

li strong {
  display: block; /* Judul hari di baris baru */
  margin-bottom: 5px;
  color: #3498db; /* Warna biru untuk judul hari */
}

/* Menggunakan pseudo-element untuk tanda centang jika diperlukan, atau gunakan teks ✓ */
/* li::before {
    content: '✓';
    color: #2ecc71;
    font-weight: bold;
    position: absolute;
    left: 0;
} */

.course-intro h2,
.pricing-cta .price-highlight p:first-child {
  color: #e74c3c; /* Warna merah untuk "MURAH" */
}

.price-highlight {
  background-color: #f1c40f; /* Latar belakang kuning untuk harga */
  color: #333;
  padding: 15px;
  border-radius: 8px;
  margin: 20px auto;
  max-width: 400px;
}

.price-highlight p {
  margin: 5px 0;
  font-size: 1.3em;
}

.price-highlight strong {
  font-size: 1.5em;
}

.cta-button {
  /* Reset default button styles */
  border: none;
  margin: 0;
  padding: 12px 25px; /* Sedikit kurangi padding tombol - Re-apply padding */
  background-color: #2ecc71; /* Warna tombol hijau - Re-apply background */
  color: #fff; /* Re-apply color */
  font-family: inherit; /* Inherit font from body */
  font-size: 1.1em; /* Sedikit kurangi font tombol - Re-apply font-size */
  line-height: inherit; /* Inherit line-height */
  -webkit-appearance: none; /* Remove default OS styling */
  -moz-appearance: none;
  appearance: none;

  /* Existing styles */
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  margin-top: 20px;
  transition: background-color 0.3s ease, transform 0.3s ease, filter 0.3s ease; /* Menambahkan transisi untuk transform dan filter */
  cursor: pointer; /* Menambahkan cursor pointer */
}

.cta-button:hover {
  background-color: #27ae60; /* Warna hover tombol lebih gelap */
  transform: scale(1.05); /* Sedikit memperbesar tombol saat hover */
  filter: brightness(1.1); /* Sedikit mencerahkan tombol saat hover */
}

.promo-timer {
  margin-top: 30px;
  background-color: #ecf0f1; /* Latar belakang abu-abu terang untuk timer */
  padding: 20px;
  border-radius: 8px;
}

.promo-timer p {
  font-weight: bold;
  color: #e74c3c; /* Warna teks promo merah */
  margin-bottom: 15px;
}

.timer {
  display: flex;
  justify-content: center;
  gap: 20px; /* Jarak antar elemen timer */
}

.timer div {
  background-color: #34495e; /* Latar belakang gelap untuk angka timer */
  color: #fff;
  padding: 8px 10px; /* Kurangi padding elemen timer */
  border-radius: 5px;
  min-width: 50px; /* Kurangi lebar minimum */
}

.timer span {
  display: block;
  font-size: 0.8em;
  text-transform: uppercase;
}

.timer span:first-child {
  font-size: 1.8em; /* Sesuaikan ukuran angka timer */
  font-weight: bold;
  margin-bottom: 5px;
}

footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  font-size: 0.9em;
  color: #777;
  padding-bottom: 100px; /* Tingkatkan padding bawah agar tombol melayang tidak menutupi */
}

/* Floating CTA Button Styles */
.floating-cta-button {
  /* Reset default button styles */
  border: none;
  margin: 0;
  padding: 12px 20px; /* Kurangi padding tombol melayang - Re-apply padding */
  background-color: #2ecc71; /* Warna tombol hijau (sama seperti tombol lain) - Re-apply background */
  color: #fff; /* Re-apply color */
  font-family: inherit; /* Inherit font from body */
  font-size: 1em; /* Kurangi font tombol melayang - Re-apply font-size */
  line-height: inherit; /* Inherit line-height */
  -webkit-appearance: none; /* Remove default OS styling */
  -moz-appearance: none;
  appearance: none;

  /* Existing styles */
  position: fixed; /* Tetap di posisi yang sama saat scroll */
  bottom: 15px; /* Sesuaikan jarak dari bawah */
  left: 50%; /* Pusatkan horizontal */
  transform: translateX(-50%); /* Koreksi pemusatan horizontal */
  text-decoration: none;
  border-radius: 30px; /* Membuat sudut lebih bulat */
  max-width: 90%; /* Batasi lebar maksimum agar tidak terlalu lebar di layar besar */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Bayangan untuk efek melayang */
  z-index: 1000; /* Pastikan tombol di atas konten lain */
  text-align: center;
  cursor: pointer;
  animation: breathe 2s ease-in-out infinite alternate; /* Terapkan animasi */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Tambahkan transisi transform */
  white-space: nowrap; /* Mencegah teks tombol membungkus (opsional) */
  box-sizing: border-box; /* Sertakan padding dalam perhitungan lebar */
}

.floating-cta-button:hover {
  background-color: #27ae60; /* Warna hover lebih gelap */
  animation-play-state: paused; /* Jeda animasi saat hover (opsional) */
}

/* Keyframes for Breathing Animation */
@keyframes breathe {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
  }
  100% {
    transform: translateX(-50%) scale(1.05); /* Sedikit membesar */
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.5); /* Bayangan lebih menonjol */
  }
}

/* Responsif sederhana */
@media (max-width: 600px) {
  .container {
    margin: 0; /* Hapus margin samping */
    padding: 10px; /* Kurangi padding kontainer */
    width: 100%; /* Pastikan kontainer menggunakan lebar penuh */
    box-sizing: border-box; /* Sertakan padding dalam perhitungan lebar */
    box-shadow: none; /* Hapus bayangan di mobile (opsional) */
    border-radius: 0; /* Hapus radius border di mobile (opsional) */
    overflow-x: hidden; /* Cegah overflow horizontal jika ada elemen terlalu lebar */
  }

  header,
  section {
    padding-left: 5px; /* Tambahkan sedikit padding kiri/kanan untuk section */
    padding-right: 5px;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar */
  }

  h1 {
    font-size: 1.6em; /* Sedikit perkecil H1 */
  }
  h2 {
    font-size: 1.4em; /* Sedikit perkecil H2 */
    margin-top: 20px; /* Kurangi margin atas H2 */
    margin-bottom: 10px; /* Kurangi margin bawah H2 */
  }
  p,
  li {
    font-size: 0.95em; /* Sedikit perkecil font paragraf dan list */
    line-height: 1.5; /* Sesuaikan line-height */
  }

  /* Jika .profile-image masih digunakan dan menyebabkan masalah, tambahkan ini */
  .profile-image {
    max-width: 100%; /* Batasi lebar maksimum gambar */
    height: auto; /* Jaga rasio aspek */
    display: block; /* Pastikan gambar block-level */
    margin-left: auto; /* Coba pusatkan jika perlu */
    margin-right: auto;
  }

  /* Jika .profile-image masih digunakan dan menyebabkan masalah, tambahkan ini */
  .profile-images {
    max-width: 100%; /* Batasi lebar maksimum gambar */
    height: auto; /* Jaga rasio aspek */
    display: block; /* Pastikan gambar block-level */
    margin-left: auto; /* Coba pusatkan jika perlu */
    margin-right: auto;
  }

  ul {
    max-width: 100%; /* Buat daftar lebar penuh */
    padding-left: 15px; /* Sesuaikan padding kiri agar teks tidak terlalu mepet */
    padding-right: 5px;
    box-sizing: border-box;
  }

  li {
    padding-left: 0; /* Hapus padding kiri default jika menggunakan tanda ✓ */
    text-indent: -1.2em; /* Tarik teks ke kiri */
    margin-left: 1.2em; /* Beri ruang untuk indentasi */
  }
  li strong {
    display: inline; /* Biarkan judul hari sebaris jika memungkinkan */
    margin-right: 5px;
  }

  .header-images {
    gap: 10px; /* Kurangi jarak antar gambar di mobile */
    flex-wrap: wrap; /* Izinkan gambar membungkus jika perlu */
  }

  .price-highlight {
    max-width: 95%; /* Buat highlight harga lebih lebar */
    padding: 10px; /* Kurangi padding */
  }
  .price-highlight p {
    font-size: 1.1em; /* Sesuaikan font size */
  }
  .price-highlight strong {
    font-size: 1.3em; /* Sesuaikan font size */
  }

  .cta-button {
    padding: 15px 20px; /* Sesuaikan padding tombol utama */
    width: 90%; /* Buat tombol utama lebih lebar */
    max-width: 320px; /* Batasi lebar maksimum */
    font-size: 1em; /* Sesuaikan font size */
    box-sizing: border-box;
  }

  .timer {
    gap: 8px; /* Kurangi gap */
    flex-wrap: wrap; /* Izinkan timer membungkus jika perlu */
    justify-content: center;
    padding: 10px 0; /* Tambahkan sedikit padding vertikal */
  }
  .timer div {
    padding: 6px 8px; /* Kurangi padding */
    min-width: 45px; /* Kurangi min-width */
    margin-bottom: 5px; /* Tambahkan margin bawah jika membungkus */
  }
  .timer span {
    font-size: 0.7em; /* Perkecil font label timer */
  }
  .timer span:first-child {
    font-size: 1.4em; /* Sesuaikan font angka timer */
  }

  section.transformation .profile-image {
    max-width: 90%; /* Buat gambar transformasi responsif */
    height: auto; /* Pastikan rasio aspek terjaga */
  }

  .floating-cta-button {
    padding: 12px 15px; /* Sesuaikan padding untuk mobile */
    font-size: 0.95em; /* Sesuaikan font size */
    /* Pastikan centering diterapkan juga di mobile */
    left: 50%;
    transform: translateX(-50%);
    /* Sesuaikan max-width untuk mobile jika perlu */
    max-width: 85%;
    bottom: 10px; /* Sesuaikan jarak dari bawah */
    border-radius: 25px; /* Sesuaikan border-radius jika perlu */
  }

  footer {
    padding-bottom: 70px; /* Sesuaikan padding bawah footer agar tombol tidak menutupi */
    font-size: 0.8em; /* Perkecil font footer */
  }

  /* Hentikan animasi breathe di mobile jika terlalu mengganggu */
  /*
  .floating-cta-button {
    animation: none;
  }
  */
}