/* ═══════════════════════════════════════════════════════════════════════
   Screen 01 (contact_capture) — bespoke tweaks OVER wizard.css canonical.

   Doc reference: SCREEN-01.png pixel-perfect design tokens.
   Scope: sadece /get-started/contact sayfası (@push('head') screen-01.css).
   wizard.css canonical `.mz-wizard-*` / `.mz-field-*` / `.mz-input*` / `.mz-btn*`
   / `.mz-form-row.cols-2` mimarisi DOKUNULMAZ — bu dosya sadece Screen 01'e
   özgü eyebrow style + placeholder-only tune + trust strip + copy palette.

   Font family = Inter (layout mz_wizard_public canonical).
   Color palette Screen 00 mirror:
     • Body/heading   #0F172A  (slate-900)
     • Lede/muted     #64748B  (slate-500)
     • Placeholder    #94A3B8  (slate-400)
     • Accent         #2563EB  (Monezzi blue)
     • Divider        #E2E8F0  (slate-200)
     • Sep muted      #CBD5E1  (slate-300)
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Eyebrow — mavi uppercase, ★ yok (SCREEN-01-progress-ve-info.png 2026-08-22) ── */
.mz-s01 .mz-s01-eyebrow {
    display: block;
    margin: 0 0 12px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #2563EB;
}


/* ── H1 — "Let's <start> with you." accent span ─────────────────────
   Screen 00 blue accent parity: <span style="color:#2563EB;">start</span>
   pattern class-based versiyonu. ─────────────────────────────────── */
.mz-s01 .mz-s01-h1 {
    margin: 0 0 12px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: #0F172A;
    letter-spacing: -0.3px;
}
.mz-s01-h1-accent {
    color: #2563EB;
}
@media (min-width: 720px) {
    .mz-s01 .mz-s01-h1 { font-size: 32px; }
}


/* ── Lede — Screen 00 mz-wizard-lede color mirror; slate-700 net okunur. */
.mz-s01 .mz-s01-lede {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: #334155;
}


/* ── Progress bar — 4 step (You / Verify email / Your needs / Next step).
   Aktif step: mavi fill + beyaz numara. Diğer stepler: mavi outline + mavi numara.
   Adımlar arası connector: aktif segment (ör. 1→2) mavi, diğerleri açık gri.
   Screen 01 = step 1 (You) aktif. Sonraki screen'lerde `--active` class ilerler. */
.mz-s01 .mz-s01-progress {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
}
.mz-s01-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    min-width: 0;
}
/* Connector — her step'in inline-end tarafında (son hariç). Dot merkez y = 14px (28/2).
   Segment aktif step'in inline-end tarafındaysa mavi, aksi halde açık gri.
   LTR: connector step'in sağında (sonraki step sağa). RTL: connector step'in
   solunda (sonraki step sola) — Arapça mirror. `inset-inline-*` logical
   properties otomatik yön çevirir. */
.mz-s01-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 14px;
    inset-inline-start: calc(50% + 14px);
    inset-inline-end: calc(-50% + 14px);
    height: 2px;
    background: #DBEAFE;
    z-index: 0;
}
.mz-s01-step--active:not(:last-child)::after,
.mz-s01-step--done:not(:last-child)::after {
    background: #2563EB;
}
.mz-s01-step-dot {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #93C5FD;
    background: #FFFFFF;
    color: #2563EB;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.mz-s01-step--active .mz-s01-step-dot {
    border-color: #2563EB;
    background: #2563EB;
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.mz-s01-step--done .mz-s01-step-dot {
    border-color: #2563EB;
    background: #2563EB;
    color: #FFFFFF;
}
.mz-s01-step-label {
    font-family: Inter, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #334155;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mz-s01-step--active .mz-s01-step-label {
    color: #2563EB;
    font-weight: 600;
}


/* ── Info card — form önce kısa açıklama (avatar icon + title + body).
   Light blue background (#EFF6FF) + light blue border. */
.mz-s01 .mz-s01-info-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 10px;
}
.mz-s01-info-card-ic {
    flex: 0 0 auto;
    color: #2563EB;
}
.mz-s01-info-card-body {
    flex: 1 1 auto;
    min-width: 0;
}
.mz-s01-info-card-title {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.35;
}
.mz-s01-info-card-text {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #334155;
    line-height: 1.45;
}


