/* ============================================================
   char-create.css — YENİ KARAKTER SEKANSI (.kseq-*)

   Kanıt tezgâhı: design-tests/charcreate-seq.html (launch
   "design-tests", 8792).

   Astro'nun yeni harita sekansının (.ast-seq-*) İKİZİ: aynı cam
   kare, aynı üst şerit, aynı alt şerit, aynı ölçüler. İki ekran
   birbirinin sınıfını PAYLAŞMAZ (CSS_GOLDEN_RULE K2) — satır
   tekrarı ucuz, dolaşık bağımlılık pahalı. Ortak olan yalnız
   token'lar; keyframe'ler de bu dosyada, kendi adlarıyla.

   KART TAM BOY (kullanıcı kararı 2026-09-12): panelin alanını
   komple kaplar, adım kısa da olsa uzun da olsa boy değişmez →
   "Devam" hep aynı yerde durur, adım değişince kart kıpırdamaz.
   İçeriğe göre kısalıp uzayan kip tezgâhta denendi, SEÇİLMEDİ.
   ============================================================ */

.kseq {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  container: kseq / inline-size;
  /* CAM KARE: form panelin kenarlarına dayanmaz, kendi cam yüzeyinde
     durur. Pay panele DEĞİL karta yazılır (margin): #view-chat'i
     sohbetin kendisi de kullanıyor, oraya padding vermek onu da içeri
     iterdi. K10: kabın KENDİSİNE opacity yazılmaz, yoksa blur ölür. */
  margin: 20px;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2), var(--glass-edge);
}
/* Telefonda pay daralır (kart ekranı yemesin). Kabın kendi ölçüsü
   olduğu için @container ile yazılamaz — eşik projenin 720'si. */
@media (max-width: 720px) {
  .kseq { margin: 10px; }
}

/* ── üst şerit: geri + çentikler + sayaç, TEK satır ──────────── */
.kseq-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 0;
}
.kseq-back {
  width: var(--circle-md); height: var(--circle-md); flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-full); background: transparent;
  color: var(--text-3); cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.kseq-back:hover { background: var(--surface-2); color: var(--text); }
.kseq-ticks { flex: 1; min-width: 0; display: flex; gap: 5px; }
.kseq-tick {
  flex: 1; height: 3px; border-radius: var(--r-full);
  background: var(--surface-2); transition: background var(--tr-med);
}
.kseq-tick.on { background: var(--accent); }
.kseq-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-4);
}

/* ── gövde: TEK kaydırıcı yüzey ─────────────────────────────── */
.kseq-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 26px 20px 6px;
  scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent;
}
.kseq-body::-webkit-scrollbar { width: 4px; }
.kseq-body::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
.kseq-body::-webkit-scrollbar-track { background: transparent; }
/* Alan sütunu ortada, okunur ölçüde — panel ne kadar genişlerse
   genişlesin alt çizgiler metre uzunluğunda olmasın. */
.kseq-stage { min-width: 0; max-width: 560px; margin: 0 auto; }
/* Adım girişi. Kalıcı opacity / will-change YAZILMAZ (K10) —
   animasyon bitince opacity 1'e döndüğü için sorun doğmaz. */
.kseq-step { animation: kseq-in .34s cubic-bezier(.2, .9, .3, 1); }
@keyframes kseq-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* ── EKSİK ALAN UYARISININ REÇETESİ ─────────────────────────────
   Kilitli "Devam"a basılınca eksik alanın HALKASI yanıp söner ve
   AYNI ANDA geri kalan alanlar kararır; ikisi birlikte başlar,
   birlikte biter (2s) → uyarı bitince ekran kalıntısız normale
   döner. Halka KALICI DEĞİL: keyframe'in iki ucu da saydam, dolu
   olan ORTASI. Alfa üçlüden (literal renk YASAK).
   Jest onboarding'in (.ob-ring/.ob-dim) aynısı ama reçete BURADA
   kendi adıyla duruyor: components.css'e ortak isimle taşımak
   denendi ve geri alındı — tek kullanıcısı olan bir şeyi ortak
   yere koymak fazlalıktı. */
@keyframes kseq-ring {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 0); }
  50%      { box-shadow: 0 0 0 1.5px rgba(var(--accent-rgb), 1); }
}
@keyframes kseq-ring-out {
  0%, 100% { outline-color: rgba(var(--accent-rgb), 0); }
  50%      { outline-color: rgba(var(--accent-rgb), 1); }
}
/* Kararma 2s'nin ilk %12'sinde iner, %78'e dek sönük bekler, son
   %22'de geri gelir → tam da son halka sönmesiyle birlikte biter. */
@keyframes kseq-dim {
  0%       { opacity: 1; }
  12%, 78% { opacity: .32; }
  100%     { opacity: 1; }
}
.kseq-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.kseq-q {
  margin-top: 10px; font-size: 26px; line-height: 1.18;
  font-weight: 700; letter-spacing: -.03em;
}
.kseq-sub {
  margin-top: 10px; max-width: 54ch;
  font-size: 14px; line-height: 1.65; color: var(--text-4);
}
.kseq-fields { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; }
.kseq-f { position: relative; min-width: 0; }
.kseq-lab {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-4);
  transition: color var(--tr-fast);
}
/* etiket içindeki açıklama/sayaç — Inter'de gerçek italik yok, düz kesi */
.kseq-hint {
  font-style: normal; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--text-4);
}
/* Kutusuz alan: yalnız alt çizgi (iç öğeye zemin/kenarlık vermeme
   kuralı). --field-fs: uygulama geneli tek boy; 16 altı iOS'ta odak
   zoom'u demek (2026-08-18 kararı). */
.kseq-in {
  width: 100%; margin-top: 6px; padding: 8px 0 10px;
  font-size: var(--field-fs); font-weight: 600;
  background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0;
  transition: border-color var(--tr-fast);
}
.kseq-in:focus { outline: none; border-bottom-color: var(--accent); }
.kseq-in::placeholder { color: var(--text-4); font-weight: 500; }

/* ── adım 1: yüz + ad ───────────────────────────────────────
   Avatar SOLDA, açıklaması yanında (onboarding .ob-av-row ritmi):
   etiket solda başlıyorsa kontrol de solda başlar, sütun kırılmaz.
   Ölçü onboarding'in 62'sinden büyük — bu adımın tek işi karaktere
   yüz vermek. */
.kseq-avrow { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.kseq-avring {
  position: relative; width: 96px; height: 96px; flex: 0 0 auto;
  border: 0; border-radius: var(--r-full); padding: 0;
  background: var(--surface); color: var(--text-4);
  background-size: cover; background-position: center;
  display: grid; place-items: center; cursor: pointer;
  outline: 2px solid transparent; outline-offset: 3px;
  transition: filter var(--tr-fast);
}
.kseq-avring:hover { filter: brightness(1.12); }
.kseq-avcam {
  position: absolute; right: 0; bottom: 0;
  width: 32px; height: 32px; border: 0; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--accent-strong); color: var(--on-accent);
  pointer-events: none;
}
.kseq-avcap { min-width: 0; font-size: 13px; line-height: 1.6; color: var(--text-4); }
.kseq-avcap b { display: block; color: var(--text); font-size: 14px; font-weight: 650; }

/* ── adım 2: ses satırları ──────────────────────────────────
   İÇ KAYDIRICI YOK (kartın .kc-vlist dersi): liste adımın akışında
   uzar, kaydıran TEK yüzey .kseq-body'dir. İki kaydırıcı üst üste
   binince liste kesiliyor ve telefonda yanlış olan hareket ediyor.
   Uyarı halkasını SATIRLAR değil LİSTE taşır (2026-09-12 ölçüldü:
   30 satır birden yanınca uyarı okunmuyor, gürültü oluyor). */
