/* RAPAT: navy + ungu, modern dan sleek, warna jenis rapat tetap sebagai data. Arah dan alasan tiap keputusan ada di /DESIGN.md. */

@font-face { font-family: "Inter"; src: url("font/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("font/FiraCode.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --kertas: #f6f9fc; --permukaan: #ffffff; --permukaan-2: #ebf0f6;
  --tinta: #0a2540; --badan: #425466; --redup: #5e6c79;
  --garis: #e3e8ee; --garis-input: #828d9c;
  --utama: #5750e0; --utama-teks: #ffffff; --utama-hover: #453bc9;
  --utama-tint: #edebfc;
  --fokus: #5750e0;
  --galat: #df1b41; --galat-bg: #fde8ec; --galat-teks: #a0122e;
  --peringatan-bg: #fff3d6; --peringatan-teks: #7a5300; --peringatan-garis: #c77700;
  --info-bg: #e3f7e3; --info-teks: #1b6b1b;
  --libur: #f6d5cf; --cuti: #fbe6bf; --lokal: #e0d8f0; --libur-teks: #8c1d18; --akhir-pekan: #eeebe3;
  --bayangan-1: 0 2px 8px -4px rgba(10, 37, 64, 0.12), 0 1px 2px rgba(10, 37, 64, 0.06);
  --bayangan-2: 0 14px 28px -10px rgba(10, 37, 64, 0.20), 0 4px 10px -4px rgba(10, 37, 64, 0.10);
  --kaca: rgba(255, 255, 255, 0.72); --kaca-tepi: rgba(255, 255, 255, 0.8); --kaca-garis: rgba(10, 37, 64, 0.12); --kaca-bayangan: rgba(10, 37, 64, 0.14);
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-tema="gelap"] {
  color-scheme: dark;
  --kertas: #060d18; --permukaan: #0f2038; --permukaan-2: #16294a;
  --tinta: #f3f6fa; --badan: #c7d2e0; --redup: #93a2b8;
  --garis: #1e3352; --garis-input: #4e6c99;
  --utama: #a79eff; --utama-teks: #0a2540; --utama-hover: #bdb6ff;
  --utama-tint: #241e52;
  --fokus: #a79eff;
  --galat: #ff9db3; --galat-bg: #3a1420; --galat-teks: #ff9db3;
  --peringatan-bg: #3a2c0a; --peringatan-teks: #ffd980; --peringatan-garis: #c77700;
  --info-bg: #123018; --info-teks: #8fe39b;
  --libur: #4a2622; --cuti: #4a3812; --lokal: #352a52; --libur-teks: #ffb4ab; --akhir-pekan: #19211e;
  --bayangan-1: 0 2px 10px -4px rgba(0, 0, 0, 0.45);
  --bayangan-2: 0 18px 36px -10px rgba(0, 0, 0, 0.6);
  --kaca: rgba(15, 32, 56, 0.72); --kaca-tepi: rgba(255, 255, 255, 0.14); --kaca-garis: rgba(255, 255, 255, 0.10); --kaca-bayangan: rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    color-scheme: dark;
    --kertas: #060d18; --permukaan: #0f2038; --permukaan-2: #16294a;
    --tinta: #f3f6fa; --badan: #c7d2e0; --redup: #93a2b8;
    --garis: #1e3352; --garis-input: #4e6c99;
    --utama: #a79eff; --utama-teks: #0a2540; --utama-hover: #bdb6ff;
    --utama-tint: #241e52;
    --fokus: #a79eff;
    --galat: #ff9db3; --galat-bg: #3a1420; --galat-teks: #ff9db3;
    --peringatan-bg: #3a2c0a; --peringatan-teks: #ffd980; --peringatan-garis: #c77700;
    --info-bg: #123018; --info-teks: #8fe39b;
    --libur: #4a2622; --cuti: #4a3812; --lokal: #352a52; --libur-teks: #ffb4ab; --akhir-pekan: #19211e;
    --bayangan-1: 0 2px 10px -4px rgba(0, 0, 0, 0.45);
    --bayangan-2: 0 18px 36px -10px rgba(0, 0, 0, 0.6);
    --kaca: rgba(15, 32, 56, 0.72); --kaca-tepi: rgba(255, 255, 255, 0.14); --kaca-garis: rgba(255, 255, 255, 0.10); --kaca-bayangan: rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kertas); color: var(--tinta); font: 400 16px/1.6 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.005em; }
