/* =====================================================================
   SIPER — Aplikasi pegawai (mobile-first)
   ---------------------------------------------------------------------
   Lebar konten dikunci 520px dan ditengahkan, sehingga di layar lebar
   tetap terbaca sebagai "kartu ponsel", tidak melar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. KERANGKA
   --------------------------------------------------------------------- */
.app{
  max-width:var(--lebar-konten-maks);
  margin-inline:auto;
  padding:0 var(--s4);
  padding-bottom:calc(var(--tinggi-bottomnav) + var(--aman-bawah) + var(--s6));
  min-height:100dvh;
}
.app--tanpa-nav{padding-bottom:calc(var(--aman-bawah) + var(--s6))}

/* Header bersapaan (PG-03) */
.app__header{padding:var(--s5) var(--s1) var(--s4)}
.app__header-baris{display:flex;align-items:center;gap:var(--s3)}
.app__sapaan{font-size:var(--t-xs);color:var(--teks-samar);line-height:1.3}
.app__nama{font-size:var(--t-lg);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.app__jabatan{font-size:var(--t-xs);color:var(--teks-samar);line-height:1.3}
.app__aksi-header{margin-left:auto;display:flex;gap:var(--s2)}

/* Bilah atas halaman dalam */
.bilah-atas{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s4) 0 var(--s3);
}
.bilah-atas__judul{font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em}

.app__isi{padding-bottom:var(--s4)}

/* ---------------------------------------------------------------------
   2. AVATAR
   --------------------------------------------------------------------- */
.avatar{
  width:44px;height:44px;border-radius:15px;
  background:var(--hijau-600);color:var(--kuning-500);
  display:grid;place-items:center;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.02em;
  flex-shrink:0;
}
.avatar--sm{width:34px;height:34px;border-radius:12px;font-size:var(--t-xs)}
.avatar--lg{width:72px;height:72px;border-radius:24px;font-size:var(--t-xl)}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ---------------------------------------------------------------------
   3. KARTU
   --------------------------------------------------------------------- */
.kartu{
  background:var(--bg-kartu);
  border-radius:var(--r-xl);
  padding:var(--s5);
  display:block;
}
.kartu--rapat{padding:var(--s4);border-radius:var(--r-lg)}
.kartu--sorot{background:var(--hijau-600);color:var(--putih)}
.kartu--gelap{background:var(--tinta-900);color:var(--putih)}
.kartu__judul{font-size:var(--t-md);font-weight:600;margin-bottom:var(--s2)}
.kartu__samar{font-size:var(--t-xs);color:var(--teks-samar)}
.kartu--sorot .kartu__samar,
.kartu--gelap .kartu__samar{color:var(--hijau-200)}
.kartu__baris{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0}
.kartu__baris + .kartu__baris{border-top:1px solid var(--garis)}

a.kartu{transition:transform var(--transisi)}
a.kartu:active{transform:scale(.985)}

/* ---------------------------------------------------------------------
   4. KARTU JAM (jantung beranda)
   --------------------------------------------------------------------- */
