:root {
    --font: 'Plus Jakarta Sans', sans-serif;
    --kad-radius: 24px;
    --max-w: 36rem;
    --body-bg: linear-gradient(180deg, #eef4ff 0%, #f8fbff 52%, #ffffff 100%);
    --body-color: #172554;
    --kad-border: rgba(59,130,246,0.12);
    --input-border: rgba(59,130,246,0.18);
    --input-focus-border: #2563eb;
    --input-focus-shadow: rgba(37,99,235,0.14);
    --ring-color: rgba(37,99,235,0.15);
    --btn-bg: #2563eb;
    --btn-hover: #1d4ed8;
    --logo-bg: #2563eb;
    --teks-label: #334155;
    --teks-sub: #64748b;
    --badge-bg: #eff6ff;
    --badge-text: #475569;
    --badge-border: #dbeafe;
}
body { font-family: var(--font); background: var(--body-bg); color: var(--body-color); -webkit-font-smoothing: antialiased; }
main { max-width: var(--max-w); }
.kad { background: #fff; border: 1px solid var(--kad-border); box-shadow: none; border-radius: var(--kad-radius); }
.input-medan { border-color: var(--input-border); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.input-medan:focus { outline: none; border-color: var(--input-focus-border); box-shadow: 0 0 0 4px var(--input-focus-shadow); }
.mesej-kotak { display: none; }
.mesej-kotak.papar { display: block; }
.teks-label { color: var(--teks-label); }
.teks-sub { color: var(--teks-sub); }
.teks-badge { color: var(--badge-text); }
.bg-badge { background-color: var(--badge-bg); }
.border-badge { border-color: var(--badge-border); }
.btn-theme { background-color: var(--btn-bg); }
.btn-theme:hover { background-color: var(--btn-hover); }
.logo-bg { background-color: var(--logo-bg); }
.email-wrapper:focus-within { box-shadow: 0 0 0 2px var(--ring-color); border-color: var(--input-focus-border); }
.input-ralat, .email-wrapper.input-ralat { border-color: #f43f5e !important; box-shadow: 0 0 0 3px rgba(244,63,94,0.12) !important; }