/* Sihirbaz v2 (#455). Kaynak: docs/tasarim/v2/sihirbaz/wizard.css. Web tokens.css'te henüz olmayan v2 token'ları
   yedek değerle kullanılır (Ada P1-1 token'ları taşıyınca yedekler devreden çıkar). */
/* Zarfika — Sihirbaz v2 (görev 427). Yalnız ../tokens.css değişkenleri; bu dosyada sabit renk (hex) yok.
   Yerel ölçüler: form sütunu 480 px, telefon: ortak cihaz bileşeni (#620), eylem çubuğu yüksekliği --wz-bar-h. */
:root {
  --wz-form-w: 480px;
  --wz-bar-h: calc(var(--touch-min) + var(--space-6));
  --wz-thumb-ratio: 3 / 4;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal);
}
p, h1, h2, fieldset, ul { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wz-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wz-icon { width: var(--space-5); height: var(--space-5); flex: none; }
.wz-icon--lg { width: var(--space-8); height: var(--space-8); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.wz-skip { position: absolute; left: var(--space-2); top: calc(-1 * var(--space-16)); z-index: 30; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); }
.wz-skip:focus { top: var(--space-2); }

/* ---------- üst çubuk + adımlar ---------- */
.wz-header { position: sticky; top: 0; z-index: 10; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.wz-header__inner {
  display: flex; align-items: center; gap: var(--space-3); height: var(--header-height);
  max-width: var(--wizard-max, 1120px); margin: 0 auto; padding: 0 var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem));
}
.wz-brand .brand-logo { display: block; height: 28px; width: auto; } /* görev 658 Mühür yatay logo ≈ 155 px */
.wz-brand { font-family: var(--font-brand); font-size: var(--text-lg); color: var(--color-primary); text-decoration: none; margin-right: auto;
  min-height: var(--touch-min); display: inline-flex; align-items: center; }
.wz-save { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.wz-save__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-save__time::before { content: " · "; }
/* #462: 390'da metin kesilmez: küçük punto, saat ikinci satırda. */
@media (max-width: 479px) {
  .wz-save { max-width: 11rem; font-size: var(--text-xs); line-height: var(--leading-snug, 1.3); }
  .wz-save__text { white-space: normal; overflow: visible; }
  .wz-save__time { display: block; }
  .wz-save__time::before { content: none; }
}
.wz-icon-btn {
  display: inline-grid; place-items: center; width: var(--touch-min); height: var(--touch-min); flex: none;
  border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--color-text); cursor: pointer;
}
.wz-icon-btn:hover { background: var(--color-surface-alt); }
.wz-steps { max-width: var(--wizard-max, 1120px); margin: 0 auto; padding: 0 var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem)) var(--space-3); }
.wz-steps__list { display: none; }
.wz-steps__mobile { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); padding-bottom: var(--space-2); }
.wz-steps__bar { height: var(--space-1); border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; }
.wz-steps__bar span { display: block; height: 100%; width: 100%; background: var(--color-primary); transform-origin: left; transform: scaleX(.3333); transition: transform var(--duration-base) var(--ease-out); } /* #772: genişlik yerine scaleX */

/* ---------- yerleşim ---------- */
.wz-layout { max-width: var(--wizard-max, 1120px); margin: 0 auto; padding: var(--space-6) var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem)) calc(var(--wz-bar-h) + var(--space-8)); }
.wz-main { min-width: 0; }
.wz-main:focus { outline: none; }
.wz-step { display: flex; flex-direction: column; gap: var(--space-6); }
.wz-title { font-family: var(--font-brand); font-size: var(--text-display-3, clamp(1.5rem, 1.31rem + 0.77vw, 2rem)); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
.wz-title:focus { outline: none; }
.wz-lead { color: var(--color-text-muted); margin-top: calc(-1 * var(--space-4)); }
.wz-subtitle { font-size: var(--text-lg); font-weight: var(--weight-semibold); }

/* ---------- çipler (tür, saat) ---------- */
.wz-chips { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--space-1) var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem));
  margin: 0 calc(-1 * var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem))); scrollbar-width: none; }
