/* Absensi BISC: design tokens drawn from the BISC logo and brochures.
   Colour carries meaning: blue = on time, orange = late, red = absent, green = connected, yellow = live. */
:root {
  --langit: #1678C9;        /* logo blue: brand, on time */
  --langit-terang: #4FA3E6;
  --langit-pucat: #E3F0FC;
  --samudra: #173F7A;       /* navy: ink, top bar */
  --samudra-dalam: #0E2A57;
  --kertas: #F5F9FE;        /* paper background */
  --putih: #FFFFFF;
  --daun: #6EA53B;          /* logo green: connected */
  --daun-muda: #8DC63F;
  --jingga: #F28C28;        /* late */
  --jingga-tinta: #A9520A;  /* late, as text */
  --jingga-pucat: #FFF0E0;
  --merah: #B5303A;         /* absent */
  --merah-pucat: #FBE7E9;
  --mentari: #FFC72C;       /* live highlight */
  --tinta: #173F7A;
  --tinta-2: #4A6488;
  --tinta-3: #7A8FAD;
  --garis: #D6E3F2;
  --garis-kuat: #BBD0E8;

  --display: "Baloo 2", "Trebuchet MS", sans-serif;
  --body: "Quicksand", "Segoe UI", sans-serif;
  --script: "Yellowtail", cursive;

  --r-papan: 22px;
  --r-kecil: 12px;
  --gap: clamp(14px, 2.2vw, 22px);
  --maks: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--kertas);
  background-image:
    linear-gradient(rgba(22, 120, 201, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 120, 201, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 100vh;
}
a { color: var(--langit); }
a:hover { color: var(--samudra); }
:focus-visible { outline: 3px solid var(--mentari); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; color: var(--samudra); }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0; }
.angka { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }
.redup { color: var(--tinta-2); }
.sangat-redup { color: var(--tinta-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar with bunting ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--samudra);
  color: var(--putih);
}
.topbar::after {          /* bunting garland, as on the BISC banners */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='14'%3E%3Cpath d='M0 0h22L11 14z' fill='%231678C9'/%3E%3Cpath d='M22 0h22L33 14z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
  pointer-events: none;
}
.topbar-inner {
  max-width: var(--maks); margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 10px clamp(14px, 3vw, 28px);
}
.merek { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.merek img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.merek b { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: .2px; line-height: 1; }
.merek small { display: block; font-size: 11.5px; opacity: .78; font-weight: 600; margin-top: 2px; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: rgba(255,255,255,.82); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  padding: 6px 14px; border-radius: 999px;
}
.nav a:hover { color: var(--putih); background: rgba(255,255,255,.1); }
.nav a[aria-current="page"] { background: var(--putih); color: var(--samudra); }
.nav a .titik-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mentari); margin-left: 6px; vertical-align: 2px; }
.sambungan { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: .85; white-space: nowrap; }
.sambungan i { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); }
.sambungan[data-on="1"] i { background: var(--daun-muda); box-shadow: 0 0 0 4px rgba(141,198,63,.25); }
.keluar button {
  background: none; border: 1.5px solid rgba(255,255,255,.35); color: var(--putih);
  border-radius: 999px; padding: 5px 12px; font: 600 13px var(--body); cursor: pointer;
}
.keluar button:hover { border-color: var(--putih); }

@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; gap: 6px 10px; padding: 8px 14px 6px; }
  .merek img { width: 32px; height: 32px; }
  .merek b { font-size: 18px; }
  .merek small { display: none; }
  .sambungan { margin-left: auto; }
  .sambungan > span { display: none; }
  .keluar button { padding: 4px 10px; }
  .nav { order: 3; width: 100%; margin: 0 -4px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 15px; padding: 5px 12px; white-space: nowrap; }
  main.halaman { padding-top: 28px; }
  .panggung { min-height: calc(100vh - 96px); }
}
main.halaman { max-width: var(--maks); margin: 0 auto; padding: 36px clamp(14px, 3vw, 28px) 64px; }

/* ---------- boards (panels) ---------- */
.papan {
  background: var(--putih);
  border: 1.5px solid var(--garis);
  border-radius: var(--r-papan);
  box-shadow: 0 3px 0 var(--garis);
  padding: clamp(16px, 2.4vw, 24px);
}
.papan-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.papan-kepala p { font-size: 13.5px; color: var(--tinta-2); }
.kisi { display: grid; gap: var(--gap); }
.kisi-2 { grid-template-columns: 1.65fr 1fr; }
.kisi-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .kisi-2, .kisi-3 { grid-template-columns: 1fr; } }

/* ---------- buttons, inputs ---------- */
.tombol {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 15px var(--display); letter-spacing: .2px;
  padding: 9px 18px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--langit); color: var(--putih);
  box-shadow: 0 3px 0 var(--samudra);
}
.tombol:hover { background: #136BB4; color: var(--putih); }
.tombol:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--samudra); }
.tombol.kedua { background: var(--putih); color: var(--samudra); border: 1.5px solid var(--garis-kuat); box-shadow: 0 3px 0 var(--garis); }
.tombol.kedua:hover { border-color: var(--langit); }
.tombol[disabled] { opacity: .55; cursor: wait; }
label.isian { display: grid; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--tinta-2); }
input[type=text], input[type=password], input[type=search], input[type=time], input[type=number] {
  font: 600 15px var(--body); color: var(--tinta);
  padding: 10px 14px; border-radius: var(--r-kecil);
  border: 1.5px solid var(--garis-kuat); background: var(--putih); width: 100%;
}
input:focus { outline: none; border-color: var(--langit); box-shadow: 0 0 0 4px var(--langit-pucat); }

