/* Paviliun Akademika — Estate & Penghuni
   Palet: Navy Akademik #1E2F4A · navy sedang #2F4A70 · slate #5B6B82
          Lime Akademika #D9E685 · putih gading #F5F5F2 · emas #C9A227 */
:root {
  --navy: #1e2f4a;
  --navy-2: #2f4a70;
  --slate: #5b6b82;
  --lime: #d9e685;
  --ivory: #f5f5f2;
  --emas: #c9a227;
  --emas-terang: #e6c85c;
  --putih: #ffffff;
  --garis: #e4e4dd;
  --teks: #1b2430;
  --teks-lembut: #66748a;
  --merah: #b4342a;
  --hijau: #0e7a5a;
  --r: 18px;
  --bayang: 0 1px 2px rgba(24, 36, 56, .06), 0 10px 28px -18px rgba(24, 36, 56, .38);
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 420px at 85% -180px, rgba(217, 230, 133, .28), transparent 62%),
    radial-gradient(900px 380px at -10% -120px, rgba(30, 47, 74, .1), transparent 60%),
    var(--ivory);
  color: var(--teks);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 86px;
}
a { color: var(--navy-2); }
h1, h2, h3 { margin: 0; letter-spacing: -.015em; }

/* ---------- bar atas ---------- */
.bar-atas {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(120deg, rgba(30, 47, 74, .97), rgba(47, 74, 112, .95));
  color: #fff;
  box-shadow: 0 8px 24px -18px rgba(15, 25, 45, .9);
  backdrop-filter: blur(8px);
}
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; min-width: 0; }
.logo-mark { width: 30px; height: 30px; flex: none; object-fit: contain; }
.logo-lockup { width: 138px; height: auto; display: block; margin: 0 0 12px; }
.merek-teks { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.merek-teks b { font-family: var(--serif); font-size: 14.5px; font-weight: 700; letter-spacing: .06em; }
.merek-teks small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(217, 230, 133, .92); }
.chip-akun {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(217, 230, 133, .35);
  color: #fff; text-decoration: none; font-size: 12.5px; line-height: 1.2; flex: none;
}
.chip-akun i { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }

/* ---------- wadah ---------- */
.wadah { max-width: 1180px; margin: 0 auto; padding: 18px 16px 40px; }
.wadah--lebar { max-width: 1320px; }
.kepala-halaman { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 4px 0 16px; flex-wrap: wrap; }
.kepala-halaman h1 { font-family: var(--serif); font-size: 25px; font-weight: 700; color: var(--navy); }
.kepala-halaman p { margin: 3px 0 0; color: var(--teks-lembut); font-size: 13px; }
.aksi-kepala { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- banner ---------- */
.banner {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 22px;
  margin-bottom: 18px;
  color: #fff;
  background:
    radial-gradient(560px 220px at 88% -40%, rgba(217, 230, 133, .35), transparent 62%),
    linear-gradient(135deg, #17263d 0%, #24395a 52%, #3a5578 100%);
  box-shadow: 0 18px 40px -28px rgba(20, 32, 52, .95);
}
.banner::after {
  content: ""; position: absolute; inset: auto -60px -120px auto; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(201, 162, 39, .38), transparent 68%);
}
.banner__baris { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.sapa { font-family: var(--serif); font-size: 21px; font-weight: 700; }
.sapa small { display: block; font-family: var(--font); font-size: 12.5px; font-weight: 400; color: rgba(217, 230, 133, .95); margin-top: 5px; letter-spacing: .01em; }
.banner__ikon { display: flex; gap: 9px; }
.banner__ikon a {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--lime); text-decoration: none; position: relative; transition: transform .15s ease, background .15s;
}
.banner__ikon a:hover { transform: translateY(-2px); background: rgba(217, 230, 133, .22); }
.banner__ikon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.banner__tanda { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--emas-terang); box-shadow: 0 0 0 3px rgba(230, 200, 92, .25); }
.banner__persen { position: relative; margin-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; }
.banner__persen div { min-width: 96px; }
.banner__persen b { display: block; font-family: var(--serif); font-size: 22px; color: #fff; }
.banner__persen span { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: rgba(245, 245, 242, .72); }

/* ---------- menu ikon ---------- */
.menu-bulat { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 18px 0 6px; }
.menu-bulat a {
  text-decoration: none; color: var(--navy);
  background: rgba(255, 255, 255, .78); border: 1px solid var(--garis); border-radius: 16px;
  padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-align: center;
  box-shadow: var(--bayang); transition: transform .15s ease, box-shadow .15s ease;
}
.menu-bulat a:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(24, 36, 56, .8); }
.menu-bulat .bulat { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #fbfbf7; border: 1px solid var(--garis); }
.menu-bulat svg { width: 21px; height: 21px; }

/* ---------- kartu angka ---------- */
.kartu-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin: 0 0 18px; }
.ka {
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r);
  padding: 14px 15px; box-shadow: var(--bayang); position: relative; overflow: hidden;
}
.ka::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--navy-2); opacity: .8; }
.ka--emas::before { background: var(--emas); }
.ka--hijau::before { background: var(--hijau); }
.ka--merah::before { background: var(--merah); }
.ka-label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--teks-lembut); }
.ka-nilai { display: block; font-family: var(--serif); font-size: 23px; color: var(--navy); margin: 5px 0 2px; line-height: 1.15; }
.ka small { color: var(--teks-lembut); font-size: 11.5px; }