.jam-kartu{
  background:var(--hijau-600);
  border-radius:var(--r-2xl);
  padding:var(--s5) var(--s5) var(--s6);
  color:var(--putih);
  box-shadow:var(--bayang-hijau);
}
.jam-kartu__lokasi{
  display:flex;align-items:center;gap:var(--s1);
  font-size:var(--t-xs);color:var(--hijau-200);margin-bottom:var(--s1);
}
.jam-kartu__lokasi .ikon{width:15px;height:15px}
.jam-kartu__lokasi--jauh{color:var(--kuning-100)}
.jam-kartu__jam{
  font-size:var(--t-jam);font-weight:600;line-height:1;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.jam-kartu__tanggal{font-size:var(--t-xs);color:var(--hijau-200);margin-top:var(--s1)}
.jam-kartu__status{
  display:inline-flex;align-items:center;gap:var(--s1);
  margin-top:var(--s4);padding:6px var(--s3);
  border-radius:var(--r-pil);background:rgba(255,255,255,.16);
  font-size:var(--t-xs);font-weight:500;
}

/* ---------------------------------------------------------------------
   5. TOMBOL
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--sentuh-min);padding:0 var(--s5);
  border-radius:var(--r-lg);
  font-size:var(--t-md);font-weight:600;
  transition:transform var(--transisi),background var(--transisi);
  cursor:pointer;text-align:center;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn--blok{display:flex;width:100%}
.btn--besar{min-height:58px;font-size:var(--t-lg);border-radius:var(--r-xl)}

/* Aksi utama memakai KUNING logo dengan tinta gelap — kontras 9.7:1. */
.btn--primer{background:var(--kuning-500);color:var(--kuning-tinta);box-shadow:var(--bayang-kuning)}
.btn--primer:hover{background:var(--kuning-400)}

.btn--hijau{background:var(--hijau-600);color:var(--putih)}
.btn--hijau:hover{background:var(--hijau-700)}

.btn--sekunder{background:var(--putih);color:var(--teks-utama);border:1.5px solid var(--garis)}
.btn--sekunder:hover{background:var(--tinta-100)}

.btn--bahaya{background:var(--merah-500);color:var(--putih)}
.btn--bahaya:hover{background:var(--merah-600)}

.btn--hantu{background:transparent;color:var(--hijau-700);padding:0 var(--s3)}
.btn--hantu:hover{background:var(--hijau-50)}

.btn-ikon{
  width:var(--sentuh-min);height:var(--sentuh-min);
  display:grid;place-items:center;border-radius:14px;
  background:var(--putih);color:var(--teks-utama);
  transition:background var(--transisi);
}
.btn-ikon:hover{background:var(--tinta-100)}

/* ---------------------------------------------------------------------
   6. KISI BENTO (statistik beranda)
   --------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.bento__sel{
  background:var(--bg-kartu);border-radius:var(--r-lg);
  padding:var(--s4);min-height:84px;
}
.bento__sel--gelap{background:var(--tinta-900);color:var(--putih)}
.bento__angka{
  font-size:var(--t-2xl);font-weight:600;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.bento__label{font-size:var(--t-xs);color:var(--teks-samar);margin-top:var(--s1)}
.bento__sel--gelap .bento__label{color:var(--tinta-400)}
.bento__angka--terlambat{color:#B8860B}
.bento__angka--dl{color:#1D6FB8}
.bento__angka--alfa{color:var(--merah-600)}

/* ---------------------------------------------------------------------
   7. LENCANA STATUS
      Kode huruf SELALU ikut tampil supaya tetap terbaca tanpa warna.
   --------------------------------------------------------------------- */
.lencana{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px var(--s3);border-radius:var(--r-pil);
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;
}
.lencana__kode{
  display:inline-grid;place-items:center;
  min-width:18px;height:18px;padding:0 4px;border-radius:6px;
  background:rgba(0,0,0,.10);font-size:10px;font-weight:700;
}
.lencana--hadir       {background:var(--st-hadir-bg);     color:var(--st-hadir-tx)}
.lencana--terlambat   {background:var(--st-terlambat-bg); color:var(--st-terlambat-tx)}
.lencana--dl          {background:var(--st-dl-bg);        color:var(--st-dl-tx)}
.lencana--izin        {background:var(--st-izin-bg);      color:var(--st-izin-tx)}
.lencana--sakit       {background:var(--st-sakit-bg);     color:var(--st-sakit-tx)}
.lencana--cuti        {background:var(--st-cuti-bg);      color:var(--st-cuti-tx)}
.lencana--alfa        {background:var(--st-alfa-bg);      color:var(--st-alfa-tx)}
.lencana--libur       {background:var(--st-libur-bg);     color:var(--st-libur-tx)}
.lencana--belum-pulang{background:var(--st-dl-bg);        color:var(--st-dl-tx)}
.lencana--netral      {background:var(--tinta-100);       color:var(--tinta-700)}

/* ---------------------------------------------------------------------
   8. MEDAN ISIAN
   --------------------------------------------------------------------- */
.kolom-input{margin-bottom:var(--s4);position:relative}
.kolom-input__label{
  display:block;font-size:var(--t-sm);font-weight:600;
  margin-bottom:6px;color:var(--tinta-700);
}
.kolom-input__bantuan{font-size:var(--t-xs);color:var(--teks-samar);margin-top:6px}
.kolom-input__galat{font-size:var(--t-xs);color:var(--merah-600);margin-top:6px;font-weight:500}

.kolom-input input[type=text],
.kolom-input input[type=password],
.kolom-input input[type=number],
.kolom-input input[type=date],
.kolom-input input[type=time],
.kolom-input input[type=email],
.kolom-input input[type=tel],
.kolom-input input[type=search],
.kolom-input select,
.kolom-input textarea{
  width:100%;min-height:52px;padding:var(--s3) var(--s4);
  background:var(--putih);
  border:1.5px solid var(--garis);border-radius:var(--r-md);
  font-size:var(--t-md);
  transition:border-color var(--transisi),box-shadow var(--transisi);
}
.kolom-input textarea{min-height:110px;padding-top:var(--s3);resize:vertical}
.kolom-input select{appearance:none;padding-right:var(--s8)}

.kolom-input input:focus,
.kolom-input select:focus,
.kolom-input textarea:focus{
  outline:none;border-color:var(--hijau-500);
  box-shadow:0 0 0 4px var(--hijau-50);
}
.kolom-input input::placeholder,
.kolom-input textarea::placeholder{color:var(--tinta-400)}

.kolom-input--salah input,
.kolom-input--salah select,
.kolom-input--salah textarea{border-color:var(--merah-500)}

/* Kata sandi + tombol mata */
.kolom-sandi{position:relative}
.kolom-sandi input{padding-right:56px}
.kolom-sandi__mata{
  position:absolute;right:6px;bottom:4px;
  width:var(--sentuh-min);height:var(--sentuh-min);
  display:grid;place-items:center;border-radius:12px;color:var(--tinta-500);
}
.kolom-sandi__mata:hover{background:var(--tinta-100);color:var(--teks-utama)}

/* Kotak centang */
.kotak-centang{
  display:flex;align-items:center;gap:var(--s3);
  min-height:var(--sentuh-min);cursor:pointer;
  font-size:var(--t-sm);margin-bottom:var(--s4);
}
.kotak-centang input{width:22px;height:22px;accent-color:var(--hijau-600);flex-shrink:0}

/* ---------------------------------------------------------------------
   9. PEMBERITAHUAN
   --------------------------------------------------------------------- */
.notice{
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  font-size:var(--t-sm);margin-bottom:var(--s4);
  border-left:4px solid transparent;
}
.notice--sukses    {background:var(--st-hadir-bg); color:var(--st-hadir-tx); border-left-color:var(--hijau-600)}
.notice--gagal     {background:var(--merah-50);    color:var(--merah-700);   border-left-color:var(--merah-500)}
.notice--info      {background:var(--st-dl-bg);    color:var(--st-dl-tx);    border-left-color:#1D6FB8}
.notice--peringatan{background:var(--kuning-50);   color:var(--kuning-tinta);border-left-color:#C4B200}

.toast-wadah{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tinggi-bottomnav) + var(--aman-bawah) + var(--s3));
  z-index:120;display:flex;flex-direction:column;gap:var(--s2);
  width:min(440px,calc(100vw - var(--s8)));pointer-events:none;
}
.toast{
  background:var(--tinta-900);color:var(--putih);
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  font-size:var(--t-sm);box-shadow:var(--bayang-3);
  animation:toast-naik 220ms cubic-bezier(.2,.8,.2,1);
}
.toast--sukses{background:var(--hijau-700)}
.toast--gagal {background:var(--merah-600)}
@keyframes toast-naik{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------
   10. TIMELINE HARIAN
   --------------------------------------------------------------------- */
.timeline{display:flex;gap:var(--s4)}
.timeline__rel{display:flex;flex-direction:column;align-items:center;padding-top:5px}
.timeline__titik{
  width:11px;height:11px;border-radius:50%;
  background:var(--hijau-600);flex-shrink:0;
}
.timeline__titik--dl{background:#1D6FB8}
.timeline__titik--pulang{background:var(--tinta-400)}
.timeline__garis{width:2px;flex:1;min-height:28px;background:var(--garis)}
.timeline__isi{flex:1;display:flex;flex-direction:column;gap:var(--s5)}
.timeline__butir{min-width:0}
.timeline__jam{font-size:var(--t-sm);font-weight:600}
.timeline__ket{font-size:var(--t-xs);color:var(--teks-samar)}

/* ---------------------------------------------------------------------
   11. KALENDER RIWAYAT
   --------------------------------------------------------------------- */
.kalender__kepala{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s4);
}
.kalender__bulan{font-size:var(--t-md);font-weight:600}
.kalender__hari{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  font-size:10px;color:var(--tinta-400);text-align:center;margin-bottom:6px;
}
.kalender__kisi{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kalender__sel{
  aspect-ratio:1;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--tinta-100);color:var(--tinta-400);
  font-size:var(--t-xs);line-height:1.1;
}
.kalender__sel--kosong{background:transparent}
.kalender__tgl{font-weight:600}
.kalender__kode{font-size:9px;font-weight:700;opacity:.85}
.kalender__sel--hadir    {background:var(--st-hadir-bg);     color:var(--st-hadir-tx)}
.kalender__sel--terlambat{background:var(--st-terlambat-bg); color:var(--st-terlambat-tx)}
.kalender__sel--dl       {background:var(--st-dl-bg);        color:var(--st-dl-tx)}
.kalender__sel--izin     {background:var(--st-izin-bg);      color:var(--st-izin-tx)}
.kalender__sel--sakit    {background:var(--st-sakit-bg);     color:var(--st-sakit-tx)}
.kalender__sel--cuti     {background:var(--st-cuti-bg);      color:var(--st-cuti-tx)}
.kalender__sel--alfa     {background:var(--st-alfa-bg);      color:var(--st-alfa-tx)}
.kalender__sel--libur    {background:var(--st-libur-bg);     color:var(--st-libur-tx)}
/* Hari ini ditandai BINGKAI, bukan latar penuh, supaya warna + kode status
   di bawahnya tetap terbaca (warna tidak pernah jadi satu-satunya penanda). */
.kalender__sel--kini{box-shadow:inset 0 0 0 2px var(--hijau-600)}

/* ---------------------------------------------------------------------
   12. PANEL NAIK (bottom sheet)
   --------------------------------------------------------------------- */
.sheet-latar{
  position:fixed;inset:0;background:rgba(15,31,23,.45);z-index:140;
  opacity:0;visibility:hidden;transition:opacity var(--transisi);
}
.sheet-latar.is-buka{opacity:1;visibility:visible}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--putih);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  padding:var(--s3) var(--s5) calc(var(--s6) + var(--aman-bawah));
  max-width:var(--lebar-konten-maks);margin-inline:auto;
  transform:translateY(100%);transition:transform 240ms cubic-bezier(.2,.8,.2,1);
  max-height:86dvh;overflow-y:auto;
}
.sheet.is-buka{transform:none}
.sheet__pegangan{
  width:40px;height:4px;border-radius:var(--r-pil);
  background:var(--tinta-300);margin:0 auto var(--s4);
}
.sheet__judul{font-size:var(--t-lg);font-weight:600;margin-bottom:var(--s4)}
.sheet__aksi{display:flex;flex-direction:column;gap:var(--s2)}

