/* =====================================================================
   SMART CIRCLE · TEMA "BIRU DIRAJA" (neumorfik cerah, ikut logo baharu)
   Dimuatkan SELEPAS css/gaya.css dan css/tema-cerah.css, dan menimpa kedua-duanya.
   Prinsip:
   - Satu latar cerah kebiruan (#e9eef8); kad & butang "timbul" lembut (neumorfik).
   - Biru (cyan → biru diraja) untuk tindakan biasa; EMAS untuk tindakan utama (QR, log masuk).
   - Pantulan cahaya pada butang berwarna (kilauan atas + jalur cahaya yang melintas).
   Untuk kembali ke tema lama: buang <link href="css/tema-biru.css"> dalam index.html.
   ===================================================================== */
:root{
  --malam:#e9eef8; --nila:#e9eef8; --nila2:#f1f4fb;
  --kaca:rgba(11,26,68,.035); --kaca2:rgba(11,26,68,.06);
  --garis:rgba(11,26,68,.10); --garis2:rgba(217,136,6,.45);
  --teks:#0b1a44; --lembut:#3c4a6e; --redup:#4b5879;
  --zamrud:#1f5fe0; --zamrud2:#1238b8; --emas:#7d4f00; --emas2:#6a4200;
  --hi:#ffffff; --lo:#c4cee2;
  --g-biru:linear-gradient(135deg,#2593f5 0%,#1a5ee8 48%,#1238b8 100%);
  --g-emas:linear-gradient(135deg,#ffe07a 0%,#f8b51c 55%,#d98806 100%);
  --timbul:8px 8px 18px var(--lo),-8px -8px 18px var(--hi);
  --timbul-k:4px 4px 10px var(--lo),-4px -4px 10px var(--hi);
  --tenggelam:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi);
}
html,body{background:var(--malam);color:var(--teks)}
::selection{background:rgba(31,116,255,.22)}

/* ---------- tipografi: tajuk moden tebal (bukan serif) ---------- */
.font-papar,.kpi .n{font-family:Outfit,system-ui,sans-serif!important;font-weight:700;letter-spacing:-.01em}

/* ---------- latar: cahaya biru & emas yang lembut ---------- */
.latar{background:
  radial-gradient(800px 520px at -5% -10%,rgba(46,139,255,.20),transparent 60%),
  radial-gradient(640px 460px at 105% 18%,rgba(255,194,58,.16),transparent 55%),
  radial-gradient(700px 520px at 20% 110%,rgba(51,201,255,.16),transparent 60%),
  var(--malam)}
.latar::before{opacity:0}
.latar i{opacity:.10;filter:blur(110px)}
.latar .a1{background:#2e8bff}.latar .a2{background:#33c9ff}.latar .a3{background:#ffc23a;opacity:.12}

/* ---------- kad: timbul lembut ---------- */
.kad{background:var(--malam);border:1px solid rgba(255,255,255,.55);box-shadow:var(--timbul)}
.kad-tajuk{color:var(--lembut)}
.label-emas{color:var(--emas)}
.kpi::after{background:radial-gradient(circle,rgba(31,116,255,.08),transparent 70%)}
.kad[style*="linear-gradient"]{background-color:var(--malam)!important}
.kad[onclick]:hover{box-shadow:10px 10px 22px var(--lo),-10px -10px 22px var(--hi);border-color:rgba(255,255,255,.8)}

/* ---------- panel sambutan (section.kad-emas): biru diraja ---------- */
section.kad-emas{
  --emas:#ffd46a;--emas2:#f8b51c;--zamrud:#9fdcff;
  border-color:rgba(255,212,106,.45);
  background:
    radial-gradient(520px 300px at 100% 0%,rgba(255,194,58,.30),transparent 60%),
    radial-gradient(420px 260px at 0% 100%,rgba(63,210,255,.30),transparent 60%),
    linear-gradient(135deg,#1659e0 0%,#1238b8 55%,#0b1a6a 100%);
  box-shadow:0 24px 48px -24px rgba(18,56,184,.8),var(--timbul-k)}
section.kad-emas .gelang{background:conic-gradient(#ffd46a calc(var(--p)*1%),rgba(255,255,255,.18) 0)}
section.kad-emas .gelang>div{background:#1446c9}
section.kad-emas [style*="color:#a16207"],section.kad-emas [style*="color:#c2410c"]{color:#ffd46a!important}
section.kad-emas [style*="color:#0f766e"]{color:#9ff0d8!important}
section.kad-emas .inp,section.kad-emas .ic-mata,section.kad-emas .pil,section.kad-emas .modul-cip,section.kad-emas .slot,
section.kad-emas .cip-pilih,section.kad-emas .libat,section.kad-emas .btn-merah,section.kad-emas .kad:not(.kad-emas){
  --teks:#0b1a44;--lembut:#46557a;--redup:#5a6788;--emas:#9a6200;--zamrud:#1f5fe0;--garis:rgba(11,26,68,.10);color:#0b1a44}

/* ---------- div.kad-emas: kad makluman berbingkai emas ---------- */
div.kad-emas{background:linear-gradient(140deg,#fff6dc 0%,#f4f6fc 60%);border-color:#f3d48a;box-shadow:var(--timbul)}

/* ---------- kerangka ---------- */
.atas{background:rgba(233,238,248,.88);border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 8px 22px -16px rgba(11,26,68,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav a{color:var(--lembut);border-radius:14px}
.nav a:hover{background:rgba(31,116,255,.07);color:var(--teks)}
.nav a.on{background:var(--g-biru);color:#fff;font-weight:600;box-shadow:0 10px 20px -12px #1238b8;position:relative;overflow:hidden}
.nav a.on i{color:#ffd46a}
.nav a .kira{background:var(--g-emas);color:#2a1a02}
.bawah{background:rgba(233,238,248,.94);border-top:1px solid rgba(255,255,255,.7);box-shadow:0 -10px 30px -18px rgba(11,26,68,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bawah a{color:var(--redup)}
.bawah a.on{color:var(--zamrud2);font-weight:700}
.bawah a.on i{background:var(--g-biru);color:#ffd46a;width:42px;height:30px;line-height:30px;border-radius:12px;box-shadow:0 8px 14px -8px #1238b8;transform:translateY(-2px)}

/* ---------- butang ---------- */
.btn{border-radius:14px}
.btn-utama{background:var(--g-biru);color:#fff;border:0;
  box-shadow:0 14px 26px -14px #1238b8,0 0 22px -10px rgba(63,182,255,.7),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(10,35,112,.25)}
.btn-emas{background:var(--g-emas);color:#0a1a44;border:0;
  box-shadow:0 14px 26px -12px #d98806,0 0 22px -8px rgba(255,194,58,.7),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(168,101,0,.25)}
.btn-kaca{background:var(--malam);border:1px solid rgba(255,255,255,.6);color:var(--teks);box-shadow:var(--timbul-k)}
.btn-kaca:hover{background:#eef2fa;border-color:rgba(255,255,255,.9)}
.btn-kaca:active{box-shadow:var(--tenggelam)}
.btn-merah{background:#fff0f2;border-color:#fbc4cd;color:#b4233c}
.btn-wa{background:linear-gradient(135deg,#22b85a,#139445 55%,#0b6e31);color:#fff;box-shadow:0 8px 16px -8px #0f8a3e,inset 0 1px 0 rgba(255,255,255,.5);position:relative;overflow:hidden}
.btn-utama:hover,.btn-emas:hover,.btn-wa:hover{filter:brightness(1.06)}
.btn-utama:active,.btn-emas:active{transform:scale(.97) translateY(1px);box-shadow:0 4px 10px -6px rgba(11,26,68,.45),inset 0 2px 6px rgba(0,0,0,.18)}

/* pantulan cahaya: kilauan atas + jalur cahaya yang melintas */
.btn-utama::before,.btn-emas::before,.btn-wa::before,.nav a.on::before{content:"";position:absolute;left:6%;right:6%;top:2px;height:45%;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));pointer-events:none}
.btn-utama::after,.btn-emas::after{content:"";position:absolute;top:-20%;left:-45%;width:26%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-22deg);pointer-events:none;animation:sc-kilau 5s ease-in-out infinite}
.btn-emas::after{animation-delay:1.4s}
@keyframes sc-kilau{0%,62%{left:-45%}86%,100%{left:130%}}
.btn>i,.btn>span:not(.riak){position:relative}
.btn-utama,.nav a.on,.slot.DISAHKAN,.cip-pilih.on,.btn-wa{text-shadow:0 1px 2px rgba(8,24,80,.45)}
.bawah a.on i,.nav a.on i{text-shadow:0 1px 2px rgba(8,24,80,.5)}

/* ---------- input: tenggelam ---------- */
.inp{background:var(--malam);border:1px solid transparent;color:var(--teks);box-shadow:var(--tenggelam)}
.inp:focus{border-color:rgba(31,116,255,.45);box-shadow:var(--tenggelam),0 0 0 3px rgba(31,116,255,.14)}
.inp::placeholder{color:#7783a0}
select.inp option{background:#fff;color:var(--teks)}
.btn:focus-visible,.inp:focus-visible,.tab:focus-visible{outline-color:var(--zamrud)}

/* ---------- tab log masuk ---------- */
.tab.bg-white\/10{background:var(--malam);color:var(--zamrud2);box-shadow:var(--timbul-k)}
.bg-black\/25.rounded-2xl,.bg-black\/20,.bg-black\/25{background-color:var(--malam)}
.flex.gap-1.p-1.rounded-2xl.bg-black\/25{box-shadow:var(--tenggelam)}

/* ---------- lencana, slot, cip ---------- */
.st-DIHANTAR,.st-MENUNGGU{background:#fdf1d2;color:#7a4c00;border-color:#f3dc9c}.pr-SEKRETARIAT{background:#fdf1d2;color:#7a4c00}
.st-DISAHKAN,.st-AKTIF{background:#dff6ec;color:#0b7a4f;border-color:#b5e8d2}
.st-BERLANGSUNG{background:#e3edff;color:#1d4ed8;border-color:#c3d6fb}
.pr-NAQIB{background:#e3edff;color:#1d4ed8}
.slot{background:var(--malam);border-color:transparent;box-shadow:var(--tenggelam)}
.slot.DISAHKAN{background:var(--g-biru);color:#fff;box-shadow:0 8px 14px -8px #1238b8}
.slot.BERLANGSUNG{background:var(--g-emas);color:#2a1a02;border-color:transparent;box-shadow:0 8px 14px -8px #d98806}
.modul-cip{background:var(--malam);border-color:rgba(255,255,255,.6);box-shadow:var(--timbul-k)}
.modul-cip.on{background:#e3edff;border-color:#a9c4fb;color:#1238b8}
.cip-pilih,.pil-tapis,.libat{background:var(--malam);border-color:rgba(255,255,255,.6);box-shadow:var(--timbul-k)}
.cip-pilih.on{background:var(--g-biru);border-color:transparent;color:#fff}
.libat.on{background:var(--g-emas);border-color:transparent;color:#2a1a02}
.bar{background:var(--malam);box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.gelang{background:conic-gradient(#1f74ff calc(var(--p)*1%),rgba(11,26,68,.08) 0)}
.gelang>div{background:var(--malam);box-shadow:var(--timbul-k)}
.ic-mata{background:var(--malam);box-shadow:var(--timbul-k)}
.qr-besar{box-shadow:0 0 0 8px rgba(31,116,255,.08),0 24px 60px -20px rgba(18,56,184,.45)}
.identiti{background:var(--malam);border-color:rgba(255,255,255,.55);box-shadow:var(--timbul)}
.id-sel{background:var(--malam);box-shadow:var(--tenggelam)}


/* ---------- jadual, modal, toast ---------- */
.jadual th{color:var(--redup);border-bottom-color:rgba(11,26,68,.1)}
.jadual td{border-bottom-color:rgba(11,26,68,.06)}
.jadual tr:hover td{background:rgba(31,116,255,.04)}
#lapisan .lapis{background:rgba(11,26,68,.35)}
#lapisan .tetingkap .kad{background:#eef2fa;box-shadow:0 30px 70px -20px rgba(11,26,68,.5)}
#toast{background:#0b1a44;border-color:rgba(255,194,58,.5);color:#fff;box-shadow:0 20px 40px -12px rgba(11,26,68,.55)}
.bg-\[color\:var\(--emas\)\]{background:var(--g-emas)}
.group:hover .group-hover\:text-white{color:var(--zamrud2)}
[style*="color:#5eead4"]{color:#1f5fe0!important}

/* ---------- muka depan (log masuk) ---------- */
.mk-sinar{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;animation:mk-apung 16s ease-in-out infinite alternate}
.mk-s1{width:420px;height:420px;background:#2e8bff;opacity:.28;left:-160px;top:-120px}
.mk-s2{width:360px;height:360px;background:#ffc23a;opacity:.22;right:-140px;top:38%;animation-delay:-6s}
.mk-s3{width:380px;height:380px;background:#33c9ff;opacity:.24;left:10%;bottom:-200px;animation-delay:-11s}
@keyframes mk-apung{to{transform:translate(70px,40px) scale(1.12)}}
.mk-telaga{width:136px;height:136px;border-radius:50%;display:grid;place-items:center;position:relative;background:var(--malam);box-shadow:var(--timbul);margin:0 auto}
.mk-gelang{position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 30deg,#3fd2ff,#1f74ff,#ffc23a,#3fd2ff);
  -webkit-mask:radial-gradient(circle,transparent 67px,#000 68px);mask:radial-gradient(circle,transparent 67px,#000 68px);filter:drop-shadow(0 0 8px #3fb6ff);animation:mk-pusing 9s linear infinite}
@keyframes mk-pusing{to{transform:rotate(360deg)}}
.mk-telaga img{width:92px;height:92px;border-radius:24px;box-shadow:0 12px 22px -8px rgba(0,0,0,.5);animation:mk-terapung 5s ease-in-out infinite}
@keyframes mk-terapung{50%{transform:translateY(-5px)}}
.mk-nama{margin-top:22px;text-align:center}
.mk-nama b{display:block;font:800 40px/1 Outfit,system-ui,sans-serif;letter-spacing:.04em;color:#0b1a44}
.mk-nama span{display:block;font:700 15px Outfit,system-ui,sans-serif;letter-spacing:.62em;padding-left:.62em;margin-top:8px;background:linear-gradient(135deg,#f5a90f,#c97a00 55%,#9a5a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-arka{width:210px;height:10px;margin:6px auto 0;border-top:2px solid #f8b51c;border-radius:50%;filter:drop-shadow(0 0 6px #ffc23a)}
.mk-panel{background:rgba(255,255,255,.42)!important;border:1px solid rgba(255,255,255,.8)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mk-kandungan{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){.btn-utama::after,.btn-emas::after,.mk-sinar,.mk-gelang,.mk-telaga img{animation:none}}

/* kehadiran naqib (kumpulan 2 naqib) */
.kotak-naqib{background:var(--malam);box-shadow:var(--tenggelam)}
.pilih-naqib{background:var(--malam);box-shadow:var(--timbul-k)}
.pilih-naqib:has(input:checked){box-shadow:inset 3px 3px 7px #c3cde0,inset -3px -3px 7px #fff;color:#1238b8;font-weight:600}
.lencana-hadir{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600}
.lencana-hadir.ya{background:rgba(20,179,107,.12);color:#0b6e3f}
.lencana-hadir.tidak{background:rgba(229,72,77,.12);color:#a3262b}