/* İlk giriş tanıtımı (public/js/onboarding.js). Renkler tema değişkenlerinden gelir: seçilen tema pencerede anında görünür.
   Tema ve vurgu rengi kartları Görünüm sayfasının .theme-choices / .color-choices kurallarını kullanır (appearance.css). */
.onboarding { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:24px; background:color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter:blur(6px); animation:ob-fade .2s ease-out; }
.onboarding.closing { opacity:0; transition:opacity .2s; }
.onboarding.entered, .onboarding.entered .onboarding-card { animation:none; }
.onboarding-card { width:min(720px, 100%); max-height:min(860px, calc(100dvh - 48px)); display:flex; flex-direction:column; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 70px #0003; overflow:hidden; animation:ob-rise .32s cubic-bezier(.22,1,.36,1); }
.onboarding-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:14px 16px 6px 24px; flex-shrink:0; }
.onboarding-head .icon-button { justify-self:end; }
.onboarding-brand { font-weight:700; color:var(--accent-ink); }
.onboarding-dots { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.onboarding-dots li { width:8px; height:8px; border-radius:999px; background:var(--line); transition:width .25s, background-color .25s; }
.onboarding-dots li.done { background:color-mix(in srgb, var(--brand) 55%, var(--line)); }
.onboarding-dots li.current { width:22px; background:var(--brand); }
.onboarding-body { flex:1; overflow:auto; overscroll-behavior:contain; padding:10px 28px 22px; }
.onboarding-body h2 { font-size:1.5rem; margin:6px 0 8px; outline:none; }
.onboarding-body .form-error { margin-top:14px; }
.ob-lead { color:var(--muted); margin:0 0 18px; line-height:1.55; }
.onboarding-foot { display:flex; align-items:center; gap:10px; padding:14px 22px; border-top:1px solid var(--line); background:var(--surface-soft); flex-shrink:0; }
.onboarding-foot .button.primary { margin-left:auto; }
.onboarding-spacer { flex:1; }
.onboarding-foot .button .icon { margin-left:4px; }

.ob-group { border:0; padding:0; margin:0 0 22px; min-width:0; }
.ob-group legend { font-weight:600; margin-bottom:10px; padding:0; }
.ob-group > p.muted { margin:-4px 0 12px; }
.ob-points { list-style:none; padding:0; margin:0 0 18px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.ob-points li { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.ob-points .icon, .ob-card .icon { color:var(--accent-ink); }

/* Seçim düğmeleri: yazı boyutu, açılış sayfası, müvekkil türü */
.ob-segment { display:inline-flex; gap:6px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); max-width:100%; }
.ob-segment.wrap { flex-wrap:wrap; }
.ob-segment button, .ob-radio span { display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:9px; border:0; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.ob-segment button[aria-pressed="true"], .ob-radio:has(input:checked) span { background:var(--brand); color:var(--on-brand); }
.ob-radio, .ob-chip, .ob-option { position:relative; }
.ob-radio input, .ob-chip input, .ob-option input { position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; cursor:pointer; }
.ob-radio:has(input:focus-visible) span, .ob-chip:has(input:focus-visible) span, .ob-option:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; }

/* Çalışma biçimi */
.ob-options { display:grid; gap:10px; }
.ob-option { display:flex; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); cursor:pointer; }
.ob-option:has(input:checked) { border-color:var(--brand); background:var(--accent); box-shadow:inset 0 0 0 1px var(--brand); }
.ob-option-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:12px; background:var(--accent); color:var(--accent-ink); }
.ob-option strong, .ob-switch-row strong { display:block; }
.ob-option small, .ob-switch-row small { color:var(--muted); }

/* Çalışma alanları ve menü seçimi (Profil > Çalışma alanlarınız da kullanır) */
.ob-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ob-chip span { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer; }
.ob-chip:has(input:checked) span { background:var(--accent); border-color:var(--brand); color:var(--accent-ink); font-weight:600; }
.ob-chip:has(input:disabled) span { opacity:.6; cursor:wait; }
.ob-order { display:grid; place-items:center; min-width:20px; height:20px; border-radius:999px; background:var(--brand); color:var(--on-brand); font-size:.75rem; }

/* Bildirim anahtarları */
.ob-switches { display:grid; gap:8px; margin-bottom:16px; }
.ob-switch-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.ob-switch-row input { appearance:none; position:relative; flex:none; width:44px; height:26px; min-height:0; margin:0; padding:0; border:0; border-radius:999px; background:var(--muted); cursor:pointer; transition:background-color .2s; }
.ob-switch-row input::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0004; transition:transform .2s; }
.ob-switch-row input:checked { background:var(--brand); }
.ob-switch-row input:checked::after { transform:translateX(18px); }
.ob-switch-row input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }

.ob-note { margin:12px 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.ob-note.warning { background:var(--warning-bg); border-color:color-mix(in srgb, var(--warning) 30%, transparent); }
.ob-note p { margin:0 0 8px; }
.ob-inline-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ob-inline-form { display:flex; align-items:flex-end; gap:10px; margin:8px 0 12px; }
.ob-inline-form .field { flex:1; margin:0; }
.ob-done-list { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:6px; }
.ob-done-list li, .ob-success { display:flex; align-items:center; gap:8px; color:var(--accent-ink); }
.ob-success { margin:12px 0 0; }
.ob-code { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:8px 0; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; }
.ob-code code { flex:1; padding:4px 8px; border-radius:6px; background:var(--surface-soft); word-break:break-all; }
.ob-client { display:grid; gap:12px; justify-items:start; }
.ob-client .field, .ob-client .ob-pair { width:100%; margin:0; }
.ob-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ob-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-bottom:12px; }
.ob-card { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.ob-card strong { display:block; margin:8px 0 4px; }
.ob-card p { margin:0; color:var(--muted); font-size:.875rem; }
/* Kişiselleştirmeden sonra gelen iki kısa bölüm tanıtımı. */
.ob-pages { display:grid; gap:10px; margin-bottom:14px; }
.ob-page { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.ob-page > .icon { flex:none; margin-top:2px; color:var(--accent-ink); }
.ob-page > div { min-width:0; overflow-wrap:anywhere; }
.ob-page strong { display:block; margin-bottom:3px; }
.ob-page p { margin:0; color:var(--muted); line-height:1.5; }
.ob-summary { margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ob-summary div { display:grid; grid-template-columns:160px 1fr; gap:12px; padding:10px 14px; border-top:1px solid var(--line); }
.ob-summary div:first-child { border-top:0; }
.ob-summary dt { color:var(--muted); }
.ob-summary dd { margin:0; }

/* Profil > Çalışma alanlarınız ve Görünüm > Açılış sayfası */
.profile-content .profile-areas, .profile-areas { margin-top:16px; }
.profile-areas h2 { font-size:1.1rem; margin:0 0 4px; }
.profile-areas #areas-status { display:block; min-height:1.2em; margin-top:10px; }
select.start-view { max-width:280px; }

@keyframes ob-fade { from { opacity:0; } }
@keyframes ob-rise { from { opacity:0; transform:translateY(14px) scale(.98); } }
@media (max-width:700px) {
  .onboarding { padding:0; place-items:stretch; }
  .onboarding-card { width:100%; height:100dvh; max-height:none; border:0; border-radius:0; }
  .onboarding-head { grid-template-columns:minmax(0, 1fr) auto; padding:calc(10px + env(safe-area-inset-top)) 12px 4px 16px; }
  .onboarding-head .icon-button { grid-column:2; grid-row:1; }
  .onboarding-dots { grid-column:1 / -1; grid-row:2; justify-content:center; flex-wrap:wrap; }
  .onboarding-body { padding:8px 16px 18px; }
  .onboarding-body h2 { font-size:1.3rem; }
  .onboarding-foot { flex-wrap:wrap; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .onboarding-foot .button { max-width:100%; }
  .onboarding-spacer { display:none; }
  .ob-points, .ob-cards, .ob-pair { grid-template-columns:1fr; }
  .ob-summary div { grid-template-columns:1fr; gap:2px; }
  .ob-inline-form { flex-direction:column; align-items:stretch; }
}
/* Windows yüksek karşıtlık: anahtar ve seçili kartlar sistem renkleriyle görünür. */
@media (forced-colors:active) {
  .ob-switch-row input { forced-color-adjust:none; background:Canvas; border:1px solid CanvasText; }
  .ob-switch-row input::after { background:CanvasText; top:2px; left:2px; }
  .ob-switch-row input:checked { background:Highlight; }
  .ob-switch-row input:checked::after { background:HighlightText; }
  .ob-option:has(input:checked), .ob-chip:has(input:checked) span, .ob-radio:has(input:checked) span, .ob-segment button[aria-pressed="true"] { outline:2px solid Highlight; }
}
@media (prefers-reduced-motion:reduce) {
  .onboarding, .onboarding-card { animation:none; }
  .onboarding.closing { transition:none; }
}