@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* CEZ IRGAT · Tolga Studio — Siber Karanlık & Neon Cam Tasarım Sistemi */
:root {
  color-scheme: dark;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-synthesis: none;
  color: #f1f5f9;
  background-color: #050713;

  --bg-primary: #050713;
  --bg-sidebar: #06091a;
  --bg-topbar: rgba(7, 11, 26, 0.9);
  --bg-card-top: rgba(13, 19, 44, 0.96);
  --bg-card-bot: rgba(8, 12, 29, 0.94);
  --bg-elevated: #0a1026;
  --bg-input: #060919;

  --border-subtle: #141e42;
  --border-card: #18234e;
  --border-input: #1a2654;

  --neon-cyan: #00f2fe;
  --neon-cyan-soft: rgba(0, 242, 254, 0.14);
  --neon-purple: #5b4cf5;
  --neon-purple-deep: #4b3be3;
  --neon-green: #00f5a0;
  --neon-amber: #f59e0b;
  --neon-red: #ef4444;

  --ink: #f1f5f9;
  --ink-secondary: #cbd5e1;
  --muted: #8493b2;
  --muted-dim: #647494;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #1e2a5c #070b1a;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: #070b1a;
}
*::-webkit-scrollbar-thumb {
  background: #1e2a5c;
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #2f428c;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 14% 14%, rgba(91, 76, 245, 0.11) 0%, transparent 42%),
    radial-gradient(circle at 86% 10%, rgba(0, 242, 254, 0.08) 0%, transparent 38%),
    radial-gradient(circle at 50% 92%, rgba(91, 76, 245, 0.07) 0%, transparent 50%),
    linear-gradient(180deg, #060917 0%, #04060f 100%);
  background-attachment: fixed;
}

/* Siber arka plan ızgarası */
.cyber-grid {
  position: fixed;
  inset: 0;
  background-size: 48px 48px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button, a {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #ffffff;
}

h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h3 {
  font-weight: 700;
}

p {
  line-height: 1.65;
}

img, video {
  max-width: 100%;
}

.icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  vertical-align: middle;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.boot {
  display: grid;
  place-items: center;
  height: 100vh;
  font-family: 'JetBrains Mono', monospace;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* SOL KENAR ÇUBUĞU (CEZ IRGAT SIDEBAR) */
.sidebar {
  width: 248px;
  background: rgba(6, 9, 26, 0.97);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--border-subtle);
  color: var(--ink);
  position: fixed;
  inset: 0 auto 0 0;
  padding: 22px 14px 0;
  display: flex;
  flex-direction: column;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 10px 26px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(24, 35, 78, 0.65);
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(0, 242, 254, 0.4);
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.22);
  background: #080d22;
  display: grid;
  place-items: center;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.05em;
}

.brand-cez {
  font-weight: 800;
  color: #ffffff;
}

.brand-irgat {
  font-weight: 800;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

.brand-copy small {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #6c7ea6;
  margin-top: 4px;
  text-transform: uppercase;
}

.nav-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 12px 12px 8px;
  color: #617399;
  text-transform: uppercase;
}

.work-label {
  margin-top: 14px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  margin-bottom: 5px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: #8494b4;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item .icon {
  width: 17px;
  height: 17px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #f8fafc;
  border-color: rgba(0, 242, 254, 0.18);
}

.nav-item.active {
  background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-purple-deep) 100%);
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(165, 148, 253, 0.35);
  box-shadow: 0 4px 20px rgba(91, 76, 245, 0.45);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neon-cyan);
}

.nav-item.active .nav-icon,
.nav-item.active > .icon {
  color: #ffffff;
}

.nav-number {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: var(--neon-cyan);
}

.nav-item.active .nav-number {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

.sidebar-bottom {
  margin-top: auto;
}

.private-note {
  display: flex;
  gap: 10px;
  padding: 13px 12px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: rgba(9, 15, 38, 0.85);
  border: 1px solid #15204a;
  color: #dbe6fb;
  font-size: 11.5px;
  font-weight: 600;
}

.private-note > .icon {
  width: 16px;
  color: var(--neon-cyan);
  margin-top: 1px;
}

.private-note span {
  display: block;
  color: #7c8db0;
  font-size: 10.5px;
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.45;
}

.status-dot,
.profile-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon-amber);
  box-shadow: 0 0 8px var(--neon-amber);
  margin-left: auto;
}

.status-dot.ready,
.profile-dot {
  background: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 12px;
  padding: 16px 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
  background: #090f26;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile small {
  display: block;
  font-size: 10px;
  color: var(--neon-cyan);
  margin-top: 3px;
  font-weight: 600;
}

/* ÜST TELEMETRİ ÇUBUĞU (TOPBAR) */
.page {
  margin-left: 248px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--bg-topbar);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 34px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.breadcrumb > a {
  color: #8494b4;
  font-weight: 600;
  transition: color 0.15s;
}
.breadcrumb > a:hover {
  color: var(--neon-cyan);
}
.breadcrumb > .icon {
  width: 13px;
  color: #4f6085;
}
.breadcrumb > span {
  font-weight: 700;
  color: #ffffff;
}

/* Cezırgat Segmentli Ajan Gösterge Çubuğu */
.telemetry-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(9, 15, 40, 0.92);
  border: 1px solid #18234e;
  padding: 6px 14px;
  border-radius: 11px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.telemetry-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #e2e8f0;
  text-transform: uppercase;
  white-space: nowrap;
}

.segmented-bar {
  display: flex;
  gap: 3px;
  align-items: center;
}

.segment-pill {
  display: block;
  width: 4px;
  height: 13px;
  border-radius: 1.5px;
  background: #182245;
  transition: all 0.25s ease;
}

.segment-pill.active {
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}

.segment-pill.pulsing {
  animation: pulse-segment 0.9s infinite alternate;
}

@keyframes pulse-segment {
  from { opacity: 0.35; }
  to { opacity: 1; filter: drop-shadow(0 0 6px #00f2fe); }
}

.telemetry-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--neon-green);
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.preview-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 242, 254, 0.32);
  border-radius: 8px;
  padding: 5px 10px;
  background: rgba(0, 242, 254, 0.08);
  display: flex;
  align-items: center;
  gap: 7px;
}

.preview-badge i {
  height: 6px;
  width: 6px;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
  border-radius: 50%;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #090e24;
  border: 1px solid #1a2552;
  color: #94a3b8;
  padding: 6px;
  transition: all 0.18s ease;
}

.icon-button:hover {
  border-color: var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.22);
}

.icon-button .icon {
  width: 17px;
  height: 17px;
}

.mobile-menu {
  display: none;
}

main {
  padding: 32px 34px 26px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

/* ANA SAYFA — KONTROL ODASI */
.welcome {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(20, 30, 66, 0.85);
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #8b9dc3;
  text-transform: uppercase;
}

.welcome h1 {
  font-size: 36px;
  line-height: 1.2;
  margin: 8px 0 6px;
}

.greeting-dot {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0, 242, 254, 0.7);
}

.welcome p,
.cyber-subline {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0, 242, 254, 0.45);
}

.date-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  background: #090e24;
  border: 1px solid #1a2552;
  border-radius: 10px;
  color: #9fb0d1;
  padding: 9px 13px;
  white-space: nowrap;
}

.date-chip .icon {
  width: 14px;
  height: 14px;
  color: var(--neon-cyan);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 14px;
}

.section-heading h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.section-heading h2 > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.3);
  border-radius: 99px;
  padding: 2px 9px;
}

.section-heading > p,
.small-muted {
  font-size: 11.5px;
  color: var(--muted);
}

/* SİBER CAM KART ORTAK MİMARİSİ */
.studio-card,
.panel,
.production-card,
.save-panel,
.studio-note,
.connection-notice,
.rules-card {
  background: linear-gradient(180deg, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  position: relative;
}

.studio-card::after,
.panel::after,
.production-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.42), transparent);
  pointer-events: none;
}

/* 3 UZMAN AJAN STÜDYO KARTI */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.studio-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 13px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-card:hover {
  border-color: rgba(0, 242, 254, 0.45);
  box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 242, 254, 0.16);
  transform: translateY(-4px);
}

.art.cyber-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  overflow: hidden;
  background: #070b1e;
  border: 1px solid #1b2757;
}

.mascot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  display: block;
  transition: transform 0.35s ease;
}

.studio-card:hover .mascot-img {
  transform: scale(1.04);
}

.art-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 19, 0.28) 0%, rgba(5, 7, 19, 0.05) 42%, rgba(5, 7, 19, 0.92) 100%);
  pointer-events: none;
}

.art-role-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(6, 9, 25, 0.85);
  backdrop-filter: blur(6px);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 242, 254, 0.35);
  padding: 4px 8px;
  border-radius: 6px;
}

.art-tag {
  position: absolute;
  right: 10px;
  top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  background: rgba(91, 76, 245, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(165, 148, 253, 0.45);
  padding: 4px 8px;
  border-radius: 6px;
  color: #ffffff;
}

.art-telemetry {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.agent-status-badge {
  align-self: flex-start;
  background: rgba(6, 10, 28, 0.88);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: var(--neon-cyan);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3.5px 9px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agent-status-badge.is-ready {
  border-color: rgba(0, 245, 160, 0.4);
  color: var(--neon-green);
}

.agent-status-badge.is-busy {
  border-color: rgba(0, 242, 254, 0.65);
  color: #ffffff;
  background: rgba(91, 76, 245, 0.78);
}

.agent-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: ping-dot 1.6s ease-in-out infinite;
}

@keyframes ping-dot {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50% { transform: scale(1.28); opacity: 1; }
}

.agent-progress-track {
  height: 5px;
  background: rgba(17, 26, 59, 0.9);
  border-radius: 999px;
  overflow: hidden;
}

.agent-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00d2ff, #00f5a0);
  box-shadow: 0 0 10px rgba(0, 245, 160, 0.55);
  transition: width 0.35s ease;
}

.card-content {
  padding: 15px 6px 2px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-eyebrow {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: #7c8eb2;
}

.card-eyebrow > span:last-child {
  color: var(--neon-cyan);
}

.card-content h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 8px 0 8px;
  transition: color 0.2s;
}

.studio-card:hover .card-content h3 {
  color: var(--neon-cyan);
}

.card-content > p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 16px;
}

.chips span {
  font-size: 10.5px;
  font-weight: 600;
  background: #090e25;
  color: #9cb0d6;
  border: 1px solid #182554;
  border-radius: 999px;
  padding: 4px 10px;
}

.card-link {
  border-top: 1px solid #152048;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  padding: 12px 0 4px;
  margin-top: auto;
}

.card-link > span {
  height: 28px;
  width: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(91, 76, 245, 0.2);
  border: 1px solid rgba(91, 76, 245, 0.45);
  color: var(--neon-cyan);
  transition: all 0.2s;
}

.studio-card:hover .card-link > span {
  background: var(--neon-purple);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(91, 76, 245, 0.6);
}

.card-link .icon {
  width: 14px;
  height: 14px;
}

/* ANA SAYFA ALT BÖLÜM */
.home-bottom {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.home-empty {
  min-height: 165px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(9, 14, 34, 0.75);
  border: 1px dashed #1e2d63;
  border-radius: 14px;
  padding: 24px;
}

.empty-icon {
  height: 48px;
  width: 48px;
  border-radius: 12px;
  border: 1px solid rgba(0, 242, 254, 0.3);
  display: grid;
  place-items: center;
  color: var(--neon-cyan);
  background: rgba(0, 242, 254, 0.08);
  flex-shrink: 0;
}

.home-empty h3 {
  font-size: 14px;
  margin-bottom: 6px;
}

.home-empty p {
  font-size: 12px;
  color: var(--muted);
}

.empty-doodle {
  margin-left: auto;
  font-size: 28px;
  color: var(--neon-cyan);
  opacity: 0.6;
  align-self: flex-start;
}

.studio-note {
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16, 23, 56, 0.96) 0%, rgba(9, 13, 32, 0.95) 100%);
}

.studio-note h3 {
  font-size: 20px;
  line-height: 1.4;
  margin: 12px 0 10px;
}

.studio-note p {
  font-size: 12px;
  color: var(--muted);
  max-width: 300px;
}

.studio-note a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 18px;
  color: var(--neon-cyan);
}
.studio-note a:hover {
  text-decoration: underline;
}

.note-star {
  position: absolute;
  right: 18px;
  top: 24px;
  font-size: 56px;
  color: rgba(0, 242, 254, 0.12);
  pointer-events: none;
}

.intro-note {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #7c8db0;
  font-size: 11.5px;
  margin-top: 24px;
}
.intro-note > .icon {
  width: 15px;
  height: 15px;
  color: var(--neon-cyan);
}

footer {
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 34px 22px;
  border-top: 1px solid var(--border-subtle);
  color: #6d7ea3;
  font-size: 11px;
}

footer > span:first-child {
  font-weight: 700;
  color: #9cb0d6;
}

footer i {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  margin-left: 8px;
  color: #5c6e94;
}

