/* Plus Jakarta Sans — huruf variabel, satu berkas untuk seluruh ketebalan.
   Berkasnya disimpan di dalam proyek, bukan ditautkan ke server Google, supaya
   tampilan tetap benar ketika internet bermasalah, termasuk saat sidang.
   Lisensi SIL Open Font License 1.1. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/font/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --huruf: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Skala ukuran huruf.
     Sebelumnya ada enam belas ukuran berbeda yang tumbuh seadanya — .875,
     .88, .9, dan .92 dipakai berdampingan padahal mata tidak bisa
     membedakannya. Kini hanya tiga, dan tiap tingkat punya alasan:

       --ukuran        isi utama
       --ukuran-kecil  keterangan, label, dan tautan navigasi
       --ukuran-mikro  hanya tempat yang benar-benar sempit, yaitu label
                       navigasi bawah dan sel kalender

     Namanya berawalan "ukuran", bukan "teks", karena --teks sudah dipakai
     untuk warna tulisan. Dua variabel bernama sama membuat yang belakangan
     menimpa yang duluan, dan font-size akan berisi kode warna.

     Judul tidak memakai skala ini; ukurannya menyesuaikan lebar layar. */
  --ukuran: 1rem;
  --ukuran-kecil: .875rem;
  --ukuran-mikro: .78rem;         /* dinaikkan sedikit setelah akar 87,5% */
  /* Navy dan emas tetap menjadi identitas gereja, tetapi kini dipakai
     sebagai aksen, bukan sebagai bidang lebar. Hierarki dibangun dari
     permukaan bertingkat dan bayangan tipis. */
  --utama: #551620;
  --utama-muda: #75242f;
  --utama-lembut: #f2e7e8;   /* navy yang sangat diencerkan, untuk keadaan terpilih */
  --aksen: #d9a441;          /* emas cerah; pasangan tulisannya navy, bukan hitam */
  --aksen-tua: #9d7220;      /* untuk tulisan emas di atas latar terang */
  --aksen-lembut: #fdf4e2;

  /* Kelabu dicondongkan ke biru mengikuti navy. Kelabu netral murni
     membuat halaman terasa seperti cetakan hitam-putih. */
  --latar: #f3f3f2;
  --putih: #ffffff;
  --permukaan-2: #f9f9f8;    /* permukaan kedua: kepala tabel, bilah alat */
  --teks: #201d1e;
  --teks-redup: #67615f;
  --garis: #e7e6e4;
  --garis-tegas: #d5d3d0;

  /* Lengkung dan bayangan dipusatkan agar seluruh kotak sebentuk. */
  --lengkung: 14px;
  --lengkung-kecil: 9px;
  --bayang: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --bayang-naik: 0 6px 18px rgba(16,24,40,.08);

  /* Turunan warna utama. Dikumpulkan di sini supaya penggantian palet
     cukup menyentuh satu blok, bukan berburu warna yang tersebar. */
  --utama-terang: #7c2833;              /* puncak gradasi blok ayat */
  --utama-a: 85, 22, 32;                /* warna utama sebagai komponen RGB */
  --utama-gelap-a: 34, 9, 14;          /* lapisan gelap hero, sebagai komponen RGB */
  --aktif-latar: #f3e5e6;               /* halaman aktif pada penomoran */
  --minggu-latar: #fbf6f6;              /* kolom Minggu pada kalender */
  --fokus-cincin: rgba(117, 36, 47, .18);
  --mendesak-latar: #fdf9ee;            /* baris Perlu Tindakan yang mendesak */
  --bahaya-tepi: #f4d3c3;
  --kelabu: #55504e;                    /* label netral, dipakai kabar duka */
  --kelabu-latar: #ebeae9;
  --duka-tepi: #857f7c;
  --isian-samar: #a09b98;               /* tulisan petunjuk di dalam medan */

  /* Warna keadaan diredam: yang lama terlalu pekat untuk dipakai
     berulang-ulang di sepanjang tabel. */
  --hijau: #2f6b3f;
  --hijau-latar: #e9f2ea;
  --kuning: #8a5a06;
  --kuning-latar: #fbf1dc;
  --merah: #c53f15;         /* jingga-merah: sengaja jauh dari marun identitas */
  --merah-latar: #fdeee6;
  --biru: #2a5aa8;
  --biru-latar: #e9eefa;
  --ungu: #6b3fa0;                      /* kepemimpinan gereja */
  --ungu-latar: #f0eaf8;
}

* { box-sizing: border-box; }

/* Seluruh ukuran huruf diperkecil dua piksel dari bawaan peramban.

   Diturunkan dari akarnya, bukan satu per satu pada tiap aturan: hampir
   seluruh ukuran di berkas ini ditulis dalam rem, sehingga satu angka di
   sini menggeser semuanya sekaligus dan perbandingan antar ukuran tetap
   terjaga. Mengurangi dua piksel pada tiap aturan justru merusak
   perbandingannya — dua piksel terasa jauh lebih besar pada label kecil
   daripada pada judul.

   16px bawaan menjadi 14px. Yang ditulis dalam piksel sengaja dibiarkan:
   tinggi minimum medan isian dan lebar sasaran sentuh tidak boleh ikut
   menyusut, dan medan isian di ponsel harus tetap 16px agar iOS tidak
   memperbesar halaman sendiri saat medan itu disentuh. */
html { font-size: 87.5%; }

body {
  margin: 0;
  font-family: var(--huruf);
  background: var(--latar);
  color: var(--teks);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Judul dirapatkan sedikit: pada huruf geometris, jarak bawaan antar huruf
   terasa renggang di ukuran besar. */
h1, h2, h3 { letter-spacing: -.015em; text-wrap: balance; }

.wadah { width: min(1140px, 92vw); margin-inline: auto; padding-block: 1.5rem; }

/* Navigasi */
.navbar {
  background: var(--utama); color: var(--putih);
  position: relative; z-index: 10;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.18);
}
.navbar-isi { display: flex; align-items: center; gap: 1.25rem; padding-block: .7rem; }

/* Merek: lambang + nama gereja */
.merek {
  display: flex; align-items: center; gap: .7rem; flex-shrink: 0;
  color: var(--putih); text-decoration: none;
}
/* Lambang HKBP berorientasi tegak (581x857), jadi tingginya yang dikunci dan
   lebarnya mengikuti. Mengunci keduanya ke 40px akan memipihkan lambang. */
.merek-logo { display: block; height: 40px; width: auto; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.15; }
.merek-teks strong { font-size: var(--ukuran); font-weight: 700; letter-spacing: -.01em; }
.merek-teks small { font-size: var(--ukuran-mikro); color: rgba(255,255,255,.62); }
.merek:hover .merek-teks strong { color: var(--aksen); }
.merek:focus-visible { outline: 2px solid var(--aksen); outline-offset: 3px; border-radius: 6px; }

/* Menu utama */
.menu { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.menu-tautan { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.menu-tautan a {
  display: block; padding: .5rem .62rem; border-radius: 6px;
  color: rgba(255,255,255,.86); text-decoration: none;
  font-size: var(--ukuran-kecil); white-space: nowrap; border-bottom: 2px solid transparent;
}
.menu-tautan a:hover { background: var(--utama-muda); color: var(--putih); }
.menu-tautan a.aktif {
  color: var(--aksen); font-weight: 600;
  border-bottom-color: var(--aksen); border-radius: 6px 6px 0 0;
}
.menu-tautan a:focus-visible { outline: 2px solid var(--aksen); outline-offset: -2px; }

/* Aksi akun dipisahkan garis, supaya tidak terbaca sebagai bagian navigasi */
.menu-akun {
  display: flex; align-items: center; gap: .5rem;
  padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.18);
}
.tautan-akun {
  color: rgba(255,255,255,.86); text-decoration: none; font-size: var(--ukuran-kecil);
  padding: .45rem .6rem; border-radius: 6px; white-space: nowrap;
}
.tautan-akun:hover { background: var(--utama-muda); color: var(--putih); }
.tombol-masuk {
  background: var(--aksen); color: var(--utama); font-weight: 600;
  padding: .45rem 1.05rem; border-radius: 6px; text-decoration: none;
  font-size: var(--ukuran-kecil); white-space: nowrap;
}
.tombol-masuk:hover { filter: brightness(1.08); }
/* Logout dibuat timbul di atas bilah, bukan sekadar bergaris tepi samar.
   Ia satu-satunya tautan di sana yang mengubah keadaan pengguna, dan
   sebelumnya justru yang paling tidak terlihat. */
.tombol-keluar {
  color: #fff; text-decoration: none; font-size: var(--ukuran-kecil);
  font-weight: 600; padding: .45rem .95rem; border-radius: var(--lengkung-kecil);
  white-space: nowrap;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.18);
  transition: background .15s ease, border-color .15s ease;
}
.tombol-keluar:hover {
  background: var(--aksen); border-color: var(--aksen); color: var(--utama);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 2px 4px rgba(0,0,0,.2);
}
.tautan-akun:focus-visible, .tombol-masuk:focus-visible, .tombol-keluar:focus-visible {
  outline: 2px solid var(--aksen); outline-offset: 2px;
}

/* Teks yang hanya dibacakan pembaca layar */
.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;
}

/* Navigasi bawah disembunyikan di desktop; dinyalakan oleh kueri media ponsel */
.nav-bawah { display: none; }

/* Pengalih antar halaman bersaudara di bawah satu tab */
.segmen {
  display: flex; gap: .25rem; margin-bottom: 1.25rem;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: 10px; padding: .28rem;
}
.segmen a {
  flex: 1; text-align: center; padding: .6rem .7rem; border-radius: 7px;
  text-decoration: none; color: var(--ink, var(--teks)); font-weight: 500;
  font-size: var(--ukuran-kecil); min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.segmen a:hover { background: var(--latar); }
.segmen a.aktif { background: var(--utama); color: var(--putih); font-weight: 600; }
.segmen a:focus-visible { outline: 2px solid var(--aksen); outline-offset: -2px; }

/* Spanduk judul ibadah, dipakai di beranda dan halaman Jadwal Ibadah */
.spanduk-ibadah {
  text-align: center; padding: 1.5rem 1rem; margin-bottom: 1.25rem;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 12px;
}
.spanduk-judul {
  margin: 0; font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 800;
  letter-spacing: .01em; text-transform: uppercase; color: var(--utama);
}
.spanduk-minggu {
  margin: .35rem 0 0; font-size: clamp(.78rem, 2.4vw, .95rem); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teks-redup);
}

