:root{
  --topbar-h: 72px;

  --gap: 18px;

  --left-w: 280px;

  /* senin çizime göre: sağ outputs daha geniş */
  --motor-w: 1.05fr;
  --outputs-w: 1.35fr;

  --radius: 22px;
}

/* reset-ish */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: #070815;
  color: rgba(255,255,255,.92);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== TOPBAR ===== */
#topbarMount.aivo-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;
  backdrop-filter: blur(10px);
  background: rgba(10,12,24,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ===== SHELL: sol menü + orta alan ===== */
#studioRoot.studioShell{
  padding-top: var(--topbar-h);

  height: 100vh;
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, 1fr);
  gap: var(--gap);

  padding-left: var(--gap);
  padding-right: var(--gap);
  padding-bottom: var(--gap);
}

/* ===== SOL MENÜ ===== */
#leftMenu.studioNav{
  position: sticky;
  top: calc(var(--topbar-h) + 36px);
  height: calc(100vh - var(--topbar-h) - 36px - 18px);
  overflow: auto;

  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

/* menü kartları (varsa) */
#leftMenu .navCard{
  padding: 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 12px;
}

#leftMenu .navTitle{
  opacity: .8;
  font-weight: 700;
  margin-bottom: 10px;
}

#leftMenu .navBtn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);

  padding: 12px 12px;
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 10px;
}

#leftMenu .navBtn:hover{
  background: rgba(255,255,255,.06);
}

#leftMenu .navBtn.ghost{
  background: rgba(255,255,255,.02);
}

#leftMenu .navBtn.danger{
  border-color: rgba(255,80,80,.35);
}

/* ===== ORTA ALAN (2 PANEL YAN YANA) ===== */
#mainWorkspace{
  min-width: 0;
  position: relative;

  /* burada scroll olmayacak; scroll panellerin içinde olacak */
  height: calc(100vh - var(--topbar-h) - var(--gap));
  overflow: hidden;
}

#mainWorkspace .panelTitle{
  padding: 6px 4px 12px 4px;
  opacity: .85;
}

/* Asıl ikili alan */
#twoPanelWrap{
  height: calc(100% - 40px); /* panelTitle payı */
  display: grid;
  grid-template-columns: minmax(520px, var(--motor-w)) minmax(560px, var(--outputs-w));
  gap: var(--gap);
  align-items: stretch;
  min-width: 0;
}

/* ===== MOTOR PANEL (SOL) ===== */
#moduleHost{
  height: 100%;
  min-height: 0;
  overflow: auto;

  border-radius: var(--radius);
  padding: 18px;

  /* senin mor kart hissi */
  background: radial-gradient(1200px 800px at 30% 0%,
    rgba(140,80,255,.35),
    rgba(70,50,140,.25),
    rgba(20,18,40,.35)
  );

  border: 1px solid rgba(255,255,255,.07);
}

/* ===== OUTPUTS PANEL (SAĞ - DAHA GENİŞ & İÇİ SCROLL) ===== */
.outputsCard{
  height: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;

  border-radius: var(--radius);
  padding: 16px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

/* outputs header sabit */
.outputsCard .outputsHeader{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 12px;
}

/* rightPanelHost = LISTE/İÇERİK alanı: tüm kalan alan + scroll */
#rightPanelHost{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;

  padding-right: 6px; /* scroll bar payı */
}

/* footer varsa altta sabit */
.outputsCard .panelFooter{
  flex: 0 0 auto;
  margin-top: 12px;
  opacity: .75;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px){
  #studioRoot.studioShell{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

#mainWorkspace{
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}

  #twoPanelWrap{
    height: calc(100% - 40px) !important;
    min-width: 1160px !important;
    grid-template-columns: minmax(680px, 1.14fr) minmax(420px, 0.86fr) !important;
    gap: var(--gap) !important;
  }

  #moduleHost{
    min-width: 680px !important;
    height: 100% !important;
    max-height: none !important;
  }

  .outputsCard{
    min-width: 420px !important;
    height: 100% !important;
    max-height: none !important;
  }
}
:root{
  --gap: 26px;
  --motor-w: 1.48fr;
  --outputs-w: 0.92fr;
}
/* 2 panel arası boşluk + oran */
#twoPanelWrap{
  gap: var(--gap) !important;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
}
/* outputs paneli daha şeffaf + glow */
.outputsCard{
  background: rgba(255,255,255,.025) !important;      /* daha şeffaf */
  border: 1px solid rgba(255,255,255,.055) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.03) inset;
  position: relative;
  overflow: hidden; /* glow taşmasın */
}

/* altından ışık püskürtme */
.outputsCard::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -140px;
  width: 120%;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(160,120,255,.40),
    rgba(120,80,255,.18),
    rgba(0,0,0,0)
  );
  filter: blur(18px);
  pointer-events: none;
}

/* kenarlardan hafif ışık (EITA hissi) */
.outputsCard::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(800px 240px at 10% 20%, rgba(170,120,255,.18), transparent 60%),
    radial-gradient(800px 240px at 90% 35%, rgba(120,180,255,.12), transparent 60%);
  pointer-events:none;
  opacity: .9;
}

/* sağ panel iç padding biraz artsın */
.outputsCard{
  padding: 18px !important;
}

/* motor paneli biraz daha “büyük kutu” hissi */
#moduleHost{
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
}
/* ==========================================
   ONLY FIX: Sol menü (leftMenu) gömülü sabit kalsın
   - FIXED değil -> STICKY
   - Layout'a gömülü (taşma/basma yok)
   - Menü uzarsa kendi içinde scroll
   ========================================== */