footer .icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  color: var(--neon-cyan);
}

/* ÇALIŞMA ALANLARI (COVER / VIDEO / PROSHOT) */
.workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 24px;
}

.workspace-heading h1 {
  font-size: 30px;
  margin: 10px 0 8px;
  line-height: 1.2;
}

.workspace-heading p {
  font-size: 13px;
  color: var(--muted);
}

.dot-separator {
  padding: 0 8px;
  color: var(--neon-cyan);
}

.workspace-emblem {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.15);
}

.workspace-emblem .icon {
  width: 26px;
  height: 26px;
}

.workspace-emblem.video {
  background: rgba(91, 76, 245, 0.16);
  border-color: rgba(91, 76, 245, 0.48);
  color: #a594fd;
}

.workspace-emblem.proshot {
  background: rgba(0, 245, 160, 0.12);
  border-color: rgba(0, 245, 160, 0.38);
  color: var(--neon-green);
}

/* SEKMELER */
.tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tabs button {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 15px;
  border-radius: 10px;
  background: #090e24;
  border: 1px solid #1a2552;
  font-size: 12px;
  font-weight: 700;
  color: #8da2c9;
  transition: all 0.2s ease;
}

.tabs button .icon {
  width: 15px;
  height: 15px;
}

.tabs button:hover {
  border-color: rgba(0, 242, 254, 0.5);
  color: #ffffff;
}

.tabs button.selected {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.18) 0%, rgba(91, 76, 245, 0.24) 100%);
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.22);
}

.tabs button > span {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(0, 242, 254, 0.14);
  color: var(--neon-cyan);
  border: 1px solid rgba(0, 242, 254, 0.28);
  border-radius: 99px;
  font-size: 10px;
  padding: 1px 7px;
}

/* EDİTÖR IZGARASI & PANELLER */
.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.editor-main {
  min-width: 0;
}

.panel {
  padding: 22px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #141e42;
}

.panel-title h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.step {
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  border-radius: 7px;
  width: 24px;
  height: 24px;
  color: var(--neon-cyan);
  font-size: 11px;
  font-weight: 700;
}

.dropzone {
  min-height: 210px;
  border: 1.5px dashed #22336e;
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.06), rgba(6, 9, 25, 0.85) 70%);
  transition: all 0.22s ease;
  text-align: center;
  padding: 26px 18px;
}

.dropzone:hover,
.dropzone.dragging {
  background: radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.14), rgba(9, 15, 38, 0.95) 75%);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.14) inset;
}

.dropzone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.dropzone:focus-within {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

.upload-symbol {
  height: 46px;
  width: 46px;
  display: grid;
  place-items: center;
  color: var(--neon-cyan);
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.32);
  border-radius: 12px;
  margin-bottom: 13px;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.18);
}

.dropzone h3 {
  font-size: 14px;
}

.dropzone p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.dropzone strong {
  font-weight: 700;
  color: var(--neon-cyan);
}

.dropzone small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #6f82a8;
  line-height: 1.7;
  margin-top: 16px;
}

.local-note {
  font-size: 11px;
  color: #7587ad;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.local-note .icon {
  width: 13px;
  height: 13px;
  color: var(--neon-cyan);
}

.settings-panel {
  margin-top: 18px;
}

.text-button {
  font-size: 11px;
  font-weight: 600;
  color: var(--neon-cyan);
  padding: 4px 0;
}
.text-button:hover {
  text-decoration: underline;
}

/* FORM ALANLARI VE SİBER GİRDİLER */
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  margin-bottom: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field > span {
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
}

.field > span > small {
  font-size: 10px;
  color: #7385ab;
  font-weight: 500;
  margin-left: 6px;
}

select,
input:not([type=checkbox]):not([type=file]),
textarea {
  border: 1px solid var(--border-input);
  border-radius: 10px;
  color: #f1f5f9;
  background: var(--bg-input);
  padding: 10px 13px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  transition: border-color 0.18s, box-shadow 0.18s;
}

select:focus,
input:not([type=checkbox]):not([type=file]):focus,
textarea:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.2);
}

select {
  width: 100%;
  height: 40px;
}

select option {
  background: #090e24;
  color: #f1f5f9;
}

textarea {
  resize: vertical;
  min-height: 84px;
}

input::placeholder,
textarea::placeholder {
  color: #5c6e94;
}

/* NEON ANAHTARLAR (TOGGLES) */
.toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-top: 1px solid #141e42;
  gap: 12px;
  cursor: pointer;
}

.toggle-row > span:first-child {
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
}

.toggle-row small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
}

.toggle-row input {
  position: absolute;
  right: 0;
  width: 38px;
  height: 22px;
  opacity: 0;
}

.switch {
  width: 38px;
  height: 20px;
  border-radius: 20px;
  background: #141f46;
  border: 1px solid #243570;
  position: relative;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.switch:after {
  content: '';
  height: 14px;
  width: 14px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #94a3b8;
  transition: left 0.18s ease, background 0.18s ease;
}

.toggle-row input:checked + .switch {
  background: linear-gradient(135deg, #00d2ff 0%, var(--neon-purple) 100%);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
}

.toggle-row input:checked + .switch:after {
  left: 20px;
  background: #ffffff;
}

.field-note {
  color: #8fa2c7;
  background: rgba(6, 10, 26, 0.85);
  border: 1px solid #16224d;
  padding: 10px 12px;
  font-size: 11px;
  margin-top: 12px;
  border-radius: 9px;
  line-height: 1.55;
}

.save-panel {
  margin-top: 18px;
  padding: 20px 22px;
}

.save-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

/* BUTONLAR (CEZ IRGAT NEON MOR & SİBER İKİNCİL) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  border: 1px solid transparent;
  min-height: 40px;
  line-height: 1.4;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.button .icon {
  width: 15px;
  height: 15px;
}

.button.primary {
  background: linear-gradient(135deg, #5c4cf6 0%, #4e3be6 100%);
  color: #ffffff;
  border-color: rgba(165, 148, 253, 0.35);
  box-shadow: 0 4px 16px rgba(92, 76, 246, 0.45);
}

.button.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6d5efa 0%, #5946ef 100%);
  box-shadow: 0 6px 22px rgba(92, 76, 246, 0.68), 0 0 10px rgba(0, 242, 254, 0.35);
  transform: translateY(-1px);
}

.button.secondary {
  background: #0d1636;
  border-color: #1c295c;
  color: #dbe6fb;
}

.button.secondary:hover:not(:disabled) {
  border-color: var(--neon-cyan);
  color: #ffffff;
  background: #111d46;
}

.button.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.button.disabled-action {
  background: #0f1734;
  color: #5d6f94;
  width: 100%;
}

/* SAĞ SÜTUN — AJAN NOTLARI, KURALLAR VE ÜRETİM PANELİ */
.editor-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.assistant-panel {
  padding: 19px;
}

.assistant-title {
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #141e42;
  padding-bottom: 14px;
}

.agent-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  color: var(--neon-cyan);
}

.agent-icon.video {
  background: rgba(91, 76, 245, 0.18);
  border-color: rgba(91, 76, 245, 0.45);
  color: #a594fd;
}

.agent-icon.proshot {
  background: rgba(0, 245, 160, 0.12);
  border-color: rgba(0, 245, 160, 0.35);
  color: var(--neon-green);
}

.assistant-title h2 {
  font-size: 13.5px;
}

.assistant-title > div > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--neon-green);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.assistant-title i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}

.assistant-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #060a1c;
  border: 1px solid #14204a;
  border-radius: 9px;
  padding: 11px;
  margin-top: 14px;
  color: var(--muted);
}

.assistant-info .icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--neon-cyan);
}

.assistant-info p {
  font-size: 11px;
  line-height: 1.65;
}

.notes-list {
  max-height: 290px;
  overflow: auto;
}

.notes-empty {
  padding: 22px 4px 20px;
}

.notes-empty > span {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}

.notes-empty p {
  font-size: 11px;
  color: #6e81a8;
  margin-top: 6px;
  font-style: italic;
}

.user-note {
  background: rgba(91, 76, 245, 0.12);
  border: 1px solid rgba(91, 76, 245, 0.32);
  border-radius: 10px;
  margin: 12px 0;
  padding: 10px 12px;
}

.user-note > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  color: var(--neon-cyan);
  font-size: 10px;
  font-weight: 700;
}

.user-note .icon-button {
  height: 24px;
  width: 24px;
}

.user-note .icon {
  width: 12px;
}

.user-note p {
  font-size: 12px;
  color: #e2e8f0;
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.assistant-panel form {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.assistant-panel textarea {
  width: 100%;
  font-size: 12px;
  min-height: 82px;
}

.assistant-panel .button {
  align-self: flex-end;
  font-size: 11.5px;
  min-height: 34px;
  padding: 7px 13px;
}

.rules-card {
  padding: 18px;
}

.rules-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #e2e8f0;
}

.rules-card h3 > .icon {
  width: 15px;
  height: 15px;
  color: var(--neon-green);
}

.rules-card ul {
  padding-left: 17px;
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.95;
}

.production-card {
  padding: 19px;
}

.production-card > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--neon-cyan);
}

.production-card > div > .icon {
  width: 15px;
  height: 15px;
}

.production-card p {
  font-size: 11.5px;
  color: var(--muted);
  margin: 10px 0 15px;
}

.production-card button {
  width: 100%;
}

.production-card a {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--neon-cyan);
}
.production-card a:hover {
  text-decoration: underline;
}
.production-card a > .icon {
  height: 13px;
  width: 13px;
}

/* YÜKLENEN DOSYA SATIRLARI VE KARE SEÇİMİ */
.file-list {
  margin-top: 16px;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 8px;
  border-bottom: 1px solid #141e42;
  border-radius: 9px;
  transition: background 0.15s;
}
.file-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.file-thumb {
  height: 44px;
  width: 44px;
  border-radius: 8px;
  background: #080d22;
  border: 1px solid #1d2b5e;
  overflow: hidden;
  padding: 0;
  flex-shrink: 0;
  color: var(--neon-cyan);
  display: grid;
  place-items: center;
}

.file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-name {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  min-width: 0;
  flex: 1;
  padding: 0;
}

.file-name strong {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-name small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
}

.frame-pick-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--neon-cyan);
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.38);
  border-radius: 8px;
  padding: 6px 11px;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.frame-pick-btn:hover {
  background: rgba(0, 242, 254, 0.22);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.25);
}

.remove:hover {
  color: #ffffff;
  border-color: var(--neon-red);
  background: rgba(239, 68, 68, 0.22);
}

/* TASLAKLAR & SONUÇLAR LİSTESİ */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 10px 0 20px;
}

.list-header h2 {
  font-size: 17px;
}

.list-header p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

.draft-table {
  padding: 8px 20px;
}

.draft-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #141e42;
}
.draft-row:last-child {
  border-bottom: 0;
}

.draft-module {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: var(--neon-cyan);
  flex-shrink: 0;
}

.draft-module.video {
  background: rgba(91, 76, 245, 0.16);
  border-color: rgba(91, 76, 245, 0.42);
  color: #a594fd;
}

.draft-module.proshot {
  background: rgba(0, 245, 160, 0.12);
  border-color: rgba(0, 245, 160, 0.35);
  color: var(--neon-green);
}

.draft-info {
  text-align: left;
  min-width: 0;
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.draft-info strong {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.draft-info span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--muted);
}

.draft-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: var(--neon-cyan);
  white-space: nowrap;
}

.badge-ready {
  background: rgba(0, 245, 160, 0.12);
  border-color: rgba(0, 245, 160, 0.38);
  color: var(--neon-green);
}

.badge-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.42);
  color: #fca5a5;
}

.recent-list {
  background: linear-gradient(180deg, var(--bg-card-top) 0%, var(--bg-card-bot) 100%);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 6px 18px;
}

.large-empty {
  padding: 64px 20px 76px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border: 1px dashed #1e2d63;
  border-radius: 14px;
  background: rgba(9, 14, 34, 0.72);
}

.large-empty > .icon {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  color: var(--neon-cyan);
}

.large-empty h3 {
  font-size: 20px;
  margin: 8px 0 8px;
}

.large-empty p {
  font-size: 12.5px;
  color: var(--muted);
}

.large-empty .button {
  margin-top: 22px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
}

.result-card img {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 11px;
  background: #050816;
  border: 1px solid #17234e;
}

.result-card h3 {
  margin-top: 16px;
  font-size: 15px;
}

.result-card p {
  margin: 10px 0 14px;
  font-size: 11.5px;
  color: var(--muted);
}

/* VİDEO İŞLEME KUYRUĞU (CEZ IRGAT CANLI AJAN BARI) */
.video-queue-panel {
  margin-top: 16px;
  padding: 18px;
}

.video-queue-panel .panel-title {
  margin-bottom: 12px;
}

.video-queue-panel .panel-title h2 {
  font-size: 13px;
}

