/* =====================================================================
   sistem.css — Reka bentuk premium berlapis (glassmorphism PTSS)
   Warna: biru institusi PTSS + cahaya cyan + aksen emas
   Struktur & nama kelas dikekalkan supaya semua halaman berfungsi.
   Fon: Sora (tajuk) + Inter (teks). Dimuatkan oleh layout.php.
   ===================================================================== */

:root {
  --navy-900:#071a30; --navy-800:#0a2540; --navy-700:#0e3358; --navy-600:#134b86;
  --blue-500:#1e6fd9; --blue-400:#3a86e0; --blue-300:#6aa8ee;
  --sky-400:#38bdf8;  --sky-300:#7dd3fc;
  --gold-400:#f5c451; --gold-300:#ffde8a;
  --ink:#0f1e33; --slate-500:#5b6b82; --slate-400:#8090a6;
  --mist:#eef3fb; --line:rgba(19,75,134,.12);
  --hijau:#16a34a; --hijau-2:#15803d; --merah:#dc2626; --amber:#b7791f;

  --kaca-bg:rgba(255,255,255,.66);
  --kaca-bg2:rgba(255,255,255,.80);
  --kaca-brd:rgba(255,255,255,.75);
  --bayang-lembut:0 18px 40px -18px rgba(14,51,88,.28), 0 6px 14px -8px rgba(14,51,88,.16);
  --bayang-timbul:0 34px 60px -24px rgba(14,51,88,.38), 0 12px 24px -12px rgba(30,111,217,.26);
  --r:16px;
}

/* ========== ASAS ========== */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  color:var(--ink); line-height:1.6; min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 82% -6%, #e2edff 0%, rgba(226,237,255,0) 60%),
    radial-gradient(1000px 800px at 4% 10%, #eaf6ff 0%, rgba(234,246,255,0) 55%),
    linear-gradient(180deg,#f6f9fe 0%, #eef3fb 45%, #f3f7fd 100%);
  background-attachment:fixed;
}

/* ========== LAPISAN AMBIEN (bebola cahaya kabur) — disuntik oleh layout ========== */
.lapisan-ambien { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bebola { position:absolute; border-radius:9999px; filter:blur(72px); will-change:transform; }
.bebola-1 { width:520px; height:520px; top:-130px; right:-90px;
  background:radial-gradient(circle at 30% 30%, var(--blue-300), var(--blue-500) 70%); opacity:.5;
  animation:apung 12s ease-in-out infinite; }
.bebola-2 { width:460px; height:460px; top:40%; left:-150px;
  background:radial-gradient(circle at 40% 40%, var(--sky-300), var(--sky-400) 70%); opacity:.4;
  animation:apung 9s ease-in-out infinite; }
.bebola-3 { width:380px; height:380px; bottom:-70px; right:10%;
  background:radial-gradient(circle at 50% 50%, var(--gold-300), var(--gold-400) 72%); opacity:.3;
  animation:apung 11s ease-in-out infinite reverse; }
@keyframes apung { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-26px) } }

/* ========== HEADER PEMOHON ========== */
header {
  position:relative; overflow:hidden; text-align:center; color:#fff;
  padding:30px 15px 26px; border-radius:0 0 26px 26px;
  background:linear-gradient(135deg,#0e3358 0%, #0a2540 100%);
  box-shadow:0 22px 44px -26px rgba(10,37,64,.6);
}
header::before { content:""; position:absolute; top:-120px; right:-60px; width:340px; height:340px;
  border-radius:50%; background:radial-gradient(circle, rgba(56,189,248,.5), transparent 68%); filter:blur(20px); }
header::after { content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:120px; height:3px; border-radius:3px; background:linear-gradient(90deg, transparent, var(--gold-400), transparent); }
header h1 { position:relative; font-family:'Sora',sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:-.01em; margin-bottom:5px; }
header .sub { position:relative; font-size:.85rem; color:var(--sky-300); font-weight:500; }
header a.balik { position:relative; display:inline-block; margin-top:12px; color:var(--gold-300);
  font-size:.85rem; font-weight:600; text-decoration:none; transition:color .2s, transform .2s; }
header a.balik:hover { color:#fff; transform:translateX(-3px); }

/* ========== KANDUNGAN ========== */
main { max-width:1000px; margin:34px auto; padding:0 20px 60px; display:flex; flex-direction:column; gap:24px; position:relative; z-index:1; }
main.lebar { max-width:1200px; }

/* ---- KAD (kaca berfros) ---- */
.kad, .kaca {
  background:var(--kaca-bg); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--kaca-brd); border-radius:18px; padding:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--bayang-lembut);
  transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.kad:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--bayang-timbul); }
