/* ============================================================
   Pendaftaran Minat Pembelian Rumah — gaya "pelan tapak"
   Identiti: kertas pelan seni bina + garis dimensi + aksen loyang
   ============================================================ */

:root {
    --navy: #0F2A3A;
    --navy-2: #1B4257;
    --navy-3: #274F65;
    --brass: #B8894A;
    --brass-light: #D8B47E;
    --paper: #EEEFEA;
    --paper-2: #E4E6DE;
    --ink: #1A1F22;
    --ink-soft: #5B6A70;
    --success: #3F7D58;
    --danger: #B3402A;
    --line: rgba(15, 42, 58, 0.16);
    --line-soft: rgba(15, 42, 58, 0.08);
    --radius: 4px;
    --shadow: 0 12px 32px rgba(15, 42, 58, 0.10);
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    background-image:
        linear-gradient(var(--line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

a { color: var(--navy-2); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top bar ---------- */
.topbar {
    background: var(--navy);
    color: #fff;
    padding: 14px 0;
    border-bottom: 3px solid var(--brass);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); letter-spacing: 0.06em; font-size: 13px; text-transform: uppercase; }
.topbar .brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass-light); display: inline-block; }
.topbar .ref { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.65); }

/* ---------- Hero ---------- */
.hero {
    padding: 64px 0 40px;
    position: relative;
    overflow: hidden;
}
.hero .wrap.hero-intro { max-width: 700px; text-align: center; }
.hero .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}
.hero .eyebrow::before, .hero .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--brass); display: inline-block; }
.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.08;
    margin: 0 0 20px;
    color: var(--navy);
}
.hero h1 em { font-style: italic; color: var(--brass); font-weight: 500; }
.hero p.lead { font-size: 17px; color: var(--ink-soft); max-width: 52ch; margin: 0 auto 30px; }
.hero .cta-row { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:focus-visible { outline: 3px solid var(--brass-light); outline-offset: 2px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: #a37a3f; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Trust badges row — slim inline pills (replaces the old side card) */
.trust-row {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 640px;
}
.trust-row li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 7px 16px 7px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
}
.trust-row .check-ic {
    flex: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
}
.trust-row .check-ic svg { width: 11px; height: 11px; stroke: var(--brass-light); }

/* Step path */
.steps { display: flex; align-items: flex-start; gap: 0; margin: 46px 0 8px; }
.step { flex: 1; position: relative; padding-top: 26px; }
.step .marker {
    position: absolute; top: 0; left: 0;
    font-family: var(--font-mono); font-size: 12px; color: var(--brass);
}
.step .marker::before { content: "+"; margin-right: 4px; }
.step::after {
    content: "";
    position: absolute; top: 6px; left: 0; right: 0; height: 1px;
    background: repeating-linear-gradient(90deg, var(--line) 0, var(--line) 6px, transparent 6px, transparent 11px);
}
.step:last-child::after { display: none; }
.step h4 { font-family: var(--font-display); font-size: 17px; margin: 0 0 4px; color: var(--navy); }
.step p { font-size: 13.5px; color: var(--ink-soft); margin: 0; padding-right: 18px; }

/* ---------- Form card ---------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.form-shell { padding: 0; margin: 40px 0 80px; }
.form-shell .section {
    padding: 34px 40px;
    border-bottom: 1px dashed var(--line);
}
.form-shell .section:last-of-type { border-bottom: none; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.section-head .num { font-family: var(--font-mono); color: var(--brass); font-size: 13px; border: 1px solid var(--brass); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex: none; }
.section-head h2 { font-family: var(--font-display); font-size: 22px; margin: 0; color: var(--navy); }
.section-head .hint { font-size: 12.5px; color: var(--ink-soft); margin-left: auto; font-family: var(--font-mono); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
.grid .full { grid-column: 1 / -1; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.field label .req { color: var(--danger); margin-left: 2px; }
.field .desc { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }

input[type=text], input[type=email], input[type=tel], textarea, select {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    padding: 11px 13px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.15s ease, background 0.15s ease;
}
textarea { resize: vertical; min-height: 84px; }
.auto-upper { text-transform: uppercase; }
.auto-upper::placeholder { text-transform: none; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--navy-2);
    background: #fff;
}
input.invalid, select.invalid, textarea.invalid { border-color: var(--danger); background: #FCF3F0; }
.field .error-msg { color: var(--danger); font-size: 12px; margin-top: 5px; display: none; }
.field.has-error .error-msg { display: block; }

/* Autocomplete syarikat */
.autocomplete { position: relative; }
.ac-list {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; display: none;
}
.ac-list.open { display: block; }
.ac-item { padding: 10px 13px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: var(--paper); }
.ac-item .tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--brass); text-transform: uppercase; margin-left: 6px; }
.ac-empty { padding: 10px 13px; font-size: 13px; color: var(--ink-soft); }

/* Tempoh bekerja readout */
.readout {
    display: flex; align-items: center; gap: 10px;
    background: var(--navy); color: #fff;
    border-radius: var(--radius); padding: 12px 16px; margin-top: 8px;
    font-family: var(--font-mono); font-size: 13.5px;
}
.readout strong { font-size: 19px; color: var(--brass-light); font-family: var(--font-display); font-weight: 600; }

/* Submit bar */
.submit-bar { padding: 30px 40px; background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.submit-bar .note { font-size: 12.5px; color: var(--ink-soft); max-width: 46ch; }

/* Alerts */
.alert { border-radius: var(--radius); padding: 14px 18px; font-size: 14px; margin: 0 0 20px; border: 1px solid; }
.alert-error { background: #FCF3F0; border-color: #E7B7A6; color: #8A2E17; }
.alert-success { background: #F0F6F2; border-color: #A9CEB6; color: #235A38; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 28px 0; margin-top: 60px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-soft); font-family: var(--font-mono); flex-wrap: wrap; gap: 10px; }
footer a { color: var(--ink-soft); }

/* ---------- Success page ---------- */
.success-shell { max-width: 640px; margin: 70px auto; text-align: center; padding: 0 24px; }
.success-mark { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; }
.success-mark svg { width: 28px; height: 28px; stroke: #fff; }
.success-shell h1 { font-family: var(--font-display); font-size: 30px; color: var(--navy); margin: 0 0 12px; }
.receipt { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 30px; margin: 30px 0; }
.receipt dl { display: grid; grid-template-columns: 1fr 1.4fr; row-gap: 12px; margin: 0; }
.receipt dt { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.receipt dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .grid { grid-template-columns: 1fr; }
    .form-shell .section { padding: 26px 20px; }
    .submit-bar { padding: 24px 20px; flex-direction: column; align-items: stretch; }
    .steps { flex-direction: column; gap: 20px; }
    .step::after { display: none; }
    .receipt dl { grid-template-columns: 1fr; row-gap: 4px; }
    .receipt dd { margin-bottom: 10px; }
}