/* assets/css/components.css */

/* ===============================
   HIGHLIGHT & TEXT UTILITIES
================================ */
.highlight {
  color: var(--color-primary);
}

mark {
  background: #fff2b3;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ===============================
   ICON LIST (STABLE MOBILE)
================================ */
.list-icon {
  margin: 0px 0;
  padding: 0;
}

/* ITEM */
.list-icon li {
  position: relative;
  padding-left: 34px;     /* ruang untuk icon */
  margin-bottom: 0px;
  line-height: 1.45;
}

/* ICON BASE */
.list-icon li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ===============================
   LIST BENAR (CHECK)
   icon: /icon/check.png
================================ */
.list-benar li::before {
  background-image: url("../../icon/check.png");
}

/* ===============================
   LIST SALAH (CROSS)
   icon: /icon/cross.png
================================ */
.list-salah li::before {
  background-image: url("../../icon/cross.png");
}

/* ===============================
   BUTTONS
================================ */
.btn-primary,
.btn-secondary {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-align: center;
  transition: all .2s ease;
}

.btn-primary {
  background: linear-gradient(
    180deg,
    #2a9d66,
    var(--color-primary-dark)
  );
  color: #fff;
}

.btn-primary:hover {
  opacity: .9;
}

.btn-secondary {
  background: #fff;
  color: var(--color-primary-dark);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ===============================
   NAVIGATION STATES
================================ */
.main-nav a {
  transition: background .2s ease, color .2s ease;
}

.main-nav a.active {
  background: var(--color-primary);
  color: #fff;
}

/* ===============================
   FOOTER TEXT
================================ */
.site-footer p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 12px;
}

/* ===============================
   CLICK FEEDBACK (JS)
================================ */
.btn-primary.clicked,
.btn-secondary.clicked {
  transform: scale(0.97);
}

/* ===============================
   SMALL UTILITIES
================================ */
.text-center {
  text-align: center;
}

.mt-24 {
  margin-top: 24px;
}

.mb-24 {
  margin-bottom: 24