/**
 * =============================================================================
 * SECTION KONDISIONAL: PROMO, TESTIMONI & POPUP (css/sections/extra.css)
 * =============================================================================
 */

/* --------------------------------------------------------------------------
   11. SECTION 7, 8, 9: Promo, Testimoni, Penghematan (Kondisional)
   -------------------------------------------------------------------------- */
.promos-grid, .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.promo-card, .testimonial-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: 0 4px 12px var(--color-shadow);
}

.promo-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.promo-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.promo-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.testimonial-quote {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.testimonial-author {
  font-weight: 800;
}

.testimonial-model {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.section-conditional {
  display: none;
}

.section-conditional.is-visible {
  display: block;
}