/* ===================================================================
   Portal Sistem Majlis Daerah Keningau  -  gaya_portal.css
   =================================================================== */
:root{
  --navy:#12395B;
  --navy-gelap:#0B2740;
  --hijau:#1F7A5A;
  --garis:#B9C6D2;
  --muda:#EEF3F7;
  --kelabu:#5A6672;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Arial,Helvetica,sans-serif;color:#1c2733;
  background:var(--navy-gelap);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(31,122,90,.30), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(18,57,91,.85), transparent 55%);
  min-height:100vh;
}
.portal{
  max-width:1000px;margin:0 auto;padding:34px 18px 26px;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ---------- kepala ---------- */
.kepala{text-align:center;color:#fff;margin-bottom:26px}
.jata{
  width:82px;height:82px;margin:0 auto 14px;border-radius:50%;
  background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:bold;letter-spacing:1px;
  box-shadow:0 3px 12px rgba(0,0,0,.30);overflow:hidden;
}
/* Logo imej: dipapar terus tanpa bulatan putih tambahan, kerana logo
   Majlis sudah mempunyai bingkai bulat sendiri. */
.jata-imej{
  width:auto;height:auto;background:none;box-shadow:none;
  border-radius:0;padding:0;margin-bottom:16px;
}
.jata-imej img{
  width:120px;height:120px;object-fit:contain;display:block;margin:0 auto;
  background:#fff;border-radius:50%;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.selamat-datang{
  font-size:12px;letter-spacing:4px;text-transform:uppercase;
  color:#9FD5C0;margin:0 0 8px;font-weight:bold;
}
.kepala h1{font-size:23px;margin:0;letter-spacing:.4px}
.alamat{margin:4px 0 0;font-size:12.5px;opacity:.75}
.tajuk-portal{
  margin:14px 0 0;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  opacity:.85;
}
.tajuk-portal::before,.tajuk-portal::after{
  content:'';display:inline-block;width:34px;height:1px;
  background:rgba(255,255,255,.45);vertical-align:middle;margin:0 12px;
}

/* ---------- kandungan ---------- */
.kandungan{flex:1}
.arahan{text-align:center;color:#fff;opacity:.8;font-size:13px;margin:0 0 18px}

.grid-sistem{
  display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;
}
.kad-sistem{
  flex:1 1 340px;min-width:280px;max-width:calc(50% - 10px);
  background:#fff;border-radius:10px;overflow:hidden;text-decoration:none;
  color:inherit;display:flex;flex-direction:column;
  box-shadow:0 4px 16px rgba(0,0,0,.24);
  border-top:5px solid var(--warna);
  transition:transform .15s ease, box-shadow .15s ease;
}
.kad-sistem:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.32)}

.kad-atas{padding:16px 20px 0}
.lencana-sistem{
  display:inline-block;background:var(--warna);color:#fff;
  padding:5px 14px;border-radius:5px;font-size:17px;font-weight:bold;letter-spacing:.5px;
}
.kad-isi{padding:12px 20px 4px;flex:1}
.kad-isi h2{font-size:14.5px;margin:0 0 8px;color:var(--navy);line-height:1.35}
.kad-isi p{font-size:12.5px;line-height:1.55;color:var(--kelabu);margin:0 0 10px}
.kad-isi ul{margin:0;padding-left:16px}
.kad-isi li{font-size:12px;color:#33414f;margin-bottom:4px;line-height:1.45}

.kad-bawah{padding:12px 20px 18px}
.butang-masuk{
  display:inline-block;background:var(--warna);color:#fff;
  padding:9px 18px;border-radius:5px;font-size:13px;font-weight:bold;
}
.kad-sistem:hover .butang-masuk{filter:brightness(1.12)}

.notis{
  margin:26px auto 0;max-width:640px;text-align:center;
  color:rgba(255,255,255,.72);font-size:11.5px;line-height:1.6;
  border-top:1px solid rgba(255,255,255,.2);padding-top:16px;
}

/* ---------- kaki ---------- */
.kaki{
  text-align:center;color:rgba(255,255,255,.55);font-size:11px;
  margin-top:26px;padding-top:12px;
}
.ralat-kecil{color:#FFB4AC}

@media (max-width:760px){
  .kad-sistem{max-width:100%}
}
@media (max-width:520px){
  .kepala h1{font-size:18px}
  .portal{padding:24px 14px}
}