/* =========================================================
   MODULE: VIDEO (scoped) — AIVO Studio v2
   Only applies when moduleHost is video.
   ========================================================= */

#moduleHost[data-active-module="video"]{
  padding: 22px 18px;
  box-sizing: border-box;
}

/* Ana kapsayıcı: video.module.js içinde root’a bu class’ı ver */
#moduleHost[data-active-module="video"] .video-view{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* Header */
#moduleHost[data-active-module="video"] .panel-header{
  padding: 6px 6px 2px;
}
#moduleHost[data-active-module="video"] .page-head__title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}
#moduleHost[data-active-module="video"] .page-head__sub{
  margin-top: 4px;
  font-size: 13px;
  opacity: .7;
}

/* Card */
#moduleHost[data-active-module="video"] .card{
  background: rgba(10, 12, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 16px;
  box-sizing: border-box;
}

/* Tabs (Yazıdan / Resimden) */
#moduleHost[data-active-module="video"] .video-tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;
}

#moduleHost[data-active-module="video"] .video-tab{
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.80);
  font-weight: 700;
  cursor: pointer;
}

#moduleHost[data-active-module="video"] .video-tab.is-active{
  background: linear-gradient(90deg, rgba(123,92,255,.95), rgba(255,111,177,.85));
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Form fields */
#moduleHost[data-active-module="video"] .form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 14px;
}

#moduleHost[data-active-module="video"] .form-field.full{
  grid-column: 1 / -1;
}

#moduleHost[data-active-module="video"] label{
  display: block;
  font-size: 12px;
  font-weight: 650;
  opacity: .78;
  margin-bottom: 6px;
}

#moduleHost[data-active-module="video"] input,
#moduleHost[data-active-module="video"] textarea,
#moduleHost[data-active-module="video"] select,
.main-panel[data-module="video"] input,
.main-panel[data-module="video"] textarea,
.main-panel[data-module="video"] select{
  width: 100%;
  background: rgba(7,9,34,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 12px 14px;
  color: rgba(255,255,255,.92);
  box-sizing: border-box;

  font-family: Inter, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#moduleHost[data-active-module="video"] textarea,
.main-panel[data-module="video"] textarea{
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

#moduleHost[data-active-module="video"] input::placeholder,
#moduleHost[data-active-module="video"] textarea::placeholder,
.main-panel[data-module="video"] input::placeholder,
.main-panel[data-module="video"] textarea::placeholder{
  color: rgba(255,255,255,.38);
  font-family: Inter, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

#moduleHost[data-active-module="video"] input::placeholder,
#moduleHost[data-active-module="video"] textarea::placeholder{
  color: rgba(255,255,255,0.45);
}

#moduleHost[data-active-module="video"] input:focus,
#moduleHost[data-active-module="video"] textarea:focus,
#moduleHost[data-active-module="video"] select:focus{
  outline: none;
  border-color: rgba(140,160,255,0.45);
  box-shadow: 0 0 0 1px rgba(140,160,255,0.25);
}

/* Upload box (Resimden Video’da) */
#moduleHost[data-active-module="video"] .upload-box{
  display: block;
  padding: 16px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
}

/* Ses Üretimi toggle kartı */
#moduleHost[data-active-module="video"] .audio-toggle-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
}

#moduleHost[data-active-module="video"] .audio-toggle-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

#moduleHost[data-active-module="video"] .audio-title{
  font-size: 14px;
  font-weight: 800;
}

#moduleHost[data-active-module="video"] .audio-desc{
  font-size: 12px;
  opacity: .65;
  margin-top: 2px;
}

/* Switch */
#moduleHost[data-active-module="video"] .audio-switch{
  position: relative;
  width: 54px;
  height: 30px;
}
#moduleHost[data-active-module="video"] .audio-switch input{
  display: none;
}
#moduleHost[data-active-module="video"] .audio-slider{
  position: absolute;
  inset: 0;
  background: #2a2f3a;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease;
}
#moduleHost[data-active-module="video"] .audio-slider::before{
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 4px;
  top: 4px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s ease;
}
#moduleHost[data-active-module="video"] .audio-switch input:checked + .audio-slider{
  background: linear-gradient(135deg, #5ddcff, #6c5ce7);
}
#moduleHost[data-active-module="video"] .audio-switch input:checked + .audio-slider::before{
  transform: translateX(24px);
}

/* Generate button */
#moduleHost[data-active-module="video"] .video-generate{
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, rgba(123,92,255,.95), rgba(255,111,177,.85));
  box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

#moduleHost[data-active-module="video"] .video-generate:disabled{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(.8);
}

/* Responsive */
@media (max-width: 860px){
  #moduleHost[data-active-module="video"] .form-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   VIDEO — V2 PANEL (Music pattern)  ✅ add to END of mod.video.css
   Scopes to: #moduleHost [data-module="video"]
   ========================================================= */

#moduleHost [data-module="video"]{
  width:100%;
  box-sizing:border-box;
  padding: 28px 24px;
  display:flex;
  justify-content:center;
}

#moduleHost [data-module="video"] .video-view{
  width:100%;
  max-width: 920px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Card */
#moduleHost [data-module="video"] .card{
  width:100%;
  box-sizing:border-box;
  background: rgba(10, 12, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 18px;
}

/* Header */
#moduleHost [data-module="video"] .panel-header{
  padding: 12px 6px 6px;
}
#moduleHost [data-module="video"] .page-head__title{
  font-size: 26px;
  font-weight: 700;
}
#moduleHost [data-module="video"] .page-head__sub{
  opacity: .75;
  margin-top: 4px;
}

/* Form grid */
#moduleHost [data-module="video"] .form-grid{
  width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px 16px;
}
#moduleHost [data-module="video"] .form-field.full{ grid-column: 1 / -1; }

/* Inputs */
#moduleHost [data-module="video"] input,
#moduleHost [data-module="video"] textarea,
#moduleHost [data-module="video"] select{
  width:100%;
  box-sizing:border-box;
  background: rgba(7,9,34,0.75);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  padding:10px 12px;
  color:#fff;
  font-size:14px;
}

#moduleHost [data-module="video"] textarea{
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

#moduleHost [data-module="video"] input:focus,
#moduleHost [data-module="video"] textarea:focus,
#moduleHost [data-module="video"] select:focus{
  outline:none;
  border-color:rgba(140,160,255,0.45);
  box-shadow:0 0 0 1px rgba(140,160,255,0.25);
}

/* Tabs = Music pill style */
#moduleHost [data-module="video"] .video-tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

#moduleHost [data-module="video"] .video-tab{
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.80);
  font-weight: 800;
  cursor:pointer;
}
#moduleHost [data-module="video"] .video-tab.is-active{
  background: linear-gradient(90deg, #7b5cff, #ff6fb1);
  color:#fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
}

/* Upload box */
#moduleHost [data-module="video"] .upload-box{
  display:block;
  padding:18px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius:14px;
  text-align:center;
  cursor:pointer;
  background: rgba(255,255,255,0.03);
}

/* Audio toggle — reuse Music exact look */
#moduleHost [data-module="video"] .audio-toggle-card{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
}

/* Generate button — map your HTML classes */
#moduleHost [data-module="video"] .primary-btn.big-video-btn{
  width:100%;
  height: 56px;
  border-radius: 16px;
  border:0;
  cursor:pointer;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(90deg, #7b5cff, #ff6fb1);
  box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
}
#moduleHost [data-module="video"] .primary-btn.big-video-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.8);
}

/* Responsive */
@media (max-width: 860px){
  #moduleHost [data-module="video"]{ padding: 18px 14px; }
  #moduleHost [data-module="video"] .form-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   VIDEO — OVERRIDES (EN ALTA EKLE)
   Works with both:
   - #moduleHost[data-active-module="video"] (v2)
   - .main-panel[data-module="video"] (legacy html)
   ========================================================= */

#moduleHost[data-active-module="video"],
.main-panel[data-module="video"]{
  box-sizing: border-box;
  padding: 22px 18px;
}

/* root width/center */
#moduleHost[data-active-module="video"] .video-view,
.main-panel[data-module="video"] .video-view{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

/* cards */
#moduleHost[data-active-module="video"] .card,
.main-panel[data-module="video"] .card{
  background: rgba(10, 12, 30, 0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 16px;
  box-sizing: border-box;
}

/* header */
#moduleHost[data-active-module="video"] .panel-header,
.main-panel[data-module="video"] .panel-header{ padding: 6px 6px 2px; }

#moduleHost[data-active-module="video"] .page-head__title,
.main-panel[data-module="video"] .page-head__title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}

#moduleHost[data-active-module="video"] .page-head__sub,
.main-panel[data-module="video"] .page-head__sub{
  margin-top: 4px;
  font-size: 13px;
  opacity: .7;
}

/* form grid */
#moduleHost[data-active-module="video"] .form-grid,
.main-panel[data-module="video"] .form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 14px;
}
#moduleHost[data-active-module="video"] .form-field.full,
.main-panel[data-module="video"] .form-field.full{ grid-column: 1 / -1; }

#moduleHost[data-active-module="video"] label,
.main-panel[data-module="video"] label{
  display:block;
  font-size:12px;
  font-weight:650;
  opacity:.78;
  margin-bottom:6px;
}

#moduleHost[data-active-module="video"] input,
#moduleHost[data-active-module="video"] textarea,
#moduleHost[data-active-module="video"] select,
.main-panel[data-module="video"] input,
.main-panel[data-module="video"] textarea,
.main-panel[data-module="video"] select{
  width: 100%;
  background: rgba(7,9,34,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

#moduleHost[data-active-module="video"] textarea,
.main-panel[data-module="video"] textarea{
  min-height: 120px;
  resize: vertical;
  line-height: 1.45;
}

#moduleHost[data-active-module="video"] input:focus,
#moduleHost[data-active-module="video"] textarea:focus,
#moduleHost[data-active-module="video"] select:focus,
.main-panel[data-module="video"] input:focus,
.main-panel[data-module="video"] textarea:focus,
.main-panel[data-module="video"] select:focus{
  outline: none;
  border-color: rgba(140,160,255,0.45);
  box-shadow: 0 0 0 1px rgba(140,160,255,0.25);
}

/* audio toggle card */
#moduleHost[data-active-module="video"] .audio-toggle-card,
.main-panel[data-module="video"] .audio-toggle-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  box-sizing: border-box;
}

/* tabs */
#moduleHost[data-active-module="video"] .video-tabs,
.main-panel[data-module="video"] .video-tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;
}

#moduleHost[data-active-module="video"] .video-tab,
.main-panel[data-module="video"] .video-tab{
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.80);
  font-weight: 800;
  cursor: pointer;
}

#moduleHost[data-active-module="video"] .video-tab.is-active,
.main-panel[data-module="video"] .video-tab.is-active{
  background: linear-gradient(90deg, rgba(123,92,255,.95), rgba(255,111,177,.85));
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}

/* upload box (image->video) */
#moduleHost[data-active-module="video"] .upload-box,
.main-panel[data-module="video"] .upload-box{
  display:block;
  padding: 16px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 14px;
  text-align:center;
  cursor:pointer;
  background: rgba(255,255,255,0.03);
  box-sizing: border-box;
}

/* BUTTON: your HTML uses .primary-btn.big-video-btn */
#moduleHost[data-active-module="video"] .primary-btn.big-video-btn,
.main-panel[data-module="video"] .primary-btn.big-video-btn{
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, rgba(123,92,255,.95), rgba(255,111,177,.85));
  box-shadow: 0 18px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
  animation: cta-breathe 3.5s ease-in-out infinite;
}

#moduleHost[data-active-module="video"] .primary-btn.big-video-btn::after,
.main-panel[data-module="video"] .primary-btn.big-video-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25), transparent 70%);
  opacity:0;
  transform: translateX(-100%);
}

#moduleHost[data-active-module="video"] .primary-btn.big-video-btn:hover::after,
.main-panel[data-module="video"] .primary-btn.big-video-btn:hover::after{
  opacity:1;
  transform: translateX(100%);
  transition: transform 0.6s ease, opacity 0.2s ease;
}

#moduleHost[data-active-module="video"] .primary-btn.big-video-btn:hover,
.main-panel[data-module="video"] .primary-btn.big-video-btn:hover{
  transform: translateY(-1px);
}

@keyframes cta-breathe{
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: 0 12px 35px rgba(140, 160, 255, 0.35); }
  100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* responsive */
@media (max-width: 860px){
  #moduleHost[data-active-module="video"] .form-grid,
  .main-panel[data-module="video"] .form-grid{
    grid-template-columns: 1fr;
  }
  #moduleHost[data-active-module="video"],
  .main-panel[data-module="video"]{
    padding: 18px 14px;
  }
}
/* ===============================
   VIDEO — VISIBILITY FIX (en sona)
   =============================== */

/* subview'lar default gizli */
#moduleHost[data-active-module="video"] .video-subview{
  display: none;
}

/* aktif olan göster */
#moduleHost[data-active-module="video"] .video-subview.is-active{
  display: block;
}

/* (opsiyonel) root görünürlük: ileride view switch olursa */
#moduleHost[data-active-module="video"] .video-view{
  display: none;
}
#moduleHost[data-active-module="video"] .video-view.is-active{
  display: flex;
}

/* küçük temizlik: kart araları sabit kalsın */
#moduleHost[data-active-module="video"] .video-subview .card{
  margin-top: 0;
}
/* ===============================
   VIDEO — subview visibility FIX
   (dosyanın en altına ekle)
   =============================== */