/* topbar fixed olduğu için menünün top offset'i topbar yüksekliği */
:root{
  --topbar-h: 72px;
}

/* Sol menü: kolon içinde sabitlenir */
#leftMenu.studioNav{
  position: sticky;
  top: calc(var(--topbar-h) + var(--gap)); /* topbar + üst boşluk */
  height: calc(100vh - (var(--topbar-h) + (var(--gap) * 2))); /* alt/üst gap payı */
  overflow: auto;

  /* mevcut tasarımın korunması için dokunmuyorum:
     padding/radius/background/border zaten yukarıdaki bloğunda var */
}

/* Sticky çalışsın diye parent'larda "overflow: hidden/auto" olmamalı.
   Senin dosyada #studioRoot overflow yok, iyi.
   Ama yanlışlıkla eklediysen kapat: */
#studioRoot.studioShell{
  overflow: visible; /* sticky'nin çalışmasını garanti eder */
}

/* mainWorkspace içinde overflow hidden kalsın sorun değil (sağ taraf).
   Sticky'yi bozan genelde leftMenu'nün parent'ında overflow'dur. */
#leftMenu.studioNav{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* navCard'lar üstte kalsın */
#leftMenu .navCard{ flex: 0 0 auto; }

/* alttaki info alanı en alta “itilir” */
#leftMenu .navInfo{
  margin-top: auto;              /* boşluğu buraya verir */
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  min-height: 120px;
}

#leftMenu .navInfoTitle{ font-weight: 800; opacity:.9; margin-bottom: 8px; }
#leftMenu .navInfoBody{ opacity:.75; font-size: 13px; line-height: 1.35; }

/* ===== SOL MENÜYÜ GRID'E ÇEVİR ===== */
#leftMenu.studioNav{
  display: grid;
  grid-template-rows:
    auto      /* AI Üret */
    auto      /* Paneller */
    1fr       /* boş / nefes alanı */
    160px;    /* İPUÇLARI — SABİT */

  gap: 16px;
  overflow: hidden; /* dış taşma yok */
}

/* Menü kartları scroll alabilir */
#leftMenu .navCard{
  overflow: hidden;
}

/* === GLOBAL PRIMARY BUTTON === */
button.aivoBtnPrimary {
  appearance: none;
  border: none;
  background: linear-gradient(90deg, #7b6cff, #f08acb) !important;
  color: #fff !important;

  padding: 14px 36px;
  border-radius: 999px;

  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
}
/* GLOBAL PRIMARY BUTTON (ALL MODULES) */
button.aivoBtnPrimary{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:18px 22px;
  border-radius:999px;

  color:#fff !important;
  font-weight:800;
  font-size:20px;
  letter-spacing:.2px;

  background: linear-gradient(90deg, #7b5cff, #ff6fb1) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  text-decoration:none;
}

button.aivoBtnPrimary:hover{
  filter: brightness(1.06);
}

button.aivoBtnPrimary:active{
  transform: translateY(1px);
}

button.primary-btn.aivoBtnPrimary{
  background: linear-gradient(90deg, #7b5cff, #ff6fb1) !important;
  color:#fff !important;
}
/* MODULE HOST — inner root full stretch */
#moduleHost > * {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#moduleHost > * > * {
  max-width: none !important;
}
/* ===== LEFT MENU FINAL ALIGN FIX ===== */
#leftMenu.studioNav{
  position: sticky !important;
  top: calc(var(--topbar-h) + 52px) !important;
  height: calc(100vh - var(--topbar-h) - 52px - 18px) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  align-self: start !important;
  overflow: hidden !important;
  padding: 10px !important;
}
#leftMenu .navScroll{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;

  padding-top: 28px !important;
  padding-bottom: 20px !important;
}

#leftMenu .navScroll .navCard:first-child{
  margin-top: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 12px !important;
}

#leftMenu .navScroll .navCard:last-child{
  margin-top: 32px !important;
  padding-top: 12px !important;
  padding-bottom: 18px !important;
}

#leftMenu .navInfo{
  display: block !important;
  position: relative !important;
  margin-top: 18px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid transparent !important;
  min-height: auto !important;
  overflow: hidden !important;
}

#leftMenu .navInfo::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(
    135deg,
    rgba(173,87,255,.95),
    rgba(244,89,181,.85) 55%,
    rgba(0,208,255,.95)
  ) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
}

#leftMenu .navInfoTitle{
  font-weight: 800 !important;
  opacity: .92 !important;
  margin-bottom: 8px !important;
}

#leftMenu .navInfoBody{
  opacity: .78 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
/* ===== TOPBAR FINAL FLUSH FIX ===== */
header#top.aivo-topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  transform: none !important;

  padding-top: 0 !important;
  height: var(--topbar-h) !important;

  z-index: 999999 !important;
}

header#top.aivo-topbar .aivo-topbar-inner{
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
}
/* ===== SHELL TOP OFFSET RESTORE ===== */
#studioRoot.studioShell{
  padding-top: calc(var(--topbar-h) + 18px) !important;
}
/* ===== MODULE HOST PREMIUM TONE FIX ===== */
#moduleHost{
  background:
    radial-gradient(120% 95% at 50% 0%,
      rgba(182, 150, 255, .30) 0%,
      rgba(146, 108, 255, .22) 18%,
      rgba(98, 70, 184, .18) 34%,
      rgba(42, 30, 68, .30) 52%,
      rgba(18, 16, 34, .96) 76%,
      rgba(12, 12, 24, .99) 100%) !important;
  border: 1px solid rgba(164, 132, 255, .20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 110px rgba(156,118,255,.12),
    0 30px 80px rgba(0,0,0,.46) !important;
}