.video-job-item {
  border-top: 1px solid #141e42;
  padding: 12px 0 6px;
}
.video-job-item:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.video-job-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.video-job-head strong {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-job-meta {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

.video-progress-track {
  height: 7px;
  background: #10193a;
  border-radius: 99px;
  overflow: hidden;
  margin: 10px 0 8px;
}

.video-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #00d2ff, #00f5a0);
  box-shadow: 0 0 10px rgba(0, 245, 160, 0.55);
  border-radius: 99px;
  transition: width 0.35s ease;
}

.video-job-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #9cb0d6;
  margin-top: 6px;
}

.video-job-error {
  font-size: 11px;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.38);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0 4px;
  line-height: 1.5;
}

.danger-link {
  color: #f87171;
  font-weight: 700;
}

.video-result-card video {
  width: 100%;
  max-height: 520px;
  border-radius: 11px;
  background: #040712;
  border: 1px solid #17234e;
  display: block;
}

.video-result-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.video-result-actions .button.primary {
  flex: 1;
}

/* BAĞLANTILAR SEKMESİ */
.outline-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(0, 242, 254, 0.35);
  border-radius: 6px;
  padding: 4px 9px;
  color: var(--neon-cyan);
}

.connection-notice {
  padding: 20px 22px;
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
  border-color: rgba(0, 242, 254, 0.32);
}

.connection-notice > .icon {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  color: var(--neon-cyan);
}

.connection-notice strong {
  font-size: 13.5px;
  color: #ffffff;
}

.connection-notice p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
  max-width: 760px;
}

.connection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.connection-card {
  position: relative;
  padding: 24px;
}

.connection-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.32);
  color: var(--neon-cyan);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.connection-card > .draft-badge {
  position: absolute;
  right: 22px;
  top: 24px;
}

.connection-card h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.connection-card > p {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 360px;
  min-height: 58px;
}

.connection-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 14px 0 20px;
}

.connection-tags > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #9cb0d6;
  background: #080d22;
  border: 1px solid #182554;
  padding: 5px 10px;
  border-radius: 99px;
}

.connection-card .text-button {
  margin-left: 14px;
}

.storage-panel {
  margin-top: 20px;
}

.storage-panel > p {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 780px;
}

.storage-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #141e42;
  margin-top: 18px;
  padding-top: 15px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9cb0d6;
}

.storage-state {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--neon-green);
}

/* SİBER TOAST BİLDİRİMİ */
.toast {
  position: fixed;
  bottom: 24px;
  left: calc(50% + 124px);
  transform: translate(-50%, 20px);
  background: rgba(9, 15, 38, 0.96);
  backdrop-filter: blur(10px);
  color: #f8fafc;
  border: 1px solid rgba(0, 242, 254, 0.48);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 242, 254, 0.22);
  padding: 13px 20px;
  border-radius: 11px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  font-size: 12.5px;
  font-weight: 600;
  max-width: calc(100vw - 36px);
  width: max-content;
  line-height: 1.55;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* CEZ IRGAT SİBER TERMİNAL PENCERESİ (DIALOG / MODAL) */
dialog {
  width: min(580px, calc(100% - 28px));
  max-height: 90vh;
  border: 1px solid #1f2e66;
  border-radius: 16px;
  background: #090e21;
  color: var(--ink);
  padding: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 32px rgba(0, 242, 254, 0.16);
}

dialog::backdrop {
  background: rgba(3, 6, 18, 0.82);
  backdrop-filter: blur(6px);
}

.terminal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #060a19;
  border-bottom: 1px solid #182452;
}

.terminal-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.terminal-dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-amber { background: #f59e0b; }
.dot-green { background: #00f5a0; }

.terminal-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8da2c9;
}

.dialog-close {
  position: static;
  width: 30px;
  height: 30px;
}

.dialog-body {
  padding: 28px 28px 26px;
}

.dialog-body h2 {
  font-size: 21px;
  line-height: 1.35;
  margin: 14px 0 10px;
}

.dialog-body p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

.dialog-body > .button {
  margin-top: 22px;
}

.dialog-symbol {
  height: 42px;
  width: 42px;
  display: grid;
  place-items: center;
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.35);
  border-radius: 11px;
  color: var(--neon-cyan);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.media-preview {
  padding: 22px 24px 20px;
}

.media-preview h2 {
  font-size: 15px;
  overflow-wrap: anywhere;
  margin-bottom: 5px;
}

.media-preview > span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--neon-cyan);
}

.media-preview img,
.media-preview video {
  display: block;
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  margin-top: 16px;
  background: #040713;
  border: 1px solid #182452;
  border-radius: 10px;
}

.media-preview > p {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 12px;
  text-align: center;
}

.frame-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* DUYARLI (RESPONSIVE) EKRAN UYUMLARI */
@media (max-width: 1200px) {
  .sidebar { width: 222px; }
  .page { margin-left: 222px; }
  .topbar { padding: 8px 24px; }
  main { padding: 26px 24px 22px; }
  .editor-grid { grid-template-columns: minmax(0, 1fr) 290px; }
  .toast { left: calc(50% + 111px); }
}

