/* ============================================================
 * features/onboarding.css — ZORUNLU yeni üye kurulum sihirbazı
 * (JS karşılığı: js/features/profile/onboarding.js)
 *
 * TAM-EKRAN gate (popup motorunda kind:'layer' + gate:true). Kabuk/
 * zemin reçetesi popup.css iskeletinden gelir; burada yalnız KATMAN
 * (--z-gate), tam-ekran boyut kararı ve sihirbazın kendi öğeleri
 * (.ob-*) yaşar. Form alanları GLOBAL bileşenlerdir (.field/.input/
 * .opt-pill/.select-btn/.picker-list — components.css), burada
 * TANIMLANMAZ; yalnız kurulum-a özel öğeler burada.
 * ============================================================ */

/* ── Popup katman + tam-ekran boyut (K3 var bloğu) ────────────── */
.pp[data-pp="onboard"] {
  /* --z-gate: sözleşme kapısıyla aynı — boot splash'i hâlâ ekrandayken
     (main.js checkOnboarding'i await ederken) üstte görünmeli. */
  --pp-z: var(--z-gate);
  /* Mobil: gerçek tam-ekran (kenar payı/köşe yok). */
  --pp-pad: 0;
  --pp-w: 100%;
  --pp-h: 100%;
  --pp-max-h: 100svh;
  --pp-r: 0;
}
@media (min-width: 720px) {
  /* Masaüstü: ortada büyük cam kart. */
  .pp[data-pp="onboard"] {
    --pp-pad: 24px;
    --pp-w: 560px;
    --pp-h: auto;
    --pp-max-h: min(780px, 94svh);
    --pp-r: var(--r-xl);
  }
}

/* Ülke/dil seçici alt sayfası — gate'in ÜSTÜNDE açılır (z-gate + üstü);
   normal sheet z'si (--z-sheet=60) gate'in ALTINDA kalırdı. */
.pp[data-pp="ob-pick"] { --pp-z: calc(var(--z-gate) + 5); --pp-w: 460px; }

/* ── İskele: header (sabit) · içerik (kaydırır) · footer (sabit) ── */
.ob {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; height: 100%;
}

.ob-head {
  flex: 0 0 auto; text-align: center;
  padding: calc(26px + var(--safe-top)) 24px 10px;
}
.ob-brand { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.ob-welcome { margin-top: 5px; font-size: 13px; color: var(--text-3); }

.ob-content {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 24px 18px;
}

/* Adım başlığı — ortalı giriş bloğu */
.ob-lead { text-align: center; margin-bottom: 22px; }
.ob-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.ob-note { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }

.ob-req { color: var(--accent); margin-left: 3px; font-weight: 700; }

/* ── Adım 1: vurgu rengi swatch'ları (settings .stp-acc reçetesi;
   ayrı feature olduğundan kendi sınıfı — data-accent butonun kendi
   paletini YERELDE kuşanır, ham üçlüler burada çözülür) ──────── */
.ob-accs {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; padding: 4px;
}
.ob-acc {
  width: var(--circle-md); height: var(--circle-md); border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--accent-pop-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
  cursor: pointer; transition: transform var(--tr-fast);
}
.ob-acc:hover { transform: scale(1.1); }
.ob-acc.active { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }
/* Özel renk: gökkuşağı = "istediğini seç"; bilinçli literal ikonografi,
   vurgu ailesi DEĞİL. Aktifken halka rengi kökten miras aileden doğar. */
.ob-acc--custom {
  background: conic-gradient(from 210deg,
    #f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e);
}

/* ── Adım 2: avatar seçici ────────────────────────────────────── */
.ob-avatar-row {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  margin: 2px 0 20px;
}
.ob-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--surface-2); overflow: hidden;
  display: grid; place-items: center; cursor: pointer;
  color: var(--accent);
  transition: transform var(--tr-fast), background var(--tr-fast);
}
.ob-avatar.is-add { background: var(--accent-soft); }
.ob-avatar:hover { transform: scale(1.03); }
.ob-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ob-avatar-cap { font-size: 12.5px; font-weight: 600; color: var(--text-3); }

/* ── Footer: durum satırı + [geri] · dots · [İleri/Başla] ─────── */
.ob-foot {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 24px calc(16px + var(--safe-bottom));
}
.ob-msg { font-size: 12.5px; text-align: center; color: var(--text-3); }
.ob-msg:empty { display: none; }
.ob-msg.error { color: var(--danger); }

.ob-foot-row { display: flex; align-items: center; gap: 12px; }
.ob-back {
  flex: 0 0 auto;
  width: var(--circle-md); height: var(--circle-md); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.ob-back:hover { background: var(--surface-3); color: var(--text); }
.ob-back[hidden] { display: none; }

.ob-dots { flex: 1; display: flex; justify-content: center; gap: 8px; }
.ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-3);
  transition: background var(--tr-fast), transform var(--tr-fast);
}
.ob-dot.done { background: rgba(var(--accent-rgb), .5); }
.ob-dot.active { background: var(--accent); transform: scale(1.25); }

.ob-next { flex: 0 0 auto; min-width: 112px; }
/* "Başla" — heyecanlı final: birincil kontrast pill yerine accent
   gradient (iki sınıflı seçici btn--primary'yi güvenle ezer). */
.ob-next.ob-next--start {
  min-width: 148px;
  background: var(--accent-grad); color: var(--on-accent);
  border-color: transparent;
}
.ob-next.ob-next--start:hover { filter: brightness(1.05); }

/* ── Ülke/dil seçici alt sayfası içeriği ─────────────────────── */
.ob-pick { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ob-pick-h { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.ob-pick-search { margin-bottom: 10px; flex: 0 0 auto; }