/* ---------------------------------------------------------------------------
   e-Khairat - lembaran gaya utama

   Ditulis sebagai CSS biasa dan bukan Tailwind. Versi Next.js menggunakan
   Tailwind, yang memerlukan langkah pembinaan dengan Node. Hosting ini hanya
   menyediakan FTP tanpa Node, jadi setiap kali gaya diubah, keseluruhan projek
   perlu dibina semula di komputer lain dan dimuat naik. CSS biasa boleh disunting
   terus. Ia juga satu fail kecil, bukan bundle, yang bermakna kurang ruang
   digunakan daripada kuota 200MB.

   Nilai warna dan jarak diletakkan sebagai pemboleh ubah supaya rupa sistem
   boleh diubah dari satu tempat.
--------------------------------------------------------------------------- */

:root {
  --hijau: #0f766e;
  --hijau-gelap: #115e59;
  --hijau-terang: #14b8a6;
  --hijau-muda: #ccfbf1;
  --hijau-pudar: #f0fdfa;

  --teks: #0f172a;
  --teks-lembut: #475569;
  --teks-pudar: #94a3b8;

  --latar: #f8fafc;
  --kad: #ffffff;
  --sempadan: #e2e8f0;

  --merah: #b91c1c;
  --merah-muda: #fee2e2;
  --kuning: #a16207;
  --kuning-muda: #fef9c3;
  --hijau-status: #15803d;
  --hijau-status-muda: #dcfce7;
  --kelabu: #475569;
  --kelabu-muda: #e2e8f0;

  --jejari: 12px;
  --jejari-kecil: 8px;
  --corak-islamik: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'%3E%3Crect x='15' y='15' width='30' height='30'/%3E%3Crect x='15' y='15' width='30' height='30' transform='rotate(45 30 30)'/%3E%3Ccircle cx='30' cy='30' r='21'/%3E%3C/g%3E%3C/svg%3E");
  --ombak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M0 20 Q 25 10 50 20 T 100 20 V40 H0 Z' fill='%23fff'/%3E%3C/svg%3E");
  --bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --bayang-hover: 0 10px 24px rgba(15, 23, 42, .10);
  --peralihan: 150ms cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--hijau); }

