/* Üretim sayfası (generation.js): sahne, adımlar, aday sekmeleri, oynatıcı, eylemler, ayar fişi; ortak stil / ayar hapları. */

/* ---------- Stil ve ayar hapları (Ana Sayfa da kullanır) ---------- */
.gen-style-pill { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; height: var(--ctl-xs); padding-inline: var(--sp-0-5) var(--sp-2-5); border-radius: var(--r-pill); background: var(--c-s3); border: var(--bw) solid var(--c-line-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-text-2); }
.gen-style-swatch { position: relative; width: 22px; height: 22px; flex: none; overflow: hidden; border-radius: 50%; background: var(--c-s5); }
.gen-style-swatch img { width: 100%; height: 100%; object-fit: cover; }
.gen-style-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.gen-style-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gen-style-pill.has-caption { height: auto; min-height: 40px; padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); border-radius: var(--r-md); }
[dir="rtl"] .gen-style-pill.has-caption { padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); }
.gen-style-pill.has-caption .gen-style-swatch { width: 30px; height: 40px; border-radius: var(--r-xs); }
.gen-style-pill.has-caption .gen-style-name { color: var(--c-text); font-size: var(--fs-sm); }
.gen-style-caption { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--c-text-3); }
.gen-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.gen-fact { display: inline-flex; align-items: center; gap: var(--sp-1); height: 28px; padding: 0 var(--sp-2-5); border-radius: var(--r-pill); background: var(--c-s2); border: var(--bw) solid var(--c-line-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); white-space: nowrap; }
.gen-fact .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--c-text-2); }

/* ---------- Sahne (sıradaki / süren iş) ---------- */
.gen-stage {
  display: flex; flex-direction: column; min-height: 440px; padding-bottom: var(--sp-5);
  margin-inline: calc(-1 * var(--gutter-l)); padding-inline: var(--gutter-l); background: var(--c-s1); border-bottom: var(--bw) solid var(--c-line);
}
.gen-stage .nav-row { padding-top: max(var(--sp-2), env(safe-area-inset-top)); }
.gen-stage-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6) 0; text-align: center; }
.gen-mode { align-self: center; }
.gen-mode .icon { width: var(--icon-xs); height: var(--icon-xs); }
.gen-readout { font-size: clamp(4.5rem, 3.6rem + 4vw, 6.5rem); font-weight: var(--fw-semibold); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.gen-queue { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: var(--fw-semibold); letter-spacing: var(--tr-title); line-height: var(--lh-title); }
.gen-stage-bar { width: 200px; max-width: 70%; }
.gen-stage-bar .progress { height: 4px; }
.gen-stage-foot { display: flex; flex-direction: column; gap: var(--sp-3); }
.gen-stage-foot .two-tone span:first-child, .gen-head .two-tone span:first-child, .gen-ended .two-tone span:first-child { overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .gen-stage { margin-inline: 0; padding-inline: var(--sp-6); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); margin-top: var(--sp-4); }
}

.gen-body { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.gen-offline .icon { margin-top: 2px; }

/* ---------- Adımlar ---------- */
.gen-steps { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4); background: var(--c-s1); border: var(--bw) solid var(--c-line); border-radius: var(--r-lg); }
.gen-step { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; color: var(--c-text-3); font-size: var(--fs-body-sm); }
.gen-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 11.5px; top: 32px; height: 16px; width: var(--bw); background: var(--c-line-2); }
.gen-step-dot { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: var(--bw) solid var(--c-line-3); }
.gen-step-dot .icon { width: 13px; height: 13px; }
.gen-step-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-3); }
.gen-step.is-done { color: var(--c-text-2); }
.gen-step.is-done .gen-step-dot { background: var(--c-s4); border-color: var(--c-s4); color: var(--c-text); }
.gen-step.is-current { color: var(--c-text); font-weight: var(--fw-semibold); }
.gen-step.is-current .gen-step-dot { border: var(--bw-2) solid var(--c-light); }
.gen-step.is-current .gen-step-dot i { width: 8px; height: 8px; background: var(--c-light); animation: dot 1200ms infinite var(--ease); }
.gen-step.is-failed { color: var(--c-error); font-weight: var(--fw-semibold); }
.gen-step.is-failed .gen-step-dot { background: var(--c-error-surface); border-color: var(--c-error-border); }