.kseq-vlist {
  margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
  border-radius: var(--r-md);
  outline: 2px solid transparent; outline-offset: 6px;
}
.kseq-vopt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--text-3);
  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
  transition: background var(--tr-fast), box-shadow var(--tr-fast);
}
.kseq-vopt:hover { background: var(--surface-2); }
.kseq-vopt.on {
  background: var(--accent-soft); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55);
}
.kseq-vlead {
  flex: 0 0 84px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--text-4);
}
.kseq-vtone { flex: 1; min-width: 0; }

/* ── adım 3: foto ızgarası ──────────────────────────────────── */
.kseq-phgrid {
  margin-top: 10px; display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Ölçü kabın genişliğine bakar (@container), viewport'a DEĞİL:
   1902px'lik masaüstünde bile bu panel 534px olabiliyor. */
@container kseq (max-width: 439px) {
  .kseq-phgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kseq-phcell { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kseq-phimg {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md);
  background: var(--surface); background-size: cover; background-position: center;
}
.kseq-phdel {
  position: absolute; right: 5px; top: 5px;
  width: 24px; height: 24px; border: 0; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
}
.kseq-phname {
  width: 100%; padding: 6px 0; font-size: var(--field-fs); font-weight: 600;
  background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0;
  transition: border-color var(--tr-fast);
}
.kseq-phname:focus { outline: none; border-bottom-color: var(--accent); }
.kseq-phname::placeholder { color: var(--text-4); font-weight: 500; font-size: 13px; }
.kseq-phadd {
  aspect-ratio: 1; border: 0; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface); color: var(--text-4);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.kseq-phadd:hover { background: var(--surface-2); color: var(--text); }
/* yükleme sürerken: + yerine dönen halka (kasa yolculuğu sessiz kalmasın) */
.kseq-phadd.is-busy { pointer-events: none; color: var(--text-4); }
.kseq-phadd.is-busy i { display: none; }
.kseq-phadd.is-busy::before {
  content: ''; width: 20px; height: 20px; border-radius: var(--r-full);
  border: 2px solid var(--surface-3); border-top-color: var(--accent);
  animation: kseq-spin .8s linear infinite;
}
@keyframes kseq-spin { to { transform: rotate(360deg); } }

/* ── adım 4: kişilik ────────────────────────────────────────
   Kart sürümünde kişilik AYRI bir tam-ekran editörde yazılıyor
   (prompt-editor.js). Sekansta adımın KENDİSİ tam ekran → ikinci
   katman gereksiz: yazı alanı doğrudan burada. */
.kseq-ta {
  width: 100%; margin-top: 8px; min-height: 220px; resize: none;
  padding: 14px 16px; border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--field-fs); line-height: 1.7;
  transition: box-shadow var(--tr-fast);
}
.kseq-ta:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55); }
.kseq-ta::placeholder { color: var(--text-4); }
/* yardım: zeminsiz metin düğmesi — akordeon kutusu YOK */
.kseq-help {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 6px 0; border: 0; background: transparent;
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.kseq-helpbox {
  margin-top: 8px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--surface); color: var(--text-4);
  font-size: 13px; line-height: 1.7;
}
.kseq-helpbox ul { margin: 8px 0 0; padding-left: 18px; }
.kseq-helpbox em { color: var(--text-3); font-style: normal; }

/* ── adım 5: akış kartları (astro ekol kartlarının ikizi) ───── */
.kseq-cards { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.kseq-card {
  padding: 13px 15px; border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--text-4);
  font: inherit; font-size: 12px; line-height: 1.6;
  cursor: pointer; text-align: left;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background var(--tr-fast), box-shadow var(--tr-fast);
}
.kseq-card:hover { background: var(--surface-2); }
.kseq-card.on {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55);
}
.kseq-card b { display: block; color: var(--text); font-size: 15px; font-weight: 650; }

