/* Atribut hidden selalu menang atas aturan display mana pun. */
[hidden] { display: none !important; }

/* =========================================================
   Doa & Tahlil Bersama — style.css (STD-15)
   Palet mengikuti logo: hijau zamrud + emas.
   ========================================================= */
:root{
  --hijau-900:#0a2f24; --hijau-800:#0f4634; --hijau-700:#155e45;
  --hijau-600:#1b7a58; --hijau-100:#e7f2ec; --hijau-050:#f4f9f6;
  --emas-600:#b8860b; --emas-500:#d4a017; --emas-300:#e8c86a; --emas-100:#faf3e0;
  --teks:#1c2321; --teks-lembut:#5d6b64; --garis:#dbe5e0; --putih:#fff;
  --merah:#b3261e; --merah-bg:#fdeceb; --biru:#1d4ed8;
  --r:10px; --bayang:0 1px 3px rgba(10,47,36,.10), 0 6px 18px rgba(10,47,36,.06);
  --sidebar:250px; --topbar:58px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Noto Sans",Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.55; color:var(--teks); background:var(--hijau-050);
  -webkit-text-size-adjust:100%;
}
a{color:var(--hijau-700);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ---------- Top bar (STD-02, STD-20, STD-26) ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar);z-index:50;
  background:linear-gradient(90deg,var(--hijau-900),var(--hijau-700));
  color:var(--putih);display:flex;align-items:center;gap:12px;padding:0 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.18)
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.topbar .brand img{width:34px;height:34px;border-radius:8px;display:block}
.topbar .brand span{font-size:15px}
.topbar .spacer{flex:1}
.topbar a{color:#e9f5ef}
.topbar select,.topbar .chip{
  background:rgba(255,255,255,.14);color:var(--putih);border:1px solid rgba(255,255,255,.25);
  border-radius:8px;padding:6px 10px;font-size:13px;max-width:190px
}
.topbar select option{color:#111}
.toplinks{display:flex;gap:14px;font-size:13px}
@media(max-width:900px){.toplinks{display:none}}

/* ---------- Sidebar kiri (STD-16) ---------- */
.sidebar{
  position:fixed;top:var(--topbar);left:0;bottom:0;width:var(--sidebar);
  background:var(--putih);border-right:1px solid var(--garis);
  overflow-y:auto;overscroll-behavior:contain;z-index:40;
  display:flex;flex-direction:column
}
.sidebar nav{flex:1;padding:10px 0}
.sidebar .grp{
  padding:12px 16px 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teks-lembut);font-weight:700
}
.sidebar a.item{
  display:flex;align-items:center;gap:10px;padding:9px 16px;color:var(--teks);
  font-size:14px;border-left:3px solid transparent
}
.sidebar a.item:hover{background:var(--hijau-050);text-decoration:none}
.sidebar a.item.active{background:var(--hijau-100);border-left-color:var(--emas-500);font-weight:600;color:var(--hijau-800)}
.sidebar .badge{margin-left:auto;background:var(--emas-500);color:#3a2c00;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}
.sidebar .credit{
  border-top:1px solid var(--garis);padding:12px 16px;font-size:12px;color:var(--teks-lembut);background:var(--hijau-050)
}

/* ---------- Konten ---------- */
.main{margin-left:var(--sidebar);padding:calc(var(--topbar) + 18px) 20px 40px}
.main.wide{margin-left:0}
.page-title{margin:0 0 4px;font-size:22px;color:var(--hijau-800)}
.page-sub{margin:0 0 18px;color:var(--teks-lembut);font-size:13px}

.card{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);box-shadow:var(--bayang);padding:18px;margin-bottom:16px}
.card h2{margin:0 0 12px;font-size:16px;color:var(--hijau-800)}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}

.stat{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r);padding:16px}
.stat .n{font-size:26px;font-weight:700;color:var(--hijau-700);line-height:1.2}
.stat .l{font-size:12px;color:var(--teks-lembut);margin-top:2px}

