:root {
	--ungu: #6b3fa0;
	--ungu-tua: #422a5c;
	--ungu-terang: #8b5fc4;
	--ungu-pucat: #efe8f8;
	--ink: #1f1b24;
	--muted: #6e6779;
	--bg: #f5f3fa;
	--surface: #ffffff;
	--line: #e6e1ef;
	--ok: #1f7a3c;
	--ok-bg: #e4f3e8;
	--warn: #9a6e12;
	--warn-bg: #f8f0da;
	--bad: #a6402f;
	--bad-bg: #f8e5e0;
	--radius-lg: 20px;
	--radius-md: 14px;
	--shadow-card: 0 10px 30px -14px rgba(66, 42, 92, .28);
	--shadow-float: 0 14px 34px -10px rgba(66, 42, 92, .4);
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
	background: var(--bg);
	color: var(--ink);
	-webkit-tap-highlight-color: transparent;
	overflow-x: hidden;
	max-width: 100%;
}
a { color: inherit; }

/* ---- Lencana merek (dipakai di login & kop beranda, ganti emoji) ---- */
.lencana {
	width: 52px; height: 52px;
	border-radius: 16px;
	background: linear-gradient(155deg, var(--ungu-terang), var(--ungu-tua));
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	box-shadow: var(--shadow-card);
	flex-shrink: 0;
}
.lencana svg { width: 26px; height: 26px; }