/* ── alt şerit: alan sütunuyla AYNI hizada ──────────────────── */
.kseq-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 600px; margin: 0 auto;
  padding: 12px 20px calc(14px + var(--safe-bottom));
}
.kseq-next {
  margin-left: auto; flex: 0 1 300px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border: 0; border-radius: var(--r-full);
  background: var(--accent-strong); color: var(--on-accent);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: filter var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.kseq-next:hover { filter: brightness(1.15); }
/* Kilitli hâl `disabled` DEĞİL sönük sınıf: basılabilir kalmalı,
   çünkü basış eksik alanları işaretleyen turu başlatıyor. */
.kseq-next.is-off { background: var(--surface-3); color: var(--text-3); }
.kseq-next.is-off:hover { filter: none; }
/* Dar kap (telefon, dar panel): paylar daralır, CTA tam genişlik. */
@container kseq (max-width: 479px) {
  .kseq-top { padding: 12px 16px 0; }
  .kseq-body { padding: 22px 16px 6px; }
  .kseq-q { font-size: 24px; }
  .kseq-foot { padding: 10px 16px calc(12px + var(--safe-bottom)); }
  .kseq-next { flex: 1; }
}
/* Geniş kapta üst şerit de alan sütunuyla hizalanır — çentikler
   panelin bir ucundan öbürüne uzanan bir cetvele dönmesin. */
@container kseq (min-width: 640px) {
  .kseq-top { width: 100%; max-width: 600px; margin: 0 auto; }
}

/* ── EKSİK ZORUNLU ALAN — reçete yukarıda (kseq-ring/-out/-dim),
   halkayı hangi öğenin taşıdığına burası karar verir. Her kontrol
   kendi satırında: virgüllü gruplama yok (K2). ──────────────── */
.kseq-f.is-missing > .kseq-lab { color: var(--accent); }
.kseq-f.is-missing .kseq-in { animation: kseq-ring 400ms ease-in-out 5; }
.kseq-f.is-missing .kseq-phname { animation: kseq-ring 400ms ease-in-out 5; }
.kseq-f.is-missing .kseq-ta { animation: kseq-ring 400ms ease-in-out 5; }
.kseq-f.is-missing .kseq-avring { animation: kseq-ring-out 400ms ease-in-out 5; }
.kseq-f.is-missing .kseq-vlist { animation: kseq-ring-out 400ms ease-in-out 5; }
.kseq-f.is-missing .kseq-phadd { animation: kseq-ring-out 400ms ease-in-out 5; }
.kseq-f.is-missing .kseq-card { animation: kseq-ring-out 400ms ease-in-out 5; }
.kseq-fields.is-dim > .kseq-f { animation: kseq-dim 2s ease both; }
.kseq-fields.is-dim > .kseq-f.is-lit { animation: none; }
/* Hareket istemeyen kullanıcıda animasyon susar; uyarının TEK
   taşıyıcısı animasyon olduğu için halka STATİK yanar (yoksa hiçbir
   geri bildirim kalmazdı). Alan dolunca .is-missing kalkar. */
@media (prefers-reduced-motion: reduce) {
  .kseq-step { animation: none; }
  .kseq-f.is-missing .kseq-in { animation: none; box-shadow: 0 0 0 1.5px var(--accent); }
  .kseq-f.is-missing .kseq-phname { animation: none; box-shadow: 0 0 0 1.5px var(--accent); }
  .kseq-f.is-missing .kseq-ta { animation: none; box-shadow: 0 0 0 1.5px var(--accent); }
  .kseq-f.is-missing .kseq-avring { animation: none; outline-color: rgb(var(--accent-rgb)); }
  .kseq-f.is-missing .kseq-vlist { animation: none; outline-color: rgb(var(--accent-rgb)); }
  .kseq-f.is-missing .kseq-phadd { animation: none; outline-color: rgb(var(--accent-rgb)); }
  .kseq-f.is-missing .kseq-card { animation: none; outline-color: rgb(var(--accent-rgb)); }
  .kseq-fields.is-dim > .kseq-f { animation: none; }
  .kseq-phadd.is-busy::before { animation: none; }
}