/* Bismillaahirrohmanirrohim
   pemilu-hasil.css -- hasil Pemilu Online untuk umum (pemilu.php), awalan qc (quick count).
   Gaya papan hitung cepat televisi: pita LANGSUNG, angka persen besar, batang perbandingan
   dengan garis 50%. Memakai token warna dari belajar.css, jadi belajar.css dimuat lebih dulu. */
.qc {
  --qc-1: #c2410c;
  --qc-2: #1d4ed8;
  --qc-3: #15803d;
  --qc-4: #7e22ce;
  --qc-merah: #dc2626;
}
html.dark .qc { --qc-1: #fb923c; --qc-2: #60a5fa; --qc-3: #4ade80; --qc-4: #c084fc; --qc-merah: #f87171; }
.qc-warna-1 { --qc-c: var(--qc-1); }
.qc-warna-2 { --qc-c: var(--qc-2); }
.qc-warna-3 { --qc-c: var(--qc-3); }
.qc-warna-4 { --qc-c: var(--qc-4); }
.qc-wadah { max-width: 1040px; }

/* ---------- pita siaran ---------- */
.qc-pita {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 12px 12px 0 0;
  background: #111827; color: #f9fafb;
}
.qc-langsung {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 6px;
  background: var(--qc-merah); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.qc[data-status="selesai"] .qc-langsung { background: #f9fafb; color: #111827; }
.qc-titik { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: qc-kedip 1.4s ease-in-out infinite; }
.qc[data-status="selesai"] .qc-titik { animation: none; }
@keyframes qc-kedip { 50% { opacity: .25; } }
.qc-pita-judul { font-weight: 700; font-size: 15px; letter-spacing: .01em; text-transform: uppercase; }
.qc-putus { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 10px; border-radius: 6px; background: #fbbf24; color: #422006; font-size: 12px; font-weight: 700; }
.qc-putus[hidden] { display: none; }
.qc-putus:not([hidden]) + .qc-pita-jam { margin-left: 0; }
.qc.is-putus .qc-langsung { background: #6b7280; }
.qc.is-putus .qc-titik { animation: none; }
.qc-pita-jam { margin-left: auto; font-size: 13px; color: #9ca3af; }
.qc-pita-jam b { color: #f9fafb; font-variant-numeric: tabular-nums; }

/* ---------- data masuk ---------- */
.qc-masuk {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "angka bar" "angka info";
  gap: 6px 24px; align-items: center; margin-bottom: 16px; padding: 16px 18px;
  border: 1px solid var(--blj-garis); border-top: 0; border-radius: 0 0 12px 12px; background: var(--blj-latar);
}
.qc-masuk-angka { grid-area: angka; }
.qc-masuk-angka strong { display: block; font-size: 34px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.qc-masuk-bar { grid-area: bar; height: 10px; border-radius: 99px; background: var(--blj-krem); border: 1px solid var(--blj-garis); overflow: hidden; }
.qc-masuk-bar span { display: block; height: 100%; background: var(--blj-aksen); border-radius: 99px; transition: width .9s ease; }
.qc-masuk-info { grid-area: info; display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--blj-redup); }
.qc-status { font-weight: 600; }
.qc-status.is-berlangsung { color: var(--blj-aksen); }
.qc-status.is-belum { color: var(--blj-jingga); }

/* ---------- kartu kandidat ---------- */
.qc-grid { display: grid; grid-template-columns: repeat(var(--qc-kolom, 2), minmax(0, 1fr)); gap: 16px; }
.qc-calon {
  position: relative; overflow: hidden; border: 1px solid var(--blj-garis); border-radius: 14px; background: var(--blj-latar);
  border-top: 6px solid var(--qc-c); transition: box-shadow .3s, transform .3s;
}
.qc-calon.is-unggul { box-shadow: 0 0 0 2px var(--qc-c), 0 12px 28px -12px color-mix(in srgb, var(--qc-c) 55%, transparent); }
.qc-foto { position: relative; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--qc-c) 12%, var(--blj-latar)); }
.qc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.qc-inisial { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; font-weight: 800; color: color-mix(in srgb, var(--qc-c) 55%, var(--blj-latar)); }
.qc-nomor {
  position: absolute; z-index: 2; left: 0; top: 0; padding: 6px 14px 8px; border-radius: 0 0 12px 0;
  background: var(--qc-c); color: #fff; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.qc-mahkota {
  position: absolute; z-index: 2; right: 10px; top: 10px; display: none; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 99px; background: #fbbf24; color: #422006; font-size: 12px; font-weight: 700;
}
.qc-calon.is-unggul .qc-mahkota { display: inline-flex; }
.qc-isi { padding: 14px 16px 16px; }
.qc-nama { font-size: 16px; font-weight: 700; line-height: 1.3; }
.qc-wakil { margin-top: 2px; font-size: 13px; color: var(--blj-redup); }
.qc-persen { margin-top: 10px; font-size: 44px; line-height: 1; font-weight: 800; color: var(--qc-c); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.qc-persen small { margin-left: 2px; font-size: 22px; font-weight: 700; }
.qc-suara { margin-top: 6px; font-size: 14px; color: var(--blj-redup); }
.qc-suara-angka { font-weight: 700; color: var(--blj-teks); font-variant-numeric: tabular-nums; }

/* ---------- batang perbandingan ---------- */
.qc-banding { position: relative; display: flex; height: 36px; margin-top: 18px; border-radius: 10px; overflow: hidden; background: var(--blj-krem); }
.qc-ruas {
  display: flex; align-items: center; justify-content: center; min-width: 0; flex: 0 0 auto; overflow: hidden;
  background: var(--qc-c); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; transition: flex-basis .9s ease;
}
html.dark .qc-ruas { color: #0f172a; }
.qc-tengah { position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 2px dashed rgba(255, 255, 255, .9); }
.qc-catatan { margin-top: 8px; font-size: 13px; color: var(--blj-redup); text-align: center; }
.qc-catatan b { color: var(--blj-teks); font-variant-numeric: tabular-nums; }

/* ---------- partisipasi per kelas ---------- */
.qc-panel { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--blj-garis); border-radius: 12px; background: var(--blj-latar); }
.qc-panel-kepala { margin-bottom: 12px; }
.qc-kelas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.qc-kelas-baris { display: grid; grid-template-columns: minmax(90px, 170px) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.qc-kelas-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.qc-kelas-bar { height: 8px; border-radius: 99px; background: var(--blj-krem); border: 1px solid var(--blj-garis); overflow: hidden; }
.qc-kelas-bar span { display: block; height: 100%; background: var(--blj-aksen); }
.qc-kelas-angka { color: var(--blj-redup); font-variant-numeric: tabular-nums; }

.qc-kaki { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0; font-size: 13px; color: var(--blj-redup); text-align: center; }

/* ---------- belum ada pemilu ---------- */
.qc-kosong { padding: 56px 16px; text-align: center; border: 1px dashed var(--blj-garis); border-radius: 14px; }
.qc-kosong i { font-size: 40px; color: var(--blj-aksen); }
.qc-kosong h1 { margin: 8px 0 4px; font-size: 22px; font-weight: 700; }
.qc-kosong p { margin: 0; color: var(--blj-redup); }

/* ---------- layar sempit ---------- */
@media (max-width: 767px) {
  .qc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .qc-persen { font-size: 32px; }
  .qc-persen small { font-size: 16px; }
  .qc-nama { font-size: 14px; }
  .qc-isi { padding: 10px 12px 12px; }
  .qc-nomor { font-size: 17px; padding: 4px 10px 6px; }
  .qc-masuk { grid-template-columns: 1fr; grid-template-areas: "angka" "bar" "info"; }
  .qc-kelas { grid-template-columns: 1fr; }
  .qc-pita-jam { margin-left: 0; width: 100%; }
}