/* =====================================================================
   SMART CIRCLE · TEMA CERAH "embun pagi"
   Dimuatkan SELEPAS css/gaya.css dan menimpa tema gelap.
   Untuk kembali ke tema gelap: buang <link href="css/tema-cerah.css"> dalam index.html.
   Prinsip: latar cerah kehijauan bercorak bintang khatam (seperti sijil),
   kad putih, teks firus gelap. Satu panel firus pekat (section.kad-emas: kad sambutan) sebagai identiti;
   div.kad-emas (makluman, pendaftaran menunggu, sijil) = kad putih berbingkai emas.
   ===================================================================== */
:root{
  --malam:#eaf4f2; --nila:#ffffff; --nila2:#f3f8f7;
  --kaca:rgba(15,52,55,.04); --kaca2:rgba(15,52,55,.065);
  --garis:rgba(15,52,55,.10); --garis2:rgba(201,138,18,.40);
  --teks:#0f3437; --lembut:#435f63; --redup:#587377;
  --zamrud:#0b7f72; --zamrud2:#08665c; --emas:#8f5e00; --emas2:#7a5000;
  --ungu:#7c3aed; --merah:#d9334f; --biru:#2563eb; --jingga:#ea580c;
  color-scheme:light;
}
html,body{background:var(--malam);color:var(--teks)}
::selection{background:rgba(15,157,140,.22)}
::-webkit-scrollbar-thumb{background:rgba(15,52,55,.18)}

