/*
 * Büyüt / Akıcılaştır / Hızlı büyüt sayfacıkları (transform.js). Değerler tokens.css ve app.css'in :root'undan.
 */
.tf-sheet, .tf-body, .tf-choose { display: flex; flex-direction: column; gap: var(--sp-4); }
.tf-sheet .sheet-actions { margin-top: var(--sp-1); }
.tf-block { display: flex; flex-direction: column; gap: var(--sp-2-5); }
.tf-block:empty { display: none; }
.tf-source { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-bg); border: var(--bw) solid var(--c-line-2); }
.tf-source-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tf-source-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: var(--fw-semibold); font-size: var(--fs-ui); overflow-wrap: anywhere; text-align: start; }
.tf-source-detail { font-size: var(--fs-sm); color: var(--c-text-3); }
.tf-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); }
.tf-label-value { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.tf-hint { font-size: var(--fs-sm); color: var(--c-text-3); }
.tf-hint:empty { display: none; }
.tf-change { font-size: var(--fs-sm); color: var(--c-text-3); font-variant-numeric: tabular-nums; text-align: start; }
[dir="rtl"] .tf-change { text-align: end; }
.tf-change:empty { display: none; }
.tf-single { font-size: var(--fs-ui); }
.tf-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.tf-min { font-size: var(--fs-ui); color: var(--c-text-3); }
.tf-sheet .segmented-wide .seg-label { white-space: normal; text-align: center; line-height: var(--lh-snug); }

/* ---------- Büyüt sayfası (/create/upscale) ---------- */
/* Sahne bölümünün karakter resimleri: 4 sütun 3:4 kutu, sonda "+ Ekle". */
.ups-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.ups-ref, .ups-ref-add { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; background: var(--c-s2); }
.ups-ref img { width: 100%; height: 100%; object-fit: cover; }
.ups-ref-empty, .ups-ref-busy, .ups-ref-error { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-text-3); }
.ups-ref-busy { background: var(--c-media-scrim); color: var(--c-on-media); }
.ups-ref-error { background: var(--c-error-surface); color: var(--c-error); }
.ups-ref-badge { position: absolute; bottom: var(--sp-1-5); inset-inline-start: var(--sp-1-5); }
.ups-ref-remove { position: absolute; top: var(--sp-1); inset-inline-end: var(--sp-1); width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--c-on-media); }
.ups-ref-remove .icon { width: 28px; height: 28px; padding: var(--sp-1-5); border-radius: 50%; background: var(--c-media-scrim); }
.ups-ref-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); border: var(--bw) dashed var(--c-line-3); background: transparent; color: var(--c-text-2); font-size: var(--fs-sm); }
.ups-result { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: end; overflow-wrap: anywhere; }
@media (max-width: 359px) { .ups-refs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }