:root{
  --biru:#123a5e; --biru-muda:#1d5c92; --aksen:#0b8f76; --aksen-lembut:#e4f4f0;
  --latar:#f3f6f9; --kartu:#fff; --garis:#dde5ed; --teks:#16212c; --redup:#5b6b7b;
  --hijau:#0a7d4b; --hijau-lembut:#e5f5ec; --kuning:#9a6400; --kuning-lembut:#fdf3e0;
  --merah:#b32424; --merah-lembut:#fdeced; --ungu:#5b3ea8; --ungu-lembut:#efeaf9;
  /* Bentuk dan bayangan mengikuti bahasa rupa debatekonas2026: sudut lebih
     membulat dan bayangan panjang yang lembut. Warnanya tetap biru SIKAKANONA. */
  --radius:18px; --radius-kecil:12px;
  --bayang:0 1px 2px rgba(18,58,94,.05), 0 18px 48px -20px rgba(18,58,94,.28);
  --bayang-kecil:0 8px 24px -12px rgba(18,58,94,.25);
  --lebar-isi:1160px; --lebar-sisi:268px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--latar);color:var(--teks);
  font:15px/1.6 "Plus Jakarta Sans","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.02em}
h1,h2,h3,h4{margin:0 0 .4rem;line-height:1.25}
h1{font-size:1.35rem}h2{font-size:1.12rem}h3{font-size:1rem}h4{font-size:.9rem}
a{color:var(--biru-muda)}
.sembunyi{display:none !important}

/* ---------- Kerangka ---------- */
/* Kepala putih melintang penuh untuk identitas dan akun; menunya saja yang
   berdiri tegak di sisi kiri. Menu yang bertumpuk ke bawah punya ruang nama
   jauh lebih lega daripada pita mendatar. */
header.atas{background:#fff;border-bottom:1px solid var(--garis);padding:.55rem 1.4rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  position:sticky;top:0;z-index:26}
header.atas .merek{display:flex;align-items:center;gap:.7rem;cursor:pointer;
  border-radius:12px;padding:.2rem .35rem;transition:background var(--gerak)}
header.atas .merek:hover{background:#eef3f8}
header.atas .logo{width:44px;height:44px;object-fit:contain;flex:none}
header.atas .judul{font-weight:800;font-size:1.15rem;letter-spacing:-.2px;color:var(--biru)}
header.atas .sub{font-size:.74rem;color:var(--redup)}
header.atas .kanan{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.85rem}

/* Tinggi kepala dipakai sebagai titik awal bilah menu. Nilainya diukur di
   app.js karena isi kepala — nama panjang, jabatan ganda — membuat tingginya
   berubah-ubah; angka tetap di sini pasti meleset pada sebagian pengguna. */
.sisi-kiri{position:fixed;top:var(--tinggi-kop,64px);left:0;bottom:0;width:var(--lebar-sisi);
  z-index:24;background:var(--biru);color:#fff;display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.08);padding-left:env(safe-area-inset-left)}

.pil-peran{display:inline-flex;align-items:center;gap:.45rem;background:var(--biru);color:#fff;
  border-radius:99px;padding:.42rem .95rem;font-size:.78rem;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;white-space:nowrap}
.pil-peran svg{width:15px;height:15px}

.lonceng{background:none;border:none;color:var(--redup);font-size:1rem;cursor:pointer;
  border-radius:10px;padding:.4rem .5rem;position:relative;display:grid;place-items:center}
.lonceng:hover{background:#eef3f8;color:var(--biru)}
.lonceng svg{width:19px;height:19px}
.bulat{position:absolute;top:1px;right:1px;background:var(--merah);color:#fff;border-radius:99px;
  font-size:.62rem;padding:.05rem .3rem;font-weight:700;line-height:1.4}

.tbl-akun{display:flex;align-items:center;gap:.55rem;background:none;border:none;cursor:pointer;
  font:inherit;padding:.25rem .4rem;border-radius:10px;text-align:left;color:var(--teks)}
.tbl-akun:hover{background:#eef3f8}
.tbl-akun .nama{font-weight:600;font-size:.86rem;line-height:1.2}
.tbl-akun .ket{font-size:.72rem;color:var(--redup)}
.avatar{width:36px;height:36px;border-radius:50%;background:#e3ebf3;color:var(--biru);
  display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}

/* Menu bertumpuk ke bawah di dalam bilah samping. Kelompok yang dibuka
   memanjang di tempatnya — bukan panel mengambang — karena pada bilah tegak
   ruang ke bawah memang tersedia, dan isi kelompok tetap terlihat bersama
   kelompok lainnya. */
nav.tab{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  gap:.1rem;padding:.6rem .55rem;scrollbar-width:thin;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
nav.tab::-webkit-scrollbar{width:6px}
nav.tab::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
nav.tab button{background:none;border:none;padding:.62rem .7rem;font:inherit;font-size:.88rem;
  color:rgba(255,255,255,.76);cursor:pointer;border-radius:10px;text-align:left;width:100%;
  display:flex;align-items:center;gap:.6rem;
  transition:background var(--gerak),color var(--gerak)}
nav.tab button:hover{color:#fff;background:rgba(255,255,255,.08)}
nav.tab button.aktif{color:#fff;font-weight:700;background:rgba(255,255,255,.13)}
nav.tab svg{width:17px;height:17px;flex:none}

.menu-grup{display:flex;flex-direction:column}
nav.tab .pemicu svg:last-child{width:13px;height:13px;opacity:.7;margin-left:auto;
  transition:transform var(--gerak)}
nav.tab .pemicu[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.06)}
nav.tab .pemicu[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.panel-menu{padding:.15rem 0 .3rem .5rem;margin-left:.65rem;
  border-left:2px solid rgba(255,255,255,.14);animation:turun .16s var(--gerak-lembut)}
@keyframes turun{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Nama kelompoknya sudah terbaca pada tombol pemicunya tepat di atas. */
.panel-menu .tajuk{display:none}
nav.tab .panel-menu button{align-items:flex-start;padding:.5rem .6rem;white-space:normal}
nav.tab .panel-menu button svg{width:16px;height:16px;margin-top:.15rem;opacity:.85}
.panel-menu .teks{display:flex;flex-direction:column;gap:.05rem;line-height:1.28;min-width:0}
.panel-menu .teks strong{font-size:.86rem;color:#fff;font-weight:600}
.panel-menu .teks .mini{color:rgba(255,255,255,.55);font-size:.72rem}
nav.tab .panel-menu button.aktif .teks strong{color:var(--aksen-lembut)}

main{max-width:1220px;margin:0 auto;padding:1.3rem;margin-left:var(--lebar-sisi)}
@media(min-width:1800px){main{margin-left:auto;padding-left:calc(var(--lebar-sisi) + 1.3rem)}}

/* ---------- Komponen ---------- */
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);
  padding:1.1rem;box-shadow:var(--bayang);margin-bottom:1rem}
.kartu.rapat{padding:.8rem .9rem}
.petunjuk{color:var(--redup);font-size:.85rem;margin:.1rem 0 .9rem}
.baris{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.baris.rata{justify-content:space-between}
.grid{display:grid;gap:.9rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sisi{display:grid;grid-template-columns:1fr 360px;gap:1rem;align-items:start}
@media(max-width:960px){.sisi{grid-template-columns:1fr}}

.medan{display:block;font-size:.78rem;font-weight:600;color:var(--redup);margin-bottom:.25rem}
input,select,textarea{width:100%;padding:.55rem .7rem;border:1px solid var(--garis);
  border-radius:9px;font:inherit;background:#fff;color:var(--teks)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--aksen);outline-offset:-1px;border-color:var(--aksen)}
input[type=checkbox]{width:auto;margin-right:.45rem;accent-color:var(--aksen)}
textarea{min-height:78px;resize:vertical}
fieldset{border:none;padding:0;margin:0 0 .8rem}

button.tbl{background:var(--biru);color:#fff;border:none;border-radius:9px;padding:.6rem 1rem;
  font:inherit;font-weight:600;cursor:pointer}
button.tbl:hover{background:var(--biru-muda)}
button.tbl:disabled{background:#b9c3cf;cursor:not-allowed}
button.hijau{background:var(--hijau)} button.merah{background:var(--merah)}
button.kuning{background:var(--kuning)}
button.polos{background:#fff;color:var(--biru);border:1px solid var(--garis)}
button.polos:hover{background:#eef3f8}
button.kecil{padding:.34rem .6rem;font-size:.8rem}
button.tautan{background:none;border:none;color:var(--biru-muda);cursor:pointer;font:inherit;
  padding:0;text-decoration:underline}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--garis);vertical-align:top}
th{color:var(--redup);font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
tbody tr:hover{background:#f8fafc}
.gulir{overflow-x:auto}
td.angka,th.angka{text-align:right;white-space:nowrap}

.label{display:inline-block;padding:.14rem .55rem;border-radius:99px;font-size:.73rem;font-weight:600}
.l-draf{background:#eceff3;color:#4a5a6a}
.l-diajukan,.l-diproses{background:#e7f0fa;color:var(--biru-muda)}
.l-perbaikan{background:var(--kuning-lembut);color:var(--kuning)}
.l-selesai,.l-terpakai,.l-disetujui,.l-terverifikasi{background:var(--hijau-lembut);color:var(--hijau)}
.l-ditolak,.l-dibatalkan,.l-batal{background:var(--merah-lembut);color:var(--merah)}
.l-dipesan{background:var(--ungu-lembut);color:var(--ungu)}
.l-baik{background:var(--hijau-lembut);color:var(--hijau)}
.l-rusak-ringan{background:var(--kuning-lembut);color:var(--kuning)}
.l-rusak-berat{background:var(--merah-lembut);color:var(--merah)}

.pesan{padding:.7rem .9rem;border-radius:9px;margin-bottom:.8rem;font-size:.9rem}
.pesan.ok{background:var(--hijau-lembut);color:var(--hijau)}
.pesan.salah{background:var(--merah-lembut);color:var(--merah)}
.pesan.info{background:#eaf2fa;color:var(--biru)}
.pesan.awas{background:var(--kuning-lembut);color:var(--kuning)}
.pesan ul{margin:.35rem 0 0 1.1rem;padding:0}

/* ---------- Kartu angka ---------- */
.angka-besar{font-size:1.6rem;font-weight:700;line-height:1.1}
.petak{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:.85rem .95rem}
.petak .ket{font-size:.75rem;color:var(--redup);text-transform:uppercase;letter-spacing:.4px}

/* ---------- Katalog layanan ---------- */
.katalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:.8rem}
.layanan{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:.9rem;
  cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:.35rem}
.layanan:hover{border-color:var(--aksen);box-shadow:var(--bayang)}
.layanan strong{font-size:.95rem}
.layanan .ket{font-size:.8rem;color:var(--redup)}
.layanan .jejak{font-size:.72rem;color:var(--aksen);font-weight:600}

/* ---------- Lini masa alur ---------- */
.linimasa{list-style:none;margin:0;padding:0}
.linimasa li{display:flex;gap:.7rem;padding:.55rem 0;border-left:2px solid var(--garis);
  margin-left:11px;padding-left:1.1rem;position:relative}
.linimasa li .titik{position:absolute;left:-9px;top:.75rem;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--garis)}
.linimasa li.selesai .titik{background:var(--hijau);border-color:var(--hijau)}
.linimasa li.menunggu .titik{background:var(--kuning);border-color:var(--kuning)}
.linimasa li.ditolak .titik,.linimasa li.dikembalikan .titik{background:var(--merah);border-color:var(--merah)}
.linimasa .isi strong{display:block;font-size:.9rem}
.linimasa .isi p{margin:.1rem 0 0;font-size:.82rem;color:var(--redup)}

/* ---------- Berkas ---------- */
.berkas{display:flex;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--garis);font-size:.88rem}
.berkas:last-child{border-bottom:none}
.berkas .nama{flex:1;min-width:0;overflow-wrap:anywhere}
.ikon{flex:none;width:30px;height:30px;border-radius:8px;background:#eef3f8;display:grid;
  place-items:center;font-size:.68rem;color:var(--biru);font-weight:700}
.syarat-baris{display:flex;gap:.5rem;align-items:center;padding:.45rem 0;border-bottom:1px dashed var(--garis)}
.syarat-baris:last-child{border-bottom:none}
.tanda{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:.7rem;font-weight:700;color:#fff;background:var(--merah)}
.tanda.ada{background:var(--hijau)}

/* ---------- Halaman depan publik ---------- */
/* Bahasa rupanya mengikuti debatekonas2026: kepala menempel, wira bergambar,
   label beralis, judul besar dengan frasa beraksen, kartu membulat, dan bagian
   berselang-seling putih–abu. Warnanya tetap biru SIKAKANONA. */
.masuk.depan{min-height:100vh;background:var(--kartu);display:block;padding:0;overflow-x:hidden}
/* Lapisan gelap milik tampilan ringkas menutupi seluruh elemen; pada halaman
   depan penuh, penggelapan itu urusan wira saja. */
.masuk.depan::before,.masuk.depan::after{display:none}
.masuk.depan .latar{position:absolute;inset:0;
  background:url('/gambar/gedung-feb.jpg') center 55% / cover no-repeat;
  animation:mendekat 26s ease-in-out infinite alternate}

.kop-depan{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.2rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--garis)}
.merek-depan{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--biru);margin-right:auto}
.merek-depan img{width:38px;height:38px;object-fit:contain}
.merek-depan strong{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em}
.merek-depan small{display:block;font-size:.72rem;color:var(--redup);font-weight:500}
.nav-depan{display:flex;gap:1.5rem}
.nav-depan a{color:var(--teks);text-decoration:none;font-weight:600;font-size:.92rem}
.nav-depan a:hover{color:var(--aksen)}
.tbl-pil{border:none;background:var(--biru);color:#fff;font:inherit;font-weight:700;
  padding:.62rem 1.3rem;border-radius:999px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:transform var(--gerak),box-shadow var(--gerak),background var(--gerak)}
.tbl-pil:hover{transform:translateY(-1px);box-shadow:var(--bayang-kecil)}
.tbl-pil.terang{background:var(--aksen)}
.tbl-pil.garis{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
.tbl-pil.garis:hover{background:rgba(255,255,255,.12)}

.wira{position:relative;overflow:hidden;background:#0e2f4d;
  padding:clamp(3rem,10vh,6.5rem) clamp(1rem,4vw,2.4rem) clamp(3.5rem,11vh,7rem)}
/* Gedungnya berdinding putih dan sangat terang; tanpa lapisan yang cukup pekat
   judul putih di atasnya tidak terbaca. Dua lapis: miring untuk sisi kiri
   tempat teks berada, dan tegak untuk menyatukan bagian bawahnya. */
.wira::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,26,43,.93) 0%,rgba(8,26,43,.78) 45%,rgba(8,26,43,.48) 100%),
    linear-gradient(to top,rgba(8,26,43,.55) 0%,rgba(8,26,43,0) 45%)}
.isi-wira{position:relative;z-index:2;max-width:var(--lebar-isi);margin:0 auto;color:#fff;
  animation:naik .7s var(--gerak-lembut) backwards}
.lencana-depan{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .95rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);
  font-size:.8rem;font-weight:600;letter-spacing:.01em}
.lencana-depan i{width:7px;height:7px;border-radius:50%;background:var(--aksen);flex:none}
/* Kekhususan sengaja dinaikkan: aturan `.masuk h1` milik kartu akses memberi
   warna teks gelap, dan pada judul di atas foto itu membuatnya tidak terbaca. */
.masuk.depan .isi-wira h1{font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.1;font-weight:800;
  margin:1.1rem 0 .8rem;color:#fff;max-width:17ch;letter-spacing:-.02em;
  /* Dinding gedungnya putih terang; bayangan tipis menjaga judul tetap terbaca
     pada bagian foto yang paling cerah. */
  text-shadow:0 2px 24px rgba(6,18,30,.6)}
.masuk.depan .isi-wira h1 em{font-style:normal;color:#7fe3cd}
.isi-wira p{margin:0;max-width:60ch;font-size:clamp(.95rem,1.6vw,1.06rem);color:rgba(255,255,255,.88)}
.baris-wira{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}

/* Deretan pintasan menumpang di perbatasan wira dan bagian berikutnya. */
.pintasan-depan{position:relative;z-index:5;max-width:var(--lebar-isi);
  margin:-2.4rem auto 0;background:var(--kartu);border:1px solid var(--garis);
  border-radius:var(--radius);box-shadow:var(--bayang);padding:1.1rem .6rem;
  display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem;
  width:calc(100% - 2*clamp(1rem,4vw,2.4rem))}
.pintasan-depan a{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  text-decoration:none;color:var(--teks);padding:.4rem .2rem;border-radius:var(--radius-kecil);
  transition:background var(--gerak)}
.pintasan-depan a:hover{background:var(--latar)}
.pintasan-depan .ubin{width:46px;height:46px;border-radius:15px;display:grid;place-items:center}
.pintasan-depan .nama{font-size:.76rem;font-weight:600;text-align:center;line-height:1.25}

.bagian{padding:clamp(3rem,8vh,5rem) clamp(1rem,4vw,2.4rem)}
.bagian.selang{background:var(--latar)}
.bagian>*{max-width:var(--lebar-isi);margin-left:auto;margin-right:auto}
.kepala-bagian{text-align:center;margin-bottom:2.4rem}
.alis{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--aksen)}
.alis::before{content:'';width:26px;height:2px;background:var(--aksen);border-radius:2px}
.kepala-bagian h2{font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.18;font-weight:800;
  margin:.7rem 0 .6rem}
.kepala-bagian h2 em{font-style:normal;color:var(--aksen)}
.kepala-bagian p{margin:0 auto;max-width:62ch;color:var(--redup)}

.kisi-bidang{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.1rem}
.kartu-bidang{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--bayang);transition:transform var(--gerak),box-shadow var(--gerak)}
.kartu-bidang:hover{transform:translateY(-3px);box-shadow:0 26px 60px -24px rgba(18,58,94,.38)}
.kartu-bidang .ubin{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:1rem}
.kartu-bidang .ubin svg{width:24px;height:24px}
.kartu-bidang h3{margin:0 0 .5rem;font-size:1.12rem;font-weight:800}
.kartu-bidang p{margin:0 0 .9rem;color:var(--redup);font-size:.92rem}
.kartu-bidang ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.kartu-bidang li{font-size:.78rem;font-weight:600;color:var(--biru);background:var(--latar);
  border-radius:999px;padding:.25rem .7rem}

.jejak-depan{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.4rem}
.jejak-depan li{position:relative;display:flex;flex-direction:column;gap:.25rem;text-align:left}
.jejak-depan li::after{content:'';position:absolute;top:22px;left:calc(50% + 30px);
  right:calc(-50% + 30px);height:2px;background:var(--garis)}
.jejak-depan li:last-child::after{display:none}
.jejak-depan .bulat{position:relative;width:44px;height:44px;border-radius:50%;display:grid;
  place-items:center;background:var(--aksen-lembut);color:var(--aksen);margin-bottom:.5rem}
.jejak-depan .bulat b{position:absolute;top:-4px;right:-5px;width:19px;height:19px;border-radius:50%;
  background:var(--biru);color:#fff;font-size:.66rem;display:grid;place-items:center;font-weight:700}
.jejak-depan strong{font-size:1rem}
@media(max-width:560px){.jejak-depan li::after{display:none}}

.dua-kolom{display:grid;grid-template-columns:1fr minmax(340px,440px);gap:2.6rem;align-items:start}
.dua-kolom h2{font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.18;font-weight:800;margin:.7rem 0 .8rem}
.dua-kolom h2 em{font-style:normal;color:var(--aksen)}
.dua-kolom p{color:var(--redup)}
.poin-tebal{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem}
.poin-tebal li{position:relative;padding-left:1.7rem;font-weight:600;font-size:.93rem}
.poin-tebal li::before{content:'';position:absolute;left:0;top:.45em;width:10px;height:10px;
  border-radius:3px;background:var(--aksen)}

.kaki-depan{background:var(--biru);color:rgba(255,255,255,.85);
  padding:2.2rem clamp(1rem,4vw,2.4rem);display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;align-items:center}
.kaki-depan strong{color:#fff}
.kaki-depan .mini{color:rgba(255,255,255,.65)}

@media(max-width:900px){
  .nav-depan{display:none}
  .pintasan-depan{grid-template-columns:repeat(3,1fr)}
  .dua-kolom{grid-template-columns:1fr;gap:1.8rem}
  /* Lapisan miring hanya menggelapkan sisi kiri — pada layar sempit seluruh
     lebar layar berisi dinding gedung yang terang, jadi penggelapannya dibuat
     merata. */
  .wira::after{background:linear-gradient(to bottom,rgba(8,26,43,.82) 0%,rgba(8,26,43,.88) 100%)}
  .masuk.depan .isi-wira h1{max-width:none}
}

/* ---------- Masuk ---------- */
/* Foto gedung FEB sebagai latar penuh, kartu masuk di sisi kanan. Lapisan gelap
   tipis menjaga teks tetap terbaca tanpa menenggelamkan fotonya. */
.masuk{min-height:100vh;display:flex;align-items:center;justify-content:flex-end;
  padding:2.5rem clamp(1rem,5vw,4.5rem);position:relative;overflow:hidden;background:#0e2f4d}
.masuk .latar{position:absolute;inset:0;background:url('/gambar/gedung-feb.jpg') center 55% / cover no-repeat;
  animation:mendekat 26s ease-in-out infinite alternate}
.masuk::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,26,43,.70) 0%,rgba(8,26,43,.38) 42%,rgba(8,26,43,.10) 100%)}
/* Lapisan kedua menggelapkan sudut kiri bawah, tempat teks putih berada. */
.masuk::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,26,43,.78) 0%,rgba(8,26,43,.15) 42%,rgba(8,26,43,0) 62%)}
@keyframes mendekat{ from{transform:scale(1)} to{transform:scale(1.07)} }

.masuk .kotak{position:relative;z-index:2;width:100%;max-width:440px;background:#fff;
  border-radius:22px;padding:2rem 2.1rem;box-shadow:0 30px 70px rgba(6,18,30,.42);
  animation:naik .6s var(--gerak-lembut) backwards;animation-delay:.1s}
.masuk .kop{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.masuk .kop img{width:52px;height:52px;object-fit:contain;flex:none}
.masuk .kop .judul{font-size:1.35rem;font-weight:800;color:var(--biru);letter-spacing:-.3px;line-height:1.1}
.masuk .kop .sub{font-size:.83rem;color:var(--redup);margin-top:.15rem}
.masuk h1{color:var(--teks);font-size:1.7rem;letter-spacing:-.5px;margin-bottom:.25rem}
.masuk .ajakan{color:var(--redup);font-size:.9rem;margin:0 0 1.3rem}
.masuk .tukar{text-align:center;font-size:.88rem;margin-top:1.1rem;color:var(--redup)}
.masuk .tukar button{font-weight:700;text-decoration:none;color:var(--biru-muda)}
.masuk .tukar button:hover{text-decoration:underline}
.masuk input{padding:.7rem .85rem;border-radius:11px}
.masuk button.tbl{padding:.75rem 1rem;border-radius:11px;font-size:.98rem}
.masuk .pesan{font-size:.86rem}

/* Sisi kiri dibiarkan menampilkan gedungnya; di layar sempit kartu berada di tengah. */
.masuk .sambutan{position:absolute;left:clamp(1rem,5vw,4.5rem);bottom:clamp(1.5rem,6vh,3.5rem);
  z-index:2;color:#fff;max-width:min(430px,42vw);text-shadow:0 2px 18px rgba(0,0,0,.45);
  animation:naik .7s var(--gerak-lembut) backwards;animation-delay:.05s}
.masuk .sambutan h2{font-size:1.7rem;line-height:1.2;margin-bottom:.4rem;color:#fff}
.masuk .sambutan p{margin:0;font-size:.95rem;opacity:.9}
/* Kepanjangan Sikakanona di pojok kiri bawah laman masuk. */
.masuk .kepanjangan{position:absolute;left:clamp(1rem,5vw,4.5rem);bottom:clamp(.8rem,2.2vh,1.4rem);z-index:2;
  max-width:min(560px,46vw);color:rgba(255,255,255,.82);font-size:.76rem;line-height:1.45;letter-spacing:.1px;
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.masuk .sambutan{bottom:clamp(3.6rem,9vh,5.4rem)}
@media(max-width:900px){
  .masuk{justify-content:center;padding:1.4rem 1.4rem 4.2rem}
  .masuk .sambutan{display:none}
  .masuk .kepanjangan{left:1rem;right:1rem;bottom:.9rem;max-width:none;font-size:.7rem}
}

button.tautan.bahaya{color:var(--merah)}

/* ---------- Tirai / panel samping ---------- */
.tirai{position:fixed;inset:0;background:rgba(12,22,32,.45);z-index:40;display:flex;justify-content:flex-end}
.tirai .panel{background:#fff;width:min(560px,100%);height:100%;overflow-y:auto;padding:1.2rem}
.tirai .panel h2{margin-bottom:.8rem}

.kosong{text-align:center;color:var(--redup);padding:2rem 1rem;font-size:.9rem}
.muat{text-align:center;color:var(--redup);padding:1.5rem}
.mini{font-size:.8rem;color:var(--redup)}

/* Bilah samping menyempit lebih dulu sebelum hilang sama sekali, supaya pada
   layar sedang isinya tidak terdesak. */
@media(max-width:1100px){
  :root{--lebar-sisi:212px}
  .panel-menu .teks .mini{display:none}
}

.centang{display:flex;align-items:center;gap:.1rem;font-size:.88rem;padding:.3rem 0}
.centang input{flex:none}

/* ---------- Kartu sambutan ---------- */
.hero{background:linear-gradient(125deg,#0e2f4d 0%,#164a76 55%,#0b8f76 160%);color:#fff;
  border-radius:18px;padding:1.6rem 1.8rem;position:relative;overflow:hidden;min-height:210px;
  display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.hero .teks{position:relative;z-index:2;max-width:62%}
.hero .tanggal{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.16);
  border-radius:9px;padding:.35rem .7rem;font-size:.78rem;font-weight:600;margin-bottom:.9rem}
.hero h1{font-size:1.85rem;line-height:1.18;margin:0 0 .35rem;letter-spacing:-.4px}
.hero p{margin:0;font-size:.95rem;color:rgba(255,255,255,.85)}
.hero .gambar{position:absolute;right:1.2rem;bottom:0;width:290px;max-width:42%;z-index:1;
  pointer-events:none}
@media(max-width:760px){
  .hero .teks{max-width:100%} .hero .gambar{display:none} .hero h1{font-size:1.45rem}
}

/* ---------- Kartu statistik berwarna ---------- */
.petak-warna{border-radius:16px;padding:1.1rem 1.2rem;color:#fff;display:flex;align-items:center;
  gap:.9rem;box-shadow:0 8px 20px rgba(16,32,48,.10)}
.petak-warna .angka{font-size:2rem;font-weight:800;line-height:1;min-width:2ch}
.petak-warna .isi{flex:1;min-width:0}
.petak-warna .isi strong{overflow-wrap:anywhere}
.petak-warna .isi strong{display:block;font-size:1rem;font-weight:700}
.petak-warna .isi span{font-size:.78rem;opacity:.9}
.petak-warna .lingkar{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);
  display:grid;place-items:center;flex:none}
.petak-warna .lingkar svg{width:24px;height:24px}
.w1{background:linear-gradient(135deg,#ec4e6f,#d63864)}
.w2{background:linear-gradient(135deg,#12a3b4,#0d8798)}
.w3{background:linear-gradient(135deg,#f0a323,#dd8b12)}
.w4{background:linear-gradient(135deg,#21b573,#149a5f)}

/* ---------- Kartu bertajuk navy ---------- */
.kartu.tajuk{padding:0;overflow:hidden}
.kartu.tajuk > .kepala{background:var(--biru);color:#fff;padding:.85rem 1.1rem;display:flex;
  align-items:center;justify-content:space-between;gap:.6rem}
.kartu.tajuk > .kepala h2{margin:0;font-size:1rem;color:#fff}
.kartu.tajuk > .kepala .alat{display:flex;gap:.4rem}
.kartu.tajuk > .kepala button{background:rgba(255,255,255,.18);border:none;color:#fff;cursor:pointer;
  border-radius:8px;padding:.3rem .5rem;font:inherit;font-size:.78rem;display:grid;place-items:center}
.kartu.tajuk > .kepala button:hover{background:rgba(255,255,255,.3)}
.kartu.tajuk > .kepala svg{width:15px;height:15px}
.kartu.tajuk > .badan{padding:1.1rem}
.kartu.tajuk > .badan.rapat{padding:.7rem 1.1rem}

/* ---------- Kartu profil ---------- */
.profil{display:flex;gap:.9rem;align-items:center;margin-bottom:.9rem}
.profil .avatar-besar{width:66px;height:66px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--biru),var(--aksen));color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:1.25rem}
.profil .nama{font-size:1.05rem;font-weight:700;line-height:1.25}
.profil .unit{font-size:.83rem;color:var(--redup)}
.lencana{display:inline-block;background:var(--hijau-lembut);color:var(--hijau);border-radius:6px;
  padding:.12rem .5rem;font-size:.72rem;font-weight:700;margin-top:.3rem}
.ukuran3{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;
  border-top:1px solid var(--garis);padding-top:.85rem}
.ukuran3 > div + div{border-left:1px solid var(--garis)}
.ukuran3 .ket{font-size:.72rem;color:var(--redup);line-height:1.25}
.ukuran3 .nilai{font-size:1.3rem;font-weight:800;color:var(--biru-muda)}

/* ---------- Daftar ringkas ---------- */
.daftar-ringkas{list-style:none;margin:0;padding:0}
.daftar-ringkas li{padding:.6rem 0;border-bottom:1px dashed var(--garis);display:flex;gap:.6rem;
  align-items:flex-start}
.daftar-ringkas li:last-child{border-bottom:none}
.daftar-ringkas .titik-warna{width:8px;height:8px;border-radius:50%;background:var(--aksen);
  flex:none;margin-top:.45rem}
.daftar-ringkas .isi{flex:1;min-width:0}
.daftar-ringkas .isi strong{display:block;font-size:.88rem;font-weight:600}

/* ---------- Judul halaman dan judul kartu ---------- */
/* Hanya h1 yang menjadi anak langsung <main>; judul di dalam kartu sambutan
   memakai gayanya sendiri. */
main > h1{position:relative;padding-left:.9rem;margin-bottom:.15rem}
main > h1::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  border-radius:3px;background:linear-gradient(180deg,var(--biru),var(--aksen))}

.kartu > h2:first-child,
.kartu > .baris.rata:first-child{padding-bottom:.6rem;margin-bottom:.9rem;
  border-bottom:1px solid var(--garis)}
.kartu > h2:first-child::before,
.kartu > .baris.rata:first-child h2::before{content:'';display:inline-block;width:4px;height:15px;
  border-radius:2px;background:var(--aksen);margin-right:.5rem;vertical-align:-2px}
.kartu > .baris.rata:first-child .petunjuk{margin-bottom:0}

/* ==========================================================================
   Gerak dan keterpaduan
   Satu tempo untuk seluruh aplikasi supaya perpindahannya terasa satu kesatuan,
   bukan tiap bagian bergerak sendiri-sendiri.
   ========================================================================== */
:root{ --gerak:.28s cubic-bezier(.4,0,.2,1); --gerak-lembut:.45s cubic-bezier(.16,.84,.44,1); }

@keyframes naik{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes pudar{ from{opacity:0} to{opacity:1} }
@keyframes masukKanan{ from{opacity:0;transform:translateX(36px)} to{opacity:1;transform:none} }
@keyframes kilau{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
@keyframes denyut{
  0%{box-shadow:0 0 0 0 rgba(240,163,35,.5)}
  70%{box-shadow:0 0 0 9px rgba(240,163,35,0)}
  100%{box-shadow:0 0 0 0 rgba(240,163,35,0)}
}

/* Isi halaman masuk berurutan dari atas ke bawah, bukan muncul serentak. */
main > *{animation:naik var(--gerak-lembut) backwards}
main > *:nth-child(1){animation-delay:.02s}
main > *:nth-child(2){animation-delay:.07s}
main > *:nth-child(3){animation-delay:.12s}
main > *:nth-child(4){animation-delay:.17s}
main > *:nth-child(5){animation-delay:.22s}
main > *:nth-child(n+6){animation-delay:.26s}

/* ---------- Blok dasbor: sambutan dan statistik menjadi satu panel ---------- */
/* Kartu sambutan dan deretan statistik berdiri sendiri-sendiri, dipisahkan
   jarak yang sama dengan jarak antarkartu lain di halaman. */
.dasbor-atas{position:relative;margin-bottom:1.15rem}
.dasbor-atas .hero{margin-bottom:1.1rem}
.deret-statistik{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:.9rem;
  margin:0;position:relative}

/* Catatan pelengkap profil menempel di dalam kartu sambutan, tidak berdiri sendiri. */
.hero .catatan{margin-top:1.05rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:.65rem .9rem;
  font-size:.86rem;line-height:1.45;display:flex;gap:.55rem;align-items:flex-start;
  backdrop-filter:blur(2px);max-width:640px}
.hero .catatan svg{width:17px;height:17px;flex:none;margin-top:.15rem}
.hero .catatan button{background:none;border:none;color:#fff;font:inherit;font-weight:700;
  text-decoration:underline;cursor:pointer;padding:0}

/* ---------- Kartu statistik yang bisa ditekan ---------- */
.petak-warna{transition:transform var(--gerak),box-shadow var(--gerak);border:none;font:inherit;
  text-align:left;width:100%;min-width:0;overflow:hidden}
button.petak-warna{cursor:pointer}
.petak-warna:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(16,32,48,.20)}
.petak-warna:active{transform:translateY(-1px)}
.petak-warna .lingkar{transition:transform .45s var(--gerak-lembut)}
.petak-warna:hover .lingkar{transform:rotate(-10deg) scale(1.08)}
.petak-warna .angka{font-variant-numeric:tabular-nums}

/* ---------- Sentuhan gerak pada komponen lain ---------- */
.kartu{transition:box-shadow var(--gerak),transform var(--gerak)}
.layanan{transition:transform var(--gerak),box-shadow var(--gerak),border-color var(--gerak)}
.layanan:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(16,32,48,.10)}
button.tbl,button.tautan,.tbl-akun,.lonceng{transition:background var(--gerak),color var(--gerak),
  transform .12s ease,box-shadow var(--gerak)}
button.tbl:active{transform:scale(.97)}
nav.tab button{transition:color var(--gerak),background var(--gerak),border-color var(--gerak)}
nav.tab svg{transition:transform var(--gerak)}
nav.tab button:hover svg{transform:translateY(-1px) scale(1.08)}
tbody tr{transition:background .18s ease}
.kartu.tajuk > .kepala button{transition:background var(--gerak),transform .12s ease}
.kartu.tajuk > .kepala button:active{transform:scale(.94)}
.syarat-baris,.daftar-ringkas li{transition:background var(--gerak)}
.daftar-ringkas li:hover{background:#f7fafc}
input,select,textarea{transition:border-color var(--gerak),box-shadow var(--gerak)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(11,143,118,.12)}

/* Langkah yang sedang menunggu berdenyut pelan supaya mudah ditemukan mata. */
.linimasa li{animation:naik .4s backwards}
.linimasa li:nth-child(2){animation-delay:.05s}
.linimasa li:nth-child(3){animation-delay:.1s}
.linimasa li:nth-child(4){animation-delay:.15s}
.linimasa li:nth-child(n+5){animation-delay:.2s}
.linimasa li.menunggu .titik{animation:denyut 2.2s ease-out infinite}

/* ---------- Panel samping ---------- */
.tirai{animation:pudar .2s ease}
.tirai .panel{animation:masukKanan .32s var(--gerak-lembut);box-shadow:-18px 0 40px rgba(12,22,32,.18)}
.tirai.menutup{animation:pudar .18s ease reverse forwards}
.tirai.menutup .panel{animation:masukKanan .18s ease reverse forwards}

/* ---------- Rangka pemuatan ---------- */
.rangka{background:linear-gradient(90deg,#eef2f6 25%,#e2e9f0 37%,#eef2f6 63%);
  background-size:400% 100%;animation:kilau 1.3s ease-in-out infinite;border-radius:9px}
.rangka-baris{height:15px;margin-bottom:.7rem}
.rangka-kartu{height:104px;margin-bottom:.9rem}
.muat-rangka{padding:.2rem}

/* Menghormati pengguna yang mematikan animasi di perangkatnya. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* Deretan statistik yang berdiri sendiri (di luar kartu sambutan). */
.deret-statistik.lepas{margin:0 0 1.15rem}
.petak-warna .angka.teks{font-size:.98rem;line-height:1.25;font-weight:800;min-width:0;flex:none;
  white-space:nowrap}
.deret-statistik.lepas .petak-warna .isi strong{font-size:.92rem}
.deret-statistik.lepas .petak-warna .isi span{font-size:.74rem}
.tirai.menutup{pointer-events:none}

/* ---------- Foto profil ---------- */
.avatar.berfoto,.avatar-besar.berfoto{padding:0;overflow:hidden;background:#e3ebf3}
.avatar img,.avatar-besar img{width:100%;height:100%;object-fit:cover;display:block}
.pilih-foto{display:flex;gap:.9rem;align-items:center;margin-bottom:1.1rem;padding-bottom:1.1rem;
  border-bottom:1px solid var(--garis)}
.pilih-foto .avatar-besar{width:72px;height:72px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--biru),var(--aksen));color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:1.3rem;overflow:hidden}
.pilih-foto > div{flex:1;min-width:0}
.pilih-foto input[type=file]{font-size:.82rem;padding:.4rem}

/* ---------- Masuk dengan Google ---------- */
.pemisah{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;color:var(--redup);font-size:.8rem}
.pemisah::before,.pemisah::after{content:'';flex:1;height:1px;background:var(--garis)}
.tbl-google{display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%;
  padding:.72rem 1rem;border:1px solid var(--garis);border-radius:11px;background:#fff;
  color:var(--teks);font-weight:600;font-size:.95rem;text-decoration:none;
  transition:background var(--gerak),box-shadow var(--gerak),transform .12s ease}
.tbl-google:hover{background:#f6f9fc;box-shadow:0 4px 14px rgba(16,32,48,.10)}
.tbl-google:active{transform:scale(.98)}
.kenal-google{display:flex;align-items:center;gap:.8rem;background:#f4f7fa;border:1px solid var(--garis);
  border-radius:12px;padding:.7rem .85rem;margin-bottom:1rem}
.kenal-google img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.kenal-google .avatar-besar{width:46px;height:46px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--biru),var(--aksen));color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.95rem}

/* ---------- Kartu layanan ---------- */
.katalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.9rem}
.kartu-layanan{background:#fff;border:1px solid var(--garis);border-radius:14px;padding:1rem 1.05rem;
  display:flex;flex-direction:column;gap:.6rem;height:100%;
  transition:transform var(--gerak),box-shadow var(--gerak),border-color var(--gerak)}
.kartu-layanan:hover{transform:translateY(-3px);border-color:#c3d4e2;box-shadow:0 12px 26px rgba(16,32,48,.10)}
.kartu-layanan .kepala{display:flex;gap:.75rem;align-items:flex-start}
.kartu-layanan .nama{min-width:0}
.kartu-layanan .nama strong{display:block;font-size:.97rem;line-height:1.3;letter-spacing:-.1px}
.kartu-layanan .kategori{display:block;font-size:.68rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--redup);margin-top:.2rem}
.kartu-layanan .ket{margin:0;font-size:.85rem;color:var(--redup);line-height:1.5;flex:1}
.kartu-layanan .kaki{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  flex-wrap:wrap;border-top:1px dashed var(--garis);padding-top:.7rem;margin-top:.1rem}

.lencana-ikon{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center}
.lencana-ikon svg{width:20px;height:20px}
.lencana-ikon.besar{width:52px;height:52px;border-radius:14px}
.lencana-ikon.besar svg{width:26px;height:26px}
.k-surat{background:#dff2ef;color:#0b8f76}
.k-akademik{background:#e2edf8;color:#1d5c92}
.k-kemahasiswaan{background:#efeaf9;color:#5b3ea8}
.k-keuangan{background:#e3f5ea;color:#0a7d4b}
.k-kepegawaian{background:#fbeed9;color:#9a6400}
.k-umum{background:#e9edf1;color:#4a5a6a}

/* ---------- Menu petunjuk ---------- */
.kepala-petunjuk{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:.9rem}
.judul-bagian{font-size:.76rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--redup);margin:1.3rem 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--garis)}
.tahapan{list-style:none;margin:0;padding:0}
.tahapan li{display:flex;gap:.85rem;padding-bottom:1rem;position:relative}
.tahapan li::before{content:'';position:absolute;left:13px;top:30px;bottom:2px;width:2px;background:var(--garis)}
.tahapan li:last-child{padding-bottom:0}
.tahapan li:last-child::before{display:none}
.tahapan .no{width:28px;height:28px;border-radius:50%;background:var(--biru);color:#fff;flex:none;
  display:grid;place-items:center;font-size:.82rem;font-weight:700;position:relative;z-index:1}
.tahapan strong{display:block;font-size:.9rem;line-height:1.35}
.tahapan p{margin:.12rem 0 0;font-size:.82rem;color:var(--redup)}
.tahapan p.arti{color:var(--biru-muda);font-size:.79rem;margin-top:.2rem}
.tanda.lembut{background:#c9d4de}

/* ---------- Lencana peran akun ---------- */
.peran{display:inline-block;padding:.14rem .55rem;border-radius:99px;font-size:.72rem;font-weight:700;
  text-transform:capitalize;letter-spacing:.2px}
.p-mahasiswa{background:#e2edf8;color:#1d5c92}
.p-dosen{background:#dff2ef;color:#0b8f76}
.p-pegawai{background:#fbeed9;color:#9a6400}
.p-admin{background:#f7e3e7;color:#9c3a4c}

/* ==========================================================================
   Kartu sambutan: sapaan, keadaan berjalan, dan adegan administrasi
   ========================================================================== */
.hero .tanggal{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.hero h1{font-size:clamp(1.5rem,3.2vw,2rem)}
.hero .sorot-nama{color:#f5c26b}
.hero .teks{max-width:58%}

.hero .keadaan{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:1rem;
  font-size:.88rem;color:rgba(255,255,255,.78)}
.hero .keadaan strong{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.hero .keadaan .zona{font-size:.76rem;letter-spacing:.4px}
.hero .pemisah-titik{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.hero .denyut{width:9px;height:9px;border-radius:50%;background:#21b573;flex:none;
  box-shadow:0 0 0 0 rgba(33,181,115,.6);animation:denyut-hijau 2s ease-out infinite}
@keyframes denyut-hijau{
  0%{box-shadow:0 0 0 0 rgba(33,181,115,.55)}
  70%{box-shadow:0 0 0 8px rgba(33,181,115,0)}
  100%{box-shadow:0 0 0 0 rgba(33,181,115,0)}
}

/* ---------- Adegan: surat disusun, dicap, lalu disetujui (satu siklus 8 detik) ---------- */
.adegan{right:.6rem;bottom:auto;top:50%;transform:translateY(-50%);width:340px;max-width:46%}
.adegan *{transform-box:fill-box}

.au-sinar{animation:napas 7s ease-in-out infinite}
.au-sinar.lambat{animation-duration:9s;animation-delay:-3s}
@keyframes napas{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.au-surat{transform-origin:center;animation:melayang 6s ease-in-out infinite}
.au-map{transform-origin:center;animation:melayang 6s ease-in-out infinite;animation-delay:-2s}
@keyframes melayang{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Baris surat tumbuh satu per satu, seperti konsep yang sedang disusun. */
.au-baris{transform-origin:left center;animation:tulis 8s ease-in-out infinite}
.au-baris.b1{animation-delay:.1s}
.au-baris.b2{animation-delay:.35s}
.au-baris.b3{animation-delay:.6s}
.au-baris.b4{animation-delay:.85s}
@keyframes tulis{
  0%{transform:scaleX(0)}
  14%,86%{transform:scaleX(1)}
  96%,100%{transform:scaleX(0)}
}

/* Cap turun, menekan, lalu terangkat. */
.au-cap{transform-origin:center bottom;animation:mengecap 8s ease-in-out infinite}
@keyframes mengecap{
  0%,26%{transform:translate(0,-46px) rotate(-8deg);opacity:0}
  32%{transform:translate(0,-10px) rotate(0deg);opacity:1}
  38%{transform:translate(0,46px) rotate(0deg);opacity:1}
  44%{transform:translate(0,52px) rotate(0deg);opacity:1}
  52%{transform:translate(0,-14px) rotate(0deg);opacity:1}
  66%,100%{transform:translate(0,-46px) rotate(-8deg);opacity:0}
}

/* Bekas cap muncul tepat saat cap menekan kertas. */
.au-bekas{transform-origin:center;animation:membekas 8s ease-in-out infinite}
@keyframes membekas{
  0%,42%{opacity:0;transform:scale(.82) rotate(-10deg)}
  48%{opacity:1;transform:scale(1.06) rotate(-10deg)}
  54%,88%{opacity:1;transform:scale(1) rotate(-10deg)}
  96%,100%{opacity:0;transform:scale(1) rotate(-10deg)}
}

/* Tanda setuju muncul sesudahnya. */
.au-centang{transform-origin:center;animation:disetujui 8s ease-in-out infinite}
@keyframes disetujui{
  0%,56%{opacity:0;transform:translate(258px,62px) scale(.5)}
  63%{opacity:1;transform:translate(258px,62px) scale(1.12)}
  68%,88%{opacity:1;transform:translate(258px,62px) scale(1)}
  96%,100%{opacity:0;transform:translate(258px,62px) scale(1)}
}

/* Rantai disposisi menyala berurutan: prodi → wakil dekan → tata usaha. */
.au-rantai circle{opacity:.25;animation:menyala 8s ease-in-out infinite}
.au-rantai .s1{animation-delay:.2s}
.au-rantai .s2{animation-delay:1.4s}
.au-rantai .s3{animation-delay:2.6s}
@keyframes menyala{0%,4%{opacity:.25}10%,80%{opacity:1}92%,100%{opacity:.25}}

.au-kilau{transform-origin:center;animation:berkelip 4s ease-in-out infinite}
.au-kilau.k2{animation-delay:-1.3s;animation-duration:5s}
.au-kilau.k3{animation-delay:-2.6s;animation-duration:6s}
@keyframes berkelip{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.9;transform:scale(1.1)}}

@media(max-width:860px){
  .hero .teks{max-width:100%}
  .adegan{display:none}
}

/* Bila pengguna mematikan animasi, adegan berhenti pada keadaan akhir yang
   bermakna — surat sudah tersusun, tercap, dan disetujui — bukan kertas kosong. */
@media (prefers-reduced-motion: reduce){
  .au-baris{transform:scaleX(1) !important}
  .au-bekas{opacity:1 !important;transform:scale(1) rotate(-10deg) !important}
  .au-centang{opacity:1 !important;transform:translate(258px,62px) scale(1) !important}
  .au-rantai circle{opacity:1 !important}
  .au-cap{opacity:0 !important}
  .au-kilau{opacity:.5 !important}
}

/* ---------- Kontak pada kartu profil ---------- */
.kontak{display:flex;flex-direction:column;gap:.45rem;margin:.2rem 0 .9rem;font-size:.86rem}
.baris-kontak{display:flex;align-items:flex-start;gap:.5rem;color:var(--redup);line-height:1.4}
.baris-kontak svg{flex:none;margin-top:.15rem;color:var(--aksen)}
.baris-kontak a{color:var(--biru-muda);text-decoration:none;overflow-wrap:anywhere}
.baris-kontak a:hover{text-decoration:underline}
.kosong-kontak{color:var(--kuning)}

/* ==========================================================================
   Tampilan telepon genggam
   ========================================================================== */
@media(max-width:720px){
  /* Bilah menu diganti dok bawah; kepala putihnya tetap ada. */
  .sisi-kiri{display:none}
  main{padding:.9rem .75rem 2.5rem;margin-left:0}
  header.atas{padding:.5rem .8rem;gap:.5rem}
  header.atas .logo{width:36px;height:36px}
  /* Nama yang panjang mendorong tombol kanan turun ke baris kedua dan kepala
     jadi dua kali lebih tinggi; dikecilkan sedikit supaya tetap satu baris. */
  header.atas .judul{font-size:.88rem;letter-spacing:-.3px}
  header.atas .merek{gap:.45rem;padding:.15rem .2rem}
  header.atas .sub{display:none}
  header.atas .kanan{gap:.35rem}
  /* Nama dan pil peran memakan ruang; di layar sempit avatar sudah cukup. */
  .pil-peran span{display:none}
  .pil-peran{padding:.42rem .5rem}
  .tbl-akun .nama,.tbl-akun .ket{display:none}
  .tbl-akun{padding:.2rem}
  #tbl-keluar{padding:.34rem .6rem;font-size:.78rem}

  nav.tab{padding:0 .5rem}
  nav.tab button{padding:.7rem .65rem;font-size:.82rem}
  .panel-menu{min-width:min(290px,calc(100vw - 1.6rem))}

  .hero{padding:1.1rem 1.15rem;border-radius:14px;min-height:0}
  .hero h1{font-size:1.35rem}
  .hero .keadaan{font-size:.8rem;gap:.4rem}
  .kartu{padding:.9rem;border-radius:12px}
  .kartu.tajuk > .badan{padding:.9rem}
  .kartu.tajuk > .kepala{padding:.7rem .9rem}
  .deret-statistik{grid-template-columns:1fr 1fr;gap:.6rem}
  .petak-warna{padding:.8rem .85rem;gap:.55rem;border-radius:13px}
  .petak-warna .angka{font-size:1.5rem}
  .petak-warna .isi strong{font-size:.85rem}
  .petak-warna .isi span{font-size:.7rem}
  .petak-warna .lingkar{width:38px;height:38px}
  .petak-warna .lingkar svg{width:18px;height:18px}
  main > h1{font-size:1.2rem}
  .katalog{grid-template-columns:1fr}
  table{font-size:.82rem}
  th,td{padding:.45rem .5rem}
  .ukuran3 .nilai{font-size:1.1rem}
}

/* Panel samping menjadi lembar yang naik dari bawah — kebiasaan di ponsel. */
@media(max-width:620px){
  .tirai{align-items:flex-end}
  .tirai .panel{width:100%;height:auto;max-height:92vh;border-radius:18px 18px 0 0;
    padding:1rem 1rem 2rem;animation:naikSheet .32s var(--gerak-lembut);
    box-shadow:0 -14px 40px rgba(12,22,32,.28)}
  .tirai .panel::before{content:'';display:block;width:44px;height:4px;border-radius:99px;
    background:var(--garis);margin:0 auto .8rem}
  .tirai.menutup .panel{animation:naikSheet .2s ease reverse forwards}
}
@keyframes naikSheet{from{transform:translateY(100%);opacity:.4}to{transform:translateY(0);opacity:1}}

/* Sentuhan jari: umpan balik cepat, bukan efek sorot yang menggantung. */
@media(hover:none){
  .kartu-layanan:active{transform:scale(.985)}
  .petak-warna:active{transform:scale(.98)}
  .layanan:active,.daftar-ringkas li:active{background:#f1f5f9}
  button.tbl:active,.tbl-google:active{transform:scale(.97)}
  .kartu-layanan:hover,.petak-warna:hover,.layanan:hover{transform:none;box-shadow:var(--bayang)}
}

/* Di layar paling sempit, lingkaran ikon mengorbankan ruang teks — kartu
   statistik lebih terbaca tanpa ikonnya. */
@media(max-width:560px){
  .petak-warna .lingkar{display:none}
  .petak-warna{gap:.7rem}
  .petak-warna .isi strong{font-size:.88rem}
}

/* ==========================================================================
   Saat dipasang di layar utama iPhone
   Bilah status tembus pandang, jadi kop harus menyisakan ruang untuk poni,
   dan bagian bawah untuk garis geser. Tanpa ini isi halaman tertutup.
   ========================================================================== */
.terpasang header.atas{padding-top:calc(.55rem + env(safe-area-inset-top));
  padding-left:calc(1.4rem + env(safe-area-inset-left));
  padding-right:calc(1.4rem + env(safe-area-inset-right))}
.terpasang main{padding-bottom:calc(2.5rem + env(safe-area-inset-bottom));
  padding-left:calc(.75rem + env(safe-area-inset-left));
  padding-right:calc(.75rem + env(safe-area-inset-right))}
.terpasang .tirai .panel{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
.terpasang .masuk{padding-top:calc(2.5rem + env(safe-area-inset-top));
  padding-bottom:calc(2.5rem + env(safe-area-inset-bottom))}

/* Di dalam aplikasi terpasang, teks tidak perlu bisa dipilih seperti halaman web —
   ini menghilangkan kaca pembesar dan menu salin yang muncul saat menekan lama. */
.terpasang{-webkit-touch-callout:none}
.terpasang nav.tab button,.terpasang .petak-warna,.terpasang .kartu-layanan,
.terpasang button,.terpasang .tbl-akun{-webkit-user-select:none;user-select:none}
.terpasang input,.terpasang textarea,.terpasang select,
.terpasang p,.terpasang td,.terpasang .nama{-webkit-user-select:text;user-select:text}

/* Menghilangkan kilatan biru saat elemen disentuh di iOS. */
*{-webkit-tap-highlight-color:transparent}

/* ==========================================================================
   Dok bawah — hanya di layar ponsel
   ========================================================================== */
.dok{display:none}
@media(max-width:720px){
  /* Menu pindah ke bawah, dalam jangkauan jempol. */
  nav.tab{display:none}
  main{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}

  .dok{display:flex;position:fixed;z-index:30;
    left:max(.6rem,env(safe-area-inset-left));right:max(.6rem,env(safe-area-inset-right));
    bottom:calc(.6rem + env(safe-area-inset-bottom));
    background:var(--biru);border-radius:22px;padding:.4rem .3rem;
    box-shadow:0 10px 30px rgba(8,22,36,.35),0 2px 8px rgba(8,22,36,.2);
    animation:dokNaik .45s var(--gerak-lembut) backwards;animation-delay:.15s}
  @keyframes dokNaik{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}

  .dok button{flex:1;background:none;border:none;color:rgba(255,255,255,.62);cursor:pointer;
    font:inherit;font-size:.66rem;font-weight:600;padding:.5rem .15rem .45rem;border-radius:16px;
    display:flex;flex-direction:column;align-items:center;gap:.22rem;min-width:0;
    transition:color var(--gerak),background var(--gerak),transform .16s ease}
  .dok button svg{width:21px;height:21px;transition:transform .3s var(--gerak-lembut)}
  .dok button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .dok button:active{transform:scale(.92)}
  .dok button.aktif{color:#fff;background:rgba(255,255,255,.14)}
  .dok button.aktif svg{transform:translateY(-2px) scale(1.08)}
  /* Titik kecil menandai menu yang sedang terbuka. */
  .dok button.aktif::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--aksen);
    position:absolute;bottom:.16rem}
  .dok button{position:relative}
}

/* ---------- Lembar "Lainnya" ---------- */
.menu-lainnya{display:flex;flex-direction:column;gap:.2rem;margin-bottom:.4rem}
.menu-lainnya button{display:flex;align-items:center;gap:.75rem;width:100%;background:none;
  border:none;border-radius:11px;padding:.7rem .6rem;font:inherit;font-size:.95rem;
  color:var(--teks);cursor:pointer;text-align:left;transition:background var(--gerak)}
.menu-lainnya button:hover,.menu-lainnya button:active{background:var(--sorot-lembut,#eef3f8)}
.menu-lainnya button.aktif{background:var(--aksen-lembut);color:var(--biru);font-weight:600}
.ikon-menu{width:34px;height:34px;border-radius:10px;background:#eef3f8;color:var(--biru);
  display:grid;place-items:center;flex:none}
.ikon-menu svg{width:17px;height:17px}

/* ---------- Sakelar pemberitahuan ---------- */
.sakelar{display:flex;align-items:center;gap:.8rem;padding:.75rem .8rem;border:1px solid var(--garis);
  border-radius:12px;background:#fff}
.sakelar .isi{flex:1;min-width:0}
.sakelar .isi strong{display:block;font-size:.92rem}
.sakelar .isi span{font-size:.8rem;color:var(--redup);line-height:1.4;display:block;margin-top:.15rem}
.sakelar .lampu{width:10px;height:10px;border-radius:50%;flex:none;background:#c9d4de}
.sakelar.hidup .lampu{background:var(--hijau);box-shadow:0 0 0 0 rgba(10,125,75,.5);
  animation:denyut-hijau 2.4s ease-out infinite}

/* ==========================================================================
   Kisi layanan — dipilih dengan mengenali ikon, bukan membaca paragraf
   ========================================================================== */
.kisi-layanan{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem .1rem}
/* ---------- Gerbang ---------- */
/* Layar pertama sesudah masuk. Sengaja hanya berisi gelembung bidang: satu
   keputusan saja yang diminta, "urusan saya apa". Latarnya biru bergradasi
   dengan foto gedung yang samar, supaya terasa sebagai beranda tersendiri dan
   bukan sekadar halaman kosong. */
.gerbang{position:fixed;inset:0;z-index:15;overflow-y:auto;background:var(--biru);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.latar-gerbang{position:absolute;inset:0;pointer-events:none;
  background:url('/gambar/gedung-feb.jpg') center 55% / cover no-repeat;opacity:.16}
.gerbang::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(29,92,146,.55) 0%,rgba(18,58,94,.92) 62%,#0d2c47 100%)}

.kop-gerbang{position:relative;z-index:2;display:flex;align-items:center;gap:1rem;
  padding:1rem clamp(1rem,4vw,2.2rem)}
.kop-gerbang .salam{color:rgba(255,255,255,.82);font-size:.95rem;margin-right:auto}
.kop-gerbang .salam strong{color:#fff;font-weight:700}
.alat-gerbang{display:flex;gap:.5rem;align-items:center}
.bulat-gerbang{position:relative;width:40px;height:40px;border-radius:999px;border:none;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;
  font:inherit;transition:background var(--gerak)}
.bulat-gerbang.lebar{width:auto;padding:0 1.05rem;gap:.42rem;
  grid-auto-flow:column;font-weight:700;font-size:.88rem}
.bulat-gerbang:hover{background:rgba(255,255,255,.26)}
.bulat-gerbang svg{width:18px;height:18px}
.bulat-gerbang i{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;
  border-radius:999px;background:var(--merah);color:#fff;font-size:.66rem;font-style:normal;
  font-weight:700;display:grid;place-items:center}

.isi-gerbang{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:1rem clamp(1rem,4vw,2.2rem) 2rem}
.sambut-gerbang{margin:0;color:rgba(255,255,255,.72);font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.pil-gerbang{border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);
  color:#fff;font:inherit;font-weight:700;padding:.68rem 1.4rem;border-radius:999px;
  cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  transition:background var(--gerak),border-color var(--gerak)}
.pil-gerbang:hover{background:rgba(255,255,255,.22);border-color:#fff}
.pil-gerbang svg{width:17px;height:17px}

/* Di gerbang, gelembungnya jadi tokoh utama — dibesarkan dan dibalik warnanya
   agar terbaca di atas latar biru. */
.pusat-layanan.besar{max-width:min(620px,74vh)}
.gerbang .gelembung{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.55)}
.gerbang .gelembung:hover,.gerbang .gelembung:focus-visible{background:#fff;
  box-shadow:0 0 0 7px rgba(255,255,255,.18),0 18px 44px -18px rgba(0,0,0,.5)}
.gerbang .inti{box-shadow:0 0 0 14px rgba(255,255,255,.12),0 20px 50px -20px rgba(0,0,0,.55)}
.gerbang .gelembung .nama{color:var(--biru)}

@media(max-width:700px){
  .isi-gerbang{justify-content:flex-start;padding-top:.5rem}
  .pusat-layanan.besar{max-width:none}
  .gerbang .gelembung{background:rgba(255,255,255,.96)}
}

/* ---------- Gelembung bidang layanan ---------- */
/* Tiap bidang berdiri sendiri sebagai lingkaran besar yang melingkari lambang
   di tengah. Sudutnya dihitung di app.js dan dikirim lewat --sudut, sehingga
   susunannya tetap seimbang berapa pun jumlah bidang yang terbuka bagi
   penggunanya — mahasiswa melihat lebih sedikit daripada pejabat. */
.pusat-layanan{position:relative;width:100%;max-width:540px;margin:.5rem auto 0;
  aspect-ratio:1;--jari:36%}
.pusat-layanan .inti{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:31%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;gap:.2rem;
  background:radial-gradient(circle at 50% 35%,#fff,var(--aksen-lembut));
  border:2px solid var(--aksen);box-shadow:0 0 0 10px rgba(11,143,118,.08),var(--bayang);
  text-align:center}
.pusat-layanan .inti img{width:54%;max-width:74px;margin:0 auto;display:block}
.pusat-layanan .inti span{font-weight:800;color:var(--biru);font-size:.82rem;letter-spacing:.02em}

.gelembung{position:absolute;top:50%;left:50%;width:30%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--garis);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  box-shadow:var(--bayang-kecil);cursor:pointer;font:inherit;padding:.4rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  transform:translate(-50%,-50%) rotate(var(--sudut)) translate(0,calc(-1 * var(--jari) * 3.1))
    rotate(calc(-1 * var(--sudut)));
  transition:border-color var(--gerak),box-shadow var(--gerak),background var(--gerak)}
.gelembung:hover,.gelembung:focus-visible{border-color:var(--aksen);background:#fff;
  box-shadow:0 0 0 6px rgba(11,143,118,.1),var(--bayang);outline:none}
.gelembung .ubin{width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.gelembung .ubin svg{width:19px;height:19px}
.gelembung .nama{font-size:.76rem;font-weight:700;line-height:1.2;text-align:center;
  color:var(--biru);max-width:92%}
.gelembung .cacah{font-size:.68rem;font-weight:700;color:var(--aksen);
  background:var(--aksen-lembut);border-radius:999px;padding:.02rem .42rem}

/* Lingkaran hanya masuk akal bila ada ruang mendatar. Di layar sempit bidangnya
   ditumpuk sebagai kisi biasa — tetap terpisah, tetap besar, tanpa berdesakan. */
@media(max-width:700px){
  .pusat-layanan{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;
    max-width:none}
  .pusat-layanan .inti{position:static;transform:none;grid-column:1 / -1;width:auto;
    aspect-ratio:auto;border-radius:var(--radius);padding:.9rem;display:flex;
    align-items:center;justify-content:center;gap:.6rem}
  /* Dalam bentuk memanjang lambangnya tidak lagi perlu dipusatkan sendiri —
     `margin:auto` justru mendorong tulisannya ke tepi. */
  .pusat-layanan .inti img{width:34px;margin:0}
  .gelembung{position:static;transform:none;width:auto;aspect-ratio:auto;
    border-radius:var(--radius);padding:1rem .6rem;flex-direction:column}
}

.kepala-bidang{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.kepala-bidang .ubin{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none}
.kepala-bidang h2{margin:0}
.kepala-bidang p{margin:.1rem 0 0}

/* Kelompok layanan per bidang di beranda. Bidang berjajar mendatar, bukan
   bertumpuk: tiap bidang hanya berisi satu sampai tiga layanan, sehingga satu
   kisi selebar kartu akan menyisakan ruang kosong di kanannya. */
/* Kartu nomor surat. Untuk layanan penomoran, nomor inilah hasil akhirnya —
   bukan lembar surat — jadi dicetak besar dengan angka bercelah agar mudah
   dibaca dan disalin ulang tanpa salah. */
.kartu-nomor{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);
  box-shadow:var(--bayang);padding:1.1rem 1.2rem;margin-bottom:1rem;position:relative;overflow:hidden}
.kartu-nomor::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--kuning)}
.kartu-nomor.sah::before{background:var(--aksen)}
.kartu-nomor .kepala{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.kartu-nomor .kepala .ket{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--redup);font-weight:700}
.kartu-nomor .nomor{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(1.15rem,3.4vw,1.9rem);font-weight:700;color:var(--biru);letter-spacing:.01em;
  line-height:1.35;word-break:break-word;margin:.1rem 0 .8rem;user-select:all}
.kartu-nomor .nomor i{color:var(--redup);font-style:normal;padding:0 .12em;font-weight:400}
.kartu-nomor .rinci{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:.6rem;padding:.7rem 0;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.kartu-nomor .rinci .ket{display:block;font-size:.72rem;color:var(--redup);margin-bottom:.1rem}
.kartu-nomor .rinci strong{font-size:.92rem}
.kartu-nomor .alat-nomor{display:flex;flex-wrap:wrap;gap:.45rem;margin:.8rem 0 .5rem}
@media print{.kartu-nomor .alat-nomor{display:none}}

/* Jejak tahapan: satu baris mendatar yang menjelaskan perjalanan permohonan.
   Menjadi bertumpuk pada layar sempit agar keterangannya tetap terbaca. */
.jejak-alur{list-style:none;margin:0 0 .7rem;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.9rem}
.jejak-alur li{position:relative;display:flex;flex-direction:column;gap:.18rem;padding-top:.2rem}
.jejak-alur li::after{content:"";position:absolute;top:16px;left:calc(50% + 22px);right:calc(-50% + 22px);
  height:2px;background:var(--garis)}
.jejak-alur li:last-child::after{display:none}
.jejak-alur .bulat{position:relative;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--aksen-lembut);color:var(--aksen);margin-bottom:.3rem}
.jejak-alur .bulat b{position:absolute;top:-3px;right:-4px;width:16px;height:16px;border-radius:50%;
  background:var(--biru);color:#fff;font-size:.62rem;display:grid;place-items:center;font-weight:700}
.jejak-alur strong{font-size:.85rem}
@media(max-width:520px){.jejak-alur li::after{display:none}}

.kelompok-kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1rem 1.4rem;align-items:start}
.kelompok-layanan .kisi-layanan{grid-template-columns:repeat(3,1fr)}
.kelompok-layanan h3{margin:0 0 .5rem;padding-bottom:.4rem;border-bottom:1px solid var(--garis);
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--redup);font-weight:700;display:flex;align-items:center;gap:.4rem}
.kelompok-layanan h3 .mini{background:var(--aksen-lembut);color:var(--aksen);border-radius:999px;
  padding:.05rem .42rem;font-weight:700;letter-spacing:0}
@media(min-width:640px){.kisi-layanan{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1100px){.kisi-layanan{grid-template-columns:repeat(8,1fr)}}

.petak-layanan{background:none;border:none;cursor:pointer;font:inherit;padding:.7rem .25rem .6rem;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;border-radius:14px;
  color:var(--teks);transition:background var(--gerak),transform .16s ease}
.petak-layanan:hover{background:#f2f6fa}
.petak-layanan:active{transform:scale(.93)}
.petak-layanan .ubin{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  flex:none;transition:transform .3s var(--gerak-lembut),box-shadow var(--gerak)}
.petak-layanan .ubin svg{width:25px;height:25px}
.petak-layanan:hover .ubin{transform:translateY(-3px);box-shadow:0 8px 18px rgba(16,32,48,.14)}
.petak-layanan .nama{font-size:.7rem;line-height:1.25;text-align:center;color:var(--redup);
  font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:1.75rem}
.petak-layanan:hover .nama{color:var(--teks)}
.k-lainnya{background:#eef2f6;color:var(--redup)}

/* Muncul berurutan agar kisinya terasa hidup saat halaman terbuka. */
.kisi-layanan .petak-layanan{animation:naik .4s var(--gerak-lembut) backwards}
.kisi-layanan .petak-layanan:nth-child(-n+4){animation-delay:.04s}
.kisi-layanan .petak-layanan:nth-child(n+5){animation-delay:.1s}
.kisi-layanan .petak-layanan:nth-child(n+9){animation-delay:.16s}
.kisi-layanan .petak-layanan:nth-child(n+13){animation-delay:.2s}

@media(max-width:400px){
  .kisi-layanan{gap:.2rem 0}
  .petak-layanan{padding:.6rem .1rem .5rem}
  .petak-layanan .ubin{width:46px;height:46px;border-radius:14px}
  .petak-layanan .ubin svg{width:22px;height:22px}
  .petak-layanan .nama{font-size:.66rem}
}

/* Nilai berupa teks (tanggal, rupiah) butuh barisnya sendiri di layar sempit —
   berdampingan dengan labelnya membuat keduanya terpotong. */
@media(max-width:560px){
  .deret-statistik.lepas .petak-warna{flex-direction:column;align-items:flex-start;gap:.35rem}
  .deret-statistik.lepas .petak-warna .angka.teks{white-space:normal;font-size:1.05rem}
  .deret-statistik.lepas .petak-warna .angka{font-size:1.7rem}
  .deret-statistik.lepas .petak-warna .isi strong{font-size:.85rem;line-height:1.3}
  .deret-statistik.lepas .petak-warna .isi span{font-size:.72rem;line-height:1.35}
}

/* ---------- Daftar dokumen kepegawaian ---------- */
.daftar-dokumen{display:flex;flex-direction:column;gap:.1rem}
.baris-dokumen{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem .2rem;
  border-bottom:1px solid var(--garis-halus,#eef2f6)}
.baris-dokumen:last-child{border-bottom:none}
.baris-dokumen .ubin{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none}
.baris-dokumen .ubin svg{width:21px;height:21px}
.baris-dokumen .isi{flex:1;min-width:0}
.baris-dokumen .judul{font-weight:600;font-size:.92rem;line-height:1.3;overflow-wrap:anywhere}
.baris-dokumen .rinci{font-size:.8rem;color:var(--redup);margin-top:.15rem;line-height:1.45;
  overflow-wrap:anywhere}
.baris-dokumen .rinci a{color:var(--biru-muda)}
.baris-dokumen .alat{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex:none;
  max-width:38%;text-align:right}
.lencana-tte{background:var(--hijau-lembut);color:var(--hijau);border-radius:6px;padding:.1rem .4rem;
  font-size:.68rem;font-weight:700;white-space:nowrap}

/* ---------- Pemilih jenis dokumen (kisi ikon) ---------- */
.kisi-dokumen{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
@media(min-width:520px){.kisi-dokumen{grid-template-columns:repeat(4,1fr)}}

/* Avatar kecil di daftar arsip memakai bingkai yang sama dengan ikon dokumen. */
.baris-dokumen .ubin.berfoto{padding:0;overflow:hidden;background:#e3ebf3}
.baris-dokumen .ubin img{width:100%;height:100%;object-fit:cover}
/* Hanya ubin tanpa warna kategori yang dipakai sebagai avatar berinisial;
   yang berkategori mempertahankan warnanya sendiri. */
.baris-dokumen .ubin:not([class*="k-"]){background:linear-gradient(140deg,var(--biru),var(--aksen));
  color:#fff;font-weight:700;font-size:.85rem}
.baris-dokumen .judul a{color:var(--teks);text-decoration:none}
.baris-dokumen .judul a:hover{color:var(--biru-muda);text-decoration:underline}