/* Daftar petugas ibadah */
.daftar-petugas { display: grid; gap: .1rem; margin: .5rem 0 0; }
.daftar-petugas > div {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--line-soft, var(--garis));
}
.daftar-petugas > div:last-child { border-bottom: 0; }
.daftar-petugas dt {
  flex: 0 0 38%; font-size: var(--ukuran-kecil); font-weight: 600; color: var(--teks-redup);
}
.daftar-petugas dd { margin: 0; font-weight: 500; }
.daftar-petugas .belum { color: var(--teks-redup); font-weight: 400; font-style: italic; }

/* Kartu identitas gereja */
.kartu-gereja {
  background: var(--putih); border: 1px solid var(--garis); border-radius: 12px;
  padding: 1.75rem clamp(1rem, 4vw, 2rem); margin-top: 2.5rem; text-align: center;
}
.gereja-nama {
  margin: 0 0 1.25rem; font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 800; color: var(--utama); letter-spacing: .04em; text-transform: uppercase;
}
.gereja-foto { margin-bottom: 1.5rem; }
.gereja-foto img {
  width: 100%; max-width: 520px; height: auto; border-radius: 12px;
  border: 1px solid var(--garis);
}
.gereja-kontak {
  display: flex; flex-direction: column; gap: .9rem;
  max-width: 460px; margin-inline: auto; text-align: left;
}
.gereja-baris { display: flex; gap: .9rem; align-items: flex-start; }
.gereja-baris svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--utama); margin-top: .1rem; }
.gereja-baris a, .gereja-baris span { color: var(--teks); font-weight: 600; text-decoration: none; }
.gereja-baris a:hover { color: var(--utama); text-decoration: underline; }
.gereja-sosial { display: flex; justify-content: center; gap: .6rem; margin-top: 1.5rem; flex-wrap: wrap; }
.gereja-sosial a {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--garis); color: var(--utama);
}
.gereja-sosial a:hover { background: var(--utama); color: var(--putih); border-color: var(--utama); }
.gereja-sosial a:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.gereja-sosial svg { width: 22px; height: 22px; }
.gereja-belum { color: var(--teks-redup); font-size: var(--ukuran-kecil); }

/* Kartu sesi ibadah yang dapat dibuka-tutup.
   Memakai <details> bawaan HTML, bukan JavaScript: tetap dapat dibuka bila
   skrip gagal dimuat, dan sudah benar untuk pembaca layar tanpa perlu diatur. */
.daftar-sesi { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 2rem; }

details.sesi {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: 12px; overflow: hidden;
}
details.sesi[open] { border-color: var(--utama); box-shadow: 0 2px 10px rgba(var(--utama-a), .08); }

details.sesi summary {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.1rem; min-height: 64px; cursor: pointer;
  list-style: none; font-weight: 700;
}
details.sesi summary::-webkit-details-marker { display: none; }
details.sesi summary:hover { background: var(--latar); }
details.sesi summary:focus-visible { outline: 2px solid var(--aksen); outline-offset: -3px; }

.sesi-ikon {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--latar);
  /* Cincin dalam, bukan tepi luar, supaya lebar kotak tidak berubah saat sesi
     dibuka. Pergeseran satu piksel pada baris ringkasan terbaca sebagai
     goyangan ketika accordion membuka. */
  box-shadow: inset 0 0 0 1px var(--garis);
  transition: box-shadow .18s ease;
}
.sesi-ikon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Latar navy tidak dipakai lagi di sini: ilustrasinya berlatar terang, jadi
   kotak gelap di belakangnya hanya akan tampak sebagai ubin putih. Sesi yang
   sedang terbuka ditandai cincin berwarna utama. */
details.sesi[open] .sesi-ikon { box-shadow: inset 0 0 0 2px var(--utama); }

.sesi-nama {
  flex: 1; min-width: 0; font-size: var(--ukuran); letter-spacing: .01em;
  text-transform: uppercase; color: var(--utama);
}
.sesi-jam {
  font-family: ui-monospace, monospace; font-size: var(--ukuran-kecil); font-weight: 600;
  color: var(--teks-redup); font-variant-numeric: tabular-nums;
}
.sesi-panah {
  width: 10px; height: 10px; flex-shrink: 0;
  border-right: 2px solid var(--teks-redup); border-bottom: 2px solid var(--teks-redup);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
details.sesi[open] .sesi-panah { transform: rotate(225deg) translate(-2px, -2px); }

.sesi-isi { padding: 0 1.1rem 1.2rem; border-top: 1px solid var(--line-soft, var(--garis)); }
.sesi-isi h3 {
  font-size: var(--ukuran-kecil); text-transform: uppercase; letter-spacing: .1em;
  color: var(--teks-redup); margin: 1.2rem 0 .4rem;
}

.daftar-berkas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.daftar-berkas a {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .75rem .9rem; min-height: 48px;
  border: 1px solid var(--garis); border-radius: 9px;
  text-decoration: none; color: var(--teks); font-weight: 600;
}
.daftar-berkas a:hover { border-color: var(--utama); color: var(--utama); }
.daftar-berkas a:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.daftar-berkas small { color: var(--teks-redup); font-weight: 400; }

@media (prefers-reduced-motion: reduce) { .sesi-panah { transition: none; } }

/* Judul bagian dengan lencana jumlah, dipakai di halaman Tentang */
.judul-bagian { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 .85rem; }
.judul-bagian .jumlah {
  font-family: ui-monospace, monospace; font-size: var(--ukuran-kecil); font-weight: 600;
  padding: .1rem .55rem; border-radius: 999px;
  background: var(--garis); color: var(--teks-redup);
}

/* Kartu pelayan */
.daftar-pelayan { display: flex; flex-direction: column; gap: .7rem; }
.kartu-pelayan {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem; background: var(--putih);
  border: 1px solid var(--garis); border-radius: 12px;
}
.pelayan-inisial {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--utama); color: var(--aksen);
  font-weight: 700; font-size: var(--ukuran); letter-spacing: .02em;
}
.pelayan-teks { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pelayan-teks strong { font-size: var(--ukuran); }
.pelayan-teks small { color: var(--teks-redup); font-size: var(--ukuran-kecil); }

/* Daftar nama pelayan pada halaman Tentang.
   Dua kolom di layar lebar agar daftar panjang tidak memanjang ke bawah;
   satu kolom di ponsel supaya nama tidak terpotong. */
.daftar-nama {
  margin: .5rem 0 0; padding-left: 1.4rem;
  columns: 2; column-gap: 2rem;
}
.daftar-nama li {
  padding: .35rem 0; break-inside: avoid;
  border-bottom: 1px solid var(--line-soft, var(--garis));
}
@media (max-width: 640px) { .daftar-nama { columns: 1; } }

/* Kartu jam ibadah pada halaman Tata Ibadah */
.kartu-sesi {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 1rem; min-height: 68px;
  border: 1px solid var(--garis); border-radius: 10px;
  background: var(--putih); text-decoration: none; color: var(--teks);
}
.kartu-sesi:hover { border-color: var(--utama); }
.kartu-sesi strong { font-size: var(--ukuran); color: var(--utama); font-variant-numeric: tabular-nums; }
.kartu-sesi span { font-size: var(--ukuran-kecil); color: var(--teks-redup); }
.kartu-sesi.aktif { background: var(--utama); border-color: var(--utama); }
.kartu-sesi.aktif strong { color: var(--aksen); }
.kartu-sesi.aktif span { color: rgba(255,255,255,.78); }
.kartu-sesi:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

/* Menu daftar untuk halaman Akun di ponsel */
.daftar-menu { display: flex; flex-direction: column; gap: .1rem; }
.daftar-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem .25rem; min-height: 48px;
  border-bottom: 1px solid var(--line-soft, var(--garis));
  text-decoration: none; color: var(--teks); font-weight: 500;
}
.daftar-menu a:last-child { border-bottom: 0; }
.daftar-menu a:hover { color: var(--utama); }
.daftar-menu a::after { content: "›"; color: var(--teks-redup); font-size: 1.3rem; line-height: 1; }
.daftar-menu a.bahaya { color: var(--merah); }

/* Tombol */
/* Tombol bawaan bersifat tenang. Sebelumnya setiap tombol berlatar navy
   pekat, sehingga satu tabel dengan dua puluh baris menghasilkan empat
   puluh bidang gelap — dan tidak satu pun di antaranya menonjol. */
