: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: var(--topbar-h);
  height: calc(100vh - var(--topbar-h) - var(--gap));
  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){
  #twoPanelWrap{
    grid-template-columns: 1fr; /* küçük ekranda alt alta */
    height: auto;
  }

  #mainWorkspace{
    overflow: auto;
    height: auto;
  }

  #moduleHost,
  .outputsCard{
    height: auto;
    max-height: none;
  }
}
:root{
  /* araları 1–2 cm aç (18px -> 26px civarı) */
  --gap: 26px;

  /* motor biraz daha büyüsün */
  --motor-w: 1.25fr;
  --outputs-w: 1.15fr;
}

/* 2 panel arası boşluk + oran */
#twoPanelWrap{
  gap: var(--gap) !important;
  grid-template-columns: minmax(560px, var(--motor-w)) minmax(560px, var(--outputs-w)) !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; /* sende zaten var */
  --gap: 18px;      /* sende zaten var */
}

/* 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;
}