/* ---------- status chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px;
  white-space: nowrap; background: #EEF2F7; color: var(--tinta-2);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .9; }
.chip.ontime { background: var(--langit-pucat); color: #0F5FA3; }
.chip.late { background: var(--jingga-pucat); color: var(--jingga-tinta); }
.chip.absent { background: var(--merah-pucat); color: var(--merah); }
.chip.live { background: #E9F5DC; color: #3F6F18; }
.chip.off, .chip.holiday, .chip.none, .chip.pending, .chip.disabled { background: #EEF2F7; color: var(--tinta-2); }
.chip.warn { background: #FFF6D9; color: #8A6400; }

/* ---------- avatar medallion ---------- */
.medali {
  --c: var(--langit);
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 15px var(--display); color: var(--putih); letter-spacing: .5px;
  background: var(--c);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.14);
}
.medali[data-hue="1"] { --c: #2E8B6E; }
.medali[data-hue="2"] { --c: #6A54B8; }
.medali[data-hue="3"] { --c: #C2602A; }
.medali[data-hue="4"] { --c: #1F5FA8; }
.medali[data-hue="5"] { --c: #A23E77; }

/* ---------- hero (sky) ---------- */
.langit {
  position: relative; overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #1269B6 0%, var(--langit) 45%, var(--langit-terang) 100%);
  color: var(--putih);
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px) clamp(84px, 9vw, 110px);
  box-shadow: 0 4px 0 var(--samudra);
  isolation: isolate;
}
.langit .lukisan { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.langit .lukisan svg { width: 100%; height: 100%; display: block; }
.sapa { font-family: var(--script); font-size: clamp(26px, 3.4vw, 36px); line-height: 1; color: #FFF6D6; }
.tanggal { margin-top: 10px; font-weight: 700; font-size: 14.5px; opacity: .92; }
.tanggal span { display: block; font-weight: 600; opacity: .8; font-size: 13.5px; }
.judul-besar {
  margin-top: 18px; max-width: 760px;
  font-family: var(--display); font-weight: 700; color: var(--putih);
  font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12;
}
.judul-besar .n { font-size: 1.9em; font-weight: 800; color: var(--mentari); line-height: .9; text-shadow: 0 3px 0 rgba(14,42,87,.35); }
.rincian { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 700; font-size: 15px; }
.rincian span { display: inline-flex; align-items: center; gap: 8px; }
.rincian i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }

/* ---------- buildings (device status) ---------- */
.deret-gedung { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: calc(var(--gap) * -2.6); position: relative; z-index: 2; padding: 0 clamp(10px, 3vw, 36px); }
@media (max-width: 760px) { .deret-gedung { grid-template-columns: 1fr; margin-top: 18px; padding: 0; } }
.gedung {
  display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit;
  background: var(--putih); border: 1.5px solid var(--garis); border-radius: 18px;
  box-shadow: 0 3px 0 var(--garis); padding: 12px 14px;
}
.gedung:hover { border-color: var(--langit); }
.gedung svg { width: 58px; height: 52px; flex: none; }
.gedung b { font-family: var(--display); font-size: 17px; display: block; line-height: 1.1; }
.gedung small { color: var(--tinta-2); font-size: 12.5px; font-weight: 600; }
.lampu { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--tinta-3); margin-right: 6px; vertical-align: 0; }
.lampu.live { background: var(--daun-muda); box-shadow: 0 0 0 4px rgba(141,198,63,.22); }
.lampu.syncing, .lampu.connecting { background: var(--mentari); animation: kedip 1.2s infinite; }
.lampu.offline { background: var(--merah); }
@keyframes kedip { 50% { opacity: .35; } }

/* ---------- lists ---------- */
.daftar { list-style: none; margin: 0; padding: 0; }
.daftar li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--garis); }
.daftar li:first-child { border-top: 0; }
.daftar .nama { font-weight: 700; line-height: 1.25; flex: 1; min-width: 0; }
.daftar .nama a { color: var(--samudra); text-decoration: none; }
.daftar .nama a:hover { color: var(--langit); text-decoration: underline; }
.daftar .nama small { display: block; color: var(--tinta-3); font-weight: 600; font-size: 12.5px; }
.daftar .jam { font-family: var(--display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.kosong { color: var(--tinta-2); font-size: 14px; padding: 6px 0; }

/* ---------- charts ---------- */
.grafik { position: relative; }
.grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafik .sumbu text { font: 600 11.5px var(--body); fill: var(--tinta-3); }
.grafik .kisi-garis line { stroke: #E8EFF8; stroke-width: 1; }
.grafik .batas line { stroke: var(--samudra); stroke-width: 1.5; stroke-dasharray: 4 4; }
.grafik .batas text { font: 700 11.5px var(--body); fill: var(--samudra); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--samudra-dalam); color: var(--putih);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  padding: 8px 11px; border-radius: 10px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s;
}
.tip b { font-family: var(--display); font-size: 14px; display: block; }
.tip.on { opacity: 1; }
.tabel-data { margin-top: 10px; font-size: 13px; }
.tabel-data summary { cursor: pointer; color: var(--langit); font-weight: 700; }
.tabel-data table { border-collapse: collapse; margin-top: 8px; width: 100%; }
.tabel-data td, .tabel-data th { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--garis); }

/* ---------- employees table ---------- */
.saring { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 16px; }
.saring input[type=search] { max-width: 340px; }
.segmen { display: inline-flex; background: var(--putih); border: 1.5px solid var(--garis-kuat); border-radius: 999px; padding: 3px; }
.segmen button { border: 0; background: none; font: 700 13.5px var(--body); color: var(--tinta-2); padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.segmen button[aria-pressed="true"] { background: var(--samudra); color: var(--putih); }
.segmen button .n { opacity: .75; margin-left: 4px; }
.tabel-pegawai { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabel-pegawai th {
  text-align: left; font: 700 13px var(--body); color: var(--tinta-2);
  padding: 10px 12px; border-bottom: 1.5px solid var(--garis); background: var(--putih); position: sticky; top: 72px; z-index: 1;
}
.tabel-pegawai th button { all: unset; cursor: pointer; }
.tabel-pegawai th button:focus-visible { outline: 3px solid var(--mentari); }
.tabel-pegawai td { padding: 10px 12px; border-bottom: 1px dashed var(--garis); vertical-align: middle; }
.tabel-pegawai tr:hover td { background: #F7FBFF; }
.tabel-pegawai .orang { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--samudra); font-weight: 700; }
.tabel-pegawai .orang small { display: block; color: var(--tinta-3); font-weight: 600; font-size: 12.5px; }
.tabel-pegawai .orang .medali { width: 36px; height: 36px; font-size: 13px; }
.batang-mini { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.batang-mini .rel { flex: 1; height: 8px; border-radius: 99px; background: #EEF2F7; overflow: hidden; display: flex; gap: 2px; }
.batang-mini .rel i { display: block; height: 100%; }
.batang-mini b { font-family: var(--display); font-size: 15px; min-width: 38px; text-align: right; }
.tak-aktif td { opacity: .55; }
@media (max-width: 860px) {
  .tabel-pegawai thead { display: none; }
  .tabel-pegawai tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px dashed var(--garis); }
  .tabel-pegawai td { border: 0; padding: 0; }
  .tabel-pegawai td[data-k] { grid-column: 1 / -1; font-size: 13.5px; color: var(--tinta-2); }
  .tabel-pegawai td[data-k]::before { content: attr(data-k) ": "; font-weight: 700; }
}

/* ---------- stamp card (employee) ---------- */
.prangko {
  position: relative; background: var(--putih); padding: 11px;
  /* perforated edge like the brochure's photo stamps: holes only in the padding ring */
  -webkit-mask: radial-gradient(circle at 7px 7px, #0000 5.5px, #000 6px) -7px -7px / 18px 18px round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle at 7px 7px, #0000 5.5px, #000 6px) -7px -7px / 18px 18px round, linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 3px 0 var(--garis-kuat));
}
.prangko-dalam { border: 2px dashed var(--garis-kuat); border-radius: 12px; padding: 22px 24px; margin: 6px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.prangko .medali { width: 88px; height: 88px; font-size: 32px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 0 0 5px var(--langit-pucat); }
.prangko h1 { font-size: clamp(26px, 3.4vw, 36px); }
.identitas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-weight: 600; color: var(--tinta-2); font-size: 14px; }
.angka-besar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.angka-besar > div { padding: 4px 18px; border-left: 1.5px dashed var(--garis); }
.angka-besar > div:first-child { border-left: 0; padding-left: 0; }
.angka-besar b { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); display: block; line-height: 1.05; font-variant-numeric: tabular-nums; }
.angka-besar span { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
@media (max-width: 860px) {
  .angka-besar { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  .angka-besar > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* calendar heatmap */
.kalender { flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-auto-columns: minmax(12px, 26px); gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.kalender .hari { aspect-ratio: 1; min-width: 12px; border-radius: 4px; background: #EEF2F7; }
.kalender .ontime { background: var(--langit); }
.kalender .late { background: var(--jingga); }
.kalender .absent { background: var(--merah); }
.kalender .holiday { background: repeating-linear-gradient(45deg, #E3EAF3 0 3px, #F5F8FC 3px 6px); }
.kalender .off, .kalender .none { background: #F1F4F8; }
.kalender .pending { background: #fff; box-shadow: inset 0 0 0 1.5px var(--langit); }
.kalender .future { background: transparent; }
.kalender-wrap { display: flex; gap: 8px; align-items: stretch; }
.kalender-hari { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; padding-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--tinta-3); align-items: center; }

/* ---------- devices page ---------- */
.peta { position: relative; border-radius: var(--r-papan); overflow: hidden; border: 1.5px solid var(--garis); box-shadow: 0 3px 0 var(--garis); }
.peta img { display: block; width: 100%; height: auto; }
.pin {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; text-decoration: none;
}
.pin span {
  background: var(--putih); color: var(--samudra); border-radius: 999px;
  font: 700 13px var(--display); padding: 4px 12px; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(14,42,87,.35); display: flex; align-items: center; gap: 4px;
}
.pin::after { content: ""; width: 3px; height: 22px; background: var(--putih); box-shadow: 0 2px 0 rgba(14,42,87,.3); }
.kartu-mesin { display: grid; gap: 14px; }
.kartu-mesin .atas { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.kartu-mesin dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.kartu-mesin dt { color: var(--tinta-2); font-weight: 600; }
.kartu-mesin dd { margin: 0; font-weight: 700; word-break: break-word; }
.memori { height: 10px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.memori i { display: block; height: 100%; background: var(--langit); border-radius: 99px; }
.memori.penuh i { background: var(--merah); }
.form-mesin { display: grid; grid-template-columns: 1.2fr 1fr .6fr .6fr; gap: 10px; align-items: end; }
@media (max-width: 760px) { .form-mesin { grid-template-columns: 1fr 1fr; } }
.catatan { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.catatan li { padding: 7px 0; border-top: 1px dashed var(--garis); display: grid; grid-template-columns: 130px 90px 1fr; gap: 10px; }
.catatan li:first-child { border-top: 0; }
@media (max-width: 760px) { .catatan li { grid-template-columns: 1fr; gap: 0; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  background: var(--samudra-dalam); color: var(--putih); padding: 12px 18px; border-radius: 14px;
  font-weight: 700; z-index: 50; transition: transform .25s ease, visibility .25s; max-width: calc(100vw - 32px);
  visibility: hidden;
}
.toast.on { transform: translate(-50%, 0); visibility: visible; }

/* ---------- login ---------- */
.masuk-latar { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--kertas); }
.masuk-langit { position: relative; overflow: hidden; background: linear-gradient(180deg, #1269B6, var(--langit) 50%, var(--langit-terang)); color: var(--putih); display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 5vw, 72px) 160px; isolation: isolate; }
.masuk-langit .lukisan { position: absolute; inset: 0; z-index: -1; }
.masuk-langit .lukisan svg { width: 100%; height: 100%; }
.masuk-langit .sapa { font-size: clamp(34px, 4.4vw, 52px); }
.masuk-langit h1 { color: var(--putih); font-size: clamp(36px, 5vw, 62px); font-weight: 800; line-height: 1; margin-top: 8px; text-shadow: 0 4px 0 rgba(14,42,87,.3); }
.masuk-langit p { margin-top: 14px; font-size: 17px; font-weight: 600; max-width: 440px; opacity: .92; }
.masuk-form { display: grid; place-items: center; padding: 40px 24px; }
.masuk-form form { width: 100%; max-width: 380px; display: grid; gap: 16px; }
.masuk-form img { width: 84px; height: 84px; }
.masuk-form .galat { background: var(--merah-pucat); color: var(--merah); padding: 10px 14px; border-radius: var(--r-kecil); font-weight: 700; font-size: 14px; }
@media (max-width: 860px) {
  .masuk-latar { grid-template-columns: 1fr; }
  .masuk-langit { padding: 40px 24px 130px; min-height: 340px; }
}

/* ---------- live board ---------- */
.panggung {
  position: relative; min-height: calc(100vh - 66px); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #0F5EA6 0%, var(--langit) 40%, #6DB7EE 100%);
  color: var(--putih); display: grid; grid-template-columns: 1fr minmax(260px, 340px);
  gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 3vw, 40px) clamp(14px, 3vw, 48px) 170px;
}
.panggung .lukisan { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.panggung .lukisan svg { width: 100%; height: 100%; }
.panggung-kepala { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.jam-dinding { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 7vw, 92px); line-height: .9; font-variant-numeric: tabular-nums; text-shadow: 0 5px 0 rgba(14,42,87,.3); }
.jam-dinding small { font-size: .42em; opacity: .75; margin-left: 4px; }
.panggung-kepala .tanggal { margin: 8px 0 0; }
.kendali { display: flex; gap: 8px; }
.kendali button { background: rgba(255,255,255,.16); color: var(--putih); border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; padding: 7px 14px; font: 700 13.5px var(--body); cursor: pointer; }
.kendali button[aria-pressed="true"] { background: var(--putih); color: var(--samudra); }
.hitung-hari { font-family: var(--display); font-size: 18px; font-weight: 700; }
.hitung-hari b { color: var(--mentari); font-size: 1.5em; }

.panggung-tengah { position: relative; display: grid; place-items: center; align-content: center; min-height: 420px; isolation: isolate; }
.panggung-tengah::before {   /* the sun rises behind whatever card is showing */
  content: ""; position: absolute; z-index: -1; left: 50%; top: calc(50% - clamp(170px, 19vw, 230px));
  width: clamp(240px, 30vw, 400px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #FFD54F 0 34%, rgba(255,243,196,.22) 35% 52%, rgba(255,243,196,.08) 53% 70%, transparent 71%);
}
.tunggu { text-align: center; }
.tunggu .sapa { font-size: clamp(34px, 5vw, 58px); }
.tunggu p { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; margin-top: 10px; }
.tunggu .kartu-contoh { margin: 26px auto 0; width: 92px; height: 60px; border-radius: 10px; background: var(--putih); position: relative; animation: ketuk 2.6s ease-in-out infinite; box-shadow: 0 6px 0 rgba(14,42,87,.25); }
.tunggu .kartu-contoh::after { content: ""; position: absolute; left: 12px; top: 14px; width: 26px; height: 18px; border-radius: 4px; background: var(--mentari); }
@keyframes ketuk { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

.kartu-tap {
  width: min(660px, 100%); background: var(--putih); color: var(--samudra); padding: 14px;
  -webkit-mask: radial-gradient(circle at 9px 9px, #0000 7px, #000 7.5px) -9px -9px / 23px 23px round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle at 9px 9px, #0000 7px, #000 7.5px) -9px -9px / 23px 23px round, linear-gradient(#000 0 0) content-box;
  filter: drop-shadow(0 8px 0 rgba(14,42,87,.28));
}
.kartu-tap .dalam { border: 2.5px dashed var(--garis-kuat); border-radius: 14px; margin: 8px; padding: clamp(18px, 3vw, 30px); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.kartu-tap .medali { width: clamp(96px, 12vw, 136px); height: clamp(96px, 12vw, 136px); font-size: clamp(36px, 4.6vw, 52px); box-shadow: inset 0 -6px 0 rgba(0,0,0,.14), 0 0 0 7px var(--langit-pucat); }
.kartu-tap h2 { font-size: clamp(28px, 4.4vw, 50px); line-height: 1.02; }
.kartu-tap .meta { margin-top: 8px; color: var(--tinta-2); font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kartu-tap .pita {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-radius: 14px; padding: 12px 18px; background: var(--langit-pucat);
}
.kartu-tap .pita b { font-family: var(--display); font-size: clamp(22px, 3vw, 32px); font-weight: 800; }
.kartu-tap .pita .waktu { font-family: var(--display); font-size: clamp(30px, 4vw, 46px); font-weight: 800; font-variant-numeric: tabular-nums; }
.kartu-tap[data-kind="ontime"] .pita { background: var(--langit); color: var(--putih); }
.kartu-tap[data-kind="late"] .pita { background: var(--jingga); color: #3B1D00; }
.kartu-tap[data-kind="leave"] .pita { background: var(--samudra); color: var(--putih); }
.kartu-tap .ringkas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; color: var(--tinta-2); font-size: 14.5px; }
.kartu-tap .ringkas b { color: var(--samudra); font-family: var(--display); font-size: 18px; }
.kartu-tap.masuk { animation: cap .55s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes cap { 0% { transform: scale(1.12) rotate(-3deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }

.lini { align-self: start; background: rgba(14, 42, 87, .32); border: 1.5px solid rgba(255,255,255,.22); border-radius: 20px; padding: 16px; backdrop-filter: blur(4px); }
.lini h3 { color: var(--putih); font-size: 17px; margin-bottom: 8px; }
.lini ol { list-style: none; margin: 0; padding: 0; }
.lini li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed rgba(255,255,255,.22); }
.lini li:first-child { border-top: 0; }
.lini .medali { width: 34px; height: 34px; font-size: 12.5px; }
.lini .nm { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.25; }
.lini .nm small { display: block; opacity: .75; font-weight: 600; font-size: 12px; }
.lini .tm { font-family: var(--display); font-weight: 700; font-size: 17px; }
.lini li.baru { animation: muncul .5s ease both; }
@keyframes muncul { from { background: rgba(255,199,44,.35); } to { background: transparent; } }
@media (max-width: 900px) { .panggung { grid-template-columns: 1fr; padding-bottom: 150px; } .lini { order: 3; } }
.panggung-penuh .topbar { display: none; }
.panggung-penuh .panggung { min-height: 100vh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}