#moduleHost section[data-module="video"] .video-subview{
  display: none;
}

#moduleHost section[data-module="video"] .video-subview.is-active{
  display: block;
}

/* tab aktif görünüm (garanti) */
#moduleHost section[data-module="video"] .video-tab{
  opacity: .8;
}

#moduleHost section[data-module="video"] .video-tab.is-active{
  opacity: 1;
}

/* =========================================================
   VIDEO – CARD HEADER + META (fix taşmalar)
   mod.video.css EN SONUNA EKLE
   ========================================================= */

#moduleHost[data-active-module="video"] .card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#moduleHost[data-active-module="video"] .card-title{
  font-size:18px;
  font-weight:800;
  line-height:1.15;
}

#moduleHost[data-active-module="video"] .card-subtitle{
  margin-top:6px;
  font-size:13px;
  opacity:.7;
}

#moduleHost[data-active-module="video"] .badge-beta{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
}

/* “Örn: ...” satırını kutu içi, daha sakin göster */
#moduleHost[data-active-module="video"] .video-prompt-tip{
  font-size:13px;
  opacity:.72;
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Counter’ı sağa al, kutu dışına taşmasın */
#moduleHost[data-active-module="video"] .video-prompt-counter{
  margin-top:8px;
  font-size:12px;
  opacity:.7;
  text-align:right;
}

/* Generate button spacing (music gibi) */
#moduleHost[data-active-module="video"] .primary-btn.big-video-btn{
  margin-top:12px;
}
/* =========================================================
   VIDEO – UI polish (MUSIC style)
   En alta koy: override
   ========================================================= */

#moduleHost[data-active-module="video"] section[data-module="video"] .video-tabs{
  padding: 10px;
  border-radius: 999px;
}

#moduleHost[data-active-module="video"] section[data-module="video"] .video-tab{
  font-size: 15px;           /* biraz büyüt */
  font-weight: 700;
  letter-spacing: .2px;
  height: 54px;              /* pill daha tok */
}

#moduleHost[data-active-module="video"] section[data-module="video"] .video-tab.is-active{
  font-size: 15px;
  font-weight: 800;
}

/* Card header tipografi (Video Açıklaması / Resim Yükle) */
#moduleHost[data-active-module="video"] section[data-module="video"] .card-title{
  font-size: 18px;
  font-weight: 700;
}
#moduleHost[data-active-module="video"] section[data-module="video"] .card-subtitle{
  font-size: 13px;
  opacity: .78;
}

/* Prompt tip satırı (Örn: ...) kart içinde daha düzenli */
#moduleHost[data-active-module="video"] section[data-module="video"] .video-prompt-tip{
  font-size: 13px;
  opacity: .75;
  margin-bottom: 10px;
  line-height: 1.45;
}

/* Counter sağ alt gibi dursun */
#moduleHost[data-active-module="video"] section[data-module="video"] .video-prompt-counter{
  font-size: 13px;
  opacity: .8;
}

/* BIG BUTTON — Music Generate vibe */
#moduleHost[data-active-module="video"] section[data-module="video"] .big-video-btn{
  height: 72px;              /* bir tık daha büyüt */
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
}

/* Buton içindeki emoji/ikon daha dengeli */
#moduleHost[data-active-module="video"] section[data-module="video"] .big-video-btn::first-letter{
  letter-spacing: 0;
}

/* Buton kart içinde “tek parça” görünüm */
#moduleHost[data-active-module="video"] section[data-module="video"] .card .big-video-btn.full-width{
  width: 100%;
  margin-top: 10px;
}

.videoSideTitle { font-weight: 800; font-size: 18px; }
.videoSideSubtitle { opacity: .75; font-size: 13px; margin: 6px 0 10px; }