/* ---------------------------------------------------------------------
   13. KEADAAN MEMUAT & KOSONG
   --------------------------------------------------------------------- */
.kerangka{
  background:linear-gradient(90deg,var(--tinta-100) 25%,var(--tinta-200) 37%,var(--tinta-100) 63%);
  background-size:400% 100%;border-radius:var(--r-md);
  animation:kerangka-denyut 1.3s ease-in-out infinite;
}
@keyframes kerangka-denyut{0%{background-position:100% 50%}100%{background-position:0 50%}}
.kerangka--baris{height:16px;margin-bottom:var(--s2)}
.kerangka--kartu{height:110px;border-radius:var(--r-xl)}

.kosong{text-align:center;padding:var(--s8) var(--s4)}
.kosong__ikon{
  width:64px;height:64px;margin:0 auto var(--s4);
  border-radius:22px;background:var(--tinta-100);
  display:grid;place-items:center;color:var(--tinta-400);
}
.kosong__judul{font-size:var(--t-md);font-weight:600;margin-bottom:var(--s1)}
.kosong__teks{font-size:var(--t-sm);color:var(--teks-samar)}

/* ---------------------------------------------------------------------
   14. BOTTOM NAVIGATION — pil mengambang
   --------------------------------------------------------------------- */
.bottomnav{
  position:fixed;z-index:100;
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--s3) + var(--aman-bawah));
  width:min(calc(var(--lebar-konten-maks) - var(--s4)),calc(100vw - var(--s6)));
  height:62px;
  background:var(--putih);
  border-radius:22px;
  box-shadow:var(--bayang-3);
  display:flex;align-items:center;justify-content:space-around;
  padding:0 var(--s2);
}
.bottomnav__butir{
  position:relative;
  flex:1;min-width:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--tinta-400);font-size:10px;font-weight:500;
  transition:color var(--transisi);
}
.bottomnav__butir .ikon{width:21px;height:21px}
.bottomnav__butir:hover{color:var(--tinta-600)}
.bottomnav__butir.is-aktif{color:var(--hijau-600)}
.bottomnav__label{line-height:1}

/* Tombol absen: kotak membulat yang naik dari pil. */
.bottomnav__absen{
  flex:0 0 auto;width:56px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  margin-top:-26px;color:var(--hijau-700);font-size:10px;font-weight:600;
}
.bottomnav__lingkaran{
  width:54px;height:54px;border-radius:19px;
  background:var(--hijau-600);color:var(--kuning-500);
  display:grid;place-items:center;
  box-shadow:var(--bayang-hijau);
  transition:transform var(--transisi);
}
.bottomnav__lingkaran .ikon{width:26px;height:26px}
.bottomnav__absen:active .bottomnav__lingkaran{transform:scale(.94)}

.nav-lencana{
  position:absolute;top:6px;right:50%;margin-right:-20px;
  min-width:17px;height:17px;padding:0 5px;
  background:var(--merah-500);color:var(--putih);
  border-radius:var(--r-pil);border:2px solid var(--putih);
  font-size:9px;font-weight:700;display:grid;place-items:center;
}
.nav-titik{
  position:absolute;top:9px;right:50%;margin-right:-14px;
  width:9px;height:9px;border-radius:50%;
  background:var(--merah-500);border:2px solid var(--putih);
}

/* ---------------------------------------------------------------------
   15. HALAMAN MASUK (PG-01)
   --------------------------------------------------------------------- */
/* Latar terang seragam — TANPA blok hijau berlengkung.
   Alasan: lengkungan apa pun akan memotong teks merek di sebagian ukuran
   layar, sehingga teks berdiri di dua warna sekaligus dan kontrasnya jatuh.
   Latar rata membuat halaman ini tidak bisa rusak di ukuran mana pun.

   Logo diletakkan di atas ubin putih agar logo warna apa pun tetap terbaca —
   logo asli yayasan (bunga kuning + lingkaran hijau) akan tenggelam bila
   ditempel langsung di atas hijau. */
.masuk{
  min-height:100dvh;
  background:var(--bg-halaman);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s8) var(--s4) calc(var(--s6) + var(--aman-bawah));
  gap:var(--s5);
}

.masuk__merek{text-align:center}
.masuk__logo{
  width:84px;height:84px;margin:0 auto var(--s4);
  background:var(--putih);border-radius:26px;padding:11px;
  box-shadow:var(--bayang-2);
}
.masuk__judul-merek{
  font-size:var(--t-2xl);font-weight:700;letter-spacing:.1em;
  color:var(--hijau-700);line-height:1.1;
}
.masuk__sub-merek{
  font-size:var(--t-sm);color:var(--teks-samar);margin-top:2px;
}

.masuk__kartu{
  width:100%;max-width:400px;background:var(--putih);
  border-radius:var(--r-2xl);padding:var(--s6) var(--s5);
  box-shadow:var(--bayang-2);
}
.masuk__judul{font-size:var(--t-xl);font-weight:700;letter-spacing:-.015em}
.masuk__sub{font-size:var(--t-sm);color:var(--teks-samar);margin-bottom:var(--s5)}
.masuk__bantuan{font-size:var(--t-xs);color:var(--teks-samar);margin-top:var(--s5);text-align:center}
.masuk__kaki{font-size:11px;color:var(--tinta-400);text-align:center}

/* Layar pendek (HP lama, atau jendela browser kecil di desktop):
   rapatkan agar seluruh formulir tetap terjangkau tanpa menggulir jauh. */
@media (max-height:680px){
  .masuk{padding-top:var(--s5);gap:var(--s4);justify-content:flex-start}
  .masuk__logo{width:60px;height:60px;border-radius:19px;padding:8px;margin-bottom:var(--s2)}
  .masuk__judul-merek{font-size:var(--t-xl)}
  .masuk__kartu{padding:var(--s5) var(--s4)}
}

/* ---------------------------------------------------------------------
   16. UTILITAS
   --------------------------------------------------------------------- */
.tumpuk{display:flex;flex-direction:column;gap:var(--s3)}
.sejajar{display:flex;align-items:center;gap:var(--s3)}
.sejajar--rata{justify-content:space-between}
.rapat{gap:var(--s2)}
.tengah{text-align:center}
.samar{color:var(--teks-samar)}
.kecil{font-size:var(--t-xs)}
.tebal{font-weight:600}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)}
.mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)}
.mb-5{margin-bottom:var(--s5)}

.judul-bagian{
  font-size:var(--t-sm);font-weight:600;color:var(--tinta-600);
  padding:0 var(--s1);margin-bottom:var(--s2);
}