/* ---------- Tabel ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--garis);vertical-align:top}
th{background:var(--hijau-100);color:var(--hijau-800);font-weight:600;font-size:13px;white-space:nowrap}
tbody tr:hover{background:var(--hijau-050)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.ctr,th.ctr{text-align:center}

/* ---------- Form ---------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--teks)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=search],input[type=file],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--garis);border-radius:8px;
  font-size:14px;font-family:inherit;background:var(--putih);color:var(--teks)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--emas-300);border-color:var(--emas-500)}
textarea{min-height:110px;resize:vertical}
.field{margin-bottom:14px}
.hint{font-size:12px;color:var(--teks-lembut);margin-top:4px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1;min-width:180px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;border-radius:8px;border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  background:var(--hijau-700);color:var(--putih);min-height:44px
}
.btn:hover{background:var(--hijau-800);text-decoration:none;color:var(--putih)}
.btn.ghost{background:transparent;color:var(--hijau-700);border-color:var(--garis)}
.btn.ghost:hover{background:var(--hijau-050);color:var(--hijau-800)}
.btn.gold{background:var(--emas-600)}
.btn.gold:hover{background:var(--emas-500)}
.btn.danger{background:var(--merah)}
.btn.sm{padding:6px 11px;font-size:13px;min-height:34px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Notifikasi ---------- */
.alert{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:14px;border:1px solid}
.alert.ok{background:var(--hijau-100);border-color:#a9d3bf;color:var(--hijau-800)}
.alert.err{background:var(--merah-bg);border-color:#f0b7b3;color:var(--merah)}
.alert.warn{background:var(--emas-100);border-color:var(--emas-300);color:#7a5800}

.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.pill.ok{background:var(--hijau-100);color:var(--hijau-800)}
.pill.warn{background:var(--emas-100);color:#7a5800}
.pill.err{background:var(--merah-bg);color:var(--merah)}
.pill.mute{background:#eef1f0;color:var(--teks-lembut)}
.pill.live{background:#0f4634;color:var(--putih);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- Halaman publik ---------- */
.hero{
  background:linear-gradient(140deg,var(--hijau-900),var(--hijau-700) 60%,var(--hijau-600));
  color:var(--putih);padding:52px 20px;text-align:center
}
.hero img.logo{width:110px;height:110px;border-radius:22px;box-shadow:0 8px 28px rgba(0,0,0,.3)}
.hero h1{margin:16px 0 8px;font-size:28px}
.hero p{margin:0 auto;max-width:620px;color:#cfe6da;font-size:15px}
.public-wrap{max-width:1060px;margin:0 auto;padding:24px 18px 50px}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(140deg,var(--hijau-900),var(--hijau-700))}
.auth-box{width:100%;max-width:400px;background:var(--putih);border-radius:14px;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.auth-box .logo{display:block;width:76px;height:76px;margin:0 auto 14px;border-radius:16px}
.auth-box h1{text-align:center;font-size:19px;margin:0 0 20px;color:var(--hijau-800)}
.sep{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--teks-lembut);font-size:12px}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--garis)}

/* ---------- Matriks otorisasi ---------- */
.matrix td.ctr input{width:18px;height:18px}
.matrix th.grp-h{background:var(--hijau-800);color:var(--putih)}

footer.foot{padding:16px 20px;text-align:center;font-size:12px;color:var(--teks-lembut);border-top:1px solid var(--garis)}

/* ---------- Mobile (STD-14) ---------- */
.menu-toggle{display:none;background:none;border:0;color:var(--putih);font-size:22px;cursor:pointer;padding:4px 8px}
@media(max-width:820px){
  .menu-toggle{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:6px 0 20px rgba(0,0,0,.15)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:calc(var(--topbar) + 14px) 14px 40px}
  .card{padding:14px}
}
@media print{.topbar,.sidebar{display:none}.main{margin:0;padding:0}}

/* =========================================================
   Message centre (STD-44)
   ========================================================= */
.msg-list { display: flex; flex-direction: column; gap: 10px; }

.msg {
  display: flex; gap: 14px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r); box-shadow: var(--bayang);
  padding: 16px 18px;
}
.msg.unread { border-left: 3px solid var(--emas-500); background: #fffdf7; }

.msg-icon {
  flex: 0 0 38px; height: 38px; border-radius: 50%;
  background: var(--hijau-100); color: var(--hijau-700);
  display: grid; place-items: center; font-size: 17px;
}
.msg.unread .msg-icon { background: var(--emas-100); color: var(--emas-600); }

.msg-body { flex: 1; min-width: 0; }
.msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.msg-head h2 { margin: 0; font-size: 15px; color: var(--hijau-800); }
.msg-time { margin-left: auto; font-size: 12px; color: var(--teks-lembut); white-space: nowrap; }

/* Baris baru pada isi pesan dipertahankan, itulah inti perbaikannya. */
.msg-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px; line-height: 1.75;
  color: var(--teks);
}
.msg-text a { word-break: break-all; }

.msg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.msg-foot form { margin: 0; }

@media (max-width: 620px) {
  .msg { padding: 13px 14px; gap: 10px; }
  .msg-icon { flex-basis: 32px; height: 32px; font-size: 15px; }
  .msg-time { margin-left: 0; width: 100%; }
}

/* =========================================================
   Dasbor peserta: kartu yang seluruhnya dapat diklik
   ========================================================= */
.dash {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.dash-card {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: 14px; padding: 20px 18px;
  text-decoration: none; color: var(--teks);
  box-shadow: var(--bayang);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-height: 148px;
}
.dash-card:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--hijau-600);
  box-shadow: 0 6px 22px rgba(10, 47, 36, .14);
}
.dash-card:focus-visible { outline: 3px solid var(--emas-300); outline-offset: 2px; }

.dash-ikon { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.dash-angka {
  font-size: 30px; font-weight: 700; color: var(--hijau-700);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.dash-angka.kecil { font-size: 19px; }
.dash-judul { font-size: 14px; font-weight: 600; color: var(--hijau-800); margin-top: 2px; }
.dash-catat { font-size: 12px; color: var(--teks-lembut); line-height: 1.5; margin-top: 3px; }

/* Kartu wakaf diberi warna emas agar ajakan berwakaf mudah dikenali,
   tanpa membuatnya menyerupai tombol wajib. */
.dash-card.emas { background: var(--emas-100); border-color: var(--emas-300); }
.dash-card.emas .dash-angka, .dash-card.emas .dash-judul { color: var(--emas-600); }
.dash-card.emas:hover { border-color: var(--emas-500); }

/* Kartu kehadiran menonjol saat event benar-benar sedang berlangsung. */
.dash-card.sorot { background: var(--hijau-800); border-color: var(--hijau-800); }
.dash-card.sorot .dash-angka,
.dash-card.sorot .dash-judul { color: var(--putih); }
.dash-card.sorot .dash-catat { color: #cfe6da; }
.dash-card.sorot .dash-ikon { animation: dashDenyut 2s infinite; }
@keyframes dashDenyut { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  .dash-card.sorot .dash-ikon { animation: none; }
  .dash-card { transition: none; }
}

@media (max-width: 520px) {
  .dash { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-card { padding: 15px 13px; min-height: 128px; }
  .dash-angka { font-size: 24px; }
  .dash-angka.kecil { font-size: 15px; }
}

/* =========================================================
   Bilah samping berkelompok dan dapat dilipat
   ========================================================= */
.sidebar .item.beranda {
  font-weight: 600; border-bottom: 1px solid var(--garis); margin-bottom: 4px;
}

.grp-wrap { border-bottom: 1px solid var(--garis); }
.grp-wrap:last-of-type { border-bottom: 0; }

.grp-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; background: none; border: 0; cursor: pointer;
  padding: 11px 18px; font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut);
  text-align: left; min-height: 42px;
}
.grp-btn:hover { color: var(--hijau-700); background: var(--hijau-050); }
.grp-btn:focus-visible { outline: 2px solid var(--emas-300); outline-offset: -2px; }
.grp-tanda { font-size: 11px; transition: transform .18s ease; }
.grp-btn.open .grp-tanda { transform: rotate(180deg); }
.grp-btn.open { color: var(--hijau-800); }

/* Dilipat secara bawaan. Hanya kelompok yang memuat halaman aktif
   yang terbuka, sehingga bilah samping tidak pernah sepanjang layar. */
.grp-isi { display: none; padding-bottom: 6px; }
.grp-isi.open { display: block; }
.grp-isi .item { padding-left: 30px; font-size: 14px; }

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

/* ---------- Panel progres berjamaah pada halaman event ---------- */
.ev-live-baris {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--garis); font-size: 14px;
}
.ev-live-baris b { color: var(--hijau-700); font-variant-numeric: tabular-nums; font-size: 16px; }
.ev-bar { height: 9px; background: var(--garis); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.ev-bar i { display: block; height: 100%; width: 0; background: var(--hijau-600); transition: width .5s ease; }
.ev-bar i.emas { background: var(--emas-500); }
@media (prefers-reduced-motion: reduce) { .ev-bar i { transition: none; } }

/* Daftar peserta pada halaman event memakai gaya yang sama dengan
   yang dipakai di dalam pembaca, agar tampilannya konsisten. */
.ev-person { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--garis); }
.ev-avatar { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--hijau-100);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--hijau-700); overflow: hidden; }
.ev-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ev-person-body { flex: 1; min-width: 0; }
.ev-person-body strong { display: block; font-size: 13px; }
.ev-person-body em { font-size: 11px; color: var(--teks-lembut); font-style: normal; }
.ev-person-bar { height: 4px; background: var(--garis); border-radius: 99px; margin-top: 4px; overflow: hidden; }
.ev-person-bar i { display: block; height: 100%; background: var(--hijau-600); }
.ev-person-pct { font-size: 12px; color: var(--teks-lembut); font-variant-numeric: tabular-nums; }

/* Peta Leaflet mengikuti sudut kartu */
.leaflet-container { border-radius: 10px; font: inherit; }

/* Identitas pengguna pada bilah atas */
.whoami { display: flex; align-items: center; gap: 7px; max-width: 200px; }
.whoami a {
  color: var(--putih); font-size: 13px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.whoami a:hover { text-decoration: underline; }
.whoami-inisial {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: var(--putih);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
@media (max-width: 720px) {
  .whoami a { display: none; }   /* di layar sempit cukup inisialnya */
}

/* =========================================================
   Lampu penanda hidup
   ========================================================= */
.lampu {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #34d17a; margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(52, 209, 122, .7);
  animation: lampuKedip 1.6s infinite;
}
@keyframes lampuKedip {
  0%   { box-shadow: 0 0 0 0 rgba(52, 209, 122, .65); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(52, 209, 122, 0); opacity: .75; }
  100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0); opacity: 1; }
}
/* Kedipan dimatikan bagi yang meminta pengurangan gerak; lampunya
   tetap ada sebagai titik hijau, sehingga maknanya tidak hilang. */
@media (prefers-reduced-motion: reduce) {
  .lampu { animation: none; box-shadow: none; }
}
.pill.live .lampu { background: var(--putih); box-shadow: none; }

/* Tombol tindakan di bawah nomor event, agar terjangkau di ponsel */
.ev-aksi { margin-top: 6px; }
.ev-aksi .btn { width: 100%; max-width: 190px; text-align: center; }
@media (max-width: 620px) {
  .ev-aksi .btn { max-width: none; }
}

/* =========================================================
   Penanda kelompok pada peta sebaran
   ========================================================= */
.peta-titik { background: none; border: 0; }
.peta-lampu {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #8a9a92; color: var(--putih);
  font-size: 11px; font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.peta-lampu.hidup {
  background: #21a45f;
  animation: petaKedip 1.7s infinite;
}
@keyframes petaKedip {
  0%   { box-shadow: 0 0 0 0 rgba(52, 209, 122, .75), 0 1px 4px rgba(0, 0, 0, .3); }
  70%  { box-shadow: 0 0 0 12px rgba(52, 209, 122, 0), 0 1px 4px rgba(0, 0, 0, .3); }
  100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0), 0 1px 4px rgba(0, 0, 0, .3); }
}
@media (prefers-reduced-motion: reduce) {
  .peta-lampu.hidup { animation: none; }
}