/* ── Form — placeholder-only pattern.
   Blade'de <span class="mz-field-label"> render EDİLMİYOR (Orhan 2026-08-22).
   wizard.css `.mz-field label span` display kalıbı Screen 01'i etkilemez.
   Yalnız padding + placeholder color tune yapıyoruz. ────────────────── */
.mz-s01-form { margin: 0; }

/* Row layout — cols-2 desktop 2-col yan yana, mobile 1-col alt alta.
   `.mz-form-row.cols-2` wizard.css'te tanımsız — Screen 01 için grid burada.
   Row içi horizontal gap = 14px (desktop). Mobile'da tek kolon + row-gap 16px
   (kutular arası vertical eşit boşluk). Row'lar arası dikey spacing
   margin-bottom (18px desktop / 20px mobile) — tüm row'lar arasında eşit. */
.mz-s01-form .mz-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.mz-s01-form .mz-form-row.cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.mz-s01-form .mz-form-row + .mz-form-row { margin-top: 0; }

/* Grid item overflow guard — child input width shrinkage.
   Ayrıca wizard.css `.mz-field { margin-bottom: 18px }` Screen 01 için
   sıfırlanır — row grid gap zaten dikey aralık veriyor, ekstra margin
   double-spacing yapar. */
.mz-s01-form .mz-form-row > .mz-field {
    min-width: 0;
    margin-bottom: 0;
}
.mz-s01-form .mz-field { margin-bottom: 0; }

/* Mobile — tek kolon fallback + input arası eşit vertical boşluk.
   Row1 (first/last), Row2 (email/phone-group), Row3 (citizenship/residence)
   hepsi mobile'da alt alta gelir; `.cols-2` grid override → single column. */
@media (max-width: 720px) {
    .mz-s01-form .mz-form-row,
    .mz-s01-form .mz-form-row.cols-2 {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 8px;
    }
    /* iOS Safari auto-zoom guard — font-size < 16px olan input'a focus edilince
       sayfa zoom edilir + viewport genişler. 16px threshold'da zoom engellenir.
       Desktop 15px design token intocht. */
    .mz-s01-form .mz-input { font-size: 16px; }
}

.mz-s01-form .mz-input {
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.35;
}
/* Placeholder — canlı net, solid %100 opacity. Slate-600 (#475569) — select
   seçili option parity + iOS Safari `-webkit-text-fill-color` opacity clamp
   bypass + prefix'li selector'lar (WebKit/Firefox) + !important base wizard.css
   override. Input placeholder ile <select> seçili option görsel eşitlik hedef. */
.mz-s01-form .mz-input::placeholder {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
}
.mz-s01-form .mz-input::-webkit-input-placeholder {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
}
.mz-s01-form .mz-input::-moz-placeholder {
    color: #475569 !important;
    opacity: 1 !important;
}
.mz-s01-form .mz-input:-ms-input-placeholder {
    color: #475569 !important;
    opacity: 1 !important;
}

/* ── Floating label pattern ─────────────────────────────────────────
   Boş + no-focus: label input ortasında normal boyut (15px slate-600).
   Focus veya dolu: label 9px'e küçülür, 8px top'a yerleşir (uppercase micro).
   Trigger:
     • Input/tel/email → `:placeholder-shown` (HTML `placeholder=" "` şart).
     • Select → `:required:invalid` (empty option selected) VS `:valid`/`:focus`.
   Icons intocht (background 14px center), label sol 40px (icon sağı).
   Input padding-top 22 + padding-bottom 8 → label yukarı çıkınca text için
   yer + label ortada iken vertical center align. ────────────────────── */