/* ---------- panel ---------- */
.panel { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r); box-shadow: var(--bayang); margin-bottom: 16px; overflow: hidden; }
.panel__kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--garis); background: linear-gradient(180deg, #fcfcf8, #fff); flex-wrap: wrap; }
.panel__kepala h2 { font-size: 15px; color: var(--navy); font-weight: 600; }
.panel__kepala small { color: var(--teks-lembut); font-size: 12px; }
.panel__isi { padding: 14px 16px 18px; }
.panel__isi--rapat { padding: 0; }

/* ---------- tabel ---------- */
.tabel-bungkus { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th {
  text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teks-lembut); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--garis);
  background: #fbfbf7; white-space: nowrap;
}
.tabel td { padding: 11px 12px; border-bottom: 1px solid #f0f0ea; vertical-align: middle; }
.tabel tbody tr:hover { background: #fcfcf6; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .kanan { text-align: right; }
.tabel .kecil { font-size: 12px; color: var(--teks-lembut); }
.kode { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }

/* ---------- lencana ---------- */
.lencana {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent;
}
.lencana--ok { background: #e8f5ee; color: #0b6249; border-color: #c6e6d6; }
.lencana--tunggu { background: #fdf4dc; color: #8a6413; border-color: #f0e0b4; }
.lencana--mati { background: #f0f1ee; color: #6b7280; border-color: #e2e4de; }
.lencana--isi { background: #e9eefa; color: #27406b; border-color: #cfd9ee; }
.lencana--emas { background: #fbf3dd; color: #8a6a12; border-color: #eddfb6; }
.lencana--merah { background: #fdeceb; color: #8f2b22; border-color: #f3cfcc; }

/* ---------- tombol ---------- */
.tombol, button.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--navy); color: #fff; transition: filter .15s, transform .15s;
}
.tombol:hover { filter: brightness(1.08); }
.tombol--emas { background: linear-gradient(135deg, var(--emas), #b48d1c); color: #221c07; }
.tombol--lime { background: var(--lime); color: #23301a; }
.tombol--garis { background: #fff; border-color: var(--garis); color: var(--navy); }
.tombol--kecil { padding: 6px 11px; font-size: 12px; border-radius: 10px; }
.tombol--bahaya { background: #fdeceb; color: var(--merah); border-color: #f3cfcc; }
.tombol--lebar { width: 100%; }

/* ---------- form ---------- */
.form-baris { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.medan { display: flex; flex-direction: column; gap: 5px; }
.medan label { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut); font-weight: 600; }
.medan input, .medan select, .medan textarea {
  font-family: var(--font); font-size: 14px; color: var(--teks);
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--garis); background: #fdfdfa;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.medan input:focus, .medan select:focus, .medan textarea:focus {
  outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(47, 74, 112, .13); background: #fff;
}
.medan small { color: var(--teks-lembut); font-size: 11.5px; }
.kelompok-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pemisah { height: 1px; background: var(--garis); margin: 16px 0; border: 0; }

/* ---------- pesan / kosong ---------- */
.pesan { padding: 11px 14px; border-radius: 12px; font-size: 13px; margin-bottom: 14px; border: 1px solid transparent; }
.pesan--ok { background: #e8f5ee; border-color: #c6e6d6; color: #0b6249; }
.pesan--err { background: #fdeceb; border-color: #f3cfcc; color: #8f2b22; }
.kosong { padding: 26px 16px; text-align: center; color: var(--teks-lembut); font-size: 13px; background: #fbfbf7; border-radius: 14px; border: 1px dashed #dcdcd2; }

/* ---------- tabbawah ---------- */
.tabbawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; justify-content: space-around; align-items: center;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--garis); padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: #8b93a2; font-size: 10.5px; padding: 4px 10px; border-radius: 11px; flex: 1; }
.tab svg { width: 21px; height: 21px; fill: currentColor; }
.tab--aktif { color: var(--navy); background: rgba(217, 230, 133, .28); }

/* ---------- halaman masuk ---------- */
.layar-masuk { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px 60px; }
.kartu-masuk { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--garis); border-radius: 24px; box-shadow: 0 24px 60px -34px rgba(20, 32, 52, .7); overflow: hidden; }
.kartu-masuk__atas { padding: 26px 24px 20px; color: #fff; background: radial-gradient(420px 180px at 90% -30%, rgba(217, 230, 133, .34), transparent 60%), linear-gradient(135deg, #17263d, #2f4a70); }
.kartu-masuk__atas .logo-mark { width: 34px; height: 34px; }
.kartu-masuk__atas .logo-lockup--masuk { width: 156px; margin-bottom: 14px; }
.kartu-masuk__atas h1 { font-family: var(--serif); font-size: 22px; margin: 12px 0 4px; }
.kartu-masuk__atas p { margin: 0; font-size: 12.5px; color: rgba(245, 245, 242, .8); }
.kartu-masuk__isi { padding: 22px 24px 26px; }

/* ---------- detail unit ---------- */
.rinci { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rinci div { background: #fbfbf7; border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; }
.rinci span { display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--teks-lembut); }
.rinci b { font-size: 14.5px; color: var(--navy); }
.baris-antara { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nota { font-family: var(--serif); font-size: 15px; }
.tautan-lembut { font-size: 12.5px; color: var(--teks-lembut); text-decoration: none; }
.tautan-lembut:hover { color: var(--navy); text-decoration: underline; }
.bukti-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid var(--garis); vertical-align: middle; }

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .tabbawah { display: flex; }
  .wadah { padding: 14px 12px 30px; }
  .kepala-halaman h1 { font-size: 21px; }
  .tabel th, .tabel td { padding: 9px 10px; }
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { border-bottom: 1px solid var(--garis); padding: 9px 4px; }
  .tabel tr:last-child { border-bottom: 0; }
  .tabel td { border: 0; padding: 3px 10px; }
  .tabel td::before { content: attr(data-l); display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--teks-lembut); }
  .tabel td:empty { display: none; }
  .kartu-angka { grid-template-columns: repeat(2, 1fr); }
  .ka-nilai { font-size: 19px; }
}
@media (min-width: 761px) {
  .menu-bulat { grid-template-columns: repeat(6, 1fr); }
}
@media print {
  .bar-atas, .tabbawah, .aksi-kepala { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   MODEL APLIKASI PENGHUNI (mengikuti estate.buttacorp.com)
   Beranda berkisi ikon, promo, kamar kosong, keluhan, kartu tamu, fasilitas.
   ========================================================================== */

/* ---------- hero beranda penghuni ---------- */
.hero-penghuni {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-radius: 20px; margin-bottom: 4px;
  background: linear-gradient(135deg, var(--navy), #2b4467 62%, #35507a);
  color: #fff; box-shadow: var(--bayang); position: relative; overflow: hidden;
}
.hero-penghuni::after {
  content: ""; position: absolute; inset: auto -40px -70px auto; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(217, 230, 133, .35), transparent 65%); pointer-events: none;
}
.hero-penghuni__teks small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.hero-penghuni__teks h2 { font-size: 20px; margin: 2px 0 4px; font-family: var(--serif); font-weight: 600; }
.hero-penghuni__teks p { margin: 0; font-size: 12.5px; opacity: .85; }
.hero-penghuni__tagihan, .hero-penghuni__lunas {
  position: relative; z-index: 1; text-align: right; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 9px 13px; min-width: 118px;
}
.hero-penghuni__tagihan span, .hero-penghuni__lunas span { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.hero-penghuni__tagihan b, .hero-penghuni__lunas b { font-size: 16px; display: block; letter-spacing: -.01em; white-space: nowrap; }
.hero-penghuni__tagihan a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
  margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--navy);
  background: var(--lime); padding: 0 14px; border-radius: 99px; text-decoration: none;
}

/* ---------- kisi ikon ---------- */
.kisi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.ubin {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 13px 6px 11px; border-radius: 16px; background: #fff; border: 1px solid var(--garis);
  box-shadow: var(--bayang); text-decoration: none; color: var(--teks); font-size: 11.5px; font-weight: 600;
  transition: transform .16s, border-color .16s;
}
.ubin:hover { transform: translateY(-2px); border-color: rgba(47, 74, 112, .35); }
.ubin__ikon {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--warna, #2f4a70) 12%, #fff);
  color: var(--warna, #2f4a70);
}
.ubin__ikon svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.kisi--fasilitas { grid-template-columns: 1fr; min-width: 0; }
.ubin--lebar { flex-direction: row; text-align: left; align-items: flex-start; gap: 12px; padding: 14px; }
.ubin--lebar > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ubin--lebar b, .ubin--lebar small, .ubin--lebar i { overflow-wrap: anywhere; }
.ubin--lebar small { color: var(--teks-lembut); font-size: 11.5px; font-weight: 500; }
.ubin--lebar i { font-size: 11.5px; color: var(--emas); font-style: normal; font-weight: 600; }

/* ---------- promo ---------- */
.promo-gulir, .kartu-kamar-gulir {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.promo-kartu {
  flex: 0 0 232px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px;
  padding: 14px 15px; border-radius: 16px; text-decoration: none; color: var(--navy);
  background: linear-gradient(135deg, var(--lime), #eaf0b6); border: 1px solid rgba(30, 47, 74, .08);
}
.promo-kartu small { font-size: 10px; letter-spacing: .14em; font-weight: 700; color: #5c6a1f; }
.promo-kartu b { font-size: 13.5px; line-height: 1.3; }
.promo-kartu span { font-size: 11.5px; color: #4a5620; }

/* ---------- kartu kamar kosong ---------- */
.kartu-kamar {
  flex: 0 0 158px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border-radius: 14px; background: #fdfdfa; border: 1px solid var(--garis);
  text-decoration: none; color: var(--teks);
}
.kartu-kamar small { font-size: 10.5px; color: var(--teks-lembut); text-transform: uppercase; letter-spacing: .06em; }
.kartu-kamar b { font-size: 13px; }
.kartu-kamar span { font-size: 12.5px; color: var(--hijau); font-weight: 700; }
.kartu-kamar i { font-size: 11px; color: var(--teks-lembut); font-style: normal; }
.tautan-kecil {
  font-size: 11.5px; color: var(--navy-2); font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 2px;
}

/* ---------- pengumuman & keluhan ---------- */
.pengumuman-item, .keluhan-item, .kartu-tamu-item {
  padding: 13px 0; border-bottom: 1px solid var(--garis);
}
.pengumuman-item:last-child, .keluhan-item:last-child, .kartu-tamu-item:last-child { border-bottom: 0; }
.pengumuman-item b, .keluhan-item b { font-size: 13.5px; }
.pengumuman-item p, .keluhan-item p { margin: 5px 0 4px; font-size: 12.5px; color: #3c4859; }
.pengumuman-item small, .keluhan-item small { color: var(--teks-lembut); font-size: 11px; }
.keluhan-item__kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tanggapan {
  margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: #f2f6ee;
  border-left: 3px solid var(--hijau);
}
.tanggapan b { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--hijau); }
.tanggapan p { margin: 3px 0 0; font-size: 12.5px; }

/* ---------- kartu tamu ---------- */
.kartu-tamu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kartu-tamu-item > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.kartu-tamu-kode {
  display: flex; flex-direction: column; align-items: center; padding: 7px 14px; border-radius: 12px;
  background: var(--navy); color: #fff;
}
.kartu-tamu-kode span { font-size: 9px; letter-spacing: .16em; opacity: .7; }
.kartu-tamu-kode b { font-size: 16px; letter-spacing: .14em; font-family: ui-monospace, "SF Mono", monospace; }

/* ---------- kontak darurat & alur ---------- */
.kontak-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--garis); text-decoration: none; color: var(--teks);
}
.kontak-baris:last-child { border-bottom: 0; }
.kontak-baris div { display: flex; flex-direction: column; }
.kontak-baris small { color: var(--teks-lembut); font-size: 11.5px; }
.kontak-baris span { font-weight: 700; color: var(--navy-2); font-size: 13.5px; }
.daftar-alur { margin: 0; padding-left: 20px; font-size: 12.5px; color: #3c4859; }
.daftar-alur li { margin-bottom: 7px; }

/* ---------- borang ringkas ---------- */
.borang { display: grid; gap: 12px; }
.borang label {
  display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teks-lembut); font-weight: 600;
}
.borang input, .borang select, .borang textarea {
  font-family: var(--font); font-size: 14px; color: var(--teks); text-transform: none; letter-spacing: 0;
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--garis); background: #fdfdfa; width: 100%;
}
.borang input:focus, .borang select:focus, .borang textarea:focus {
  outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(47, 74, 112, .13); background: #fff;
}
.borang-baris { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.borang--rapat { gap: 8px; margin-top: 10px; }
.tombol--halus {
  background: #f4f4ee; color: var(--navy); border: 1px solid var(--garis);
  font-size: 11.5px; padding: 6px 12px; border-radius: 10px; font-weight: 600;
}

/* ---------- pil saringan ---------- */
.pilihan-pil { display: flex; gap: 6px; flex-wrap: wrap; }
.pil {
  font-size: 11.5px; padding: 0 13px; min-height: 30px; display: inline-flex; align-items: center;
  border-radius: 99px; border: 1px solid var(--garis);
  background: #fbfbf7; color: var(--teks-lembut); text-decoration: none; font-weight: 600;
}
.pil--aktif { background: var(--navy); border-color: var(--navy); color: #fff; }

@media (max-width: 420px) {
  .kisi { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .ubin { padding: 11px 4px 9px; font-size: 10.5px; }
  .ubin__ikon { width: 38px; height: 38px; }
  .hero-penghuni { padding: 15px 16px; }
  .hero-penghuni__teks h2 { font-size: 18px; }
}
@media (min-width: 761px) {
  .kisi { grid-template-columns: repeat(4, 1fr); max-width: 760px; }
  .kisi--fasilitas { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- kerapian teks panjang & sasaran sentuh ---------- */
.panel__isi, .rinci, .pengumuman-item, .keluhan-item, .kartu-tamu-item { overflow-wrap: anywhere; }
main small a { display: inline-flex; align-items: center; min-height: 26px; }
.tautan-lembut { display: inline-flex; align-items: center; min-height: 28px; }
@media (max-width: 420px) {
  .hero-penghuni { flex-wrap: wrap; }
  .hero-penghuni__tagihan, .hero-penghuni__lunas { margin-left: auto; }
}