/* ---------- Biten / başarısız iş ---------- */
.gen-ended, .gen-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.gen-ended { margin-top: var(--sp-1); }
.gen-ended .error-banner { margin-top: var(--sp-2); }
.gen-failure { color: var(--c-text) !important; font-size: var(--fs-body-sm) !important; }
.gen-head { margin-top: var(--sp-5); }
.gen-head .info-note { margin-top: var(--sp-1); }
.gen-choose { color: var(--c-text-2); font-size: var(--fs-body-sm); margin-top: var(--sp-2); }
.gen-cands { margin-bottom: var(--sp-3); }
.gen-cands .seg { flex-direction: row; gap: var(--sp-1); }
.gen-cand-check { color: var(--c-success); display: inline-flex; }
.gen-cand-check .icon { width: var(--icon-xs); height: var(--icon-xs); }

.gen-player { display: flex; justify-content: center; }
.gen-player > .player { width: 100%; }
.gen-player > .player .player-box { max-height: min(62dvh, 560px); }
.gen-player.is-audio { display: block; }
.gen-image { width: 100%; max-width: 560px; margin-inline: auto; }
.gen-image .image-view { max-height: 66dvh; }
.gen-image .image-view img:not(.image-thumb) { max-height: 66dvh; object-fit: contain; }
.gen-placeholder { --ratio: 9 / 16; display: grid; place-items: center; width: min(100%, 296px); aspect-ratio: var(--ratio); max-height: 56dvh; border-radius: var(--r-lg); background: var(--c-s1); border: var(--bw) solid var(--c-line); color: var(--c-text-3); }
.gen-placeholder .icon { width: 40px; height: 40px; }
.gen-actions { margin-top: var(--sp-5); }

.gen-cand-actions { margin-top: var(--sp-2); }
.gen-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2-5); }
@media (max-width: 340px) {
  .gen-tiles { grid-template-columns: 1fr; }
}
.gen-tile { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); text-align: start; font-weight: var(--fw-semibold); transition: background var(--dur-fast), transform var(--dur-fast) var(--ease); }
.gen-tile:hover:not(:disabled) { background: var(--c-s2); }
.gen-tile:active:not(:disabled) { transform: scale(0.97); }
.gen-tile.is-busy { opacity: 0.8; }
.gen-tile-icon { display: grid; place-items: center; width: var(--app-row-icon); height: var(--app-row-icon); flex: none; border-radius: var(--r-xs); background: var(--c-s3); }
.gen-tile-icon .icon { width: var(--icon-sm); height: var(--icon-sm); }
.gen-tile-label { flex: 1; min-width: 0; }

/* ---------- Ayarlar fişi ---------- */
.gen-settings { margin-top: var(--sp-3); }
.gen-settings .sub-head { margin-top: var(--sp-8); }
.gen-settings .receipt-total .text-2 { font-size: var(--fs-body-sm); }
.refund-pill { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--ctl-xs); padding: var(--sp-0-5) var(--sp-2-5); border-radius: var(--r-pill); background: var(--c-success-surface); border: var(--bw) solid var(--c-success-border); color: var(--c-success); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.refund-pill .icon { width: var(--icon-xs); height: var(--icon-xs); }

/* ---------- Bulunamadı / yükleniyor ---------- */
.gen-missing { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); }
.gen-skel-player { width: min(100%, 296px); aspect-ratio: 9 / 16; max-height: 50dvh; margin-inline: auto; border-radius: var(--r-lg); }
.gen-skel-title { height: 32px; width: 70%; margin-top: var(--sp-3); }
.gen-skel-line { height: 20px; width: 45%; }

.gen-page > .nav-row { padding-top: max(var(--sp-2), env(safe-area-inset-top)); }
[dir="rtl"] .gen-page .two-tone > span { text-align: right; }