/* Dua pilihan pada halaman undangan, sama besar agar tidak menggiring */
.undangan-aksi { display: flex; gap: 10px; margin-top: 6px; }
.undangan-aksi .btn { flex: 1; text-align: center; }
@media (max-width: 420px) {
  .undangan-aksi { flex-direction: column; }
}

/* =========================================================
   Bilah atas pada layar sempit
   =========================================================
   Sebelumnya seluruh isinya memakai white-space:nowrap tanpa satu pun
   yang boleh menyusut, sehingga pada ponsel nama site menimpa nama
   aplikasi dan tombol Keluar terdorong keluar layar.

   Perbaikannya: beri tiap bagian hak menyusut, sembunyikan yang
   memang tidak mendesak, dan pastikan tombol Keluar selalu tersisa
   karena itulah satu-satunya jalan keluar pengguna.
   ========================================================= */
@media (max-width: 720px) {
  .topbar { gap: 8px; padding: 0 10px; }

  /* Nama aplikasi boleh terpotong; logonya sudah cukup mengenalkan */
  .topbar .brand { min-width: 0; flex: 0 1 auto; }
  .topbar .brand span {
    font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Nama site disembunyikan. Pengguna ponsel hampir selalu berada di
     satu site saja, dan namanya sudah tampil pada halaman. */
  .topbar .chip { display: none; }

  .whoami { max-width: 42px; }
  .topbar select { max-width: 74px; padding: 6px; font-size: 12px; }

  /* Keluar tidak boleh pernah hilang */
  .topbar .keluar {
    flex: 0 0 auto; font-size: 13px; white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .topbar .brand span { display: none; }   /* sisakan logo saja */
}

/* =========================================================
   Penyesuaian ketika dipasang sebagai aplikasi di ponsel
   ========================================================= */

/* Area aman perangkat berponi. Tanpa ini, bilah atas tertutup takik
   dan bagian bawah tertutup batang navigasi sistem.

   Ditulis sebagai penimpa terpisah dengan sengaja: nilai dasarnya ada
   pada definisi utama di atas, dan yang di sini hanya menambahkan
   perhitungan area aman. Menggabungkannya ke definisi utama akan
   menyembunyikan bahwa ini penyesuaian perangkat, bukan ukuran dasar. */
.topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar) + env(safe-area-inset-top));
}
.sidebar { top: calc(var(--topbar) + env(safe-area-inset-top)); }
.content {
  padding-top: calc(var(--topbar) + env(safe-area-inset-top) + 16px);
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

@media (max-width: 720px) {
  /* Sasaran sentuh minimal 44 piksel, mengikuti anjuran yang sama
     dipakai kedua sistem ponsel. Tombol yang lebih kecil dari ini
     sering meleset dan membuat orang menekan berulang kali. */
  .btn, .sidebar .item, .grp-btn, .topbar a, .topbar select {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .sidebar .item, .grp-btn { min-height: 46px; }

  /* Tabel lebar digulir sebagai satu blok, bukan memaksa seluruh
     halaman ikut bergeser ke samping. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 520px; }

  /* Kolom formulir bertumpuk agar tidak menyempit sampai tak terbaca */
  .row { flex-direction: column; gap: 0; }
  .row > div { width: 100%; }

  .grid.c2, .grid.c3 { grid-template-columns: 1fr; }

  /* Ukuran isian minimal 16px agar iOS tidak memperbesar halaman
     sendiri setiap kali kolom disentuh. */
  input, select, textarea { font-size: 16px; }
}

/* Ketika berjalan sebagai aplikasi terpasang, tautan dokumen teknis
   tidak diperlukan dan hanya memakan lebar. */
@media (display-mode: standalone) and (max-width: 900px) {
  .toplinks { display: none; }
}

/* Bilah ajakan memasang aplikasi */
.bilah-pasang {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 60;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 12px;
  box-shadow: 0 6px 22px rgba(10, 47, 36, .18);
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  animation: bilahNaik .28s ease;
}
.bilah-pasang strong { display: block; font-size: 14px; color: var(--hijau-800); }
.bilah-pasang span { font-size: 12px; color: var(--teks-lembut); line-height: 1.5; }
.bilah-aksi { display: flex; gap: 6px; flex-shrink: 0; }
@keyframes bilahNaik { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bilah-pasang { animation: none; } }
@media (min-width: 900px) { .bilah-pasang { left: auto; right: 20px; max-width: 380px; } }

/* =========================================================
   Tombol masuk dengan Google
   =========================================================
   Pustaka Google menyisipkan bingkai dengan lebar tetap. Pembungkus
   di bawah ini yang meratakannya ke tengah dan menahan agar tidak
   melimpah keluar kartu pada layar sempit.
   ========================================================= */
.g-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;          /* bingkai Google tidak boleh melebar keluar */
}
.g-wrap > div,
.g-wrap iframe {
  margin: 0 auto !important;
  max-width: 100% !important;
}


/* =========================================================
   Kelas yang sebelumnya dipakai tanpa gaya
   =========================================================
   Ketiganya sudah dipasang di tampilan tetapi tidak pernah
   didefinisikan, sehingga tampil seadanya mengikuti aturan bawaan
   peramban. Bukan kerusakan yang terlihat mencolok, tetapi itulah
   sebabnya beberapa bagian terasa tidak sejalan dengan sisanya.
   ========================================================= */

/* Ringkasan jamaah pada panel layar pelaksanaan */
.ev-summary { display: grid; gap: 6px; }
.ev-summary .ev-sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--garis); font-size: 13px;
}
.ev-summary .ev-sum-row b {
  color: var(--hijau-700); font-variant-numeric: tabular-nums; font-size: 15px;
}

