/* ===== FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ===== RESET GLOBAL ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #f9fafb; /* putih lembut */
  color: #1f2937;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ===== CHECKOUT 8 ===== */
#chekout-8 {
  max-width: 920px;
  margin: 60px auto;
  padding: 40px 32px;
  background-color: #ffffff; /* putih bersih */
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.08);
}

#chekout-8 h2,
#chekout-8 h3,
#chekout-8 h4 {
  text-align: center;
  margin-bottom: 25px;
  font-weight: 700;
}

#chekout-8 hr {
  border: none;
  border-top: 1px dashed #e5e7eb;
  margin: 28px 0;
}

/* Checkout Item */
.checkout-item p {
  font-size: 16px;
  margin-bottom: 6px;
}

/* List fitur & bonus */
#chekout-8 ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

#chekout-8 ul li {
  font-size: 15px;
  margin-bottom: 12px;
  line-height: 1.8;
  position: relative;
  padding-left: 24px;
}

#chekout-8 ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #2563eb;
}

/* Label & Input */
#chekout-8 label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  font-size: 15px;
}

#chekout-8 input[type="text"],
#chekout-8 input[type="tel"],
#chekout-8 input[type="email"],
#chekout-8 select {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background-color: #f3f4f6;
  font-size: 15px;
  font-weight: 500;
  color: #111827;
  transition: 0.3s all;
}

#chekout-8 input:focus,
#chekout-8 select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
}

/* Agreement Checkbox */
.agreement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 22px;
}

.agreement a {
  color: #2563eb;
  text-decoration: underline;
}

/* Tombol Kirim Data */
#chekout-8 button {
  width: 100%;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: 0.3s all;
}

#chekout-8 button:hover {
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
  transform: translateY(-2px);
}

/* Harga & Total */
#chekout-8 p strong {
  font-weight: 700;
}

#chekout-8 p:nth-of-type(6),
#chekout-8 p:nth-of-type(10) {
  font-size: 18px;
  color: #ef4444; /* harga normal */
}

#chekout-8 p:nth-of-type(10) {
  color: #2563eb; /* total bayar */
  font-size: 20px;
  font-weight: 700;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  #chekout-8 {
    padding: 32px 24px;
    margin: 40px 14px;
  }
}

@media (max-width: 480px) {
  #chekout-8 h2,
  #chekout-8 h3,
  #chekout-8 h4 {
    font-size: 22px;
  }
  #chekout-8 input,
  #chekout-8 select {
    padding: 12px 14px;
    font-size: 14px;
  }
  #chekout-8 button {
    font-size: 16px;
    padding: 14px 0;
  }
}