/* =====================================================================
   ABSENSI DIGITAL SISWA - MAN 1 PALEMBANG
   Tema "Gerbang Cahaya" - kaca gelap, cahaya songket, bintang delapan.
   Palet diambil dari identitas Palembang: emas songket, merah Ampera,
   biru Sungai Musi, hijau kubah.
   ===================================================================== */

/* ---------- 1. TOKEN ---------- */
:root {
  --void:      #04060E;
  --deep:      #080C1C;
  --slate:     #0E1430;
  --line:      rgba(140, 165, 255, .14);
  --line-kuat: rgba(160, 185, 255, .28);

  --gold:      #F6C87A;   /* benang songket   */
  --crimson:   #FF4F7B;   /* jembatan Ampera  */
  --cyan:      #35E7F0;   /* Sungai Musi      */
  --emerald:   #3DF5A5;   /* kubah            */
  --violet:    #8B6BFF;   /* senja Musi       */
  --amber:     #FFB443;

  --teks:      #E9EDFF;
  --teks-lembut: #93A2CE;
  --teks-redup:  #61719E;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;

  --kaca:      linear-gradient(160deg, rgba(24,32,66,.86), rgba(10,15,34,.78));
  --kaca-tipis:linear-gradient(160deg, rgba(28,38,78,.55), rgba(10,15,34,.42));
  --bayang:    0 24px 60px -24px rgba(0,0,0,.9), 0 2px 0 0 rgba(255,255,255,.05) inset;

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-data:    "JetBrains Mono", ui-monospace, "Consolas", monospace;

  --lebar-rail: 268px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--teks);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 2. LATAR HIDUP ---------- */
.langit { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--void); }
.langit::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(46% 38% at 14% 12%, rgba(139,107,255,.30), transparent 62%),
    radial-gradient(42% 40% at 86% 18%, rgba(53,231,240,.22), transparent 64%),
    radial-gradient(50% 46% at 74% 88%, rgba(255,79,123,.20), transparent 66%),
    radial-gradient(40% 40% at 24% 84%, rgba(246,200,122,.16), transparent 62%);
  filter: blur(28px);
  animation: nafas 26s ease-in-out infinite alternate;
}
@keyframes nafas {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%,-2%,0) scale(1.08); }
  100% { transform: translate3d(-2%,2.5%,0) scale(1.04); }
}
/* jalinan songket: garis diagonal halus */
.langit::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(45deg, rgba(246,200,122,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(53,231,240,.038) 0 1px, transparent 1px 22px);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}

/* ---------- 3. TATA LETAK ---------- */
.tata { display: flex; min-height: 100vh; }

.rail {
  width: var(--lebar-rail); flex: 0 0 var(--lebar-rail);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14,20,48,.94), rgba(6,9,22,.96));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(20px);
  z-index: 40;
}
/* benang emas di tepi rail */
.rail::after {
  content: ""; position: absolute; top: 0; right: -1px; width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--violet), var(--cyan), var(--gold), var(--crimson), transparent);
  background-size: 100% 300%;
  animation: benang 12s linear infinite;
  opacity: .85;
}
@keyframes benang { 0% { background-position: 0 0; } 100% { background-position: 0 300%; } }

.rail__merek { padding: 22px 20px 18px; display: flex; gap: 13px; align-items: center; border-bottom: 1px solid var(--line); }
.merek__lambang {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; position: relative;
  background: conic-gradient(from 140deg, var(--violet), var(--cyan), var(--emerald), var(--gold), var(--crimson), var(--violet));
  box-shadow: 0 0 24px -4px rgba(139,107,255,.75);
}
.merek__lambang span {
  position: absolute; inset: 2px; border-radius: 12px; background: #070B1B;
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; font-size: 15px; letter-spacing: -.5px;
  background-clip: padding-box; color: var(--gold);
}
.merek__teks b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .2px; }
.merek__teks small { display: block; color: var(--teks-redup); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; }

.rail__menu { flex: 1; overflow-y: auto; padding: 16px 12px 24px; }
.rail__menu::-webkit-scrollbar { width: 5px; }
.rail__menu::-webkit-scrollbar-thumb { background: rgba(140,165,255,.2); border-radius: 9px; }

.menu__judul {
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--teks-redup); padding: 16px 14px 8px; font-weight: 700;
}
.menu__tautan {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 3px; border-radius: 12px;
  color: var(--teks-lembut); text-decoration: none; font-size: 14px; font-weight: 500;
  position: relative; transition: color .22s, background .22s, transform .22s;
}
.menu__tautan svg { width: 18px; height: 18px; flex: none; opacity: .8; transition: opacity .22s, transform .22s; }
.menu__tautan:hover { color: var(--teks); background: rgba(120,150,255,.08); transform: translateX(3px); }
.menu__tautan:hover svg { opacity: 1; }
.menu__tautan.aktif {
  color: #fff;
  background: linear-gradient(100deg, rgba(139,107,255,.28), rgba(53,231,240,.12) 60%, transparent);
  box-shadow: inset 0 0 0 1px rgba(139,107,255,.35), 0 8px 26px -14px rgba(139,107,255,.9);
}
.menu__tautan.aktif svg { opacity: 1; color: var(--cyan); filter: drop-shadow(0 0 6px rgba(53,231,240,.8)); }
.menu__tautan.aktif::before {
  content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 3px; border-radius: 4px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  box-shadow: 0 0 12px var(--cyan);
}
.menu__lencana {
  margin-left: auto; font-family: var(--font-data); font-size: 10.5px; padding: 2px 7px;
  border-radius: 20px; background: rgba(255,79,123,.18); color: #ffbccd;
  box-shadow: inset 0 0 0 1px rgba(255,79,123,.4);
}

.rail__kaki { padding: 14px; border-top: 1px solid var(--line); }
.kartu-akun { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 14px; background: rgba(120,150,255,.07); }
.avatar {
  width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-weight: 700; font-family: var(--font-display); color: #05070f;
  background: linear-gradient(140deg, var(--gold), var(--amber));
  box-shadow: 0 0 18px -4px rgba(246,200,122,.8);
}
.kartu-akun b { font-size: 13px; display: block; line-height: 1.3; }
.kartu-akun small { color: var(--teks-redup); font-size: 11px; text-transform: capitalize; }

.utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- 4. BILAH ATAS ---------- */
.bilah {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 28px;
  background: rgba(6,9,22,.72); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.bilah__judul h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.bilah__judul p { font-size: 12.5px; color: var(--teks-redup); }
.bilah__kanan { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.jam-hidup {
  font-family: var(--font-data); font-size: 19px; font-weight: 600; letter-spacing: 1px;
  color: var(--cyan); text-shadow: 0 0 16px rgba(53,231,240,.6);
  display: flex; align-items: baseline; gap: 6px;
}
.jam-hidup small { font-size: 11px; color: var(--teks-redup); letter-spacing: .5px; text-shadow: none; }

.tombol-menu { display: none; background: none; border: 0; color: var(--teks); cursor: pointer; padding: 6px; }

/* ---------- 5. ISI ---------- */
.isi { padding: 26px 28px 60px; flex: 1; }
.baris { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-32 { grid-template-columns: 1.55fr 1fr; }

/* ---------- 6. PANEL & KARTU ---------- */
.panel {
  background: var(--kaca); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--bayang); backdrop-filter: blur(16px); position: relative; overflow: hidden;
}
.panel__kepala {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.panel__kepala h2 { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1px; }
.panel__kepala p { font-size: 12px; color: var(--teks-redup); }
.panel__kepala .kanan { margin-left: auto; display: flex; gap: 9px; align-items: center; }
.panel__isi { padding: 20px 22px; }

/* kartu statistik dengan kemiringan 3D */
.stat {
  position: relative; padding: 20px; border-radius: var(--r-l);
  background: var(--kaca); border: 1px solid var(--line);
  box-shadow: var(--bayang);
  transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
  overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset: 0; opacity: .9; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, var(--aksen-lembut, rgba(139,107,255,.22)), transparent 58%);
}
.stat::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--aksen, var(--violet)), transparent 78%);
  box-shadow: 0 0 18px var(--aksen, var(--violet));
}
.stat:hover { box-shadow: 0 34px 70px -28px rgba(0,0,0,.95), 0 0 0 1px var(--aksen, var(--violet)) inset; }
.stat__ikon {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px;
  background: rgba(255,255,255,.05); color: var(--aksen, var(--violet));
  box-shadow: inset 0 0 0 1px var(--aksen-lembut, rgba(139,107,255,.3)), 0 0 22px -8px var(--aksen, var(--violet));
}
.stat__ikon svg { width: 21px; height: 21px; }
.stat__label { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teks-redup); font-weight: 600; }
.stat__nilai {
  font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -1.4px;
  color: #fff; text-shadow: 0 0 26px var(--aksen-lembut, rgba(139,107,255,.55));
}
.stat__kaki { font-size: 12px; color: var(--teks-lembut); margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.stat--violet  { --aksen: #8B6BFF; --aksen-lembut: rgba(139,107,255,.26); }
.stat--cyan    { --aksen: #35E7F0; --aksen-lembut: rgba(53,231,240,.22); }
.stat--emerald { --aksen: #3DF5A5; --aksen-lembut: rgba(61,245,165,.20); }
.stat--gold    { --aksen: #F6C87A; --aksen-lembut: rgba(246,200,122,.22); }
.stat--crimson { --aksen: #FF4F7B; --aksen-lembut: rgba(255,79,123,.22); }

/* ---------- 7. TOMBOL ---------- */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line-kuat);
  background: rgba(120,150,255,.08); color: var(--teks);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: transform .18s, box-shadow .25s, background .25s, border-color .25s;
  white-space: nowrap;
}
.tbl svg { width: 16px; height: 16px; }
.tbl:hover { transform: translateY(-2px); background: rgba(120,150,255,.14); border-color: rgba(160,185,255,.45); }
.tbl:active { transform: translateY(0); }
.tbl--utama {
  border-color: transparent; color: #05070f; font-weight: 700;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  box-shadow: 0 12px 32px -14px rgba(53,231,240,.95);
}
.tbl--utama:hover { box-shadow: 0 18px 40px -14px rgba(53,231,240,1); background: linear-gradient(120deg, #5cf0f7, #9b80ff); }
.tbl--emas { border-color: transparent; color: #170f00; font-weight: 700;
  background: linear-gradient(120deg, var(--gold), var(--amber)); box-shadow: 0 12px 32px -14px rgba(246,200,122,.9); }
.tbl--bahaya { border-color: rgba(255,79,123,.4); color: #ffc2d1; background: rgba(255,79,123,.12); }
.tbl--bahaya:hover { background: rgba(255,79,123,.22); }
.tbl--kecil { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.tbl--ikon { padding: 8px; border-radius: 10px; }
.tbl:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- 8. FORMULIR ---------- */
.bidang { margin-bottom: 15px; }
.bidang > label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .4px;
  color: var(--teks-lembut); margin-bottom: 7px;
}
.masukan, select.masukan, textarea.masukan {
  width: 100%; padding: 11px 14px; border-radius: 12px;
  background: rgba(4,7,18,.65); border: 1px solid var(--line-kuat); color: var(--teks);
  font-family: var(--font-body); font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea.masukan { min-height: 110px; resize: vertical; font-family: var(--font-data); font-size: 13px; line-height: 1.7; }
.masukan::placeholder { color: var(--teks-redup); }
.masukan:focus {
  outline: none; border-color: rgba(53,231,240,.7); background: rgba(4,7,18,.9);
  box-shadow: 0 0 0 4px rgba(53,231,240,.12), 0 0 22px -8px rgba(53,231,240,.8);
}
select.masukan { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A2CE' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; }
select.masukan option { background: #0b1024; color: var(--teks); }
.bantuan { font-size: 11.5px; color: var(--teks-redup); margin-top: 6px; }

.saring { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.saring .bidang { margin: 0; min-width: 150px; }

/* ---------- 9. TABEL ---------- */
.bingkai-tabel { overflow-x: auto; border-radius: var(--r-m); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.data th {
  text-align: left; padding: 12px 14px; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--teks-redup); font-weight: 700; background: rgba(10,15,34,.85);
  border-bottom: 1px solid var(--line-kuat); position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid rgba(140,165,255,.08); vertical-align: middle; }
table.data tbody tr { transition: background .18s; }
table.data tbody tr:hover { background: rgba(120,150,255,.07); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .angka { font-family: var(--font-data); font-size: 12.5px; letter-spacing: .3px; }
.kosong { text-align: center; padding: 46px 20px; color: var(--teks-redup); }
.kosong svg { width: 40px; height: 40px; opacity: .35; margin-bottom: 12px; }
.kosong b { display: block; color: var(--teks-lembut); font-size: 14px; margin-bottom: 4px; }

/* ---------- 10. LENCANA ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge--ok   { background: rgba(61,245,165,.14); color: #7dffc6; box-shadow: inset 0 0 0 1px rgba(61,245,165,.32); }
.badge--warn { background: rgba(255,180,67,.14); color: #ffd08a; box-shadow: inset 0 0 0 1px rgba(255,180,67,.34); }
.badge--bad  { background: rgba(255,79,123,.14); color: #ffa8bf; box-shadow: inset 0 0 0 1px rgba(255,79,123,.34); }
.badge--info { background: rgba(53,231,240,.13); color: #8ef2f8; box-shadow: inset 0 0 0 1px rgba(53,231,240,.3); }

/* ---------- 11. GERBANG PINDAI (elemen khas) ---------- */
.terminal {
  min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;
  padding: 20px 26px 26px; gap: 18px;
}
.terminal__kepala { display: flex; align-items: center; gap: 16px; }
.terminal__kepala .id b { font-family: var(--font-display); font-size: 17px; display: block; letter-spacing: -.2px; }
.terminal__kepala .id small { color: var(--teks-redup); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.terminal__papan { margin-left: auto; text-align: right; }
.terminal__jam {
  font-family: var(--font-data); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: 2px;
  background: linear-gradient(120deg, #fff, var(--cyan) 55%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(53,231,240,.45));
}
.terminal__tanggal { font-size: 12.5px; color: var(--teks-lembut); letter-spacing: .8px; }

.arena { display: grid; grid-template-columns: 1fr 380px; gap: 20px; min-height: 0; }

.gerbang {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--kaca); border: 1px solid var(--line); box-shadow: var(--bayang);
  display: grid; place-items: center; padding: 30px;
  transition: box-shadow .5s, border-color .5s;
}
.gerbang[data-keadaan="sukses"]  { border-color: rgba(61,245,165,.5);  box-shadow: 0 0 80px -20px rgba(61,245,165,.65), var(--bayang); }
.gerbang[data-keadaan="tolak"]   { border-color: rgba(255,79,123,.5);  box-shadow: 0 0 80px -20px rgba(255,79,123,.65), var(--bayang); }
.gerbang[data-keadaan="ingat"]   { border-color: rgba(255,180,67,.5);  box-shadow: 0 0 80px -20px rgba(255,180,67,.6), var(--bayang); }
.gerbang[data-keadaan="proses"]  { border-color: rgba(53,231,240,.5); }

/* cincin bintang delapan */
.portal { position: relative; width: min(46vh, 400px); aspect-ratio: 1; display: grid; place-items: center; }
.portal__cincin {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(140,165,255,.2);
}
.portal__cincin--luar {
  inset: -6%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--nada, var(--cyan)) 78%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: putar 6.5s linear infinite;
  filter: drop-shadow(0 0 12px var(--nada, var(--cyan)));
}
.portal__cincin--dalam {
  inset: 12%;
  background: conic-gradient(from 180deg, transparent 0 70%, var(--nada2, var(--violet)) 84%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: putar 9s linear infinite reverse;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* dua persegi bersilang = bintang delapan (khataim) */
.portal__bintang { position: absolute; inset: 20%; }
.portal__bintang i {
  position: absolute; inset: 0; display: block; border: 1.5px solid var(--nada, var(--cyan));
  border-radius: 14px; opacity: .34;
  box-shadow: 0 0 26px -6px var(--nada, var(--cyan)), inset 0 0 26px -12px var(--nada, var(--cyan));
  animation: denyut 4.5s ease-in-out infinite;
}
.portal__bintang i:nth-child(2) { transform: rotate(45deg); animation-delay: -2.25s; }
@keyframes denyut {
  0%,100% { opacity: .22; transform: scale(.97) rotate(0deg); }
  50%     { opacity: .5;  transform: scale(1.02) rotate(0deg); }
}
.portal__bintang i:nth-child(2) { animation-name: denyut45; }
@keyframes denyut45 {
  0%,100% { opacity: .22; transform: scale(.97) rotate(45deg); }
  50%     { opacity: .5;  transform: scale(1.02) rotate(45deg); }
}

.portal__inti {
  position: relative; width: 62%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(30,42,86,.9), rgba(6,10,26,.96));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.06), 0 0 60px -18px var(--nada, var(--cyan));
  border: 1px solid var(--line-kuat);
}
.portal__inti .ikon { color: var(--nada, var(--cyan)); filter: drop-shadow(0 0 14px var(--nada, var(--cyan))); }
.portal__inti .ikon svg { width: 54px; height: 54px; }
.portal__inti .pesan { margin-top: 12px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.portal__inti .rinci { font-size: 12.5px; color: var(--teks-lembut); margin-top: 4px; }

.gerbang[data-keadaan="sukses"] .portal { --nada: #3DF5A5; --nada2: #35E7F0; }
.gerbang[data-keadaan="tolak"]  .portal { --nada: #FF4F7B; --nada2: #FF8AA6; }
.gerbang[data-keadaan="ingat"]  .portal { --nada: #FFB443; --nada2: #F6C87A; }
.gerbang[data-keadaan="proses"] .portal { --nada: #35E7F0; --nada2: #8B6BFF; }

/* gelombang saat tap diterima */
.riak { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--nada, var(--cyan)); opacity: 0; pointer-events: none; }
.gerbang.bergema .riak { animation: gema 1.1s cubic-bezier(.2,.7,.3,1) 1; }
@keyframes gema {
  0%   { transform: scale(.55); opacity: .85; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* kartu identitas siswa yang muncul */
.identitas {
  position: absolute; inset: auto 0 0 0; padding: 20px 26px 24px;
  background: linear-gradient(0deg, rgba(4,7,18,.96), transparent);
  display: flex; align-items: center; gap: 16px;
  transform: translateY(105%); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.25,1), opacity .4s;
}
.identitas.tampil { transform: translateY(0); opacity: 1; }
.identitas__foto {
  width: 58px; height: 58px; border-radius: 16px; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #05070f;
  background: linear-gradient(140deg, var(--gold), var(--amber));
  box-shadow: 0 0 26px -6px rgba(246,200,122,.9);
}
.identitas__nama { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.identitas__meta { font-size: 12.5px; color: var(--teks-lembut); font-family: var(--font-data); }
.identitas__jam {
  margin-left: auto; text-align: right; font-family: var(--font-data);
  font-size: 26px; font-weight: 700; color: var(--nada, var(--cyan)); text-shadow: 0 0 18px var(--nada, var(--cyan));
}

/* kolom kanan terminal */
.sisi { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.kotak-pindai { padding: 18px; }
.kotak-pindai .masukan {
  font-family: var(--font-data); font-size: 17px; letter-spacing: 3px; text-align: center; padding: 15px;
}
.penanda-siap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--teks-lembut); margin-top: 10px; justify-content: center; }
.titik-nyala { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px var(--emerald); animation: kedip 1.8s ease-in-out infinite; }
.titik-nyala--mati { background: var(--crimson); box-shadow: 0 0 10px var(--crimson); }
@keyframes kedip { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.arus { flex: 1; overflow-y: auto; padding: 6px 8px 10px; }
.arus::-webkit-scrollbar { width: 5px; }
.arus::-webkit-scrollbar-thumb { background: rgba(140,165,255,.2); border-radius: 9px; }
.arus__item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px;
  background: rgba(120,150,255,.06); margin-bottom: 7px;
  animation: masuk-halus .45s cubic-bezier(.2,.8,.25,1);
  border-left: 3px solid var(--nada, var(--cyan));
}
.arus__item.ok   { --nada: var(--emerald); }
.arus__item.warn { --nada: var(--amber); }
.arus__item.bad  { --nada: var(--crimson); }
.arus__item b { font-size: 13px; display: block; line-height: 1.35; }
.arus__item small { font-size: 11.5px; color: var(--teks-redup); font-family: var(--font-data); }
.arus__item .waktu { margin-left: auto; font-family: var(--font-data); font-size: 13px; color: var(--nada, var(--cyan)); }
@keyframes masuk-halus { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }

.pita-mode {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 30px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase;
}
.pita-mode--masuk  { background: rgba(61,245,165,.14); color: #8affd0; box-shadow: inset 0 0 0 1px rgba(61,245,165,.4), 0 0 26px -10px rgba(61,245,165,.9); }
.pita-mode--pulang { background: rgba(139,107,255,.16); color: #c3b2ff; box-shadow: inset 0 0 0 1px rgba(139,107,255,.45), 0 0 26px -10px rgba(139,107,255,.9); }

/* ---------- 12. GERBANG TERKUNCI ---------- */
.kunci {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-m);
  background: rgba(255,79,123,.09); box-shadow: inset 0 0 0 1px rgba(255,79,123,.3);
  color: #ffc2d1; font-size: 13.5px;
}
.kunci svg { width: 22px; height: 22px; flex: none; }
.kunci b { display: block; font-size: 14px; color: #ffd9e3; }

/* ---------- 13. MASUK / LOGIN ---------- */
.laman-masuk { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; }
.masuk__kiri { padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.masuk__kanan { display: grid; place-items: center; padding: 40px; }
.masuk__kartu { width: 100%; max-width: 400px; padding: 34px; }

/* Kepala kartu masuk: lambang, judul, dan keterangan berbagi satu sumbu
   tengah. Lambang ditengahkan memakai margin kiri-kanan otomatis (bukan
   text-align) supaya benar-benar presisi di sumbu yang sama dengan
   tulisan di bawahnya. Borang di bawahnya sengaja tetap rata kiri:
   nama kolom yang ditengahkan menyulitkan mata menemukan awal barisnya. */
.masuk__kepala {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin-bottom: 22px;
}
.masuk__lambang {
  width: 62px; height: 62px; object-fit: contain;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5));
}
.masuk__sapa {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -.4px; line-height: 1.25;
}
.masuk__sapa-sub {
  margin: 6px auto 0;
  max-width: 30ch;                 /* memaksa patahan baris yang seimbang */
  font-size: 13px; line-height: 1.6;
  color: var(--teks-redup);
  text-wrap: balance;
}
.masuk__judul { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; }
.masuk__judul span { background: linear-gradient(110deg, var(--gold), var(--crimson) 50%, var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.masuk__sub { color: var(--teks-lembut); margin-top: 10px; font-size: 14px; max-width: 42ch; }
.masuk__poin { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.poin { display: flex; gap: 13px; align-items: flex-start; }
.poin__no {
  width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-data); font-size: 12px; font-weight: 700; color: var(--cyan);
  background: rgba(53,231,240,.1); box-shadow: inset 0 0 0 1px rgba(53,231,240,.3);
}
.poin b { font-size: 13.5px; display: block; }
.poin small { font-size: 12.5px; color: var(--teks-redup); }

/* ---------- 14. PEMBERITAHUAN ---------- */
.wadah-pesan { position: fixed; top: 20px; right: 20px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.pesan {
  display: flex; gap: 11px; align-items: flex-start; min-width: 280px; max-width: 400px;
  padding: 13px 16px; border-radius: 14px; font-size: 13.5px;
  background: rgba(14,20,48,.96); border: 1px solid var(--line-kuat);
  box-shadow: 0 22px 50px -20px rgba(0,0,0,.95); backdrop-filter: blur(14px);
  animation: geser-masuk .4s cubic-bezier(.2,.8,.25,1);
}
.pesan.pergi { animation: geser-keluar .3s forwards; }
.pesan svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.pesan--ok  { border-color: rgba(61,245,165,.4); color: #b6ffe1; }
.pesan--bad { border-color: rgba(255,79,123,.45); color: #ffc2d1; }
.pesan--warn{ border-color: rgba(255,180,67,.45); color: #ffdcae; }
@keyframes geser-masuk  { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes geser-keluar { to { opacity: 0; transform: translateX(40px) scale(.96); } }

/* ---------- 15. JENDELA ---------- */
.tirai {
  position: fixed; inset: 0; z-index: 800; display: none; place-items: center; padding: 20px;
  background: rgba(2,4,10,.78); backdrop-filter: blur(8px);
}
.tirai.buka { display: grid; animation: pudar .25s; }
@keyframes pudar { from { opacity: 0; } to { opacity: 1; } }
.jendela {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(160deg, rgba(20,28,60,.98), rgba(8,12,28,.98));
  border: 1px solid var(--line-kuat); border-radius: var(--r-l);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,1);
  animation: naik .32s cubic-bezier(.2,.8,.25,1);
}
.jendela--lebar { max-width: 780px; }
@keyframes naik { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.jendela__kepala { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.jendela__kepala h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.jendela__isi { padding: 22px 24px; }
.jendela__kaki { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.tutup { margin-left: auto; background: none; border: 0; color: var(--teks-redup); cursor: pointer; padding: 4px; border-radius: 8px; }
.tutup:hover { color: var(--crimson); background: rgba(255,79,123,.1); }

/* ---------- 16. GRAFIK ---------- */
.grafik { width: 100%; height: 260px; display: block; }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--teks-lembut); }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; box-shadow: 0 0 8px currentColor; }

/* batang persentase kelas */
.bar-kelas { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.bar-kelas b { width: 58px; font-size: 12.5px; font-family: var(--font-data); }
.bar-kelas .jalur { flex: 1; height: 9px; border-radius: 20px; background: rgba(120,150,255,.09); overflow: hidden; }
.bar-kelas .isi-bar {
  height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--cyan), var(--emerald));
  box-shadow: 0 0 14px rgba(61,245,165,.6); transform-origin: left; animation: tumbuh .9s cubic-bezier(.2,.8,.25,1);
}
.bar-kelas .isi-bar.sedang { background: linear-gradient(90deg, var(--gold), var(--amber)); box-shadow: 0 0 14px rgba(246,200,122,.6); }
.bar-kelas .isi-bar.rendah { background: linear-gradient(90deg, var(--crimson), #ff8aa6); box-shadow: 0 0 14px rgba(255,79,123,.6); }
.bar-kelas span { width: 46px; text-align: right; font-family: var(--font-data); font-size: 12px; color: var(--teks-lembut); }
@keyframes tumbuh { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 17. LAIN-LAIN ---------- */
.pias { display: flex; gap: 8px; flex-wrap: wrap; }
.pias a {
  padding: 7px 14px; border-radius: 11px; text-decoration: none; font-size: 13px; font-weight: 600;
  color: var(--teks-lembut); background: rgba(120,150,255,.07); border: 1px solid transparent; transition: .2s;
}
.pias a:hover { color: var(--teks); border-color: var(--line-kuat); }
.pias a.aktif { color: #05070f; background: linear-gradient(120deg, var(--cyan), var(--violet)); }

.halaman { display: flex; gap: 6px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.halaman a, .halaman span {
  min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px;
  border-radius: 10px; font-size: 13px; text-decoration: none; color: var(--teks-lembut);
  background: rgba(120,150,255,.06); border: 1px solid transparent; transition: .2s;
}
.halaman a:hover { color: var(--teks); border-color: var(--line-kuat); }
.halaman .kini { color: #05070f; font-weight: 700; background: linear-gradient(120deg, var(--cyan), var(--violet)); }

hr.pisah { border: 0; height: 1px; background: var(--line); margin: 20px 0; }
.mini { font-size: 12px; color: var(--teks-redup); }
.tengah { text-align: center; }
.kanan { text-align: right; }
.tebal { font-weight: 700; }
.spasi-atas { margin-top: 18px; }
.antar { display: flex; align-items: center; gap: 10px; }
.tumpuk { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 18. RESPONSIF ---------- */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-32, .grid-3 { grid-template-columns: 1fr; }
  .arena { grid-template-columns: 1fr; }
  .sisi { max-height: 46vh; }
}
@media (max-width: 900px) {
  .laman-masuk { grid-template-columns: 1fr; }
  .masuk__kiri { display: none; }
  .rail {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.2,.8,.25,1); box-shadow: 30px 0 80px -30px #000;
  }
  .rail.buka { transform: none; }
  .tombol-menu { display: grid; }
  .isi { padding: 18px 16px 50px; }
  .bilah { padding: 13px 16px; }
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .terminal__jam { font-size: 30px; }
  .terminal { padding: 14px; }
}
@media (max-width: 560px) {
  .stat__nilai { font-size: 28px; }
  .panel__isi { padding: 16px; }
  .jendela__isi { padding: 18px; }
}

/* ---------- 19. AKSESIBILITAS ---------- */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
::selection { background: rgba(53,231,240,.3); color: #fff; }

/* ---------- 20. LAMBANG BERGAMBAR ----------
   Lambang di menu samping, halaman masuk, dan terminal gerbang memakai
   berkas logo madrasah. Bingkai pelangi tetap dipertahankan sebagai
   lingkar cahaya di sekelilingnya. */
.merek__lambang img {
  position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  object-fit: contain; border-radius: 11px; background: #070B1B; padding: 1px;
}
.logo-pasangan { display: flex; align-items: center; gap: 14px; }
.logo-pasangan img { width: 54px; height: 54px; object-fit: contain; flex: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.logo-pasangan .logo-pasangan__garis { width: 1px; height: 38px; background: var(--line-kuat); flex: none; }
.terminal__lambang { width: 62px; height: 62px; object-fit: contain; flex: none;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
@media (max-width: 900px) {
  .logo-pasangan img { width: 44px; height: 44px; }
  .terminal__lambang { width: 48px; height: 48px; }
}

/* =====================================================================
   21. PITA RUNNING TEXT
   Pita informasi berjalan yang menempel di dasar layar, bergaya
   "Gerbang Cahaya": kaca gelap, garis songket emas, dan cahaya yang
   bergerak pelan di tepi atasnya.
   ===================================================================== */
.pita {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 700;
  height: 54px;
  display: flex;
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(11,16,36,.90), rgba(4,6,14,.97));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid rgba(246,200,122,.30);
  box-shadow: 0 -22px 50px -26px rgba(0,0,0,.95),
              0 -1px 0 0 rgba(255,255,255,.05) inset;
  font-family: var(--font-body);
  overflow: hidden;
  contain: layout paint;
}

/* Cahaya songket yang mengalir pelan di tepi atas pita */
.pita__cahaya {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--violet), var(--cyan), var(--emerald),
    var(--gold), var(--crimson), var(--violet), transparent);
  background-size: 220% 100%;
  animation: pitaCahaya 14s linear infinite;
  opacity: .95;
}
@keyframes pitaCahaya {
  from { background-position: 0% 0; }
  to   { background-position: 220% 0; }
}

/* ---------- Blok merek: logo madrasah + jam hidup ---------- */
.pita__merek {
  display: flex; align-items: center; gap: 11px;
  padding: 0 18px 0 20px;
  flex: none;
  position: relative;
  background: linear-gradient(120deg, rgba(246,200,122,.14), rgba(139,107,255,.10) 70%, transparent);
}
.pita__merek::after {
  content: ""; position: absolute; right: 0; top: 11px; bottom: 11px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(246,200,122,.55), transparent);
}
.pita__merek img {
  width: 32px; height: 32px; object-fit: contain; flex: none;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.pita__jam { display: flex; align-items: baseline; gap: 4px; }
.pita__jam b {
  font-family: var(--font-data); font-size: 17px; font-weight: 700;
  letter-spacing: .5px; line-height: 1;
  background: linear-gradient(110deg, var(--gold), #FFF0CE 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.pita__jam small {
  font-size: 9.5px; letter-spacing: 1.4px; color: var(--teks-redup); font-weight: 700;
}

/* ---------- Jendela geser ---------- */
.pita__jendela { position: relative; flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.pita__jalur { display: flex; width: max-content; will-change: transform; animation: pitaJalan linear infinite; }
@keyframes pitaJalan { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.pita__set { display: flex; align-items: center; flex: none; }

.pita:hover .pita__jalur { animation-play-state: paused; }
.pita.pita--jeda .pita__jalur { animation-play-state: paused; }

/* Tepi memudar supaya teks tidak terpotong mendadak */
.pita__pudar { position: absolute; top: 0; bottom: 0; width: 46px; pointer-events: none; z-index: 2; }
.pita__pudar--kiri  { left: 0;  background: linear-gradient(90deg, rgba(6,9,21,.97) 12%, rgba(6,9,21,0)); }
.pita__pudar--kanan { right: 0; background: linear-gradient(270deg, rgba(6,9,21,.97) 12%, rgba(6,9,21,0)); }

/* ---------- Butir informasi ---------- */
.pita__butir {
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap; padding: 0 4px;
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  color: var(--teks);
}
.pita__ikon {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 9px;
  background: rgba(140,165,255,.10);
  box-shadow: inset 0 0 0 1px rgba(140,165,255,.24);
  color: var(--teks-lembut);
}
.pita__ikon svg { width: 15px; height: 15px; }
.pita__teks { line-height: 1; }

/* Pemisah bermotif bintang songket */
.pita__pisah {
  color: var(--gold); opacity: .5; font-size: 12px;
  padding: 0 20px; flex: none; line-height: 1;
}

/* Warna per jenis butir */
.pita__butir--emas   .pita__ikon { background: rgba(246,200,122,.14); box-shadow: inset 0 0 0 1px rgba(246,200,122,.42); color: var(--gold); }
.pita__butir--emas   .pita__teks { color: #FFE7B8; font-weight: 600; }
.pita__butir--hijau  .pita__ikon { background: rgba(61,245,165,.13); box-shadow: inset 0 0 0 1px rgba(61,245,165,.40); color: var(--emerald); }
.pita__butir--hijau  .pita__teks { color: #B6FFE1; }
.pita__butir--kuning .pita__ikon { background: rgba(255,180,67,.14); box-shadow: inset 0 0 0 1px rgba(255,180,67,.42); color: var(--amber); }
.pita__butir--kuning .pita__teks { color: #FFDCA6; }
.pita__butir--merah  .pita__ikon { background: rgba(255,79,123,.13); box-shadow: inset 0 0 0 1px rgba(255,79,123,.40); color: var(--crimson); }
.pita__butir--merah  .pita__teks { color: #FFC2D1; }
.pita__butir--sian   .pita__ikon { background: rgba(53,231,240,.12); box-shadow: inset 0 0 0 1px rgba(53,231,240,.38); color: var(--cyan); }
.pita__butir--sian   .pita__teks { color: #A8F3F8; }
.pita__butir--ungu   .pita__ikon { background: rgba(139,107,255,.15); box-shadow: inset 0 0 0 1px rgba(139,107,255,.42); color: var(--violet); }
.pita__butir--ungu   .pita__teks { color: #D3C6FF; }

/* ---------- Penanda siaran langsung ---------- */
.pita__langsung {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 0 20px 0 18px; position: relative;
  background: linear-gradient(300deg, rgba(255,79,123,.14), transparent 78%);
}
.pita__langsung::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(246,200,122,.55), transparent);
}
.pita__langsung i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--crimson); box-shadow: 0 0 0 0 rgba(255,79,123,.75);
  animation: pitaDenyut 2s ease-out infinite;
}
@keyframes pitaDenyut {
  0%   { box-shadow: 0 0 0 0 rgba(255,79,123,.7); }
  70%  { box-shadow: 0 0 0 9px rgba(255,79,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,79,123,0); }
}
.pita__langsung span {
  font-size: 10px; font-weight: 800; letter-spacing: 1.7px; color: #FFB9C8;
}

/* ---------- Ruang bawah supaya isi halaman tidak tertutup pita ---------- */
body.ada-pita .isi          { padding-bottom: 84px; }
body.ada-pita .rail__kaki   { padding-bottom: 16px; }
body.ada-pita footer        { padding-bottom: 74px; }
body.ada-pita .laman-masuk  { padding-bottom: 54px; }
body.ada-pita .terminal     { padding-bottom: 62px; }

@media (max-width: 900px) {
  .pita { height: 48px; }
  .pita__merek { padding: 0 12px 0 13px; gap: 8px; }
  .pita__merek img { width: 26px; height: 26px; }
  .pita__jam b { font-size: 15px; }
  .pita__jam small { display: none; }
  .pita__butir { font-size: 12.8px; gap: 7px; }
  .pita__ikon { width: 22px; height: 22px; border-radius: 7px; }
  .pita__ikon svg { width: 13px; height: 13px; }
  .pita__pisah { padding: 0 13px; }
  .pita__langsung span { display: none; }
  .pita__langsung { padding: 0 14px 0 12px; }
  body.ada-pita .isi { padding-bottom: 74px; }
}

/* Hormati pengguna yang mematikan animasi di sistemnya */
@media (prefers-reduced-motion: reduce) {
  .pita__jalur { animation: none; }
  .pita__cahaya { animation: none; }
  .pita__langsung i { animation: none; }
  .pita__jendela { overflow-x: auto; }
}

@media print { .pita { display: none !important; } }

/* =====================================================================
   22. PERBAIKAN UKURAN IKON
   SVG dari fungsi ikon() hanya membawa viewBox tanpa lebar dan tinggi.
   Elemen semacam itu, bila tidak diberi ukuran oleh CSS, diperlakukan
   peramban sebagai gambar 300x150 piksel. Di dalam susunan flex hasilnya
   ikon membengkak sampai memenuhi panel - persis yang terjadi pada
   kepala panel di seluruh aplikasi.

   Aturan di bawah menjadi jaring pengaman: setiap SVG mendapat ukuran
   yang wajar, lalu aturan yang lebih khusus di atas tetap menang untuk
   tempat yang sudah punya ukurannya sendiri.
   ===================================================================== */
.panel__kepala > svg {
  width: 20px; height: 20px; flex: none;
  color: var(--cyan);
  filter: drop-shadow(0 0 7px rgba(53, 231, 240, .45));
}
.panel__kepala > svg + div { min-width: 0; }

/* Jaring terakhir: SVG mana pun yang belum diberi ukuran tidak boleh
   melebihi tinggi satu baris teks. Memakai :not() agar tidak menimpa
   ikon yang sudah diatur, dan lambang yang memang harus besar. */
svg:not([width]):not([style*="width"]) {
  max-width: 100%;
}
.panel__isi svg:not([width]):not([style*="width"]):not(.grafik svg) {
  vertical-align: middle;
}

/* ---- Ruang bawah untuk menu samping agar tidak tertutup pita ---- */
body.ada-pita .rail { padding-bottom: 58px; }
body.ada-pita .rail__kaki { margin-bottom: 4px; }
@media (max-width: 900px) {
  body.ada-pita .rail { padding-bottom: 52px; }
}

/* =====================================================================
   23. LAPISAN LAYAR SENTUH & LAYAR KECIL                    (v1.2.0)

   Bagian ini ditambahkan agar tampilan tetap utuh di iPhone, Android,
   tablet, maupun layar lebar. Seluruh aturan di sini dikunci dengan
   "@media screen" supaya TIDAK satu pun ikut terbawa saat mencetak
   laporan - hasil cetak F4/A4 tetap persis seperti sebelumnya.

   Urutan bahasan:
     23.1  Dasar peramban ponsel
     23.2  Tinggi layar sesungguhnya (100dvh)
     23.3  Tepi aman iPhone (poni & garis geser)
     23.4  Kolom isian 16px - menahan perbesaran otomatis iOS
     23.5  Sasaran sentuh & sisa efek hover
     23.6  Menu samping: layar peredup + kunci gulir
     23.7  Bilah atas
     23.8  Susunan kisi & kartu statistik
     23.9  Kepala panel, saringan, penomoran halaman
     23.10 Tabel data menjadi kartu
     23.11 Jendela menjadi lembar geser bawah
     23.12 Pesan mengambang
     23.13 Halaman masuk
     23.14 Terminal gerbang
     23.15 Pita running text
     23.16 Layar ponsel rebah (landscape)
   ===================================================================== */

/* ---------- 23.1 Dasar peramban ponsel ---------- */
@media screen {
  html {
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }
  body {
    -webkit-tap-highlight-color: rgba(53, 231, 240, .16);
    overscroll-behavior-y: none;
  }
  img, video, canvas { max-width: 100%; }

  /* Tidak ada satu pun elemen yang boleh melebar melewati induknya */
  .utama, .isi, .panel, .panel__isi, .bilah__judul { min-width: 0; }
  .bingkai-tabel, .arus, .rail__menu { -webkit-overflow-scrolling: touch; }
}

/* ---------- 23.2 Tinggi layar sesungguhnya ----------
   Di ponsel, 100vh dihitung TANPA memperhitungkan bilah alamat peramban,
   sehingga bagian bawah halaman selalu tersembunyi. Satuan dvh mengikuti
   tinggi yang benar-benar terlihat. */
@media screen {
  @supports (height: 100dvh) {
    .tata        { min-height: 100dvh; }
    .rail        { height: 100dvh; }
    .terminal    { min-height: 100dvh; }
    .laman-masuk { min-height: 100dvh; }
    .jendela     { max-height: 88dvh; }
  }
}

/* ---------- 23.3 Tepi aman iPhone ----------
   Halaman memakai viewport-fit=cover supaya latar mengisi penuh sampai
   ke tepi. Karena itu isi halaman harus digeser sendiri agar tidak
   tertutup poni di atas atau garis geser di bawah. */
@media screen and (max-width: 900px) {
  .bilah {
    padding-top:   calc(13px + env(safe-area-inset-top));
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .isi {
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .terminal {
    padding-top:   calc(14px + env(safe-area-inset-top));
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .rail { padding-top: env(safe-area-inset-top); }
  .masuk__kanan, .masuk__kiri {
    padding-left:  max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
}

/* ---------- 23.4 Kolom isian 16px ----------
   Safari iOS memperbesar halaman sendiri begitu kolom isian yang
   hurufnya di bawah 16px disentuh, lalu halaman tertinggal dalam
   keadaan tergeser. Menyamakan huruf ke 16px menghentikan perilaku itu
   sepenuhnya - ini satu-satunya cara yang bekerja. */
@media screen and (max-width: 900px) {
  /* Tanda seru diperlukan: sebagian kolom membawa font-size sendiri di
     atribut style (nomor laporan, unggah logo, alamat gateway), dan
     aturan sebaris selalu mengalahkan berkas gaya. Tanpa ini, tiga
     halaman itu tetap membuat iPhone memperbesar layar. */
  .masukan,
  select.masukan,
  textarea.masukan,
  input[type="text"], input[type="password"], input[type="search"],
  input[type="number"], input[type="tel"], input[type="email"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="file"], select, textarea {
    font-size: 16px !important;
  }
  textarea.masukan { line-height: 1.6; }
  select.masukan { background-position: right 14px center; padding-right: 42px; }

  /* Kolom pembacaan kartu di terminal memang sengaja lebih besar */
  .kotak-pindai .masukan { font-size: 18px !important; }
}

/* ---------- 23.5 Sasaran sentuh & sisa efek hover ----------
   Jari bukan tetikus: tombol perlu tinggi sekitar 44px, dan efek
   melayang saat disorot harus dimatikan karena di layar sentuh efek itu
   menempel setelah jari diangkat. */
@media screen and (hover: none) and (pointer: coarse) {
  .tbl             { min-height: 44px; padding: 11px 18px; }
  .tbl--kecil      { min-height: 40px; padding: 9px 14px; }
  .tbl--ikon       { min-width: 44px; min-height: 44px; padding: 10px; }
  .tbl:hover       { transform: none; }
  .menu__tautan    { padding: 13px 14px; }
  .menu__tautan:hover { transform: none; background: none; }
  .menu__tautan.aktif:hover {
    background: linear-gradient(100deg, rgba(139,107,255,.28), rgba(53,231,240,.12) 60%, transparent);
  }
  .stat:hover      { box-shadow: var(--bayang); }
  table.data tbody tr:hover { background: none; }
  .halaman a, .halaman span { min-width: 42px; height: 42px; }
  .pias a          { padding: 10px 15px; }
  .tutup           { min-width: 40px; min-height: 40px; display: grid; place-items: center; }
  input[type="checkbox"] { min-width: 20px; min-height: 20px; }
}

/* ---------- 23.6 Menu samping ----------
   Menu geser sudah ada, tetapi tanpa layar peredup di belakangnya
   pengguna tidak tahu harus menyentuh di mana untuk menutupnya, dan
   halaman di belakang masih ikut tergulir. */
@media screen and (max-width: 900px) {
  .rail {
    width: min(var(--lebar-rail), 84vw);
    flex-basis: min(var(--lebar-rail), 84vw);
    z-index: 760;
    overscroll-behavior: contain;
  }
  .rail.buka { box-shadow: 26px 0 70px -26px rgba(0,0,0,.95); }

  /* Layar peredup: satu elemen semu, tanpa perlu tambahan HTML */
  .utama::before {
    content: ""; position: fixed; inset: 0; z-index: 750;
    background: rgba(2, 4, 10, .62);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .rail.buka + .utama::before { opacity: 1; visibility: visible; }

  /* Dikunci oleh app.js selama menu terbuka */
  body.menu-terbuka { overflow: hidden; }

  .tbl.tombol-menu {
    display: grid; place-items: center;
    min-width: 42px; min-height: 42px; padding: 8px;
    border: 1px solid var(--line-kuat); border-radius: 12px;
    background: rgba(120, 150, 255, .08);
  }
  .tombol-menu svg { width: 20px; height: 20px; }
}

/* Perbaikan bawaan: ".tombol-menu { display:none }" di bagian 4 ditulis
   SEBELUM ".tbl { display:inline-flex }" di bagian 7. Keduanya sama kuat,
   sehingga yang ditulis belakangan menang - tombol hamburger ikut tampil
   di layar lebar padahal menu samping sudah terpampang. Dinaikkan
   kekuatannya dengan menyebut kedua kelas sekaligus. */
@media screen and (min-width: 901px) {
  .tbl.tombol-menu { display: none; }
}

/* ---------- 23.7 Bilah atas ---------- */
@media screen and (max-width: 760px) {
  .bilah { gap: 11px; }
  .bilah__judul h1 {
    font-size: 17px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bilah__judul p {
    font-size: 11.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .jam-hidup { font-size: 15.5px; letter-spacing: .5px; }
  .jam-hidup small { font-size: 9.5px; }
}
@media screen and (max-width: 460px) {
  .bilah { gap: 9px; }
  .bilah__judul p  { display: none; }
  .jam-hidup       { font-size: 14px; }
  .jam-hidup small { display: none; }
}

/* ---------- 23.8 Susunan kisi & kartu statistik ----------
   Sebelumnya semua kisi langsung jatuh ke satu lajur di bawah 900px,
   sehingga tablet dan ponsel sama-sama menjadi daftar memanjang. */
@media screen and (min-width: 561px) and (max-width: 900px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
/* Ponsel 360px ke atas tetap dua lajur untuk kartu statistik: empat
   kartu bertumpuk satu lajur memakan empat layar penuh hanya untuk
   angka ringkasan. Di bawah 360px baru dijadikan satu lajur. */
@media screen and (min-width: 359px) and (max-width: 560px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 560px) {
  .baris        { gap: 12px; }
  .stat         { padding: 15px 14px; border-radius: 20px; }
  .stat__ikon   { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 10px; }
  .stat__ikon svg { width: 17px; height: 17px; }
  .stat__label  { font-size: 10px; letter-spacing: .9px; }
  .stat__nilai  { font-size: 26px; letter-spacing: -1px; }
  .stat__kaki   { font-size: 11px; margin-top: 3px; }
  .isi          { padding-top: 18px; }
}
/* Empat pencacah di terminal gerbang selalu dua lajur */
@media screen and (max-width: 900px) {
  .sisi .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 23.9 Kepala panel, saringan, penomoran halaman ---------- */
@media screen and (max-width: 640px) {
  .panel        { border-radius: var(--r-m); }
  .panel__kepala {
    flex-wrap: wrap; padding: 15px 16px; gap: 10px 11px;
  }
  .panel__kepala > div { min-width: 0; }
  .panel__kepala .kanan { flex-wrap: wrap; gap: 8px; }
  .panel__isi   { padding: 16px; }

  /* Saringan pencarian: satu kolom penuh per baris, tombol melebar */
  .saring          { gap: 10px; }
  .saring .bidang  { flex: 1 1 100% !important; min-width: 0 !important; }
  .saring .tbl     { flex: 1 1 auto; justify-content: center; }
}
@media screen and (max-width: 520px) {
  .panel__kepala .kanan { width: 100%; margin-left: 0; }
  .panel__kepala .kanan .tbl { flex: 1 1 auto; justify-content: center; }
  .panel__kepala .kanan .mini { flex: 1 1 100%; }
}

/* ---------- 23.10 Tabel data menjadi kartu ----------
   Tabel tujuh lajur tidak terbaca di layar 360px, dan menggeser ke
   samping membuat lajur nama hilang dari pandangan. Di bawah 640px tiap
   BARIS berubah menjadi satu kartu dengan nama lajur tercetak di atas
   nilainya. Nama lajur itu diambil sendiri dari <thead> oleh app.js,
   jadi tidak ada satu pun berkas PHP yang perlu diubah.

   Nilai ditumpuk di bawah labelnya - bukan disandingkan - karena banyak
   sel berisi lebih dari satu anak (<br>, <span>, lencana). Kalau sel
   dijadikan flex, anak-anak itu akan berbaris ke samping dan justru
   merusak tampilan. */
@media screen and (max-width: 640px) {
  .bingkai-tabel { overflow: visible; border-radius: 0; }

  table.data        { display: block; width: 100%; font-size: 13.5px; }
  table.data thead  { display: none; }
  table.data tbody  { display: block; }

  table.data tbody tr {
    display: block;
    margin: 0 12px 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--kaca-tipis);
    overflow: hidden;
  }
  table.data tbody tr:last-child { margin-bottom: 12px; }

  table.data tbody td {
    display: block;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 8px 14px;
    text-align: left;
    white-space: normal;
    border-bottom: 1px solid rgba(140, 165, 255, .08);
  }
  table.data tbody td:last-child { border-bottom: 0; }

  table.data tbody td[data-judul]::before {
    content: attr(data-judul);
    display: block; margin-bottom: 2px;
    font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--teks-redup); font-weight: 700;
  }

  /* Sel pertama menjadi kepala kartu */
  table.data tbody td:first-child {
    padding-top: 11px;
    background: rgba(120, 150, 255, .05);
  }

  /* Lajur nomor urut ("#") tidak perlu barisnya sendiri di kartu.
     Diletakkan sebagai angka kecil di pojok kanan kepala kartu. */
  table.data tbody td[data-judul="#"] {
    position: absolute; right: 12px; margin-top: 9px;
    padding: 0; border: 0; background: none;
    font-family: var(--font-data); font-size: 11px; color: var(--teks-redup);
  }
  table.data tbody td[data-judul="#"]::before { display: none; }
  table.data tbody tr { position: relative; }
  table.data tbody td[data-judul="#"] + td { padding-right: 44px; }

  /* Lajur tanpa nama (tombol ubah/hapus) - dirapatkan ke kanan */
  table.data tbody td.kolom-aksi {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: flex-end;
    padding: 10px 12px;
    background: rgba(4, 7, 18, .35);
  }
  table.data tbody td.kanan:not(.kolom-aksi) { text-align: left; }

  /* Kolom isian di dalam sel (jadwal gerbang) memakai lebar penuh */
  table.data tbody td .masukan,
  table.data tbody td input[type="time"] {
    width: 100% !important;
    padding: 10px 12px !important;
  }

  /* Baris "belum ada data" bukan kartu, melainkan pesan polos */
  table.data tbody tr.baris-kosong {
    display: block; margin: 0; border: 0; background: none;
  }
  table.data tbody tr.baris-kosong td {
    display: block; padding: 0; border: 0; background: none;
  }
  table.data tbody tr.baris-kosong td::before { display: none; }

  .halaman { margin-top: 14px; }
}

/* ---------- 23.11 Jendela menjadi lembar geser bawah ----------
   Di ponsel, jendela mengambang di tengah layar selalu berbenturan
   dengan papan ketik. Lembar yang naik dari dasar layar jauh lebih
   nyaman dan sudah menjadi kebiasaan pengguna ponsel. */
@media screen and (max-width: 640px) {
  .tirai { padding: 0; align-items: end; justify-items: stretch; }
  .jendela,
  .jendela--lebar {
    width: 100%; max-width: none;
    max-height: 92vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: naik-lembar .32s cubic-bezier(.2, .8, .25, 1);
  }
  @supports (max-height: 92dvh) {
    .jendela, .jendela--lebar { max-height: 92dvh; }
  }
  .jendela::before {
    content: ""; flex: none;
    width: 42px; height: 4px; margin: 9px auto 0;
    border-radius: 4px; background: var(--line-kuat);
  }
  .jendela__kepala { padding: 14px 18px; flex: none; }
  .jendela__isi    { padding: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .jendela__kaki   { padding: 14px 18px; flex: none; flex-wrap: wrap; }
  .jendela__kaki .tbl { flex: 1 1 auto; justify-content: center; }
}
@keyframes naik-lembar {
  from { opacity: .4; transform: translateY(100%); }
  to   { opacity: 1;  transform: none; }
}

/* ---------- 23.12 Pesan mengambang ---------- */
@media screen and (max-width: 560px) {
  .wadah-pesan {
    left: 10px; right: 10px;
    top: calc(10px + env(safe-area-inset-top));
  }
  .pesan { min-width: 0; max-width: none; width: 100%; }
}

/* ---------- 23.13 Halaman masuk ----------
   Sebelumnya seluruh sisi kiri disembunyikan di ponsel sehingga logo
   Kemenag dan nama madrasah ikut hilang. Sekarang barisan logo tetap
   tampil sebagai kepala halaman, hanya uraian panjangnya yang dilipat. */
@media screen and (max-width: 900px) {
  .laman-masuk { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .masuk__kiri {
    display: flex;
    justify-content: flex-start;
    padding: calc(20px + env(safe-area-inset-top)) 18px 0;
  }
  .masuk__kiri > div:nth-of-type(2),
  .masuk__kiri > p.mini { display: none; }
  .masuk__kanan { padding: 22px 18px 30px; align-content: center; }
  .masuk__kartu { padding: 26px 22px; max-width: 460px; }
}
@media screen and (max-width: 400px) {
  .masuk__kartu { padding: 22px 18px; }
  .logo-pasangan img { width: 38px; height: 38px; }
  .logo-pasangan .logo-pasangan__garis { height: 30px; }
}

/* ---------- 23.14 Terminal gerbang ----------
   Kepala terminal berisi dua lambang, nama madrasah, pita mode, jam
   besar, dan tombol beranda dalam satu baris kaku selebar 620px. Di
   ponsel baris itu meluber ratusan piksel. Elemen semu ::after dipakai
   sebagai pemutus baris supaya susunannya terkendali:
     baris 1 - lambang, nama madrasah, tombol beranda
     baris 2 - pita mode di kiri, jam di kanan */
@media screen and (max-width: 820px) {
  .terminal__kepala { flex-wrap: wrap; gap: 10px 12px; }
  .terminal__kepala > img.terminal__lambang { order: 1; }
  .terminal__kepala > .id      { order: 2; flex: 1 1 120px; min-width: 0; }
  .terminal__kepala > a.tbl    { order: 3; margin-left: 0 !important; }
  .terminal__kepala::after     { content: ""; order: 4; flex: 1 0 100%; height: 0; }
  .terminal__kepala > .pita-mode      { order: 5; margin-left: 0 !important; }
  .terminal__kepala > .terminal__papan { order: 6; margin-left: auto; }

  .terminal__jam   { font-size: 30px; letter-spacing: 1px; }
  .arena           { gap: 14px; }
  .sisi            { max-height: none; }
  .gerbang         { padding: 20px; border-radius: var(--r-l); }
  .portal          { width: min(42vh, 76vw, 340px); }
}
@media screen and (max-width: 560px) {
  .terminal__kepala .id b     { font-size: 14.5px; }
  .terminal__kepala .id small { font-size: 10.5px; letter-spacing: .9px; }
  .terminal__lambang          { width: 40px; height: 40px; }
  .terminal__jam              { font-size: 26px; }
  .terminal__tanggal          { font-size: 11px; }
  .pita-mode                  { font-size: 11px; padding: 6px 13px; letter-spacing: 1.2px; }

  .gerbang        { padding: 14px; }
  .portal         { width: min(38vh, 80vw, 300px); }
  .portal__inti   { padding: 14px; }
  .portal__inti .ikon svg { width: 40px; height: 40px; }
  .portal__inti .pesan    { font-size: 14.5px; margin-top: 9px; }
  .portal__inti .rinci    { font-size: 11px; }

  .identitas          { padding: 14px 14px 16px; gap: 11px; }
  .identitas__foto    { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
  .identitas__nama    { font-size: 15.5px; }
  .identitas__meta    { font-size: 11.5px; }
  .identitas__jam     { font-size: 19px; }

  .kotak-pindai .masukan { font-size: 17px; letter-spacing: 2px; padding: 13px; }
  .arus                  { max-height: 40vh; }
}

/* ---------- 23.15 Pita running text ----------
   Pita menempel di dasar layar, tepat di tempat garis geser iPhone
   berada. Tinggi dibuat mengikuti tepi aman supaya isinya tidak
   tertutup, dan ruang bawah halaman ikut menyesuaikan. */
@media screen {
  .pita {
    height: auto;
    min-height: 54px;
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body.ada-pita .isi          { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.ada-pita .terminal     { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  body.ada-pita .laman-masuk  { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  body.ada-pita .rail         { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}
@media screen and (max-width: 900px) {
  .pita { min-height: 48px; }
  body.ada-pita .isi  { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.ada-pita .rail { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* ---------- 23.16 Layar ponsel rebah (landscape) ----------
   Saat HP diputar, tinggi layar tinggal sekitar 380px. Lingkaran gerbang
   harus mengecil mengikuti tinggi, bukan lebar. */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .terminal        { padding: 10px 14px; gap: 10px; }
  .terminal__jam   { font-size: 24px; }
  .portal          { width: min(52vh, 40vw, 240px); }
  .gerbang         { padding: 10px; }
  .masuk__kanan    { align-content: start; }
  .jendela         { max-height: 96vh; }
}

/* =====================================================================
   24. LAYAR SAMBUT & HAK CIPTA                               (v1.3.0)
   ===================================================================== */

/* ---------- 24.1 Layar sambut ----------
   Muncul saat aplikasi dibuka, lalu memudar begitu halaman siap.
   Seluruhnya disembunyikan saat mencetak. */
@media screen {

  .sambut {
    position: fixed; inset: 0; z-index: 99999;
    display: grid; place-items: center;
    background: var(--void, #04060E);
    opacity: 1;
    transition: opacity .55s ease, visibility .55s ease;
    /* Pengaman kedua: menutup sendiri pada detik ke-6 walau JavaScript
       tidak berjalan sama sekali. Pengguna tidak boleh terkunci di layar
       tunggu hanya karena satu berkas gagal diunduh. */
    animation: sambut-pengaman .01s linear 5s forwards;
  }
  .sambut--tutup {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  @keyframes sambut-pengaman {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
  }

  /* Latar berlapis: dua kabut warna yang bernapas pelan. Gerakannya
     sengaja lambat (14 detik) supaya terasa tenang dan mahal, bukan
     sibuk seperti animasi pemuat biasa. */
  .sambut__latar {
    position: absolute; inset: 0;
    background:
      radial-gradient(60% 55% at 50% 34%, rgba(53, 231, 240, .16), transparent 68%),
      radial-gradient(52% 48% at 50% 68%, rgba(139, 107, 255, .16), transparent 70%),
      var(--void, #04060E);
    animation: sambut-napas 14s ease-in-out infinite;
  }
  @keyframes sambut-napas {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.08); opacity: .82; }
  }

  .sambut__isi {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 24px;
    animation: sambut-naik .8s cubic-bezier(.2, .8, .25, 1) both;
  }
  @keyframes sambut-naik {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* Lambang dengan cincin cahaya yang berputar */
  .sambut__cincin {
    position: relative;
    width: 132px; height: 132px;
    display: grid; place-items: center;
    margin-bottom: 26px;
  }
  /* Cincin dasar yang selalu terlihat. Tanpa ini, saat berkas cahaya
     berada di sisi seberang, bentuk lingkarannya hilang sama sekali dan
     lambang tampak melayang tanpa bingkai. */
  .sambut__cincin::before {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(120, 150, 255, .16);
  }
  .sambut__orbit {
    position: absolute; inset: -3px;
    border-radius: 50%;
    /* Sapuan kerucut: satu berkas cahaya mengelilingi lambang. Ditutup
       masker cincin supaya hanya tepinya yang bercahaya. */
    background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(53, 231, 240, .06) 120deg,
      rgba(53, 231, 240, .38) 232deg,
      var(--cyan, #35E7F0) 300deg,
      #A78BFF 338deg,
      rgba(167, 139, 255, .5) 352deg,
      transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 63px, #000 64.5px, #000 69px, transparent 70.5px);
            mask: radial-gradient(circle, transparent 63px, #000 64.5px, #000 69px, transparent 70.5px);
    filter: drop-shadow(0 0 9px rgba(53, 231, 240, .5));
    animation: sambut-putar 1.5s linear infinite;
  }
  @keyframes sambut-putar { to { transform: rotate(360deg); } }

  /* Denyut lembut di belakang lambang */
  .sambut__nadi {
    position: absolute; inset: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(53, 231, 240, .22), transparent 70%);
    animation: sambut-denyut 2.6s ease-in-out infinite;
  }
  @keyframes sambut-denyut {
    0%, 100% { transform: scale(.9);  opacity: .55; }
    50%      { transform: scale(1.1); opacity: 1; }
  }

  .sambut__logo {
    position: relative;
    width: 78px; height: 78px; object-fit: contain;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6));
    animation: sambut-timbul 1s cubic-bezier(.2, .8, .25, 1) both;
  }
  @keyframes sambut-timbul {
    from { opacity: 0; transform: scale(.82); }
    to   { opacity: 1; transform: none; }
  }

  .sambut__nama {
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    letter-spacing: .3px; color: var(--teks);
  }
  .sambut__sub {
    margin-top: 5px;
    font-size: 11.5px; letter-spacing: 2.6px; text-transform: uppercase;
    color: var(--teks-redup);
  }

  /* Bilah kemajuan takterhingga: satu berkas meluncur bolak-balik */
  .sambut__bilah {
    margin-top: 26px;
    width: 172px; height: 3px; border-radius: 3px;
    background: rgba(120, 150, 255, .14);
    overflow: hidden;
  }
  .sambut__bilah i {
    display: block; width: 42%; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--cyan, #35E7F0), var(--violet, #8B6BFF));
    animation: sambut-luncur 1.25s cubic-bezier(.6, 0, .4, 1) infinite;
  }
  @keyframes sambut-luncur {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(345%); }
  }

  /* ---------- Garis kemajuan untuk perpindahan halaman berikutnya ----------
     Layar penuh hanya pantas sekali per sesi. Sesudah itu cukup garis
     tipis di puncak layar. */
  .garis-muat {
    position: fixed; top: 0; left: 0; height: 2.5px; width: 0;
    z-index: 99998;
    background: linear-gradient(90deg, var(--cyan, #35E7F0), var(--violet, #8B6BFF), var(--gold, #F5C451));
    box-shadow: 0 0 12px rgba(53, 231, 240, .65);
    opacity: 0;
    transition: width .25s ease, opacity .3s ease;
  }
  .garis-muat.jalan { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .sambut__latar, .sambut__orbit, .sambut__nadi,
    .sambut__logo, .sambut__isi, .sambut__bilah i { animation: none; }
    .sambut__orbit { opacity: .5; }
  }

  @media (max-width: 480px) {
    .sambut__cincin { width: 116px; height: 116px; }
    .sambut__orbit {
      -webkit-mask: radial-gradient(circle, transparent 55px, #000 56.5px, #000 61px, transparent 62.5px);
              mask: radial-gradient(circle, transparent 55px, #000 56.5px, #000 61px, transparent 62.5px);
    }
    .sambut__logo { width: 66px; height: 66px; }
    .sambut__nama { font-size: 17px; }
    .sambut__bilah { width: 148px; }
  }
}
@media print { .sambut, .garis-muat { display: none !important; } }

/* ---------- 24.2 Hak cipta ---------- */
@media screen {
  .hakcipta {
    margin-top: 30px;
    padding: 22px 16px 26px;
    text-align: center;
    position: relative;
  }

  /* Garis pemisah yang memudar di kedua ujungnya - lebih halus daripada
     garis lurus yang berhenti mendadak. */
  .hakcipta::before {
    content: ""; position: absolute; top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(120, 150, 255, .1) 18%,
      rgba(53, 231, 240, .34) 50%,
      rgba(120, 150, 255, .1) 82%,
      transparent);
  }

  .hakcipta__utama {
    font-family: var(--font-display);
    font-size: 13px; font-weight: 600; letter-spacing: .2px;
    color: var(--teks-lembut);
    display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: wrap; justify-content: center;
  }
  .hakcipta__lambang {
    width: 20px; height: 20px; object-fit: contain;
    opacity: .92; flex: none;
  }

  /* Nama madrasah memakai gradasi emas - merah - ungu yang sama dengan
     judul halaman masuk, supaya satu bahasa rupa di seluruh aplikasi. */
  .hakcipta__nama {
    background: linear-gradient(110deg, var(--gold), var(--crimson) 48%, var(--violet));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 800;
  }

  .hakcipta__pisah { color: var(--line-kuat); font-weight: 400; }

  .hakcipta__sub {
    margin-top: 7px;
    font-size: 11px; letter-spacing: .7px;
    color: var(--teks-redup);
  }
  .hakcipta__sub b {
    font-weight: 700; letter-spacing: .3px;
    color: var(--teks-lembut);
  }

  .hakcipta__versi {
    display: inline-block; margin-top: 10px;
    padding: 3px 11px; border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(120, 150, 255, .05);
    font-family: var(--font-data); font-size: 9.5px; letter-spacing: 1.1px;
    color: var(--teks-redup); text-transform: uppercase;
  }

  /* Di layar sempit, "Hak Cipta Dilindungi" turun ke baris kedua dan
     titik pemisahnya jadi menggantung di ujung baris pertama. Titik itu
     disembunyikan, dan keterangannya diturunkan bobotnya supaya tidak
     bersaing dengan nama madrasah. */
  @media (max-width: 560px) {
    .hakcipta__pisah  { display: none; }
    .hakcipta__utama  { gap: 3px 8px; }
    .hakcipta__lindung {
      flex: 1 1 100%;
      font-family: var(--font-body);
      font-size: 11.5px; font-weight: 500; letter-spacing: .4px;
      color: var(--teks-redup);
    }
  }
  @media (max-width: 480px) {
    .hakcipta       { padding: 18px 12px 22px; margin-top: 22px; }
    .hakcipta__utama { font-size: 12px; }
    .hakcipta__sub   { font-size: 10.5px; }
  }
}
@media print { .hakcipta { display: none !important; } }

/* =====================================================================
   25. HALAMAN KUNCI PENGATURAN                               (v1.4.0)
   ===================================================================== */
@media screen {
  .kunci-laman {
    display: grid; place-items: center;
    min-height: 58vh;
    padding: 20px 0 40px;
  }
  .kunci-kartu {
    width: 100%; max-width: 420px;
    padding: 32px 30px 26px;
    text-align: center;
  }
  .kunci-kartu__gembok {
    width: 62px; height: 62px; margin: 0 auto 18px;
    border-radius: 20px;
    display: grid; place-items: center;
    color: var(--gold);
    background: radial-gradient(circle at 50% 30%, rgba(246, 200, 122, .18), rgba(246, 200, 122, .05));
    box-shadow: inset 0 0 0 1px rgba(246, 200, 122, .28), 0 12px 28px -14px rgba(246, 200, 122, .5);
  }
  .kunci-kartu__judul {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    letter-spacing: -.3px;
  }
  .kunci-kartu__sub {
    margin: 8px auto 22px; max-width: 34ch;
    font-size: 13px; line-height: 1.6; color: var(--teks-redup);
    text-wrap: balance;
  }
  .kunci-kartu .bidang { text-align: left; }
  .kunci-kartu__kembali {
    width: 100%; margin-top: 10px; justify-content: center;
  }
  .kunci-kartu__nota {
    margin-top: 16px; font-size: 11px; line-height: 1.6;
    color: var(--teks-redup);
  }
  @media (max-width: 480px) {
    .kunci-kartu { padding: 26px 20px 22px; }
    .kunci-kartu__judul { font-size: 18px; }
  }
}

/* Tanda gembok pada menu Pengaturan di bilah samping */
@media screen {
  .menu__gembok {
    margin-left: auto;
    display: grid; place-items: center;
    color: var(--gold);
    opacity: .62;
    flex: none;
  }
  .menu__tautan.aktif .menu__gembok { opacity: 1; }
  .menu__gembok svg { width: 13px; height: 13px; }
}

/* =====================================================================
   ABSEN MANUAL
   Ditulis menyambung tema "Gerbang Cahaya": kaca gelap, garis tipis
   kebiruan, dan satu warna penanda per status. Setiap status punya rona
   sendiri supaya petugas mengenali keadaan siswa tanpa perlu membaca
   labelnya - berguna saat menyisir satu kelas berisi 35 kartu.
   ===================================================================== */

/* Rona per status. Dikumpulkan di satu tempat supaya menambah status
   baru kelak cukup menyalin satu blok, bukan menyunting belasan aturan. */
/* Tiap rona membawa TIGA nilai siap pakai: warna penuh, isian lembut,
   dan warna garis. Sempat ditulis dengan color-mix() agar ringkas,
   tetapi diukur ternyata mahal: tiga color-mix per kartu dikali ratusan
   kartu membuat peramban menghitung ulang warna setiap kali daftar
   bertambah, dan bingkai gulir melonjak sampai 2 detik. Nilai tetap
   tidak perlu dihitung sama sekali. */
.am-kartu--emerald, .am-siswa--emerald, .am-cip--emerald, .am-pilih--emerald {
  --rona: #3DF5A5; --rona-isi: rgba(61,245,165,.13); --rona-garis: rgba(61,245,165,.32);
}
.am-kartu--cyan, .am-siswa--cyan, .am-cip--cyan, .am-pilih--cyan,
.am-kartu--semua {
  --rona: #35E7F0; --rona-isi: rgba(53,231,240,.13); --rona-garis: rgba(53,231,240,.32);
}
.am-kartu--violet, .am-siswa--violet, .am-cip--violet, .am-pilih--violet {
  --rona: #8B6BFF; --rona-isi: rgba(139,107,255,.14); --rona-garis: rgba(139,107,255,.34);
}
.am-kartu--gold, .am-siswa--gold, .am-cip--gold, .am-pilih--gold {
  --rona: #F6C87A; --rona-isi: rgba(246,200,122,.13); --rona-garis: rgba(246,200,122,.32);
}
.am-kartu--crimson, .am-siswa--crimson, .am-cip--crimson, .am-pilih--crimson {
  --rona: #FF4F7B; --rona-isi: rgba(255,79,123,.13); --rona-garis: rgba(255,79,123,.32);
}
.am-kartu--kosong, .am-siswa--kosong, .am-cip--kosong {
  --rona: #61719E; --rona-isi: rgba(97,113,158,.14); --rona-garis: rgba(97,113,158,.34);
}

/* ---------------------------------------------------------------------
   ATRIBUT hidden HARUS SELALU MENANG
   ---------------------------------------------------------------------
   Peramban memberi [hidden] aturan display:none dengan kekhususan paling
   rendah, sehingga SETIAP aturan penulis yang menyebut display:flex atau
   display:grid akan mengalahkannya. Elemen yang sudah disetel hidden oleh
   JavaScript tetap terlihat, dan tidak ada pesan galat apa pun.

   Bug ini sudah muncul empat kali di aplikasi ini: jendela QR gateway
   (dua kali), blok "Jam kehadiran" pada Absen Manual, dan kotak kosong
   pada Gerbang Izin yang tetap tampak di balik kartu hasil pembacaan.

   Satu aturan menyeluruh ini menutup seluruh golongan bug tersebut, dan
   menghapus kewajiban mengingat pasangan [hidden] setiap kali menulis
   display:flex. !important dipakai dengan sengaja: itulah satu-satunya
   cara memenangkan aturan berkekhususan rendah ini.
   ------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------- Panel saringan ---------- */
.am-saring__baris {
  display: grid;
  grid-template-columns: 190px 1fr 2fr auto;
  gap: 14px;
  align-items: end;
}
.am-cari { position: relative; display: flex; align-items: center; }
.am-cari svg { position: absolute; left: 13px; color: var(--teks-redup); pointer-events: none; }
.am-cari .masukan { padding-left: 40px; }

.am-libur {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--r-s);
  border: 1px solid rgba(246, 200, 122, .32);
  background: rgba(246, 200, 122, .09);
  color: #F6D9A6;
  font-size: 13.5px;
}

/* ---------- Pita ringkasan ---------- */
.am-pita {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.am-kartu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 14px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--kaca-tipis);
  color: var(--teks-lembut);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s, transform .18s, background .18s;
}
/* Pita cahaya tipis di tepi atas: penanda warna yang tetap terbaca
   walau kartunya sedang tidak dipilih. */
.am-kartu::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--rona); opacity: .5;
}
.am-kartu:hover { transform: translateY(-2px); border-color: var(--line-kuat); }
.am-kartu.aktif {
  border-color: var(--rona);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(10,15,34,.5));
  box-shadow: 0 0 0 1px var(--rona) inset, 0 14px 34px -18px var(--rona);
}
.am-kartu.aktif::before { opacity: 1; }
.am-kartu__angka {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 800; line-height: 1.1;
  color: var(--rona);
}
.am-kartu__nama { font-size: 11.5px; letter-spacing: .35px; text-transform: uppercase; }

/* ---------- Daftar siswa ---------- */
/* 340px sempat dipakai dan menghasilkan tiga lajur pada layar 1440px.
   Ruangnya tidak cukup: nama siswa terpotong menjadi "Aisyah Kusum...".
   420px memberi dua lajur yang lapang pada layar biasa, dan tetap tiga
   lajur pada layar lebar. */
.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.am-muat { padding: 44px 20px; text-align: center; color: var(--teks-redup); grid-column: 1 / -1; }
.am-muat--galat { color: var(--crimson); }

.am-siswa {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--kaca-tipis);
  color: var(--teks);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, transform .16s, background .16s;
}
.am-siswa:hover { transform: translateY(-2px); border-color: var(--rona); background: var(--kaca); }
/* Garis warna status di tepi kiri. Lebih tenang daripada mewarnai
   seluruh kartu, tetapi tetap terbaca sekali lihat. */
.am-siswa { border-left: 3px solid var(--rona); }

.am-siswa__avatar {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--rona);
  background: var(--rona-isi);
  border: 1px solid var(--rona-garis);
}
.am-siswa__teks { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.am-siswa__nama {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-siswa__meta {
  font-size: 11.5px; color: var(--teks-redup);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-siswa__kanan {
  flex: 0 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}

.am-cip {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 999px;
  color: var(--rona);
  background: var(--rona-isi);
  border: 1px solid var(--rona-garis);
  white-space: nowrap;
}
.am-siswa__tanda { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.am-tanda {
  font-style: normal; font-family: var(--font-data);
  font-size: 10px; padding: 1px 6px; border-radius: 5px;
  color: var(--teks-redup); background: rgba(140, 165, 255, .09);
  border: 1px solid var(--line);
}
.am-tanda--bukti  { color: var(--emerald); border-color: rgba(61, 245, 165, .3); }
.am-tanda--manual { color: var(--violet);  border-color: rgba(139, 107, 255, .3); }
.am-tanda--tanpa  { color: var(--amber);   border-color: rgba(255, 180, 67, .3); }

/* ---------- Mode pilih beberapa ---------- */
.am-siswa__pilih { display: none; }
body.am-mode-pilih .am-siswa__pilih {
  display: grid; place-items: center;
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  border: 1.6px solid var(--line-kuat); background: rgba(0,0,0,.25);
}
body.am-mode-pilih .am-siswa.dipilih .am-siswa__pilih {
  background: var(--cyan); border-color: var(--cyan);
}
body.am-mode-pilih .am-siswa.dipilih .am-siswa__pilih::after {
  content: ""; width: 10px; height: 6px; margin-top: -3px;
  border-left: 2.4px solid #04060E; border-bottom: 2.4px solid #04060E;
  transform: rotate(-45deg);
}
body.am-mode-pilih .am-siswa.dipilih { border-color: var(--cyan); background: var(--kaca); }
.am-alat { display: flex; gap: 8px; }

/* ---------- Bilah tindakan massal ---------- */
.am-bilah {
  /* 54px tinggi pita teks berjalan + 16px jarak napas. */
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-kuat);
  background: linear-gradient(160deg, rgba(24,32,66,.97), rgba(10,15,34,.95));
  box-shadow: var(--bayang);
  backdrop-filter: blur(14px);
}
.am-bilah__kiri { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--teks-lembut); }
.am-bilah__kiri b { color: var(--cyan); font-family: var(--font-display); font-size: 17px; }

/* ---------- Jendela pencatatan ---------- */
.am-kepala { display: flex; align-items: center; gap: 13px; }
.am-kepala__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
  color: var(--gold);
  background: rgba(246, 200, 122, .12);
  border: 1px solid rgba(246, 200, 122, .3);
}
.am-kepala__teks { min-width: 0; flex: 1; }
.am-kepala__teks h3 { margin: 0; font-size: 17px; }
.am-kepala__teks p { margin: 1px 0 0; font-size: 12px; color: var(--teks-redup); }

.am-isi { display: flex; flex-direction: column; gap: 20px; }
.am-bagian { display: flex; flex-direction: column; gap: 9px; }
.am-bagian__judul {
  font-size: 11px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--teks-redup); font-weight: 700;
}
.am-wajib, .am-anjur {
  font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: .4px;
}
.am-wajib { color: var(--crimson); background: rgba(255, 79, 123, .13); border: 1px solid rgba(255, 79, 123, .34); }
.am-anjur { color: var(--teks-redup); background: rgba(140, 165, 255, .09); border: 1px solid var(--line); }

.am-pilihan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.am-pilih {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: rgba(10, 15, 34, .45);
  color: var(--teks-lembut);
  font-family: var(--font-body); text-align: left; cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.am-pilih:hover { transform: translateY(-1px); border-color: var(--rona); }
.am-pilih b { font-size: 13.5px; color: var(--teks); }
.am-pilih small { font-size: 11px; line-height: 1.45; color: var(--teks-redup); }
.am-pilih.aktif {
  border-color: var(--rona);
  background: var(--rona-isi);
  box-shadow: 0 0 0 1px var(--rona) inset;
}
.am-pilih.aktif b { color: var(--rona); }

.am-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Unggahan bukti ---------- */
.am-jatuh {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 24px 18px; border-radius: var(--r-m);
  border: 1.5px dashed var(--line-kuat);
  background: rgba(10, 15, 34, .4);
  text-align: center; cursor: pointer;
  transition: border-color .16s, background .16s;
}
.am-jatuh:hover, .am-jatuh--siap { border-color: var(--cyan); background: rgba(53, 231, 240, .07); }
.am-jatuh__ikon { font-size: 24px; color: var(--cyan); line-height: 1; }
.am-jatuh b { font-size: 13.5px; color: var(--teks); }
.am-jatuh small { font-size: 11.5px; color: var(--teks-redup); line-height: 1.5; }

.am-pratinjau {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: rgba(10, 15, 34, .5);
}
.am-pratinjau img {
  width: 78px; height: 78px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line);
}
.am-pratinjau__pdf {
  width: 78px; height: 78px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--crimson); background: rgba(255, 79, 123, .1);
  border: 1px solid rgba(255, 79, 123, .3);
}
.am-pratinjau__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.am-pratinjau__info b {
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-pratinjau__info small { font-size: 11px; color: var(--teks-redup); }
.am-pratinjau__info .tbl { align-self: flex-start; margin-top: 3px; }

.am-bukti-ada {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-s);
  border: 1px solid rgba(61, 245, 165, .28);
  background: rgba(61, 245, 165, .07);
}
.am-bukti-ada__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.am-bukti-ada__info b {
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-bukti-ada__info small { font-size: 11px; color: var(--teks-redup); }

/* ---------- Sakelar notifikasi ---------- */
.am-sakelar { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.am-sakelar input { position: absolute; opacity: 0; width: 0; height: 0; }
.am-sakelar > span {
  flex: none; width: 42px; height: 24px; border-radius: 999px; margin-top: 2px;
  background: rgba(140, 165, 255, .16);
  border: 1px solid var(--line-kuat);
  position: relative; transition: background .18s, border-color .18s;
}
.am-sakelar > span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teks-lembut); transition: transform .18s, background .18s;
}
.am-sakelar input:checked + span { background: rgba(61, 245, 165, .24); border-color: var(--emerald); }
.am-sakelar input:checked + span::after { transform: translateX(18px); background: var(--emerald); }
.am-sakelar input:disabled + span { opacity: .45; }
.am-sakelar div b { display: block; font-size: 13.5px; }
.am-sakelar div small { font-size: 11.5px; color: var(--teks-redup); line-height: 1.5; }
.am-wa--mati { opacity: .72; }

.am-catat-kecil {
  font-size: 11.5px; line-height: 1.55; color: var(--teks-redup);
  padding: 10px 12px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: rgba(140, 165, 255, .05);
}
.am-kaki__isi { flex: 1; }

/* ---------- Layar sempit ---------- */
@media (max-width: 1180px) {
  .am-pita { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .am-saring__baris { grid-template-columns: 1fr 1fr; }
  .am-saring__cari, .am-saring__tbl { grid-column: 1 / -1; }
  .am-pita { grid-template-columns: repeat(2, 1fr); }
  .am-grid { grid-template-columns: 1fr; }
  .am-pilihan { grid-template-columns: 1fr; }
  .am-bilah { left: 12px; right: 12px; bottom: 66px; transform: none; border-radius: var(--r-m); justify-content: space-between; }
}

/* ---------- Absen manual: spanduk "pemasang belum dijalankan" ---------- */
.am-belum { border-color: rgba(255, 180, 67, .34); }
.am-belum__isi { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 40px 24px; }
.am-belum__ikon { color: var(--amber); }
.am-belum__isi h2 { font-family: var(--font-display); font-size: 19px; }
.am-belum__isi p { max-width: 62ch; color: var(--teks-lembut); font-size: 14px; }
.am-belum__kolom { font-family: var(--font-data); font-size: 12.5px; color: var(--amber); }
.am-belum__kecil { font-size: 12px; color: var(--teks-redup); }

.am-petunjuk { font-size: 12px; color: var(--teks-redup); margin-top: 2px; }

/* ---------- Absen manual: penanda "Catat" pada kartu ---------- */
.am-siswa__catat {
  flex: none; margin-left: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  padding: 3px 8px; border-radius: 999px;
  color: var(--rona);
  background: var(--rona-isi);
  border: 1px solid var(--rona-garis);
  opacity: 0; transform: translateX(4px);
  transition: opacity .16s, transform .16s;
}
.am-siswa:hover .am-siswa__catat,
.am-siswa:focus-visible .am-siswa__catat { opacity: 1; transform: none; }
/* Pada layar sentuh tidak ada keadaan hover, jadi penandanya ditampilkan
   terus - kalau tidak, tidak ada petunjuk sama sekali bahwa kartu ini
   dapat diketuk. */
@media (hover: none) {
  .am-siswa__catat { opacity: 1; transform: none; }
}
body.am-mode-pilih .am-siswa__catat { display: none; }

/* ---------- Absen manual: catatan tentang content-visibility ----------
   Sempat dipakai `content-visibility: auto` di sini dengan harapan
   meringankan daftar panjang. Diukur, hasilnya justru KEBALIKANNYA:
   waktu tampil jendela pertama 3.092 ms dengan aturan itu, dan 346 ms
   tanpanya - hampir sembilan kali lebih lambat. Peramban harus terus
   menghitung ulang keterlihatan tiap kartu setiap kali daftar bertambah.
   Karena jumlah kartu sudah dibatasi lewat jendela bergulir di
   absen-manual.js, aturan itu tidak diperlukan dan sengaja tidak dipakai. */
.am-grid { contain: layout; }

/* ---------- Absen manual: penanda ujung daftar ---------- */
.am-ujung {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px; color: var(--teks-redup); font-size: 13px;
}
.am-ujung__putar {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--line-kuat); border-top-color: var(--cyan);
  animation: am-putar .8s linear infinite;
}
@keyframes am-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .am-ujung__putar { animation: none; } }

/* =====================================================================
   IZIN KELUAR & MASUK
   ===================================================================== */
.am-kartu--gold  { --rona: #F6C87A; --rona-isi: rgba(246,200,122,.13); --rona-garis: rgba(246,200,122,.32); }
.iz-kartu--emerald { --rona: #3DF5A5; --rona-isi: rgba(61,245,165,.13); --rona-garis: rgba(61,245,165,.32); }
.iz-kartu--cyan    { --rona: #35E7F0; --rona-isi: rgba(53,231,240,.13); --rona-garis: rgba(53,231,240,.32); }
.iz-kartu--violet  { --rona: #8B6BFF; --rona-isi: rgba(139,107,255,.14); --rona-garis: rgba(139,107,255,.34); }
.iz-kartu--gold    { --rona: #F6C87A; --rona-isi: rgba(246,200,122,.13); --rona-garis: rgba(246,200,122,.32); }
.iz-kartu--crimson { --rona: #FF4F7B; --rona-isi: rgba(255,79,123,.13); --rona-garis: rgba(255,79,123,.32); }
.iz-kartu--kosong  { --rona: #61719E; --rona-isi: rgba(97,113,158,.14); --rona-garis: rgba(97,113,158,.34); }

.iz-pita { grid-template-columns: repeat(5, 1fr); }
.iz-tanggal { max-width: 168px; }

/* Kartu yang siswanya lewat batas berdenyut pelan. Meja piket melihat
   layar ini dari jauh; warna saja belum tentu tertangkap. */
.iz-sorot.aktif { animation: iz-denyut 2.4s ease-in-out infinite; }
@keyframes iz-denyut {
  0%, 100% { box-shadow: 0 0 0 1px var(--rona) inset, 0 14px 34px -18px var(--rona); }
  50%      { box-shadow: 0 0 0 1px var(--rona) inset, 0 14px 44px -10px var(--rona); }
}
@media (prefers-reduced-motion: reduce) { .iz-sorot.aktif { animation: none; } }

.iz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 14px; }

.iz-kartu {
  display: flex; flex-direction: column; gap: 11px;
  padding: 15px 16px; border-radius: var(--r-m);
  border: 1px solid var(--line); border-left: 3px solid var(--rona);
  background: var(--kaca-tipis);
}
.iz-kartu--lewat { border-color: var(--crimson); background: rgba(255,79,123,.06); }
.iz-kartu--luar  { background: rgba(53,231,240,.05); }

.iz-kartu__atas { display: flex; align-items: center; gap: 11px; }
.iz-kartu__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iz-kartu__id b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iz-kartu__id small { font-size: 11.5px; color: var(--teks-redup); }
.iz-kartu__cip { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.iz-status {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--teks-redup);
}
.iz-status--di_luar { color: #35E7F0; border-color: rgba(53,231,240,.4); background: rgba(53,231,240,.1); }
.iz-status--berlaku { color: #F6C87A; border-color: rgba(246,200,122,.4); background: rgba(246,200,122,.1); }
.iz-status--kembali { color: #3DF5A5; border-color: rgba(61,245,165,.4); background: rgba(61,245,165,.1); }
.iz-status--batal, .iz-status--kedaluwarsa { opacity: .7; }

.iz-kartu__perlu { font-size: 13px; color: var(--teks-lembut); margin: 0; line-height: 1.5; }
.iz-tujuan { color: var(--teks-redup); font-size: 12px; }

/* Alur tiga titik: terbit, keluar, kembali. */
.iz-alur { display: flex; align-items: center; gap: 0; padding: 2px 0; }
.iz-alur__titik {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 62px;
}
.iz-alur__titik b {
  font-family: var(--font-data); font-size: 13px; color: var(--teks-redup);
}
.iz-alur__titik small { font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--teks-redup); }
.iz-alur__titik.aktif b { color: var(--rona); }
.iz-alur__garis { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.iz-alur__garis.aktif { background: var(--rona); }

.iz-kartu__bawah { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.iz-kode {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 6px;
  color: var(--teks-redup); background: rgba(140,165,255,.08); border: 1px solid var(--line);
}
.iz-waktu { font-size: 11.5px; font-weight: 600; color: var(--teks-lembut); }
.iz-waktu--lewat { color: var(--crimson); }
.iz-waktu--baik  { color: var(--emerald); }
.iz-kartu__aksi { margin-left: auto; display: flex; gap: 6px; }

/* ---------- pemilih siswa di jendela terbit ---------- */
.iz-hasil {
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: rgba(10,15,34,.45);
}
.iz-opsi {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-s);
  border: 1px solid transparent; background: transparent;
  color: var(--teks); font-family: var(--font-body); text-align: left; cursor: pointer;
}
.iz-opsi:hover { background: var(--kaca-tipis); border-color: var(--line); }
.iz-opsi.dipilih { border-color: var(--cyan); background: rgba(53,231,240,.09); }
.iz-opsi b { display: block; font-size: 13.5px; }
.iz-opsi small { font-size: 11px; color: var(--teks-redup); }
.iz-opsi em { margin-left: auto; font-size: 10.5px; font-style: normal; color: var(--amber); }
.iz-opsi--sibuk { opacity: .5; cursor: not-allowed; }
.iz-opsi .am-siswa__avatar { width: 32px; height: 32px; font-size: 12px; --rona: var(--cyan); }

/* =====================================================================
   GERBANG IZIN — terminal
   ===================================================================== */
.izg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 16px; }
.izg__isi { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 26px; }

.izg__lingkar {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cyan);
  background: rgba(53,231,240,.07);
  border: 1px solid rgba(53,231,240,.3);
  transition: color .3s, background .3s, border-color .3s;
}
.izg__lingkar--emerald { color: var(--emerald); background: rgba(61,245,165,.09); border-color: rgba(61,245,165,.34); }
.izg__lingkar--crimson { color: var(--crimson); background: rgba(255,79,123,.09); border-color: rgba(255,79,123,.34); }
.izg__lingkar--gold    { color: var(--gold);    background: rgba(246,200,122,.09); border-color: rgba(246,200,122,.34); }
.izg__gelombang {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid currentColor; opacity: .4;
  animation: izg-riak 2.6s ease-out infinite;
}
.izg__gelombang--2 { animation-delay: 1.3s; }
@keyframes izg-riak {
  0%   { transform: scale(1);    opacity: .45; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .izg__gelombang { animation: none; opacity: .25; } }

.izg__judul { font-family: var(--font-display); font-size: 21px; margin: 4px 0 0; text-align: center; }
.izg__sub { font-size: 13.5px; color: var(--teks-redup); text-align: center; margin: 0; max-width: 44ch; }
.izg__kolom {
  font-family: var(--font-data); font-size: 17px; letter-spacing: 1.4px;
  text-align: center; max-width: 380px;
}
.izg__bantu { font-size: 11.5px; color: var(--teks-redup); text-align: center; max-width: 50ch; line-height: 1.6; margin: 0; }

.izg__hasil { display: flex; align-items: center; justify-content: center; min-height: 340px; }
.izg__kosong { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--teks-redup); padding: 30px; text-align: center; }

.izg__kartu {
  --rona: var(--cyan);
  width: 100%; padding: 26px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
}
.izg__kartu--emerald { --rona: #3DF5A5; }
.izg__kartu--cyan    { --rona: #35E7F0; }
.izg__kartu--crimson { --rona: #FF4F7B; }
.izg__kartu--gold    { --rona: #F6C87A; }
.izg__kartu h3 { font-family: var(--font-display); font-size: 20px; margin: 0; color: var(--rona); }
.izg__kartu p { font-size: 13.5px; color: var(--teks-lembut); margin: 0; line-height: 1.6; max-width: 42ch; }

.izg__id { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; }
.izg__id b { font-size: 15px; display: block; }
.izg__id small { font-size: 11.5px; color: var(--teks-redup); }
.izg__id .am-siswa__avatar { --rona: var(--rona); }
.izg__id > div { flex: 1; min-width: 0; }

.izg__arah {
  font-size: 46px; line-height: 1; font-weight: 300; color: var(--rona);
}
.izg__jam { font-family: var(--font-data); font-size: 28px; font-weight: 700; color: var(--rona); }
.izg__batas { font-size: 12px; color: var(--amber); }
.izg__kode {
  font-family: var(--font-data); font-size: 11.5px; letter-spacing: 1px;
  color: var(--teks-redup); padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(140,165,255,.07);
}

.izg__riwayat { display: flex; flex-direction: column; gap: 6px; }
.izg__baris {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r-s);
  border: 1px solid var(--line); border-left: 3px solid var(--teks-redup);
  background: var(--kaca-tipis); font-size: 13px;
}
.izg__baris--emerald { border-left-color: #3DF5A5; }
.izg__baris--cyan    { border-left-color: #35E7F0; }
.izg__baris--crimson { border-left-color: #FF4F7B; }
.izg__baris--gold    { border-left-color: #F6C87A; }
.izg__baris__jam { font-family: var(--font-data); color: var(--teks-redup); min-width: 46px; }
.izg__baris__panah { font-size: 17px; color: var(--teks-lembut); min-width: 18px; text-align: center; }
.izg__baris__nama { flex: 1; min-width: 0; }
.izg__baris__nama b { font-size: 13px; }
.izg__baris__nama small { display: block; font-size: 11px; color: var(--teks-redup); }
.izg__baris__ket { font-size: 11.5px; color: var(--teks-redup); text-align: right; }

@media (max-width: 1100px) {
  .izg { grid-template-columns: 1fr; }
  .iz-pita { grid-template-columns: repeat(3, 1fr); }
  .iz-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .iz-pita { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   TERMINAL TAP & PINDAI di halaman Izin
   ===================================================================== */
.izt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; }
.izt__isi { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 30px 24px; }

.izt__lingkar {
  position: relative; width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cyan);
  background: rgba(53,231,240,.07); border: 1px solid rgba(53,231,240,.3);
  transition: color .3s, background .3s, border-color .3s;
}
.izt__lingkar--emerald { color: #3DF5A5; background: rgba(61,245,165,.09); border-color: rgba(61,245,165,.34); }
.izt__lingkar--crimson { color: #FF4F7B; background: rgba(255,79,123,.09); border-color: rgba(255,79,123,.34); }
.izt__lingkar--cyan    { color: #35E7F0; background: rgba(53,231,240,.09); border-color: rgba(53,231,240,.34); }
.izt__riak {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid currentColor; opacity: .4;
  animation: izt-riak 2.6s ease-out infinite;
}
.izt__riak--2 { animation-delay: 1.3s; }
@keyframes izt-riak {
  0%   { transform: scale(1);    opacity: .45; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .izt__riak { animation: none; opacity: .22; } }

.izt__judul { font-family: var(--font-display); font-size: 20px; margin: 3px 0 0; text-align: center; }
.izt__sub { font-size: 13px; color: var(--teks-redup); text-align: center; margin: 0; max-width: 42ch; line-height: 1.6; }
.izt__kolom {
  font-family: var(--font-data); font-size: 16px; letter-spacing: 1.3px;
  text-align: center; max-width: 340px;
}
.izt__tombol { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.izt__bantu { font-size: 11.5px; color: var(--teks-redup); text-align: center; max-width: 48ch; line-height: 1.6; margin: 0; }

/* ---------- jendela kamera, tetap di halaman ini ---------- */
.izt__kamera {
  position: relative; width: 100%; max-width: 380px; margin-top: 6px;
  border-radius: var(--r-m); overflow: hidden;
  border: 1px solid rgba(53,231,240,.34); background: #04060E;
}
.izt__kamera video { display: block; width: 100%; height: auto; }
.izt__bidik { position: absolute; inset: 14%; pointer-events: none; }
.izt__bidik span { position: absolute; width: 26px; height: 26px; border: 2.5px solid var(--cyan); }
.izt__bidik span:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.izt__bidik span:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-radius: 0 6px 0 0; }
.izt__bidik span:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.izt__bidik span:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; border-radius: 0 0 6px 0; }
.izt__tutupKamera { position: absolute; right: 8px; bottom: 8px; }

/* ---------- panel hasil ---------- */
.izt__hasil { min-height: 380px; display: flex; }
.izt__kosong {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--teks-redup); padding: 34px; text-align: center;
}
.izt__panel {
  --rona: var(--cyan);
  flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px;
}
.izt__panel--emerald { --rona: #3DF5A5; }
.izt__panel--cyan    { --rona: #35E7F0; }
.izt__panel--crimson { --rona: #FF4F7B; }

.izt__id {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.izt__id .am-siswa__avatar { width: 46px; height: 46px; font-size: 15px; --rona: var(--rona); }
.izt__id__teks { flex: 1; min-width: 0; }
.izt__id__teks b { display: block; font-size: 16px; }
.izt__id__teks small { font-size: 12px; color: var(--teks-redup); }

.izt__aksi { width: 100%; justify-content: center; font-size: 14.5px; padding: 13px; }

.izt__izin {
  padding: 13px 15px; border-radius: var(--r-s);
  border: 1px solid var(--line); border-left: 3px solid var(--rona);
  background: rgba(10,15,34,.45);
}
.izt__izin__atas { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.izt__izin p { margin: 0; font-size: 13px; color: var(--teks-lembut); }
.izt__batas { margin-top: 7px; font-size: 12px; color: var(--amber); }

.izt__kunci {
  padding: 15px; border-radius: var(--r-s);
  border: 1px solid rgba(255,79,123,.3); background: rgba(255,79,123,.07);
}
.izt__kunci b { display: block; font-size: 14px; color: #FF7A9C; margin-bottom: 5px; }
.izt__kunci p { margin: 0; font-size: 12.5px; color: var(--teks-lembut); line-height: 1.6; }

.izt__gagal {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; text-align: center; color: var(--crimson); padding: 26px;
}
.izt__gagal h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.izt__gagal p { margin: 0; font-size: 13px; color: var(--teks-lembut); max-width: 40ch; line-height: 1.6; }

.izt__riwayat { display: flex; flex-direction: column; gap: 6px; }
.izt__riwayat__b {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: rgba(140,165,255,.05); font-size: 12.5px;
}
.izt__riwayat__b b { flex: 1; font-size: 12.5px; }
.izt__riwayat__b span { color: var(--teks-redup); font-size: 11.5px; }
.izt__riwayat__b i { font-style: normal; font-family: var(--font-data); font-size: 11.5px; color: var(--teks-redup); }

@media (max-width: 1100px) { .izt { grid-template-columns: 1fr; } }

/* =====================================================================
   PINDAI RFID
   ===================================================================== */
.rfg__kelas--emerald, .rfk__butir--emerald, .rfn__kartu--emerald { --rona: #3DF5A5; --rona-isi: rgba(61,245,165,.13); --rona-garis: rgba(61,245,165,.34); }
.rfk__butir--cyan,    .rfn__kartu--cyan    { --rona: #35E7F0; --rona-isi: rgba(53,231,240,.13); --rona-garis: rgba(53,231,240,.34); }
.rfk__butir--violet,  .rfn__kartu--violet  { --rona: #8B6BFF; --rona-isi: rgba(139,107,255,.14); --rona-garis: rgba(139,107,255,.36); }
.rfk__butir--gold,    .rfn__kartu--gold    { --rona: #F6C87A; --rona-isi: rgba(246,200,122,.13); --rona-garis: rgba(246,200,122,.34); }
.rfk__butir--crimson, .rfn__kartu--crimson { --rona: #FF4F7B; --rona-isi: rgba(255,79,123,.13); --rona-garis: rgba(255,79,123,.34); }
.rfk__butir--kosong,  .rfn__kartu--kosong  { --rona: #61719E; --rona-isi: rgba(97,113,158,.14); --rona-garis: rgba(97,113,158,.34); }

/* ---------- pita kabar berjalan ----------
   Disusun sama seperti teks berjalan di dasar layar: dua set isi yang
   identik, jalurnya digeser -50% terus-menerus, sehingga sambungannya
   tidak pernah terlihat. Lebar satu set diukur di peramban lalu dipakai
   menghitung lamanya satu putaran, supaya kecepatan gesernya tetap sama
   berapa pun banyaknya kabar. */
.rfk {
  display: flex; align-items: stretch;
  border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(11,16,36,.97), rgba(16,22,48,.93));
  margin-bottom: 16px;
  height: 46px;
}
.rfk__label {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; white-space: nowrap; flex: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--gold);
  background: rgba(246,200,122,.08);
  border-right: 1px solid rgba(246,200,122,.26);
}
.rfk__titik {
  width: 7px; height: 7px; border-radius: 50%; background: var(--crimson);
  box-shadow: 0 0 8px var(--crimson);
  animation: rfk-kedip 1.5s ease-in-out infinite;
}
@keyframes rfk-kedip { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.rfk__jendela { position: relative; flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.rfk__jalur {
  display: flex; width: max-content; will-change: transform;
  animation: rfkJalan linear infinite;
}
@keyframes rfkJalan { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.rfk__set { display: flex; align-items: center; flex: none; }

/* Berhenti saat disentuh, supaya kabar yang sedang dibaca tidak kabur. */
.rfk:hover .rfk__jalur { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .rfk__jalur { animation: none; }
  .rfk__titik { animation: none; }
}

.rfk__pudar { position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 2; }
.rfk__pudar--kiri  { left: 0;  background: linear-gradient(90deg, rgba(12,17,39,.98) 12%, rgba(12,17,39,0)); }
.rfk__pudar--kanan { right: 0; background: linear-gradient(270deg, rgba(12,17,39,.98) 12%, rgba(12,17,39,0)); }

.rfk__butir {
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap; padding: 0 4px;
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  color: var(--teks);
}
.rfk__ikon {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 9px;
  background: rgba(140,165,255,.10);
  box-shadow: inset 0 0 0 1px rgba(140,165,255,.24);
  color: var(--teks-lembut);
}
.rfk__ikon svg { width: 15px; height: 15px; }
.rfk__jam {
  font-family: var(--font-data); font-size: 12px;
  color: var(--teks-redup); flex: none;
}
.rfk__teks { line-height: 1; }

/* Pemisah bermotif bintang songket, sama dengan teks berjalan bawah. */
.rfk__pisah { color: var(--gold); opacity: .5; font-size: 12px; padding: 0 20px; flex: none; line-height: 1; }

.rfk__butir--sian  .rfk__ikon { background: rgba(53,231,240,.12); box-shadow: inset 0 0 0 1px rgba(53,231,240,.38); color: var(--cyan); }
.rfk__butir--sian  .rfk__teks { color: #A8F3F8; }
.rfk__butir--hijau .rfk__ikon { background: rgba(61,245,165,.13); box-shadow: inset 0 0 0 1px rgba(61,245,165,.40); color: var(--emerald); }
.rfk__butir--hijau .rfk__teks { color: #B6FFE1; }
.rfk__butir--kuning .rfk__ikon { background: rgba(255,180,67,.14); box-shadow: inset 0 0 0 1px rgba(255,180,67,.42); color: var(--amber); }
.rfk__butir--kuning .rfk__teks { color: #FFDCA6; }
.rfk__butir--merah .rfk__ikon { background: rgba(255,79,123,.13); box-shadow: inset 0 0 0 1px rgba(255,79,123,.40); color: var(--crimson); }
.rfk__butir--merah .rfk__teks { color: #FFC2D1; }
.rfk__butir--ungu  .rfk__ikon { background: rgba(139,107,255,.15); box-shadow: inset 0 0 0 1px rgba(139,107,255,.42); color: var(--violet); }
.rfk__butir--ungu  .rfk__teks { color: #D3C6FF; }
.rfk__butir--kelabu .rfk__teks { color: var(--teks-lembut); }

/* ---------- kartu pemberitahuan menyembul ---------- */
.rfn {
  position: fixed; right: 20px; bottom: 86px; z-index: 880;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none; max-width: min(380px, 88vw);
}
.rfn__kartu {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px; border-radius: var(--r-m);
  background: linear-gradient(135deg, rgba(20,27,58,.98), rgba(10,15,34,.97));
  border: 1px solid var(--rona-garis);
  box-shadow: 0 14px 40px -16px var(--rona), var(--bayang);
  backdrop-filter: blur(12px);
  opacity: 0; transform: translateX(40px) scale(.94);
  transition: opacity .34s cubic-bezier(.2,.9,.3,1.1), transform .34s cubic-bezier(.2,.9,.3,1.1);
}
.rfn__kartu.tampil { opacity: 1; transform: none; }
/* Pita cahaya tipis di tepi kiri, penanda rona kabarnya. */
.rfn__kartu::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rona);
}
.rfn__kartu { position: relative; overflow: hidden; }
.rfn__kartu--saya { box-shadow: 0 14px 44px -14px var(--rona), inset 0 0 0 1px var(--rona-garis); }
.rfn__ikon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  color: var(--rona); background: var(--rona-isi);
  border: 1px solid var(--rona-garis);
}
.rfn__teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rfn__teks b { font-size: 12.5px; color: var(--rona); }
.rfn__teks small { font-size: 11.5px; color: var(--teks-lembut); line-height: 1.45; }
.rfn__kelas {
  flex: none; font-family: var(--font-data); font-size: 10.5px;
  padding: 3px 8px; border-radius: 6px;
  color: var(--teks-redup); background: rgba(140,165,255,.08); border: 1px solid var(--line);
}

/* ---------- kepala kelas ---------- */
.rfp__kepala__isi { display: flex; align-items: center; gap: 15px; }
.rfp__lencana {
  flex: none; min-width: 74px; padding: 12px 14px; border-radius: var(--r-m);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--gold); background: rgba(246,200,122,.1);
  border: 1px solid rgba(246,200,122,.32);
}
.rfp__kepala__teks { flex: 1; min-width: 0; }
.rfp__kepala__teks h2 { margin: 0; font-size: 19px; }
.rfp__kepala__teks p { margin: 2px 0 0; font-size: 12.5px; color: var(--teks-redup); }
.rfp__kepala__aksi { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rfp__bar {
  width: 190px; height: 7px; border-radius: 999px;
  background: rgba(140,165,255,.12); overflow: hidden;
}
.rfp__bar__isi {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--emerald));
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}

/* ---------- pembaca ---------- */
.rfp { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,6fr); gap: 16px; margin-top: 16px; }
.rfp__baca__isi { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 32px 24px; }
.rfp__lingkar {
  position: relative; width: 138px; height: 138px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cyan);
  background: rgba(53,231,240,.07); border: 1px solid rgba(53,231,240,.3);
  transition: color .3s, background .3s, border-color .3s;
}
.rfp__lingkar--siap { color: #3DF5A5; background: rgba(61,245,165,.1); border-color: rgba(61,245,165,.36); }
.rfp__riak {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid currentColor; opacity: .4;
  animation: rfp-riak 2.7s ease-out infinite;
}
.rfp__riak--2 { animation-delay: .9s; }
.rfp__riak--3 { animation-delay: 1.8s; }
@keyframes rfp-riak { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rfp__riak { animation: none; opacity: .2; } }

.rfp__judul { font-family: var(--font-display); font-size: 20px; margin: 3px 0 0; text-align: center; }
.rfp__sub { font-size: 13px; color: var(--teks-redup); text-align: center; margin: 0; max-width: 36ch; line-height: 1.6; }
.rfp__kolom {
  font-family: var(--font-data); font-size: 17px; letter-spacing: 3px;
  text-align: center; max-width: 300px;
}
.rfp__uid {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 13px 18px; border-radius: var(--r-m); width: 100%;
  border: 1px solid rgba(61,245,165,.32); background: rgba(61,245,165,.07);
}
.rfp__uid__label { font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--teks-redup); }
.rfp__uid__nilai {
  font-family: var(--font-data); font-size: 21px; font-weight: 700;
  letter-spacing: 2.5px; color: #3DF5A5; word-break: break-all; text-align: center;
}

/* ---------- daftar siswa ---------- */
.rfp__cari { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.rfp__cari svg { position: absolute; left: 13px; color: var(--teks-redup); pointer-events: none; }
.rfp__cari .masukan { padding-left: 40px; }

.rfp__siswa { display: flex; flex-direction: column; gap: 7px; max-height: 460px; overflow-y: auto; }
.rfs {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 13px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--kaca-tipis);
  color: var(--teks); font-family: var(--font-body); text-align: left;
  transition: border-color .15s, transform .15s, background .15s;
}
.rfs .am-siswa__avatar { width: 36px; height: 36px; font-size: 12.5px; --rona: var(--cyan); }
.rfs__teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rfs__teks b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfs__teks small { font-size: 11px; color: var(--teks-redup); }
.rfs--siap { cursor: pointer; border-left: 3px solid var(--emerald); }
.rfs--siap:hover { transform: translateX(3px); border-color: var(--emerald); background: rgba(61,245,165,.07); }
.rfs--nonaktif { opacity: .5; cursor: not-allowed; }
.rfs--sudah { border-left: 3px solid var(--teks-redup); }
.rfs__pilih {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  padding: 5px 12px; border-radius: 999px;
  color: #3DF5A5; background: rgba(61,245,165,.12); border: 1px solid rgba(61,245,165,.32);
}
.rfs__uid {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .6px;
  padding: 3px 9px; border-radius: 6px;
  color: var(--teks-redup); background: rgba(140,165,255,.08); border: 1px solid var(--line);
}

/* ---------- pemilih kelas ---------- */
.rfg { display: flex; flex-direction: column; gap: 18px; }
.rfg__tingkat { display: flex; flex-direction: column; gap: 9px; }
.rfg__petak { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.rfg__kelas {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: rgba(10,15,34,.5);
  color: var(--teks); font-family: var(--font-body); text-align: left; cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
}
.rfg__kelas:hover { transform: translateY(-2px); border-color: var(--cyan); }
.rfg__kelas b { font-size: 15px; font-family: var(--font-display); }
.rfg__kelas small { font-size: 10.5px; color: var(--teks-redup); }
.rfg__bar { height: 4px; border-radius: 999px; background: rgba(140,165,255,.12); overflow: hidden; margin-top: 4px; }
.rfg__bar i { display: block; height: 100%; background: var(--cyan); }
.rfg__kelas--tuntas { border-color: rgba(61,245,165,.3); }
.rfg__kelas--tuntas small { color: #3DF5A5; }
.rfg__kelas--tuntas .rfg__bar i { background: var(--emerald); }
.rfg__kelas--saya { border-color: var(--gold); background: rgba(246,200,122,.09); }
.rfg__kelas--saya small { color: var(--gold); }
.rfg__kelas--dipakai {
  border-color: rgba(255,79,123,.34); background: rgba(255,79,123,.06);
  cursor: not-allowed; opacity: .78;
}
.rfg__kelas--dipakai:hover { transform: none; border-color: rgba(255,79,123,.5); }
.rfg__kelas--dipakai small { color: #FF7A9C; }
.rfg__goyang { animation: rfg-goyang .42s; }
@keyframes rfg-goyang {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .rfg__goyang { animation: none; } }

@media (max-width: 1100px) {
  .rfp { grid-template-columns: 1fr; }
  .rfn { right: 12px; left: 12px; bottom: 78px; max-width: none; }
}
@media (max-width: 700px) {
  .rfp__kepala__isi { flex-wrap: wrap; }
  .rfp__kepala__aksi { width: 100%; align-items: stretch; }
  .rfp__bar { width: 100%; }
  .rfk__label { padding: 0 10px; font-size: 9px; }
}
/* Kelas yang belum punya siswa dibedakan dari kelas yang sudah tuntas -
   keduanya sama-sama "0 belum berkartu", tetapi artinya bertolak belakang. */
.rfg__kelas--kosong { opacity: .55; }
.rfg__kelas--kosong small { color: var(--teks-redup); }

/* =====================================================================
   PEMINDAI KAMERA QR — panel terminal absensi
   ---------------------------------------------------------------------
   Kamera dirancang TETAP SIAGA: sesudah satu kartu terbaca, kamera
   tidak ditutup, hanya menampilkan lencana hasil sekejap lalu kembali
   memindai. Dengan begitu satu petugas dapat memindai puluhan kartu
   berturut-turut tanpa menyentuh layar sama sekali.
   ===================================================================*/
.kam { margin-top: 12px; }

.kam__bingkai {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 16px; overflow: hidden;
  background: #05070f;
  box-shadow: inset 0 0 0 1px var(--line-kuat), 0 10px 26px rgba(0, 0, 0, .45);
}
/* aspect-ratio belum ada di Safari lama; padding-top jadi cadangannya. */
@supports not (aspect-ratio: 4 / 3) {
  .kam__bingkai { height: 0; padding-top: 75%; }
}

.kam__bingkai video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* penuhi bingkai tanpa gepeng */
  background: #000;
  display: block;
}

/* ---------- Bidik ---------- */
.kam__bidik { position: absolute; inset: 0; pointer-events: none; }
.kam__bidik::before {
  content: ''; position: absolute; inset: 0;
  /* Gelapkan tepi, terangkan tengah - mata langsung tertuju ke area baca */
  background: radial-gradient(ellipse 62% 62% at 50% 50%,
              rgba(0,0,0,0) 55%, rgba(3,6,15,.62) 100%);
}
.kam__sudut {
  position: absolute; width: 34px; height: 34px;
  border: 3px solid var(--aksen, #35e7f0);
  filter: drop-shadow(0 0 6px rgba(53,231,240,.55));
}
.kam__sudut--kika { top: 15%;    left: 12%;  border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.kam__sudut--kaka { top: 15%;    right: 12%; border-left: 0;  border-bottom: 0; border-radius: 0 10px 0 0; }
.kam__sudut--baki { bottom: 15%; left: 12%;  border-right: 0; border-top: 0;    border-radius: 0 0 0 10px; }
.kam__sudut--baka { bottom: 15%; right: 12%; border-left: 0;  border-top: 0;    border-radius: 0 0 10px 0; }

.kam__garis {
  position: absolute; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--aksen, #35e7f0), transparent);
  box-shadow: 0 0 14px 2px rgba(53,231,240,.6);
  animation: kamSapu 2.6s ease-in-out infinite;
}
@keyframes kamSapu {
  0%, 100% { top: 16%;  opacity: .35; }
  50%      { top: 83%;  opacity: 1; }
}
/* Hormati pengguna yang mematikan animasi di perangkatnya. */
@media (prefers-reduced-motion: reduce) {
  .kam__garis { animation: none; top: 50%; }
}

/* ---------- Status & hasil ---------- */
.kam__status {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 9px 12px; text-align: center;
  font-size: 12.5px; letter-spacing: .2px; color: #cfe0ff;
  background: linear-gradient(180deg, rgba(5,7,15,0), rgba(5,7,15,.9));
}

.kam__hasil {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; border-radius: 15px;
  background: rgba(6, 10, 22, .93);
  box-shadow: 0 0 0 1.5px currentColor, 0 14px 34px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
  max-width: 86%;
}
.kam__hasil[hidden] { display: none; }
.kam__hasil.tampil { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kam__hasil--ok   { color: #3df5a5; }
.kam__hasil--awas { color: #ffc46b; }
.kam__hasil--bad  { color: #ff7a8a; }

.kam__hasil__ikon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: currentColor; color: #05070f;
  font-size: 19px; font-weight: 800; line-height: 1;
}
.kam__hasil__teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kam__hasil__teks b { font-size: 14.5px; color: #fff; }
.kam__hasil__teks i {
  font-style: normal; font-size: 12.5px; color: #9fb2d8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Kaki panel ---------- */
.kam__kaki {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.kam__cacah { font-size: 12.5px; color: var(--redup, #8ea0d0); }
.kam__cacah b { color: #3df5a5; font-size: 16px; font-family: var(--font-data, monospace); }
.kam__aksi { display: flex; gap: 8px; margin-left: auto; }