/* Aplikasi Sekolah - tampilan dasar. Warna utama diatur dari profil sekolah (--utama). */
:root {
    --utama: #0f766e;
    --latar: #f4f6f8;
    --kartu: #ffffff;
    --teks: #1f2933;
    --redup: #64748b;
    --garis: #e2e8f0;
    --hijau: #15803d;
    --kuning: #b45309;
    --merah: #b91c1c;
    --biru: #1d4ed8;
    --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; color: var(--teks); background: var(--latar); line-height: 1.5; }
a { color: var(--utama); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 0 0 8px; }
small, .redup { color: var(--redup); }

/* Kerangka */
.atas { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--utama); color: #fff; min-height: 56px; }
.atas a { color: #fff; }
.merek { display: flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none !important; min-width: 0; }
.merek span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merek img { height: 36px; width: 36px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.logo-huruf { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: #fff; color: var(--utama); font-weight: 700; }
.semester { margin-left: auto; font-size: .85rem; opacity: .9; white-space: nowrap; }
.akun { display: flex; align-items: center; gap: 10px; }
.akun form { margin: 0; }
.akun .tombol.garis { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; }
.tombol-menu { display: none; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; }
.tata { display: flex; min-height: calc(100vh - 56px); }
.samping { width: 240px; flex-shrink: 0; background: var(--kartu); border-right: 1px solid var(--garis); padding: 12px 8px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
.samping a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--teks); font-size: .92rem; }
.samping a:hover { background: var(--latar); text-decoration: none; }
.samping a.aktif { background: color-mix(in srgb, var(--utama) 12%, white); color: var(--utama); font-weight: 600; }
.samping .ikon { width: 20px; text-align: center; }
.judul-menu { margin: 14px 10px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--redup); font-weight: 600; }
.isi { flex: 1; min-width: 0; padding: 20px 24px 60px; }

@media (max-width: 900px) {
    .tombol-menu { display: block; }
    .samping { position: fixed; left: -260px; top: 56px; z-index: 30; transition: left .2s; box-shadow: 2px 0 12px rgba(0,0,0,.15); }
    body.menu-buka .samping { left: 0; }
    .semester, .nama-akun { display: none; }
    .isi { padding: 16px; }
}

/* Komponen */
.kepala-halaman { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kepala-halaman .aksi { display: flex; gap: 8px; flex-wrap: wrap; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.kartu.tanpa-pad { padding: 0; overflow: hidden; }
.kisi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 16px; }
.kisi-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.angka { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px 16px; }
.angka .label { font-size: .8rem; color: var(--redup); }
.angka .nilai { font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.angka .nilai small { font-size: .95rem; font-weight: 500; }
.angka.peringatan { border-color: #fca5a5; background: #fef2f2; }
.angka.peringatan .nilai { color: var(--merah); }

.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--utama); background: var(--utama); color: #fff; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none !important; font-family: inherit; }
.tombol:hover { filter: brightness(1.07); }
.tombol.garis { background: #fff; color: var(--utama); }
.tombol.merah { background: var(--merah); border-color: var(--merah); }
.tombol.kecil { padding: 5px 10px; font-size: .82rem; }
.tombol.besar { padding: 14px 22px; font-size: 1.05rem; width: 100%; }
.tombol[disabled] { opacity: .5; cursor: not-allowed; }
.tautan-tombol { background: none; border: 0; color: var(--merah); cursor: pointer; font-size: .85rem; padding: 0; font-family: inherit; }

table.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th, .tabel td { padding: 9px 12px; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }
.tabel th { background: #f8fafc; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--redup); font-weight: 600; }
.tabel tr:hover td { background: #fafbfc; }
.tabel .kanan { text-align: right; }
.tabel .tengah { text-align: center; }
.gulir { overflow-x: auto; }

.lencana { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #e2e8f0; color: #334155; white-space: nowrap; }
.lencana.hijau { background: #dcfce7; color: var(--hijau); }
.lencana.kuning { background: #fef3c7; color: var(--kuning); }
.lencana.merah { background: #fee2e2; color: var(--merah); }
.lencana.biru { background: #dbeafe; color: var(--biru); }

.pesan { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.pesan ul { margin: 6px 0 0; padding-left: 20px; }
.pesan.sukses { background: #dcfce7; color: #14532d; }
.pesan.galat { background: #fee2e2; color: #7f1d1d; }
.pesan.info { background: #dbeafe; color: #1e3a8a; }

/* Formulir */
.form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.form .penuh { grid-column: 1 / -1; }
label.isian { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 600; }
label.isian .bantuan { font-weight: 400; font-size: .8rem; color: var(--redup); }
input[type=text], input[type=url], input:not([type]), input[type=email], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], input[type=month], input[type=datetime-local], select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--teks);
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--utama) 40%, white); border-color: var(--utama); }
.cek { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cek-banyak { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 400; }
.saring { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.saring input, .saring select { width: auto; min-width: 160px; }

/* Tombol status presensi H S I A T */
.pilih-status { display: inline-flex; gap: 4px; }
.pilih-status input { display: none; }
.pilih-status label { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid #cbd5e1; border-radius: 8px; font-weight: 700; font-size: .85rem; cursor: pointer; color: var(--redup); background: #fff; user-select: none; }
.pilih-status input:checked + label { color: #fff; border-color: transparent; }
.pilih-status input[value=H]:checked + label, .pilih-status input[value=hadir]:checked + label { background: var(--hijau); }
.pilih-status input[value=S]:checked + label, .pilih-status input[value=sakit]:checked + label { background: var(--biru); }
.pilih-status input[value=I]:checked + label, .pilih-status input[value=izin]:checked + label, .pilih-status input[value=pulang]:checked + label { background: #7c3aed; }
.pilih-status input[value=A]:checked + label, .pilih-status input[value=alpa]:checked + label { background: var(--merah); }
.pilih-status input[value=T]:checked + label, .pilih-status input[value=terlambat]:checked + label { background: var(--kuning); }

/* Daftar kartu kecil */
.daftar-kartu { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kartu-kecil { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 12px 14px; display: block; color: var(--teks); }
a.kartu-kecil:hover { border-color: var(--utama); text-decoration: none; }
.kartu-kecil .baris-atas { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.jadwal-kartu.berjalan { border-left: 4px solid var(--hijau); }
.jadwal-kartu.sekarang { border-left: 4px solid var(--kuning); }

.batang { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.batang > span { display: block; height: 100%; background: var(--utama); }
.batang.merah > span { background: var(--merah); }
.batang.kuning > span { background: var(--kuning); }

.matriks td.sel { text-align: center; font-weight: 700; padding: 6px 4px; }
.matriks td:first-child { min-width: 220px; white-space: nowrap; }
.matriks td:first-child small { white-space: normal; }
.sel-ada { color: var(--hijau); }
.sel-revisi { color: var(--kuning); }
.sel-belum { color: var(--merah); }
.sel-setuju { color: var(--hijau); background: color-mix(in srgb, var(--hijau) 18%, white); }

.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 16px; overflow-x: auto; }
.tab a { padding: 8px 14px; border-bottom: 2px solid transparent; color: var(--redup); white-space: nowrap; }
.tab a.aktif { border-color: var(--utama); color: var(--utama); font-weight: 600; }

.halaman-masuk { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(135deg, var(--utama), #0b3b36); }
.kotak-masuk { width: 100%; max-width: 400px; background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.kotak-masuk .logo-huruf { width: 56px; height: 56px; font-size: 1.6rem; background: var(--utama); color: #fff; }
.kotak-masuk img.logo { width: 64px; height: 64px; object-fit: contain; }
.atau { text-align: center; color: var(--redup); margin: 14px 0; font-size: .85rem; }
.tombol-google { background: #fff; color: #1f2933; border: 1px solid #cbd5e1; }

.halaman-angka { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.halaman-angka a, .halaman-angka span { padding: 5px 10px; border: 1px solid var(--garis); border-radius: 6px; background: #fff; font-size: .85rem; }
.halaman-angka .sekarang { background: var(--utama); color: #fff; }

.kosong { text-align: center; padding: 30px 10px; color: var(--redup); }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.antara { justify-content: space-between; }
.mt { margin-top: 16px; }

@media print {
    .atas, .samping, .tombol, .saring, .tidak-cetak { display: none !important; }
    .isi { padding: 0; }
    body { background: #fff; }
    .kartu { border: 0; padding: 0; }
}

/* Papan kelas hari ini */
.papan-kelas h3 { font-size: .95rem; margin: 0 0 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kolom-papan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kolom-papan .kolom { background: var(--latar); border-radius: 10px; padding: 10px; min-width: 0; }
.kolom-papan .kelas { background: var(--kartu); border: 1px solid var(--garis); border-left: 4px solid var(--garis); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.kolom-papan .berlangsung .kelas { border-left-color: var(--biru); }
.kolom-papan .selesai .kelas { border-left-color: var(--hijau); }
.kolom-papan .kelas.masalah { border-left-color: var(--merah); background: #fff5f5; }
.kolom-papan .kelas.milik { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--utama) 45%, transparent); }
.kolom-papan .kelas small { display: block; margin-top: 2px; color: var(--redup, #64748b); }
.kolom-papan .gulir-kolom { max-height: 420px; overflow-y: auto; }
.teks-merah { color: var(--merah); }
@media (max-width: 900px) { .kolom-papan { grid-template-columns: 1fr; } }

/* Layar QR absen */
.layar-qr { display: grid; grid-template-columns: minmax(320px, 1.3fr) 1fr; gap: 20px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 24px; }
.layar-qr:fullscreen { border-radius: 0; padding: 40px; align-items: stretch; }
.qr-kiri { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-judul { font-size: 1.4rem; font-weight: 700; }
.qr-sub { color: var(--redup); }
.qr-kotak { width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; border: 6px solid var(--utama); border-radius: 16px; padding: 10px; background: #fff; }
.qr-kotak svg { width: 100%; height: 100%; }
.layar-qr:fullscreen .qr-kotak { width: min(70vh, 100%); }
.qr-sisa { display: flex; align-items: center; gap: 10px; width: min(100%, 420px); color: var(--redup); font-size: .9rem; white-space: nowrap; }
.qr-batang { flex: 1; height: 8px; background: var(--garis); border-radius: 99px; overflow: hidden; }
.qr-batang span { display: block; height: 100%; background: var(--utama); transition: width 1s linear; }
.qr-jam { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.qr-kanan { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qr-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qr-daftar li { border: 1px solid var(--garis); border-left: 4px solid var(--garis); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.qr-daftar li.ok { border-left-color: var(--hijau); }
.qr-daftar li.tolak { border-left-color: var(--merah); background: #fff5f5; }
.qr-daftar small { color: var(--redup); }
@media (max-width: 800px) { .layar-qr { grid-template-columns: 1fr; } }
.hasil-pindai { max-width: 460px; margin: 30px auto; text-align: center; }
.hasil-pindai .ikon-besar { font-size: 4rem; line-height: 1; width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--hijau); }
.hasil-pindai.tolak .ikon-besar { background: var(--merah); }

/* Laporan kehadiran */
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--redup); margin-bottom: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.grafik { display: block; max-width: none; }
.batang-baris { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: .88rem; }
.batang-baris b { text-align: right; font-variant-numeric: tabular-nums; }
.garis-bawah { border-bottom: 1px solid var(--garis); padding: 7px 0; }
.sel-titik { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Penjaminan mutu */
.alur-mutu { margin: 0 0 14px; padding: 12px 16px 12px 34px; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); font-size: .92rem; }
.alur-mutu li { margin: 2px 0; }
.butir-mutu { margin-bottom: 10px; }
.butir-mutu details { margin-top: 10px; }
.tautan-kecil { cursor: pointer; color: var(--utama, #0f766e); font-weight: 600; font-size: .9rem; }
.form-baris { display: grid; gap: 8px; margin-top: 8px; max-width: 560px; }
.telaah-catatan { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--hijau); background: color-mix(in srgb, var(--hijau) 8%, white); border-radius: 4px; }
.telaah-catatan.revisi { border-left-color: var(--kuning); background: color-mix(in srgb, var(--kuning) 12%, white); }
.sel-ajukan { color: #1d4ed8; }
/* Garis waktu perkembangan rujukan */
.garis-waktu { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--garis); }
.garis-waktu li { position: relative; padding: 0 0 14px 12px; }
.garis-waktu li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--redup); border: 2px solid var(--kartu); }
.garis-waktu li.merah::before { background: var(--merah); }
.garis-waktu li.kuning::before { background: var(--kuning); }
.garis-waktu li.biru::before { background: #2563eb; }
.garis-waktu li.hijau::before { background: var(--hijau); }

/* ---------- Sidebar berornamen (selaras PMB, SIAKAD, Alumni) ----------
   Latar gelap dari warna utama sekolah, motif bintang delapan (geometri Islami) tipis,
   cahaya emas di bagian atas, judul kelompok emas, dan penanda emas pada menu aktif. */
:root {
    --emas: #d4a64a;
    --samping-gelap: color-mix(in srgb, var(--utama) 55%, #06121a);
    --motif-bintang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='white' stroke-opacity='.075' stroke-width='1.1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='4.5'/%3E%3Cpath d='M0 0l9 9M56 0l-9 9M0 56l9-9M56 56l-9-9'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='1.4' fill='white' fill-opacity='.1'/%3E%3C/svg%3E");
}
.samping {
    background:
        radial-gradient(120% 40% at 0% 0%, color-mix(in srgb, var(--emas) 22%, transparent), transparent 70%),
        var(--motif-bintang),
        linear-gradient(180deg, var(--samping-gelap), color-mix(in srgb, var(--samping-gelap) 78%, black));
    border-right: 0;
    color: #e6f0ee;
    padding: 14px 10px 24px;
    scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .18) transparent;
    box-shadow: inset -2px 0 0 color-mix(in srgb, var(--emas) 30%, transparent);
}
@media (max-width: 900px) { .samping { box-shadow: inset -2px 0 0 color-mix(in srgb, var(--emas) 30%, transparent), 4px 0 18px rgba(0,0,0,.25); } }
.samping a { color: rgb(230 240 238 / .84); font-weight: 500; transition: background .15s, color .15s; }
.samping a:hover { background: rgb(255 255 255 / .08); color: #fff; }
.samping a.aktif { background: rgb(255 255 255 / .13); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--emas); }
.samping .ikon { filter: saturate(.9); }
.samping .judul-menu {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 10px 6px; color: var(--emas); font-weight: 700; letter-spacing: .12em; font-size: .68rem;
}
.samping .judul-menu::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--emas) 45%, transparent), transparent); }
.samping > a:first-child { margin-top: 2px; }
@media print { .samping { display: none !important; } }

/* ==========================================================================
   Tampilan v2: huruf, judul halaman, judul kartu, dan Master Data berwarna.
   Tujuannya agar judul bagian berbeda jelas dari isi, dan tiap bagian mudah dikenali.
   ========================================================================== */
body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.005em; }
h1, h2, h3 { letter-spacing: -.015em; color: #0f1f1c; }
.kepala-halaman h1 { font-size: 1.65rem; font-weight: 800; line-height: 1.2; }
.kepala-halaman h1::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--utama), var(--emas)); }
.kepala-halaman .redup { max-width: 760px; }
.kartu { box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 6px 18px rgb(15 23 42 / .04); }
.kartu > h2:first-child, .kartu > .flex > h2:first-child { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.08rem; }
.kartu > h2:first-child::before, .kartu > .flex > h2:first-child::before { content: ""; width: 4px; height: 1.1em; border-radius: 3px; background: var(--utama); flex-shrink: 0; }
.angka { position: relative; overflow: hidden; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.angka::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: color-mix(in srgb, var(--utama) 70%, white); }
.angka.peringatan::before { background: var(--merah); }
.angka .label { font-weight: 600; text-transform: none; }
.tabel th { background: color-mix(in srgb, var(--utama) 6%, white); color: color-mix(in srgb, var(--utama) 55%, #334155); }

/* Master Data */
.master-alat { position: sticky; top: 56px; z-index: 5; display: grid; gap: 10px; margin: 0 -4px 18px; padding: 10px 4px; background: color-mix(in srgb, var(--latar) 92%, transparent); backdrop-filter: blur(6px); }
.cari-master { display: flex; align-items: center; gap: 10px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; padding: 4px 14px; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.cari-master input { border: 0 !important; outline: 0 !important; padding: 9px 0 !important; flex: 1; background: transparent; font-size: .95rem; }
.cari-master:focus-within { border-color: var(--utama); box-shadow: 0 0 0 3px color-mix(in srgb, var(--utama) 18%, transparent); }
.lompat-master { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lompat-master a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600;
    color: color-mix(in srgb, var(--warna) 80%, black); background: color-mix(in srgb, var(--warna) 10%, white); border: 1px solid color-mix(in srgb, var(--warna) 22%, white); text-decoration: none !important; }
.lompat-master a:hover { background: color-mix(in srgb, var(--warna) 18%, white); }
.bagian-master { scroll-margin-top: 150px; margin-bottom: 22px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px rgb(15 23 42 / .05); }
.kepala-bagian { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid color-mix(in srgb, var(--warna) 18%, white);
    background: linear-gradient(90deg, color-mix(in srgb, var(--warna) 12%, white), color-mix(in srgb, var(--warna) 3%, white) 70%); }
.kepala-bagian h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: color-mix(in srgb, var(--warna) 75%, black); }
.kepala-bagian p { margin: 2px 0 0; font-size: .85rem; color: var(--redup); }
.ikon-bagian { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; font-size: 1.4rem;
    background: var(--warna); box-shadow: 0 6px 14px color-mix(in srgb, var(--warna) 35%, transparent), inset 0 0 0 1px rgb(255 255 255 / .25); }
.jumlah-bagian { margin-left: auto; font-size: .78rem; font-weight: 700; color: color-mix(in srgb, var(--warna) 75%, black); background: #fff; border: 1px solid color-mix(in srgb, var(--warna) 25%, white); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ubin-master { display: grid; gap: 10px; padding: 16px 18px 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ubin { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--garis); background: #fff; color: var(--teks);
    text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ubin:hover { border-color: var(--warna); box-shadow: 0 6px 16px color-mix(in srgb, var(--warna) 18%, transparent); transform: translateY(-1px); }
.ubin-ikon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; font-size: 1.15rem; background: color-mix(in srgb, var(--warna) 12%, white); }
.ubin-teks { display: flex; flex-direction: column; min-width: 0; }
.ubin-teks strong { font-size: .93rem; font-weight: 700; line-height: 1.3; }
.ubin-teks small { font-size: .78rem; line-height: 1.3; }
.ubin-jumlah { margin-left: auto; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: color-mix(in srgb, var(--warna) 80%, black); background: color-mix(in srgb, var(--warna) 12%, white); }
.ubin-jumlah.kosong { color: var(--merah); background: #fee2e2; }
@media (max-width: 600px) { .kepala-bagian p, .jumlah-bagian { display: none; } .master-alat { top: 56px; } }
.remah { display: inline-block; font-size: .85rem; font-weight: 600; color: color-mix(in srgb, var(--warna, var(--utama)) 80%, black); margin-bottom: 4px; }
.judul-ikon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.judul-ikon > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.3rem; background: color-mix(in srgb, var(--warna, var(--utama)) 14%, white); }
.kepala-halaman h1.judul-ikon::after { content: none; }
/* Dasbor piket */
.piket-bertugas { background: linear-gradient(90deg, color-mix(in srgb, var(--utama) 9%, white), #fff 70%); }
.chip-piket { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid color-mix(in srgb, var(--utama) 25%, white); font-weight: 600; font-size: .9rem; }
.chip-piket small { font-weight: 500; }
.jadwal-piket-minggu .tabel th { background: transparent; text-transform: none; font-size: .85rem; }
.baris-ini td, .baris-ini th { background: color-mix(in srgb, var(--emas) 15%, white) !important; font-weight: 600; }
.sub-judul { margin: 14px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--redup); }
.sub-judul.merah { color: var(--merah); } .sub-judul.kuning { color: var(--kuning); } .sub-judul.biru { color: var(--biru); }
.daftar-nama { display: flex; flex-wrap: wrap; gap: 6px; }
.daftar-nama span { padding: 3px 10px; border-radius: 999px; background: #fef2f2; color: #7f1d1d; font-size: .85rem; }
.baris-tipis { padding: 7px 0; border-bottom: 1px solid var(--garis); gap: 10px; }
.kolom-tamu { background: var(--latar); border-radius: 12px; padding: 12px; }
.kolom-tamu.sedang { background: color-mix(in srgb, var(--biru) 7%, white); }
.kolom-tamu h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.tamu-item { background: #fff; border: 1px solid var(--garis); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.pilih-mode { display: flex; flex-wrap: wrap; gap: 8px; }
.pilih-mode label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--garis); border-radius: 999px; font-weight: 600; font-size: .88rem; cursor: pointer; background: #fff; }
.pilih-mode label:has(input:checked) { border-color: var(--utama); background: color-mix(in srgb, var(--utama) 10%, white); color: var(--utama); }

/* Pita mode demo (APP_DEMO=true) */
.pita-demo{background:#facc15;color:#422006;text-align:center;font-size:.8rem;font-weight:600;padding:4px 10px;letter-spacing:.02em}