.kad h2 { font-family:'Sora',sans-serif; color:var(--navy-700); font-size:1.2rem; font-weight:600; letter-spacing:-.01em; margin-bottom:16px; }
/* kad boleh klik (kad statistik / navigasi berpusat) — angkat penuh */
.kad[style*="text-align:center"] { cursor:default; }
.kad[style*="text-align:center"]:hover { transform:translateY(-8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--bayang-timbul); }

/* ---- MAKLUMAN ---- */
.makluman { padding:13px 16px 13px 18px; border-radius:12px; margin-bottom:18px; font-size:.9rem; font-weight:500;
  border:1px solid transparent; backdrop-filter:blur(8px); position:relative; animation:muncul-atas .45s ease; }
.makluman-berjaya { background:rgba(22,163,74,.10); color:var(--hijau-2); border-color:rgba(22,163,74,.24); }
.makluman-ralat   { background:rgba(220,38,38,.09);  color:var(--merah);   border-color:rgba(220,38,38,.24); }
.makluman-info    { background:rgba(30,111,217,.09); color:var(--navy-600);border-color:rgba(30,111,217,.22); }
.makluman-amaran  { background:rgba(245,196,81,.14); color:var(--amber);   border-color:rgba(245,196,81,.4); }

/* ---- BORANG ---- */
fieldset { border:1px solid var(--line); border-radius:14px; margin-bottom:20px; padding:18px 20px;
  background:rgba(255,255,255,.4); }
legend { font-family:'Sora',sans-serif; font-weight:600; color:var(--navy-700); padding:0 8px; font-size:.95rem; }
.kump { margin-bottom:15px; }
label { display:block; font-weight:600; margin-bottom:6px; font-size:.86rem; color:var(--ink); }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="time"],
input[type="number"], input[type="password"], input[type="search"], select, textarea {
  width:100%; padding:11px 13px; border:1px solid rgba(19,75,134,.2); border-radius:11px;
  font-size:.9rem; font-family:inherit; color:var(--ink);
  background:rgba(255,255,255,.75); transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder, textarea::placeholder { color:var(--slate-400); }
textarea { resize:vertical; min-height:70px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue-500);
  background:#fff; box-shadow:0 0 0 4px rgba(30,111,217,.14); }
.baris-2 { display:flex; gap:14px; }
.baris-2 .kump { flex:1; }
.senarai-radio { display:flex; flex-direction:column; gap:9px; }
.senarai-radio label { font-weight:500; display:flex; align-items:center; gap:9px; font-size:.9rem; }
.baris-semak { display:flex; gap:24px; flex-wrap:wrap; }
.baris-semak label { font-weight:500; display:flex; align-items:center; gap:8px; font-size:.9rem; }
input[type="radio"], input[type="checkbox"] { width:auto; accent-color:var(--blue-500); transform:scale(1.15); }

.nota { background:rgba(245,196,81,.14); border:1px solid rgba(245,196,81,.4); color:var(--amber);
  font-size:.8rem; padding:11px 14px; border-radius:11px; margin-bottom:15px; }

/* ---- BUTANG ---- */
.btn { position:relative; overflow:hidden; display:inline-block; padding:12px 24px;
  background:linear-gradient(135deg,var(--blue-500),var(--navy-600)); color:#fff; border:none; border-radius:12px;
  font-size:.95rem; font-weight:600; font-family:inherit; cursor:pointer; text-decoration:none; text-align:center;
  box-shadow:0 14px 26px -12px rgba(30,111,217,.6); transition:transform .25s ease, box-shadow .3s ease, filter .3s ease; }
.btn:hover { transform:scale(1.035); filter:brightness(1.06);
  box-shadow:0 20px 40px -12px rgba(30,111,217,.7), 0 0 0 4px rgba(58,134,224,.16); }
.btn:active { transform:scale(.99); }
.btn-penuh { width:100%; display:block; }
.btn-kelabu { background:linear-gradient(135deg,#7c8aa0,#5b6b82); box-shadow:0 14px 26px -14px rgba(91,107,130,.6); }
.btn-kelabu:hover { box-shadow:0 20px 40px -14px rgba(91,107,130,.7), 0 0 0 4px rgba(128,144,166,.16); }

.btn-kecil { position:relative; overflow:hidden; padding:7px 14px; border-radius:9px; border:none; cursor:pointer;
  font-size:.78rem; font-weight:600; color:#fff; text-decoration:none; display:inline-block;
  box-shadow:0 8px 16px -10px rgba(14,51,88,.5); transition:transform .2s, box-shadow .3s, filter .3s; }
.btn-kecil:hover { transform:translateY(-2px); filter:brightness(1.07); }
.btn-lulus { background:linear-gradient(135deg,#22c55e,#15803d); }
.btn-tolak { background:linear-gradient(135deg,#ef4444,#b91c1c); }
.btn-padam { background:linear-gradient(135deg,#ef4444,#b91c1c); }
.btn-batal { background:linear-gradient(135deg,#94a3b8,#64748b); }
.btn-edit  { background:linear-gradient(135deg,var(--blue-500),var(--navy-600)); }
/* Pemohon: butang "Sudah Dipulangkan" (amber) */
.btn-pulang { background:linear-gradient(135deg,#f59e0b,#d97706); }
/* Penerima: butang "Semak" aktif (cyan/teal) */
.btn-semak  { background:linear-gradient(135deg,#06b6d4,#0e7490); }
/* Keadaan lumpuh (kelabu, tidak boleh ditekan) */
.btn-lumpuh { background:linear-gradient(135deg,#cbd5e1,#94a3b8); color:#f8fafc;
  cursor:not-allowed; box-shadow:none; opacity:.85; }
.btn-lumpuh:hover { transform:none; filter:none; }

/* ---- JADUAL ---- */
.bekas-jadual { overflow-x:auto; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.55); }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th, td { padding:11px 13px; border-bottom:1px solid rgba(19,75,134,.08); text-align:left; white-space:nowrap; }
th { background:linear-gradient(135deg,#0e3358,#0a2540); color:#fff; font-family:'Sora',sans-serif; font-weight:600;
  font-size:.8rem; letter-spacing:.02em; position:sticky; top:0; }
th:first-child { border-top-left-radius:0; }
tbody tr { transition:background .18s, box-shadow .18s; }
tbody tr:hover td { background:rgba(30,111,217,.05); box-shadow:inset 3px 0 0 var(--blue-500); }
tbody tr:last-child td { border-bottom:none; }

/* ---- LENCANA / TAG ---- */
.lencana { padding:4px 11px; border-radius:999px; font-size:.76rem; font-weight:600; display:inline-block; }
.tag { padding:4px 11px; border-radius:999px; font-size:.75rem; font-weight:600; display:inline-block;
  border:1px solid transparent; transition:transform .2s; }
.tag-aktif { background:rgba(22,163,74,.12); color:var(--hijau-2); border-color:rgba(22,163,74,.28); }
.tag-selenggara { background:rgba(245,196,81,.16); color:var(--amber); border-color:rgba(245,196,81,.4); }
.tag-mati { background:rgba(220,38,38,.1); color:var(--merah); border-color:rgba(220,38,38,.26); }
.tag:hover, .lencana:hover { transform:scale(1.06); }

/* ---- PROFIL: banner atas + tab (Maklumat Profil / Keselamatan Akaun) ---- */
.profil-banner { display:flex; align-items:center; gap:22px; }
.profil-avatar-gambar, .profil-avatar-huruf {
  width:92px; height:92px; border-radius:50%; flex-shrink:0; border:3px solid var(--navy-800);
}
.profil-avatar-gambar { object-fit:cover; }
.profil-avatar-huruf { background:var(--mist); display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-size:2.1rem; font-weight:700; color:var(--navy-800); }
.profil-banner-teks h2 { font-family:'Sora',sans-serif; color:var(--navy-700); font-size:1.15rem;
  font-weight:600; margin-bottom:4px; }
.profil-banner-teks p { font-size:.85rem; color:var(--slate-500); margin:2px 0; }

.profil-tabs { display:flex; gap:10px; margin:20px 0; flex-wrap:wrap; }
.profil-tab { flex:1; min-width:180px; padding:11px 16px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.7); cursor:pointer; font-family:'Sora',sans-serif; font-weight:600;
  font-size:.88rem; color:var(--navy-700); transition:.2s ease; }
.profil-tab:hover { background:#fff; }
.profil-tab.aktif { background:linear-gradient(135deg,var(--blue-500),var(--navy-600)); color:#fff;
  border-color:transparent; box-shadow:0 14px 26px -12px rgba(30,111,217,.5); }

.profil-panel { display:none; }
.profil-panel.aktif { display:block; animation:muncul-atas .35s ease; }

.pemisah-profil { border:none; border-top:1px dashed var(--line); margin:24px 0; }

@media (max-width:600px) {
  .profil-banner { flex-direction:column; text-align:center; }
}

/* ---- LAIN ---- */
.kosong { text-align:center; padding:40px 20px; color:var(--slate-400); font-size:.92rem; }
.nav { display:flex; gap:14px; flex-wrap:wrap; }
.nav a { position:relative; color:var(--blue-500); text-decoration:none; font-size:.88rem; font-weight:600; padding:2px 0; }
.nav a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--sky-400)); transition:width .25s; }
.nav a:hover::after { width:100%; }

.bar-cari { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.bar-cari input, .bar-cari select { flex:1; min-width:150px; }
.bar-cari .btn { flex:0 0 auto; padding:11px 20px; }

/* ---- FOOTER ---- */
footer { position:relative; overflow:hidden; text-align:center; padding:26px 15px; margin-top:10px;
  background:linear-gradient(135deg,#0e3358,#0a2540); color:#fff; font-size:.85rem; border-radius:26px 26px 0 0; }
footer::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:140px; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--gold-400),transparent); }
footer p { position:relative; color:#cfe0f5; line-height:1.7; }

/* ===================================================================
   PANEL PENTADBIR (sidebar)
   =================================================================== */
.admin-wrap { display:flex; min-height:100vh; position:relative; z-index:1; }
.sidebar { width:238px; flex-shrink:0; display:flex; flex-direction:column; color:#cfe0f5;
  background:linear-gradient(180deg,#0e3358 0%, #0a2540 60%, #071a30 100%);
  box-shadow:0 0 60px -10px rgba(10,37,64,.5); position:relative; }
.sidebar::after { content:""; position:absolute; top:0; right:0; width:1px; height:100%;
  background:linear-gradient(180deg,transparent,rgba(56,189,248,.35),transparent); }
.sidebar .jenama { padding:24px 22px; border-bottom:1px solid rgba(56,189,248,.14); }
.sidebar .jenama h1 { font-family:'Sora',sans-serif; font-size:1.05rem; font-weight:700; color:#fff; }
.sidebar .jenama p { font-size:.74rem; color:var(--sky-300); margin-top:4px; }
.sidebar nav { flex:1; padding:14px 0; }
.sidebar nav a { position:relative; display:block; padding:12px 22px; color:#cfe0f5; text-decoration:none;
  font-size:.88rem; font-weight:500; border-left:3px solid transparent; transition:background .2s, color .2s, border-color .2s; }
.sidebar nav a::before { content:'›'; position:absolute; right:18px; opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s; }
.sidebar nav a:hover { background:rgba(56,189,248,.1); color:#fff; }
.sidebar nav a:hover::before { opacity:1; transform:translateX(0); }
.sidebar nav a.aktif { background:linear-gradient(90deg,rgba(56,189,248,.16),transparent); color:#fff;
  border-left-color:var(--gold-400); font-weight:700; }
.sidebar .bawah { padding:18px 22px; border-top:1px solid rgba(56,189,248,.14); font-size:.8rem; color:#cfe0f5; }
.sidebar .bawah a { color:#ffb3b3; text-decoration:none; font-weight:600; transition:color .2s; }
.sidebar .bawah a:hover { color:#ff8080; }

.admin-isi { flex:1; padding:32px 36px; overflow-x:auto; }
.admin-isi .tajuk-admin { margin-bottom:26px; }
.admin-isi .tajuk-admin h2 { font-family:'Sora',sans-serif; color:var(--navy-800); font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.admin-isi .tajuk-admin p { color:var(--slate-500); font-size:.86rem; margin-top:4px; }

/* ===================================================================
   ANIMASI & INTERAKSI
   =================================================================== */
a, button, .btn, .btn-kecil, input, select, textarea, .kad, tr, .tag, .lencana { transition:all .2s ease; }

@keyframes muncul-atas { from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:translateY(0) } }
@keyframes muncul-skala { from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:scale(1) } }

/* Dedah semasa skrol (dikawal oleh interaktif.js) */
.kad, .masuk { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.kad.tampil, .masuk.tampil { opacity:1; transform:translateY(0); }

/* Riak butang */
.btn .riak, .btn-kecil .riak { position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.5); animation:riak-kesan .6s ease-out; pointer-events:none; }
@keyframes riak-kesan { to{ transform:scale(2.2); opacity:0 } }

/* Spinner hantar borang */
.btn.memuat { color:transparent !important; pointer-events:none; }
.btn.memuat::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:putar .7s linear infinite; }
@keyframes putar { to{ transform:rotate(360deg) } }

/* Input sah / tak sah */
input.sah { border-color:var(--hijau); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
input.tak-sah { border-color:var(--merah); }
.petunjuk-input { font-size:.76rem; margin-top:5px; min-height:15px; transition:color .15s; }
.petunjuk-input.ok { color:var(--hijau-2); }
.petunjuk-input.buruk { color:var(--merah); }

/* Bar kekuatan kata laluan */
.bar-kekuatan { height:6px; border-radius:4px; background:rgba(19,75,134,.12); margin-top:8px; overflow:hidden; }
.bar-kekuatan > span { display:block; height:100%; width:0; border-radius:4px; transition:width .25s, background .25s; }

/* Kiraan aksara */
.kira-aksara { font-size:.74rem; color:var(--slate-400); text-align:right; margin-top:4px; }

/* ========== RESPONSIF ========== */
@media (max-width:720px) {
  .admin-wrap { flex-direction:column; }
  .sidebar { width:100%; }
  .sidebar::after { display:none; }
  .sidebar nav { display:flex; flex-wrap:wrap; padding:8px; }
  .sidebar nav a { border-left:none; border-radius:10px; }
  .sidebar nav a.aktif { border-left:none; }
  .baris-2 { flex-direction:column; }
  .admin-isi { padding:24px 18px; }
  header h1 { font-size:1.25rem; }
}

/* ========== HORMATI KURANG GERAKAN ========== */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; }
  .kad, .masuk { opacity:1 !important; transform:none !important; transition:none !important; }
  .bebola { animation:none !important; }
}