.mz-s01-form .mz-float-field {
    position: relative;
}
.mz-s01-form .mz-float-field .mz-input,
.mz-s01-form .mz-field-phone-grid .mz-input {
    padding-top: 22px;
    padding-bottom: 8px;
}
.mz-s01-form .mz-float-label {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #334155;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, letter-spacing 0.15s ease, transform 0.15s ease, color 0.15s ease;
    max-width: calc(100% - 60px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
}
/* Text/email/tel — placeholder-shown false → yukarı çık.
   ÖNEMLİ: `:placeholder-shown` sadece `<input>` ve `<textarea>` için match eder;
   `<select>` üzerinde her zaman FALSE değerlendirilir → `:not(:placeholder-shown)`
   HER ZAMAN true olur ve label sürekli yukarı kalır. Bunu önlemek için selector'ı
   `input.mz-input`'a scope ediyoruz. `<select>` için trigger `:required:valid`
   (aşağıda ayrı selector). */
.mz-s01-form .mz-float-field input.mz-input:focus ~ .mz-float-label,
.mz-s01-form .mz-float-field input.mz-input:not(:placeholder-shown) ~ .mz-float-label,
.mz-s01-form .mz-float-slot input.mz-input:focus ~ .mz-float-label,
.mz-s01-form .mz-float-slot input.mz-input:not(:placeholder-shown) ~ .mz-float-label {
    top: 8px;
    transform: translateY(0);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #334155;
}
/* Select — :valid (seçim var) veya :focus → yukarı; :invalid (boş) → ortada default */
.mz-s01-form .mz-float-field .mz-input-select:required:valid ~ .mz-float-label,
.mz-s01-form .mz-float-field .mz-input-select:focus ~ .mz-float-label {
    top: 8px;
    transform: translateY(0);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #334155;
}

/* Select — <select class="mz-input-select"> for citizenship/residence.
   Native browser chevron temizlenir; custom SVG chevron (color-matched). */
.mz-s01-form .mz-input-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}
/* Seçili durum text explicit — .mz-input inherit chain'i override.
   Detected country auto-fill'de "🇹🇷 Turkey" görünür + koyu + medium weight. */
.mz-s01-form .mz-input-select,
.mz-s01-form .mz-input-country {
    color: #0F172A;
    font-weight: 500;
}
/* Placeholder-only state (henüz seçim yok) → muted body + normal weight.
   `:required:invalid` = <option value="" disabled selected> aktif iken.
   Slate-600 (#475569) placeholder parity — input ::placeholder ile eşit. */
.mz-s01-form .mz-input-select:required:invalid,
.mz-s01-form .mz-input-country:required:invalid {
    color: #475569;
    font-weight: 400;
}
.mz-s01-form .mz-input-select option {
    color: #0F172A;
    font-weight: 400;
}

/* Phone group — country picker + phone number seamless bitişik.
   phone_prefix hidden (backend'e senkron gider); ekranda sadece 2 element:
   [country dropdown (bayrak + +90 + ülke adı)] + [phone number].
   Tek border çerçevesi + iç ayırıcı: kullanıcı gözünde tek input. */