/* Isian persentase pada matriks alokasi wakaf. Rata kanan karena
   angkanya dibandingkan menurun, bukan dibaca sebagai kalimat. */
input.pct {
  width: 92px; text-align: right;
  font-variant-numeric: tabular-nums;
}
input.pct:invalid { border-color: var(--merah); }

/* =========================================================
   Kelas pembantu jarak
   =========================================================
   Menggantikan gaya sebaris yang paling sering berulang. Jaraknya
   memakai kelipatan yang sama dengan sisa antarmuka, sehingga tidak
   ada lagi margin 6, 8, 10, 12, dan 14 piksel yang dipilih sekenanya
   di berkas berbeda.
   ========================================================= */
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 10px; }

/* Label yang berupa pilihan, bukan judul kolom, memakai bobot biasa
   agar tidak tampak seperti judul bagian. */
label.pilihan { font-weight: 400; }


/* =========================================================
   Halaman masuk pada ponsel
   =========================================================
   Tiga hal yang membuat papan ketik menutupi isian:

   1. Kartu dirata-tengah secara vertikal. Ketika papan ketik muncul,
      area tampak menyusut dan bagian tengah kartu justru terdorong ke
      balik papan ketik. Pada layar sempit kartu dirapatkan ke atas
      agar menggulung ke bawah, bukan terpotong di tengah.

   2. Satuan vh tidak menyusut saat papan ketik muncul, sehingga
      halaman mengira dirinya masih setinggi layar penuh. Satuan dvh
      mengikuti tinggi yang benar-benar terlihat.

   3. Isian terakhir berada tepat di batas bawah. Ruang tambahan di
      bawah kartu memastikan selalu ada tempat untuk menggulung.
   ========================================================= */
@media (max-width: 620px) {
  .auth-wrap {
    align-items: flex-start;
    padding: 18px 14px calc(28px + env(safe-area-inset-bottom));
    /* Ruang bawah agar isian terakhir tetap dapat digulung ke atas
       melewati papan ketik. */
    padding-bottom: 45vh;
  }
  .auth-box { padding: 22px 18px; }
  .auth-box .logo { width: 60px; height: 60px; margin-bottom: 10px; }
  .auth-box h1 { font-size: 18px; margin-bottom: 16px; }
}

/* Bagian masuk dengan kata sandi disembunyikan di balik ringkasan,
   karena hanya pengelola yang memakainya. Yang jarang dipakai tidak
   sepantasnya menghalangi yang sering dipakai. */
.masuk-sandi { margin-top: 4px; }
.masuk-sandi > summary {
  cursor: pointer; list-style: none;
  text-align: center; font-size: 13px; color: var(--hijau-700);
  padding: 12px 8px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px;
}
.masuk-sandi > summary::-webkit-details-marker { display: none; }
.masuk-sandi > summary::after { content: "▾"; font-size: 11px; }
.masuk-sandi[open] > summary::after { content: "▴"; }
.masuk-sandi > summary:hover { background: var(--hijau-050); }
.masuk-sandi[open] > summary { margin-bottom: 6px; }

/* =========================================================
   Menahan isi agar tidak melebar keluar layar ponsel
   =========================================================
   Pada tangkapan layar halaman wakaf, teks terpotong di tepi kanan.
   Penyebabnya bukan satu elemen tertentu, melainkan beberapa hal yang
   sama-sama menolak menyusut: deretan tombol nominal, tabel pembagian
   nazhir, dan kata panjang tanpa spasi.

   Ditangani di satu tempat agar berlaku untuk seluruh halaman, bukan
   ditambal per halaman setiap kali ketahuan.
   ========================================================= */
html, body { overflow-x: hidden; }

.content, .card { min-width: 0; }          /* izinkan menyusut di dalam grid */
.card p, .card li, .hint, .alert { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  /* Deretan pilihan nominal digulir mendatar sebagai satu blok,
     bukan memaksa seluruh halaman ikut bergeser. */
  .card .field > div[style*="flex-wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .card .field > div[style*="flex-wrap"]::-webkit-scrollbar { display: none; }
  .card .field > div[style*="flex-wrap"] .btn { flex: 0 0 auto; }

  /* Kartu di dalam kartu tidak perlu jarak dalam sebesar induknya */
  .card .card { padding: 14px; }
}

/* Tautan mendaftar pada halaman masuk. Berada di luar kartu bagian
   kata sandi agar tetap terlihat tanpa perlu membukanya lebih dulu. */
.daftar-tautan {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--garis);
  text-align: center; font-size: 13px; color: var(--teks-lembut);
}
.daftar-tautan a {
  color: var(--hijau-700); font-weight: 600; margin-left: 4px;
  display: inline-block; padding: 6px 4px; min-height: 32px;
}