.wz-chips::-webkit-scrollbar { display: none; }
.wz-chips--wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: var(--space-1) 0; }
.wz-chip { position: relative; flex: none; scroll-snap-align: start; }
.wz-chip__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wz-chip__box {
  display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface);
  font-size: var(--text-base); font-weight: var(--weight-medium, 500); white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.wz-chip:hover .wz-chip__input:not(:checked) + .wz-chip__box { background: var(--color-primary-soft); }
.wz-chip__input:checked + .wz-chip__box { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.wz-chip__input:focus-visible + .wz-chip__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.is-invalid .wz-chip__box { border-color: var(--color-danger); }
.is-shaking { animation: wz-shake var(--duration-base) var(--ease-standard) 1; }
@keyframes wz-shake { 25% { transform: translateX(calc(-1 * var(--space-2))); } 75% { transform: translateX(var(--space-2)); } }

/* ---------- galeri ---------- */
.wz-gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: calc(-1 * var(--space-3)); }
.wz-gallery-count { font-size: var(--text-sm); color: var(--color-text-muted); }
.wz-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.wz-theme { position: relative; display: flex; flex-direction: column; gap: var(--space-1); cursor: pointer; }
.wz-theme__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.wz-theme__media {
  position: relative; display: block; aspect-ratio: var(--wz-thumb-ratio); overflow: hidden;
  border-radius: var(--radius-lg); background: var(--color-skeleton); box-shadow: var(--shadow-sm);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.wz-theme__img { width: 100%; height: 100%; object-fit: cover; }
.wz-theme:hover .wz-theme__media { box-shadow: var(--shadow-md); transform: translateY(calc(-1 * var(--space-1))); }
.wz-theme.is-selected .wz-theme__media { outline-color: var(--color-primary); box-shadow: var(--shadow-md); }
.wz-theme__input:focus-visible + .wz-theme__media { outline: 3px solid var(--color-focus); }
.wz-badge {
  display: inline-block; vertical-align: middle; margin-left: var(--space-1); padding: 0 var(--space-2); line-height: 1.6;
  border-radius: var(--radius-pill); background: var(--color-surface-ink, #1D1824); color: var(--color-text-on-ink, #F7F2EA);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow, 0.12em); text-transform: uppercase;
}
.wz-theme__check {
  position: absolute; right: var(--space-2); top: var(--space-2); display: grid; place-items: center;
  width: var(--space-8); height: var(--space-8); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary);
}
.wz-theme__name { font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: var(--leading-normal); margin-top: var(--space-1); min-height: calc(2 * var(--leading-normal) * 1em); } /* #772: ad + Atölye rozeti yedek fontta tek, Inter'de iki satır; iki satır ayrılır */
.wz-theme__meta { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); min-height: calc(2 * var(--leading-normal) * 1em); } /* #772: iki satır ayrılır; yedek font tek satır, Inter iki satır sarsa da kart boyu değişmez */
.wz-theme.is-selected .wz-theme__meta { color: var(--color-primary); font-weight: var(--weight-semibold); }
.wz-theme--skeleton { cursor: default; }
.wz-skel { display: block; border-radius: var(--radius-md); background: var(--color-skeleton); animation: wz-pulse 1.4s var(--ease-in-out) infinite; }
.wz-skel--thumb { aspect-ratio: var(--wz-thumb-ratio); border-radius: var(--radius-lg); }
.wz-skel--line { height: var(--space-4); width: 70%; margin-top: var(--space-2); }
.wz-skel--title { height: var(--space-8); width: 85%; margin: var(--space-3) auto; }
@keyframes wz-pulse { 50% { opacity: .55; } }

/* ---------- düğmeler ---------- */
.wz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 1px solid transparent;
  font-weight: var(--weight-semibold); font-size: var(--text-base); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.wz-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.wz-btn--primary:hover { background: var(--color-primary-hover); }
.wz-btn--primary[aria-disabled="true"] { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border-strong); }
.wz-btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.wz-btn--secondary:hover { background: var(--color-surface-alt); }
.wz-btn--ghost { background: transparent; color: var(--color-primary); }
.wz-btn--ghost:hover { background: var(--color-primary-soft); }
.wz-btn--whatsapp { background: var(--color-success); color: var(--color-on-primary); }
.wz-btn--block { width: 100%; }
.wz-btn.is-loading::before {
  content: ""; width: var(--space-4); height: var(--space-4); border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: wz-spin .8s linear infinite;
}
@keyframes wz-spin { to { transform: rotate(360deg); } }
.wz-link-btn { align-self: flex-start; min-height: var(--touch-min); padding: 0; border: 0; background: none; color: var(--color-primary);
  font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wz-link { color: var(--color-primary); text-underline-offset: 3px; display: inline-block; min-height: var(--touch-min); line-height: var(--touch-min); }

/* ---------- form ---------- */
.wz-group { display: flex; flex-direction: column; gap: var(--space-4); }
.wz-group__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); padding: 0; }
.wz-field { display: flex; flex-direction: column; gap: var(--space-2); }
.wz-label { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.wz-optional { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.wz-input {
  width: 100%; min-height: calc(var(--touch-min) + var(--space-1)); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface);
  font-size: var(--text-base); /* 16 px: iOS yakınlaştırma zıplaması yok */
}
.wz-input::placeholder { color: var(--color-text-muted); }
.wz-input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-focus); }
.wz-input--short { max-width: 12rem; }
.wz-textarea { min-height: 7rem; resize: vertical; line-height: var(--leading-normal); }
.is-invalid .wz-input { border-color: var(--color-danger); border-width: 2px; }
.wz-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.wz-error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-danger); font-size: var(--text-sm); font-weight: var(--weight-medium, 500); }
.wz-error .wz-icon { width: var(--space-4); height: var(--space-4); margin-top: 2px; }
.wz-summary-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-danger); font-weight: var(--weight-semibold);
  border-left: 4px solid var(--color-danger);
}
.wz-summary-bar .wz-link-btn { margin-left: auto; color: var(--color-danger); }
.wz-more { border-top: 1px solid var(--color-border); }
.wz-more--block { border-bottom: 1px solid var(--color-border); }
.wz-more__summary {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); cursor: pointer; list-style: none;
  color: var(--color-primary); font-weight: var(--weight-semibold);
}
.wz-more__summary::-webkit-details-marker { display: none; }
.wz-more[open] > .wz-more__summary .wz-icon { transform: rotate(45deg); }
.wz-more[open] { padding-bottom: var(--space-4); }
.wz-more .wz-field + .wz-field { margin-top: var(--space-4); }
.wz-later { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-alt); }
.wz-later__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.wz-later__list { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.wz-later__list li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-muted); }
.wz-check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--touch-min); cursor: pointer; }
.wz-check input { width: var(--space-6); height: var(--space-6); margin: var(--space-1) 0 0; accent-color: var(--color-primary); flex: none; }