.mz-s01-form .mz-field-phone-grid {
    display: grid;
    /* Country picker sabit dar (bayrak + +90 sığar, ülke adı native dropdown açık
       iken tam görünür). Phone number kalan tüm genişlik. */
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 0;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (max-width: 480px) {
    /* Mobile country picker — kolon 148 (desktop parity), globe icon KALDIRILIR,
       padding-left 12, label sol 12 → "🇹🇷 +90 Turkey" sığar. */
    .mz-s01-form .mz-field-phone-grid {
        grid-template-columns: 148px minmax(0, 1fr);
    }
}
.mz-s01-form .mz-field-phone-grid:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* phone_number `.mz-float-slot` içine sarıldı (floating label için) — descendant
   selector `.mz-input` her iki input'u da yakalar (select country + tel phone). */
.mz-s01-form .mz-field-phone-grid .mz-input {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    min-width: 0;
}
.mz-s01-form .mz-field-phone-grid .mz-input:focus {
    outline: none;
    box-shadow: none;
}
/* Float slot — grid ikinci kolon wrapper (hidden prefix + tel + label absolute). */
.mz-s01-form .mz-float-slot {
    position: relative;
    display: block;
    min-width: 0;
}
.mz-s01-form .mz-float-slot .mz-input {
    width: 100%;
    display: block;
}
/* İç dikey ayırıcı — country picker slot ile phone number slot arasında.
   `.mz-input-country` şimdi `.mz-float-slot-country` içinde (floating label için)
   → descendant selector. Border-inline-end wrapper `.mz-float-slot-country`'e taşındı
   (native select border browser-dependent, wrapper daha güvenilir). */
.mz-s01-form .mz-float-slot-country {
    border-inline-end: 1px solid #E2E8F0;
}
.mz-s01-form .mz-field-phone-grid .mz-input-country {
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
[dir="rtl"] .mz-s01-form .mz-field-phone-grid .mz-input-country {
    background-position: left 10px center;
    padding-right: 12px;
    padding-left: 34px;
}

/* Country picker floating label trigger — :required:valid (seçili) veya :focus (açık) → yukarı. */
.mz-s01-form .mz-float-slot-country .mz-input-country:focus ~ .mz-float-label,
.mz-s01-form .mz-float-slot-country .mz-input-country:required:valid ~ .mz-float-label {
    top: 8px;
    transform: translateY(0);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #334155;
}

/* Mobile country picker fit — globe icon KALDIR, padding-left 12, label sol 12.
   132px yerine 148px kolon (yukarıda grid update) + icon KALDIR → content area
   148 - 12 - 34 = 102px. "🇹🇷 +90 Turkey" (~96px) sığar. */
@media (max-width: 480px) {
    .mz-s01-form .mz-field-phone-grid .mz-input-country {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-position: right 10px center;
        padding-left: 12px;
    }
    /* Country picker label sol pozisyonu citizenship/residence select label
       ile aynı hizada (default `.mz-float-label { left: 40px }`) — mobile
       override YOK, `.mz-float-slot-country` içinde de 40px kalır. Icon
       kaldırıldı ancak label pozisyonu değişmiyor: empty state'te "Country"
       placeholder 40px'te başlar, seçili state'te label 9px yukarı çıkar,
       bayrak+prefix native select padding-left 12'den görünür. */
}

/* Phone warning — kırmızı inline hata mesajı.
   Default hidden (HTML `hidden` attribute + display:none). JS `input`/`blur`
   handler `.hidden = false` yapınca `:not([hidden])` match → görünür.
   `display: block` ile başlarsak UA `[hidden]{display:none}` override olur
   ve warn her zaman görünür — bu yüzden koşullu selector şart. */
.mz-s01-phone-warn {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    color: #DC2626;
}
.mz-s01-phone-warn:not([hidden]) {
    display: block;
}


/* ── Input inner icons — sol dayalı, gri (#94A3B8), 16px Feather monoline.
   Her input'un semantik amacına uygun icon:
     • first_name / last_name  → user (single person)
     • email                    → mail (envelope)
     • phone_country_id         → globe + sağda chevron (dropdown)
     • phone_number             → phone
     • citizenship_country_id   → award (credential) + sağda chevron
     • residence_country_id     → home + sağda chevron
   Select'lerde dual background: sol icon + sağ chevron.
   Input padding-left 40px — icon 14px'lık margin + 16px icon + 10px gap.
   Icon rengi #94A3B8 (%2394A3B8 URL-encode). Focus'ta değişmez (subtle).
   ────────────────────────────────────────────────────────────────── */

/* first_name / last_name — user icon */
.mz-s01-form .mz-input[name="first_name"],
.mz-s01-form .mz-input[name="last_name"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 4-6 8-6s8 2 8 6'/></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
    padding-left: 40px;
}

/* email — mail (envelope) icon */
.mz-s01-form .mz-input[name="email"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
    padding-left: 40px;
}

/* phone_number — phone icon */
.mz-s01-form .mz-input[name="phone_number"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z'/></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
    padding-left: 40px;
}

/* phone_country_id desktop — globe (sol) + chevron (sağ) dual bg.
   `.mz-input-country` şimdi `.mz-float-slot-country` içinde → descendant selector.
   Mobile @media içinde globe KALDIRILIR (padding-left 12) — dar kolonda text sığar. */
.mz-s01-form .mz-field-phone-grid .mz-input-country {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 14px center, right 10px center;
    padding-left: 40px;
    padding-right: 34px;
}

/* citizenship_country_id — award (credential) + chevron sağ. */
.mz-s01-form .mz-input-select[name="citizenship_country_id"] {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='7'/><polyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 14px center, right 14px center;
    padding-left: 40px;
    padding-right: 40px;
}

/* residence_country_id — home + chevron sağ. */
.mz-s01-form .mz-input-select[name="residence_country_id"] {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: 14px center, right 14px center;
    padding-left: 40px;
    padding-right: 40px;
}

/* RTL mirror — sol icon → sağ, sağ chevron → sol. */
[dir="rtl"] .mz-s01-form .mz-input[name="first_name"],
[dir="rtl"] .mz-s01-form .mz-input[name="last_name"],
[dir="rtl"] .mz-s01-form .mz-input[name="email"],
[dir="rtl"] .mz-s01-form .mz-input[name="phone_number"] {
    background-position: right 14px center;
    padding-left: 14px;
    padding-right: 40px;
}
[dir="rtl"] .mz-s01-form .mz-field-phone-grid .mz-input-country {
    background-position: right 14px center, 10px center;
    padding-left: 34px;
    padding-right: 40px;
}
[dir="rtl"] .mz-s01-form .mz-input-select[name="citizenship_country_id"],
[dir="rtl"] .mz-s01-form .mz-input-select[name="residence_country_id"] {
    background-position: right 14px center, 14px center;
    padding-left: 40px;
    padding-right: 40px;
}


/* ── Privacy note — 🔒 lock icon inline ─────────────────────────── */
.mz-s01 .mz-s01-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 22px;
    font-family: Inter, sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
}
.mz-s01-privacy-ic {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #475569;
}


/* ── CTA button — mobile full-width, desktop fixed 200px min ─────── */
.mz-s01 .mz-s01-actions {
    margin-top: 6px;
}
.mz-s01-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
}
@media (min-width: 720px) {
    .mz-s01 .mz-s01-actions {
        display: flex;
        justify-content: right;
    }
    .mz-s01-btn {
        width: auto;
        min-width: 220px;
    }
}