/* ---- Halaman login ---- */
.halaman-masuk {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 20% 15%, var(--ungu-terang), var(--ungu-tua) 65%);
	padding: 20px;
}
.kartu-masuk {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	width: 100%;
	max-width: 380px;
	box-shadow: 0 24px 60px -18px rgba(0,0,0,.45);
}
.kartu-masuk .logo { text-align: center; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kartu-masuk .logo .lencana { width: 56px; height: 56px; }
.kartu-masuk h1 { font-size: 1.25rem; margin: 0; letter-spacing: -.01em; }
.kartu-masuk form { display: flex; flex-direction: column; gap: 16px; }
.kartu-masuk label { font-size: .85rem; color: var(--muted); display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.kartu-masuk input {
	font-size: 1rem;
	padding: 13px 14px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	color: var(--ink);
	font-family: inherit;
	min-height: 48px;
}
.kartu-masuk input:focus { outline: none; border-color: var(--ungu); box-shadow: 0 0 0 3px var(--ungu-pucat); }

/* ---- Tombol ---- */
.tombol, .kartu-masuk button {
	background: linear-gradient(155deg, var(--ungu-terang), var(--ungu));
	color: #fff;
	border: none;
	border-radius: 14px;
	padding: 14px;
	min-height: 50px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-shadow: var(--shadow-float);
	transition: transform .15s ease, box-shadow .15s ease;
}
.tombol:active, .kartu-masuk button:active { transform: scale(.98); box-shadow: var(--shadow-card); }
.tombol-luar { background: transparent; color: var(--ungu); border: 1.5px solid var(--ungu); box-shadow: none; }
.tombol-luar:active { transform: scale(.98); }
.tombol:disabled, .kartu-masuk button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---- Pesan/status ---- */
.pesan { padding: 12px 14px; border-radius: 12px; font-size: .9rem; }
.pesan-galat, .status-galat { background: var(--bad-bg); color: var(--bad); }
.pesan-ok, .status-ok { background: var(--ok-bg); color: var(--ok); }
.status-warn { background: var(--warn-bg); color: var(--warn); }
.status { padding: 10px 0; font-size: .9rem; color: var(--muted); }

/* Status di layar kamera (enroll/absen) berganti-ganti panjang teks — dari
   "Memproses…" sampai pesan kamera gagal yang jauh lebih panjang. Tinggi
   tetap 2 baris di sini saja (bukan di .status generik yang juga dipakai
   status pendek di Beranda), supaya tombol di bawahnya tidak naik turun. */
#status {
	line-height: 1.35; height: 2.9em; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 0 16px; border-radius: 12px;
	font-weight: 500;
	background: var(--ungu-pucat); color: var(--ungu-tua);
	transition: background-color .15s ease, color .15s ease;
	/* height TETAP (bukan min-height): min-height masih bisa membesar
	   sedikit kalau pesan 2 baris ternyata butuh sepersekian em lebih —
	   cukup untuk bikin tombol di bawahnya tetap kelihatan bergeser
	   beberapa piksel. Dikunci mutlak + overflow:hidden supaya benar-benar
	   tidak mungkin berubah, walau pesan terpanjang jadi terpotong dikit. */
}
/* Warna berganti sesuai status deteksi wajah — dipasang/dilepas oleh JS. */
#status.status-ok { background: var(--ok-bg); color: var(--ok); }
#status.status-warn { background: var(--warn-bg); color: var(--warn); }
#status.status-galat { background: var(--bad-bg); color: var(--bad); }

/* ---- Kerangka halaman utama ---- */
.halaman-utama { min-height: 100vh; padding-bottom: 32px; }
.isi { max-width: 480px; margin: 0 auto; padding: 0 18px 24px; }
.isi-sempit { max-width: 420px; }
.text-muted { color: var(--muted); font-size: .88rem; }

/* Header lama (dipakai enroll/absen) — tetap ada untuk halaman non-Beranda */
.topbar {
	background: var(--ungu);
	color: #fff;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	position: sticky; top: 0; z-index: 5;
}
.topbar .tautan-keluar { color: #fff; text-decoration: none; font-size: .85rem; opacity: .85; padding: 6px; }

/* ---- Beranda: kop bergradasi + kartu jadwal menumpuk ---- */
.kop-beranda {
	background: linear-gradient(155deg, var(--ungu-terang), var(--ungu-tua));
	color: #fff;
	padding: 20px 18px 56px;
	border-radius: 0 0 28px 28px;
	/* .tautan-keluar sengaja punya margin negatif di bawah (memperbesar area
	   sentuh tanpa mengubah tata letak) — tanpa overflow:hidden di sini,
	   itu mendorong seisi halaman melebihi lebar layar di HP sempit. */
	overflow: hidden;
}
.kop-beranda .baris-atas { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.kop-beranda .nama-perusahaan { font-size: .82rem; opacity: .82; font-weight: 500; }
.kop-beranda .tautan-keluar {
	color: #fff; opacity: .85; text-decoration: none;
	width: 44px; height: 44px; margin: -10px -10px 0 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.kop-beranda .tautan-keluar:active { background: rgba(255,255,255,.15); }
.profil-baris { display: flex; align-items: center; gap: 14px; }
.avatar {
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(255,255,255,.18);
	border: 1.5px solid rgba(255,255,255,.4);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.profil-baris h1 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
.profil-baris .jabatan { font-size: .85rem; opacity: .8; margin-top: 2px; }

.kartu-jadwal {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	margin: -44px 18px 0;
	padding: 20px;
	position: relative;
	z-index: 2;
}
.kartu-jadwal .baris-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.kartu-jadwal .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.kartu-jadwal .tanggal { font-size: .8rem; color: var(--muted); }
.kartu-jadwal .jam-kerja { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.kartu-jadwal .jam-kerja span { font-size: .95rem; font-weight: 500; color: var(--muted); }
.kartu-jadwal .lokasi {
	display: flex; align-items: flex-start; gap: 8px;
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
	font-size: .85rem; color: var(--muted);
}
.kartu-jadwal .lokasi svg { flex-shrink: 0; margin-top: 2px; color: var(--ungu); }
.kartu-jadwal .aksi-absen { margin-top: 16px; }

.isi-beranda { max-width: 480px; margin: 0 auto; padding: 20px 18px 24px; }

/* ---- Aktivitas hari ini ---- */
.blok-judul { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.blok-judul h2 { font-size: 1rem; margin: 0; }
.tautan-lihat-semua { color: var(--ungu); font-size: .85rem; font-weight: 600; text-decoration: none; padding: 6px 0; }

/* ---- Riwayat Absen ---- */
.grup-tanggal { margin-bottom: 18px; }
.grup-tanggal .label-tanggal {
	font-size: .8rem; color: var(--muted); font-weight: 600;
	margin: 0 0 8px 2px;
}
.form-filter-riwayat {
	background: var(--surface); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card); padding: 16px; margin-bottom: 20px;
	display: flex; gap: 10px; flex-wrap: wrap; align-items: end;
}
.form-filter-riwayat label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); font-weight: 600; flex: 1; min-width: 130px; }
.form-filter-riwayat input {
	font-size: .92rem; padding: 10px 12px; border: 1.5px solid var(--line);
	border-radius: 10px; font-family: inherit; min-height: 44px;
}
.form-filter-riwayat button { flex-shrink: 0; width: auto; padding-inline: 20px; }
.daftar-aktivitas {
	background: var(--surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.baris-aktivitas {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	font-size: .92rem;
}
.baris-aktivitas:last-child { border-bottom: none; }
.baris-aktivitas .waktu { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); width: 64px; flex-shrink: 0; }
.baris-aktivitas.terbaru .waktu { color: var(--ungu); }
.baris-aktivitas .jenis { flex: 1; }
.baris-aktivitas .tanda {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--ok); flex-shrink: 0;
}
.baris-aktivitas .tanda.keluar { background: var(--muted); }
.kosong-aktivitas { padding: 28px 16px; text-align: center; color: var(--muted); font-size: .88rem; }

.tautan-lokasi {
	display: inline-flex; vertical-align: middle; margin-left: 4px;
	color: var(--ungu); opacity: .75;
}
.tautan-lokasi:active { opacity: 1; }
.lencana-luar-area {
	display: inline-block; margin-left: 6px; padding: 2px 8px;
	border-radius: 999px; font-size: .72rem; font-weight: 600;
	background: var(--warn-bg); color: var(--warn);
	vertical-align: middle;
}

/* ---- Kartu generik (dipakai enroll/absen) ---- */
.kartu {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: var(--shadow-card);
}
.kartu h2 { font-size: 1rem; margin: 0 0 10px; }
.kartu-nonaktif { opacity: .65; }

/* ---- Kamera ---- */
.kotak-kamera {
	position: relative;
	width: 100%;
	max-width: 360px;
	margin: 0 auto 14px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #000;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-card);
}
.kotak-kamera video, .kotak-kamera canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#btnAmbil { width: 100%; margin-top: 12px; }