a { color: var(--utama); text-underline-offset: 3px; }
a:hover { color: var(--utama-hover); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; letter-spacing: -0.006em; color: var(--tinta); }
p { margin: 0 0 12px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.lompat { position: absolute; left: 12px; top: -60px; background: var(--utama); color: var(--utama-teks); padding: 10px 16px; border-radius: 8px; z-index: 50; }
.lompat:focus { top: 12px; }

.judul { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); font-weight: 700; line-height: 1.1; }
.sub { color: var(--badan); margin: 6px 0 24px; }
.redup-teks { color: var(--redup); font-size: 14px; }
.mono { font-family: var(--mono); font-size: 13px; }
code.mono { background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: 4px; padding: 0 4px; }

/* Bilah atas */
.bilah { background: var(--permukaan); border-bottom: 1px solid var(--garis); }
.bilah-isi { max-width: 1180px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); line-height: 1.1; margin-right: 8px; }
.merek:hover { color: var(--tinta); }
.merek:hover .merek-tanda { transform: rotate(-6deg) scale(1.06); }
/* Tanda merek: kotak kecil bergaya ubin tanggal (motif identitas yang sama dipakai untuk jenis rapat), warna aksen. */
.merek-tanda { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--utama); box-shadow: inset 0 0 0 1px #ffffff40; transition: transform 0.15s ease; }
@media (forced-colors: active) { .merek-tanda { forced-color-adjust: none; background: var(--utama); border: 1px solid CanvasText; } }
/* Logo yang diunggah instansi, menggantikan .merek-tanda bawaan di atas - ukuran & posisi sama. */
.merek-tanda-img { flex: none; width: 38px; height: 38px; border-radius: 9px; object-fit: contain; transition: transform 0.15s ease; }
.merek:hover .merek-tanda-img { transform: scale(1.06); }
.merek-teks { display: grid; }
.merek-nama { font: 700 1.5rem/1.15 var(--serif); letter-spacing: -0.008em; }
.merek-instansi { font-size: 12px; color: var(--redup); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tombol.menu-tombol { display: none; }
.menu { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; }
.menu > a, .menu summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--badan); text-decoration: none; font-weight: 500; cursor: pointer; }
.menu > a:hover, .menu summary:hover { background: var(--permukaan-2); color: var(--tinta); }
.menu a[aria-current="page"] { color: var(--tinta); font-weight: 700; box-shadow: inset 0 -3px 0 var(--utama); border-radius: 8px 8px 0 0; }
.kelola { position: relative; }
.kelola summary { list-style: none; gap: 6px; }
.kelola summary::-webkit-details-marker { display: none; }
.kelola summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.kelola summary.aktif { color: var(--tinta); font-weight: 700; box-shadow: inset 0 -3px 0 var(--utama); border-radius: 8px 8px 0 0; }
.kelola[open] summary { background: var(--permukaan-2); color: var(--tinta); }
.kelola-isi { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; z-index: 20; display: grid; padding: 6px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; box-shadow: 0 12px 32px #00000026; }
.kelola-isi a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.kelola-isi a:hover { background: var(--permukaan-2); }
.kelola-isi a[aria-current="page"] { font-weight: 700; background: var(--info-bg); color: var(--info-teks); }
.akun-blok { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pengguna { color: var(--tinta); text-decoration: none; font-weight: 600; }
.pengguna:hover { text-decoration: underline; color: var(--tinta); }
.tombol-ikon { min-height: 44px; min-width: 44px; width: 44px; padding: 0; position: relative; }
.tombol-ikon svg { flex: none; }
.tombol-ikon [hidden] { display: none !important; }

.isi { max-width: 1180px; margin: 0 auto; padding: 32px 20px 64px; }
.inline { display: inline; margin: 0; }

/* Tombol */
.tombol { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 6px; border: 1.5px solid var(--utama); background: var(--utama); color: var(--utama-teks); font: 600 15px/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease; }
.tombol:hover { background: var(--utama-hover); border-color: var(--utama-hover); color: var(--utama-teks); transform: translateY(-1px); box-shadow: var(--bayangan-2); }
.tombol:active { transform: translateY(0); box-shadow: none; }
.tombol-sekunder { background: var(--permukaan); color: var(--tinta); border-color: var(--garis-input); box-shadow: none; }
.tombol-sekunder:hover { background: var(--permukaan-2); border-color: var(--tinta); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .tombol { transition: none; } .tombol:hover { transform: none; } }
.tombol-bahaya { background: var(--galat); border-color: var(--galat); color: var(--permukaan); }
:root[data-tema="gelap"] .tombol-bahaya { color: #3b1a18; }
.tombol-bahaya:hover { filter: brightness(0.9); background: var(--galat); border-color: var(--galat); color: var(--permukaan); }
.tombol-kecil { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 36px; padding: 0 10px; border-radius: 6px; border: 1.5px solid var(--garis-input); background: var(--permukaan); color: var(--tinta); font: 600 14px/1 var(--sans); cursor: pointer; }
.tombol-kecil:hover:not(:disabled) { background: var(--permukaan-2); border-color: var(--tinta); }
.tombol-kecil:disabled { color: var(--garis-input); border-color: var(--garis); cursor: default; }
a.tombol, a.tombol-sekunder { text-decoration: none; }
.aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kepala-halaman { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.kepala-halaman .aksi { margin-top: 0; }
.kepala-halaman .sub { margin-bottom: 0; }

/* Kartu, ubin, lencana */
.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 22px; box-shadow: var(--bayangan-1); }
.kartu-judul { font-size: 1.25rem; line-height: 1.25; }
.kartu-info { background: var(--permukaan-2); }
.spasi { margin-top: 20px; }
.spasi-besar { margin-top: 20px; }
.pisah { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--garis); }
.petak { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.petak-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }

.warna-1f6f50 { --w: #1f6f50; --wt: #ffffff; } .warna-1d5fa6 { --w: #1d5fa6; --wt: #ffffff; }
.warna-6b3fa0 { --w: #6b3fa0; --wt: #ffffff; } .warna-b5412b { --w: #b5412b; --wt: #ffffff; }
.warna-e0a100 { --w: #e0a100; --wt: #1c2622; } .warna-0b7a7a { --w: #0b7a7a; --wt: #ffffff; }
.warna-b23a66 { --w: #b23a66; --wt: #ffffff; } .warna-5b6770 { --w: #5b6770; --wt: #ffffff; }
.warna-f07c12 { --w: #f07c12; --wt: #1c2622; } .warna-8cc63f { --w: #8cc63f; --wt: #1c2622; }
.titik { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--w, var(--redup)); vertical-align: -1px; box-shadow: 0 0 0 1px #0000002e; flex: none; }
.ubin { flex: none; width: 58px; height: 62px; border-radius: 10px; background: var(--w, #5b6770); color: var(--wt, #ffffff); display: grid; place-content: center; text-align: center; line-height: 1; box-shadow: inset 0 0 0 1px #ffffff26; }
.ubin-bulan { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.ubin-hari { font: 800 27px/1.05 var(--serif); }
.ubin-besar { width: 70px; height: 76px; border-radius: 12px; }
.ubin-besar .ubin-hari { font-size: 33px; }

.lencana { display: inline-block; padding: 2px 9px; border-radius: 6px; border: 1.5px solid transparent; font-size: 13px; font-weight: 600; line-height: 1.5; background: var(--permukaan-2); color: var(--badan); white-space: nowrap; }
.lencana-abu, .lencana-draft { border-color: var(--garis-input); background: transparent; color: var(--badan); }
.lencana-terjadwal { background: var(--info-bg); color: var(--info-teks); }
.lencana-dibatalkan { background: var(--galat-bg); color: var(--galat-teks); }
.lencana-terarsip { background: var(--utama); color: var(--utama-teks); }
.lencana-peringatan { background: var(--peringatan-bg); color: var(--peringatan-teks); }
.notif-lencana { padding: 1px 7px; border-radius: 999px; font-size: 12px; }
/* Di dalam lonceng (ikon saja): lencana pindah jadi bulatan kecil di pojok, bukan mengalir di sebelah teks. */
.notif-bel .notif-lencana { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; line-height: 16px; border: 1.5px solid var(--permukaan); }

.hanya-pembaca-layar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Lonceng notifikasi "berdering": ikonnya bergetar dan membesar sebentar saat dicek berkala dan masih ada yang belum dibaca. */
.notif-bel svg { transform-origin: 50% 15%; }
.notif-bel.dering svg { animation: dering-lonceng 0.7s ease-in-out; }
@keyframes dering-lonceng {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-15deg) scale(1.15); }
  30% { transform: rotate(14deg) scale(1.15); }
  45% { transform: rotate(-10deg) scale(1.08); }
  60% { transform: rotate(10deg) scale(1.08); }
  80% { transform: rotate(-4deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .notif-bel.dering svg { animation: none; } }

/* Pesan */
.pesan { border-radius: 10px; padding: 12px 16px; margin: 0 0 20px; border: 1px solid transparent; }
.pesan-ok { background: var(--info-bg); color: var(--info-teks); border-color: var(--info-teks); }
.pesan-galat { background: var(--galat-bg); color: var(--galat-teks); border-color: var(--galat); }
.pesan-peringatan { background: var(--peringatan-bg); color: var(--peringatan-teks); border-color: var(--peringatan-garis); }
.pesan p:last-child, .pesan ul { margin-bottom: 0; }
.daftar-galat { margin: 4px 0 0; padding-left: 20px; }
.judul + .pesan, .judul + .formulir, .judul + .formulir-lebar { margin-top: 20px; }

/* Formulir */
.formulir { display: grid; gap: 8px; }
.formulir label, .formulir legend { font-size: 14px; font-weight: 600; }
.formulir input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .formulir select, .formulir textarea,
.saring input, .saring select, .bagian textarea {
  font: 400 16px/1.4 var(--sans); min-height: 44px; padding: 9px 12px; width: 100%;
  border: 1.5px solid var(--garis-input); border-radius: 6px; background: var(--permukaan); color: var(--tinta);
}
.formulir input:disabled { background: var(--permukaan-2); color: var(--redup); }
.formulir input[type=file] { font: 400 15px var(--sans); padding: 8px 0; }
.formulir input:focus-visible, .formulir select:focus-visible, .formulir textarea:focus-visible, .saring input:focus-visible, .saring select:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); }
.formulir textarea { resize: vertical; }
.formulir textarea[readonly] { background: var(--permukaan-2); color: var(--badan); }
.formulir .tombol, .formulir .tombol-sekunder { width: auto; justify-self: start; }
.formulir-lebar { max-width: 600px; }
.formulir-rapat { max-width: 860px; }
.dua-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.tiga-kolom { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.dua-kolom > div, .tiga-kolom > div { display: grid; gap: 8px; align-content: start; }
.centang { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500 !important; }
.centang input { width: 20px; height: 20px; min-height: 0; accent-color: var(--utama); flex: none; }
.saring { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.saring input[type=search] { flex: 1 1 220px; width: auto; min-width: 0; }
.saring select { width: auto; }
.saring .centang { min-height: 44px; }

.bagian { border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); padding: 14px 20px 20px; margin: 0 0 16px; display: grid; gap: 8px; min-width: 0; }
.bagian legend { font: 600 1.05rem/1.3 var(--serif); padding: 0 8px; }
.bagian [hidden] { display: none !important; }

/* Tabel */
.gulir { overflow-x: auto; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; }
.gulir-datar { border: 0; border-radius: 0; background: transparent; }
.tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabel th { text-align: left; font-weight: 600; font-size: 14px; color: var(--badan); padding: 12px 16px; border-bottom: 2px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 12px 16px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel tbody tr:hover { background: var(--permukaan-2); }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .redup { color: var(--redup); }
.kosong-tabel { text-align: center; color: var(--redup); padding: 28px 16px !important; }
.coret td:nth-child(3) { text-decoration: line-through; }

/* Rincian */
.rincian { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 14px 0 0; font-size: 15px; }
.rincian dt { color: var(--redup); }
.rincian dd { margin: 0; overflow-wrap: anywhere; }
.teks-panjang { white-space: pre-line; margin: 4px 0 0; }
.daftar-rapi { margin: 8px 0 0; padding-left: 22px; }
.daftar-info { padding-left: 18px; color: var(--badan); font-size: 15px; }
.kode { font: 400 13px/1.6 var(--mono); background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: 8px; padding: 12px; overflow-x: auto; margin: 0; }
.daftar-bersih { list-style: none; margin: 0; padding: 0; }

/* Daftar rapat berbentuk baris (ubin tanggal + judul + status) */
.daftar-baris { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.baris-rapat { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; box-shadow: var(--bayangan-1); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.baris-rapat:hover { border-color: var(--garis-input); transform: translateY(-2px); box-shadow: var(--bayangan-2); }
@media (prefers-reduced-motion: reduce) { .baris-rapat { transition: none; } .baris-rapat:hover { transform: none; } }
.baris-rapat-isi { flex: 1 1 0; min-width: 160px; display: grid; gap: 2px; }
.baris-rapat-judul { font: 600 1.05rem/1.3 var(--serif); color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
a.baris-rapat-judul::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
a.baris-rapat-judul:hover { text-decoration: underline; color: var(--tinta); }
.baris-rapat-meta { font-size: 14px; color: var(--badan); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.baris-rapat-status { flex: none; text-align: right; display: grid; gap: 4px; justify-items: end; }
.baris-rapat.batal { opacity: .72; }
.baris-rapat.batal .baris-rapat-judul { text-decoration: line-through; }
.baris-rapat.terbaca { opacity: .72; }

/* Beranda */
.beranda { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; }
.beranda-utama, .beranda-samping { display: grid; gap: 24px; min-width: 0; }
.bagian-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hari-judul { font: 600 1rem/1.3 var(--sans); color: var(--badan); margin: 18px 0 8px; }
.hari-judul:first-of-type { margin-top: 4px; }
.agenda-baris { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; margin-bottom: 10px; box-shadow: var(--bayangan-1); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.agenda-baris:hover { border-color: var(--garis-input); transform: translateY(-2px); box-shadow: var(--bayangan-2); }
@media (prefers-reduced-motion: reduce) { .agenda-baris { transition: none; } .agenda-baris:hover { transform: none; } }
.agenda-jam { font: 700 1.25rem/1.1 var(--serif); }
.agenda-jam small { display: block; font: 400 13px var(--sans); color: var(--redup); }
.agenda-judul { font: 600 1.05rem/1.3 var(--serif); color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
a.agenda-judul::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
a.agenda-judul:hover { text-decoration: underline; color: var(--tinta); }
.agenda-jenis { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--badan); }
.kosong-blok { padding: 22px; border: 1.5px dashed var(--garis-input); border-radius: 12px; color: var(--badan); }
.kosong-blok p:last-child { margin-bottom: 0; }
.ringkas-hari { color: var(--badan); margin: 6px 0 0; }

/* Halaman detail rapat */
.judul-rapat { display: flex; gap: 18px; align-items: center; }
.judul-rapat > div { min-width: 0; }
.jenis-teks { display: inline-flex; align-items: center; gap: 8px; color: var(--badan); font-size: 15px; margin: 8px 0 0; flex-wrap: wrap; }

/* Kalender */
.kartu-kalender { padding: 14px; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--badan); margin-bottom: 14px; align-items: center; }
.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.kotak { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid #00000030; }
.kotak-libur { background: var(--libur); } .kotak-cuti { background: var(--cuti); } .kotak-lokal { background: var(--lokal); } .kotak-akhir { background: var(--akhir-pekan); }
#kalender { --fc-border-color: var(--garis); --fc-today-bg-color: var(--utama-tint); --fc-page-bg-color: var(--permukaan);
  --fc-neutral-bg-color: var(--permukaan-2); --fc-list-event-hover-bg-color: var(--permukaan-2);
  --fc-button-bg-color: var(--permukaan); --fc-button-text-color: var(--tinta); --fc-button-border-color: var(--garis-input);
  --fc-button-hover-bg-color: var(--permukaan-2); --fc-button-hover-border-color: var(--tinta);
  --fc-button-active-bg-color: var(--utama); --fc-button-active-border-color: var(--utama);
  --fc-event-border-color: transparent; font-size: 15px; color: var(--tinta); }
#kalender a { color: inherit; text-decoration: none; }
#kalender .fc-toolbar-title { font: 600 1.4rem var(--serif); letter-spacing: -0.01em; }
#kalender .fc-button { font: 600 14px var(--sans); text-transform: none; box-shadow: none; min-height: 40px; }
#kalender .fc-button-primary:not(:disabled).fc-button-active, #kalender .fc-button-primary:not(:disabled):active { color: var(--utama-teks); }
#kalender .fc-button:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; box-shadow: none; }
#kalender .fc-col-header-cell-cushion, #kalender .fc-daygrid-day-number { padding: 6px 8px; }
#kalender .fc-daygrid-day-number:hover, #kalender .fc-col-header-cell-cushion:hover { text-decoration: underline; }
#kalender .fc-day-sat, #kalender .fc-day-sun { background: var(--akhir-pekan); }
#kalender .fc-day-sat .fc-daygrid-day-number, #kalender .fc-day-sun .fc-daygrid-day-number, #kalender .fc-col-header-cell.fc-day-sat a, #kalender .fc-col-header-cell.fc-day-sun a { color: var(--galat); }
#kalender .fc-day-other .fc-daygrid-day-number { color: var(--redup); }
#kalender .hari-libur .fc-daygrid-day-number, #kalender .fc-col-header-cell.hari-libur a { color: var(--galat); }
#kalender .fc-bg-event { opacity: 1; }
#kalender .libur-nasional { background: var(--libur); }
#kalender .libur-cuti-bersama { background: var(--cuti); }
#kalender .libur-instansi { background: var(--lokal); }
#kalender .fc-bg-event .fc-event-title { color: var(--libur-teks); font-size: 12px; font-weight: 600; font-style: normal; padding: 3px 34px 3px 6px; line-height: 1.25; }
#kalender .fc-h-event, #kalender .fc-daygrid-block-event .fc-event-main { border-radius: 6px; }
#kalender .fc-daygrid-dot-event { padding: 3px 4px; border-radius: 6px; }
#kalender .fc-daygrid-dot-event .fc-event-title { font-weight: 600; }
#kalender .rapat { cursor: pointer; box-shadow: inset 0 0 0 1px #ffffff2b; }
#kalender .status-draft { border: 2px dashed currentColor !important; opacity: .9; }
#kalender .status-dibatalkan { opacity: .55; text-decoration: line-through; }
#kalender .fc-list-event-title a { font-weight: 600; }

/* Notula, foto */
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.foto-item { margin: 0; display: grid; gap: 6px; align-content: start; }
.foto-kecil { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--garis); background: var(--permukaan-2); }
.foto-item figcaption { overflow-wrap: anywhere; font-size: 13px; color: var(--redup); }
.formulir textarea.isi { min-height: 96px; }

/* Widget agenda dan peserta */
.baris-widget, .peserta-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.baris-widget input { flex: 1 1 200px; min-width: 0; }
.baris-widget input.kecil { flex: 0 0 96px; }
.nomor { color: var(--redup); font-size: 14px; min-width: 28px; }
.daftar-peserta { list-style: none; margin: 8px 0 0; padding: 0; }
.peserta-item { padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan-2); }
.peserta-item .identitas { flex: 1 1 200px; display: grid; min-width: 0; overflow-wrap: anywhere; }
.peserta-item .manual { flex: 1 1 260px; display: grid; gap: 6px; }
.peserta-item .jabatan-rapat { flex: 1 1 220px; min-width: 0; }
.formulir .peserta-item select { width: auto; }
.hasil-cari { display: grid; gap: 6px; margin: 6px 0; }
.hasil-item { text-align: left; font: inherit; min-height: 44px; border: 1.5px solid var(--garis-input); background: var(--permukaan); color: var(--tinta); border-radius: 8px; padding: 8px 12px; cursor: pointer; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hasil-item:hover { background: var(--permukaan-2); border-color: var(--tinta); }
.peringatan-bentrok { display: grid; gap: 8px; }
.peringatan-bentrok p { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 15px; border: 1px solid transparent; }
.peringatan-bentrok .keras { background: var(--galat-bg); color: var(--galat-teks); border-color: var(--galat); }
.peringatan-bentrok .lunak { background: var(--peringatan-bg); color: var(--peringatan-teks); border-color: var(--peringatan-garis); }

/* Palet warna jenis rapat */
.palet { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.palet legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.pilih-warna { display: flex !important; align-items: center; gap: 10px; min-height: 44px; font-weight: 500 !important; padding: 6px 12px; border: 1.5px solid var(--garis-input); border-radius: 8px; background: var(--permukaan); cursor: pointer; }
.pilih-warna:has(input:checked) { border-color: var(--utama); box-shadow: 0 0 0 1px var(--utama); }
.pilih-warna input { width: 18px; height: 18px; min-height: 0; accent-color: var(--utama); }

/* Halaman polos: galat */
.polos { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }

/* Halaman masuk: PENGECUALIAN SENGAJA dari seluruh sistem token di atas (satu halaman saja, atas permintaan pemilik
   eksplisit "keluar dari tema ubin, pop retro") — warna di bawah ini FIXED, tidak lewat var(--tema), tidak berubah
   ikut var(--tinta)/data-tema="gelap". Rincian dan alasan penuh ada di DESIGN.md > "Pengecualian: halaman login". */
.masuk {
  min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, #ff6f9160 0%, transparent 42%),
    radial-gradient(circle at 84% 18%, #ffcf6685 0%, transparent 38%),
    radial-gradient(circle at 55% 92%, #ff477e50 0%, transparent 46%),
    linear-gradient(155deg, #2e1065 0%, #5c1f92 48%, #a3267a 78%, #d9506b 100%);
}
.masuk-kartu {
  position: relative; z-index: 1; width: min(100% - 8px, 440px);
  background: rgba(255, 255, 255, 0.93); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 2px solid #ffffffb3; border-radius: 24px; padding: 40px 36px;
  box-shadow: 10px 10px 0 #2e1065, 0 30px 60px -24px #2e1065a0;
}
.masuk-marka { display: flex; justify-content: center; margin-bottom: 4px; }
.masuk-tanda { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #ff477e, #ffcf66); box-shadow: inset 0 0 0 1px #ffffff60; }
/* Logo yang diunggah instansi, menggantikan .masuk-tanda bawaan di atas - dibuat lebih besar
   drpd tandanya (bukan cuma aksen kecil lagi) supaya jelas terlihat di halaman masuk. */
.masuk-tanda-img { width: 160px; height: auto; max-height: 160px; object-fit: contain; }
.masuk-instansi { text-align: center; font-weight: 700; font-size: 0.78rem !important; letter-spacing: 0.05em; text-transform: uppercase; color: #a3267a; margin: 0 !important; }
.masuk-nama { text-align: center; color: #2e1065; font: 800 2.1rem/1.05 var(--sans); letter-spacing: -0.02em; margin: 6px 0 8px; }
.masuk-tagline { text-align: center; color: #5c1f92; font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.masuk-garis { border: none; border-top: 1.5px dashed #d9506b55; margin: 0 0 20px; }
.masuk-label { text-align: center; font-size: 1rem; font-weight: 700; color: #2e1065; margin: 0 0 18px; }
.masuk-formulir { gap: 16px; }
.masuk-formulir .aksi { justify-content: center; }
.masuk-formulir label { color: #2e1065 !important; }
.masuk-formulir input { background: #ffffff !important; border-color: #a3267a4d !important; color: #2e1065 !important; }
.masuk-formulir input:focus-visible { outline-color: #2e1065 !important; border-color: #d9506b !important; }
.masuk-medan { position: relative; display: flex; align-items: center; }
.masuk-medan .masuk-ikon { position: absolute; left: 13px; color: #a3267a; pointer-events: none; }
.masuk-medan input { padding-left: 42px !important; }
.masuk-formulir .tombol { background: #d81159; border-color: #d81159; color: #ffffff; border-radius: 999px; font-weight: 700; box-shadow: 4px 4px 0 #2e1065; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.masuk-formulir .tombol:hover { background: #c00e4d; border-color: #c00e4d; color: #ffffff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #2e1065; }
.masuk-formulir .tombol:active { transform: translate(0, 0); box-shadow: 2px 2px 0 #2e1065; }
.masuk-kartu :focus-visible { outline: 3px solid #2e1065; outline-offset: 2px; }
.masuk-kartu .pesan-galat { background: #fde8ec; color: #a0122e; border-color: #d9506b55; }
.masuk-bantuan { text-align: center; color: #5c1f92; font-size: 13px; margin: 24px 0 0; }
@media (max-width: 480px) {
  .masuk-kartu { padding: 30px 22px; box-shadow: 6px 6px 0 #2e1065, 0 20px 40px -20px #2e1065a0; }
}
.kartu-tengah { width: min(100% - 32px, 420px); margin: auto; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 32px 28px; }
.kode-mono { font: 700 3rem/1 var(--serif); margin: 0 0 8px; }

/* Layar sempit: menu terlipat, grid menyusun, kontrol tetap 44px */
@media (max-width: 980px) {
  .beranda { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .tombol.menu-tombol { display: inline-flex; margin-left: auto; }
  .akun-blok { flex-basis: 100%; margin-left: 0; justify-content: flex-end; flex-wrap: wrap; row-gap: 8px; }
  .menu { display: none; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 8px; border-top: 1px solid var(--garis); }
  .menu.terbuka { display: flex; }
  .menu > a, .menu summary { min-height: 48px; }
  .menu a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--utama); border-radius: 8px; }
  .kelola-isi { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
}
@media (max-width: 640px) {
  .isi { padding: 20px 16px 48px; }
  .bilah-isi { padding: 8px 16px; }
  .agenda-baris { grid-template-columns: 64px minmax(0, 1fr); }
  .agenda-baris .agenda-jenis { grid-column: 2; }
  .baris-rapat { flex-wrap: wrap; }
  .baris-rapat-status { flex-basis: 100%; grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 8px; }
  .kartu { padding: 18px; }
  .rincian { grid-template-columns: 1fr; gap: 2px; }
  .rincian dt { margin-top: 8px; }
  .judul-rapat { align-items: flex-start; }
  #kalender .fc-toolbar { flex-direction: column; gap: 8px; }
}

/* Kaca (glass), sebagai AKSEN pada dua elemen saja: bilah atas (desktop) dan menu Kelola.
   Alasan: keduanya lapisan yang mengambang di atas isi yang bergulir, jadi tembus pandang menunjukkan bahwa halaman
   berlanjut di bawahnya. Kartu, tabel, dialog, dan formulir sengaja tetap solid (batas 1-2 elemen, DESIGN.md).
   Kepekatan 72% dipilih dari perhitungan kontras terburuk di atas semua latar yang mungkin berada di belakangnya (kertas, kartu, delapan warna jenis, tint kalender): teks kedua tetap >= 4,8:1 (terang) dan 4,9:1 (gelap). Bilah dan menu tidak memuat teks berwarna hijau utama.
   Tanpa dukungan backdrop-filter, atau saat pemakai meminta transparansi dikurangi, tampil solid seperti sebelumnya. */
.bilah .merek-instansi { color: var(--badan); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* Kaca bilah ada di ::before, bukan di .bilah: elemen ber-backdrop-filter menjadi "backdrop root" bagi anaknya,
     sehingga menu Kelola di dalamnya tidak akan mengaburkan isi halaman kalau .bilah sendiri yang dikaburkan. */
  @media (min-width: 861px) {
    .bilah { position: sticky; top: 0; z-index: 30; background: transparent; border-bottom: 0; }
    .bilah::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kaca);
      -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid var(--kaca-garis); box-shadow: inset 0 1px 0 var(--kaca-tepi), 0 10px 28px -12px var(--kaca-bayangan); }
  }
  .kelola-isi { background: var(--kaca); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    border-color: var(--kaca-garis); box-shadow: inset 0 1px 0 var(--kaca-tepi), 0 16px 40px -8px var(--kaca-bayangan); }
}
@media (prefers-reduced-transparency: reduce) {
  .bilah::before, .kelola-isi { background: var(--permukaan); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bilah { background: var(--permukaan); }
}
@media (max-width: 860px) {
  .kelola-isi { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
}
@media (forced-colors: active) {
  .bilah, .bilah::before, .kelola-isi { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Kehadiran dan arsip */
.tabel-hadir td { vertical-align: middle; }
.tabel-hadir select, .tabel-hadir input { min-width: 150px; }
.daftar-centang { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 6px; }
.daftar-centang li { display: flex; gap: 10px; align-items: baseline; }
.daftar-centang .tanda { flex: none; width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-content: center; font-weight: 700; font-size: 14px; }
.daftar-centang .ada .tanda { background: var(--utama); color: var(--utama-teks); }
.daftar-centang .belum .tanda { background: var(--permukaan-2); color: var(--redup); border: 1.5px solid var(--garis-input); }
.tombol:disabled { background: var(--permukaan-2); border-color: var(--garis); color: var(--redup); cursor: not-allowed; }
.formulir select:disabled, .formulir input:disabled { background: var(--permukaan-2); color: var(--badan); border-color: var(--garis); cursor: not-allowed; opacity: 1; }
@media (max-width: 640px) {
  .tabel-hadir thead { display: none; }
  .tabel-hadir, .tabel-hadir tbody, .tabel-hadir tr, .tabel-hadir td { display: block; width: 100%; }
  .tabel-hadir tr { padding: 12px 4px; border-bottom: 1px solid var(--garis); }
  .tabel-hadir td { border: 0; padding: 4px 12px; }
  .tabel-hadir td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; color: var(--redup); margin-bottom: 2px; }
  .tabel-hadir select, .tabel-hadir input { width: 100%; }
}
.pratinjau-ttd { display: inline-block; max-width: 100%; margin: 8px 0; padding: 12px; border: 1px dashed var(--garis); border-radius: 10px; background: #fff; }
.pratinjau-ttd img { display: block; max-width: 100%; max-height: 140px; }
.kelompok-pilihan { border: 1px solid var(--garis); border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
.kelompok-pilihan legend { padding: 0 6px; font-weight: 600; }
.sub-judul { font-size: 1.05rem; margin: 20px 0 8px; }
.bahan-paket { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; counter-reset: bahan; }
.bahan-paket li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); counter-increment: bahan; }
.bahan-paket li::before { content: counter(bahan); min-width: 1.6em; text-align: right; font-weight: 700; color: var(--redup); font-variant-numeric: tabular-nums; }
.bahan-paket li.diseret { opacity: 0.45; border-style: dashed; }
.bahan-paket .pegangan { cursor: grab; color: var(--redup); font-size: 18px; line-height: 1; user-select: none; }
.bahan-paket .centang { flex: 1; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bahan-paket .geser { display: inline-flex; gap: 4px; flex: none; }