/* ── Trust strip — tek kutu, 4 slot, dikey `|` ayırıcı, 9px font.
   Screen 00 palette (muted grey #64748B + Inter uppercase). Icons inline 12px.
   Desktop: tek satır flex. Mobile: flex-wrap → 2 satır fallback. ── */
.mz-s01 .mz-s01-trust-strip {
    margin-top: 32px;
    padding: 14px 12px 4px;
    border-top: 1px solid #E2E8F0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #334155;
}
.mz-s01-trust-slot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.mz-s01-trust-slot .mz-icon,
.mz-s01-trust-slot svg {
    flex: 0 0 auto;
    color: #2563EB;
}
.mz-s01-trust-sep {
    color: #94A3B8;
    font-weight: 400;
    padding: 0 1px;
    line-height: 1;
}

/* Mobile — flex-wrap already handles fallback; ayırıcıları biraz sıkıştır. */
@media (max-width: 480px) {
    .mz-s01 .mz-s01-trust-strip {
        gap: 6px 8px;
        font-size: 9.5px;
    }
}


/* ── RTL support (Arabic locale — wizard.css logical props canonical) ─ */
[dir="rtl"] .mz-s01-form .mz-input-select {
    background-position: left 14px center;
    padding-right: 14px;
    padding-left: 40px;
}
[dir="rtl"] .mz-s01 .mz-s01-privacy {
    text-align: start;
}