/* Penanda bahwa tautan membawa keluar aplikasi */
.tautan-luar { font-size: 11px; opacity: .6; margin-left: 2px; }

/* Jalan kembali ke halaman depan pada halaman masuk, daftar, dan
   lupa sandi. Dipisahkan garis agar terbaca sebagai jalan keluar,
   bukan sebagai bagian dari formulir. */
.auth-pulang {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--garis);
  text-align: center; font-size: 13px;
}
.auth-pulang a {
  color: var(--teks-lembut); text-decoration: none;
  display: inline-block; padding: 8px 4px; min-height: 40px;
}
.auth-pulang a:hover { color: var(--hijau-700); text-decoration: underline; }

/* Logo pada halaman auth dapat ditekan untuk pulang */
.auth-logo { display: inline-block; }
.auth-logo:hover { opacity: .85; }

/* =========================================================
   Daftar event sebagai kartu, bukan tabel
   =========================================================
   Tabel enam kolom memaksa gulir mendatar pada ponsel, dan tombolnya
   terdorong ke ujung kanan yang tidak terlihat. Kartu bertumpuk
   membaca sama baiknya pada layar lebar maupun sempit.
   ========================================================= */
.ev-list { display: grid; gap: 2px; }
.ev-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--garis);
}
.ev-item:last-child { border-bottom: 0; }
.ev-item-info { flex: 1; min-width: 0; }
.ev-item-judul { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-item-judul a { font-weight: 600; }
.ev-item-baris { font-size: 13px; margin-top: 3px; }
.ev-item-aksi { flex: 0 0 auto; }
.ev-item-aksi .btn { white-space: nowrap; }

@media (max-width: 620px) {
  /* Tombol turun ke bawah keterangan dan melebar penuh, sehingga
     mudah ditekan tanpa perlu membidik. */
  .ev-item { flex-direction: column; align-items: stretch; gap: 10px; }
  .ev-item-aksi .btn { width: 100%; text-align: center; }
}

/* Bilah tab */
.tab-bar {
  display: flex; gap: 6px; margin-bottom: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--garis); border-radius: 99px;
  background: var(--putih); color: var(--teks); font-size: 14px; text-decoration: none;
}
.tab:hover { border-color: var(--hijau-300, var(--hijau-600)); }
.tab.active { background: var(--hijau-800); border-color: var(--hijau-800); color: #fff; }
.tab-n {
  font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--hijau-050); color: var(--hijau-700);
  border-radius: 99px; padding: 2px 7px;
}
.tab.active .tab-n { background: rgba(255,255,255,.22); color: #fff; }

/* Angka pembanding kecil di samping angka utama kartu dasbor */
.dash-per { font-size: 17px; font-weight: 500; color: var(--teks-lembut); margin-left: 4px; }

/* Judul kartu dasbor tanpa angka di atasnya perlu ukuran lebih besar
   agar bobotnya seimbang dengan kartu lain yang berangka. */
.dash-judul.besar { font-size: 19px; margin-top: 4px; }

/* Panah kembali ke beranda, hanya pada layar sempit. Di layar lebar
   bilah samping selalu terlihat, sehingga panah ini justru berlebihan. */
.topbar-balik { display: none; }
@media (max-width: 720px) {
  .topbar-balik {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 38px; height: 38px; min-height: 38px;
    margin-right: 2px;
    border-radius: 10px;
    color: #fff; font-size: 20px; line-height: 1; text-decoration: none;
    background: rgba(255, 255, 255, .12);
  }
  .topbar-balik:hover { background: rgba(255, 255, 255, .22); }
}

/* Keterangan jenis event pada tab Akan dihadiri. Dibedakan warnanya
   agar terbaca sekilas tanpa perlu membaca kalimatnya. */
.ev-item-jenis {
  display: inline-block; margin-top: 4px;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
}
.ev-item-jenis.publik   { background: var(--hijau-050); color: var(--hijau-700); }
.ev-item-jenis.terbatas { background: var(--emas-100); color: var(--emas-600); }

/* Dua tombol berdampingan pada baris event milik sendiri */
.ev-aksi-ganda { display: flex; gap: 6px; }
.ev-aksi-ganda .btn { flex: 1; }
@media (max-width: 620px) { .ev-aksi-ganda .btn { width: auto; } }

/* Menu bagikan, dipakai bila peramban tidak punya papan bagi bawaan */
.ev-item-aksi { position: relative; }
.bagikan-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 210px; padding: 6px;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10, 47, 36, .16);
  display: grid; gap: 2px;
}
.bagikan-menu button,
.bagikan-menu a {
  display: block; width: 100%; text-align: left;
  padding: 11px 12px; min-height: 44px;
  background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--teks); text-decoration: none;
  cursor: pointer;
}
.bagikan-menu button:hover,
.bagikan-menu a:hover { background: var(--hijau-050); color: var(--hijau-800); }
@media (max-width: 620px) { .bagikan-menu { left: 0; right: auto; } }