.tombol {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: var(--lengkung-kecil);
  border: 1px solid var(--garis-tegas);
  background: var(--putih); color: var(--teks); text-decoration: none;
  font: inherit; font-size: var(--ukuran-kecil); font-weight: 600;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.tombol:hover { background: var(--permukaan-2); border-color: var(--utama-muda); }

/* Satu tindakan utama per layar memakai warna pekat; sisanya tenang. */
.tombol-utama {
  background: var(--utama); border-color: var(--utama); color: var(--putih);
}
.tombol-utama:hover { background: var(--utama-muda); border-color: var(--utama-muda); }
.tombol-aksen {
  background: var(--aksen); border-color: var(--aksen);
  color: var(--utama); font-weight: 700;
}
.tombol-aksen:hover { filter: brightness(1.06); border-color: var(--aksen); }

/* Tindakan merusak ditulis merah, bukan dibanjiri merah. Warna penuhnya
   baru muncul saat kursor berada di atasnya, tepat sebelum ditekan. */
.tombol-bahaya {
  background: var(--putih); border-color: var(--bahaya-tepi); color: var(--merah);
}
.tombol-bahaya:hover {
  background: var(--merah); border-color: var(--merah); color: var(--putih);
}
.tombol-sunyi { background: var(--permukaan-2); color: var(--teks-redup); }
.tombol-sunyi:hover { background: var(--garis); color: var(--teks); }
.tombol:focus-visible {
  outline: 2px solid var(--utama-muda); outline-offset: 2px;
}

/* Kartu */
.kartu {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--lengkung); padding: 1.35rem;
  margin-bottom: 1rem; box-shadow: var(--bayang);
}
.kisi { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Tabel — digulung di dalam wadahnya sendiri agar halaman tidak ikut bergeser */
.wadah-tabel {
  overflow-x: auto; background: var(--putih);
  border-radius: var(--lengkung); border: 1px solid var(--garis);
  box-shadow: var(--bayang);
}
.tabel { width: 100%; border-collapse: collapse; min-width: 720px; }
.tabel th, .tabel td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--garis); }
.tabel tbody tr:last-child td { border-bottom: 0; }
/* Isi sel dirapatkan ke atas, bukan ke tengah.
   Sebagian sel memuat baris kedua — jam di bawah tanggal, nomor anggota di
   bawah nama — sehingga tingginya berbeda-beda. Dengan rata tengah, tulisan
   pada kolom sebelahnya ikut turun naik mengikuti sel tertinggi, dan seluruh
   tabel terbaca miring walau tidak ada yang salah tempat. */
.tabel td { vertical-align: top; }

/* Kepala tabel tidak lagi berupa bidang navy pekat. Bidang gelap selebar
   tabel menarik perhatian ke label kolom, padahal yang perlu dibaca adalah
   isinya. Kini permukaan kedua dengan tulisan kecil beruang huruf. */
.tabel th {
  background: var(--permukaan-2); color: var(--teks-redup);
  font-weight: 700; font-size: var(--ukuran-mikro);
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--garis-tegas);
  /* Nama kolom rata tengah. Isi selnya tetap rata kiri: nama dan alamat
     lebih mudah dipindai bila semuanya mulai dari tepi yang sama. */
  text-align: center;
}
.tabel tbody tr:hover { background: var(--permukaan-2); }

/* Label status */
.label {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  font-size: var(--ukuran-mikro); font-weight: 700; letter-spacing: .03em;
  /* Sengaja tidak nowrap. Pil panjang seperti "PA Remaja & Naposobulung"
     tidak dapat dipatahkan dalam bentuk kartu, dan mendorong seluruh
     halaman melebar pada layar 320 piksel. */
}
.label-hijau  { background: var(--hijau-latar);  color: var(--hijau); }
.label-kuning { background: var(--kuning-latar); color: var(--kuning); }
.label-merah  { background: var(--merah-latar);  color: var(--merah); }
.label-biru   { background: var(--biru-latar);   color: var(--biru); }
.label-ungu   { background: var(--ungu-latar);   color: var(--ungu); }

/* Formulir */
.medan { margin-bottom: 1rem; }
.medan label { display: block; font-weight: 600; margin-bottom: .3rem; }
.medan input, .medan select, .medan textarea {
  width: 100%; padding: .62rem .75rem; border: 1px solid var(--garis-tegas);
  border-radius: var(--lengkung-kecil); font: inherit; background: var(--putih);
  color: var(--teks); transition: border-color .15s ease, box-shadow .15s ease;
}
.medan input::placeholder, .medan textarea::placeholder { color: var(--isian-samar); }

/* Cincin fokus dibuat menyatu dengan tepi medan, bukan garis kaku di
   luarnya, supaya tinggi barisnya tidak berubah saat dipilih. */
.medan input:focus, .medan select:focus, .medan textarea:focus {
  outline: 0; border-color: var(--utama-muda);
  box-shadow: 0 0 0 3px var(--fokus-cincin);
}
/* 220px hanya memuat tiga medan pada lebar panel admin, sehingga medan
   keempat turun sendirian dan meninggalkan dua kolom kosong di sampingnya.
   190px memuat empat, dan barisnya habis rata. align-items: start menjaga
   medan pendek tidak ikut memanjang mengikuti medan yang berketerangan. */
.baris-medan {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Keterangan kecil di bawah medan. Sebelumnya <small> polos, yang mewarisi
   tebal huruf label di atasnya dan terbaca sebagai label kedua. */
.medan > small {
  display: block; margin-top: .3rem; font-weight: 400;
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
}

/* Kotak centang.
   Tanpa ini kotaknya terkena aturan .medan input { width: 100% } dan
   membentang selebar formulir — kotak centang selebar layar, dengan
   tulisannya terlempar ke baris berikutnya. */
/* Ditulis .medan .saklar, bukan .saklar saja: .medan label lebih spesifik
   dan display: block miliknya akan menang, membuat kotak centang menumpuk
   di atas tulisannya alih-alih berjajar. */
/* Lebarnya dibatasi. Membentang selebar formulir, satu kotak centang
   dengan satu baris keterangan meninggalkan ruang kosong memanjang di
   kanannya, dan kotak itu terbaca seperti bidang yang belum selesai. */
.saklar,
.medan .saklar {
  max-width: 44rem;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .85rem; margin: 0;
  border: 1px solid var(--garis); border-radius: var(--lengkung-kecil);
  background: var(--permukaan-2); cursor: pointer;
  font-weight: 400;
  transition: border-color .15s ease, background .15s ease;
}
.saklar:hover, .medan .saklar:hover { border-color: var(--utama-muda); background: var(--utama-lembut); }
.saklar input[type="checkbox"],
.medan .saklar input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin: .1rem 0 0;
  accent-color: var(--utama); cursor: pointer;
}
.saklar-teks { display: block; min-width: 0; }
.saklar-teks strong, .medan .saklar-teks strong { display: block; font-weight: 600; }
.saklar-teks small {
  display: block; margin-top: .15rem;
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
}

