/* ============================================================
 *  MEDIA.CSS  —  override minimal di atas jadipatriot.css & lari.css
 *  Untuk formulir kehadiran media (path: /media)
 * ============================================================ */

/* Hero — sedikit lebih ringkas dari lari (tanpa pulse besar) */
.media-hero { padding-top: 32px; padding-bottom: 48px; }
.media-hero__inner { gap: 28px; }
.media-hero .jp-hero__title-script { font-style: italic; }

/* Event card — variant ungu kebiruan supaya beda dari lari yg merah */
.media-event-card.lari-event-card {
  border-color: #c7d2fe;
  background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
}
.media-event-card .lari-event-card__head {
  border-bottom-color: #c7d2fe;
}
.media-event-card .lari-event-card__brand {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

/* Perks list ungu kebiruan */
.media-perks .lari-perks__icon {
  background: #ede9fe;
  color: #5b21b6;
}

/* Form card head — copy ramah press */
.media-form-card__lead {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: #4b5563;
  line-height: 1.5;
}

/* Submit button — variant ungu kebiruan */
.media-form-card .lari-submit {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 8px 22px -8px rgba(124, 58, 237, 0.5);
}
.media-form-card .lari-submit:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  box-shadow: 0 10px 26px -8px rgba(124, 58, 237, 0.65);
}

/* Success card — pill row ringkasan */
.media-success__card {
  text-align: left;
}
.media-success__card .jp-success__title,
.media-success__card .jp-success__lead {
  text-align: center;
}
.media-success__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.media-success__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}
.media-success__row span {
  color: #64748b;
  font-weight: 500;
}
.media-success__row strong {
  color: #0f172a;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

@media (max-width: 720px) {
  .media-hero { padding-top: 20px; padding-bottom: 30px; }
  .media-event-card.lari-event-card .lari-event-card__grid {
    grid-template-columns: 1fr 1fr;
  }
}