.videoPlayerCard{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.videoPlayerLabel{ opacity:.7; font-size:12px; margin-bottom:8px; }
.videoPlayer{
  width: 100%;
  border-radius: 12px;
  background: #000;
  aspect-ratio: 16/9;
}
.videoSideTitle { font-weight: 800; font-size: 18px; }
.videoSideSubtitle { opacity: .75; font-size: 13px; margin: 6px 0 10px; }

.videoPlayerCard{
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.videoPlayerLabel{ opacity:.7; font-size:12px; margin-bottom:8px; }
.videoPlayer{
  width: 100%;
  border-radius: 12px;
  background: #000;
  aspect-ratio: 16/9;
}

.videoGridTitle{ font-weight: 800; font-size: 14px; opacity: .9; margin: 10px 0 8px; }
.videoGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mp4Card{
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.mp4Thumb{ border-radius: 12px; overflow: hidden; background:#000; }
.mp4Video{
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  background:#000;
}

.mp4Actions{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.mp4Btn{
  flex: 1;
  height: 36px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.mp4Btn:hover{ background: rgba(255,255,255,0.09); }
.mp4Btn.danger{
  border-color: rgba(255,80,80,0.25);
  background: rgba(255,80,80,0.10);
}

.mp4Empty{
  opacity:.65;
  font-size: 13px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.10);
}

.videoFootNote{ margin-top: 12px; opacity:.55; font-size: 12px; }

/* =========================================================
   VIDEO MODULE – IMAGE UPLOAD UX (AIVO Gradient Version)
   ========================================================= */

.upload-box--file {
  position: relative;
}

#videoImageInput{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  pointer-events: auto;
}

/* Feedback alanı */
.upload-feedback{
  margin-top: 12px;
  text-align: left;
}

/* Dosya adı */
.upload-filename{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 8px;
  opacity: .92;
  word-break: break-word;
}

/* Progress bar arka plan */
.upload-bar{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

/* === MOR / PEMBE DOLAN ÇİZGİ === */
.upload-bar__fill{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7b5cff, #ff6fb1);
  box-shadow: 0 0 12px rgba(123,92,255,.55);
  transition: width .18s ease;
}

/* Yüzde */
.upload-percent{
  margin-top: 8px;
  font-size: 12px;
  opacity: .8;
}

/* %100 olunca küçük başarı efekti */
.upload-percent[data-done="1"]{
  color: #7bffb0;
  font-weight: 800;
}

.upload-percent[data-done="1"]::after{
  content: "  ✓";
  margin-left: 6px;
}
/* Video Generate Button Loading Spinner */
#videoGenerateTextBtn.is-loading,
#videoGenerateImageBtn.is-loading {
  position: relative;
  opacity: 0.75;
  transform: translateY(1px);
  pointer-events: none;
}

/* küçük spinner */
#videoGenerateTextBtn.is-loading::after,
#videoGenerateImageBtn.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: aivoSpin 0.8s linear infinite;
  vertical-align: -2px;
}

@keyframes aivoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.upload-fileline{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:5;
  pointer-events:auto;
}

.upload-filename{
  display:flex;
  align-items:center;
  min-width:0;
  line-height:1.2;
}

#videoImageClearBtn{
  display:none;
  flex:0 0 auto;
  width:34px;
  height:34px;
  margin:0;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  position:relative;
  z-index:6;
  pointer-events:auto;
  align-self:center;
  transform:translateY(0);
}
#moduleHost[data-active-module="video"] .audio-icon,
.main-panel[data-module="video"] .audio-icon{
  font-size: 24px;
  line-height: 1;
  color: rgba(255,255,255,0.58);
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease, filter .25s ease;
}

/* Ses açıkken ikon renklensin */
#moduleHost[data-active-module="video"] .audio-toggle-card:has(#audioEnabled:checked) .audio-icon,
.main-panel[data-module="video"] .audio-toggle-card:has(#audioEnabled:checked) .audio-icon{
  color: #7b5cff;
  text-shadow: 0 0 14px rgba(123,92,255,.45);
  filter: drop-shadow(0 0 10px rgba(255,111,177,.28));
  transform: scale(1.06);
}
#moduleHost[data-active-module="video"] .audio-toggle-right,
.main-panel[data-module="video"] .audio-toggle-right{
  display: flex;
  align-items: center;
  gap: 12px;
}

#moduleHost[data-active-module="video"] .audio-credit-badge,
.main-panel[data-module="video"] .audio-credit-badge{
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  opacity: .92;
}
/* ===== FINAL OVERRIDE — VIDEO HEADER SHRINK ===== */
#moduleHost[data-active-module="video"] .panel-header,
.main-panel[data-module="video"] .panel-header{
  margin-bottom: 8px !important;
  padding: 4px 4px 0 !important;
}

#moduleHost[data-active-module="video"] .page-head,
.main-panel[data-module="video"] .page-head{
  padding: 6px !important;
  border-radius: 18px !important;
}

#moduleHost[data-active-module="video"] .page-head__box,
.main-panel[data-module="video"] .page-head__box{
  padding: 16px 18px !important;
  border-radius: 16px !important;
  min-height: 0 !important;
}

#moduleHost[data-active-module="video"] .page-head__title,
.main-panel[data-module="video"] .page-head__title{
  margin: 0 0 4px 0 !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
}

#moduleHost[data-active-module="video"] .page-head__sub,
.main-panel[data-module="video"] .page-head__sub{
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}