:root {
  --primary:       #386bfd;
  --primary-dark:  #1e40af;
  --primary-light: #e0e7ff;
  --bg-light:      #f3f4ff;
}

* {
  margin: 0; padding: 0; box-sizing: border-box;
}

body {
  background-color: #f4f5ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110vh;
  margin: 0;
  font-family: 'Century Gothic', sans-serif;
}

/* Ganti aturan .card lama dengan ini */
/* Card umum di halaman lain (misalnya landing page) */
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  width:95%;          /* fleksibel untuk halaman lain */
  max-width: 600px;    /* tapi tidak lebih dari 600px */
  margin: 1rem auto;   /* center horizontally */
  display: flex;
  flex-direction: column;
}

/* Card khusus di status.html agar tetap seperti semula */
.status-card {
  font-family: 'Century Gothic', sans-serif;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  width: 360px;         /* Tetap dengan lebar 360px */
  margin: 1rem auto;    /* Center horizontal dan vertical */
  display: flex;
  flex-direction: column;
}

/* Header Logo */
.card-header {
  display: flex; justify-content: center; align-items: center;
  background: #fff;
  padding: 1rem;
}

.landing-card .card-header {
  background: var(--primary-light);
}

.logo { width: 80px; }
.logo-small { width: 60px; }

/* Body */
.card-body {
  padding: 1.5rem 2rem;
  text-align: center;
}

h1 {
  font-size: 1.25rem;
  color: var(--primary-dark);
  margin-bottom: 1rem;
  line-height: 1.4;
}
h2 {
  font-size: 1.5rem;
  color: var(--primary-dark);
  margin-bottom: 1rem;
}

/* Pesan sambutan */
.message {
  background: var(--primary-light);
  color: #555;
  padding: 1rem;
  border-left: 4px solid var(--primary);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
  text-align: left;
}

/* Countdown */
.countdown {
  background: #fff;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.countdown h3 {
  font-size: 1rem;
  color: var(--primary-dark);
}
.timer {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary);
  margin-top: 0.5rem;
  opacity: 0;
  animation: fadeIn 0.8s forwards;
}

/* Form & Input */
.status-card label {
  display: block;
  text-align: left;
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 0.25rem;
}
.status-card input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Tombol umum */
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s, transform 0.2s;
}
.btn:hover {
  background: var(--primary-dark);
  transform: scale(1.05);
}

/* Login khusus */
.login-btn {
  display: none;
  margin-top: 1rem;
}

/* Tombol cek & kembali full-width */
.check-btn, .back-btn {
  width: 100%;
  margin-bottom: 1rem;
}
.back-btn {
  background: #ccc;
  color: #333;
}
.back-btn:hover {
  background: #b3b3b3;
}

/* Hasil */
.result {
  text-align: left;
}
.status {
  text-align: center;
  padding: 0.75rem;
  border-radius: 6px;
  font-weight: bold;
  margin: 0.5rem 0;
}
.status.passed { background: #dbf5e5; color: #2f8f4e; }
.status.failed { background: #fce8e6; color: #b3261e; }

/* Pesan lanjutan */
.message-passed, .message-failed {
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.message-passed {
  background: #e6f4ea;
  border-left: 4px solid #2f8f4e;
  color: #2f8f4e;
}
.message-failed {
  background: #fef7e7;
  border-left: 4px solid #b3261e;
  color: #b3261e;
}

/* Animasi fadeIn */
@keyframes fadeIn {
  to { opacity: 1; }
}
/* Styling untuk garis bawah */
.underline {
  border: 0;
  border-top: 1px solid #9a9e9a; /* Warna hijau untuk garis */
  margin: 10px 0;
}

/* Sesuaikan styling status LULUS atau TIDAK LULUS */
.status.passed {
  color: green;
  font-weight: bold;
}

.status.failed {
  color: red;
  font-weight: bold;
}

.input-center {
  text-align: center;
}
.input-center::placeholder {
  text-align: center;
}