/* Ekran 13 — Anons Üretici (#/anons). Source: designer/claude-design/css/pages/announcer.css */
.announcer { display: grid; grid-template-columns: minmax(0, 2fr) minmax(var(--announcer-side-min), 1fr); gap: var(--sp-6); align-items: start; }
.announcer > * { min-width: 0; }
.announcer__main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.announcer__slot:empty { display: none; }
.announcer__side { position: sticky; top: var(--sp-6); max-height: calc(100vh - var(--sp-12)); overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--sp-4); }
.announcer-page .content { display: flex; flex-direction: column; gap: var(--sp-5); }

/* Bilgi şeridi (VoxAI bağlı değil / yüklenemedi) */
.announcer-note { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text-2); font-size: var(--text-sm); line-height: var(--leading); }
.announcer-note .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--text-3); }
.announcer-note--error { background: var(--danger-bg); border-color: transparent; color: var(--danger-text); }
.announcer-note--error .icon { color: currentColor; }
.announcer.is-disabled .announcer__main > .text-card, .announcer.is-disabled .announcer__side, .engines.is-disabled { opacity: .55; }

/* Kredi */
.credit-pill { display: inline-flex; align-items: center; gap: var(--sp-1-5); height: var(--control-h); padding: 0 var(--sp-3) 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: var(--text-sm); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.credit-pill .icon { width: var(--size-16); height: var(--size-16); color: var(--primary); }
.credit-pill.is-low { border-color: var(--warning); color: var(--warning-text); }
.credit-pill.is-low .icon { color: var(--warning); }
.credit-note { font-size: var(--text-xs); color: var(--text-3); text-align: right; }
.page-header__actions--col { flex-direction: column; align-items: flex-end; gap: var(--sp-1); }

/* Motor sekmeleri */
.engines { display: flex; gap: var(--sp-2); }
.engine { display: flex; flex-direction: column; gap: var(--sp-0-5); flex: 1; min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-align: left; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.engine:hover { background: var(--surface-hover); }
.engine:disabled { cursor: not-allowed; }
.engine.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.engine__name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-body); font-weight: var(--w-semibold); }
.engine.is-active .engine__name { color: var(--primary-soft-text); }
.engine__sub { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Metin kartı */
.text-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.text-card__bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.text-card__bar .badge { margin-left: auto; height: var(--size-26); padding: 0 var(--sp-2-5); }
.text-card__area { min-height: var(--size-180); font-size: var(--text-body); line-height: var(--leading-loose); }
.text-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.text-card__count { font-size: var(--text-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }
.text-card__count.is-over { color: var(--danger-text); }
.translate-wrap { position: relative; display: inline-flex; }
.translate-menu { top: 100%; left: 0; margin-top: var(--sp-1); }
.btn .spin, .generating .spin { animation: spin 1s linear infinite; }

/* Sonuç kartı */
.result { display: flex; flex-direction: column; gap: var(--sp-3); animation: fade-in var(--dur-slow) var(--ease); }
.result.is-created { border-color: var(--success); }
.result__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.result__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; font-size: var(--text-body); font-weight: var(--w-semibold); }
.result__title .badge { margin-left: var(--sp-1); }
.result__actions { display: flex; gap: var(--sp-0-5); flex: none; }
.result__actions .icon-btn.is-active { color: var(--primary); background: var(--primary-soft); }
.result__text { font-size: var(--text-sm); color: var(--text-3); line-height: var(--leading); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); overflow-wrap: anywhere; }
.result__meta { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--text-xs); color: var(--text-3); flex-wrap: wrap; }
.result__meta .dot, .hist__meta .dot { width: var(--size-3); height: var(--size-3); border-radius: 50%; background: var(--border-strong); }
.generating { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-2); font-size: var(--text-sm); }
.generating .icon { color: var(--primary); flex: none; }
.generating__bar { flex: 1; height: var(--size-4); border-radius: var(--r-2xs); background: var(--vx-neutral-200); overflow: hidden; }
.generating__fill { display: block; height: 100%; width: 60%; background: var(--primary); animation: generating 1.4s var(--ease) infinite; border-radius: var(--r-2xs); }
@keyframes generating { from { transform: translateX(-100%); } to { transform: translateX(170%); } }

