/* =============================================================================
   MİQNO — TEMA PROMPT STÜDYOSU  ·  #fpField   (FOTO-PROMPT-001)

   KAPSAM: yalnız `#fpField` ve altı. Panelin kendi jetonları kullanılır
   (--gold, --line, --line-soft); yeni palet KURULMAZ.

   BİLEŞEN DİLİ: tetikleyici anahtar "Arka Planı Kaldır" ile AYNI bileşendir
   (`.tff-bgremove-toggle` + track + thumb, tf-sayfa.css:2559). Buradaki
   kurallar o bileşenin yalnız İÇİNE iki satır metin ve bir rozet ekler.

   ⚠ `[hidden]` TUZAĞI — BU DEPODA DÖRT KEZ YAŞANDI
   `hidden` bir sunum niteliğidir ve `display:*` taşıyan HER kural onu ezer.
   Aşağıda `display` verilen her sınıfın YANINDA açık bir
   `[hidden] { display: none !important }` durur. Yeni bir `display` kuralı
   eklerken aynısını yaz -- yoksa gizli sanılan blok ekranda kalır.

   KATMAN: bu dosya `#tab-photo` içindeki tek bir alanı biçimlendirir ve panel
   iki katmanda (masaüstü/mobil) AYNI DOM'la gösterildiği için katman farkı
   yalnız ortak seçimlerin katlanmasıdır. Eşik burada YAZILMAZ; medya sorgusu
   `tasarla-mobil.js`teki tek sayıdan (940) türeyen sınırı tekrar eder ve
   değişirse ölçüm (FP-4) düşer.
   ========================================================================== */

/* ------------------------------------------------------------- TETİKLEYİCİ */
#fpField .fp-switch { align-items: flex-start; }
#fpField .fp-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#fpField .fp-switch-text[hidden] { display: none !important; }
#fpField .fp-switch-alt {
  font-size: .78rem; line-height: 1.35; color: var(--muted, #6E5B66); font-weight: 400;
}
#fpField .fp-badge {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  font-size: .62rem; letter-spacing: .1em; font-weight: 700;
  color: var(--gold-text); background: var(--gold-dim);
  border: 1px solid rgba(244, 184, 96, .5); border-radius: 999px; padding: 2px 7px;
}

/* -------------------------------------------------------------------- GÖVDE
   AÇILIŞ ANİMASYONU YOK (kasıtlı): yükseklik geçişi altındaki Fotoğraf Stili
   şeridini ve onun üstündeki kartı oynatırdı. Alan açılıp kapanırken kanvasın
   kutusu BİREBİR aynı kalmalı -- ölçüm FP-4 bunu kilitliyor. */
#fpField .fp-body { display: grid; gap: 14px; margin-top: 12px; }
#fpField .fp-body[hidden] { display: none !important; }

#fpField .fp-group { display: grid; gap: 6px; }
#fpField .fp-group[hidden] { display: none !important; }
#fpField .fp-group-label {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #6E5B66); font-weight: 700;
}

/* ---------------------------------------------------------------- ÇİPLER
   SARAR, KAYDIRMAZ. Yatay kaydırma çubuğu açılsaydı 390 px'te sayfanın
   kendisi yana kayardı (ölçüm FP-4: scrollWidth == clientWidth). */
#fpField .fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#fpField .fp-chips[hidden] { display: none !important; }

#fpField .fp-cip {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: .82rem; line-height: 1.2;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: inherit;
  transition: background-color .15s, border-color .15s, color .15s;
}
#fpField .fp-cip:hover { border-color: var(--gold); }
/* v2: temanın çizmediği ortak seçenek (kayıt `gizle`) -- [hidden] tuzağı: display kuralı
   yanında açık `none !important`. */
#fpField .fp-cip[hidden] { display: none !important; }
/* ⚠ SEÇİLİ ÇİP KALINLAŞMAZ — YOKSA SATIR YENİDEN DİZİLİR (10 Eylül 2026)
   Kerem: "bu bölüme eklenen hiçbir şey o kısımda sağa sola oynatmamalı."
   `font-weight: 600` metni GENİŞLETİYOR; çipler sarmalı bir satırda durduğu
   için seçilen çipin genişliği değişince ondan SONRAKİ her çip yana kayıyordu.
   ÖLÇÜLDÜ (390, yedek yazı tipiyle): tema çiplerinde 1,2 px, ortak seçim
   çiplerinde 1,6 px -- gerçek yazı tipinin kalını daha geniş olduğu için
   cihazda daha büyük.
   AYRIM KAYBOLMUYOR: seçili çip zaten ALTIN ZEMİN + koyu metin oluyor; bu
   beyaz zeminli çipin yanında en güçlü işaret. Kalınlık yalnız kaymayı
   getiriyordu. Vurgu artırılacaksa metrik DEĞİŞTİRMEYEN bir yol seçilmeli
   (gölge/kenar), font ağırlığı değil. */
#fpField .fp-cip.secili {
  background: var(--gold); border-color: var(--gold); color: #3B2C35;
}
#fpField .fp-cip:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
#fpField .fp-cip--tema { font-size: .86rem; padding: 8px 14px; }