:focus-visible {
  outline: 2px solid var(--hijau-terang);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- lambang */

.lambang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lambang svg { width: 100%; height: 100%; }
.lambang img { width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------------------------------------------ rangka */

.rangka { display: flex; min-height: 100vh; }

.sisi {
  width: 240px;
  flex-shrink: 0;
  background: var(--hijau-gelap);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
}

.sisi .jenama {
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sisi .jenama .baris { display: flex; align-items: center; gap: 11px; }
.sisi .jenama .lambang {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}
.sisi .jenama strong { display: block; font-size: 16px; color: #fff; letter-spacing: .01em; }
.sisi .jenama span { font-size: 12px; color: #99f6e4; }

.sisi nav { padding: 12px 0; flex: 1; overflow-y: auto; }
.sisi nav::-webkit-scrollbar { width: 6px; }
.sisi nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 3px; }
.sisi nav .kumpulan {
  padding: 14px 20px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #5eead4;
}
.sisi nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 1px 10px;
  padding: 8px 10px;
  border-radius: var(--jejari-kecil);
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
  transition: background var(--peralihan), color var(--peralihan);
}
.sisi nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .7; transition: opacity var(--peralihan); }
.sisi nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sisi nav a:hover svg { opacity: 1; }
.sisi nav a.aktif {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
}
.sisi nav a.aktif svg { opacity: 1; color: #5eead4; }

.sisi .kaki {
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
}
.sisi .kaki-profil { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.sisi .kaki-profil .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.sisi .kaki .nama { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sisi .kaki .peranan { color: #99f6e4; font-size: 12px; }
.sisi .kaki-pautan { display: flex; flex-direction: column; gap: 2px; }
.sisi .kaki-pautan a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--jejari-kecil);
  color: #cbd5e1;
  text-decoration: none;
  font-size: 13px;
  transition: background var(--peralihan), color var(--peralihan);
}
.sisi .kaki-pautan a svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; }
.sisi .kaki-pautan a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sisi .kaki-pautan a:hover svg { opacity: 1; }

.kandungan { flex: 1; min-width: 0; padding: 24px 28px 48px; }

.tajuk-halaman {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tajuk-halaman h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.tajuk-halaman p { margin: 2px 0 0; color: var(--teks-lembut); font-size: 14px; }

/* -------------------------------------------------------------------- kad */

.kad {
  min-width: 0; /* elak kad "tolak" lajur grid/flex induk jadi lebih lebar daripada skrin */
  background: var(--kad);
  border: 1px solid var(--sempadan);
  border-radius: var(--jejari);
  box-shadow: var(--bayang);
}
.kad + .kad { margin-top: 18px; }
.kad > .kepala {
  padding: 14px 18px;
  border-bottom: 1px solid var(--sempadan);
  font-weight: 600;
}
.kad > .isi { padding: 18px; }

/* Tataletak dua lajur (jadual/perincian + sisi) yang digunakan pada
   halaman seperti Pengurusan Jenazah & perincian Ahli - jadi satu
   lajur di skrin sempit supaya tak "leret" ke tepi. */
.tataletak-2-1 { display: grid; gap: 18px; grid-template-columns: 2fr 1fr; }
.tataletak-1-2 { display: grid; gap: 18px; grid-template-columns: minmax(260px, 1fr) 2fr; }
@media (max-width: 760px) {
  .tataletak-2-1,
  .tataletak-1-2 { grid-template-columns: 1fr; }
}

.grid-stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--kad);
  border: 1px solid var(--sempadan);
  border-radius: var(--jejari);
  padding: 16px 18px;
  box-shadow: var(--bayang);
  transition: box-shadow var(--peralihan), transform var(--peralihan);
}
.stat:hover { box-shadow: var(--bayang-hover); transform: translateY(-1px); }
.stat .ikon {
  width: 38px;
  height: 38px;
  border-radius: var(--jejari-kecil);
  background: var(--hijau-pudar);
  color: var(--hijau);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat .ikon svg { width: 19px; height: 19px; }
.stat .ikon.merah { background: var(--merah-muda); color: var(--merah); }
.stat .teks { min-width: 0; }
.stat .label { font-size: 13px; color: var(--teks-lembut); }
.stat .nilai { font-size: 25px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; }
.stat .nota { font-size: 12px; color: var(--teks-pudar); margin-top: 2px; }

/* ----------------------------------------------------------------- jadual */

.jadual-bekas { overflow-x: auto; }
table.senarai { width: 100%; border-collapse: collapse; font-size: 14px; }
table.senarai th {
  text-align: left;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--sempadan);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--teks-lembut);
  white-space: nowrap;
}
table.senarai td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; }
table.senarai tr:last-child td { border-bottom: 0; }
table.senarai tbody tr { transition: background var(--peralihan); }
table.senarai tbody tr:hover { background: #f8fafc; }
table.senarai td.nombor, table.senarai th.nombor { text-align: right; font-variant-numeric: tabular-nums; }

.kosong { padding: 40px 18px; text-align: center; color: var(--teks-pudar); }

/* ---------------------------------------------------------------- lencana */

.lencana {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.lencana::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; flex-shrink: 0; }
.lencana.hijau  { background: var(--hijau-status-muda); color: var(--hijau-status); }
.lencana.merah  { background: var(--merah-muda); color: var(--merah); }
.lencana.kuning { background: var(--kuning-muda); color: var(--kuning); }
.lencana.kelabu { background: var(--kelabu-muda); color: var(--kelabu); }

/* ----------------------------------------------------------------- borang */

.borang { display: grid; gap: 16px; }
.medan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.medan .bantuan { font-size: 12px; color: var(--teks-pudar); margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #cbd5e1;
  border-radius: var(--jejari-kecil);
  font: inherit;
  background: #fff;
  color: var(--teks);
  transition: border-color var(--peralihan), box-shadow var(--peralihan);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--hijau);
  box-shadow: 0 0 0 3px var(--hijau-muda);
}
textarea { min-height: 92px; resize: vertical; }

