/* =====================================================================
   SEKOLAHKU - Gaya Utama
   Palet: periwinkle -> langit, aksen mint & persik. Lembut, tidak gelap.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --ungu:      #7C8BF5;
  --ungu-muda: #A6B1FA;
  --langit:    #56C6E8;
  --mint:      #5DD6A8;
  --persik:    #FFB088;
  --mawar:     #F79AB4;
  --kuning:    #FFD27A;

  --grad-utama: linear-gradient(135deg, #7C8BF5 0%, #56C6E8 100%);
  --grad-mint:  linear-gradient(135deg, #5DD6A8 0%, #56C6E8 100%);
  --grad-hangat:linear-gradient(135deg, #FFB088 0%, #F79AB4 100%);
  --grad-lembut:linear-gradient(135deg, #EEF1FE 0%, #E8F6FB 100%);

  --tinta:      #2E3555;
  --tinta-2:    #5A628C;
  --redup:      #8A92B4;
  --garis:      #E5E9F8;
  --papan:      #FFFFFF;
  --latar:      #F4F6FD;
  --latar-2:    #FAFBFF;

  --sukses: #2FB37E;
  --waspada:#E3A008;
  --bahaya: #EF6A6A;
  --info:   #4A9FE0;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --bayang-s: 0 2px 8px rgba(46, 53, 85, .06);
  --bayang-m: 0 8px 24px rgba(46, 53, 85, .08);
  --bayang-l: 0 18px 44px rgba(46, 53, 85, .12);
  --sidebar: 252px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--latar);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

h1, h2, h3, h4 { margin: 0 0 .35em; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; }
p  { margin: 0 0 .8em; }
a  { color: var(--ungu); text-decoration: none; }
small, .kecil { font-size: .78rem; }
.redup { color: var(--redup); }
.tebal { font-weight: 700; }
.tengah { text-align: center; }
.kanan  { text-align: right; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #D6DCF3; border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================  HALAMAN MASUK  ============================= */
.masuk-layar {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 22px 18px;
  background:
    radial-gradient(1100px 520px at 8% -10%, #DDE4FF 0%, transparent 60%),
    radial-gradient(900px 500px at 105% 105%, #D5F1FA 0%, transparent 60%),
    var(--latar);
}
.masuk-kartu {
  width: 100%; max-width: 420px;
  background: var(--papan);
  border-radius: 26px;
  box-shadow: var(--bayang-l);
  padding: 30px 26px 26px;
  animation: naik .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes naik { from { opacity: 0; transform: translateY(16px); } }

.merek { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.merek-logo {
  width: 72px; height: 72px; border-radius: 22px;
  background: var(--grad-utama);
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(124, 139, 245, .38);
}
.merek-logo svg { width: 40px; height: 40px; }
.merek h1 { font-size: 1.5rem; margin: 0; }
.merek span { color: var(--redup); font-size: .85rem; }

/* pemilih peran */
.peran-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
.peran-pilih {
  border: 1.6px solid var(--garis); background: var(--latar-2);
  border-radius: var(--r-m); padding: 13px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; transition: .2s; font: inherit; color: var(--tinta-2);
}
.peran-pilih svg { width: 24px; height: 24px; }
.peran-pilih b { font-size: .82rem; font-weight: 700; }
.peran-pilih:hover { border-color: var(--ungu-muda); transform: translateY(-2px); }
.peran-pilih.aktif {
  border-color: transparent; color: #fff;
  background: var(--grad-utama);
  box-shadow: 0 8px 20px rgba(124, 139, 245, .35);
}

/* =====================  FORMULIR  ================================== */
.bidang { margin-bottom: 14px; }
.bidang label { display: block; font-size: .82rem; font-weight: 700; color: var(--tinta-2); margin-bottom: 6px; }

input, select, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--tinta);
  background: var(--latar-2);
  border: 1.6px solid var(--garis);
  border-radius: var(--r-s);
  padding: 11px 13px;
  transition: .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ungu); background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 139, 245, .14);
}
input[readonly] { background: #F0F2FA; color: var(--redup); }
textarea { min-height: 82px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A92B4' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 17px; padding-right: 34px; }
input[type=checkbox], input[type=radio] { width: auto; }

.sandi-bungkus { position: relative; }
.sandi-bungkus input { padding-right: 44px; }
.sandi-lihat {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px; cursor: pointer; color: var(--redup); line-height: 0;
}
.sandi-lihat svg { width: 19px; height: 19px; }

/* =====================  TOMBOL  ==================================== */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-weight: 700; font-size: .9rem;
  border: 0; border-radius: var(--r-s); padding: 11px 17px;
  cursor: pointer; transition: .18s; white-space: nowrap;
}
.tbl svg { width: 17px; height: 17px; flex: none; }
.tbl:active { transform: scale(.97); }
.tbl:disabled { opacity: .55; cursor: not-allowed; }

.tbl-utama  { background: var(--grad-utama); color: #fff; box-shadow: 0 6px 18px rgba(124,139,245,.32); }
.tbl-utama:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(124,139,245,.42); }
.tbl-mint    { background: var(--grad-mint); color: #fff; box-shadow: 0 6px 18px rgba(93,214,168,.3); }
.tbl-hangat  { background: var(--grad-hangat); color: #fff; box-shadow: 0 6px 18px rgba(255,176,136,.32); }
.tbl-halus   { background: #EEF1FE; color: var(--ungu); }
.tbl-halus:hover { background: #E3E8FD; }
.tbl-garis   { background: #fff; border: 1.6px solid var(--garis); color: var(--tinta-2); }
.tbl-garis:hover { border-color: var(--ungu-muda); color: var(--ungu); }
.tbl-bahaya  { background: #FDEDED; color: var(--bahaya); }
.tbl-bahaya:hover { background: #FBDCDC; }
.tbl-penuh   { width: 100%; }
.tbl-besar   { padding: 14px 20px; font-size: 1rem; border-radius: var(--r-m); }
.tbl-mini    { padding: 7px 11px; font-size: .78rem; border-radius: 9px; }
.tbl-ikon    { padding: 8px; border-radius: 9px; }

/* =====================  KERANGKA APLIKASI  ========================= */
.app { min-height: 100vh; min-height: 100dvh; }

.sisi {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 60;
  background: var(--papan); border-right: 1px solid var(--garis);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.sisi.buka { transform: none; }
.sisi-kepala { padding: 18px 18px 14px; display: flex; align-items: center; gap: 11px; }
.sisi-kepala .merek-logo { width: 42px; height: 42px; border-radius: 13px; }
.sisi-kepala .merek-logo svg { width: 24px; height: 24px; }
.sisi-kepala b { font-size: 1.02rem; font-weight: 800; display: block; line-height: 1.2; }
.sisi-kepala span { font-size: .72rem; color: var(--redup); }

.sisi-menu { flex: 1; overflow-y: auto; padding: 6px 12px 18px; }
.menu-judul { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #B0B7D4; padding: 14px 10px 6px; }
.menu-tautan {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 2px;
  color: var(--tinta-2); font-weight: 600; font-size: .88rem;
  cursor: pointer; transition: .16s; border: 0; background: none; width: 100%; text-align: left; font-family: inherit;
}
.menu-tautan svg { width: 19px; height: 19px; flex: none; color: var(--redup); }
.menu-tautan:hover { background: var(--latar); color: var(--tinta); }
.menu-tautan.aktif { background: var(--grad-utama); color: #fff; box-shadow: 0 6px 16px rgba(124,139,245,.3); }
.menu-tautan.aktif svg { color: #fff; }
.menu-lencana { margin-left: auto; background: var(--bahaya); color: #fff; font-size: .68rem; font-weight: 800; padding: 1px 7px; border-radius: 20px; }
.menu-tautan.aktif .menu-lencana { background: rgba(255,255,255,.28); }

.sisi-kaki { padding: 12px; border-top: 1px solid var(--garis); }

.tirai { position: fixed; inset: 0; background: rgba(46,53,85,.42); backdrop-filter: blur(2px); z-index: 55; opacity: 0; pointer-events: none; transition: .25s; }
.tirai.tampil { opacity: 1; pointer-events: auto; }

/* konten */
.utama { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.bar-atas {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--garis);
  padding: 11px 15px; display: flex; align-items: center; gap: 11px;
}
.bar-atas h2 { margin: 0; font-size: 1.02rem; }
.bar-atas .redup { font-size: .74rem; }
.menu-tombol { background: var(--latar); border: 0; border-radius: 11px; padding: 9px; cursor: pointer; color: var(--tinta-2); line-height: 0; }
.menu-tombol svg { width: 20px; height: 20px; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--grad-utama); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  border: 2px solid #fff; box-shadow: var(--bayang-s);
}
.avatar-l { width: 74px; height: 74px; font-size: 1.5rem; }
.avatar-s { width: 32px; height: 32px; font-size: .72rem; }

.isi { flex: 1; padding: 16px 15px 96px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* =====================  KARTU & KISI  ============================== */
.kartu { background: var(--papan); border-radius: var(--r-m); box-shadow: var(--bayang-s); padding: 16px; margin-bottom: 14px; }
.kartu-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.kartu-kepala h3 { margin: 0; }
.kartu-kepala .dorong { margin-left: auto; }

.kisi { display: grid; gap: 12px; }
.kisi-2 { grid-template-columns: repeat(2, 1fr); }
.kisi-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kisi-4 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.baris { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.baris-rapat { display: flex; gap: 6px; align-items: center; }

/* kartu statistik */
.stat { background: var(--papan); border-radius: var(--r-m); padding: 15px; box-shadow: var(--bayang-s); position: relative; overflow: hidden; }
.stat::after { content: ''; position: absolute; right: -26px; top: -26px; width: 86px; height: 86px; border-radius: 50%; background: var(--grad-lembut); opacity: .85; }
.stat-ikon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 9px; position: relative; z-index: 1; }
.stat-ikon svg { width: 20px; height: 20px; color: #fff; }
.stat b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; position: relative; z-index: 1; }
.stat span { font-size: .78rem; color: var(--redup); font-weight: 600; position: relative; z-index: 1; }
.bg-ungu { background: var(--grad-utama); } .bg-mint { background: var(--grad-mint); }
.bg-hangat { background: var(--grad-hangat); } .bg-langit { background: linear-gradient(135deg,#56C6E8,#7C8BF5); }
.bg-kuning { background: linear-gradient(135deg,#FFD27A,#FFB088); } .bg-mawar { background: linear-gradient(135deg,#F79AB4,#C58BF5); }

/* sorotan gradasi */
.sorot { background: var(--grad-utama); color: #fff; border-radius: var(--r-l); padding: 18px; box-shadow: 0 14px 32px rgba(124,139,245,.3); position: relative; overflow: hidden; margin-bottom: 14px; }
.sorot::before { content: ''; position: absolute; right: -40px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.13); }
.sorot h2, .sorot h3 { color: #fff; }
.sorot .tipis { opacity: .9; font-size: .84rem; }

/* =====================  TABEL  ===================================== */
.tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 520px; }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--redup); font-weight: 800; padding: 9px 11px; border-bottom: 1.6px solid var(--garis); white-space: nowrap; }
td { padding: 11px; border-bottom: 1px solid #F0F2FA; vertical-align: middle; }
tbody tr:hover { background: var(--latar-2); }
tbody tr:last-child td { border-bottom: 0; }
.td-aksi { white-space: nowrap; text-align: right; }

/* =====================  LENCANA  =================================== */
.lencana { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.l-sukses { background: #E4F7EE; color: #1E8A5F; }
.l-waspada{ background: #FDF3DC; color: #A9750A; }
.l-bahaya { background: #FDECEC; color: #C74848; }
.l-info   { background: #E6F2FC; color: #2C7BB8; }
.l-ungu   { background: #EEF1FE; color: #5A6BE0; }
.l-abu    { background: #F1F3FA; color: var(--redup); }

/* =====================  DAFTAR ITEM  =============================== */
.item { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: var(--r-s); transition: .16s; }
.item:hover { background: var(--latar-2); }
.item + .item { border-top: 1px solid #F0F2FA; }
.item-isi { flex: 1; min-width: 0; }
.item-isi b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-isi span { font-size: .78rem; color: var(--redup); }

/* jadwal */
.jadwal-baris { display: flex; gap: 12px; padding: 12px; border-radius: var(--r-s); background: var(--latar-2); margin-bottom: 8px; border-left: 3.5px solid var(--ungu); }
.jadwal-jam { font-weight: 800; font-size: .82rem; color: var(--ungu); min-width: 52px; }
.jadwal-baris.sedang { background: #EEFBF5; border-left-color: var(--mint); }

/* =====================  MODAL  ===================================== */
.modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-end; justify-content: center; padding: 0; }
.modal.tampil { display: flex; }
.modal-tirai { position: absolute; inset: 0; background: rgba(46,53,85,.5); backdrop-filter: blur(3px); animation: pudar .2s; }
@keyframes pudar { from { opacity: 0; } }
.modal-kotak {
  position: relative; background: var(--papan);
  border-radius: 24px 24px 0 0; width: 100%; max-width: 560px;
  max-height: 92dvh; display: flex; flex-direction: column;
  box-shadow: var(--bayang-l); animation: geser-atas .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes geser-atas { from { transform: translateY(100%); } }
.modal-kepala { padding: 16px 18px 12px; border-bottom: 1px solid var(--garis); display: flex; align-items: center; gap: 10px; }
.modal-kepala h3 { margin: 0; flex: 1; }
.modal-isi { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-kaki { padding: 13px 18px; border-top: 1px solid var(--garis); display: flex; gap: 9px; }
.modal-kaki .tbl { flex: 1; }
.tutup { background: var(--latar); border: 0; border-radius: 10px; padding: 8px; cursor: pointer; color: var(--tinta-2); line-height: 0; }
.tutup svg { width: 18px; height: 18px; }
.modal-lebar .modal-kotak { max-width: 820px; }

/* =====================  ROTI (toast)  ============================== */
.roti-wadah { position: fixed; left: 50%; transform: translateX(-50%); top: 14px; z-index: 200; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 28px); max-width: 420px; pointer-events: none; }
.roti {
  background: #fff; border-radius: var(--r-s); box-shadow: var(--bayang-l);
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
  font-size: .88rem; font-weight: 600; border-left: 4px solid var(--ungu);
  animation: roti-masuk .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes roti-masuk { from { opacity: 0; transform: translateY(-14px); } }
.roti svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.roti.sukses { border-left-color: var(--sukses); } .roti.sukses svg { color: var(--sukses); }
.roti.galat  { border-left-color: var(--bahaya); } .roti.galat svg { color: var(--bahaya); }
.roti.info   { border-left-color: var(--info); }   .roti.info svg { color: var(--info); }

/* =====================  KAMERA / WAJAH  ============================ */
.kamera-bingkai {
  position: relative; width: 100%; aspect-ratio: 3/4; max-height: 62dvh;
  background: #10142B; border-radius: var(--r-m); overflow: hidden;
  display: grid; place-items: center;
}
.kamera-bingkai video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.kamera-bingkai canvas.tumpuk { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); }
.kamera-pemandu {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 62%; aspect-ratio: 3/3.7;
  border: 3px dashed rgba(255,255,255,.55); border-radius: 46% 46% 42% 42%;
  transition: .25s; pointer-events: none;
}
.kamera-pemandu.oke { border-color: var(--mint); border-style: solid; box-shadow: 0 0 0 9999px rgba(93,214,168,.09); }
.kamera-pemandu.salah { border-color: var(--persik); }
.kamera-status {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  background: rgba(16,20,43,.78); color: #fff; backdrop-filter: blur(8px);
  border-radius: 12px; padding: 9px 13px; font-size: .8rem; font-weight: 600; text-align: center;
}
.kamera-mati { color: #C9D0F0; text-align: center; padding: 26px 20px; }
.kamera-mati svg { width: 44px; height: 44px; opacity: .55; margin-bottom: 10px; }
.sampel-baris { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.sampel-kotak { width: 52px; height: 52px; border-radius: 10px; background: var(--latar); border: 1.6px dashed var(--garis); display: grid; place-items: center; overflow: hidden; font-size: .7rem; color: var(--redup); font-weight: 700; }
.sampel-kotak img { width: 100%; height: 100%; object-fit: cover; }
.sampel-kotak.terisi { border-style: solid; border-color: var(--mint); }

.kenal-hasil { display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: var(--r-m); background: #EEFBF5; margin-top: 12px; animation: naik .3s; }
.kenal-hasil.gagal { background: #FDF3DC; }

/* =====================  ABSENSI CENTANG  =========================== */
.absen-baris { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #F0F2FA; }
.absen-pilih { display: flex; gap: 5px; }
.pilih-status {
  width: 34px; height: 34px; border-radius: 10px; border: 1.6px solid var(--garis);
  background: #fff; cursor: pointer; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: var(--redup); transition: .16s; padding: 0;
}
.pilih-status svg { width: 16px; height: 16px; }
.pilih-status:hover { border-color: var(--ungu-muda); }
.pilih-status.pilih-hadir.aktif { background: var(--info); border-color: var(--info); color: #fff; }
.pilih-status.pilih-absen.aktif { background: var(--bahaya); border-color: var(--bahaya); color: #fff; }
.pilih-status.pilih-izin.aktif  { background: var(--waspada); border-color: var(--waspada); color: #fff; }
.pilih-status.pilih-sakit.aktif { background: var(--mawar); border-color: var(--mawar); color: #fff; }

/* =====================  TAB  ======================================= */
.tab-baris { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; margin-bottom: 13px; }
.tab { border: 0; background: #fff; color: var(--tinta-2); font: inherit; font-weight: 700; font-size: .83rem; padding: 8px 15px; border-radius: 20px; cursor: pointer; white-space: nowrap; box-shadow: var(--bayang-s); }
.tab.aktif { background: var(--grad-utama); color: #fff; }

/* =====================  LAIN-LAIN  ================================= */
.kosong { text-align: center; padding: 34px 18px; color: var(--redup); }
.kosong svg { width: 46px; height: 46px; opacity: .4; margin-bottom: 10px; }
.kosong b { display: block; color: var(--tinta-2); margin-bottom: 3px; }

.muat { display: grid; place-items: center; padding: 34px; }
.putar { width: 30px; height: 30px; border: 3px solid #E5E9F8; border-top-color: var(--ungu); border-radius: 50%; animation: putar .7s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
.kerangka { background: linear-gradient(90deg,#EDF0FA 25%,#F6F8FE 50%,#EDF0FA 75%); background-size: 200% 100%; animation: kilau 1.3s infinite; border-radius: 8px; height: 15px; }
@keyframes kilau { to { background-position: -200% 0; } }

.bilah { height: 7px; border-radius: 7px; background: var(--garis); overflow: hidden; }
.bilah i { display: block; height: 100%; border-radius: 7px; background: var(--grad-utama); transition: width .5s; }

.cari-bungkus { position: relative; }
.cari-bungkus input { padding-left: 38px; }
.cari-bungkus svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--redup); }

.pil-baris { display: flex; gap: 7px; flex-wrap: wrap; }
.pil { border: 1.6px solid var(--garis); background: #fff; border-radius: 20px; padding: 6px 13px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
.pil.aktif { background: var(--grad-utama); border-color: transparent; color: #fff; }

.grafik-batang { display: flex; align-items: flex-end; gap: 8px; height: 128px; padding-top: 8px; }
.grafik-batang > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.grafik-batang i { display: block; width: 100%; max-width: 30px; border-radius: 7px 7px 3px 3px; background: var(--grad-utama); min-height: 3px; transition: height .5s; }
.grafik-batang span { font-size: .68rem; color: var(--redup); font-weight: 700; }

.kotak-info { background: #EEF4FF; border-left: 3.5px solid var(--info); border-radius: var(--r-s); padding: 11px 13px; font-size: .84rem; color: #2C5F8F; margin-bottom: 13px; }
.kotak-ingat { background: #FFF8E8; border-left: 3.5px solid var(--waspada); border-radius: var(--r-s); padding: 11px 13px; font-size: .84rem; color: #8A6100; margin-bottom: 13px; }

/* nav bawah (ponsel) */
.nav-bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(255,255,255,.95); backdrop-filter: blur(14px);
  border-top: 1px solid var(--garis);
  display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav-bawah button {
  flex: 1; border: 0; background: none; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; color: var(--redup); font-size: .66rem; font-weight: 700;
  border-radius: 12px; transition: .16s;
}
.nav-bawah button svg { width: 21px; height: 21px; }
.nav-bawah button.aktif { color: var(--ungu); }
.nav-bawah button.aktif svg { transform: translateY(-1px); }

/* ==========  TITIK PATAH: TABLET & LAPTOP  ========================= */
@media (min-width: 640px) {
  body { font-size: 15.5px; }
  .isi { padding: 20px 22px 90px; }
  .kisi-2 { grid-template-columns: repeat(2, 1fr); }
  .modal { align-items: center; padding: 22px; }
  .modal-kotak { border-radius: 24px; max-height: 88dvh; }
  .modal-kaki .tbl { flex: none; }
  .modal-kaki { justify-content: flex-end; }
  .tabel-gulir { margin: 0; padding: 0; }
}

@media (min-width: 1024px) {
  .sisi { transform: none; }
  .tirai { display: none; }
  .utama { margin-left: var(--sidebar); }
  .menu-tombol { display: none; }
  .nav-bawah { display: none; }
  .isi { padding: 24px 28px 40px; }
  .bar-atas { padding: 13px 26px; }
  .kisi-4 { grid-template-columns: repeat(4, 1fr); }
}

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

/* cetak slip gaji */
@media print {
  .sisi, .bar-atas, .nav-bawah, .tbl, .modal-kaki { display: none !important; }
  .utama { margin: 0; }
  body { background: #fff; }
  .kartu { box-shadow: none; border: 1px solid #ddd; }
}