/* ------------------------------------------------------- ORTAK: ÖZET SATIRI
   Masaüstünde `hidden` (JS veriyor), mobilde görünür. */
#fpField .fp-ozet {
  display: flex; align-items: center; gap: 8px; width: 100%;
  appearance: none; -webkit-appearance: none; text-align: left;
  font: inherit; cursor: pointer;
  padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fff; color: inherit;
}
#fpField .fp-ozet[hidden] { display: none !important; }
#fpField .fp-ozet-metin {
  flex: 1 1 auto; min-width: 0;
  font-size: .82rem; color: var(--muted, #6E5B66);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#fpField .fp-ozet-ok { flex: 0 0 auto; color: var(--gold-text); transition: transform .15s; }
#fpField .fp-ozet[aria-expanded="true"] .fp-ozet-ok { transform: rotate(90deg); }

#fpField .fp-ortak { display: grid; gap: 8px; }
#fpField .fp-ortak[hidden] { display: none !important; }
#fpField .fp-ortak-govde { display: grid; gap: 10px; }
#fpField .fp-ortak-govde[hidden] { display: none !important; }

#fpField .fp-tema-alanlar { display: grid; gap: 10px; }
#fpField .fp-tema-alanlar[hidden] { display: none !important; }

/* -------------------------------------------------------------------- EK NOT
   Tüm stüdyodaki TEK serbest giriş. Sınır ve sayaç KAYITTAN yazılır. */
#fpField .fp-not { position: relative; }
#fpField .fp-not-input {
  width: 100%; font: inherit; font-size: .88rem;
  padding: 9px 11px; padding-right: 64px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
}
#fpField .fp-not-input:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }
#fpField .fp-sayac {
  position: absolute; right: 10px; bottom: 10px;
  font-size: .7rem; color: var(--muted, #6E5B66); pointer-events: none;
}

/* --------------------------------------------------------------------- ÇIKTI */
#fpField .fp-cikti {
  display: grid; gap: 8px;
  padding: 12px; border-radius: 12px;
  border: 1.5px solid var(--line-soft); background: rgba(244, 184, 96, .06);
}
#fpField .fp-cikti[hidden] { display: none !important; }
#fpField .fp-cikti-bas { display: grid; gap: 2px; }
#fpField .fp-cikti-bas[hidden] { display: none !important; }
#fpField .fp-dil-notu { font-size: .72rem; color: var(--muted, #6E5B66); line-height: 1.4; }

#fpField .fp-prompt {
  width: 100%; resize: vertical; min-height: 150px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
  padding: 10px 11px; border: 1.5px solid var(--line); border-radius: 10px;
  background: #fff; color: inherit;
}

#fpField .fp-copy { width: 100%; }
#fpField .fp-kopyalandi {
  display: block; text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--gold-text);
}
#fpField .fp-kopyalandi[hidden] { display: none !important; }

/* Üç adımlık yönerge. 3. adım bir DÜĞMEDİR: mevcut yükleme kutusuna götürür. */
#fpField .fp-adimlar {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 2px 0 0; padding: 0; list-style: none;
}
#fpField .fp-adimlar[hidden] { display: none !important; }
#fpField .fp-adimlar li {
  display: grid; gap: 4px; justify-items: start;
  font-size: .74rem; line-height: 1.35; color: var(--muted, #6E5B66);
}
#fpField .fp-adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--gold-dim); color: var(--gold-text);
  font-size: .68rem; font-weight: 700;
}
#fpField .fp-adim-no[hidden] { display: none !important; }
#fpField .fp-geri {
  appearance: none; -webkit-appearance: none; border: 0; background: none;
  padding: 0; font: inherit; font-size: .74rem; line-height: 1.35; text-align: left;
  color: var(--gold-text); text-decoration: underline; cursor: pointer;
}
#fpField .fp-uyari {
  margin: 0; font-size: .72rem; line-height: 1.45; color: var(--muted, #6E5B66);
}
#fpField .fp-uyari[hidden] { display: none !important; }
/* v2: seçenek/tema uyarıları (İki kişi, Bebek) grubun altında tek satır. */
#fpField .fp-secenek-uyari, #fpField .fp-tema-uyari { margin-top: 4px; color: var(--gold-text); }

/* --------------------------------------------------------------------- MOBİL
   Eşik `tasarla-mobil.js`teki TF_TASARLA_ESIK = 940'tan türer (mobil ≤ 939).
   Burada tekrar edilmesi zorunlu -- CSS o değişkeni okuyamaz -- ve ayrışırsa
   ölçüm FP-4 (390 px'te taşma yok) düşer. */
@media (max-width: 939px) {
  /* Yönerge üç sütuna sığmıyor: 390'da her sütun 110 px'e iniyor ve
     "Fotoğrafınla birlikte AI aracına ver" dört satıra bölünüyordu. */
  #fpField .fp-adimlar { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #fpField .fp-adimlar li { grid-template-columns: 18px minmax(0, 1fr); align-items: start; }
  #fpField .fp-prompt { min-height: 120px; font-size: .74rem; }
  #fpField .fp-copy { min-height: 44px; }   /* dokunma hedefi */
  #fpField .fp-cip { padding: 8px 12px; }   /* aynı gerekçe */
}