/* Mağazada çal */
.send { display: flex; align-items: center; gap: var(--sp-3); }
.send:empty { display: none; }
.send__store { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; height: var(--control-h-lg); padding: 0 var(--sp-3) 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.send__store-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--leading-tight); }
.send__store-label { font-size: var(--text-xs); color: var(--text-3); font-weight: var(--w-medium); }
.send__store-name { font-size: var(--text-sm); font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send__status { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; min-height: var(--control-h-lg); padding: 0 var(--sp-4); border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--w-medium); }
.send__status--sent { background: var(--info-bg); color: var(--info-text); }
.send__status--playing { background: var(--success-bg); color: var(--success-text); }
.send__status--done { background: var(--success-bg); color: var(--success-text); }
.send__status--error { background: var(--danger-bg); color: var(--danger-text); }
.send__status .status-dot { width: var(--size-8); height: var(--size-8); border-radius: 50%; background: currentColor; flex: none; }
.send__status--playing .status-dot { animation: live-pulse 1.6s var(--ease) infinite; }
.send__status .icon { width: var(--size-16); height: var(--size-16); flex: none; }
.send__status-sub { font-weight: var(--w-regular); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Ayar kartı */
.settings { display: flex; flex-direction: column; gap: var(--sp-5); }
.settings__title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-body); font-weight: var(--w-semibold); }
.settings__title .badge { font-weight: var(--w-medium); }
.settings__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.settings__label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); }
.settings__label .text-xs { color: var(--text-3); font-weight: var(--w-regular); }
.settings__hint { font-size: var(--text-xs); color: var(--text-3); line-height: var(--leading); }
.settings__divider { height: 1px; background: var(--border); }
.select { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.select .input { padding-right: var(--sp-9-5); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.select .input--icon { padding-left: var(--sp-9-5); }
.select__icon { position: absolute; left: var(--sp-3); color: var(--text-3); width: var(--icon-sm); height: var(--icon-sm); pointer-events: none; }
.select__chevron { position: absolute; right: var(--sp-3); color: var(--text-3); width: var(--size-16); height: var(--size-16); pointer-events: none; }
.voice-row { display: flex; gap: var(--sp-2); align-items: center; }
.chip--play .icon { color: var(--primary); }
.chip--play.is-playing .icon { color: currentColor; }
.slider--inline .slider__head { font-size: var(--text-sm); }
.settings .switch-row { padding: 0; }

/* Geçmiş */
.history { display: flex; flex-direction: column; gap: var(--sp-3); }
.history__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.history__title { font-size: var(--text-body); font-weight: var(--w-semibold); }
.history .tabs { margin: 0; padding: 0; border-bottom: 0; }
.hist { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: var(--size-64); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border); }
.hist:last-child { border-bottom: 0; }
.hist__play { display: grid; place-items: center; width: var(--size-36); height: var(--size-36); border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.hist__play .icon { width: var(--size-14); height: var(--size-14); fill: currentColor; }
.hist__play.is-playing { background: var(--primary); color: var(--on-accent); }
.hist__play:disabled { opacity: .5; cursor: not-allowed; }
.hist__text { display: flex; flex-direction: column; gap: var(--sp-0-75); min-width: 0; }
.hist__text-line { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist__meta { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--text-3); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.hist__meta .badge { height: var(--size-18); }
.hist__trail { display: flex; align-items: center; gap: var(--sp-2); }
.hist__status { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--text-xs); font-weight: var(--w-medium); white-space: nowrap; }
.hist__status .status-dot { width: var(--size-7); height: var(--size-7); border-radius: 50%; background: currentColor; }
.hist__status--done, .hist__status--playing { color: var(--success-text); }
.hist__status--error { color: var(--danger-text); }
.hist__status--sent { color: var(--info-text); }
.hist__status--playing .status-dot { animation: live-pulse 1.6s var(--ease) infinite; }
.hist-more { align-self: center; }
.badge--engine { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }

/* Mobil / tablet */
.mobile-settings-btn { display: none; }
.send--mobile { display: none; }
@media (max-width: 1023px) {
  .announcer { grid-template-columns: minmax(0, 1fr); }
  .announcer__side { display: none; }
  .mobile-settings-btn { display: inline-flex; }
  .engines { overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); }
  .engines::-webkit-scrollbar { display: none; }
  .engine { flex: none; min-width: var(--size-180); }
}
@media (max-width: 767px) {
  .text-card__area { min-height: var(--size-140); }
  .text-card__bar .badge { display: none; }
  .send--inline { display: none; }
  .send--mobile { display: flex; position: fixed; left: 0; right: 0; bottom: var(--tabbar-h); z-index: var(--z-tabbar); padding: var(--sp-3) var(--sp-4); background: var(--surface); border-top: 1px solid var(--border); }
  .send--mobile:empty { display: none; }
  .app.has-send .main { padding-bottom: calc(var(--tabbar-h) + var(--send-bar-h)); }
  .hist { grid-template-columns: auto minmax(0, 1fr); }
  .hist__trail { grid-column: 2; justify-content: flex-start; }
  .credit-note { display: none; }
}