/* ---------- latar: embun + corak bintang khatam ---------- */
.latar{background:
  radial-gradient(900px 520px at 0% -10%,rgba(20,184,166,.16),transparent 60%),
  radial-gradient(700px 480px at 105% 0%,rgba(242,193,78,.16),transparent 55%),
  linear-gradient(180deg,#f2f9f7,#eaf4f2 55%,#e4efed)}
.latar::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230f9d8c' stroke-opacity='.10' stroke-width='1'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.latar i{opacity:.20;filter:blur(110px)}
.latar .a1{background:#5eead4}.latar .a2{background:#99f6e4}.latar .a3{background:#fcd34d;opacity:.18}
#bintang{display:none}

/* ---------- kad ---------- */
.kad{background:#fff;border:1px solid rgba(15,52,55,.08);
  box-shadow:0 1px 2px rgba(15,52,55,.05),0 14px 34px -22px rgba(15,52,55,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
.kad-tajuk{color:var(--lembut)}
.label-emas{color:var(--emas)}
.kpi .n{color:var(--teks)}
.kpi::after{background:radial-gradient(circle,rgba(15,157,140,.07),transparent 70%)}

/* ---------- panel identiti: firus pekat dengan corak khatam ---------- */
section.kad-emas{
  --teks:#ffffff; --lembut:rgba(255,255,255,.84); --redup:rgba(255,255,255,.66);
  --emas:#f6cf6a; --emas2:#e3a72f; --zamrud:#7ef0df; --garis:rgba(255,255,255,.18);
  --kaca:rgba(255,255,255,.08); --kaca2:rgba(255,255,255,.14);
  color:#fff;border-color:rgba(246,207,106,.45);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(500px 300px at 100% 0%,rgba(246,207,106,.28),transparent 60%),
    linear-gradient(135deg,#0a5f58 0%,#0d8072 55%,#12998a 100%);
  box-shadow:0 22px 48px -24px rgba(10,95,88,.75)}
section.kad-emas .text-white{color:#fff}
section.kad-emas .kad-tajuk{color:rgba(255,255,255,.8)}
section.kad-emas .btn-kaca{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
section.kad-emas .btn-kaca:hover{background:rgba(255,255,255,.22)}
section.kad-emas .gelang{background:conic-gradient(#f6cf6a calc(var(--p)*1%),rgba(255,255,255,.18) 0)}
section.kad-emas .gelang>div{background:#0b6c63}
/* kawalan borang di dalam panel firus kekal berwarna gelap atas putih */
section.kad-emas b.text-white{color:#fff}
section.kad-emas .text-white\/15{color:rgba(255,255,255,.3)}
/* unsur berlatar cerah di dalam panel firus: kembalikan warna gelap supaya jelas */
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:#0f3437;--lembut:#435f63;--redup:#587377;--emas:#9a6500;--zamrud:#0d8072;--garis:rgba(15,52,55,.10);color:#0f3437}
section.kad-emas .slot.DISAHKAN{color:#fff}
section.kad-emas .modul-cip.on{color:#0b6e66}

/* ---------- div.kad-emas: kad makluman putih berbingkai emas ---------- */
div.kad-emas{background:linear-gradient(140deg,#fff8e6 0%,#ffffff 55%);border-color:#efd08a;
  box-shadow:0 1px 2px rgba(15,52,55,.05),0 14px 34px -22px rgba(168,111,5,.45)}

/* ---------- kerangka ---------- */
.atas{background:rgba(255,255,255,.86);border-bottom:1px solid rgba(15,52,55,.08);box-shadow:0 6px 20px -16px rgba(15,52,55,.35)}
.nav a{color:var(--lembut)}
.nav a:hover{background:rgba(15,157,140,.07);color:var(--teks)}
.nav a.on{background:linear-gradient(120deg,rgba(15,157,140,.16),rgba(15,157,140,.04));color:var(--zamrud2);font-weight:600}
.nav a .kira{background:#f2c14e;color:#3b2600}
.bawah{background:rgba(255,255,255,.94);border-top:1px solid rgba(15,52,55,.08);box-shadow:0 -10px 30px -18px rgba(15,52,55,.4)}
.bawah a{color:var(--redup);transition:color .2s}
.bawah a.on{color:var(--zamrud2);font-weight:600}
.bawah a.on i{transform:translateY(-2px)}
.bawah a i{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.bawah a:active i{transform:scale(.82)}

/* ---------- butang & input ---------- */
.btn{color:var(--teks);position:relative;overflow:hidden}
.btn-utama{background:linear-gradient(135deg,#0d9488,#0b6e66);color:#fff;box-shadow:0 10px 22px -12px rgba(13,128,114,.8)}
.btn-emas{background:linear-gradient(135deg,#f6cf6a,#e3a72f);color:#3b2600;box-shadow:0 10px 22px -12px rgba(201,138,18,.8)}
.btn-kaca{background:#fff;border-color:rgba(15,52,55,.14);color:var(--teks)}
.btn-kaca:hover{background:#f1f8f7;border-color:rgba(15,157,140,.35)}
.btn-merah{background:#fff0f2;border-color:#fbc4cd;color:#b4233c}
.btn-utama:hover,.btn-emas:hover{filter:brightness(1.05)}
.inp{background:#fff;border-color:rgba(15,52,55,.16);color:var(--teks)}
.inp:focus{border-color:var(--zamrud);box-shadow:0 0 0 3px rgba(15,157,140,.16)}
.inp::placeholder{color:#6b8589}
select.inp option{background:#fff;color:var(--teks)}
.lbl{color:var(--lembut)}
.btn:focus-visible,.inp:focus-visible,.tab:focus-visible{outline-color:var(--zamrud)}

/* ---------- lencana status & peranan ---------- */
.st-DIRANCANG{background:#eef2f6;color:#475569;border-color:#dbe3ec}
.st-BERLANGSUNG{background:#e6f0ff;color:#1d4ed8;border-color:#c7dafc}
.st-DIHANTAR,.st-MENUNGGU{background:#fef5dc;color:#92600a;border-color:#f8e2a6}
.st-DISAHKAN,.st-AKTIF{background:#ddf6f1;color:#0b6e66;border-color:#b4e9df}
.st-DIKEMBALIKAN,.st-TARIK,.st-DITOLAK{background:#ffe8ec;color:#b4233c;border-color:#fbc4cd}
.st-ALUMNI{background:#efe9ff;color:#6d28d9}
.pr-SEKRETARIAT{background:#fef5dc;color:#92600a}.pr-MURABBI{background:#efe9ff;color:#6d28d9}
.pr-NAQIB{background:#e6f0ff;color:#1d4ed8}.pr-AHLI{background:#eef2f6;color:#475569}

/* ---------- jadual, bar, gelang ---------- */
.bar{background:rgba(15,52,55,.08)}
.jadual th{color:var(--redup);border-bottom-color:rgba(15,52,55,.1)}
.jadual td{border-bottom-color:rgba(15,52,55,.06)}
.jadual tr:hover td{background:#f4faf9}
.gelang{background:conic-gradient(var(--zamrud) calc(var(--p)*1%),rgba(15,52,55,.08) 0)}
.gelang>div{background:#fff;box-shadow:inset 0 0 0 1px rgba(15,52,55,.06)}

/* ---------- modal & toast ---------- */
#lapisan .lapis{background:rgba(9,44,46,.38);backdrop-filter:blur(5px)}
#lapisan .tetingkap .kad{box-shadow:0 30px 70px -20px rgba(9,44,46,.5)}
#toast{background:#0f3437;border-color:rgba(242,193,78,.5);color:#fff;box-shadow:0 20px 40px -12px rgba(9,44,46,.55)}

/* ---------- slot sesi, cip, penilaian ---------- */
.slot{background:#f4f8f8;color:var(--redup);border-color:rgba(15,52,55,.1)}
.slot.DIRANCANG{color:#64748b;border-color:#cbd5e1}
.slot.BERLANGSUNG{background:#e6f0ff;color:#1d4ed8;border-color:#93b4f5}
.slot.DIHANTAR{background:#fef5dc;color:#92600a;border-color:#f3d27e}
.slot.DISAHKAN{background:linear-gradient(135deg,#0d9488,#0b6e66);color:#fff}
.slot.DIKEMBALIKAN{background:#ffe8ec;color:#b4233c;border-color:#f7a8b6}
.modul-cip{background:#f2f7f7;border-color:rgba(15,52,55,.1);color:var(--lembut)}
.modul-cip.on{background:#ddf6f1;border-color:#8fdccf;color:#0b6e66}
.bintang button{color:#cdd8da}
.qr-besar{box-shadow:0 0 0 8px rgba(15,157,140,.08),0 24px 60px -20px rgba(13,128,114,.45)}
.ic-mata{background:#eef4f4;color:var(--lembut)}
.ic-mata:hover{background:#fef5dc;color:var(--emas)}
.cip-pilih,.pil-tapis{border-color:rgba(15,52,55,.14);background:#fff;color:var(--lembut)}
.cip-pilih.on{border-color:#5fcfbf;background:#ddf6f1;color:#0b6e66}
.pil-tapis.on{color:var(--teks)}
.libat{border-color:rgba(15,52,55,.12);background:#fff;color:var(--lembut)}
.libat.on{border-color:#e3a72f;background:#fef5dc;color:#92600a}
.logo-hero{box-shadow:0 24px 60px -24px rgba(9,44,46,.55),0 0 0 1px rgba(201,138,18,.25)}

/* ---------- kad identiti pengguna ---------- */
.identiti{background:#fff;border-color:rgba(15,52,55,.08);box-shadow:0 14px 34px -24px rgba(15,52,55,.4)}
.id-peranan>i{color:#fff}
.id-nama{color:var(--teks)}
.id-sel{background:#f4f8f8}
.id-nilai.amaran{color:#b45309}

/* ---------- kad bertona (warna ditetapkan dalam JS): beri asas putih ---------- */
.kad[style*="linear-gradient"]{background-color:#fff!important}
[style*="color:#fda4af"]{color:#e11d48!important}
[style*="color:#5eead4"]{color:#0d8072!important}
/* kotak persetujuan PDPA (versi gelap) di borang daftar */
.pdpa-setuju.gelap{background:#f8fafc;border-color:#cbd5e1;color:#334155}
.pdpa-setuju.gelap i{color:#64748b}

/* ---------- utiliti Tailwind yang dahulunya untuk latar gelap ---------- */
/* .text-white kekal putih (avatar, butang berwarna); hanya penekanan <b> dan teks hover ditukar */
b.text-white{color:var(--teks)}
.group:hover .group-hover\:text-white{color:var(--zamrud2)}
.text-white\/15{color:rgba(15,52,55,.18)}
.bg-white\/\[\.02\]{background-color:rgba(15,52,55,.025)}
.bg-white\/\[\.03\]{background-color:rgba(15,52,55,.035)}
.bg-white\/\[\.04\],.bg-white\/5{background-color:rgba(15,52,55,.045)}
.bg-white\/\[\.07\]{background-color:rgba(15,52,55,.06)}
.bg-white\/10{background-color:rgba(15,52,55,.07)}
.border-white\/5{border-color:rgba(15,52,55,.06)}
.border-white\/10{border-color:rgba(15,52,55,.1)}
.border-white\/20{border-color:rgba(15,52,55,.16)}
.text-amber-200,.text-amber-300{color:#b45309}
.text-rose-200,.text-rose-300,.text-rose-400{color:#be123c}
.text-emerald-200{color:#047857}
.text-orange-200{color:#c2410c}
.bg-black\/60{color:#fff}
/* lencana bilangan (menu bawah) kekal emas terang */
.bg-\[color\:var\(--emas\)\]{background-color:#f2c14e}
/* avatar & medal berwarna: bayang halus supaya huruf putih jelas */
span.rounded-full.text-white[style*="background"]{text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bg-black\/20,.bg-black\/25{background-color:rgba(15,52,55,.06)}
.bg-black\/30{background-color:rgba(15,52,55,.08)}
.tab.bg-white\/10{background:#fff;color:var(--zamrud2);box-shadow:0 2px 8px -2px rgba(15,52,55,.2)}
.tab{transition:background .2s,color .2s}
section.kad-emas .bg-white\/\[\.04\],section.kad-emas .bg-white\/5,section.kad-emas .bg-white\/10{background-color:rgba(255,255,255,.1)}

/* ---------- interaksi (lihat js/interaksi.js) ---------- */
.riak{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:riak .55s ease-out forwards}
@keyframes riak{to{transform:scale(1);opacity:0}}
.kad[onclick],.slot,.jadual tr[onclick]{transition:transform .15s,box-shadow .2s}
.kad[onclick]:active,.slot:active{transform:scale(.985)}
.kad[onclick]{cursor:pointer}
.kad[onclick]:hover{box-shadow:0 1px 2px rgba(15,52,55,.06),0 20px 40px -22px rgba(13,128,114,.45);border-color:rgba(15,157,140,.25)}
#konfeti{position:fixed;inset:0;z-index:90;pointer-events:none}
@media (prefers-reduced-motion:reduce){.riak{display:none}}