.butang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--jejari-kecil);
  background: var(--hijau);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
  transition: background var(--peralihan), box-shadow var(--peralihan), transform var(--peralihan);
}
.butang:hover { background: var(--hijau-gelap); box-shadow: 0 6px 16px rgba(15, 118, 110, .28); transform: translateY(-1px); }
.butang:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.butang.kedua { background: #fff; color: var(--teks); border-color: #cbd5e1; box-shadow: none; }
.butang.kedua:hover { background: #f8fafc; box-shadow: none; transform: none; }
/* Keadaan "dipilih" untuk butang togol (jenis bayaran, pilihan tahun). */
.butang.kedua.aktif { background: var(--hijau); color: #fff; border-color: var(--hijau); }
.butang.bahaya { background: var(--merah); }
.butang.bahaya:hover { background: #991b1b; box-shadow: 0 6px 16px rgba(185, 28, 28, .28); }
.butang.kecil { padding: 5px 12px; font-size: 13px; }
.butang[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.barisan-butang { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ notis */

.notis {
  padding: 12px 16px;
  border-radius: var(--jejari-kecil);
  margin-bottom: 18px;
  font-size: 14px;
  border-left: 3px solid;
}
.notis.jaya   { background: var(--hijau-status-muda); color: #14532d; border-color: #16a34a; }
.notis.ralat  { background: var(--merah-muda); color: #7f1d1d; border-color: #dc2626; }
.notis.amaran { background: var(--kuning-muda); color: #713f12; border-color: #d97706; }

/* --------------------------------------------------------- halaman masuk */

.skrin-masuk {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background-image: var(--corak-islamik), linear-gradient(160deg, #115e59 0%, #0f766e 45%, #0d9488 100%);
  background-repeat: repeat, no-repeat;
  background-size: 60px 60px, cover;
}
.kotak-masuk {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .25);
}
.kotak-masuk .lambang {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
}
.kotak-masuk h1 { margin: 0 0 4px; font-size: 22px; text-align: center; }
.kotak-masuk .sari { margin: 0 0 24px; text-align: center; color: var(--teks-lembut); font-size: 14px; }
.kotak-masuk .butang { width: 100%; padding: 11px; }
.kotak-masuk .kaki-masuk { margin-top: 20px; text-align: center; font-size: 13px; color: var(--teks-lembut); }

/* ------------------------------------------------------- log masuk (dua lajur) */

.log-skrin {
  min-height: 100vh;
  min-height: 100dvh; /* elak pepijat bar alamat telefon "makan" bahagian dasar skrin */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  overflow: hidden; /* halang scroll/swipe mendatar jika kandungan meleret */
  padding: 24px 16px;
  background-image: var(--corak-islamik), linear-gradient(160deg, #115e59 0%, #0f766e 45%, #0d9488 100%);
  background-repeat: repeat, no-repeat;
  background-size: 60px 60px, cover;
}
.log-kad {
  width: 100%;
  max-width: 860px;
  display: flex;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .25);
}

.log-borang { flex: 1 1 380px; min-width: 0; padding: 44px 36px; display: flex; align-items: center; }
.log-borang-isi { width: 100%; }
.log-logo-penuh { display: block; max-width: 190px; margin: 0 auto 14px; }
.log-sari { text-align: center; color: var(--teks-lembut); font-size: 14px; margin: 0 0 26px; }
.log-borang-isi .butang { width: 100%; padding: 11px; }
.log-kaki { margin-top: 20px; text-align: center; font-size: 13px; color: var(--teks-lembut); }
.log-hint-leret { display: none; }

.log-info {
  flex: 1 1 320px;
  min-width: 0;
  background: var(--latar);
  border-left: 1px solid var(--sempadan);
  padding: 44px 32px;
  display: flex;
  align-items: center;
}
.log-info-kad { max-width: none; }
.log-info-kad strong { display: block; font-size: 15px; }
.log-info-kad .meta { margin: 4px 0 16px; font-size: 13px; color: var(--teks-lembut); }
.log-info-kad ul { margin: 0; padding-left: 18px; display: grid; gap: 9px; font-size: 13px; color: var(--teks-lembut); }

@media (max-width: 760px) {
  /* Kad log masuk & kotak info jadi dua "panel" yang boleh dileret
     (bukan meleret bebas - snap kemas ke setiap panel). */
  .log-kad {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .log-borang,
  .log-info {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
  }
  .log-info { display: flex; border-left: 0; }
  .log-hint-leret {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--teks-lembut);
  }
}

/* Animasi masuk untuk halaman log masuk */
@media (prefers-reduced-motion: no-preference) {
  @keyframes log-kad-naik {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes log-medan-naik {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes log-goyang {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
  }

  .log-kad { animation: log-kad-naik .5s cubic-bezier(.2, .7, .2, 1) both; }

  .log-borang-isi > * {
    opacity: 0;
    animation: log-medan-naik .45s ease both;
  }
  .log-borang-isi > *:nth-child(1) { animation-delay: .08s; }
  .log-borang-isi > *:nth-child(2) { animation-delay: .14s; }
  .log-borang-isi > *:nth-child(3) { animation-delay: .2s; }
  .log-borang-isi > *:nth-child(4) { animation-delay: .2s; }
  .log-borang-isi > *:nth-child(5) { animation-delay: .26s; }
  .log-borang-isi > *:nth-child(6) { animation-delay: .32s; }

  .notis.ralat {
    animation:
      log-medan-naik .45s ease both,
      log-goyang .4s ease .45s;
  }

  /* Corak islamik hanyut perlahan pada latar belakang */
  @keyframes log-corak-hanyut {
    from { background-position: 0 0, center; }
    to   { background-position: 60px 60px, center; }
  }
  .log-skrin {
    background-position: 0 0, center;
    animation: log-corak-hanyut 18s linear infinite;
  }
  .log-kad { position: relative; z-index: 1; }

  /* Riak ombak tenang di dasar skrin - dua lapisan, kelajuan berbeza untuk kedalaman.
     position: absolute (melekat pada kotak .log-skrin, ikut skrol bersama, bukan
     "fixed" pada viewport - fixed buat ombak nampak terapung di atas kad bila skrol). */
  .log-skrin::before,
  .log-skrin::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--ombak);
    background-repeat: repeat-x;
    pointer-events: none;
  }
  .log-skrin::before {
    height: 64px;
    background-size: 150px 64px;
    opacity: .08;
    animation: log-ombak-a 16s linear infinite;
  }
  .log-skrin::after {
    height: 44px;
    background-size: 100px 44px;
    opacity: .14;
    animation: log-ombak-b 10s linear infinite;
  }
  @keyframes log-ombak-a {
    from { background-position-x: 0; }
    to   { background-position-x: -150px; }
  }
  @keyframes log-ombak-b {
    from { background-position-x: 0; }
    to   { background-position-x: -100px; }
  }
}

/* Butang mata untuk tunjuk/sembunyi kata laluan. */
.input-mata { position: relative; }
.input-mata input { padding-right: 40px; }
.togol-mata {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  color: var(--teks-pudar);
}
.togol-mata:hover { color: var(--teks-lembut); background: var(--latar); }
.togol-mata svg { width: 18px; height: 18px; }
.togol-mata .ikon-tutup { display: none; }
.togol-mata.aktif .ikon-buka { display: none; }
.togol-mata.aktif .ikon-tutup { display: block; }

/* ------------------------------------------------------------------ mudah alih */

.buka-menu { display: none; }

@media (max-width: 820px) {
  .rangka { flex-direction: column; }
  .sisi { width: 100%; }
  .sisi nav, .sisi .kaki { display: none; }
  /* Seluruh menu terbuka (jenama + nav + kaki) jadi SATU kotak scroll
     yang terkurung, supaya scroll di mana-mana bahagian dalamnya
     (termasuk kaki - nama & log keluar) tak "leret" ke page belakang.
     nav sendiri tak scroll berasingan lagi (flex:none) - biar
     .sisi.terbuka sahaja jadi bekas scroll. */
  .sisi.terbuka {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .sisi.terbuka nav, .sisi.terbuka .kaki { display: block; }
  .sisi nav { flex: none; overflow-y: visible; }
  .buka-menu {
    display: block;
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: var(--jejari-kecil);
    padding: 5px 11px;
    font: inherit;
    cursor: pointer;
  }
  .sisi .jenama { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .kandungan { padding: 18px 16px 40px; }
  .tajuk-halaman h1 { font-size: 19px; }
}

@media print {
  .sisi, .butang, .notis, .kaki-halaman { display: none !important; }
  .kandungan { padding: 0; }
  .kad { border: 0; box-shadow: none; }
  body { background: #fff; }
}

/* ------------------------------------------------- halaman awam (daftar) */

.skrin-awam {
  min-height: 100vh;
  background-image: var(--corak-islamik), linear-gradient(160deg, #115e59 0%, #0f766e 45%, #0d9488 100%);
  background-repeat: repeat, no-repeat;
  background-size: 60px 60px, cover;
  padding: 32px 16px 60px;
}
.bekas-awam { max-width: 640px; margin: 0 auto; }
.bekas-awam .kembali {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ccfbf1;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 18px;
  transition: color var(--peralihan);
}
.bekas-awam .kembali:hover { color: #fff; }
.bekas-awam .tajuk-awam { text-align: center; color: #fff; margin-bottom: 22px; }
.bekas-awam .tajuk-awam .lambang {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  margin: 0 auto 12px;
}
.bekas-awam .tajuk-awam h1 { margin: 0 0 2px; font-size: 21px; }
.bekas-awam .tajuk-awam p { margin: 0; font-size: 13px; color: #ccfbf1; }

.pilihan-jenis { display: grid; gap: 12px; }
.pilihan-jenis .kad-pilihan {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--sempadan);
  border-radius: var(--jejari);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--teks);
  box-shadow: var(--bayang);
  transition: border-color var(--peralihan), box-shadow var(--peralihan), transform var(--peralihan);
}
.pilihan-jenis .kad-pilihan:hover { border-color: var(--hijau); box-shadow: var(--bayang-hover); transform: translateY(-1px); }
.pilihan-jenis .kad-pilihan .ikon {
  width: 40px;
  height: 40px;
  border-radius: var(--jejari-kecil);
  background: var(--hijau-pudar);
  color: var(--hijau);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pilihan-jenis .kad-pilihan .ikon svg { width: 21px; height: 21px; }
.pilihan-jenis .kad-pilihan strong { display: block; margin-bottom: 4px; }
.pilihan-jenis .kad-pilihan .ket { font-size: 13px; color: var(--teks-lembut); }

/* ------------------------------------------------------------ portal ahli */

.portal-kepala { background: #fff; border-bottom: 1px solid var(--sempadan); }
.portal-kepala .baris {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.portal-kepala .jenama { display: flex; align-items: center; gap: 10px; }
.portal-kepala .jenama .lambang { width: 34px; height: 34px; }
.portal-kepala .jenama strong { display: block; font-size: 15px; }
.portal-kepala .jenama span { font-size: 12px; color: var(--teks-lembut); }
.portal-nav {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 0 12px;
  overflow-x: auto;
}
.portal-nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--teks-lembut);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--peralihan), border-color var(--peralihan);
}
.portal-nav a svg { width: 16px; height: 16px; opacity: .8; }
.portal-nav a.aktif { color: var(--hijau); border-bottom-color: var(--hijau); font-weight: 600; }
.lencana-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--merah);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.portal-kandungan { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; display: grid; gap: 18px; }
.portal-kaki {
  text-align: center;
  font-size: 12px;
  color: var(--teks-pudar);
  padding: 16px;
  border-top: 1px solid var(--sempadan);
  background: #fff;
}
.portal-kaki .hakcipta { margin-top: 4px; }

.kaki-halaman { text-align: center; font-size: 12px; color: var(--teks-pudar); padding: 24px 0 4px; }
.log-kaki-hakcipta { text-align: center; font-size: 12px; color: rgba(255, 255, 255, .75); }

.kad-ahli {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hijau) 0%, var(--hijau-gelap) 100%);
  color: #fff;
  box-shadow: var(--bayang);
}
.kad-ahli .isi-atas { padding: 18px 20px; }
.kad-ahli .isi-atas .label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.kad-ahli .isi-atas .nama-ahli { margin: 4px 0 0; font-size: 19px; font-weight: 700; }
.kad-ahli .isi-atas .no-ahli { margin: 2px 0 0; font-family: monospace; font-size: 14px; opacity: .9; }
.kad-ahli .grid-bawah { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: rgba(255, 255, 255, .15); }
.kad-ahli .kotak { padding: 10px 16px; }
.kad-ahli .kotak .l { font-size: 11px; opacity: .8; }
.kad-ahli .kotak .n { font-weight: 600; }

.status-tahap { border-radius: var(--jejari); border: 1px solid; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.status-tahap svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.status-tahap .isi p { margin: 0; }
.status-tahap .isi p.nota { margin-top: 3px; font-size: 13px; opacity: .9; }
.status-tahap.tiada        { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.status-tahap.belum_tempoh { border-color: #bae6fd; background: #f0f9ff; color: #075985; }
.status-tahap.tunggak      { border-color: #fde68a; background: #fffbeb; color: #78350f; }
.status-tahap.peringatan   { border-color: #fed7aa; background: #fff7ed; color: #7c2d12; }
.status-tahap.berhenti     { border-color: #fecaca; background: #fef2f2; color: #7f1d1d; }

.ringkas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.ringkas-grid .ringkas { background: var(--kad); border: 1px solid var(--sempadan); border-radius: var(--jejari); padding: 14px 16px; }
.ringkas-grid .ringkas .label { font-size: 12px; color: var(--teks-lembut); }
.ringkas-grid .ringkas .nilai { font-size: 18px; font-weight: 700; margin-top: 2px; }

/* Skrin status permohonan (menunggu/ditolak/tiada) - guna gaya .skrin-masuk. */
.skrin-status { text-align: center; }
.skrin-status .lencana-besar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.skrin-status .lencana-besar.menunggu { background: var(--kuning-muda); color: var(--kuning); }
.skrin-status .lencana-besar.ditolak  { background: var(--merah-muda); color: var(--merah); }

/* --------------------------------------------------- pratonton slip/resit */

.pratonton-slip { position: fixed; inset: 0; z-index: 80; padding: 24px; }
.pratonton-slip:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.pratonton-slip-latar { position: absolute; inset: 0; background: rgba(15, 23, 42, .72); }
.pratonton-slip-isi { position: relative; max-width: min(92vw, 640px); max-height: 88vh; }
.pratonton-slip-isi img { display: block; max-width: 100%; max-height: 88vh; border-radius: var(--jejari); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.pratonton-slip-tutup {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--teks);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.pratonton-slip-tutup:hover { background: var(--latar); }