/* ── Video Stüdyosu ─────────────────────────────────────────
   Sayfa, tryon.css'teki paylaşılan stüdyo iskeletini (hero,
   workspace, stage, credit dock) kullanır. Buradaki kurallar
   yalnızca video stüdyosuna özgü olanlardır. */

.video-studio-view {
  padding-top: 24px;
  animation: tryonPageIn .42s ease both;
}

/* ── Önizleme sahnesi ──────────────────────────────────── */

.video-studio-preview {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 18px;
}

.video-studio-preview img {
  max-width: 100%;
  max-height: 520px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #11131a;
  box-shadow: var(--shadow-soft);
  object-fit: contain;
}

.video-studio-preview button {
  position: absolute;
  top: 14px;
  right: 14px;
  backdrop-filter: blur(14px);
}

/* Üretim sırasında sahnede dönen ürün silueti */
.video-studio-spin-figure {
  position: relative;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, .32);
  border-radius: 20px;
  background: rgba(56, 189, 248, .06);
}

.video-studio-spin-figure::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px dashed rgba(167, 139, 250, .42);
  border-radius: 26px;
  animation: videoStudioSpin 3.4s linear infinite;
}

.video-studio-spin-figure span {
  width: 36px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(167, 139, 250, .85), rgba(56, 189, 248, .6));
  box-shadow: 0 10px 26px rgba(124, 140, 255, .35);
  animation: videoStudioTilt 2.6s ease-in-out infinite;
}

@keyframes videoStudioSpin {
  to { transform: rotate(360deg); }
}

@keyframes videoStudioTilt {
  0%, 100% { transform: perspective(320px) rotateY(-26deg); }
  50% { transform: perspective(320px) rotateY(26deg); }
}

/* ── Video türü kartları ───────────────────────────────── */

.video-preset-tabs {
  display: grid;
  /* Pazaryeri / Reklam / Sosyal / Detay / Özel */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .022);
}

.video-preset-tabs button {
  border: 0;
  border-radius: 8px;
  padding: 6px 4px;
  background: transparent;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.video-preset-tabs button:hover { color: var(--text); }

.video-preset-tabs button.active {
  background: rgba(56, 189, 248, .12);
  color: var(--accent-2);
}

.video-preset-list {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

/* .video-preset-card kendi display degerini tasidigi icin tarayicinin
   [hidden] { display: none } varsayilanini eziyor; kategori filtresinin
   calismasi icin kurali burada acikca geri koyuyoruz. */
.video-preset-card[hidden] { display: none; }

.video-preset-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 10px;
  background: rgba(255, 255, 255, .022);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.video-preset-card:hover {
  border-color: rgba(125, 211, 252, .3);
  background: rgba(56, 189, 248, .05);
}

.video-preset-card.active {
  border-color: rgba(125, 211, 252, .55);
  background: rgba(56, 189, 248, .08);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .22);
}

.video-preset-card i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, .26);
  border-radius: 10px;
  background: rgba(167, 139, 250, .1);
  color: var(--accent-2);
  font-size: 14px;
  font-style: normal;
}

.video-preset-card strong,
.video-preset-card small,
.video-preset-card em { display: block; min-width: 0; }
.video-preset-card strong { color: var(--text); font-size: 10px; }
.video-preset-card small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.video-preset-card em {
  margin-top: 4px;
  color: var(--accent-2);
  font-size: 7px;
  font-style: normal;
  letter-spacing: .02em;
  opacity: .78;
}

.video-preset-card b {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: transparent;
  font-size: 8px;
}

.video-preset-card.active b {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06070b;
}

/* ── Çalışmalarımdan seçme ─────────────────────────────── */

.video-library-note {
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.video-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.video-library-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 0;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.video-source-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0;
  background: #11131a;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.video-source-card:hover { border-color: rgba(125, 211, 252, .38); }

.video-source-card.active {
  border-color: rgba(125, 211, 252, .62);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .28);
}

.video-source-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-source-card span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px 5px 4px;
  color: #e2e8f0;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 11, .88));
  font-size: 6px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sonuç paneli ──────────────────────────────────────── */

.video-studio-player-frame {
  position: relative;
  display: grid;
  margin-top: 12px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 140, 255, .12), transparent 46%),
    linear-gradient(180deg, rgba(19, 21, 30, .9), rgba(8, 9, 14, .95));
}

.video-studio-player-frame video {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  background: #11131a;
  display: block;
}

.video-studio-status {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.video-studio-status.error { color: var(--danger); }
.video-studio-status.success { color: #6ee7b7; }

/* ── Geçmiş öğeleri ────────────────────────────────────── */

.video-history-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 7px;
  background: rgba(255, 255, 255, .02);
}

.video-history-item img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #11131a;
  object-fit: cover;
}

.video-history-item div { min-width: 0; }
.video-history-item strong,
.video-history-item small,
.video-history-item a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-history-item strong { color: var(--text); font-size: 9px; }
.video-history-item small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.video-history-item a { margin-top: 3px; color: var(--accent-2); font-size: 7px; font-weight: 700; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 1180px) {
  .video-studio-preview img { max-height: 420px; }
}

/* Özel açıklama paneli — hazır preset kartlarının yerine geçer */
.video-custom-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.video-custom-panel textarea {
  width: 100%;
  min-height: 88px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, .022);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
}

.video-custom-panel textarea::placeholder { color: var(--muted); }

.video-custom-panel textarea:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

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

.video-custom-meta span {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.video-custom-meta button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 11px;
}

.video-custom-meta button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.video-custom-switch small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.video-custom-note {
  margin: 0;
  border-left: 2px solid var(--accent-2);
  padding-left: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .video-studio-view { padding-top: 14px; }
  .video-studio-preview img { max-height: 320px; }
  .video-studio-player-frame video { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .video-studio-view { animation: none; }
  .video-studio-spin-figure::before,
  .video-studio-spin-figure span { animation: none; }
}