/* =========================================================
   Kartu konfirmasi keikutsertaan
   =========================================================
   Dibuat menonjol dan berdiri sendiri, bukan pesan sekilas di atas
   halaman rincian. Orang yang baru melewati layar masuk perlu
   kepastian bahwa langkahnya berhasil, dan pesan yang menempel di
   antara peta serta daftar peserta mudah terlewat.
   ========================================================= */
.konfirmasi-kartu {
  max-width: 520px; margin: 10px auto;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px;
  padding: 28px 22px; text-align: center;
  box-shadow: 0 2px 12px rgba(10, 47, 36, .07);
}
.konfirmasi-tanda {
  width: 62px; height: 62px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--hijau-050);
  color: var(--hijau-700); font-size: 32px; line-height: 62px;
}
.konfirmasi-kartu h1 { font-size: 21px; color: var(--hijau-800); margin: 0 0 8px; }
.konfirmasi-utama { font-size: 15px; line-height: 1.7; margin: 0 0 18px; }

.konfirmasi-rincian { text-align: left; margin-bottom: 16px; }
.konfirmasi-rincian > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--garis); font-size: 14px;
}
.konfirmasi-rincian span { color: var(--teks-lembut); flex: 0 0 auto; }
.konfirmasi-rincian strong { text-align: right; }

.konfirmasi-aksi { display: grid; gap: 8px; margin-top: 18px; }
.konfirmasi-aksi .btn { width: 100%; text-align: center; }