/* Beberapa saklar berdampingan pada layar lebar, menumpuk pada ponsel. */
.saklar-kisi {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.saklar-kisi > * { min-width: 0; }

/* Flash */
.flash { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 4px solid; }
.flash-sukses { background: var(--hijau-latar); color: var(--hijau); border-color: var(--hijau); }
.flash-galat  { background: var(--merah-latar); color: var(--merah); border-color: var(--merah); }

/* Paginasi */
/* ------------------------------------------------- Penomoran halaman
   Bilah ringkas di dasar daftar: lompat ke awal, mundur, nomor, maju,
   lompat ke akhir, lalu pemilih jumlah baris. Diletakkan di tengah agar
   terbaca sebagai satu kesatuan, bukan sebagai deretan tautan lepas. */
.paginasi {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--garis);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.paginasi-tombol {
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  justify-content: center;
}

.paginasi-lompat, .paginasi-nomor {
  min-width: 34px; height: 34px; padding: 0 .4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; text-decoration: none;
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
  background: none; border: 0;
}
.paginasi-lompat { font-size: 1rem; line-height: 1; }
.paginasi-lompat:hover, .paginasi-nomor:hover { background: var(--latar); color: var(--utama); }

/* Tombol yang tidak berlaku tetap digambar tetapi diredupkan, supaya lebar
   bilah tidak berubah setiap kali berpindah halaman. */
.paginasi-lompat.mati { color: var(--garis); background: none; cursor: default; }

.paginasi-nomor.aktif {
  background: var(--aktif-latar); color: var(--utama); font-weight: 700;
}

.paginasi-per { display: inline-flex; align-items: center; margin-left: .4rem; }
.paginasi-per select {
  height: 34px; padding: 0 1.6rem 0 .6rem;
  font-size: var(--ukuran-kecil); border-radius: 6px;
}

.paginasi-jumlah {
  margin: 0; font-size: var(--ukuran-mikro); color: var(--teks-redup);
}
/* Halaman login dua kolom */
.login-kisi { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-kiri {
  background: var(--utama); color: var(--putih);
  display: flex; flex-direction: column; justify-content: center; padding: 3rem;
}
.login-kiri h1 { color: var(--aksen); margin-bottom: .5rem; }
.login-kanan { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-kotak { width: min(400px, 100%); }

.galat { text-align: center; padding-block: 4rem; }

footer.kaki { background: var(--utama); color: var(--putih); margin-top: 3rem; }
footer.kaki .wadah { padding-block: 1.5rem; }
.kaki-isi { display: flex; gap: 1.5rem 2.5rem; flex-wrap: wrap; align-items: flex-start; }
.kaki-merek { flex: 1 1 260px; font-size: var(--ukuran-kecil); color: rgba(255,255,255,.72); }
.kaki-merek strong { color: var(--putih); font-size: var(--ukuran); }
.kaki-tautan { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: flex-start; }
.kaki-tautan a {
  color: rgba(255,255,255,.8); text-decoration: none; font-size: var(--ukuran-kecil);
  padding: .45rem .3rem; min-height: 44px; display: inline-flex; align-items: center;
}
.kaki-tautan a:hover { color: var(--aksen); text-decoration: underline; }
.kaki-tautan a:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

@media (max-width: 720px) {
  .kaki-isi { flex-direction: column; gap: .9rem; }

  /* Lebar-dasar 260px pada .kaki-merek ditulis untuk susunan mendatar di
     layar lebar. Ketika susunannya berubah menurun, angka itu berpindah
     arti menjadi TINGGI — satu baris tulisan dipaksa setinggi 260 piksel
     dan meninggalkan ruang kosong 245 piksel sebelum tautannya. */
  .kaki-merek { flex: 0 0 auto; }
  /* Tanpa garis pemisah. Jarak antar barisnya sudah cukup memisahkan, dan
     enam garis berjajar membuat kaki halaman terlihat seperti tabel. */
  .kaki-tautan { flex-direction: column; gap: .1rem; width: 100%; align-items: stretch; }
  .kaki-tautan a { width: 100%; min-height: 40px; }
}

/* ============================================================
   TAMPILAN PONSEL
   Sekitar 80% pengguna sistem ini adalah jemaat yang membukanya lewat ponsel,
   sehingga di bawah lebar ini navigasi berpindah ke dasar layar — dalam
   jangkauan ibu jari, bukan di sudut atas.
   ============================================================ */
@media (max-width: 980px) {
  /* Menu atas digantikan sepenuhnya oleh navigasi bawah */
  .menu { display: none; }
  .navbar-isi { padding-block: .6rem; }

  .nav-bawah {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--utama);
    border-top: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 -2px 14px rgba(0,0,0,.22);
    /* Menjaga jarak dari garis home iPhone */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .nav-bawah a {
    flex: 1; min-width: 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; padding: .45rem .15rem;
    color: rgba(255,255,255,.72); text-decoration: none;
    font-size: var(--ukuran-mikro); line-height: 1.2; text-align: center;
  }
  .nav-bawah a.aktif { color: var(--aksen); font-weight: 600; }
  .nav-bawah a:active { background: var(--utama-muda); }
  .nav-bawah a:focus-visible { outline: 2px solid var(--aksen); outline-offset: -3px; }
  .nav-bawah svg { width: 22px; height: 22px; flex-shrink: 0; }

  /* Ruang agar isi halaman tidak tertutup navigasi bawah */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  footer.kaki { margin-bottom: 0; }

  /* iOS memperbesar halaman sendiri ketika kolom isian berukuran di bawah 16px,
     dan tata letak ikut meloncat. Ukuran ini mencegahnya. */
  .medan input, .medan select, .medan textarea { font-size: 16px; min-height: 46px; }
  .medan textarea { min-height: 96px; }

  /* Sasaran ketuk minimum */
  .tombol { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .paginasi a, .paginasi span { min-height: 44px; display: inline-flex; align-items: center; }
  .aksi-baris { flex-wrap: wrap; gap: .5rem; }
  .aksi-baris .tombol { flex: 1; }
}

/* Tabel enam kolom tidak terbaca di layar selebar telapak tangan. Baris diubah
   menjadi kartu bertumpuk, dengan nama kolom diambil dari atribut data-label
   sehingga markup-nya tidak perlu digandakan. */
@media (max-width: 720px) {
  .tabel-kartu { min-width: 0; }
  .tabel-kartu thead { display: none; }
  .tabel-kartu, .tabel-kartu tbody, .tabel-kartu tr, .tabel-kartu td { display: block; width: 100%; }
  .tabel-kartu tr {
    background: var(--putih); border: 1px solid var(--garis);
    border-radius: 10px; margin-bottom: .75rem; padding: .3rem 0;
  }
  .tabel-kartu tr:hover { background: var(--putih); }
  .tabel-kartu td {
    border: 0; display: flex; gap: 1rem; align-items: baseline;
    padding: .42rem .85rem;
    /* Isi sel harus boleh menyusut. Tanpa ini, satu nilai panjang menahan
       lebar kartu, lalu kartu menahan lebar halaman. */
    min-width: 0; flex-wrap: wrap;
  }
  .tabel-kartu td > * { min-width: 0; max-width: 100%; }
  .tabel-kartu td::before {
    content: attr(data-label);
    flex: 0 0 38%; min-width: 0;
    font-size: var(--ukuran-kecil); font-weight: 600; color: var(--teks-redup);
  }
  .tabel-kartu td:only-child::before { display: none; }

  /* Wadah tabel tidak perlu bingkai maupun gulir mendatar dalam bentuk kartu */
  .wadah-tabel:has(.tabel-kartu) { border: 0; background: none; overflow: visible; border-radius: 0; }
}

@media (max-width: 820px) {
  .login-kisi { grid-template-columns: 1fr; min-height: auto; }
  .login-kiri { padding: 2rem; }
  .merek-teks small { display: none; }
}

/* Hero di ponsel.
   Fotonya panorama 3,89:1, sehingga pada layar sempit pemotongan otomatis
   menyisakan bagian tengah — dan gedung gerejanya memang berada di tengah.
   Lapisan gelapnya dibuat menurun dari atas, bukan menyamping seperti di
   desktop, karena tulisan kini menutupi seluruh lebar layar. */
@media (max-width: 720px) {
  .hero {
    background-image:
      linear-gradient(to bottom,
        rgba(var(--utama-gelap-a), .90) 0%,
        rgba(var(--utama-gelap-a), .78) 55%,
        rgba(var(--utama-gelap-a), .88) 100%),
      url("/assets/img/gereja-hero.jpg");
    background-position: 50% 45%;
  }
  .hero .wadah { padding-block: 3rem; }
}

/* Tata letak panel admin */
.admin-kisi { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; align-items: start; }
.sisi-admin {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--lengkung); box-shadow: var(--bayang);
  padding: 1rem .8rem; position: sticky; top: 1rem;
}
.sisi-admin h3 { margin: 0 0 .75rem; color: var(--utama); }
.sisi-admin nav { display: flex; flex-direction: column; gap: .15rem; }
.sisi-admin a {
  padding: .55rem .75rem; border-radius: var(--lengkung-kecil);
  text-decoration: none; color: var(--teks-redup);
  font-size: var(--ukuran-kecil); font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.sisi-admin a:hover { background: var(--permukaan-2); color: var(--teks); }
.sisi-admin a.aktif {
  background: var(--utama-lembut); color: var(--utama); font-weight: 700;
}

.kepala-halaman { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kepala-halaman h1 { margin: 0; margin-right: auto; }
.bilah-saring { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.bilah-saring .medan { margin-bottom: 0; }
.aksi-baris { display: flex; gap: .35rem; }

.profil-kisi { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; align-items: start; }

@media (max-width: 900px) {
  .admin-kisi, .profil-kisi { grid-template-columns: 1fr; }

  /* Menu admin jadi deretan chip yang digeser menyamping.
     Ditumpuk vertikal, sembilan tautan menjadi blok tinggi yang harus
     dilewati dulu setiap kali membuka halaman admin di ponsel. */
  /* min-width nol wajib di sini. Item grid bawaannya min-width:auto, yang
     berarti ia tidak boleh menyusut di bawah lebar isinya - sehingga
     overflow-x pada nav di bawah tidak pernah aktif, dan deretan chip
     justru melebarkan seluruh halaman sampai lebih dari seribu piksel. */
  .sisi-admin { position: static; padding: .55rem; min-width: 0; }
  .sisi-admin h3 { display: none; }
  .sisi-admin nav {
    flex-direction: row; gap: .4rem;
    min-width: 0; max-width: 100%;
    overflow-x: auto; scrollbar-width: none;
  }
  .sisi-admin nav::-webkit-scrollbar { display: none; }
  .sisi-admin a {
    flex: 0 0 auto; white-space: nowrap;
    min-height: 40px; padding: .5rem .9rem;
    display: inline-flex; align-items: center;
    border: 1px solid var(--garis); border-radius: 999px;
    font-size: var(--ukuran-kecil);
  }
  .sisi-admin a.aktif { border-color: var(--utama); }
}

/* Kalender kegiatan */
/* ------------------------------------------------------------- Kalender */

.kalender-bilah {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .7rem;
}
.kalender-judul {
  margin: 0; font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.01em; text-align: center;
}
.kalender-judul span { color: var(--teks-redup); font-weight: 500; }

/* Nama bulan tetangga, bukan "Sebelumnya" dan "Berikutnya": yang ingin
   diketahui sebelum menekan justru bulan mana yang akan dibuka. */
.kalender-nav {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid var(--garis); background: var(--putih);
  color: var(--teks-redup); text-decoration: none;
  font-size: var(--ukuran-kecil); font-weight: 600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.kalender-nav:hover, .kalender-nav:focus-visible {
  border-color: var(--utama-muda); color: var(--utama);
  background: var(--utama-lembut);
}
.kalender-nav [aria-hidden] { font-size: 1.15em; line-height: 1; }

.kalender-lompat {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .45rem; margin-bottom: .9rem;
}
.kalender-lompat select {
  padding: .38rem .6rem; border: 1px solid var(--garis-tegas);
  border-radius: var(--lengkung-kecil); font: inherit;
  font-size: var(--ukuran-kecil); background: var(--putih); color: var(--teks);
}
.kalender-lompat select:focus {
  outline: 0; border-color: var(--utama-muda);
  box-shadow: 0 0 0 3px var(--fokus-cincin);
}
.kalender-lompat .tombol { padding: .38rem .9rem; font-size: var(--ukuran-kecil); }
.kalender-hari-ini-tautan {
  margin-left: auto; font-size: var(--ukuran-kecil);
  font-weight: 600; color: var(--utama);
}

/* Satu bidang utuh dengan garis rambut, bukan 42 kotak berdiri sendiri:
   kisi yang setiap selnya bertepi sendiri terbaca ramai dan tuanya terasa. */
.kalender {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--garis);
  border: 1px solid var(--garis); border-radius: var(--lengkung);
  overflow: hidden;
}
.kalender-kepala {
  background: var(--permukaan-2); text-align: center; padding: .5rem 0;
  color: var(--teks-redup); font-size: var(--ukuran-mikro);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.kalender-sel {
  background: var(--putih); min-height: 92px; min-width: 0;
  padding: .3rem .35rem; display: flex; flex-direction: column; gap: .2rem;
}

/* Kolom Minggu diberi warna sangat tipis. Di gereja, Minggu adalah tiang
   pekannya, dan mata perlu menemukannya tanpa menghitung kolom. */
.kalender-minggu { background: var(--minggu-latar); }

/* Ekor bulan tetangga tetap digambar, samar. Sudut kisi yang kosong
   melompong terbaca sebagai kalender yang belum selesai dimuat. */
.kalender-luar { background: var(--permukaan-2); }
.kalender-luar.kalender-minggu { background: var(--permukaan-2); }
.kalender-luar .kalender-angka { color: var(--isian-samar); font-weight: 500; }

.kalender-angka {
  align-self: flex-start; padding: 0 .3rem; line-height: 1.5;
  font-size: var(--ukuran-kecil); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--teks);
}
.kalender-hari-ini .kalender-angka {
  background: var(--utama); color: #fff; border-radius: 999px;
  min-width: 1.6rem; text-align: center;
}

.kalender-acara { list-style: none; margin: 0; padding: 0; min-width: 0; }
.kalender-acara li {
  font-size: 11px; line-height: 1.45; color: var(--teks-redup);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kalender-lebih {
  font-size: 10px; color: var(--isian-samar); padding-left: .15rem;
}
.kalender-titik {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 4px; vertical-align: middle;
}

.kalender-keterangan {
  display: flex; flex-wrap: wrap; gap: .3rem .95rem; margin: .9rem 0 0;
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
}
.kalender-legenda { display: inline-flex; align-items: center; gap: .35rem; }
.titik-biru { background: var(--biru); }
.titik-kuning { background: var(--kuning); }
.titik-hijau { background: var(--hijau); }

/* Kartu ringkasan dashboard */
.kisi-statistik { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1rem; }
.kartu-statistik { background: var(--utama); color: var(--putih); border-radius: 10px; padding: 1.1rem; text-decoration: none; display: block; }
.kartu-statistik:hover { background: var(--utama-muda); }
.kartu-statistik .angka { font-size: 2rem; font-weight: 700; color: var(--aksen); line-height: 1.1; }
.kartu-statistik .keterangan { font-size: var(--ukuran-kecil); }

/* Hero beranda dengan foto gedung gereja.
   Warna latar tetap dipasang sebagai dasar: bila fotonya gagal dimuat, tulisan
   putih di atasnya masih terbaca alih-alih hilang di latar kosong. */
.hero {
  position: relative;
  color: var(--putih);
  background-color: var(--utama);
  background-image: url("/assets/img/gereja-hero.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* Dua lapisan: satu menaik dari dasar agar tulisan selalu terbaca, satu
   menyamping tipis agar sisi kanan foto tetap terlihat. Sebelumnya satu
   lapisan rata menggelapkan gedung gerejanya sekaligus. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,
      rgba(var(--utama-gelap-a), .92) 0%,
      rgba(var(--utama-gelap-a), .62) 42%,
      rgba(var(--utama-gelap-a), .18) 100%),
    linear-gradient(to right,
      rgba(var(--utama-gelap-a), .55) 0%,
      rgba(var(--utama-gelap-a), .10) 62%);
}
.hero .wadah { padding-block: clamp(3.5rem, 9vw, 6rem) 2.75rem; }
.hero h1 { text-shadow: 0 1px 12px rgba(var(--utama-gelap-a), .5); }
.hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem); margin: 0 0 .6rem;
  line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
}
.hero h1 span { color: var(--aksen); }

@media (max-width: 640px) {
  /* Nama kegiatan disembunyikan, titik warnanya tetap: pada lebar sel
     ponsel namanya hanya menyisakan dua tiga huruf sebelum terpotong. */
  .kalender-sel { min-height: 54px; padding: .25rem; }
  .kalender-acara { display: flex; flex-wrap: wrap; gap: 1px; }
  .kalender-acara li { overflow: visible; }
  .kalender-nama { display: none; }
  .kalender-titik { margin-right: 2px; }
  .kalender-lebih { display: none; }
  .kalender-bilah { flex-wrap: wrap; justify-content: center; }
  .kalender-judul { order: -1; flex: 1 0 100%; }
}

/* ---------------------------------------------------------------- Beranda */

.ayat-harian {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--utama-terang) 0%, var(--utama) 58%);
  color: var(--putih); border-radius: var(--lengkung);
  padding: 1.75rem 1.6rem; margin-bottom: 1.4rem;
  box-shadow: var(--bayang-naik);
}
.ayat-harian blockquote { margin: 0; }
.ayat-harian p {
  margin: 0 0 .8rem; font-size: 1.05rem; line-height: 1.65;
  /* Tanda kutip ditulis di CSS, bukan disimpan bersama ayatnya, supaya isi
     yang diketik pengurus tetap bersih dan tidak berkutip ganda. */
  quotes: "\201C" "\201D";
}
.ayat-harian p::before { content: open-quote; }
.ayat-harian p::after  { content: close-quote; }
.ayat-harian cite {
  display: block; font-style: normal; font-size: var(--ukuran-kecil);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aksen);
}

.ulang-tahun { margin-bottom: 1.4rem; }
.daftar-ultah { list-style: none; margin: 0; padding: 0; }
.daftar-ultah li {
  display: flex; align-items: center; gap: .8rem;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 12px;
  padding: .7rem .9rem; margin-bottom: .5rem;
}
.daftar-ultah li.hari-ini { border-color: var(--aksen); background: var(--mendesak-latar); }
.ultah-inisial {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--latar); color: var(--utama);
  font-size: var(--ukuran-kecil); font-weight: 700;
}
.daftar-ultah li.hari-ini .ultah-inisial { background: var(--aksen); color: var(--utama); }
.ultah-nama { flex: 1; min-width: 0; font-size: var(--ukuran); }
.ultah-nama small { display: block; font-size: var(--ukuran-kecil); color: var(--teks-redup); }
.ultah-tanggal {
  flex-shrink: 0; font-size: var(--ukuran-kecil); color: var(--teks-redup);
  text-align: right;
}
.daftar-ultah li.hari-ini .ultah-tanggal strong { color: var(--utama); }

/* ------------------------------------------------------------ Persembahan */

.persembahan { margin-bottom: 1.4rem; }
.persembahan-catatan {
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
  margin: 0 0 .9rem; line-height: 1.6;
}

.daftar-rekening { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.daftar-rekening li {
  background: var(--putih); border: 1px solid var(--garis); border-radius: 12px;
  padding: .9rem 1rem; margin-bottom: .6rem;
}
.rekening-atas {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem;
}
.rekening-bank {
  font-size: var(--ukuran-kecil); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--teks-redup);
}
.rekening-nomor { display: flex; align-items: center; gap: .6rem; }
.rekening-nomor .nomor {
  flex: 1; min-width: 0; font-family: ui-monospace, monospace;
  font-size: 1.15rem; font-weight: 700; color: var(--utama);
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.rekening-nama {
  margin-top: .3rem; font-size: var(--ukuran-kecil); color: var(--teks-redup);
}

.tombol-salin {
  flex-shrink: 0; min-height: 36px; padding: .4rem .8rem;
  border: 1px solid var(--garis); border-radius: 8px; background: var(--latar);
  color: var(--utama); font-family: inherit; font-size: var(--ukuran-kecil);
  font-weight: 600; cursor: pointer;
}
.tombol-salin:hover { background: var(--garis); }
.tombol-salin.tersalin {
  background: var(--utama); border-color: var(--utama); color: var(--aksen);
}

.kartu-qris {
  margin: 0; padding: 1.1rem; text-align: center;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 12px;
}
.kartu-qris img {
  /* Dibatasi lebarnya, bukan dibiarkan memenuhi kartu: gambar QRIS yang
     terlalu besar justru sulit dipindai dari layar ponsel ke ponsel lain. */
  width: 100%; max-width: 260px; height: auto; border-radius: 8px;
}
.kartu-qris figcaption {
  margin-top: .7rem; font-size: var(--ukuran-kecil); color: var(--teks-redup);
}

/* Label netral untuk kabar duka. Merah sudah dipakai untuk penolakan dan
   kesalahan, dan memakainya di sini akan terbaca sebagai peringatan. */
.label-kelabu { background: var(--kelabu-latar); color: var(--kelabu); }

/* ---------------------------------------------------------------- Galeri */

.saring-galeri { display: flex; gap: .45rem; overflow-x: auto; margin-bottom: 1rem; }
.saring-galeri::-webkit-scrollbar { display: none; }
.saring-galeri a {
  flex: 0 0 auto; padding: .5rem .95rem; border: 1px solid var(--garis);
  border-radius: 999px; background: var(--putih); color: var(--teks-redup);
  text-decoration: none; font-size: var(--ukuran-kecil); font-weight: 600;
  min-height: 40px; display: inline-flex; align-items: center;
}
.saring-galeri a.aktif { background: var(--utama); border-color: var(--utama); color: var(--putih); }

.kisi-galeri {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.kartu-galeri {
  margin: 0; background: var(--putih); border: 1px solid var(--garis);
  border-radius: 12px; overflow: hidden;
}
.kartu-galeri > a { display: block; line-height: 0; }
.kartu-galeri img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  /* Latar diberi warna supaya kartu tetap berbentuk ketika gambar gagal
     dimuat — sampul video diambil dari server YouTube, yang tidak terjangkau
     saat sambungan internet mati. */
  background: var(--latar);
}
.sampul-video { position: relative; }
.tanda-putar {
  position: absolute; inset: 0; margin: auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(var(--utama-a), .82);
}
.tanda-putar::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(2px);
}
.kartu-galeri figcaption {
  padding: .6rem .7rem .7rem; display: flex; flex-direction: column; gap: .15rem;
}
.kartu-galeri figcaption strong { font-size: var(--ukuran-kecil); color: var(--utama); }
.galeri-tanggal, .galeri-keterangan {
  font-size: var(--ukuran-mikro); color: var(--teks-redup); line-height: 1.5;
}
.galeri-beranda { margin-bottom: 1.4rem; }
.galeri-selengkapnya { margin: .9rem 0 0; }

/* ------------------------------------------------------- Warta peristiwa */

.peristiwa { margin-bottom: 1.4rem; }
.daftar-peristiwa { list-style: none; margin: 0; padding: 0; }
.daftar-peristiwa li {
  background: var(--putih); border: 1px solid var(--garis);
  border-left: 4px solid var(--garis); border-radius: 10px;
  padding: .8rem .9rem; margin-bottom: .55rem;
}
.daftar-peristiwa li.peristiwa-baptis,
.daftar-peristiwa li.peristiwa-malua        { border-left-color: var(--biru); }
.daftar-peristiwa li.peristiwa-martumpol,
.daftar-peristiwa li.peristiwa-pernikahan   { border-left-color: var(--aksen); }
.daftar-peristiwa li.peristiwa-tamba,
.daftar-peristiwa li.peristiwa-pindah       { border-left-color: var(--hijau); }
.daftar-peristiwa li.peristiwa-pandita,
.daftar-peristiwa li.peristiwa-serah_terima { border-left-color: var(--ungu); }
.daftar-peristiwa li.peristiwa-duka         { border-left-color: var(--duka-tepi); }

/* --------------------------------------------------------------- Grafik */
/* Batangnya digambar sebagai SVG di server; berkas ini hanya mewarnai. */
.grafik { margin: 0; }

/* SVG-nya diberi lebar minimum agar angka dan labelnya tidak saling menimpa
   pada layar sempit; yang menggulir wadahnya, bukan halamannya. */
.grafik-gulir { overflow-x: auto; min-width: 0; padding-bottom: .2rem; }
/* Ukurannya sudah dipatok pada atribut width dan height SVG-nya, dalam
   piksel. Dibiarkan meregang mengikuti wadah, huruf di dalamnya ikut
   membesar dan angka di atas batang saling menimpa. */
.grafik-gulir svg { display: block; max-width: none; }

.grafik-batang { fill: var(--utama-muda); }
.grafik-batang:hover { fill: var(--utama); }
.grafik-sumbu { stroke: var(--garis-tegas); stroke-width: 1; }
.grafik-nilai {
  fill: var(--teks); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.grafik-label { fill: var(--teks-redup); font-size: 12px; }

.grafik-angka { margin-top: .7rem; }
.grafik-angka > summary {
  cursor: pointer; font-size: var(--ukuran-kecil); font-weight: 600;
  color: var(--utama); padding: .3rem 0;
}
.grafik-angka > summary:hover { color: var(--utama-terang); }

/* Tabel rapat dipakai di dalam kartu sempit: tanpa lebar minimum 720px,
   karena isinya cuma dua kolom dan tidak perlu digulir. */
.tabel-rapat { min-width: 0; }
.tabel-rapat th, .tabel-rapat td { padding: .45rem .55rem; font-size: var(--ukuran-kecil); }
.tabel-rapat .angka { text-align: right; font-variant-numeric: tabular-nums; }

.kosong-lembut { color: var(--teks-redup); font-style: italic; margin: .2rem 0; }

/* Sel bernilai pendek dan seragam — kode wijk, nomor, satu pil status —
   dirata-tengahkan mengikuti nama kolomnya. Sel bernilai panjang seperti
   nama dan alamat tetap rata kiri: keduanya dipindai dari tepi yang sama. */
.tabel td.sel-tengah { text-align: center; }

/* Deretan pil, misalnya daftar sesi yang berkasnya belum diunggah. */
.daftar-pil { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }

/* ------------------------------------------------------- Pemilih kolom */
/* Bilahnya rata kanan, tepat di atas tabel yang diaturnya — sejajar dengan
   tepi kanan tabel, bukan mengambang sendiri di tengah. */
.bilah-kolom {
  display: flex; justify-content: flex-end;
  margin: 0 0 .6rem;
}

/* Pemicunya tombol berlabel, bukan bujur sangkar berisi lambang seperti menu
   tindakan: yang ini jarang dicari, jadi namanya perlu terbaca. Tingginya
   disamakan dengan tombol lain agar sebarisan bila berdampingan. */
/* Ditulis dua kelas sekaligus: blok pemilih kolom berada lebih dulu di berkas
   ini daripada .menu-aksi-pemicu, sehingga dengan satu kelas saja ukuran
   bujur sangkar milik menu tindakan yang menang — dan lambang serta panahnya
   tumpah ke luar tombol. */
.menu-aksi-pemicu.pemicu-kolom {
  width: auto; height: auto; gap: .5rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: var(--ukuran-kecil); font-weight: 600;
  color: var(--teks);
}
.menu-aksi-pemicu.pemicu-kolom .ikon { color: var(--teks-redup); }
.menu-aksi-pemicu.pemicu-kolom:hover .ikon { color: var(--utama); }

/* Segitiga kecil penanda bahwa tombol ini membuka sesuatu. */
.panah-kolom {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .55;
  transition: transform .15s ease;
}
.menu-kolom[open] .panah-kolom { transform: rotate(180deg); }

/* Hanya angkanya; kata "disembunyikan" membuat tombolnya memanjang dan
   justru menarik perhatian lebih daripada tabel yang diaturnya. */
.lencana-kolom {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  background: var(--utama); color: #fff; border-radius: 999px;
  font-size: var(--ukuran-mikro); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "Pilih Semua" berada di atas daftar, bukan berdesakan dengan Terapkan di
   kaki: ia jalan pintas, bukan tindakan utama. */
.menu-kolom-semua {
  display: block; margin: 0 0 .3rem; padding: .35rem;
  font-size: var(--ukuran-kecil); font-weight: 600;
  color: var(--utama); text-decoration: none; border-radius: 7px;
}
.menu-kolom-semua:hover { background: var(--utama-lembut); }
.menu-kolom-isi { min-width: 13rem; padding: .55rem; }
.menu-kolom-judul {
  margin: 0 0 .35rem; padding: 0 .25rem;
  font-size: var(--ukuran-mikro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teks-redup);
}
.menu-kolom-butir {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .35rem; border-radius: 7px; cursor: pointer;
  font-size: var(--ukuran-kecil); font-weight: 500;
}
.menu-kolom-butir:hover { background: var(--utama-lembut); color: var(--utama); }
.menu-kolom-butir input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: 0;
  accent-color: var(--utama); cursor: pointer;
}
.menu-kolom-kaki {
  display: flex; gap: .4rem; margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--garis);
}
.menu-kolom-kaki .tombol { flex: 1; justify-content: center; font-size: var(--ukuran-kecil); }
@media (max-width: 720px) {
  /* Pada mode kartu, sel kembali sejajar label di kirinya. */
  .tabel-kartu td.sel-tengah { text-align: left; }
}

/* Petunjuk singkat di bawah sebuah medan isian. */
.petunjuk-medan {
  display: block; margin-top: .3rem;
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
}

/* Kalimat pengantar di dalam kartu, di bawah judulnya. */
.kartu-catatan {
  margin: -.3rem 0 1rem; color: var(--teks-redup);
  font-size: var(--ukuran-kecil); max-width: 60ch;
}

/* Dibedakan dari angka nol: kosong berarti belum ada yang mencatat. */
.belum-dicatat { color: var(--teks-redup); font-style: italic; }

/* Tiga tabel rekap peran berdampingan pada layar lebar, menumpuk pada ponsel.
   min-width: 0 dipasang karena butir kisi bawaannya tidak boleh menyusut di
   bawah lebar isinya, dan tabel di dalamnya akan mendorong halaman melebar. */
.rekap-peran {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rekap-peran > * { min-width: 0; }
.rekap-peran h3 { margin: 0 0 .4rem; font-size: 1rem; }

.ringkas-sisa {
  margin: .9rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--garis);
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
}
.ringkas-sisa strong { color: var(--teks); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Tabel penggunaan gedung */
/* Kolom aksinya memuat kotak catatan dan tiga tombol sekaligus. Tanpa lebar
   yang dipatok, kolom itu memakan ruang sampai nama kegiatan terpecah menjadi
   tiga baris, dan tabelnya terlihat berat sebelah. */
.tabel-gedung .kolom-aksi { width: 11.5rem; }
/* Ketiga tombol boleh turun ke baris berikutnya. Tanpa itu lebar terkecil
   kolom ini adalah ketiganya berjajar, dan tabelnya melebihi lebar kartu
   sehingga tombol paling kanan terpotong. */
.tabel-gedung .aksi-baris { flex-wrap: wrap; }
/* Tanggal dijaga tetap satu baris: "12 September" yang patah dari "2026"
   terbaca sebagai dua tanggal berbeda sekilas pandang. */
.tabel-gedung td:nth-child(3) { white-space: nowrap; }
.tabel-gedung th:first-child, .tabel-gedung td:first-child { min-width: 10rem; }

/* Kotak catatan dan deretan tombol ditumpuk dengan jarak sendiri, bukan
   memakai .medan yang jarak bawahnya disiapkan untuk formulir. */
.aksi-keputusan { display: flex; flex-direction: column; gap: .5rem; }
.aksi-keputusan .isian-catatan { width: 100%; margin: 0; }

/* Baris yang sudah diputuskan tetap memakai wadah yang sama, supaya tinggi
   dan tepi atasnya sejajar dengan baris yang masih menunggu. */
.aksi-selesai { color: var(--teks-redup); font-size: var(--ukuran-kecil); }
.aksi-catatan { display: inline-block; margin-top: .25rem; font-style: italic; }

/* Teks yang hanya dibacakan pembaca layar. Tidak memakai display: none —
   yang disembunyikan begitu ikut hilang dari pembacaan. */
.tersembunyi-mata {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Baris yang ditunjuk tautan dari dashboard.
   Tanpa penanda, "Proses" menurunkan pengurus ke tengah daftar tanpa
   memberi tahu pengajuan mana yang tadi ditekan. */
.tabel tbody tr:target {
  background: var(--aksen-lembut);
  box-shadow: inset 3px 0 0 var(--aksen);
}
.tabel tbody tr:target:hover { background: var(--aksen-lembut); }

/* Identitas jemaat: nama beserta nomor anggota dan jenis kelaminnya.
   Ketiganya milik satu orang dan dibaca sekaligus; dipecah tiga kolom,
   mata harus menyeberang tabel untuk merangkainya kembali. */
.identitas-baris strong { font-weight: 600; }
.identitas-rinci {
  display: block; margin-top: .1rem;
  font-size: var(--ukuran-kecil); color: var(--teks-redup);
  font-variant-numeric: tabular-nums;
}

/* Tombol pencarian pada bilah daftar: lambang kaca pembesar mendampingi
   tulisannya, supaya tidak lagi terbaca sebagai tombol muat ulang. */
.tombol-cari { display: inline-flex; align-items: center; gap: .4rem; }
.tombol-cari svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* ------------------------------------------------------- Menu tindakan */
/* Lambang garis mengikuti ukuran dan warna tulisan di sekitarnya. */
.ikon { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.menu-aksi { position: relative; display: inline-block; }

/* Segitiga bawaan <summary> dibuang; yang tampak hanya titik tiganya. */
.menu-aksi > summary { list-style: none; }
.menu-aksi > summary::-webkit-details-marker { display: none; }
.menu-aksi > summary::marker { content: ''; }

.menu-aksi-pemicu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: var(--lengkung-kecil);
  border: 1px solid var(--garis); background: var(--putih);
  color: var(--teks-redup); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.menu-aksi-pemicu:hover {
  border-color: var(--utama-muda); color: var(--utama);
  background: var(--utama-lembut);
}
.menu-aksi-pemicu:focus-visible {
  outline: 0; border-color: var(--utama-muda);
  box-shadow: 0 0 0 3px var(--fokus-cincin);
}
.menu-aksi[open] > .menu-aksi-pemicu {
  border-color: var(--utama-muda); color: var(--utama);
  background: var(--utama-lembut);
}

/* Bentuk dasarnya mengalir di dalam sel dan melebarkan barisnya. Boros
   ruang, tetapi tidak pernah terpotong oleh apa pun — dan itulah yang
   diterima peramban lama, ponsel, serta halaman yang tabelnya benar-benar
   lebih lebar daripada kartunya. Bentuk mengambangnya menyusul di bawah. */
.menu-aksi-isi {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: .4rem; padding: .3rem;
  min-width: 11rem; width: max-content;
  background: var(--putih);
  border: 1px solid var(--garis-tegas);
  border-radius: var(--lengkung-kecil);
  box-shadow: 0 10px 26px rgba(var(--utama-gelap-a), .16);
}

/* Bentuk mengambang, dipakai pada layar lebar.

   Yang memotong panel adalah overflow pada wadah tabel, jadi overflow itu
   yang dimatikan — bukan panelnya yang diakali dengan position: fixed dan
   perhitungan letak. Seluruh tabel panel admin sudah diukur muat persis
   pada lebar kartunya di layar lebar, sehingga wadahnya memang tidak
   pernah menggulir di sana; yang benar-benar butuh menggulir hanyalah
   layar sempit, dan di sana tabelnya sudah berubah menjadi kartu.

   Dibungkus @supports selector(:has(*)): pada peramban yang belum
   mengenal :has(), aturan overflow-nya tidak akan berlaku, dan panel
   mengambang di dalam wadah yang masih memotong akan terpenggal. Lebih
   baik keduanya tidak berlaku sekalian, dan panel tetap mengalir. */
@supports selector(:has(*)) {
  @media (min-width: 900px) {
    .wadah-tabel:has(.menu-aksi) { overflow: visible; }

    .menu-aksi-isi {
      position: absolute; top: 100%; right: 0; z-index: 60;
    }
  }
}

.menu-aksi-butir {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; border: 0; border-radius: 7px;
  background: none; color: var(--teks); text-decoration: none;
  font: inherit; font-size: var(--ukuran-kecil); font-weight: 500;
  text-align: left; width: 100%; cursor: pointer; white-space: nowrap;
}
.menu-aksi-butir:hover, .menu-aksi-butir:focus-visible {
  background: var(--utama-lembut); color: var(--utama); outline: 0;
}
.menu-aksi-butir .ikon { color: var(--teks-redup); }
.menu-aksi-butir:hover .ikon, .menu-aksi-butir:focus-visible .ikon { color: var(--utama); }

/* Hapus diberi warna merah hanya pada tulisannya, bukan bidang penuh: satu
   bidang merah di dalam menu menarik mata ke tindakan yang paling jarang
   dan paling tidak dapat dibatalkan. */
.menu-aksi-bahaya { color: var(--merah); }
.menu-aksi-bahaya .ikon { color: var(--merah); }
.menu-aksi-bahaya:hover, .menu-aksi-bahaya:focus-visible {
  background: var(--merah-latar); color: var(--merah);
}
.menu-aksi-bahaya:hover .ikon, .menu-aksi-bahaya:focus-visible .ikon { color: var(--merah); }

/* Formulir pembungkus tombol tidak boleh menambah jarak sendiri. */
.menu-aksi-isi form { margin: 0; display: contents; }

/* Kolom aksi cukup selebar satu tombol, bukan selebar deretan tombol.
   Inilah yang selama ini membuat kolom nama terhimpit. */
.tabel th.kolom-tindakan, .tabel td.kolom-tindakan {
  width: 1%; white-space: nowrap; text-align: center;
}

/* Pada mode kartu, tombolnya berdiri di kanan label "Aksi" seperti nilai
   kolom lain, dan panelnya kembali mengalir supaya tidak menutupi kartu. */
@media (max-width: 720px) {
  /* Lebar 1% dan rata tengah milik mode tabel harus dibatalkan di sini:
     pada mode kartu, sel selebar 1% membuat tombolnya terdorong turun ke
     baris sendiri, terpisah dari label "Aksi" di sebelahnya. */
  .tabel-kartu td.kolom-tindakan {
    width: 100%; text-align: left;
    justify-content: space-between; align-items: center;
  }
}
.peristiwa-nama { font-size: var(--ukuran); font-weight: 600; color: var(--utama); }
.peristiwa-rinci {
  margin-top: .2rem; font-size: var(--ukuran-kecil); color: var(--teks-redup);
}
.peristiwa-keterangan {
  margin: .45rem 0 0; font-size: var(--ukuran-kecil); line-height: 1.6;
}

/* ------------------------------------------------- Panel admin: menu & dasbor */

.sisi-kelompok {
  display: block; margin: .9rem .2rem .25rem;
  font-size: var(--ukuran-mikro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teks-redup);
}

.perlu-tindakan { margin-bottom: 1.2rem; }
.perlu-tindakan ul { list-style: none; margin: 0; padding: 0; }
.perlu-tindakan li {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--putih); border: 1px solid var(--garis);
  border-left: 4px solid var(--teks-redup); border-radius: 10px;
  padding: .75rem .9rem; margin-bottom: .5rem;
}
/* Yang mendesak diberi tepi kuning, bukan merah: ini pekerjaan yang menunggu,
   bukan kesalahan yang terjadi. */
.perlu-tindakan li.mendesak { border-left-color: var(--aksen); background: var(--mendesak-latar); }
.tindakan-teks { flex: 1; min-width: 12rem; font-size: var(--ukuran); }
.perlu-tindakan .tombol { flex-shrink: 0; }


@media (max-width: 900px) {
  /* Judul kelompok disembunyikan bersama judul panel: pada deretan chip yang
     digeser menyamping, label kelompok justru memutus alirannya. */
  .sisi-kelompok { display: none; }
}

/* ------------------------------------------------------------ Bilah daftar */

.bilah-daftar {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--lengkung); box-shadow: var(--bayang);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
/* Medan pencarian mengambil sisa ruang; saringan dan jumlah baris cukup
   selebar isinya. Tanpa ini ketiganya berbagi rata dan kotak pencarian
   menjadi terlalu sempit untuk membaca apa yang sedang diketik. */
.bilah-daftar .medan-cari { flex: 1 1 15rem; min-width: 0; }
.bilah-daftar .medan { flex: 0 0 auto; margin: 0; min-width: 8rem; }
.bilah-daftar label {
  display: block; margin-bottom: .25rem;
  font-size: var(--ukuran-mikro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--teks-redup);
}
.bilah-daftar input, .bilah-daftar select { width: 100%; }
.bilah-aksi { display: flex; gap: .45rem; flex: 0 0 auto; }

/* Tombol sekunder: hadir tanpa bersaing dengan tindakan utama di sebelahnya. */
.tombol-sunyi {
  background: var(--latar); color: var(--teks); border: 1px solid var(--garis);
}
.tombol-sunyi:hover { background: var(--garis); }

@media (max-width: 620px) {
  /* Di ponsel bilah menumpuk penuh selebar layar. Dibiarkan menyamping,
     kotak pencarian menyusut sampai hanya muat tiga huruf. */
  .bilah-daftar { flex-direction: column; align-items: stretch; }
  .bilah-daftar .medan, .bilah-daftar .medan-cari { flex: 1 1 auto; width: 100%; }
  .bilah-aksi { width: 100%; }
  .bilah-aksi .tombol { flex: 1; justify-content: center; }
}

/* Tombol aksi dalam tabel tidak dipenggal di tengah kata. "Non-aktifkan" yang
   terbelah dua baris membuat tinggi tiap baris tabel berbeda-beda. */
.aksi-baris .tombol { white-space: nowrap; }

/* Formulir yang jarang dipakai dilipat: pada halaman gedung, tugas utamanya
   memutuskan pengajuan yang masuk, bukan mencatat yang baru. Formulir terbuka
   akan mendorong daftar keputusan turun dari layar pertama. */
.kartu-lipat > summary {
  cursor: pointer; list-style: none; padding: .2rem 0;
  color: var(--utama); font-size: var(--ukuran);
}
.kartu-lipat > summary::-webkit-details-marker { display: none; }
.kartu-lipat > summary::before {
  content: "+ "; font-weight: 700; color: var(--aksen);
}
.kartu-lipat[open] > summary::before { content: "− "; }

/* --------------------------------------------- Kepala tabel yang diurutkan */

.tabel th.urut { padding: 0; }
.tabel th.urut > a {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .7rem .75rem; color: inherit; text-decoration: none;
  white-space: nowrap;
}
.tabel th.urut > a:hover { background: var(--utama-lembut); color: var(--utama); }

.ikon-urut {
  font-size: .68em; line-height: 1;
  /* Panah kosong dibuat samar, bukan disembunyikan: kolom yang dapat diurutkan
     harus terlihat begitu sebelum disentuh, sedangkan panahnya tidak boleh
     bersaing dengan nama kolomnya sendiri. */
  opacity: .45;
}
/* Kolom yang sedang diurutkan tidak diberi warna berbeda. Yang menandainya
   hanya bentuk panahnya: kembar bila belum dipakai, naik atau turun bila
   sedang aktif. Panah aktif dibuat pekat penuh, tetapi warnanya tetap sama
   dengan tulisan di sebelahnya. */
.tabel th.urut.aktif .ikon-urut { opacity: 1; }

@media (max-width: 720px) {
  /* Dalam bentuk kartu, kepala tabel disembunyikan seluruhnya, sehingga
     pengurutan tidak dapat dijangkau dari sana. Bilah pengurut terpisah di
     bawah menggantikannya. */
  .tabel th.urut > a { padding: .55rem .6rem; }
}

.urut-ponsel { display: none; }

@media (max-width: 720px) {
  .urut-ponsel {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-bottom: .8rem;
  }
  .urut-ponsel .keterangan {
    font-size: var(--ukuran-mikro); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--teks-redup); width: 100%;
  }
  .urut-ponsel a {
    padding: .4rem .75rem; border: 1px solid var(--garis); border-radius: 999px;
    background: var(--putih); color: var(--teks-redup);
    text-decoration: none; font-size: var(--ukuran-kecil);
    min-height: 36px; display: inline-flex; align-items: center; gap: .3rem;
  }
  .urut-ponsel a.aktif {
    background: var(--utama); border-color: var(--utama); color: var(--putih);
  }
}

/* Tautan di bawah tabel cuplikan dasbor. */
.cuplikan-lanjut {
  margin: .9rem 0 0; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.cuplikan-lanjut small { color: var(--teks-redup); font-size: var(--ukuran-kecil); }

/* ------------------------------------------------------------ Angka tabel

   Plus Jakarta Sans memberi angka lebar yang berbeda-beda, dan selisihnya
   besar: pada 40 piksel, "11111" hanya selebar 74 piksel sedangkan "00000"
   mencapai 146. Di dalam tabel, tanggal, nomor telepon, dan ukuran berkas
   jadi tampak bergoyang dari baris ke baris, dan kolom angka kehilangan
   gunanya — yaitu bisa dibandingkan sekilas dari atas ke bawah.

   Angka lebar-sama sengaja dipasang pada sel tabel saja, bukan pada seluruh
   halaman: pada kalimat biasa, angka proporsional justru lebih enak dibaca. */
.tabel td, .tabel th { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ Remah roti */

.remah {
  max-width: 1180px;
  margin: 0 auto;
  padding: .9rem clamp(1rem, 4vw, 1.5rem) 0;
}
.remah ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  font-size: var(--ukuran-kecil);
}
.remah li { display: inline-flex; align-items: center; gap: .3rem; }
.remah a {
  color: var(--teks-redup); text-decoration: none;
  padding: .15rem .1rem; border-radius: 4px;
}
.remah a:hover { color: var(--utama); text-decoration: underline; }
.remah a:focus-visible { outline: 2px solid var(--utama-muda); outline-offset: 2px; }
.remah [aria-current="page"] { color: var(--teks); font-weight: 600; }
.remah-pisah { color: var(--garis-tegas); }

@media (max-width: 720px) {
  /* Di ponsel jejaknya digulung menyamping, bukan dipatahkan ke baris kedua:
     dua baris remah memakan ruang yang seharusnya milik judul halaman. */
  .remah { padding-top: .7rem; }
  .remah ol {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    font-size: var(--ukuran-mikro);
  }
  .remah ol::-webkit-scrollbar { display: none; }
  .remah li { white-space: nowrap; }
}

/* ------------------------------------------------- Penahan lebar kisi admin

   Item kisi bawaannya tidak boleh menyusut di bawah lebar isi terlebarnya.
   Akibatnya satu tabel lebar di dalam <main> memaksa seluruh kolom melebar,
   dan menu di sebelahnya ikut teregang melewati tepi layar — meski menu itu
   sendiri sudah diberi min-width nol.

   Diukur pada 320 piksel: jalur kisinya 331,6 piksel padahal wadahnya hanya
   294. Menahan kedua itemnya di sini memutus rantai itu di pangkalnya. */
.admin-kisi > *, .profil-kisi > * { min-width: 0; }

/* Wadah yang menggulung isinya sendiri tetap perlu ditahan: overflow-x saja
   tidak menghapus sumbangan lebar-minimumnya kepada kisi di atasnya. */
.wadah-tabel { min-width: 0; }

/* --------------------------------------------------------------- Tautan

   Tautan biasa di luar komponen sebelumnya memakai biru bawaan peramban
   beserta garis bawahnya — warna yang tidak ada di mana pun lagi pada situs
   ini, sehingga tampak seperti sisa halaman lain yang tidak sengaja terbawa. */
a { color: var(--utama-muda); text-decoration-color: var(--garis-tegas); }
a:hover { text-decoration-color: currentColor; }

/* Komponen yang mengatur warnanya sendiri tidak ikut diubah. */
.tombol, .tombol-masuk, .tombol-keluar, .tautan-akun,
.sisi-admin a, .remah a, .paginasi a, .segmen a, .saring-galeri a,
.urut-ponsel a, .tabel th.urut > a, .nav-bawah a, .kaki-tautan a,
.tautan-nav a, .kartu-statistik { text-decoration: none; }

/* ---------------------------------------- Keluar & Masuk di kaki halaman

   Keduanya mengubah keadaan pengguna, bukan sekadar berpindah halaman,
   sehingga tidak pantas tampak sama dengan tautan menu di atasnya. Diberi
   jarak pemisah dan bentuk tombol timbul agar terbaca sebagai tindakan. */
.kaki-akun {
  margin-top: .9rem;
  align-self: flex-start;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .2);
  color: #fff !important;
  font-weight: 600;
  padding-inline: 1.1rem !important;
  transition: background .15s ease, border-color .15s ease;
}
.kaki-akun:hover {
  background: var(--aksen);
  border-color: var(--aksen);
  color: var(--utama) !important;
}

@media (max-width: 720px) {
  /* Di ponsel tautan lain direntangkan penuh; tombol ini sengaja tidak, supaya
     bentuknya sendiri yang membedakannya dari daftar di atasnya. */
  .kaki-tautan .kaki-akun { width: auto; }
}

/* -------------------------------------------------------------- Profil */

.kartu-identitas { padding-bottom: 1.1rem; }

.identitas-kepala {
  display: flex; align-items: center; gap: .9rem;
  padding-bottom: 1.05rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--garis);
}

/* Avatar bergambar, bukan foto: sistem ini tidak menyimpan foto jemaat.
   Gambarnya mengikuti jenis kelamin yang tercatat, sehingga kartu profil
   terasa milik orangnya sendiri tanpa satu bita data pribadi tambahan. */
.identitas-avatar {
  width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%;
  display: block; background: var(--utama-lembut);
}

.identitas-nama { flex: 1; min-width: 0; }
.identitas-nama h2 {
  margin: 0; font-size: 1.2rem; line-height: 1.25; color: var(--utama);
  overflow-wrap: anywhere;
}
.identitas-nama p {
  margin: .12rem 0 0; font-size: var(--ukuran-kecil); color: var(--teks-redup);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

.rincian-diri { margin: 0; }
.rincian-diri > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--garis);
}
.rincian-diri > div:last-child { border-bottom: 0; }
.rincian-diri dt {
  flex: 0 0 auto; font-size: var(--ukuran-kecil); color: var(--teks-redup);
}
.rincian-diri dd {
  margin: 0; text-align: right; min-width: 0;
  font-size: var(--ukuran); font-weight: 600; color: var(--teks);
  overflow-wrap: anywhere;
}

/* Keterangan yang tidak dapat diubah sendiri diberi latar sendiri agar
   terbaca sebagai catatan, bukan sebagai kalimat terakhir kartu. */
.catatan-terkunci {
  margin: 1rem 0 0; padding: .7rem .85rem;
  background: var(--permukaan-2); border-radius: var(--lengkung-kecil);
  font-size: var(--ukuran-kecil); line-height: 1.55; color: var(--teks-redup);
}

.pengantar-medan {
  margin: 0 0 1rem; font-size: var(--ukuran-kecil); line-height: 1.55;
  color: var(--teks-redup);
}

/* ------------------------------------------------------- Warta mingguan */

.warta-terbaru {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.warta-terbaru-isi { flex: 1; min-width: 12rem; }
.warta-terbaru-label {
  margin: 0 0 .25rem; font-size: var(--ukuran-mikro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--aksen-tua);
}
.warta-terbaru h3 {
  margin: 0; font-size: 1.12rem; line-height: 1.3; color: var(--utama);
  overflow-wrap: anywhere;
}
.warta-terbaru-rinci {
  margin: .3rem 0 0; font-size: var(--ukuran-kecil); color: var(--teks-redup);
  font-variant-numeric: tabular-nums;
}
.warta-terbaru .tombol { flex-shrink: 0; }

/* ---------------------------------------------------------- Arsip warta */

.arsip-warta {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--lengkung); box-shadow: var(--bayang);
  margin-bottom: 1.4rem; overflow: hidden;
}
.arsip-warta > summary {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.15rem; cursor: pointer; list-style: none;
  min-height: 52px;
}
.arsip-warta > summary::-webkit-details-marker { display: none; }
.arsip-warta > summary:hover { background: var(--permukaan-2); }
.arsip-judul { flex: 1; min-width: 0; font-weight: 600; color: var(--utama); }
.arsip-jumlah {
  flex-shrink: 0; font-size: var(--ukuran-kecil); color: var(--teks-redup);
  font-variant-numeric: tabular-nums;
}
.arsip-panah {
  flex-shrink: 0; width: 9px; height: 9px;
  border-right: 2px solid var(--teks-redup); border-bottom: 2px solid var(--teks-redup);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.arsip-warta[open] > summary { border-bottom: 1px solid var(--garis); }
.arsip-warta[open] .arsip-panah { transform: rotate(225deg) translate(-2px, -2px); }

.arsip-isi { padding: .35rem 1.15rem 1.1rem; }
.arsip-catatan {
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--garis);
  font-size: var(--ukuran-mikro); line-height: 1.6; color: var(--teks-redup);
}

/* Baris asal ayat. Kecil dan redup: yang perlu dibaca firmannya, bukan
   dari mana ia diambil — tetapi asalnya tetap harus disebut. */
.ayat-sumber {
  margin: .6rem 0 0; text-align: center;
  font-size: var(--ukuran-mikro); color: var(--teks-redup);
}
.ayat-sumber a { color: inherit; }