/* ==========================================================================
   layar.css — layar antrean TV ruang tunggu, tema putih bercahaya.
   Tiga kolom: portal video 3D | nomor dipanggil + riwayat | antrean per layanan.
   Ukuran memakai vh/vw agar tetap terbaca dari kursi tunggu terjauh.
   Tanpa backdrop-filter: peramban TV umumnya lemah, latar cukup putih pekat.
   ========================================================================== */

.halaman-layar { height: 100vh; overflow: hidden; }
.layar { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2vh; padding: 2vh 2.2vw 0; }

/* ---------------------------------------------------------------- kepala */
.layar__kepala {
  display: flex; align-items: center; gap: 2vw;
  padding: 1vh 1.2vw; border-radius: 1.2vw;
  background: rgba(255, 255, 255, .86);
  border: 1px solid #fff;
  box-shadow: 0 18px 40px -28px rgba(12, 70, 42, .5), 0 0 0 1px rgba(0, 166, 81, .07);
}
.layar__merek { display: flex; align-items: center; gap: 1vw; min-width: 0; }
.layar__merek img { width: clamp(42px, 3.3vw, 76px); height: auto; filter: drop-shadow(0 6px 10px rgba(0, 110, 55, .22)); }
.layar__merek div { display: grid; line-height: 1.2; min-width: 0; }
.layar__merek b { font-family: var(--font-judul); font-weight: 800; font-size: clamp(1rem, 1.4vw, 2rem); letter-spacing: -.015em; color: var(--hijau-tua); }
.layar__merek small { color: var(--emas-tua); font-weight: 700; font-size: clamp(.75rem, .92vw, 1.2rem); }
.layar__waktu { margin-left: auto; display: flex; align-items: center; gap: 1.2vw; }
.layar__waktu > div { display: grid; text-align: right; font-size: clamp(.8rem, 1.02vw, 1.4rem); font-weight: 650; line-height: 1.3; color: var(--tinta); }
.layar__waktu small { color: var(--tinta-3); font-weight: 600; }
.layar__waktu b {
  font-family: var(--font-tampil); font-weight: 800; font-size: clamp(1.8rem, 2.9vw, 4rem); line-height: 1;
  color: var(--hijau-tua); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.layar__kendali { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- isi: tiga kolom */
.layar__isi {
  container-type: size;
  display: grid; grid-template-columns: auto minmax(0, 1.12fr) minmax(0, 1fr); gap: 1.8vw; min-height: 0;
}
.layar__film { width: 28vw; width: min(calc(100cqh * 9 / 14), 31cqw); align-self: center; padding: 1vh 0; }
.portal--layar { --miring-y: 10deg; --miring-x: 3deg; }
/* lambang berdiri di sepertiga atas bingkai, jam layanan di tengah bawah: keduanya di dalam bingkai */
.portal--layar .portal__medali { top: 7%; translate: -50% 0; width: 42%; }
.portal--layar .portal__cip--bawah { bottom: 5%; font-size: clamp(.8rem, 1.5vh, 1.15rem); }
.portal--layar .portal__cip b { font-size: clamp(1rem, 2.1vh, 1.6rem); }
.portal--layar .portal__cip small { font-size: clamp(.68rem, 1.25vh, .95rem); }

.layar__tengah { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.6vh; min-height: 0; }

/* ---------------------------------------------------------------- nomor dipanggil */
.panggilan {
  --warna: var(--hijau);
  --warna-teks: #0F2A1E;
  --warna-teks: color-mix(in srgb, var(--warna) 68%, #0F2A1E);
  position: relative; overflow: hidden; min-height: 0; container-type: inline-size;
  display: grid; align-content: center; justify-items: center; text-align: center; gap: 1.4vh;
  padding: 3vh 2vw; border-radius: 2vw;
  background: #fff;
  background:
    radial-gradient(75% 60% at 50% 42%, color-mix(in srgb, var(--warna) 13%, #fff) 0%, #fff 72%),
    #fff;
  border: 2px solid var(--garis-2);
  border-color: color-mix(in srgb, var(--warna) 55%, #fff);
  box-shadow: 0 40px 80px -46px rgba(12, 70, 42, .55);
  box-shadow:
    0 0 0 .45vw color-mix(in srgb, var(--warna) 12%, transparent),
    0 44px 80px -44px color-mix(in srgb, var(--warna) 75%, transparent);
  transition: border-color .6s var(--kurva), box-shadow .6s var(--kurva);
}
.panggilan::before { content: ""; position: absolute; inset: 0; background: url("../img/songket.svg") 0 0 / 56px 56px; opacity: .05; }
.panggilan::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: .6vh; min-height: 4px;
  background: linear-gradient(90deg, var(--warna), #FFC400, var(--warna));
}
.panggilan > * { position: relative; }
.panggilan__label {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .35em 1em; border-radius: 999px;
  font-size: clamp(.95rem, 1.45vw, 2rem); font-weight: 750; color: var(--warna-teks);
  background: var(--permukaan-3);
  background: color-mix(in srgb, var(--warna) 12%, #fff);
}
.panggilan__nomor {
  font-family: var(--font-tampil); font-weight: 800; line-height: .95; letter-spacing: -.005em;
  font-size: clamp(4rem, 10vw, 15rem);
  font-size: clamp(3.4rem, 26cqi, 15rem);
  color: var(--warna-teks); font-variant-numeric: tabular-nums;
  text-shadow: 0 .014em 0 #F2C230, 0 .08em .22em rgba(12, 70, 42, .18);
}
.panggilan__layanan { font-family: var(--font-tampil); font-weight: 750; font-size: clamp(1.1rem, 1.85vw, 2.6rem); line-height: 1.2; color: var(--tinta); max-width: 26ch; }
.panggilan__lokasi {
  padding: .4em 1.1em; border-radius: 999px; font-weight: 750;
  font-size: clamp(.95rem, 1.35vw, 1.9rem); color: #fff; background: var(--warna-teks);
  box-shadow: 0 12px 26px -14px var(--warna-teks);
}
.panggilan__lokasi:empty { display: none; }
.panggilan--kosong .panggilan__nomor { color: var(--garis-3); text-shadow: none; }
.panggilan__riak {
  position: absolute; left: 50%; top: 46%; width: 34%; aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--warna); transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none;
}
.panggilan.baru .panggilan__nomor { animation: kedip-nomor .9s ease-in-out 3; }
.panggilan.baru .panggilan__riak { animation: riak 1.8s ease-out 2; }
@keyframes kedip-nomor { 50% { transform: scale(1.07); } }
@keyframes riak { 0% { opacity: .85; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }

/* ---------------------------------------------------------------- riwayat panggilan */
.riwayat {
  display: flex; align-items: center; gap: 1vw; min-width: 0;
  padding: 1.1vh 1vw; border-radius: 1.2vw;
  background: rgba(255, 255, 255, .88); border: 1px solid #fff;
  box-shadow: 0 16px 34px -26px rgba(12, 70, 42, .5), 0 0 0 1px rgba(0, 166, 81, .07);
}
.riwayat > span { color: var(--tinta-2); font-weight: 700; font-size: clamp(.72rem, .9vw, 1.15rem); white-space: nowrap; }
.riwayat ol {
  /* chip yang tidak muat satu baris turun ke baris kedua yang tersembunyi, bukan terpotong */
  list-style: none; margin: 0; padding: 0; min-width: 0; flex: 1;
  display: flex; flex-wrap: wrap; gap: 1em .7vw; overflow: hidden;
  font-size: clamp(.85rem, 1.15vw, 1.6rem); height: 2.6em;
}
.riwayat li {
  --warna: var(--hijau);
  flex: none; height: 2.6em; display: grid; align-content: center; padding: 0 .7em; border-radius: .5em; line-height: 1.15;
  background: #fff; border: 1px solid var(--garis-2); box-shadow: inset 3px 0 0 var(--warna);
}
.riwayat li b { font-family: var(--font-tampil); font-weight: 800; font-size: 1em; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.riwayat li small { color: var(--tinta-3); font-weight: 600; font-size: .62em; }
.riwayat li.kosong { box-shadow: none; color: var(--tinta-3); }

/* ---------------------------------------------------------------- antrean per layanan */
.antrean-layanan {
  min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.4vh;
  padding: 2.2vh 1.4vw; border-radius: 2vw;
  background: rgba(255, 255, 255, .9); border: 1px solid #fff;
  box-shadow: 0 30px 60px -40px rgba(12, 70, 42, .55), 0 0 0 1px rgba(0, 166, 81, .07);
}
.antrean-layanan__kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .3vh 12px; padding-bottom: 1vh; border-bottom: 1px solid var(--garis); }
.antrean-layanan__kepala h2 { font-family: var(--font-tampil); font-weight: 800; font-size: clamp(1rem, 1.45vw, 2rem); color: var(--hijau-tua); white-space: nowrap; }
.antrean-layanan__kepala p { flex: 1 0 100%; color: var(--tinta-2); font-weight: 650; font-size: clamp(.75rem, .92vw, 1.25rem); }
.antrean-layanan__kepala p:empty { display: none; }
.antrean-layanan__halaman {
  padding: .2em .7em; border-radius: 999px; font-weight: 750; font-size: clamp(.7rem, .85vw, 1.1rem); font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--hijau-tua); background: #EAF8F0; border: 1px solid rgba(0, 166, 81, .25);
}
.antrean-layanan__daftar { list-style: none; margin: 0; padding: 0; overflow: hidden; display: grid; align-content: start; gap: .75vh; min-height: 0; }
.antrean-layanan__daftar.ganti li { animation: halaman-masuk .6s var(--kurva) both; }
.antrean-layanan__daftar.ganti li:nth-child(2n) { animation-delay: 60ms; }
@keyframes halaman-masuk { from { opacity: 0; transform: translateY(10px); } }
.antrean-layanan__daftar li {
  --warna: var(--hijau);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9vw; align-items: center;
  padding: .8vh .7vw; border-radius: 1vw;
  background: var(--permukaan-2); border: 1px solid var(--garis);
}
.al-huruf {
  width: clamp(30px, 4.6vh, 58px); aspect-ratio: 1; display: grid; place-items: center; border-radius: .8vw;
  font-family: var(--font-tampil); font-weight: 800; font-size: clamp(.95rem, 2.3vh, 1.9rem);
  color: var(--tinta); background: var(--permukaan-3); border: 1px solid var(--garis-2);
  color: color-mix(in srgb, var(--warna) 66%, #0F2A1E);
  background: color-mix(in srgb, var(--warna) 15%, #fff);
  border-color: color-mix(in srgb, var(--warna) 42%, #fff);
}
.al-teks { display: grid; min-width: 0; line-height: 1.22; }
.al-teks b {
  font-weight: 750; font-size: clamp(.8rem, 1.85vh, 1.45rem); color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.al-teks small { color: var(--tinta-3); font-weight: 600; font-size: clamp(.66rem, 1.4vh, 1.05rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-angka { display: grid; justify-items: end; line-height: 1.05; }
.al-angka b {
  font-family: var(--font-tampil); font-weight: 800; font-size: clamp(1.1rem, 3.1vh, 2.5rem); font-variant-numeric: tabular-nums;
  color: var(--tinta); color: color-mix(in srgb, var(--warna) 62%, #0F2A1E);
}
.al-angka small { color: var(--tinta-3); font-weight: 600; font-size: clamp(.62rem, 1.2vh, .95rem); }

/* ---------------------------------------------------------------- running text */
.dermaga--layar { position: relative; left: auto; bottom: auto; transform: none; width: 100%; margin: 6px 0 2vh; }
.dermaga--layar .dermaga__slab { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .96); transform: none; }
.dermaga--layar .dermaga__slab { height: clamp(52px, 5.6vh, 82px); grid-template-columns: auto minmax(0, 1fr); }
.dermaga--layar .dermaga__jalur { font-size: clamp(1rem, 1.35vw, 1.9rem); }

/* ---------------------------------------------------------------- layar tegak / 4:3 */
@media (max-aspect-ratio: 4/3) {
  .halaman-layar { height: auto; overflow: auto; }
  .layar { height: auto; min-height: 100vh; }
  .layar__kepala { flex-wrap: wrap; }
  .layar__isi { container-type: normal; grid-template-columns: minmax(0, 1fr); }
  .layar__film { display: none; }
  .panggilan { min-height: 40vh; }
}
@media (prefers-reduced-motion: reduce) {
  .panggilan.baru .panggilan__nomor, .panggilan.baru .panggilan__riak, .antrean-layanan__daftar.ganti li { animation: none; }
}