/* Modül C: tasarım bölümü (#panel-site, #panel-post). Yalnız core.css token'ları. */
.tz .tz-title { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 600; }
.tz .tz-title-gallery { margin-top: var(--sp-5); }
.tz-actions { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.tz-actions .btn { padding: 0 var(--sp-2); }
.tz-hint { margin: var(--sp-2) 0 0; }
.tz-hint[hidden] { display: none; }
.tz-empty { margin: 0; padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.tz-error { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); }

.tz-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.tz-run { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.tz-run-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none;
}
.tz-run-head::-webkit-details-marker { display: none; }
.tz-run-head:focus-visible, .tz-prompt > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tz-run-name { font-weight: 600; }
.tz-run-meta { margin-left: auto; }
.tz-run[open] > .tz-run-head { border-bottom: 1px solid var(--border); }

.tz-status { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 500; background: var(--surface-2); color: var(--text-2); }
.tz-status.is-done { background: var(--accent-soft); color: var(--ok); }
.tz-status.is-failed { background: var(--danger-soft); color: var(--danger); }
.tz-status.is-rendering, .tz-status.is-concepts, .tz-status.is-queued { background: var(--warn-soft); color: var(--warn); }

.tz-concepts { display: flex; flex-direction: column; }
.tz-concept { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.tz-concept + .tz-concept { border-top: 1px solid var(--border); }
.tz-concept-top { display: flex; align-items: baseline; gap: var(--sp-2); }
.tz-concept-no { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.tz-concept-name { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.tz-idea { margin: 0; color: var(--text-2); }
.tz-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.tz-chip { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--text-2); }
.tz-pal { display: inline-flex; gap: var(--sp-1); margin-left: auto; }
.tz-sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border-strong); }

.tz-imgs { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tz-img { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tz-imgs.is-site .tz-img { width: 52%; }
.tz-imgs.is-post .tz-img:nth-child(1) { flex: 0 0 56%; }
.tz-imgs.is-post .tz-img:nth-child(2) { flex: 1 1 0; }
.tz-img figcaption { display: flex; flex-direction: column; gap: var(--sp-2); }
.tz-fmt { color: var(--text-2); font-weight: 500; }
.tz-img-acts { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tz-img-acts .btn { text-decoration: none; padding: 0 var(--sp-2); }

.tz-zoom { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: zoom-in; overflow: hidden; }
.tz-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tz-zoom img { display: block; width: 100%; height: auto; }

.tz-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; color: var(--text-3); }
.tz-ph.r-1x2 { aspect-ratio: 1 / 2; }
.tz-ph.r-4x5 { aspect-ratio: 4 / 5; }
.tz-ph.r-9x16 { aspect-ratio: 9 / 16; }
.tz-ph.is-failed { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.tz-ph.is-failed .muted { overflow-wrap: anywhere; }

.tz-skel { display: block; height: 12px; border-radius: var(--radius-sm); background: var(--border); }
.tz-skel-line { flex: 1; }
.tz-skel-short { width: 60%; }
.tz-concept.is-pending .tz-concept-top { align-items: center; }

.tz-prompt { border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.tz-prompt > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
.tz-prompt-body { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.tz-prompt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.tz-pre { margin: 0; padding: var(--sp-3); max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-xs); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tz-caption { margin: 0; }

/* Büyük görünüm */
.tz-lb { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: rgba(28, 33, 29, .92); }
.tz-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: var(--surface); }
.tz-lb-scroll { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 var(--sp-4) var(--sp-5); }
.tz-lb-img { display: block; max-width: 100%; max-height: calc(100vh - 80px); height: auto; border-radius: var(--radius-sm); background: var(--surface); }
.tz-lb-img.is-tall { width: min(860px, 100%); max-height: none; }

@media (max-width: 480px) {
  .tz-run-head { padding: var(--sp-3); }
  .tz-concept { padding: var(--sp-3); }
  .tz-imgs.is-site .tz-img { width: 64%; }
}

.tz-hybrid { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.tz-hybrid-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.tz-qa { display: block; }