/* ============================================================
   KodQR — Tema Premium "Emerald & Emas"
   Satu fail untuk semua halaman. Ubah di sini = ubah semua.
   ============================================================ */

:root{
  --ivory:#eef4f2; --surface:#ffffff; --surface-2:#e9f5f1;
  --emerald:#13a386; --emerald-2:#1cb89a; --emerald-deep:#0c7a68;
  --gold:#b88a2e; --gold-2:#d8b65a; --gold-soft:#f4ead2;
  --text:#123c34; --muted:#5a7068; --line:rgba(18,60,52,.13); --danger:#b03a2e;
  --shadow:0 1px 2px rgba(18,60,52,.04),0 14px 36px rgba(18,60,52,.09);
  --shadow-sm:0 1px 2px rgba(18,60,52,.05),0 6px 16px rgba(18,60,52,.06);
  --radius:18px;
  --g-emerald:linear-gradient(135deg,#1cb89a,#0c7a68);
  --g-gold:linear-gradient(135deg,#e6cd84,#b88a2e);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Hanken Grotesk',sans-serif;color:var(--text);line-height:1.6;
  background:var(--ivory);
  background-image:radial-gradient(900px 420px at 50% -160px,#f5faf8,rgba(245,250,248,0));
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* Jenama */
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;
  background:var(--g-emerald);color:var(--gold-soft);
  box-shadow:0 5px 14px rgba(19,163,134,.32);border:1px solid rgba(216,182,90,.35);
}
.brand b,.brand h1{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em}
.brand b{font-size:22px}
.brand h1{font-size:23px}
.brand p{font-size:12.5px;color:var(--muted);margin-top:-2px}

/* Nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.nav-links{display:flex;align-items:center;gap:10px}
.lnk{font-size:14px;font-weight:600;padding:9px 16px;border-radius:11px;transition:all .15s}
.lnk:hover{background:var(--surface-2);color:var(--emerald-deep)}
.lnk.solid{background:var(--g-emerald);color:#fff;box-shadow:0 4px 12px rgba(19,163,134,.22)}
.lnk.solid:hover{filter:brightness(1.06);color:#fff}

/* Butang */
.btn{
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  padding:12px 22px;border-radius:12px;border:none;
  background:var(--g-emerald);color:#fff;box-shadow:0 5px 16px rgba(19,163,134,.26);
  transition:transform .15s,filter .15s,box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 22px rgba(19,163,134,.3)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-gold{background:var(--g-gold);color:#42320b;box-shadow:0 5px 16px rgba(184,138,46,.28)}
.btn-gold:hover{color:#42320b}
.btn-ghost{background:transparent;color:var(--emerald-deep);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--emerald);filter:none;box-shadow:none}
.btn-sm{font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:7px 13px;border-radius:10px;background:transparent;color:var(--text);border:1px solid var(--line);transition:all .15s}
.btn-sm:hover{border-color:var(--emerald);color:var(--emerald-deep);background:var(--surface-2)}
.btn-sm.danger:hover{border-color:var(--danger);color:var(--danger);background:#faeceb}
.btn-out{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px 15px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text);transition:all .15s}
.btn-out:hover{border-color:var(--danger);color:var(--danger)}

/* Lencana */
.badge{font-size:12px;font-weight:600;padding:7px 14px;border-radius:99px;background:var(--surface-2);color:var(--emerald-deep);border:1px solid var(--line)}
.badge.premium{background:var(--g-gold);color:#42320b;border:1px solid rgba(184,138,46,.4);box-shadow:0 3px 10px rgba(184,138,46,.22)}

/* Kad */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin-bottom:24px}
.card h2{font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.card h2:before{content:"";width:9px;height:9px;border-radius:2px;background:var(--g-gold);transform:rotate(45deg);box-shadow:0 1px 3px rgba(184,138,46,.4)}
.card h2 small{font-weight:400;font-size:13px;color:var(--muted);font-family:'Hanken Grotesk',sans-serif}

/* Medan borang */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:14.5px;color:var(--text);padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(19,163,134,.1)}
.field textarea{resize:vertical;min-height:84px}
.err{color:var(--danger);font-size:13.5px;margin-top:12px;display:none}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(15,38,32,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:30px;box-shadow:var(--shadow)}
.modal h3{font-family:'Fraunces',serif;font-size:22px;font-weight:600;margin-bottom:4px}
.modal .msub{font-size:13px;color:var(--muted);margin-bottom:20px}
.modal-close{float:right;cursor:pointer;font-size:22px;color:var(--muted);background:none;border:none;line-height:1}
.modal-close:hover{color:var(--text)}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--emerald-deep);color:#fff;padding:12px 22px;border-radius:12px;font-size:13.5px;font-weight:500;opacity:0;transition:all .25s;pointer-events:none;box-shadow:var(--shadow);z-index:200;border:1px solid rgba(216,182,90,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}