@media (max-width: 990px) {
  .telemetry-label { display: none; }
  .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-bottom { grid-template-columns: 1fr; }
  .editor-grid { grid-template-columns: 1fr; }
  .connection-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
    width: 256px;
    top: 60px;
    box-shadow: 16px 0 40px rgba(0, 0, 0, 0.75);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    visibility: visible;
  }
  .page { margin-left: 0; }
  .topbar { min-height: 60px; padding: 8px 16px; gap: 10px; }
  .mobile-menu { display: inline-flex; }
  .breadcrumb { margin-right: auto; }
  .telemetry-bar { padding: 5px 10px; gap: 8px; }
  .segmented-bar { display: none; }
  .preview-badge { display: none; }
  main { padding: 22px 16px 20px; }
  .welcome { flex-direction: column; align-items: flex-start; gap: 12px; }
  .welcome h1 { font-size: 28px; }
  .studio-grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .save-actions { flex-direction: column; align-items: stretch; }
  footer { padding: 16px; flex-direction: column; gap: 8px; text-align: center; }
  .toast { left: 50%; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Ekip yönetimi ve geniş ekran hizalaması */
main { max-width: none; margin: 0; }
.team-panel { max-width: 960px; }
.team-row { display:flex; align-items:center; gap:18px; padding:24px 0; border-top:1px solid var(--border-subtle); }
.team-copy { flex:1; min-width:0; }
.team-copy h3 { font-size:16px; margin:0 0 6px; }
.team-copy p { color:var(--muted); line-height:1.6; margin:0 0 8px; }
.team-status { font-size:12px; color:var(--neon-cyan); }
.team-toggle { flex:0 0 auto; margin:0; padding:10px; border:0; cursor:pointer; }
.team-toggle input:focus-visible + .switch { outline:2px solid var(--neon-cyan); outline-offset:4px; }
.team-toggle input:disabled + .switch { opacity:.5; }
@media(max-width:720px){.team-row{gap:12px}.team-copy h3{font-size:14px}.team-copy p{font-size:12px}.team-toggle{padding:6px}}

/* Kök kapsayıcı kaydırmalarına karşı sayfa hizasını koru. */
html:root { margin: 0 !important; width: 100% !important; }
html:root body #app { left: 0 !important; right: auto !important; width: 100% !important; }

/* Fabrika ekip kartları */
.team-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.team-filter{padding:10px 16px;border:1px solid #202b56;background:#080e22;border-radius:8px;color:var(--muted);font-weight:700;cursor:pointer}
.team-filter.active{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 16px #00f2fe20}
.agent-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.agent-team-card{display:flex;flex-direction:column;min-width:0;border:1px solid #20294d;border-radius:15px;padding:20px;background:linear-gradient(145deg,#0d132c,#070b1b)}
.agent-team-card.is-enabled{border-color:#174354}
.agent-card-header{display:flex;gap:12px;align-items:center;padding-bottom:17px;border-bottom:1px solid var(--border-subtle)}
.agent-card-header>div{flex:1;min-width:0}.agent-card-header h2{font-size:15px;margin:0 0 8px;overflow-wrap:anywhere}
.agent-card-dot{height:10px;width:10px;flex-shrink:0;border-radius:50%;background:#64748b}.is-enabled .agent-card-dot{background:var(--neon-green);box-shadow:0 0 12px var(--neon-green)}
.agent-card-id{font:11px 'JetBrains Mono',monospace;color:var(--neon-cyan)}
.agent-enable{display:flex;align-items:center;gap:7px;font:11px 'JetBrains Mono',monospace;color:#cbd5e1;white-space:nowrap;cursor:pointer}.agent-enable input{accent-color:var(--neon-cyan);width:14px;height:14px;cursor:pointer}
.agent-team-card>p{font-size:13px;line-height:1.8;color:#cbd5e1;margin:18px 0;flex:1;min-height:70px}
.agent-card-actions{display:flex;gap:8px;border-top:1px solid var(--border-subtle);padding-top:12px}
.agent-card-actions button{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;padding:10px;font-size:12px;font-weight:700;cursor:pointer}.agent-card-actions .icon{width:15px;height:15px}
.agent-open{flex:1;background:#201b4c;border:1px solid #433898;color:#b3a5ff}.agent-open:disabled{opacity:.4;cursor:not-allowed}.agent-settings{background:#080f23;border:1px solid #1e294c;color:#94a3b8}
#name-error{color:#ff8796;margin-top:12px}.brand-copy small{text-transform:none}
@media(max-width:1200px){.agent-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.agent-team-grid{grid-template-columns:1fr}.agent-team-card{padding:16px}.agent-card-actions{flex-wrap:wrap}}

/* Fabrika üst şeridi: tüm genişlik, mevcut menü ve durum öğeleri korunur. */
.factory-header{height:64px;min-height:64px;padding:8px 16px;justify-content:flex-start;gap:18px;z-index:40}
.factory-header .factory-menu{display:inline-flex;width:36px;height:36px;border:1px solid #202b56;border-radius:9px;flex-shrink:0}
.factory-header .brand{margin:0;padding:0;border:0;gap:10px;flex-shrink:0}
.factory-header .brand-logo{width:36px;height:36px;flex-shrink:0;border-radius:10px}
.factory-header .brand-logo img{width:100%;height:100%;object-fit:cover}
.factory-header .brand-row{font-size:18px;line-height:1.1}
.factory-header .brand-copy small{font-size:9px;margin-top:5px;letter-spacing:.1em}
.factory-header .breadcrumb{margin-left:18px;min-width:0}
.factory-header .topbar-right{margin-left:auto}
.sidebar{top:64px;padding-top:20px}
.page{min-height:calc(100vh - 64px)}
.results-group{margin-bottom:32px}.team-filters button span{margin-left:6px;font-size:11px;opacity:.8}
.welcome .cyber-subline{text-transform:uppercase}
@media(min-width:721px){.sidebar.desktop-collapsed{transform:translateX(-100%);visibility:hidden}.page.sidebar-collapsed{margin-left:0}}
@media(max-width:720px){.factory-header{height:auto;min-height:64px;flex-wrap:wrap;gap:8px 12px}.factory-header .brand-row{font-size:16px}.factory-header .brand-copy small{font-size:8px}.factory-header .brand-logo{display:none}.factory-header .breadcrumb{order:4;width:100%;margin:0;font-size:11px}.factory-header .preview-badge{display:inline-flex;font-size:10px;padding:4px 6px}.factory-header .topbar-right{gap:8px}.sidebar{top:92px}.factory-header .icon-button{width:32px;height:32px}.team-filters{gap:8px}.team-filter{max-width:100%;overflow-wrap:anywhere}}

/* Doğrulanan API durumu; bakiye tutarı uydurulmaz. */
.connection-indicators{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.connection-indicators .api-indicator{cursor:pointer;display:inline-flex;font-family:inherit;white-space:nowrap}
.api-indicator.ready i{background:#00f5a0;box-shadow:0 0 9px #00f5a0}
.api-indicator.error{color:#ff8796;border-color:#80364b;background:#271221}.api-indicator.error i{background:#ff526e;box-shadow:0 0 9px #ff526e}
.api-indicator.checking,.api-indicator.warning{color:#ffd075;border-color:#705728;background:#221b10}.api-indicator.checking i,.api-indicator.warning i{background:#ffc45b;box-shadow:0 0 8px #ffc45b}
.api-indicator.missing{color:#94a3b8;border-color:#354155}.api-indicator.missing i{background:#94a3b8;box-shadow:none}
.balance-indicator{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#a3acc5;padding:7px 9px;border:1px solid #202b56;border-radius:9px}.balance-indicator .icon{width:13px;height:13px}.balance-indicator:hover{color:var(--neon-cyan);border-color:var(--neon-cyan)}
@media(max-width:720px){.connection-indicators{gap:4px}.balance-indicator{font-size:9px;padding:5px}.connection-indicators .api-indicator{font-size:9px}.factory-header .topbar-right{min-width:0;flex:1}.factory-header .connection-indicators{justify-content:flex-end}}

/* Sade bakiye etiketi; API göstergesiyle aynı metin rengi. */
.connection-indicators .balance-indicator{color:var(--neon-cyan)}
.connection-indicators:has(.api-indicator.error) .balance-indicator{color:#ff8796}
.connection-indicators:has(.api-indicator.checking) .balance-indicator,.connection-indicators:has(.api-indicator.warning) .balance-indicator{color:#ffd075}
.connection-indicators:has(.api-indicator.missing) .balance-indicator{color:#94a3b8}
/* Hamburger olmadan küçük ekranlarda da tüm sayfalara erişim. */
@media(max-width:720px){.sidebar{position:relative;inset:auto;width:100%;height:auto;min-height:0;padding:8px 12px;transform:none;visibility:visible;box-shadow:none;border-right:0;border-bottom:1px solid var(--border-subtle);z-index:20}.sidebar .nav-label{display:none}.sidebar nav{display:flex;gap:8px;overflow-x:auto}.sidebar .nav-item{width:auto;flex-shrink:0;white-space:nowrap;margin:0;min-height:38px;padding:8px 10px;font-size:11px}.sidebar .nav-item .icon{width:16px;height:16px}.factory-header .breadcrumb{margin-left:0}.page{min-height:calc(100vh - 140px)}}

.storage-actions,.results-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.results-toolbar{margin-top:0}.device-dialog>p{line-height:1.8;color:var(--muted)}.device-code{font:700 22px 'JetBrains Mono',monospace;letter-spacing:.07em;color:var(--neon-cyan);padding:18px 0;overflow-wrap:anywhere}.device-dialog form{display:grid;gap:16px;margin-top:16px}#device-message{margin-top:18px;line-height:1.7;color:var(--neon-cyan)}
@media(max-width:720px){.results-toolbar{gap:8px}.results-toolbar .button{padding:9px;font-size:11px}.device-code{font-size:16px}}

/* Üst durum kutuları aynı yazı ve kutu ölçülerini kullanır. */
.connection-indicators .api-indicator{display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;min-height:30px;padding:7px 10px;margin:0;border:1px solid #075869;border-radius:9px;background:#071d27;color:var(--neon-cyan);font:700 11px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:0;text-decoration:none;white-space:nowrap}
.connection-indicators .api-indicator.error{color:#ff8796;border-color:#80364b;background:#271221}.connection-indicators .api-indicator.warning,.connection-indicators .api-indicator.checking{color:#ffd075;border-color:#705728;background:#221b10}.connection-indicators .api-indicator.missing{color:#94a3b8;border-color:#354155;background:#0c1424}
.editor-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:20px}.editor-main{display:contents}.editor-aside{min-width:0}.editor-grid .fields{grid-template-columns:1fr}.editor-grid .panel{min-width:0}.editor-grid .dropzone{padding:30px 16px}.editor-grid .dropzone h3{font-size:17px}.editor-grid .panel-title{gap:8px}.editor-grid .panel-title h2{font-size:14px}.editor-grid .file-name{min-width:0}
.result-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.result-card{min-width:0;padding:14px}.result-card>img,.result-card>video{width:100%;aspect-ratio:3/4;object-fit:contain;max-height:320px;background:#040713}.result-card h3{font-size:12px;overflow-wrap:anywhere}.result-card>p{font-size:11px}.result-card .video-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.result-card .button{padding:8px;font-size:11px;min-width:0}.result-card .compare-action{grid-column:1/-1}
dialog.compare-modal{width:min(1100px,96vw);max-width:96vw}.compare-dialog{padding:18px}.compare-dialog h2{margin-bottom:16px}.compare-dialog>.field{max-width:440px;margin:0 auto 16px}.compare-stage{position:relative;width:min(100%,calc(62vh * var(--compare-aspect)));aspect-ratio:var(--compare-aspect);max-height:62vh;margin:0 auto;overflow:hidden;background:#020510;touch-action:pan-y}.compare-stage img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0);background:#020510}.compare-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 9px #00f2fe;pointer-events:none;transform:translateX(-1px)}.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:36px;height:36px;border:2px solid white;border-radius:50%;background:#102138;color:white;font-size:20px}.compare-label{position:absolute;top:10px;background:#030712cc;color:white;padding:5px 8px;border-radius:6px;font-size:11px;pointer-events:none}.before-label{left:10px}.after-label{right:10px}.compare-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:2;touch-action:none}.compare-stage:focus-within{outline:2px solid var(--neon-cyan);outline-offset:3px}#attach-original-form{display:grid;gap:16px;margin-top:18px}#original-message{color:#ff8796;line-height:1.7}
@media(max-width:1199px){.editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-aside{grid-column:1/-1}.result-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.editor-grid{grid-template-columns:1fr}.editor-aside{grid-column:auto}}
@media(max-width:520px){.result-grid{grid-template-columns:1fr}.connection-indicators .api-indicator{font-size:10px;padding:6px 8px}.compare-dialog{padding:12px}}

.editor-grid .settings-panel{margin-top:0}


/* Image previews remain lightweight; selecting is separate from comparison. */
.result-card.is-selected{border-color:var(--cyan,#00e9ef);box-shadow:0 0 0 1px #00e9ef55,0 0 24px #00e9ef10}
.result-select{display:flex;align-items:center;gap:8px;width:fit-content;min-height:32px;margin-bottom:8px;color:var(--muted);font-size:11px;cursor:pointer}
.result-select input{width:17px;height:17px;accent-color:#00e9ef;cursor:pointer}
.result-preview{display:block;width:100%;border:0;padding:0;background:transparent;border-radius:11px;cursor:ew-resize;overflow:hidden}
.result-preview:focus-visible{outline:2px solid #00e9ef;outline-offset:4px}
.result-preview img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;max-height:320px;transition:filter .18s}
.result-preview:hover img{filter:brightness(1.07)}
.result-preview:disabled{cursor:default}
.selection-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 20px;padding:12px 16px;border:1px solid var(--border-subtle);border-radius:12px;background:#0b1022}
.selection-toolbar .button{padding:9px 13px;font-size:12px}
.selection-count{font-size:12px;color:var(--muted)}
#main{view-transition-name:workspace}
::view-transition-old(workspace){animation:workspace-exit .22s ease both}
::view-transition-new(workspace){animation:workspace-enter .46s cubic-bezier(.2,.8,.2,1) both}
@keyframes workspace-exit{to{opacity:0;transform:translateY(-12px);filter:blur(3px)}}
@keyframes workspace-enter{from{opacity:0;transform:translateY(24px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(workspace),::view-transition-new(workspace){animation:none}.result-preview img{transition:none}}

.result-media{position:relative;isolation:isolate}
.result-media .result-select{position:absolute;top:8px;left:8px;z-index:2;display:flex;align-items:center;justify-content:center;min-height:26px;width:26px;margin:0;padding:3px;border:1px solid #ffffff35;border-radius:6px;background:#080d20bf;backdrop-filter:blur(8px);box-shadow:0 2px 8px #0005;cursor:pointer}
.result-media .result-select span{display:none}
.result-media .result-select input{width:18px;height:18px;margin:0;flex-shrink:0}
.result-media .result-select:focus-within{outline:2px solid #00e9ef;outline-offset:2px}
.result-media video{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;max-height:320px;background:#040713;border-radius:11px}

.results-heading{gap:20px;flex-wrap:wrap}.results-heading .results-heading-filters{margin:0 0 0 auto;justify-content:flex-end;align-self:center}
@media(max-width:720px){.results-heading .results-heading-filters{margin-left:0;width:100%;justify-content:flex-start}}

.result-card h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;min-width:0}

#main{padding-top:20px}
#main>.workspace-heading,#main>.welcome{margin-top:0}
#main>.workspace-heading h1,#main>.welcome h1{margin-top:0}


.connection-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.connection-grid>.panel{min-width:0}
.connection-grid>.storage-panel{margin-top:0;padding:24px}
.connection-grid .storage-panel .panel-title{flex-wrap:wrap;gap:12px}
.connection-grid .storage-footer{flex-direction:column;align-items:flex-start;gap:16px;overflow-wrap:anywhere}
@media(max-width:1000px){.connection-grid{grid-template-columns:1fr}}

.agent-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:32px;min-height:32px;border:1px solid transparent;border-radius:7px;font-size:21px;line-height:1;color:var(--muted);cursor:grab;touch-action:none;user-select:none;letter-spacing:-3px}
.agent-drag-handle:hover,.agent-drag-handle:focus-visible{color:#00e9ef;border-color:#00e9ef55;outline:none}
.agent-drag-handle:active{cursor:grabbing}
.studio-card.agent-dragging{opacity:.55}
.studio-card.agent-drop-target{border-color:#00e9ef;box-shadow:0 0 0 2px #00e9ef55}

.studio-card .card-content{position:relative}
.studio-card .card-content>.agent-drag-handle{position:absolute;right:12px;top:12px}
.studio-card .card-content h3{padding-right:32px}
.art-tag{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#agent-profile-form{display:grid;gap:18px;margin-top:0}
#agent-profile-form .field{margin:0}
#agent-profile-form textarea{width:100%;resize:vertical;min-height:90px}
.agent-media-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.personal-media{min-width:0}
.personal-media img{display:block;width:100%;height:140px;object-fit:contain;background:#060b19;border:1px solid var(--border-subtle);border-radius:10px}
.personal-media input{max-width:100%;font-size:11px}
.personal-media small{font-size:11px;color:var(--muted);line-height:1.6}
@media(max-width:560px){.agent-media-settings{grid-template-columns:1fr}}

/* Compact agent cards, with all existing controls and descriptions retained. */
.studio-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),330px));gap:18px;align-items:start}
.studio-grid .studio-card{width:100%;min-width:0;min-height:388px;padding:12px;border-radius:18px}
.studio-grid .art.cyber-art{aspect-ratio:6/5;border-radius:11px}
.studio-grid .card-content{padding:10px 3px 2px}
.studio-grid .card-content h3{font-size:14px;line-height:1.3;margin:4px 0 6px;padding-right:28px}
.studio-grid .card-content>p{font-size:11.5px;line-height:1.55}
.studio-grid .card-content>.agent-drag-handle{right:0;top:4px;width:26px;min-height:28px;font-size:18px}
.studio-grid .chips{gap:5px;margin:10px 0 2px}
.studio-grid .chips span{font-size:9.5px;padding:3px 8px}
.studio-grid .art-role-badge{font-size:8px;padding:4px 6px;left:8px;top:8px}
.studio-grid .art-tag{font-size:9px;padding:4px 6px;right:8px;top:8px;max-width:52%}
.studio-grid .art-telemetry{left:8px;right:8px;bottom:8px}
.studio-grid .agent-status-badge{font-size:9px}

/* Reference layout: image first, centered name and status beneath it. */
.studio-grid .art.cyber-art{aspect-ratio:4/3}
.studio-grid .mascot-img{object-position:center}
.studio-grid .art-vignette{background:linear-gradient(180deg,#05071310,#05071300 65%,#05071320)}
.studio-grid .card-content{align-items:center;text-align:center;padding:9px 2px 0}
.studio-grid .card-content h3{width:100%;padding:0 28px;margin:2px 0 7px;font-size:14px}
.agent-card-telemetry{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin-bottom:8px}
.studio-grid .agent-card-telemetry .agent-status-badge{align-self:center;font-size:9px;padding:4px 9px}
.agent-card-telemetry .agent-progress-track{width:100%;height:4px}
.agent-card-telemetry .agent-progress-track.is-active .agent-progress-fill{animation:agent-working 1.6s ease-in-out infinite alternate}
.studio-grid .card-content>p{font-size:10.5px;line-height:1.45}
.studio-grid .chips{justify-content:center;margin:8px 0 0}
@keyframes agent-working{from{transform:translateX(-65%)}to{transform:translateX(135%)}}
@media(prefers-reduced-motion:reduce){.agent-card-telemetry .agent-progress-track.is-active .agent-progress-fill{animation:none}}

.studio-grid .card-content h3{padding-left:0;padding-right:0}

.studio-grid .art.cyber-art{aspect-ratio:1/1}


.studio-grid .art>.art-status{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px);font-size:9px;padding:4px 9px}

/* Fixed compact cards with a square image and all existing actions preserved. */
.studio-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),250px));gap:16px}
.studio-grid .studio-card{height:330px;min-height:0;padding:10px;border-radius:16px}
.studio-grid .art.cyber-art{aspect-ratio:1/1;flex-shrink:0;border-radius:10px}
.studio-grid .card-content{min-height:0;padding:6px 0 0}
.studio-grid .card-content h3{font-size:12px;line-height:1.3;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.studio-grid .agent-card-telemetry{gap:0;margin-bottom:5px;flex-shrink:0}
.studio-grid .agent-card-telemetry .agent-progress-track{height:3px}
.studio-grid .card-content>p{font-size:9.5px;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex-shrink:0}
.studio-grid .chips{margin:5px 0 0;gap:4px;flex-wrap:nowrap;max-width:100%;flex-shrink:0}
.studio-grid .chips span{font-size:8px;line-height:1.2;padding:2px 6px;white-space:nowrap;min-width:0}
.studio-grid .art>.art-status{left:8px;bottom:8px;font-size:9px;padding:6.5px 11.5px;max-width:calc(100% - 16px)}

.studio-grid .art>.art-status{padding:4px 9px}
dialog.completion-modal{width:min(900px,94vw);max-width:94vw}
.completion-body h2{margin-bottom:18px}
.completed-media-list{display:grid;gap:24px}
.completed-media{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;margin:0}
.completed-media figcaption{font-size:13px;font-weight:700;overflow-wrap:anywhere;text-align:center}
.completed-media img,.completed-media video{display:block;max-width:100%;width:auto;max-height:60vh;object-fit:contain;border-radius:10px;background:#040713}
.completed-media .button{min-width:130px}

#main>.welcome h1{font-size:30px}
#main>.welcome .cyber-subline{font-size:10.4167px}
.studio-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),270px));gap:17.28px}
.studio-grid .studio-card{height:357px;padding:10.8px;border-radius:17.28px}
.studio-grid .art.cyber-art{border-radius:10.8px}
.studio-grid .card-content{padding-top:6.48px}
.studio-grid .card-content h3{font-size:12.96px;margin-bottom:4.32px}
.studio-grid .agent-card-telemetry{margin-bottom:5.4px}
.studio-grid .agent-card-telemetry .agent-progress-track{height:3.24px}
.studio-grid .card-content>p{font-size:10.26px}
.studio-grid .chips{margin-top:5.4px;gap:4.32px}
.studio-grid .chips span{font-size:8.64px;padding:2.16px 6.48px}
.studio-grid .art>.art-status{left:8.64px;bottom:8.64px;font-size:9.72px;padding:4.32px 9.72px;max-width:calc(100% - 17.28px);gap:6.48px}
.studio-grid .art-status .agent-status-dot{width:6.48px;height:6.48px}

.completed-media .result-preview{width:auto;max-width:100%}
.completed-media .result-preview img{width:auto;max-width:100%;max-height:60vh;aspect-ratio:auto}
.completed-media-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,340px)}
.completed-media-actions .button{min-width:0;padding:10px 14px;font-size:12px}

.studio-grid .studio-card:hover{transform:translateY(-2px);border-color:rgba(0,242,254,.28);box-shadow:0 8px 20px -4px rgba(0,0,0,.5),0 0 10px rgba(0,242,254,.08)}
.studio-grid .studio-card:hover .mascot-img{transform:scale(1.02)}

/* Media-sized dialogs with actions attached to the right side. */
dialog.compare-modal{width:min(94vw,840px,calc(62vh * var(--result-aspect,.75) + 150px));max-width:94vw}
dialog.completion-modal{width:min(94vw,840px,calc(60vh * var(--result-aspect,.75) + 150px));max-width:94vw}
.popup-result-layout{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:12px;align-items:center}
.popup-result-layout .compare-stage{width:100%;margin:0}
.popup-side-actions{display:grid;grid-template-columns:1fr;gap:8px;align-self:center}
.popup-side-actions .button{padding:10px 9px;min-width:0;font-size:12px}
.completion-body{padding:18px}
.completed-media{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:12px;align-items:center}
.completed-media>.result-preview,.completed-media>video{grid-column:1;grid-row:1;justify-self:center;min-width:0}
.completed-media>.completed-media-actions{grid-column:2;grid-row:1;grid-template-columns:1fr;align-self:center;width:100%}
.completed-media>.field-note{grid-column:1/-1;grid-row:2}
.completed-media-actions .button{padding:10px 9px}
.compare-modal .terminal-title,.completion-modal .terminal-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:420px){.popup-result-layout,.completed-media{grid-template-columns:minmax(0,1fr) 76px;gap:8px}.popup-side-actions .button,.completed-media-actions .button{padding:9px 5px;font-size:11px}.completion-body{padding:12px}}

.studio-grid .studio-card:hover{border-color:rgba(0,242,254,.45);box-shadow:0 8px 20px -4px rgba(0,0,0,.5),0 0 18px rgba(0,242,254,.19)}

#main>.team-heading p,#main>.results-heading p{color:var(--neon-cyan)}

#main>.welcome .cyber-subline,#main>.team-heading p,#main>.results-heading p{
 font-family:inherit;font-size:10.4167px;font-weight:700;font-style:normal;line-height:normal;
 letter-spacing:.06em;color:var(--neon-cyan);text-shadow:0 0 12px rgba(0,242,254,.45);text-transform:uppercase;
}

.translator-panel{max-width:960px;padding:24px}
#translator-form{display:grid;gap:16px}
#translator-input{width:100%;min-height:220px;resize:vertical;line-height:1.7}
.translator-controls{display:flex;justify-content:space-between;align-items:center;gap:16px}
#translator-count{font-size:11px;color:var(--muted)}
.translator-controls .button{min-width:130px}
.translation-preview{display:block;width:100%;min-height:220px;text-align:left;padding:16px;border:1px solid var(--border-subtle);border-radius:10px;background:#060b1b;color:var(--ink);cursor:pointer}
.translation-preview>span{display:block;color:var(--neon-cyan);font-size:10px;font-weight:700;margin-bottom:12px}
.translation-preview>p{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical}
.translation-copy{margin-top:8px;width:100%}
.translation-content{grid-column:1;grid-row:1;min-width:0;max-height:60vh;overflow:auto;padding:4px 2px}
.translated-text{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:16px;user-select:text}
.translation-original{margin-top:22px;color:var(--muted);font-size:12px}
.translation-original summary{cursor:pointer;color:var(--neon-cyan)}
.translation-original p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:10px;line-height:1.7}
/* Tercüman konuşma alanı */
.translator-chat{max-width:none}
.translator-chat .panel-title>button{cursor:pointer;color:var(--neon-cyan);font:inherit;font-size:12px;letter-spacing:0;text-transform:none}
.translator-chat .panel-title>button:disabled{opacity:.45;cursor:wait}
.translator-search{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.translator-search input{max-width:360px;min-width:0;flex:1}
#translator-search-count{font-size:11px;color:var(--muted);white-space:nowrap}
.translator-conversation{max-height:52vh;min-height:180px;overflow:auto;overscroll-behavior:contain;padding:6px 4px 18px;margin-bottom:18px;scrollbar-gutter:stable}
.translation-turn{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.translation-message{max-width:82%;padding:14px 18px;border:1px solid var(--border-subtle);border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.75;user-select:text}
.translation-message.is-user{align-self:flex-end;background:rgba(92,65,244,.2);border-color:rgba(115,96,255,.35);border-bottom-right-radius:4px}
.translation-message.is-assistant{align-self:flex-start;background:rgba(0,225,242,.045);border-color:rgba(0,225,242,.18);border-bottom-left-radius:4px}
.translation-message.is-error{color:#ff9e9e;border-color:rgba(255,80,80,.3)}
.translation-message mark{background:#04e8eb;color:#041014;border-radius:2px}
.translation-message-copy{display:block;padding:0;margin-top:10px;color:var(--neon-cyan);background:none;border:0;font-size:11px;cursor:pointer}
.translator-empty{color:var(--muted);font-size:13px;text-align:center;padding:36px 12px}
.translator-chat #translator-input{min-height:72px}
@media(max-width:600px){.translator-chat{padding:16px}.translation-message{max-width:94%;padding:12px}.translator-search{gap:8px}}
.translator-chat-toolbar{justify-content:flex-end;gap:14px}
.translator-chat-toolbar .translator-search{margin-bottom:0;flex:1;justify-content:flex-end}
.translator-chat-toolbar .translator-search input{max-width:150px}
.translator-chat-toolbar>button{flex-shrink:0}
@media(max-width:600px){.translator-chat-toolbar{gap:10px}.translator-chat-toolbar .translator-search input{width:100%;max-width:none}#translator-search-count{font-size:10px}}
/* Tercüman görsel çevirisi */
.workspace-heading:has(.translator-chat-toolbar){display:flex;align-items:center;justify-content:space-between;gap:20px}
.workspace-heading>.translator-chat-toolbar{display:flex;align-items:center;gap:14px;margin-left:auto;flex:1;max-width:480px}
.workspace-heading .translator-chat-toolbar>button{cursor:pointer;color:var(--neon-cyan);font:inherit;font-size:12px;text-transform:none;letter-spacing:0}
.translator-send-actions{display:flex;align-items:center;gap:10px}
.translator-send-actions .button{min-width:0}
.translator-message-image{display:block;max-width:min(340px,100%);max-height:300px;object-fit:contain;border-radius:10px;margin-bottom:10px}
.translator-selected-image{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--border-subtle);border-radius:10px}
.translator-selected-image img{width:60px;height:60px;object-fit:contain;border-radius:6px}
.translator-selected-image span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px}
.translator-selected-image .button{padding:8px;min-width:0}
#translator-attachment:empty{display:none}
@media(max-width:700px){.workspace-heading:has(.translator-chat-toolbar){flex-wrap:wrap;gap:12px}.workspace-heading>.translator-chat-toolbar{max-width:none;min-width:220px}.translator-send-actions{gap:7px}.translator-send-actions .button{padding:10px;font-size:12px}.translator-controls{gap:8px}}
.translator-chat.is-file-over{border-color:var(--neon-cyan);box-shadow:inset 0 0 0 2px rgba(0,225,242,.3),0 0 22px rgba(0,225,242,.12)}
.other-tools-heading{margin-top:24px}
@media(max-width:720px){.sidebar .other-tools-heading{display:flex;align-items:center;margin:0 0 0 12px;white-space:nowrap;font-size:9px;flex-shrink:0}}
.workspace-heading>.translator-chat-toolbar{gap:8px}
.workspace-heading .translator-search{gap:6px}
/* Yalnızca Tercüman konuşması: yüzde 10 daha küçük */
.translator-conversation{max-height:46.8vh;min-height:162px;padding:5.4px 3.6px 16.2px;margin-bottom:16.2px}
.translator-conversation .translation-turn{gap:10.8px;margin-bottom:19.8px}
.translator-conversation .translation-message{padding:12.6px 16.2px;border-radius:14.4px;font-size:12.6px}
.translator-conversation .translation-message.is-user{border-bottom-right-radius:3.6px}
.translator-conversation .translation-message.is-assistant{border-bottom-left-radius:3.6px}
.translator-conversation .translation-message-copy{margin-top:9px;font-size:9.9px}
.translator-conversation .translator-message-image{max-width:min(306px,100%);max-height:270px;border-radius:9px;margin-bottom:9px}
.translator-conversation .translator-empty{font-size:11.7px;padding:32.4px 10.8px}
@media(max-width:600px){.translator-conversation .translation-message{padding:10.8px}}
/* Tercüman metin girişi sohbet kutusunun sağında */
.translator-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px}
.translator-layout>.translator-chat{min-width:0}
.translator-compose{min-width:0;width:100%;justify-self:end}
.translator-compose #translator-input{min-height:72px}
.translator-compose .translator-controls{flex-wrap:wrap;justify-content:flex-end;gap:10px}
.translator-compose #translator-count{width:100%;text-align:right}
.translator-compose .translator-send-actions{justify-content:flex-end;width:100%}
.translator-layout.is-file-over>.translator-chat{border-color:var(--neon-cyan);box-shadow:inset 0 0 0 2px rgba(0,225,242,.3),0 0 22px rgba(0,225,242,.12)}
@media(max-width:1000px){.translator-layout{grid-template-columns:minmax(0,1fr) 280px;gap:16px}}
@media(max-width:760px){.translator-layout{grid-template-columns:minmax(0,1fr)}.translator-compose{max-width:100%}}

/* Prof dille yaz: Tercüman ile aynı düzen */
.professional-panel{max-width:960px;padding:24px}
#professional-form{display:grid;gap:16px}
#professional-input{width:100%;min-height:220px;resize:vertical;line-height:1.7}
.professional-controls{display:flex;justify-content:space-between;align-items:center;gap:16px}
#professional-count{font-size:11px;color:var(--muted)}
.professional-controls .button{min-width:130px}
.professional-preview{display:block;width:100%;min-height:220px;text-align:left;padding:16px;border:1px solid var(--border-subtle);border-radius:10px;background:#060b1b;color:var(--ink);cursor:pointer}
.professional-preview>span{display:block;color:var(--neon-cyan);font-size:10px;font-weight:700;margin-bottom:12px}
.professional-preview>p{font-size:13px;line-height:1.7;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical}
.professional-copy{margin-top:8px;width:100%}
.professional-content{grid-column:1;grid-row:1;min-width:0;max-height:60vh;overflow:auto;padding:4px 2px}
.translated-text{font-size:15px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:16px;user-select:text}
.professional-original{margin-top:22px;color:var(--muted);font-size:12px}
.professional-original summary{cursor:pointer;color:var(--neon-cyan)}
.professional-original p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:10px;line-height:1.7}
/* Tercüman konuşma alanı */
.professional-chat{max-width:none}
.professional-chat .panel-title>button{cursor:pointer;color:var(--neon-cyan);font:inherit;font-size:12px;letter-spacing:0;text-transform:none}
.professional-chat .panel-title>button:disabled{opacity:.45;cursor:wait}
.professional-search{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.professional-search input{max-width:360px;min-width:0;flex:1}
#professional-search-count{font-size:11px;color:var(--muted);white-space:nowrap}
.professional-conversation{max-height:52vh;min-height:180px;overflow:auto;overscroll-behavior:contain;padding:6px 4px 18px;margin-bottom:18px;scrollbar-gutter:stable}
.professional-turn{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.professional-message{max-width:82%;padding:14px 18px;border:1px solid var(--border-subtle);border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.75;user-select:text}
.professional-message.is-user{align-self:flex-end;background:rgba(92,65,244,.2);border-color:rgba(115,96,255,.35);border-bottom-right-radius:4px}
.professional-message.is-assistant{align-self:flex-start;background:rgba(0,225,242,.045);border-color:rgba(0,225,242,.18);border-bottom-left-radius:4px}
.professional-message.is-error{color:#ff9e9e;border-color:rgba(255,80,80,.3)}
.professional-message mark{background:#04e8eb;color:#041014;border-radius:2px}
.professional-message-copy{display:block;padding:0;margin-top:10px;color:var(--neon-cyan);background:none;border:0;font-size:11px;cursor:pointer}
.professional-empty{color:var(--muted);font-size:13px;text-align:center;padding:36px 12px}
.professional-chat #professional-input{min-height:72px}
@media(max-width:600px){.professional-chat{padding:16px}.professional-message{max-width:94%;padding:12px}.professional-search{gap:8px}}
.professional-chat-toolbar{justify-content:flex-end;gap:14px}
.professional-chat-toolbar .professional-search{margin-bottom:0;flex:1;justify-content:flex-end}
.professional-chat-toolbar .professional-search input{max-width:150px}
.professional-chat-toolbar>button{flex-shrink:0}
@media(max-width:600px){.professional-chat-toolbar{gap:10px}.professional-chat-toolbar .professional-search input{width:100%;max-width:none}#professional-search-count{font-size:10px}}
/* Tercüman görsel çevirisi */
.workspace-heading:has(.professional-chat-toolbar){display:flex;align-items:center;justify-content:space-between;gap:20px}
.workspace-heading>.professional-chat-toolbar{display:flex;align-items:center;gap:14px;margin-left:auto;flex:1;max-width:480px}
.workspace-heading .professional-chat-toolbar>button{cursor:pointer;color:var(--neon-cyan);font:inherit;font-size:12px;text-transform:none;letter-spacing:0}
.professional-send-actions{display:flex;align-items:center;gap:10px}
.professional-send-actions .button{min-width:0}
.professional-message-image{display:block;max-width:min(340px,100%);max-height:300px;object-fit:contain;border-radius:10px;margin-bottom:10px}
.professional-selected-image{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--border-subtle);border-radius:10px}
.professional-selected-image img{width:60px;height:60px;object-fit:contain;border-radius:6px}
.professional-selected-image span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px}
.professional-selected-image .button{padding:8px;min-width:0}
#professional-attachment:empty{display:none}
@media(max-width:700px){.workspace-heading:has(.professional-chat-toolbar){flex-wrap:wrap;gap:12px}.workspace-heading>.professional-chat-toolbar{max-width:none;min-width:220px}.professional-send-actions{gap:7px}.professional-send-actions .button{padding:10px;font-size:12px}.professional-controls{gap:8px}}
.professional-chat.is-file-over{border-color:var(--neon-cyan);box-shadow:inset 0 0 0 2px rgba(0,225,242,.3),0 0 22px rgba(0,225,242,.12)}
.other-tools-heading{margin-top:24px}
@media(max-width:720px){.sidebar .other-tools-heading{display:flex;align-items:center;margin:0 0 0 12px;white-space:nowrap;font-size:9px;flex-shrink:0}}
.workspace-heading>.professional-chat-toolbar{gap:8px}
.workspace-heading .professional-search{gap:6px}
/* Yalnızca Tercüman konuşması: yüzde 10 daha küçük */
.professional-conversation{max-height:46.8vh;min-height:162px;padding:5.4px 3.6px 16.2px;margin-bottom:16.2px}
.professional-conversation .professional-turn{gap:10.8px;margin-bottom:19.8px}
.professional-conversation .professional-message{padding:12.6px 16.2px;border-radius:14.4px;font-size:12.6px}
.professional-conversation .professional-message.is-user{border-bottom-right-radius:3.6px}
.professional-conversation .professional-message.is-assistant{border-bottom-left-radius:3.6px}
.professional-conversation .professional-message-copy{margin-top:9px;font-size:9.9px}
.professional-conversation .professional-message-image{max-width:min(306px,100%);max-height:270px;border-radius:9px;margin-bottom:9px}
.professional-conversation .professional-empty{font-size:11.7px;padding:32.4px 10.8px}
@media(max-width:600px){.professional-conversation .professional-message{padding:10.8px}}
/* Tercüman metin girişi sohbet kutusunun sağında */
.professional-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px}
.professional-layout>.professional-chat{min-width:0}
.professional-compose{min-width:0;width:100%;justify-self:end}
.professional-compose #professional-input{min-height:72px}
.professional-compose .professional-controls{flex-wrap:wrap;justify-content:flex-end;gap:10px}
.professional-compose #professional-count{width:100%;text-align:right}
.professional-compose .professional-send-actions{justify-content:flex-end;width:100%}
.professional-layout.is-file-over>.professional-chat{border-color:var(--neon-cyan);box-shadow:inset 0 0 0 2px rgba(0,225,242,.3),0 0 22px rgba(0,225,242,.12)}
@media(max-width:1000px){.professional-layout{grid-template-columns:minmax(0,1fr) 280px;gap:16px}}
@media(max-width:760px){.professional-layout{grid-template-columns:minmax(0,1fr)}.professional-compose{max-width:100%}}

/* İki metin aracında ortak giriş kutusu ve alt kontroller */
.translator-compose.panel,.professional-compose.panel{padding:24px}
.translator-compose #translator-input,.professional-compose #professional-input{height:300px;min-height:300px}
.translator-compose .translator-controls,.professional-compose .professional-controls{flex-wrap:nowrap;justify-content:space-between;align-items:center}
.translator-compose #translator-count,.professional-compose #professional-count{width:auto;text-align:left;white-space:nowrap;flex-shrink:0}
.translator-compose .translator-send-actions,.professional-compose .professional-send-actions{width:auto;justify-content:flex-end}
#translator-add-image,#professional-add-image{width:44px;height:44px;min-width:44px;padding:0;flex:0 0 44px}
@media(max-width:760px){.translator-compose.panel,.professional-compose.panel{padding:16px}.translator-compose #translator-input,.professional-compose #professional-input{height:280px;min-height:280px}}
/* İki araçta sohbet kutusunun toplam yüksekliği */
.translator-layout>.translator-chat,.professional-layout>.professional-chat{height:400px;display:flex;flex-direction:column}
.translator-chat>.translator-conversation,.professional-chat>.professional-conversation{flex:1;min-height:0;max-height:none;margin-bottom:0}
.chat-area-label{flex-shrink:0;margin-bottom:8px}

.search-match-navigation{display:inline-flex;gap:4px;flex-shrink:0}
.search-match-navigation[hidden]{display:none}
.search-match-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:28px;padding:0;border:1px solid var(--border-subtle);border-radius:6px;background:#0b1129;color:var(--neon-cyan);font-size:17px;line-height:1;cursor:pointer}
.search-match-button:hover{border-color:var(--neon-cyan);background:rgba(0,225,242,.08)}
.search-match-button:disabled{opacity:.35;cursor:default}
.translator-conversation mark.is-active-match,.professional-conversation mark.is-active-match{background:#ffc857;color:#07101e;outline:2px solid #ffc857;outline-offset:1px}

.chat-area-label{padding-left:3.6px}
/* Sohbet kutusu yüksekliğini sağdaki giriş paneli belirler */
.translator-layout>.translator-chat,.professional-layout>.professional-chat{height:auto;align-self:stretch;contain:size}
@media(max-width:760px){.translator-layout>.translator-chat,.professional-layout>.professional-chat{height:400px;contain:none}}
/* İki metin aracının dış panelleri aynı yükseklikte */
.translator-layout>.translator-chat,.professional-layout>.professional-chat,.translator-compose.panel,.professional-compose.panel{height:500px;box-sizing:border-box}
.translator-compose #translator-input,.professional-compose #professional-input{height:390px;min-height:390px}
.translator-compose.panel,.professional-compose.panel{padding:12px 24px;gap:8px;grid-template-rows:minmax(0,1fr) 44px}
.translator-compose>.field,.professional-compose>.field{gap:5px}
/* Etiket satırındaki fazla yüksekliği kaldır, girişe 5 px bırak */
.translator-compose>.field,.professional-compose>.field{gap:5px}
.translator-compose>.field>span,.professional-compose>.field>span{line-height:1}
.translator-compose>.field,.professional-compose>.field{gap:10px}
.translator-compose>.field,.professional-compose>.field{gap:20px}
.translator-compose>.field,.professional-compose>.field{gap:15px}
.translator-compose>.field>span,.professional-compose>.field>span{padding-left:5px}
.translator-compose>.field,.professional-compose>.field{gap:10px}
.translator-compose>.field>span,.professional-compose>.field>span{padding-left:0}
.translator-compose>.field,.professional-compose>.field{gap:12px}
.translator-compose>.field>span,.professional-compose>.field>span{padding-left:2px}
.translator-compose>.field>span,.professional-compose>.field>span{padding-left:4px}
.translator-compose>.field>span,.professional-compose>.field>span{padding-left:3px}
/* Caption ajanı */
.caption-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
.caption-chat-toolbar,.caption-search{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.caption-chat-toolbar{margin-left:auto;flex:1;max-width:480px;gap:8px}
.caption-search{min-width:0;flex:1}
#caption-search{width:150px;max-width:150px;min-width:65px}
#caption-search-count{font-size:11px;color:var(--muted);white-space:nowrap}
.caption-chat-toolbar>.outline-badge{font:inherit;font-size:12px;letter-spacing:0;text-transform:none;color:var(--neon-cyan);cursor:pointer}
.caption-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:stretch;gap:24px}
.caption-chat,.caption-compose{height:500px;min-width:0;box-sizing:border-box}
.caption-chat{display:flex;flex-direction:column;padding:24px}
.caption-conversation{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:5.4px 3.6px 16px;scrollbar-gutter:stable}
.caption-turn{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.caption-message{max-width:94%;padding:13px 16px;border:1px solid var(--border-subtle);border-radius:14px;font-size:12.6px;line-height:1.75;overflow-wrap:anywhere;min-width:0}
.caption-message.is-user{white-space:pre-wrap;align-self:flex-end;background:rgba(92,65,244,.2);border-color:rgba(115,96,255,.35);border-bottom-right-radius:4px}
.caption-message.is-assistant{align-self:flex-start;background:rgba(0,225,242,.045);border-color:rgba(0,225,242,.18);border-bottom-left-radius:4px;width:min(94%,680px)}
.caption-message mark{background:#04e8eb;color:#041014;border-radius:2px}
.caption-conversation mark.is-active-match{background:#ffc857;color:#07101e;outline:2px solid #ffc857;outline-offset:1px}
.caption-source-media{display:block;max-width:100%;max-height:220px;border-radius:9px;margin-bottom:8px;object-fit:contain}
.caption-source-name{display:block;font-size:10px;color:var(--muted)}
.caption-alternative{position:relative;padding:8px 0 12px;border-bottom:1px solid var(--border-subtle)}
.caption-alternative+.caption-alternative{margin-top:8px}
.caption-alternative>p,.caption-preferred>p{white-space:pre-wrap;margin:3px 0 9px;font-size:12.6px;line-height:1.75}
.caption-alternative-number{font-size:10px;color:var(--muted)}
.caption-feedback-actions{display:flex;gap:8px;flex-wrap:wrap}
.caption-feedback-actions button{background:transparent;padding:3px 5px;border:1px solid transparent;border-radius:5px;color:var(--neon-cyan);font-size:10px;cursor:pointer}
.caption-feedback-actions button:hover,.caption-feedback-actions button.chosen{border-color:rgba(0,225,242,.4);background:rgba(0,225,242,.09)}
.caption-preferred{padding:8px 10px;background:rgba(92,65,244,.12);margin-top:8px;border-radius:8px}.caption-preferred>span{font-size:10px;color:var(--muted)}
.caption-analysis{font-size:11px;margin-top:12px;color:var(--muted)}.caption-analysis summary{color:var(--neon-cyan);cursor:pointer}.caption-analysis p{margin-top:8px;white-space:pre-wrap}
.caption-delete{display:flex;align-items:center;gap:5px;margin-top:10px;background:none;border:0;color:var(--muted);font-size:10px;padding:2px 0;cursor:pointer}.caption-delete .icon{width:13px;height:13px}
.caption-empty{padding:32px 11px;text-align:center;color:var(--muted);font-size:12px}
.caption-job-status{font-size:12px;color:var(--neon-cyan)}.caption-job-status.is-error{color:#ff9e9e}
.caption-compose{display:flex;flex-direction:column;padding:18px 20px;gap:12px}
.caption-mode-row{display:flex;align-items:center;gap:10px}.caption-mode-row>.field{flex:1;min-width:0}.caption-mode-row select{padding:8px;font-size:11px}.caption-mode-row>.text-button{max-width:95px;line-height:1.6;flex-shrink:0}
#caption-memory-count{display:inline-block;margin-left:4px;color:var(--muted)}
.caption-note-field{flex:1;min-height:0}.caption-note-field>span{padding-left:3px;line-height:1}.caption-note-field textarea{flex:1;min-height:80px;resize:vertical;line-height:1.7;padding:12px}
.caption-source-row{display:flex;align-items:center;gap:10px}.caption-source-row>input{flex:1;min-width:0;padding:8px;font-size:11px}.caption-audio-toggle{display:flex;align-items:center;gap:5px;white-space:nowrap;color:var(--muted);font-size:10px}.caption-audio-toggle input{width:14px;height:14px;margin:0;padding:0;accent-color:var(--neon-cyan)}
.caption-controls{display:flex;justify-content:space-between;align-items:center;gap:8px}.caption-controls>div{display:flex;gap:10px;align-items:center}.caption-controls .button{font-size:12px;padding:10px 12px;min-width:0}.caption-controls .caption-add-file{width:44px;height:44px;padding:0}#caption-count{font-size:11px;color:var(--muted);white-space:nowrap}
.caption-file-hint{font-size:9px;color:var(--muted);line-height:1.4}.caption-upload-progress{font-size:11px;color:var(--neon-cyan)}.caption-upload-progress[hidden]{display:none}
.caption-attachment{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border-subtle);border-radius:8px;min-height:46px}.caption-attachment>img{width:36px;height:36px;object-fit:contain;border-radius:4px}.caption-attachment>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.caption-attachment .icon-button{width:26px;height:26px;flex-shrink:0;padding:4px}#caption-attachment:empty{display:none}
.caption-layout.is-file-over>.caption-chat{border-color:var(--neon-cyan);box-shadow:inset 0 0 0 2px rgba(0,225,242,.3),0 0 22px rgba(0,225,242,.12)}
.caption-memory-dialog>p{color:var(--muted);font-size:12px;margin:12px 0 20px}.caption-memory-dialog textarea{min-height:90px}.caption-memory-records{max-height:40vh;overflow:auto;margin-top:20px}.caption-memory-records article{padding:12px 0;border-top:1px solid var(--border-subtle)}.caption-memory-records article>span{font-size:10px;color:var(--neon-cyan)}.caption-memory-records article>p{white-space:pre-wrap;font-size:12px;line-height:1.7;margin:5px 0}.caption-memory-records article>small{display:block;font-size:11px;color:var(--muted);margin-bottom:8px}
.caption-result-preview{width:100%;min-height:200px;text-align:left;padding:16px;border:1px solid var(--border-subtle);border-radius:10px;background:#060b1b;color:var(--ink);cursor:pointer}.caption-result-preview>span{color:var(--neon-cyan);font-size:11px}.caption-result-preview>p{font-size:13px;line-height:1.8;margin-top:12px;white-space:pre-wrap}.caption-result-dialog .caption-message{max-width:100%}
@media(max-width:1000px){.caption-layout{grid-template-columns:minmax(0,1fr) 280px;gap:16px}.caption-compose{padding:16px 12px}.caption-controls>div{gap:6px}.caption-controls .button{font-size:11px;padding:10px}}
@media(max-width:760px){.caption-layout{grid-template-columns:minmax(0,1fr)}.caption-heading{flex-wrap:wrap;gap:12px}.caption-chat-toolbar{max-width:none;min-width:240px}.caption-chat{padding:16px}.caption-compose{padding:18px}.caption-message{max-width:96%}.caption-message.is-assistant{width:96%}}

/* Caption önerileri: metin solda, işlemler aynı satırda sağda */
.caption-message.is-assistant{width:94%;max-width:94%}
.caption-alternative{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;min-height:0;padding:5px 0;border-bottom:0}
.caption-alternative+.caption-alternative{margin-top:0}
.caption-alternative-text{display:flex;align-items:baseline;gap:8px;min-width:0}
.caption-alternative-number{flex-shrink:0;min-width:8px}
.caption-alternative-text>p{white-space:pre-wrap;margin:0;font-size:12.6px;line-height:1.75}
.caption-alternative .caption-feedback-actions{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:2px;grid-column:2;grid-row:1}
.caption-alternative .caption-feedback-actions button{text-align:center;min-height:0;padding:3px 4px;white-space:nowrap}
.caption-alternative>.caption-preferred{grid-column:1/-1;margin-top:3px}
.caption-more-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.caption-more-row>.button{font-size:12px;padding:10px 14px}.caption-more-row>.is-error{width:100%}
@media(max-width:480px){.caption-alternative{grid-template-columns:minmax(0,1fr);row-gap:2px}.caption-alternative .caption-feedback-actions{grid-column:1;grid-row:auto;justify-content:flex-end}}

.caption-more-style{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.caption-more-style select{width:165px;max-width:100%;padding:9px 10px;font-size:12px}

.caption-link-field input{font-size:11px;padding:9px 10px}.caption-link-field{gap:6px}.caption-source-link{display:block;margin-top:7px;font-size:11px;color:var(--neon-cyan);overflow-wrap:anywhere}

.caption-alternative .caption-feedback-actions button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;padding:4px}
.caption-feedback-actions .icon{width:16px;height:16px;pointer-events:none}
.caption-feedback-actions button:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:2px}

.caption-mode-row>.caption-memory-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:6px;border:1px solid var(--border-subtle);border-radius:8px;color:var(--neon-cyan)}
.caption-memory-button>.icon{width:21px;height:21px}.caption-memory-button:hover{background:rgba(0,225,242,.08);border-color:rgba(0,225,242,.4)}
.caption-memory-button>#caption-memory-count{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;margin:0;padding:0 3px;border:1px solid rgba(0,225,242,.3);border-radius:8px;background:#07101e;color:var(--neon-cyan);font-size:9px;line-height:1;box-sizing:border-box}
.caption-memory-button>#caption-memory-count[hidden]{display:none}

.caption-mode-row>.caption-memory-button{margin-top:20px}
.caption-batch-title{margin:16px 0 5px;padding-top:12px;border-top:1px solid var(--border-subtle);color:var(--neon-cyan);font-size:12px;line-height:1.5;font-weight:700}
.caption-batch-title:first-child{margin-top:0;padding-top:0;border-top:0}
.caption-alternative.is-hidden{opacity:.6}.caption-hidden-toggle{margin-top:10px;font-size:11px}
@media(min-width:721px){.sidebar .nav-item{min-height:38px;padding-top:8px;padding-bottom:8px;margin-bottom:3px}.sidebar .other-tools-heading{margin-top:14px;padding-top:8px}}


/* ==========================================================================
   CEZ IRGAT — MODERN MOBİL DENEYİMİ (MOBILE UX & TOUCH SYSTEM)
   Sadece mobilde (@media max-width: 768px) geçerlidir.
   Masaüstü (Desktop / Web) görünümünü kesinlikle etkilemez.
   ========================================================================== */

/* 1. Masaüstünde mobil bileşenlerin tamamen gizlenmesi */
@media (min-width: 769px) {
  .mobile-menu-btn,
  .mobile-drawer-backdrop,
  .mobile-bottom-nav,
  .sidebar-header-mobile {
    display: none !important;
  }
}

/* 2. Modern Mobil Görünüm (@media max-width: 768px) */
@media (max-width: 768px) {
  /* Kök ve genel akış */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobil Üst Bar (Topbar / Header) */
  .topbar.factory-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 12px !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: rgba(6, 9, 24, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(24, 35, 78, 0.8) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 7px !important;
    border-radius: 10px !important;
    background: rgba(9, 15, 38, 0.9) !important;
    border: 1px solid rgba(0, 242, 254, 0.25) !important;
    color: var(--neon-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.12) !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
  }
  .mobile-menu-btn:active {
    transform: scale(0.93) !important;
    border-color: var(--neon-cyan) !important;
  }

  .factory-header .brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex-shrink: 0 !important;
  }
  /* 1. Görsel düzenlemeleri: Logo ve API erişimi kaldırıldı, Bakiye sağa dayandı */
  .factory-header .brand-logo {
    display: none !important;
  }
  .factory-header .brand-row {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
  }
  .factory-header .brand-copy small {
    display: none !important;
  }
  .factory-header .breadcrumb {
    display: none !important;
  }

  .factory-header .topbar-right {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
  .connection-indicators {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
  /* Mobilde API erişim butonu kaldırıldı; durum topu Bakiye'nin soluna taşındı */
  .connection-indicators button.api-indicator,
  .connection-indicators .api-indicator:not(.balance-indicator) {
    display: none !important;
  }
  .balance-indicator {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    height: 30px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    gap: 6px !important;
  }
  .balance-indicator i {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Mobil Yan Çekmece (Off-Canvas Drawer) */
  .mobile-drawer-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 4, 12, 0.78) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 180 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }
  .mobile-drawer-backdrop.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Sol kenardaki taşan siyah gölgeyi tamamen sıfırla: Kapalıyken sidebar görünmez ve gölgesiz */
  .sidebar:not(.mobile-open) {
    display: none !important;
    visibility: hidden !important;
    box-shadow: none !important;
    transform: translateX(-100%) !important;
    pointer-events: none !important;
  }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    top: 0 !important;
    width: min(300px, 84vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background: rgba(6, 9, 24, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    z-index: 190 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(0, 242, 254, 0.2) !important;
    border-bottom: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: max(16px, env(safe-area-inset-top)) 14px calc(30px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .sidebar.mobile-open {
    display: flex !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    box-shadow: 16px 0 40px rgba(0, 0, 0, 0.8) !important;
    pointer-events: auto !important;
  }
  .mobile-drawer-backdrop:not(.is-active) {
    display: none !important;
    pointer-events: none !important;
  }
  .sidebar-header-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 4px 14px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  .sidebar-title-mobile {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--neon-cyan) !important;
    letter-spacing: 0.08em !important;
  }
  .close-sidebar-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    border-radius: 8px !important;
  }
  .sidebar nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: visible !important;
  }
  .sidebar .nav-label {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #647494 !important;
    letter-spacing: 0.12em !important;
    padding: 12px 10px 6px !important;
    text-transform: uppercase !important;
  }
  .sidebar .nav-item {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  /* Mobil Alt Gezinme Çubuğu (Bottom Navigation Bar) */
  .mobile-bottom-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(6, 9, 24, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(24, 35, 78, 0.85) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5) !important;
    z-index: 150 !important;
  }
  .mobile-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 100% !important;
    color: #7f91b5 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    padding: 4px 0 !important;
  }
  .mobile-nav-item .icon {
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.18s ease, color 0.18s ease !important;
  }
  .mobile-nav-item.active {
    color: var(--neon-cyan) !important;
    font-weight: 700 !important;
  }
  .mobile-nav-item.active .icon {
    color: var(--neon-cyan) !important;
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6)) !important;
    transform: translateY(-1px) !important;
  }
  .mobile-nav-item:active {
    transform: scale(0.92) !important;
  }

  /* Mobil Sayfa Gövdesi */
  .page {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: calc(100dvh - 56px) !important;
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 12px)) !important;
    box-sizing: border-box !important;
  }
  main {
    padding: 16px 12px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Başlık Bölümleri */
  .welcome {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
    padding-bottom: 12px !important;
  }
  .welcome h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  .workspace-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .workspace-heading h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  /* Ana Sayfa Grid (Ajan Ofisi Kartları — Mobilde 2'li Yan Yana Grid) */
  .studio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .studio-card {
    border-radius: 14px !important;
    border: 1px solid rgba(24, 35, 78, 0.9) !important;
    background: linear-gradient(145deg, rgba(13, 19, 44, 0.95), rgba(7, 10, 26, 0.95)) !important;
    overflow: hidden !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .studio-card:active {
    transform: scale(0.975) !important;
    border-color: rgba(0, 242, 254, 0.4) !important;
  }
  .studio-grid .studio-card {
    height: auto !important;
    min-height: 0 !important;
  }
  .studio-card .art,
  .studio-grid .art.cyber-art {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .studio-card .mascot-img,
  .studio-grid .mascot-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .studio-card .art-status {
    font-size: 8px !important;
    padding: 2px 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    gap: 4px !important;
    border-radius: 6px !important;
    letter-spacing: 0.02em !important;
  }
  .studio-card .agent-status-dot {
    width: 5px !important;
    height: 5px !important;
  }
  .studio-card .card-content {
    padding: 8px 4px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .studio-card h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    text-align: center !important;
  }
  .studio-card .agent-card-telemetry {
    margin: 5px auto 0 !important;
    width: 70% !important;
  }
  .studio-card .agent-progress-track {
    height: 3px !important;
    border-radius: 2px !important;
  }
  /* İkinci görseldeki alanlar kaldırıldı: Açıklama ve Çipler */
  .studio-card p,
  .studio-card .chips {
    display: none !important;
  }

  /* Sekmeler (Tabs - Segment Bar) */
  .tabs {
    display: flex !important;
    width: 100% !important;
    background: #080d22 !important;
    padding: 4px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-subtle) !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
  }
  .tabs button {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 40px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
  }
  .tabs button.selected {
    background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-purple-deep) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(91, 76, 245, 0.4) !important;
  }

  /* Editör ve Formlar (Kapak / Video / Proshot) */
  .editor-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .dropzone {
    padding: 24px 14px !important;
    min-height: 130px !important;
    border-radius: 14px !important;
    border-width: 2px !important;
  }
  .dropzone h3 {
    font-size: 15px !important;
    margin: 6px 0 !important;
  }
  .fields {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .field select,
  .field input,
  .field textarea {
    font-size: 14px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }
  .toggle-row {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: rgba(9, 15, 38, 0.6) !important;
    border: 1px solid rgba(24, 35, 78, 0.6) !important;
    min-height: 48px !important;
  }
  .production-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
  .production-card .button.primary {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    justify-content: center !important;
    margin-top: 12px !important;
  }
  .file-row {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    gap: 10px !important;
  }
  .file-thumb {
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
  }

  /* Tercüman, Prof Dille Yaz ve Caption Sohbet Ekranları */
  .translator-layout,
  .professional-layout,
  .caption-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .translator-chat,
  .professional-chat,
  .caption-chat {
    height: auto !important;
    min-height: 280px !important;
    max-height: 48vh !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .translator-conversation,
  .professional-conversation,
  .caption-conversation {
    max-height: 40vh !important;
    min-height: 200px !important;
    padding: 6px 4px 12px !important;
  }
  .translation-message,
  .professional-message,
  .caption-message {
    max-width: 90% !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }
  .caption-message.is-assistant {
    width: 96% !important;
    max-width: 96% !important;
  }
  .translator-compose.panel,
  .professional-compose.panel,
  .caption-compose.panel {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
  }
  .translator-compose #translator-input,
  .professional-compose #professional-input {
    height: 110px !important;
    min-height: 90px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .caption-compose .caption-note-field textarea {
    min-height: 85px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .caption-controls,
  .translator-controls,
  .professional-controls {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .caption-controls > div,
  .translator-send-actions,
  .professional-send-actions {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .caption-controls .button.primary,
  #translate-button,
  #professional-button {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }
  #translator-add-image,
  #professional-add-image,
  .caption-add-file {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 10px !important;
  }
  .translator-chat-toolbar,
  .professional-chat-toolbar,
  .caption-chat-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .translator-search,
  .professional-search,
  .caption-search {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  .translator-search input,
  .professional-search input,
  #caption-search {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 36px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Sonuçlar ve Ekip Sayfaları */
  .agent-team-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .agent-team-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .results-heading-filters,
  .team-filters {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
  }
  .results-heading-filters::-webkit-scrollbar,
  .team-filters::-webkit-scrollbar {
    display: none !important;
  }
  .team-filter {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    border-radius: 99px !important;
    font-size: 11.5px !important;
  }
  .result-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .result-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .result-card .video-result-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .result-card .button {
    min-height: 40px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }

  /* Modallar ve Önizleme */
  dialog {
    width: min(96vw, 540px) !important;
    max-height: 90dvh !important;
    border-radius: 16px !important;
    margin: auto !important;
  }
  .compare-stage {
    max-height: 50vh !important;
  }
  .compare-divider span {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }
  .popup-result-layout,
  .completed-media {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .popup-side-actions,
  .completed-media-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .popup-side-actions .button,
  .completed-media-actions .button {
    min-height: 42px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }
}



/* Masaüstünde Bakiye butonu noktasız (orijinal) kalır */
@media (min-width: 769px) {
  .balance-indicator i {
    display: none !important;
  }
}

/* Provider selection in the personalization dialog. */
.restored-provider-heading{display:flex;justify-content:flex-end;margin-bottom:20px}.restored-provider-heading .text-provider-field{display:block;margin:0}.restored-provider-heading select{width:110px;height:36px;font-size:12px;padding:6px 8px}

/* Personalization terminal: compact name/provider row and balanced media columns. */
dialog:has(#agent-profile-form){width:min(636px,calc(100% - 28px));max-height:calc(100dvh - 28px)}
.dialog-body:has(#agent-profile-form){padding:28px 30px 22px}
#agent-profile-form{gap:20px}
.agent-profile-toprow{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.agent-profile-toprow .agent-profile-name{width:280px;max-width:100%;min-width:0}
.agent-profile-toprow .agent-profile-name input{height:46px;padding:10px 15px}
.agent-profile-toprow .text-provider-field{display:block;flex:0 0 122px;margin:0 0 2px}
.agent-profile-toprow .text-provider-field select{width:122px;height:42px;font-size:13px;padding:8px 12px}
#agent-profile-form textarea[name="description"]{height:102px;min-height:102px;padding:12px 15px}
#agent-profile-form .agent-media-settings{gap:20px}
#agent-profile-form .personal-media img{height:157px}
#agent-profile-form .dialog-actions{margin-top:-22px}
#agent-profile-form #profile-message:empty{display:none}
@media(max-width:420px){.dialog-body:has(#agent-profile-form){padding:22px 18px}.agent-profile-toprow{gap:12px}.agent-profile-toprow .agent-profile-name{flex:1}.agent-profile-toprow .text-provider-field{flex-basis:106px}.agent-profile-toprow .text-provider-field select{width:106px}}

.agent-usage-panel{margin-top:24px;padding:24px}.agent-usage-scroll{overflow-x:auto}.agent-usage-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.agent-usage-table th,.agent-usage-table td{padding:12px 10px;border-bottom:1px solid var(--border-subtle);white-space:nowrap}.agent-usage-table th{color:var(--neon-cyan)}.agent-usage-table small{display:block;font-size:11px}.agent-usage-panel>small{display:block;margin-top:16px;color:var(--muted);line-height:1.6}.caption-mode-row .caption-quality-field{flex:1;min-width:105px}.caption-mode-row>.field:first-child{min-width:0;flex:1}.caption-more-row{flex-wrap:wrap}

/* Provider choice beside conversation search on the three text tools. */
.workspace-heading .text-provider-field{display:block;flex:0 0 auto;margin:0}
.workspace-heading .text-provider-field select{width:122px;height:42px;padding:8px 12px;font-size:13px}
.workspace-heading>.translator-chat-toolbar,.workspace-heading>.professional-chat-toolbar,.workspace-heading>.caption-chat-toolbar{max-width:620px;flex:0 1 auto}
@media(max-width:700px){.workspace-heading>.translator-chat-toolbar,.workspace-heading>.professional-chat-toolbar,.workspace-heading>.caption-chat-toolbar{flex-wrap:wrap;max-width:100%}.workspace-heading .text-provider-field select{width:110px}}

.cover-brand-settings{border-top:1px solid var(--border,#1d2948);margin-top:24px;padding-top:22px}.cover-brand-settings h3{font-size:16px;margin:0 0 12px}.cover-headline-field{display:block;margin:18px 0}.cover-headline-field>span{display:block;margin-bottom:10px}.cover-headline-field textarea{width:100%;min-height:92px;resize:vertical}.cover-brand-settings .fields{margin-top:14px}.cover-preview-title{font-size:12px;color:var(--muted,#8fa3c5);margin:18px 0 10px}#cover-brand-preview{display:block;width:100%;max-width:270px;height:auto;aspect-ratio:3/4;border-radius:10px;border:1px solid #253455;margin:0 auto 12px}.cover-brand-settings .field-note{display:block;line-height:1.5}

/* Fixed-template cover editor. */
.cover-ai-action{width:100%;margin-top:10px}
.cover-editor-modal{width:min(1140px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 20px);padding:0;overflow:hidden}
.cover-editor-modal[open]{display:flex;flex-direction:column}
.cover-editor-modal .terminal-topbar{flex:none}
.ce-shell{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;overflow:auto;overscroll-behavior:contain}
.ce-workspace{min-width:0;display:flex;flex-direction:column;align-items:center;background:#070c17;padding:18px 24px}
.ce-tools{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ce-layer-tabs,.ce-history{display:flex;gap:6px}.ce-tools button{border:1px solid #25345a;border-radius:9px;background:#10192d;color:#9aaccb;padding:9px 15px;font:inherit;font-size:13px;cursor:pointer}.ce-layer-tabs button.selected{color:#00f2ed;border-color:#00bdce;background:#04222d}.ce-history button{font-size:21px;padding:4px 12px}.ce-tools button:disabled{opacity:.35;cursor:default}
.ce-stage{position:relative;width:min(100%,calc((100dvh - 210px)*.75));aspect-ratio:3/4;flex:none;background:#050508;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;border:1px solid #273653;box-shadow:0 12px 38px #0005;outline:none;isolation:isolate}.ce-stage:active{cursor:grabbing}.ce-stage:focus-visible{outline:2px solid #00dbe7;outline-offset:3px}.ce-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.ce-selection{position:absolute;border:1.5px solid #00f2ed;box-shadow:0 0 0 1px #061726;pointer-events:none;box-sizing:border-box}.ce-selection[hidden]{display:none}.ce-selection button{position:absolute;right:-10px;bottom:-10px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:#00aaba;box-shadow:0 2px 8px #0008;pointer-events:auto;cursor:nwse-resize;touch-action:none;padding:0}
.ce-hint{font-size:12px;line-height:1.5;color:#8a9fbe;text-align:center;margin:13px 0 0;max-width:460px}
.ce-controls{padding:22px;border-left:1px solid #1b2947;min-width:0;overflow:auto;background:#0b1123}.ce-controls h2{font-size:19px;margin:0 0 20px}.ce-controls h3{font-size:14px;margin:0}.ce-controls .field{display:block;margin:12px 0}.ce-controls .field>span{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;color:#b7c6dc}.ce-controls .field textarea{width:100%;min-height:84px;resize:vertical}.ce-controls .field select{width:100%;height:40px;padding:7px 10px;font-size:12px}.ce-controls input[type=range]{width:100%;height:28px;margin:0;accent-color:#00dce8;cursor:pointer}.ce-controls output{color:#00dce8}.ce-control-group{padding:17px 0;border-top:1px solid #1d2947}.ce-control-heading{display:flex;justify-content:space-between;align-items:center}.ce-control-heading .text-button{font-size:11px}.ce-actions,.ce-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ce-actions .button{padding:9px 5px;min-height:36px;font-size:11px}.ce-check{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:#c2cde1;cursor:pointer;margin:8px 0}.ce-check input{accent-color:#00dce8;width:15px;height:15px}.ce-controls small{display:block;font-size:11px;line-height:1.5;color:#8095b8}.ce-save{position:sticky;bottom:-22px;background:#0b1123;padding:12px 0 16px;border-top:1px solid #1d2947;z-index:2}.ce-save .button{width:100%;min-height:46px;justify-content:center}.ce-save>small{text-align:center;margin-top:8px}.ce-status{color:#00dce8;font-size:12px;line-height:1.5;margin:8px 0 0}.ce-status:empty{display:none}
@media(max-width:700px){.cover-editor-modal{width:calc(100vw - 10px);max-height:calc(100dvh - 10px)}.ce-shell{display:block;overflow:auto}.ce-workspace{padding:10px 12px 12px;position:sticky;top:0;z-index:2;border-bottom:1px solid #1d2947}.ce-tools{margin-bottom:9px}.ce-tools button{padding:7px 12px}.ce-stage{width:min(100%,calc((100dvh - 270px)*.75));min-width:165px}.ce-hint{font-size:10px;margin-top:8px}.ce-controls{border-left:0;overflow:visible;padding:16px}.ce-controls h2{font-size:17px}.ce-save{bottom:-16px;padding:12px 0;background:#0b1123}.ce-control-group{padding:12px 0}}

.cover-editor-modal[open]{height:min(900px,calc(100dvh - 20px))}.ce-shell{flex:1;min-height:0;overflow:hidden}.ce-controls{padding:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}.ce-control-scroll{flex:1;min-height:0;overflow:auto;padding:22px;overscroll-behavior:contain}.ce-save{position:static;flex:none;padding:12px 22px 16px}.ce-status{max-height:56px;overflow:auto}
@media(max-width:700px){.cover-editor-modal[open]{height:calc(100dvh - 10px)}.ce-shell{display:flex;flex-direction:column;overflow:hidden}.ce-workspace{position:relative;flex:none;padding:9px 12px 10px;max-height:none}.ce-stage{width:min(100%,calc(42dvh * .75),calc((100dvh - 400px) * .75));min-width:120px}.ce-controls{flex:1;min-height:150px;padding:0;overflow:hidden}.ce-control-scroll{padding:14px 16px}.ce-save{padding:10px 16px 12px}.ce-hint{font-size:10px;margin:7px 0 0}}