/**
 * Halaman sertifikat -- gaya khusus.
 *
 * Token warna, tipografi, .card, .btn, .field, .toast, dan footer diwarisi dari
 * /style.css supaya halaman ini satu nafas dengan halaman pendaftaran. Di sini
 * hanya yang belum ada di sana.
 */

.sertifikat-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============ HEADER ============ */
.cert-header {
  position: relative;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-subtle);
  padding: 24px 0 26px;
}

.cert-header-content {
  text-align: center;
}

.cert-brand {
  margin-top: 14px;
}

.cert-brand .brand-script {
  font-size: 54px;
}

.cert-brand .brand-serif {
  font-size: 26px;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.cert-tagline {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto;
}

/* ============ MAIN ============ */
.cert-main {
  flex: 1;
  padding-top: 26px;
  padding-bottom: 34px;
}

.cert-card {
  text-align: center;
}

.cert-card-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 800;
  color: var(--heading);
  line-height: 1.3;
  margin-bottom: 10px;
}

.cert-card-text {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
}

.cert-card-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--heading-2);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  line-height: 1.55;
}

/* ---- Status memuat ---- */
.cert-spinner {
  width: 34px;
  height: 34px;
  margin: 6px auto 16px;
  border: 3px solid var(--navy-100);
  border-top-color: var(--gold-500);
  border-radius: 50%;
  animation: cert-spin 0.8s linear infinite;
}

@keyframes cert-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cert-spinner { animation-duration: 2.4s; }
}

.cert-loading-text {
  font-size: 14px;
  color: var(--muted);
}

/* ---- Ikon status ---- */
.cert-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-icon svg {
  width: 28px;
  height: 28px;
}

.cert-icon-wait {
  background: var(--navy-50);
  color: var(--heading-2);
  border: 1px solid var(--navy-100);
}

.cert-icon-warn {
  background: var(--gold-100);
  color: var(--gold-600);
  border: 1px solid var(--gold-200);
}

/* ---- Form nomor WhatsApp ---- */
#cert-form {
  margin-top: 18px;
  text-align: left;
}

#cert-form .field {
  margin-bottom: 16px;
}

/* ---- Kontak panitia ---- */
.cert-contacts {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: 10px;
}

.cert-contacts-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--heading-2);
  margin-bottom: 2px;
}

.btn-wa-outline {
  background: var(--surface);
  color: var(--heading);
  border: 1.5px solid var(--wa);
  box-shadow: none;
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0.2px;
}

.btn-wa-outline:hover {
  background: var(--wa-soft);
  color: var(--heading);
  box-shadow: none;
}

.btn-ghost {
  background: var(--surface-sunk);
  color: var(--heading-2);
  border: 1.5px solid var(--border-strong);
  box-shadow: none;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 700;
}

.btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--heading);
  box-shadow: none;
}

#btn-retry {
  margin-top: 16px;
}

/* ---- Sertifikat siap ---- */
.cert-card-ready {
  border-color: var(--gold-200);
  background: linear-gradient(180deg, var(--gold-50), var(--surface) 70%);
}

.cert-greeting {
  font-size: 16px;
  color: var(--heading);
  line-height: 1.5;
  margin-bottom: 8px;
}

.cert-greeting strong {
  font-weight: 800;
}

.cert-meta {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
}

.cert-meta > div {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.cert-meta dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.cert-meta dd {
  font-size: 14px;
  font-weight: 700;
  color: var(--heading);
  word-break: break-word;
}

/* ---- Pratinjau sertifikat ---- */
.cert-preview-card {
  padding: 18px 16px 22px;
}

.cert-preview-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  line-height: 0;
}

.cert-preview-frame canvas {
  display: block;
  width: 100%;
  height: auto;
}

.cert-preview-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.cert-actions {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

/* ---- Tautan kembali ---- */
.cert-back {
  text-align: center;
  margin-top: 4px;
}

.cert-back a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--heading-2);
  text-decoration: none;
}

.cert-back a:hover {
  color: var(--gold-600);
  text-decoration: underline;
}

@media (max-width: 400px) {
  .cert-brand .brand-script { font-size: 46px; }
  .cert-brand .brand-serif { font-size: 21px; letter-spacing: 2px; }
  .cert-meta { grid-template-columns: 1fr; }
}