/* ---------- adım 3 ---------- */
.wz-card { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.wz-recap { display: flex; align-items: center; gap: var(--space-4); }
.wz-recap__thumb { width: 72px; height: 96px; border-radius: var(--radius-md); object-fit: cover; background: var(--color-skeleton); }
.wz-recap__body { flex: 1; min-width: 0; }
.wz-recap__names { font-family: var(--font-brand); font-size: var(--text-xl); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.wz-recap__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.wz-plans { display: flex; flex-direction: column; gap: var(--space-3); }
.wz-plan { position: relative; display: block; }
.wz-plan__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wz-plan__box { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); min-height: var(--touch-min);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.wz-plan__head { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: var(--weight-semibold); }
.wz-plan__price { font-variant-numeric: tabular-nums; }
.wz-plan__text { font-size: var(--text-sm); color: var(--color-text-muted); }
.wz-plan__input:checked + .wz-plan__box { border: 2px solid var(--color-primary); background: var(--color-primary-soft); }
.wz-plan__input:focus-visible + .wz-plan__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wz-legal { font-size: var(--text-sm); color: var(--color-text-muted); }
.wz-legal .wz-link { min-height: 0; line-height: inherit; }

/* ---------- durum kutuları ---------- */
.wz-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.wz-state--danger { border: 1px solid var(--color-danger); color: var(--color-text); }
.wz-state--danger > .wz-icon { color: var(--color-danger); }
.wz-state__title { font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.wz-state__text { color: var(--color-text-muted); max-width: 32ch; }
.wz-resume { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); margin-bottom: var(--space-6);
  border-radius: var(--radius-lg); background: var(--color-surface-ink, #1D1824); color: var(--color-text-on-ink, #F7F2EA); }
.wz-resume__title { font-family: var(--font-brand); font-size: var(--text-xl); }
.wz-resume__text { color: var(--color-text-on-ink-muted, #B9B1C2); }
.wz-resume__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.wz-resume .wz-btn--ghost { color: var(--color-primary-on-ink, #F2A7B8); }
.wz-resume .wz-btn--ghost:hover { background: transparent; text-decoration: underline; }

/* ---------- başarı ---------- */
.wz-done { align-items: stretch; text-align: center; }
.wz-done__seal { align-self: center; display: grid; place-items: center; width: var(--space-20); height: var(--space-20); border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-card-lift, 0 6px 12px rgba(29, 24, 36, 0.08), 0 36px 72px -20px rgba(29, 24, 36, 0.34)); }
.wz-done__seal .wz-icon { width: var(--space-10); height: var(--space-10); }
.wz-done__seal.is-in { animation: wz-seal 600ms var(--ease-spring) 1 both; }
@keyframes wz-seal { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.wz-share { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.wz-share__label { font-weight: var(--weight-semibold); }
.wz-share__url { font-size: var(--text-md); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.wz-share__actions { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.wz-qr { display: flex; gap: var(--space-4); align-items: center; text-align: left; }
.wz-qr__img { width: 120px; height: 120px; border-radius: var(--radius-md); background: var(--color-surface); flex: none; }
.wz-qr .wz-btn { margin-top: var(--space-2); }

/* ---------- önizleme ---------- */
.wz-preview__head { display: flex; align-items: center; gap: var(--space-2); }
.wz-preview__title { font-weight: var(--weight-semibold); white-space: nowrap; }
.wz-preview__theme { font-size: var(--text-sm); color: var(--color-text-muted); margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-device__loading, .wz-device__fail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-6); background: var(--color-surface); text-align: center; }
.wz-device__loading .wz-skel { width: 70%; }
.wz-device__loading-text { color: var(--color-text-muted); font-size: var(--text-sm); }
.wz-scrim { position: fixed; inset: 0; z-index: 19; background: var(--color-overlay); }

/* 390: alttan açılan önizleme sayfası */
@media (max-width: 1023px) {
  .wz-preview {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 88vh; height: 88dvh;
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0;
    background: var(--color-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg);
    transform: translateY(105%); visibility: hidden;
    transition: transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
  }
  .is-sheet-open .wz-preview { transform: none; visibility: visible; transition: transform var(--duration-base) var(--ease-out); }
  .is-sheet-open { overflow: hidden; }
  .wz-preview .wz-device { box-sizing: border-box; flex: 1 1 0; height: auto; min-height: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; border: 1px solid var(--color-border); border-bottom: 0; }
}

/* ---------- eylem çubuğu: 390'da altta sabit (başparmak bölgesi) ---------- */
.wz-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; background: var(--color-surface); border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--shadow-md); }
.wz-bar__inner { display: flex; align-items: center; gap: var(--space-2); max-width: var(--wizard-max, 1120px); margin: 0 auto;
  padding: var(--space-3) var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem)); min-height: var(--wz-bar-h); }
.wz-bar__next { flex: 1 1 0; min-width: 0; }
.wz-bar__preview { flex: none; }
/* #772: geri düğmesi 1. adımda da yerini tutar, "Önizle" genişliği sabit; adım ve font değişince "Devam et" düğmesi kaymaz */
.wz-bar__back[hidden] { display: inline-grid !important; visibility: hidden; }
.wz-bar__preview { min-width: 8rem; justify-content: center; }
/* #776: dar ekranda etiket ("Öde ve yayınla · 1.299 ₺") sarılır, düğme çubuktan taşmaz. */
@media (max-width: 480px) {
  .wz-bar__inner { gap: var(--space-1); }
  .wz-bar .wz-btn { padding: var(--space-1) var(--space-3); }
  .wz-bar__next { white-space: normal; line-height: var(--leading-tight, 1.2); text-align: center; text-wrap: balance; }
}

/* ---------- 1440: iki sütun (form 480 + canlı telefon) ---------- */
@media (min-width: 1024px) {
  .wz-steps { display: flex; justify-content: center; padding-bottom: 0; }
  .wz-steps__list { display: flex; gap: var(--space-8); padding: 0; margin: 0; list-style: none; }
  .wz-steps__mobile, .wz-steps__bar { display: none; }
  .wz-steps__item { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); color: var(--color-text-muted);
    border-bottom: 2px solid transparent; font-weight: var(--weight-medium, 500); }
  .wz-steps__num { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: 50%;
    border: 1px solid var(--color-border-strong); font-size: var(--text-sm); }
  .wz-steps__item.is-current { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }
  .wz-steps__item.is-current .wz-steps__num, .wz-steps__item.is-done .wz-steps__num { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  .wz-layout { display: grid; grid-template-columns: var(--wz-form-w) minmax(0, 1fr); gap: var(--space-16); align-items: start; padding-top: var(--space-3); }
  .wz-preview { /* çerçeve kalınlığı: device.css --device-bezel (görev 658: kopya kaldırıldı) */
    --wz-chrome: calc(var(--header-height) + var(--touch-min) + var(--space-3) + var(--space-8) + 2 * var(--device-bezel) + var(--space-3));
    --wz-screen-w: min(390px, calc((100svh - var(--wz-chrome)) * 390 / 891));
    position: sticky; top: calc(var(--header-height) + var(--space-3));
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
  .wz-preview__head { width: calc(var(--wz-screen-w) + 2 * var(--device-bezel)); }
  .wz-preview__close, .wz-bar__preview { display: none; }
  /* Ekran genişliği yükseklikten türer: telefon (yükseklik = w × 891/390 + 2 × çerçeve) kaydırmadan sığar, üst sınır 390 px. */
  .wz-preview .wz-device { --device-screen-w: var(--wz-screen-w); }
  .wz-bar { background: transparent; border: 0; box-shadow: none; pointer-events: none; }
  .wz-bar__inner { pointer-events: auto; max-width: calc(var(--wz-form-w) + 2 * var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem))); margin-left: max(0px, calc((100vw - var(--wizard-max, 1120px)) / 2));
    background: var(--color-surface); border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md); }
  .wz-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wz-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: var(--space-1) 0; }
  .wz-share__actions { grid-template-columns: 1fr 1fr; }
  body[data-step="done"] .wz-layout { grid-template-columns: var(--wz-form-w) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: var(--duration-reduced) !important; animation-iteration-count: 1 !important; transition-duration: var(--duration-reduced) !important; }
  .wz-skel { animation: none; }
  .wz-done__seal.is-in { animation: none; }
}

/* ---------- #455 uygulama ekleri ---------- */
.wz-theme__swatch { display: grid; place-items: center; width: 100%; height: 100%; padding: var(--space-3); text-align: center;
  font-family: var(--font-brand); font-size: var(--text-lg); }
.wz-state--note { align-items: flex-start; text-align: left; padding: var(--space-4); border: 1px solid var(--color-border-strong); background: var(--color-primary-soft); }
.wz-state--note .wz-state__title { font-size: var(--text-base); }
.wz-layout--single { display: block; max-width: calc(var(--wz-form-w) + 2 * var(--gutter, clamp(1.25rem, 0.8rem + 1.9vw, 2.5rem))); padding-bottom: var(--space-12); }
.wz-theme, .wz-chip, .wz-plan, .wz-btn, .wz-icon-btn { -webkit-tap-highlight-color: transparent; }

/* ---------- #1354 hata mesaj kutusu (3. adım) ---------- */
.wz-notice { scroll-margin: calc(var(--space-12) * 2) 0 calc(var(--space-12) * 2); }
.wz-notice > .wz-icon { color: var(--color-danger); }
.wz-notice .wz-state__text { max-width: none; }
.wz-notice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }