/* ================================
   studiov2 duvar kenarları (FIX)
   - Bu sayfadaki gerçek kart sınıflarını da kapsar
   - İç yüzeyi BOYAMAZ: background-clip border-box tekniği
   ================================ */

 /* ====== EDGE / STROKE (2. resimdeki gibi) ====== */
:root{
  --stroke-a: #8b5cf6;   /* mor */
  --stroke-b: #ec4899;   /* pembe */
  --stroke-c: #22d3ee;   /* cyan (istersen sil) */

  --card-bg: rgba(10, 12, 22, .72);   /* iç renk (same) */
  --card-radius: 26px;
  --stroke-w: 1.5px;
}

/* Ortak kart davranışı */
.glassCard,
.outputsCard,
.navCard{
  position: relative;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: var(--stroke-w) solid rgba(255,255,255,.06); /* fallback */
  overflow: hidden;
}

/* Gradient “stroke” (sadece kenar) */
.glassCard::before,
.outputsCard::before,
.navCard::before{
  content:"";
  position:absolute;
  inset:0;
  padding: var(--stroke-w);
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--stroke-a),
    var(--stroke-b),
    var(--stroke-c)
  );

  /* sadece border kalsın diye maskele */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: .55; /* çizgi şiddeti */
  pointer-events:none;
}

/* Glow (kenarlardan ışık püskürtme) */
.glassCard::after,
.outputsCard::after,
.navCard::after{
  content:"";
  position:absolute;
  inset:-18px;                 /* glow dışarı taşsın */
  border-radius: inherit;
  background: radial-gradient(60% 50% at 50% 0%,
      rgba(139,92,246,.22),
      rgba(236,72,153,.14),
      transparent 70%
    ),
    radial-gradient(60% 50% at 50% 100%,
      rgba(34,211,238,.14),
      rgba(139,92,246,.10),
      transparent 70%
    );
  filter: blur(18px);
  opacity: .8;
  pointer-events:none;
}

/* İçerik üstte kalsın */
.glassCard > *,
.outputsCard > *,
.navCard > *{
  position: relative;
  z-index: 1;
}

/* İstersen outputs biraz daha şeffaf */
.outputsCard{
  background: rgba(10, 12, 22, .58);
}

/* Kenarlar arası “1-2 cm” hissi: gap’i artır */
.studioTwoPanel{
  gap: 22px;         /* 16 -> 22/24 deneyebilirsin */
}

/* Panel dış gölgeler (derinlik) */
.glassCard,
.outputsCard,
.navCard{
  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* =========================================================
   AIVO APP — JOB UI OVERRIDES (FIX)
   - studio.jobs.js'in yeşil/inline stillerini ezer
   - hedef: #job-... (senin job id formatın)
   ========================================================= */

/* Job "pill" / satır kapsayıcı — en güvenlisi */
[id^="job-"],
.aivo-job,
.aivo-job-pill,
.aivo-job-badge {
  outline: none !important;
  outline-color: transparent !important;

  border: 1px solid rgba(154, 122, 255, 0.45) !important;
  background: rgba(18, 16, 32, 0.90) !important;
  color: #eae6ff !important;

  box-shadow: 0 0 0 1px rgba(154, 122, 255, 0.20),
              0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* İçte ayrı bir status span/div varsa onu da ez */
[id^="job-"] .job-status,
[id^="job-"] .status,
[id^="job-"] .pill,
.aivo-job .job-status,
.aivo-job .status,
.aivo-job .pill {
  outline: none !important;
  outline-color: transparent !important;

  border: 1px solid rgba(154, 122, 255, 0.45) !important;
  background: rgba(18, 16, 32, 0.90) !important;
  color: #eae6ff !important;

  box-shadow: none !important;
}

/* queued özelinde: yeşil asla olmasın (nötr/mor) */
[id^="job-"][data-status="queued"],
[id^="job-"][data-status="queued"] .job-status,
.aivo-job[data-status="queued"],
.aivo-job[data-status="queued"] .job-status {
  border-color: rgba(154, 122, 255, 0.55) !important;
  background: rgba(22, 18, 40, 0.92) !important;
}
/* === AIVO JOB PILL — SHINE === */
#aivo-jobs > div {
  position: relative;
  overflow: hidden;
}

#aivo-jobs > div::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-140%;
  width:70%;
  height:140%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.38) 50%,
    rgba(255,255,255,.18) 65%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(0.2px);
  opacity: 0;
  pointer-events:none;
}

#aivo-jobs > div.job--shine::after{
  opacity: 1;
  animation: aivoJobShine .55s ease-out;
}

@keyframes aivoJobShine{
  0%   { left:-140%; }
  100% { left: 160%; }
}
/* === AIVO PREMIUM TOAST === */
.aivo-toast {
  position: relative;

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

  /* Gradient (bir tık daha sofistike) */
  background: linear-gradient(
    135deg,
    rgba(130, 102, 255, 0.92),
    rgba(255, 122, 186, 0.92)
  );

  /* İnce premium kenar çizgisi */
  border: 1px solid rgba(255, 255, 255, 0.18);

  /* Cam + derinlik */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);

  color: #fff;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Üstten çok ince highlight çizgisi */
.aivo-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0) 40%
  );

  opacity: 0.4;
}
/* =========================================================
   SM-PACK — UI (cards / pills / cta) — V2
   ========================================================= */

.page-sm-pack .smpack-card{
  padding: 18px;
}

.page-sm-pack .smpack-grid{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.page-sm-pack .smpack-grid--themes{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .page-sm-pack .smpack-grid--themes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .page-sm-pack .smpack-grid--themes{ grid-template-columns: 1fr; }
}

.page-sm-pack .smpack-choice{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 12px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.page-sm-pack .smpack-choice:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}

.page-sm-pack .smpack-choice.is-active{
  border-color: rgba(176, 140, 255, 0.55);
  background: rgba(176, 140, 255, 0.10);
  box-shadow: 0 0 0 1px rgba(176, 140, 255, 0.25), 0 10px 28px rgba(0,0,0,0.35);
}

.page-sm-pack .smpack-choice__title{
  font-weight: 700;
  margin-bottom: 4px;
}

.page-sm-pack .smpack-choice__desc{
  opacity: 0.85;
  font-size: 13px;
  line-height: 1.25;
}

.page-sm-pack .smpack-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.page-sm-pack .smpack-pill{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: inherit;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.page-sm-pack .smpack-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.05);
}

.page-sm-pack .smpack-pill.is-active{
  border-color: rgba(176, 140, 255, 0.55);
  background: rgba(176, 140, 255, 0.10);
}

.page-sm-pack .smpack-card--cta{
  padding: 18px;
}

.page-sm-pack .smpack-generate{
  width: 100%;
  border-radius: 16px;
  padding: 16px 18px;
  font-weight: 800;
}

.page-sm-pack .smpack-note{
  margin-top: 10px;
  opacity: 0.85;
}
/* =========================================================
   SM-PACK — TEXT VISIBILITY HOTFIX (V1)
   - Kart içi metinleri görünür yapar
   - Global stiller metni karartıyorsa override eder
   ========================================================= */

.page-sm-pack .smpack-choice,
.page-sm-pack .smpack-pill{
  color: rgba(255,255,255,0.92);
}

.page-sm-pack .smpack-choice__title{
  color: rgba(255,255,255,0.95);
}

.page-sm-pack .smpack-choice__desc{
  color: rgba(255,255,255,0.78);
  opacity: 1; /* global opacity kırıyorsa */
}

.page-sm-pack .smpack-choice.is-active .smpack-choice__title{
  color: rgba(255,255,255,0.98);
}

.page-sm-pack .smpack-choice.is-active .smpack-choice__desc{
  color: rgba(255,255,255,0.84);
}

.page-sm-pack .card-title,
.page-sm-pack .card-subtitle,
.page-sm-pack .panel-title,
.page-sm-pack .panel-subtitle{
  color: rgba(255,255,255,0.92);
}

.page-sm-pack .card-subtitle,
.page-sm-pack .panel-subtitle{
  opacity: 0.85;
}
/* =========================================================
   SM-PACK — SIZE UPGRADE (büyütme + okunabilirlik)
   ========================================================= */

.page-sm-pack .smpack-card{
  padding: 22px;
}

.page-sm-pack .card-title{
  font-size: 18px;
  font-weight: 800;
}

.page-sm-pack .card-subtitle{
  font-size: 14px;
}

.page-sm-pack .smpack-grid--themes{
  gap: 14px;
}

.page-sm-pack .smpack-choice{
  padding: 18px 18px;
  border-radius: 16px;
  min-height: 88px;
}

.page-sm-pack .smpack-choice__title{
  font-size: 16px;
  letter-spacing: -0.01em;
}

.page-sm-pack .smpack-choice__desc{
  font-size: 14px;
  line-height: 1.3;
}

.page-sm-pack .smpack-row{
  gap: 12px;
}

.page-sm-pack .smpack-pill{
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 999px;
}

/* CTA’yı da biraz büyüt */
.page-sm-pack .smpack-generate{
  padding: 18px 20px;
  font-size: 16px;
  border-radius: 18px;
}
/* =========================================================
   SM-PACK — PREMIUM HOVER + SHINE (V3)
   - Hover: renk değişir + hafif parlama
   - Active: daha premium
   - Shine: üstünden beyaz ışık kayar
   ========================================================= */

.page-sm-pack .smpack-choice,
.page-sm-pack .smpack-pill{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Shine katmanı */
.page-sm-pack .smpack-choice::before,
.page-sm-pack .smpack-pill::before{
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(255,255,255,0.00) 35%,
      rgba(255,255,255,0.16) 50%,
      rgba(255,255,255,0.00) 65%,
      transparent 100%);
  transform: translateX(-120%);
  transition: opacity 180ms ease;
  z-index: 0;
}

/* İçerik üstte kalsın */
.page-sm-pack .smpack-choice > *,
.page-sm-pack .smpack-pill{
  position: relative;
  z-index: 1;
}

/* Hover premium */
.page-sm-pack .smpack-choice:hover{
  border-color: rgba(176, 140, 255, 0.42);
  background: rgba(176, 140, 255, 0.06);
  box-shadow:
    0 0 0 1px rgba(176, 140, 255, 0.12),
    0 10px 28px rgba(0,0,0,0.35);
}

.page-sm-pack .smpack-pill:hover{
  border-color: rgba(176, 140, 255, 0.40);
  background: rgba(176, 140, 255, 0.06);
}

/* Hover’da shine başlasın */
.page-sm-pack .smpack-choice:hover::before,
.page-sm-pack .smpack-pill:hover::before{
  opacity: 1;
  animation: smpackShine 900ms ease both;
}

/* Active state daha “premium” */
.page-sm-pack .smpack-choice.is-active{
  border-color: rgba(176, 140, 255, 0.62);
  background: rgba(176, 140, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(176, 140, 255, 0.22),
    0 12px 34px rgba(0,0,0,0.42);
}

.page-sm-pack .smpack-pill.is-active{
  border-color: rgba(176, 140, 255, 0.62);
  background: rgba(176, 140, 255, 0.12);
}

@keyframes smpackShine{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Bir tık daha premium: kart içi boşluk ve kenar */
.page-sm-pack .smpack-card{
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
/* =========================================================
   PAGE: VIRAL HOOK — V1 (distinct look)
   - SM Pack'ten farklı: teal/neon vurgu + daha premium kartlar
   - Hover ile seçme + parlayan çerçeve/shine uyumlu
   ========================================================= */

.page-viral-hook .panel-header{
  margin-bottom: 14px;
}

.page-viral-hook .panel-title{
  letter-spacing: -0.02em;
}

.page-viral-hook .panel-subtitle{
  opacity: 0.9;
  max-width: 78ch;
}

/* Brief input kartı biraz daha premium */
.page-viral-hook .card{
  border-radius: 22px;
}

.page-viral-hook .form-label{
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-viral-hook .input{
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}

.page-viral-hook .input:focus{
  outline: none;
  border-color: rgba(120, 190, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(120,190,255,0.12);
}

/* Stil seçimi - daha büyük kartlar */
.page-viral-hook .panel-mini-title{
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  opacity: 0.95;
}

.page-viral-hook .choice-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px){
  .page-viral-hook .choice-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-viral-hook .choice-card{
  position: relative;
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: 18px;

  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.075);

  transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  cursor: pointer;
  overflow: hidden;
  min-height: 88px;
}

.page-viral-hook .choice-card .choice-title{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.page-viral-hook .choice-card .choice-sub{
  opacity: 0.88;
  margin-top: 6px;
  line-height: 1.25;
}

/* hover premium */
.page-viral-hook .choice-card:hover{
  transform: translateY(-1px);
  border-color: rgba(120,190,255,0.24);
  background: rgba(255,255,255,0.034);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* active: teal glow (SM Pack'ten farklı) */
.page-viral-hook .choice-card.is-active{
  border-color: rgba(120,190,255,0.55);
  box-shadow:
    0 0 0 3px rgba(120,190,255,0.12),
    0 18px 44px rgba(0,0,0,0.32);
}

/* sol vurgu şeridi */
.page-viral-hook .choice-card.is-active::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(120,190,255,0.95), rgba(180,120,255,0.65));
  opacity: 0.9;
}

/* kayan ışık */
.page-viral-hook .choice-card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 70%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: rotate(18deg);
  opacity: 0;
  transition: opacity .15s ease;
}

.page-viral-hook .choice-card:hover::after{
  opacity: 1;
  animation: vh_shine 1.1s ease forwards;
}

@keyframes vh_shine{
  0%{ left:-60%; }
  100%{ left:130%; }
}

/* Buton: Hook Üret */
.page-viral-hook .hook-generate{
  width: 100%;
  height: 64px;
  border-radius: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 18px;

  background: linear-gradient(90deg, rgba(110,80,255,0.95), rgba(80,190,255,0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 44px rgba(0,0,0,0.36);
}

.page-viral-hook .hook-generate:hover{
  filter: brightness(1.03);
}

.page-viral-hook .hook-generate:active{
  transform: translateY(1px);
}

.page-viral-hook .muted{
  opacity: 0.86;
}

/* Sağ panel job kartı (mock) */
.page-viral-hook .right-job{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
}

.page-viral-hook .right-job__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.page-viral-hook .right-job__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.page-viral-hook .right-job__status{
  font-weight: 800;
  opacity: 0.9;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(120,190,255,0.10);
  border: 1px solid rgba(120,190,255,0.18);
}

.page-viral-hook .right-job__line{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.10);
  margin-top: 8px;
}

.page-viral-hook .right-job__badge{
  flex: 0 0 auto;
  font-weight: 900;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(110,80,255,0.18);
  border: 1px solid rgba(110,80,255,0.22);
}

.page-viral-hook .right-job__text{
  line-height: 1.25;
  opacity: 0.92;
}

.page-viral-hook .right-job__state{
  margin-left:auto;
  flex: 0 0 auto;
  font-weight: 900;
  opacity: 0.9;
}

.page-viral-hook .right-job__state.is-doing{ color: rgba(170,200,255,0.95); }
.page-viral-hook .right-job__state.is-done{ color: rgba(170,255,210,0.95); }
/* =========================================================
   PAGE: VIRAL HOOK — VISIBILITY + SIZING FIX (V1)
   - Yazılar kararmasın / görünür olsun
   - Input tek satır değil, geniş rahat alan olsun
   ========================================================= */

.page-viral-hook .card-title,
.page-viral-hook h1,
.page-viral-hook h2,
.page-viral-hook h3{
  color: rgba(255,255,255,0.96);
}

.page-viral-hook .card-subtitle,
.page-viral-hook .panel-subtitle{
  color: rgba(255,255,255,0.74);
}

/* Konu/Ürün input alanı: tam genişlik + daha yüksek */
.page-viral-hook .input,
.page-viral-hook input.input,
.page-viral-hook input[type="text"].input{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 56px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 16px;
}

/* Eğer input bir wrapper içindeyse daraltmasın */
.page-viral-hook .card .input,
.page-viral-hook .card input.input{
  display: block;
}

/* Stil kartları: daha okunur + premium */
.page-viral-hook .choice-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .page-viral-hook .choice-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-viral-hook .choice-card{
  position: relative;
  padding: 18px 18px;
  min-height: 86px;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;

  color: rgba(255,255,255,0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 24px rgba(0,0,0,0.25);

  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.page-viral-hook .choice-card strong,
.page-viral-hook .choice-card .choice-title{
  display: block;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.96);
  margin-bottom: 6px;
}

.page-viral-hook .choice-card .choice-desc{
  font-size: 14px;
  color: rgba(255,255,255,0.74);
}

/* Hover = premium */
.page-viral-hook .choice-card:hover{
  transform: translateY(-1px);
  border-color: rgba(160,120,255,0.45);
  background: rgba(140,90,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 16px 30px rgba(0,0,0,0.32);
}

/* Active */
.page-viral-hook .choice-card.is-active{
  border-color: rgba(160,120,255,0.70);
  background: rgba(140,90,255,0.14);
}

/* Kayan ışık (shine) */
.page-viral-hook .choice-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  opacity: 0.55;
}

.page-viral-hook .choice-card:hover::after,
.page-viral-hook .choice-card.is-active::after{
  transform: translateX(120%);
}
/* =========================================================
   SM PACK — INPUT HEIGHT FIX
   Hook input ile görsel eşitleme
   ========================================================= */

.page-sm-pack .input#smPackInput {
  height: 56px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.4;
}
/* =========================================================
   INPUT — HOOK ile aynı yükseklik hissi (SM PACK + HOOK)
   ========================================================= */

/* Viral Hook input (sende input class="input") */
.page-viral-hook .input{
  height: 56px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.4;
}

/* SM Pack input (id yok, class üzerinden yakalıyoruz) */
.page-sm-pack .card .input{
  height: 56px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.4;
}

/* =========================================================
   STUDIO — INPUT SIZE OVERRIDE (FINAL)
   - SM Pack "Marka/Ürün/Mesaj" input'u Hook gibi geniş + yüksek
   - Hook input'u da aynı ölçüde sabitlenir
   - Global .input kurallarını EZER (important)
   ========================================================= */

/* 1) SM PACK input: tam genişlik + yüksek */
.page-sm-pack input.input,
.page-sm-pack .input{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;

  height: 56px !important;
  min-height: 56px !important;

  padding: 14px 16px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;

  border-radius: 16px !important;
  box-sizing: border-box !important;
}

/* Eğer parent (form-row / card içi) daraltıyorsa onu da düzelt */
.page-sm-pack .form-row,
.page-sm-pack .card{
  width: 100% !important;
}

.page-sm-pack .form-row > *{
  width: 100% !important;
  max-width: 100% !important;
}

/* 2) VIRAL HOOK input: aynı ölçü */
.page-viral-hook input.input,
.page-viral-hook .input{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;

  height: 56px !important;
  min-height: 56px !important;

  padding: 14px 16px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;

  border-radius: 16px !important;
  box-sizing: border-box !important;
}
/* ===== Sidebar: AI Üret başlığı (her sayfada aynı) ===== */
.sidebar .sidebar-title.sidebar-title--ai{
  margin-top: 14px;
  font-size: 16px;
  font-weight: 800;

  /* sidebar-title'ın “bölüm etiketi” görünümünü kırıyoruz */
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;

  color: rgba(255,255,255,.92);
  text-shadow:
    0 0 18px rgba(120, 90, 255, .35),
    0 0 6px rgba(255,255,255,.12);
}
/* =========================================================
   AIVO — SIDEBAR PREMIUM CARDS (single block)
   - Wrap every .sidebar-section as a glass card
   - Hover: border emphasis + inner glow + one-pass shine
   - Links: premium hover + active glow
   - Divider spacing between groups (AI Üret vs Paneller)
   - Safari/perf safety: isolate + translateZ + backface hidden
   ========================================================= */

/* ---- Tuning knobs ---- */
:root{
  --sb-card-bg: rgba(16, 18, 26, 0.58);
  --sb-card-border: rgba(255,255,255,0.10);
  --sb-card-border-hover: rgba(255,255,255,0.18);

  --sb-glow: rgba(140, 190, 255, 0.14);
  --sb-glow-strong: rgba(140, 190, 255, 0.22);

  --sb-text: rgba(255,255,255,0.92);
  --sb-muted: rgba(255,255,255,0.62);

  --sb-radius: 18px;
  --sb-pad: 14px;
  --sb-gap: 10px;

  --sb-link-radius: 12px;
}

/* ---- Sidebar base safety ---- */
.sidebar{
  position: relative;
  isolation: isolate;                 /* Safari light-leak guard */
  transform: translateZ(0);           /* composite layer */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---- PREMIUM CARD: every section becomes a card ---- */
.sidebar .sidebar-section{
  position: relative;
  border-radius: var(--sb-radius);
  padding: var(--sb-pad);
  margin: 0 0 var(--sb-gap) 0;

  background: var(--sb-card-bg);
  border: 1px solid var(--sb-card-border);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  overflow: clip;                     /* prevents shine bleed (modern) */
  overflow: hidden;                   /* fallback */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color .18s ease, box-shadow .22s ease, background .22s ease, transform .18s ease;
}

/* Subtle top sheen */
.sidebar .sidebar-section::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: 0.22;
  background:
    radial-gradient(120% 80% at 20% 0%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.04) 34%,
      rgba(255,255,255,0.00) 60%);
}

/* Shine stripe (one pass on hover) */
.sidebar .sidebar-section::after{
  content:"";
  position:absolute;
  top: -30%;
  left: -60%;
  width: 60%;
  height: 160%;
  pointer-events:none;
  opacity: 0;
  transform: skewX(-18deg) translateX(-10%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.08) 65%,
    rgba(255,255,255,0.00) 100%);
}

/* Hover premium: border + glow + shine */
@media (hover:hover){
  .sidebar .sidebar-section:hover{
    border-color: var(--sb-card-border-hover);
    box-shadow:
      0 14px 30px rgba(0,0,0,0.30),
      0 0 0 1px rgba(255,255,255,0.06),
      0 0 28px var(--sb-glow),
      inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translateY(-1px);
  }

  .sidebar .sidebar-section:hover::after{
    opacity: 1;
    animation: sbShineOnce .55s ease-out 1;
  }
}

@keyframes sbShineOnce{
  0%   { transform: skewX(-18deg) translateX(-25%); opacity: 0; }
  15%  { opacity: 0.65; }
  100% { transform: skewX(-18deg) translateX(240%); opacity: 0; }
}

/* ---- Section title ---- */
.sidebar .sidebar-title{
  color: var(--sb-muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 2px 2px 10px 2px;
}

/* ---- Links: premium hover + active ---- */
.sidebar .sidebar-link{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: var(--sb-link-radius);
  padding: 10px 10px;

  color: var(--sb-text);
  background: transparent;
  border: 1px solid transparent;

  transition: background .16s ease, border-color .16s ease, box-shadow .2s ease, transform .12s ease;
}

@media (hover:hover){
  .sidebar .sidebar-link:hover{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0.07) 0%,
        rgba(255,255,255,0.03) 45%,
        rgba(255,255,255,0.00) 100%);
    border-color: rgba(255,255,255,0.10);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.05),
      0 0 18px rgba(140,190,255,0.10);
    transform: translateY(-0.5px);
  }
}

/* Active state: consistent premium */
.sidebar .sidebar-link.is-active,
.sidebar .sidebar-link[aria-current="page"]{
  background:
    radial-gradient(120% 120% at 20% 0%,
      rgba(140,190,255,0.18) 0%,
      rgba(140,190,255,0.10) 35%,
      rgba(255,255,255,0.04) 60%,
      rgba(255,255,255,0.00) 100%);
  border-color: rgba(140,190,255,0.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 26px var(--sb-glow-strong);
}

/* ---- Inner spacing normalization ---- */
.sidebar .sidebar-section > *:last-child{ margin-bottom: 0; }
.sidebar .sidebar-group{ margin-top: 10px; }
.sidebar .sidebar-link + .sidebar-link{ margin-top: 6px; }

/* ---- AI Üret & Paneller separation (best-effort, no HTML change)
   If your DOM order is: [AI Üret section] then [Paneller section], this adds a soft divider before 2nd block.
*/
.sidebar .sidebar-section + .sidebar-section{
  margin-top: 2px;
}

.sidebar .sidebar-section + .sidebar-section::marker{ content:""; } /* noop, harmless */

.sidebar .sidebar-section + .sidebar-section{
  position: relative;
}

.sidebar .sidebar-section + .sidebar-section{
  /* extra breathing room between major groups */
  margin-top: 10px;
}

.sidebar .sidebar-section + .sidebar-section{
  /* subtle divider line between groups (doesn't break layout) */
  box-shadow:
    0 10px 24px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.sidebar .sidebar-section + .sidebar-section{
  /* small top separator using background overlay via outline */
  outline: 1px solid rgba(255,255,255,0.00);
  outline-offset: -1px;
}

/* ---- Reduced motion: keep premium without animation ---- */
@media (prefers-reduced-motion: reduce){
  .sidebar .sidebar-section,
  .sidebar .sidebar-link{
    transition: none !important;
  }
  .sidebar .sidebar-section:hover::after{
    animation: none !important;
    opacity: 0 !important;
  }
}
/* =========================================================
   SIDEBAR — AI ÜRET CARD (Palette-locked: purple/pink like header)
   Target: first .sidebar-section inside .sidebar
   ========================================================= */

.sidebar .sidebar-section:first-of-type{
  /* Palet: mor/pembe ana — mavi çok hafif */
  background:
    radial-gradient(120% 90% at 18% 0%,
      rgba(179, 98, 255, 0.22) 0%,
      rgba(179, 98, 255, 0.10) 34%,
      rgba(16, 18, 26, 0.42) 72%,
      rgba(16, 18, 26, 0.52) 100%),
    radial-gradient(95% 75% at 88% 22%,
      rgba(255, 120, 200, 0.16) 0%,
      rgba(255, 120, 200, 0.06) 42%,
      rgba(0,0,0,0.00) 74%),
    radial-gradient(70% 70% at 62% 102%,
      rgba(120, 150, 255, 0.06) 0%,
      rgba(120, 150, 255, 0.00) 70%),
    rgba(16, 18, 26, 0.50);

  border-color: rgba(255,255,255,0.14);

  box-shadow:
    0 16px 34px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 34px rgba(179,98,255,0.18),
    0 0 22px rgba(255,120,200,0.10),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Üst sheen + micro sparkle (çok hafif) */
.sidebar .sidebar-section:first-of-type::before{
  opacity: 0.28;
  background:
    radial-gradient(120% 80% at 20% 0%,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.05) 35%,
      rgba(255,255,255,0.00) 60%),
    radial-gradient(2px 2px at 16% 26%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.00) 60%),
    radial-gradient(2px 2px at 78% 22%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 60%),
    radial-gradient(1.5px 1.5px at 62% 56%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 60%),
    radial-gradient(1.5px 1.5px at 34% 68%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 60%);
}

/* Hover: palete sadık premium glow */
@media (hover:hover){
  .sidebar .sidebar-section:first-of-type:hover{
    border-color: rgba(255,255,255,0.20);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.36),
      0 0 0 1px rgba(255,255,255,0.07),
      0 0 44px rgba(179,98,255,0.20),
      0 0 26px rgba(255,120,200,0.12),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
}
/* =========================================================
   RIGHT PANEL — same purple/pink palette as AI Üret card
   Targets: .right-panel .right-card (and generic .right-panel .card)
   ========================================================= */

.right-panel .right-card,
.right-panel .card.right-card,
.right-panel .card{
  background:
    radial-gradient(120% 90% at 18% 0%,
      rgba(179, 98, 255, 0.18) 0%,
      rgba(179, 98, 255, 0.08) 34%,
      rgba(16, 18, 26, 0.44) 72%,
      rgba(16, 18, 26, 0.52) 100%),
    radial-gradient(95% 75% at 88% 22%,
      rgba(255, 120, 200, 0.12) 0%,
      rgba(255, 120, 200, 0.05) 42%,
      rgba(0,0,0,0.00) 74%),
    rgba(16, 18, 26, 0.50) !important;

  border-color: rgba(255,255,255,0.12) !important;

  box-shadow:
    0 16px 34px rgba(0,0,0,0.32),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 28px rgba(179,98,255,0.14),
    0 0 18px rgba(255,120,200,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* iOS tap hissi + hızlı tepki */
.sidebar, .right-panel{
  -webkit-tap-highlight-color: transparent;
}
.sidebar .sidebar-link{
  touch-action: manipulation; /* iOS’ta “hızlı tap” için önemli */
}
/* =========================
   WORKMODE CARD — PURPLE GLOW
   ========================= */
.music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;

  /* kartın kendi zemini */
  background: rgba(10, 12, 18, 0.72) !important;

  /* border + hafif premium */
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset !important;

  /* Safari güvenliği */
  isolation: isolate !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* mor glow katmanı */
.music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]::before{
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  pointer-events: none !important;
  z-index: 0 !important;

  /* sağ paneldeki hissin aynısı: mor/pembe radial */
  background:
    radial-gradient(1200px 500px at 88% 20%,
      rgba(170, 90, 255, 0.32),
      rgba(170, 90, 255, 0.00) 60%),
    radial-gradient(900px 420px at 10% 60%,
      rgba(255, 120, 190, 0.14),
      rgba(255, 120, 190, 0.00) 62%);

  filter: blur(10px) saturate(1.15) !important;
  opacity: 1 !important;
}

/* içerik üstte kalsın */
.music-view[data-music-view="geleneksel"] .card[data-ui="workmode"] > *{
  position: relative !important;
  z-index: 1 !important;
}
/* =========================
   WORKMODE — READY FEEL EFFECTS
   ========================= */

/* 1) Hafif nefes alan dış glow */
.music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]{
  animation: aivoWorkmodeBreath 4.8s ease-in-out infinite;
}

/* 2) Kart içinde çok ince shimmer şeridi */
.music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;

  /* ince highlight band */
  background:
    linear-gradient(110deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.06) 22%,
      rgba(255,255,255,0) 45%) !important;

  transform: translateX(-70%);
  opacity: 0.55;
  filter: blur(0.2px);
  animation: aivoWorkmodeShimmer 6.8s linear infinite;
}

/* Hover’da daha “hazırım” hissi (border + glow artar) */
.music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]:hover{
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.48),
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 22px rgba(170,90,255,0.18) !important;
}

/* Kartın içinde “tek geçiş” shine: mouse girince */
.music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]:hover::after{
  animation-duration: 1.15s;
  opacity: 0.75;
}

/* Animasyonlar */
@keyframes aivoWorkmodeBreath{
  0%, 100% { box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset; }
  50%      { box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 18px rgba(170,90,255,0.12); }
}

@keyframes aivoWorkmodeShimmer{
  0%   { transform: translateX(-80%); }
  100% { transform: translateX(80%); }
}

/* Hareket istemeyenler için kapat */
@media (prefers-reduced-motion: reduce){
  .music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]{
    animation: none !important;
  }
  .music-view[data-music-view="geleneksel"] .card[data-ui="workmode"]::after{
    animation: none !important;
    opacity: 0.35 !important;
  }
}
/* =========================
   SES KAYDI — RING ARKASI GLOW (GARANTİ)
   Target: .record-main-card
   ========================= */

.record-main-card{
  position: relative;
  overflow: hidden;       /* blur taşmasını kontrol eder */
  isolation: isolate;     /* Safari light-leak önler */
}

/* Arka glow katmanı */
.record-main-card::before{
  content:"";
  position:absolute;
  inset:-40px;            /* blur için pay */
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(
      520px 520px at 50% 180px,
      rgba(170, 90, 255, 0.26),
      rgba(170, 90, 255, 0.10) 42%,
      rgba(170, 90, 255, 0.00) 72%
    ),
    radial-gradient(
      440px 440px at 52% 220px,
      rgba(255, 120, 190, 0.18),
      rgba(255, 120, 190, 0.00) 68%
    );

  filter: blur(26px);
  opacity: 1;
  transform: translateZ(0);
}

/* Kart içeriği glow’un üstünde kalsın */
.record-main-card > *{
  position: relative;
  z-index:1;
}
/* ===========================
   RECORD INFO GRID (NEW)
   =========================== */

.record-bottom-shell{
  margin-top: 18px;
}

.record-info-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

/* kartların her biri */
.record-info-card{
  border-radius: 22px;
  padding: 22px 22px 18px;
  background: rgba(12, 14, 28, 0.60);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* başlık/metin */
.record-info-title{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.record-info-text{
  margin: 0 0 14px;
  color: rgba(225,230,255,0.78);
  line-height: 1.55;
}

.record-info-hint{
  margin: 14px 0 0;
  color: rgba(225,230,255,0.68);
  line-height: 1.55;
}

/* upload alanını kart içinde daha premium yap */
.record-info-card.is-upload .record-upload-box{
  margin-top: 12px;
  border-radius: 18px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
}

.record-info-card.is-upload .record-upload-hint{
  display: inline-block;
  margin-top: 6px;
  color: rgba(225,230,255,0.65);
  font-size: 13px;
}

/* responsive */
@media (max-width: 980px){
  .record-info-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SES KAYDI — ALT BİLGİ 2 KART (GRID) FIX
   Sorun: kartlar büyümüyor, sağda boşluk kalıyor
   ========================================================= */

.music-view[data-music-view="ses-kaydi"] .record-bottom-shell{
  display: block !important;        /* flex kalıntısını kır */
  width: 100% !important;
}

.music-view[data-music-view="ses-kaydi"] .record-info-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 eşit sütun */
  gap: 18px !important;
  width: 100% !important;           /* en kritik */
  align-items: stretch !important;
}

.music-view[data-music-view="ses-kaydi"] .record-info-card{
  width: 100% !important;           /* en kritik */
  max-width: none !important;       /* varsa limitleri kaldır */
  min-width: 0 !important;
  height: 100%;
  padding: 22px;
  border-radius: 18px;
  background: rgba(12, 14, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}

/* Sağ kartta upload kutusu aşağıda dursun ve genişlesin */
.music-view[data-music-view="ses-kaydi"] .record-info-card.is-upload{
  display: flex;
  flex-direction: column;
}

.music-view[data-music-view="ses-kaydi"] .record-info-card.is-upload .record-upload-box{
  margin-top: auto;
  width: 100%;
  min-height: 120px;
}

/* Mobilde tek sütuna düş */
@media (max-width: 900px){
  .music-view[data-music-view="ses-kaydi"] .record-info-grid{
    grid-template-columns: 1fr !important;
  }
}
.record-upload-box .upload-ui{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
}

.record-upload-box .upload-ic{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color: rgba(210, 200, 255, 0.92);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.record-upload-box .upload-txt strong{
  display:block;
  font-size:14px;
  letter-spacing: 0.2px;
}

.record-upload-box .upload-sub{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  color: rgba(220, 226, 255, 0.72);
}

.record-upload-box .record-upload-hint{
  display:block;
  margin-top:8px;
  font-size:12px;
  color: rgba(220, 226, 255, 0.55);
}

.record-upload-box .upload-file{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  color: rgba(255,255,255,0.80);
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 420px;
}

/* hover/focus premium hissi */
.record-upload-box{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.record-upload-box:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 16px 44px rgba(0,0,0,0.34);
}

/* drag over (JS ile eklenecek class) */
.record-upload-box.is-dragover{
  border-color: rgba(160, 120, 255, 0.55);
  background: rgba(160, 120, 255, 0.10);
}
/* =========================================================
   UPLOAD BOX — sürekli kayan ışık (shimmer)
   Target: .record-upload-box (label)
   ========================================================= */

/* Kutunun üstünde shimmer akabilsin */
.record-upload-box{
  position: relative;
  overflow: hidden;              /* ışık kutu içinde kalsın */
  isolation: isolate;            /* glow/overlay düzgün katmanlansın */
}

/* Hover/aktif olunca biraz daha canlı görünmesi için opsiyonel */
.record-upload-box:hover{
  border-color: rgba(255,255,255,0.22);
}

/* Kayan ışık overlay */
.record-upload-box::before{
  content: "";
  position: absolute;
  inset: -40% -60%;              /* geniş tut: ışık kesilmesin */
  pointer-events: none;
  z-index: 0;

  /* ışık bandı */
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.06) 35%,
      rgba(190,140,255,0.14) 50%,
      rgba(255,160,210,0.10) 60%,
      rgba(255,255,255,0.00) 80%
    );

  transform: translateX(-60%) rotate(0.001deg);
  filter: blur(0.2px);
  opacity: 0.9;

  animation: aivoUploadShimmer 3.2s linear infinite;
}

/* İçerik (ikon+yazı) overlay’in üstünde dursun */
.record-upload-box > *{
  position: relative;
  z-index: 1;
}

/* Animasyon */
@keyframes aivoUploadShimmer{
  0%   { transform: translateX(-70%) rotate(0.001deg); }
  100% { transform: translateX(70%)  rotate(0.001deg); }
}

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .record-upload-box::before{ animation: none; opacity: 0.35; }
}
.record-upload-box::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:0;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 40%,
    rgba(170,140,255,0.10),
    rgba(0,0,0,0.00) 70%
  );
  opacity: 0.55;
  animation: aivoUploadGlow 4.8s ease-in-out infinite;
}

@keyframes aivoUploadGlow{
  0%,100%{ opacity: 0.35; }
  50%    { opacity: 0.65; }
}
/* =========================================================
   COVER — GÖRSEL GALERİNİZ (has-gradient)
   Kaynak stil: Ses Kaydı premium kartları ile uyumlu
   ========================================================= */

.card.cover-gallery-card.has-gradient{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Temel kart zemini (aynı dil) */
  background: rgba(12, 14, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}

/* Mor-mavi premium glow (2. görsel rengi) */
.card.cover-gallery-card.has-gradient::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(168, 85, 247, 0.30) 0%,
      rgba(99, 102, 241, 0.22) 40%,
      rgba(10, 12, 22, 0.00) 75%
    );
  pointer-events: none;
  z-index: 0;
}

/* Üstten çok hafif cam parlaması */
.card.cover-gallery-card.has-gradient::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    transparent 45%
  );
  pointer-events: none;
  z-index: 0;
}

/* İçerik her zaman üstte kalsın */
.card.cover-gallery-card.has-gradient > *{
  position: relative;
  z-index: 1;
}
.card.cover-gallery-card.is-filled::before{ opacity: 0.35; }
.card.cover-gallery-card.is-filled::after { opacity: 0.25; }
/* COVER — 2 kolonlu satır wrapper’ınız (isim sizde farklı olabilir) */
.page-cover .cover-layout,
.page-cover .cover-row,
.page-cover .cover-grid,
.page-cover .cover-wrap{
  display: flex;
  gap: 16px;
  align-items: stretch;   /* kritik */
}

/* Kolonlar */
.page-cover .cover-left{
  flex: 1 1 0;
  min-width: 0;
}

.page-cover .cover-right{
  flex: 0 0 min(440px, 40vw); /* sağ kolon genişliği örnek */
  min-width: 320px;
  min-width: 0;
  display: flex;             /* kritik: iç kartın %100 çalışması için */
}
/* Sağdaki galeri kartı: kolon yüksekliğini tam alsın */
.page-cover .cover-right .cover-gallery-card{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;            /* iç scroll/flex için kritik */
}

/* Kartın header’ı sabit; body alanı esnesin */
.page-cover .cover-right .cover-gallery-card .card-header{
  flex: 0 0 auto;
}

/* Galeri body/content alanı: kartın kalanını doldursun */
.page-cover .cover-right .cover-gallery-card .gallery-body,
.page-cover .cover-right .cover-gallery-card .gallery-content,
.page-cover .cover-right .cover-gallery-card .cover-gallery-body{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Empty state ortalama */
.page-cover .cover-gallery-card .gallery-empty{
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.page-cover .cover-gallery-card .gallery-empty-icon{
  font-size: 28px;
  line-height: 1;
  opacity: .9;
  margin-bottom: 10px;
}

.page-cover .cover-gallery-card .gallery-empty-title{
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

.page-cover .cover-gallery-card .gallery-empty-sub{
  opacity: .75;
  max-width: 280px;
}
/* Grid alanı: dolu gelince görünür olacak */
.page-cover .cover-gallery-card .gallery-grid{
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 12px;

  /* responsive grid */
  grid-template-columns: repeat(2, minmax(0, 1fr));

  /* çok içerik gelirse kart içinde scroll */
  overflow: auto;
  padding: 2px 2px 4px;
}

/* Daha geniş ekranda 3 kolon */
@media (min-width: 1200px){
  .page-cover .cover-gallery-card .gallery-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

/* =========================================================
   COVER GRID — gerçek çözüm
   Problem: .cover-grid yüksekliği kısa (420px), bu yüzden sağ kart uzamıyor
   Çözüm: .cover-grid viewport’a uzasın + item’lar stretch + sağ kart flex
   ========================================================= */

.page-cover .cover-grid{
  /* sende zaten grid var ama garanti olsun */
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;

  /* kritik: grid item’lar aynı yükseklikte uzasın */
  align-items: stretch;

  /* kritik: cover satırını viewport’a kadar uzat */
  /* --aivo-player-h body’de var; topbar için de 72px varsayıyoruz */
  min-height: calc(100svh - 72px - var(--aivo-player-h, 72px) - 120px);

  /* bazen Safari/desktop ölçümde daha stabil olsun */
  min-height: calc(100vh - 72px - var(--aivo-player-h, 72px) - 120px);
}

/* Sol kart (cover-left) zaten .card */
.page-cover .cover-grid > .cover-left,
.page-cover .cover-grid > .card.cover-left{
  height: 100%;
  min-height: 0;
}

/* Sağ kolon */
.page-cover .cover-grid > .cover-right{
  height: 100%;
  min-height: 0;
  display: flex; /* iç kartı 100% uzatmak için */
}

/* Sağdaki galeri kartı kolonun tamamını alsın */
.page-cover .cover-right .cover-gallery-card{
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Header üstte kalsın */
.page-cover .cover-right .cover-gallery-card .card-header{
  flex: 0 0 auto;
}

/* Galeri grid alanı kalan yüksekliği doldursun + scroll */
.page-cover .cover-right .cover-gallery-card #coverGallery,
.page-cover .cover-right .cover-gallery-card .gallery-grid{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Footer altta kalsın */
.page-cover .cover-right .cover-gallery-card .gallery-footer{
  flex: 0 0 auto;
}



/* =========================================================
   COVER LAYOUT FIX — style cards dar kalıyor (324px) problemi
   - cover-form-grid 2 kolon oranını düzeltir
   - style-cards iç grid'i 3 yerine 2 yapar (dar alanda okunur)
   - mobilde tek kolona düşer
   ========================================================= */

/* 1) Cover form grid: sol (kartlar) daha geniş, sağ (presetler) daha dar */
.page-cover .cover-form-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  column-gap: 18px;
}

/* 2) Style cards: kendi içinde 2 kolon (324px’de 3 kolon olmaz) */
.page-cover .cover-style-cards{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

/* 3) Preset kutusu sağ kolonda kalsın */
.page-cover .cover-presets{
  width: 100%;
}

/* 4) Full alanlar (textarea, selectler, motor açıklaması, buton) iki kolonu da kapsasın */
.page-cover .cover-form-grid .form-field.full{
  grid-column: 1 / -1;
}

/* 5) Küçük ekran: tek kolon */
@media (max-width: 980px){
  .page-cover .cover-form-grid{
    grid-template-columns: 1fr;
  }
  .page-cover .cover-style-cards{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* 6) Çok dar ekran: kartlar tek kolon */
@media (max-width: 560px){
  .page-cover .cover-style-cards{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   COVER — STYLE CARDS (FINAL OVERRIDE)
   - Mevcut global button/chip stillerini ezer
   - Premium kart görünümü + hover/active
   - 2 kolon (sol alan) / mobil uyumlu
   ========================================================= */

.page-cover .cover-style-cards{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

/* geniş ekranda 3 kolon yapma: sol alan daralabiliyor, 2 kolon daha güvenli */
@media (max-width: 560px){
  .page-cover .cover-style-cards{ grid-template-columns: 1fr; }
}

/* BUTTON reset + kart görünümü */
.page-cover .cover-style-cards .style-card{
  -webkit-appearance: none;
  appearance: none;

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;

  width: 100%;
  min-height: 92px;
  padding: 14px 14px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(16, 18, 28, 0.55);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  text-align: left;
  cursor: pointer;
  user-select: none;

  color: rgba(255,255,255,0.92);

  /* global button/chip’leri ez */
  box-shadow: none;
  outline: none;
  text-decoration: none;
}

/* Kart içeriği overlay üstünde */
.page-cover .cover-style-cards .style-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 15% 15%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events:none;
  z-index: 0;
}
.page-cover .cover-style-cards .style-card *{
  position: relative;
  z-index: 1;
}

/* İkon kutusu */
.page-cover .cover-style-cards .style-card-ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);

  font-size: 18px;
  line-height: 1;
}

/* Metin */
.page-cover .cover-style-cards .style-card-text{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.page-cover .cover-style-cards .style-card-title{
  font-weight: 850;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.96);
}
.page-cover .cover-style-cards .style-card-sub{
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.72);
}

/* Hover */
.page-cover .cover-style-cards .style-card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(18, 20, 32, 0.62);
  box-shadow: 0 12px 34px rgba(0,0,0,0.26);
}

/* Active */
.page-cover .cover-style-cards .style-card.is-active{
  border-color: rgba(186,130,255,0.55);
  background: rgba(22, 24, 42, 0.72);
  box-shadow:
    0 0 0 1px rgba(186,130,255,0.22) inset,
    0 16px 46px rgba(0,0,0,0.35);
}
.page-cover .cover-style-cards .style-card.is-active .style-card-ico{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

/* Focus (klavye) */
.page-cover .cover-style-cards .style-card:focus-visible{
  box-shadow: 0 0 0 2px rgba(186,130,255,0.22);
}

/* Eğer başka bir yerde kartları soluklaştıran global opacity varsa kır */
.page-cover .cover-style-cards .style-card,
.page-cover .cover-style-cards .style-card *{
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-text-fill-color: currentColor !important;
}
/* =========================================================
   COVER PRESETS — make them boxed (like screenshot #3)
   ========================================================= */

.page-cover .cover-presets{
  margin-top: 10px;
}

.page-cover .cover-presets-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 10px;
}

.page-cover .cover-presets-title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  line-height: 1.1;
}

.page-cover .cover-presets-sub{
  opacity: .75;
  font-size: 13px;
}

/* 2 kolon kutu düzeni */
.page-cover .cover-presets-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* kutu preset */
.page-cover .preset-chip{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding: 12px 14px;
  min-height: 44px;
  border-radius: 14px;

  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .2px;

  color: rgba(255,255,255,.92);
  background: rgba(18,20,34,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.page-cover .preset-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.24);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.page-cover .preset-chip:active{
  transform: translateY(0px) scale(.99);
}

/* daha geniş ekranda 2 kolon kalsın (senin tasarımına uyuyor) */
@media (min-width: 1100px){
  .page-cover .cover-presets-grid{
    gap: 12px;
  }
}
/* =========================================================
   COVER — STYLE CARDS (WIDE, EITA-LIKE)
   - Desktop: 2 geniş kolon
   - Mobil: 1 kolon
   ========================================================= */

.page-cover .cover-style-cards{
  display: grid;
  gap: 14px;
  margin-top: 14px;

  /* Varsayılan: 2 geniş kolon */
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  align-items: stretch;
}

/* Ekran daralınca otomatik 1 kolona düşsün */
@media (max-width: 860px){
  .page-cover .cover-style-cards{
    grid-template-columns: 1fr;
  }
}

/* Kart ölçüsü / iç yerleşim */
.page-cover .cover-style-cards .style-card{
  min-height: 132px;            /* ince uzun olmasın */
  padding: 16px 16px;
  border-radius: 18px;

  display: flex;
  align-items: center;
  gap: 12px;
}

/* ikon kutusu sabit kalsın */
.page-cover .style-card-ico{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
}

/* Metin alanı: taşmayı kontrol et */
.page-cover .style-card-text{
  min-width: 0;
}

.page-cover .style-card-title{
  font-size: 18px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.page-cover .style-card-sub{
  font-size: 13px;
  line-height: 1.25;

  /* 3 satırdan sonra kırp (dar görünümü engeller) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* =========================================================
   COVER LAYOUT FIX
   - Görüntü Sayısı kartların arkasına düşmesin
   - En / Boy Oranı ile aynı satıra alınsın
   ========================================================= */

/* Stil kartları satırı tam genişlik */
.page-cover .cover-style-cards{
  grid-column: 1 / -1;
}

/* Görüntü sayısı + en/boy alanlarını alt satıra al */
.page-cover .form-field.half{
  grid-column: auto;
}

/* Bu iki alan aynı satırda dursun */
.page-cover .form-field.half{
  display: inline-block;
  width: calc(50% - 8px);
  vertical-align: top;
}

/* Mobilde alt alta düşsün */
@media (max-width: 720px){
  .page-cover .form-field.half{
    width: 100%;
  }
}
/* =========================================================
   COVER — HEADER + GRID BİRLEŞTİR (TEK BÜTÜN PANEL)
   ========================================================= */

/* Başlık kutusunu cover-grid ile aynı “blok” gibi yap */
.page-cover .panel-header{
  width: min(1120px, 100%) !important;   /* cover-grid genişliğiyle aynı band */
  margin: 2px auto 0 auto !important;    /* alt boşluğu sıfır: birleşecek */
  padding: 12px 16px 10px 16px !important;

  border-radius: 18px 18px 0 0 !important;   /* alt köşeler düz */
  border-bottom: 0 !important;               /* birleşim çizgisi olmasın */

  /* daha dengeli premium renk */
  background:
    radial-gradient(120% 140% at 12% 0%,
      rgba(155, 120, 255, 0.18) 0%,
      rgba(155, 120, 255, 0.06) 55%,
      rgba(0,0,0,0) 72%),
    radial-gradient(120% 140% at 90% 10%,
      rgba(90, 180, 255, 0.14) 0%,
      rgba(90, 180, 255, 0.05) 55%,
      rgba(0,0,0,0) 72%),
    rgba(10, 12, 20, 0.52) !important;

  box-shadow:
    0 10px 32px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;

  text-align: center;
}

/* Başlık metnini biraz kompakt tut */
.page-cover .panel-header .panel-title{
  font-size: clamp(22px, 2.0vw, 28px) !important;
  margin: 0 0 3px 0 !important;
}
.page-cover .panel-header .panel-subtitle{
  font-size: 13px !important;
  opacity: 0.86 !important;
  margin: 0 !important;
}

/* cover-grid’i başlık kutusuna yapıştır */
.page-cover .cover-grid{
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;              /* üstte 0: başlıkla birleşsin */
  border-radius: 0 0 18px 18px !important;/* üst köşeler düz */
  border-top: 0 !important;               /* birleşim çizgisi olmasın */

  padding: 12px !important;

  background:
    linear-gradient(180deg,
      rgba(140,120,255,0.06),
      rgba(10,12,20,0.30)) !important;

  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
/* =========================================================
   COVER STYLE CARDS — GRID DENGELEME / TAŞMA FIX
   ========================================================= */

/* Stil kartlarının bulunduğu alan */
.page-cover .cover-style-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* kesin 2 kolon */
  gap: 12px; /* biraz daha sıkı */
}

/* Tek tek kartlar */
.page-cover .style-card{
  min-width: 0;              /* ❗ taşmayı engeller */
  padding: 14px 14px;        /* biraz küçült */
  border-radius: 14px;
}

/* Kart içi ikon */
.page-cover .style-card-ico{
  width: 34px;
  height: 34px;
  font-size: 18px;
}

/* Kart başlığı */
.page-cover .style-card-title{
  font-size: 14px;
}

/* Kart açıklaması */
.page-cover .style-card-sub{
  font-size: 12.5px;
  line-height: 1.4;
}

/* Kartın sağ panele taşmasını kesin engelle */
.page-cover .cover-left{
  overflow: hidden;
}
/* COVER sayfasında sol alttaki ekstra kartları kapat (layout bozulmadan) */
.page-cover .sidebar .sidebar-section:has(.sidebar-title){
}

/* 1) Kapak Presetleri */
.page-cover .sidebar .sidebar-section:has(.sidebar-title):has(.preset-chip-row){
  display:none !important;
}

/* 2) İpucu */
.page-cover .sidebar .sidebar-section.hint-card{
  display:none !important;
}

/* 3) Son Kapaklar (sol sidebar'daki) */
.page-cover .sidebar .sidebar-section:has(.sidebar-title):has(.right-empty),
.page-cover .sidebar .sidebar-section:has(.sidebar-title):has(.right-empty-icon){
  display:none !important;
}
/* COVER sayfasında sol alttaki "Son Kapaklar" kartını kapat */
.page-cover .sidebar .sidebar-section:has(.sidebar-title):has(.sidebar-title){
}

/* Başlığı "Son Kapaklar" olan kart (Safari :has destekliyse) */
.page-cover .sidebar .sidebar-section:has(.sidebar-title){
}

/* Direkt: içinde "Son Kapaklar" kartının boş preview alanı var -> kapat */
.page-cover .sidebar .sidebar-section:has(.right-empty),
.page-cover .sidebar .sidebar-section:has(.right-empty-icon){
  display: none !important;
}
/* =========================================================
   COVER HEADER — SÜREKLİ KAYAN IŞIK (loop)
   Target: "Kapak / Görsel Üret" başlık kutusu
   ========================================================= */

/* Başlık kutusunun ana container'ı */
.page-cover .panel-header{
  position: relative;
  overflow: hidden;
}

/* Kayan ışık katmanı */
.page-cover .panel-header::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,0.18) 50%,
    rgba(155,120,255,0.12) 56%,
    rgba(255,255,255,0) 64%
  );
  transform: rotate(12deg) translateX(-60%);
  animation: aivoHeaderSweep 4.2s linear infinite;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Işık daha premium dursun diye çok hafif “parıltı” */
.page-cover .panel-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    120% 140% at 10% 0%,
    rgba(155,120,255,0.10),
    rgba(0,0,0,0) 60%
  );
  pointer-events:none;
  opacity: 0.8;
}

@keyframes aivoHeaderSweep{
  0%   { transform: rotate(12deg) translateX(-70%); }
  100% { transform: rotate(12deg) translateX(70%); }
}
/* Alternatif: eğer header kutusu "cover-header-card" vb ise */
.page-cover .cover-header,
.page-cover .cover-header-card,
.page-cover .cover-hero{
  position: relative;
  overflow: hidden;
}

.page-cover .cover-header::after,
.page-cover .cover-header-card::after,
.page-cover .cover-hero::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,0.18) 50%,
    rgba(155,120,255,0.12) 56%,
    rgba(255,255,255,0) 64%
  );
  transform: rotate(12deg) translateX(-70%);
  animation: aivoHeaderSweep 4.2s linear infinite;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: 0.9;
}
/* =========================================================
   COVER — HERO (Kapak / Görsel Üret) ALIGN + SLIM + SHIMMER
   - Hero kutusu kalın olmasın, grid ile hizalansın
   - Sayfayı aşağı itmesin
   - İçinden sürekli kayan ışık (subtle shimmer)
   NOT: BUNU studio.app.css / studio.css EN ALTINA KOY
   ========================================================= */

/* 1) HERO kartını grid genişliğiyle aynı hizaya çek */
.page.page-cover[data-page="cover"] .page-hero-card,
.page.page-cover[data-page="cover"] .card.page-hero-card{
  /* grid’inle aynı dil: çok genişlemesin */
  width: min(1120px, calc(100% - 16px)) !important;
  margin: 12px auto 12px !important;

  /* kalın olmasın */
  padding: 10px 14px !important;
  border-radius: 18px !important;

  background: rgba(12, 14, 28, 0.46) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  /* premium cam */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  /* taşma olmasın + shimmer içeride kalsın */
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* 2) İç metin: daha kompakt (kalın görünmesin) */
.page.page-cover[data-page="cover"] .page-hero-inner{
  text-align: center !important;
}

.page.page-cover[data-page="cover"] .page-hero-title{
  font-size: 18px !important;       /* önceki “kocaman” hissi kırar */
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.page.page-cover[data-page="cover"] .page-subtitle{
  margin: 6px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  opacity: 0.78 !important;
}

/* 3) Hero’nun içinde sürekli kayan ışık */
.page.page-cover[data-page="cover"] .page-hero-card::after{
  content: "" !important;
  position: absolute !important;
  top: -35% !important;
  left: -70% !important;
  width: 55% !important;
  height: 170% !important;
  pointer-events: none !important;
  z-index: 0 !important;

  background: linear-gradient(
    110deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.06) 38%,
    rgba(190,140,255,0.14) 50%,
    rgba(255,160,210,0.10) 60%,
    rgba(255,255,255,0.00) 78%
  ) !important;

  filter: blur(0.2px) !important;
  opacity: 0.80 !important;
  transform: skewX(-18deg) translateX(-10%) !important;

  animation: aivoCoverHeroShimmer 3.6s linear infinite !important;
}

/* içerik shimmer’ın üstünde kalsın */
.page.page-cover[data-page="cover"] .page-hero-card > *{
  position: relative !important;
  z-index: 1 !important;
}

@keyframes aivoCoverHeroShimmer{
  0%   { left: -70%; }
  100% { left: 140%; }
}

/* hareket azaltma */
@media (prefers-reduced-motion: reduce){
  .page.page-cover[data-page="cover"] .page-hero-card::after{
    animation: none !important;
    opacity: 0.35 !important;
  }
}
/* =========================================================
   COVER HERO — Sürekli akan ışık (SOLDAN → SAĞA)
   Sadece Kapak / Görsel Üret açıkken çalışır
   ========================================================= */

/* Hero kart referans */
.page.page-cover[data-page="cover"] .page-hero-card{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Akan ışık */
.page.page-cover[data-page="cover"] .page-hero-card::before{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 45%;
  height: 180%;
  pointer-events: none;
  z-index: 0;

  /* İnce, premium ışık bandı */
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(170,120,255,0.18) 50%,
    rgba(255,160,210,0.12) 60%,
    rgba(255,255,255,0.00) 75%
  );

  opacity: 0.85;
  filter: blur(0.3px);
  transform: skewX(-18deg);

  animation: coverHeroLightLTR 3.2s linear infinite;
}

/* İçerik ışığın üstünde kalsın */
.page.page-cover[data-page="cover"] .page-hero-card > *{
  position: relative;
  z-index: 1;
}

/* SOLDAN → SAĞA akış */
@keyframes coverHeroLightLTR{
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce){
  .page.page-cover[data-page="cover"] .page-hero-card::before{
    animation: none;
    opacity: 0.35;
  }
}
/* =========================================================
   PAGE: COVER — Grid yukarı al (player üstüne binmeden)
   ========================================================= */

/* Player yüksekliğini referans al */
:root{
  --aivo-player-h: 72px; /* sende zaten tanımlı */
}

/* Cover ana paneli biraz yukarı çek */
.page.page-cover[data-page="cover"] .main-panel.cover-main{
  padding-bottom: calc(var(--aivo-player-h) + 12px) !important;
}

/* Asıl grid’i yukarı alıyoruz */
.page.page-cover[data-page="cover"] .cover-grid{
  margin-top: -10px !important;  /* 👈 BURASI kritik */
}

/* Kartların alt boşluğunu sıkılaştır */
.page.page-cover[data-page="cover"] .cover-left,
.page.page-cover[data-page="cover"] .cover-gallery-card{
  margin-bottom: 0 !important;
}

/* Mobilde fazla yukarı çıkmasın */
@media (max-width: 900px){
  .page.page-cover[data-page="cover"] .cover-grid{
    margin-top: 0 !important;
  }
}
/* =============================
   OUTPUT CARD (SM PACK) — tidy UI
   ============================= */
.right-output-card{
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.right-output-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.right-output-title{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}

.right-output-sub{
  opacity: .75;
  font-size: 12px;
  margin-top: 2px;
}

.right-output-pill{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(120,90,255,.18);
  border: 1px solid rgba(160,140,255,.30);
  white-space: nowrap;
}

.right-output-items{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.right-output-row{
  display:grid;
  grid-template-columns: 30px 1fr auto;
  gap:10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(255,255,255,.10);
}

.right-output-num{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  background: rgba(120,90,255,.18);
  border: 1px solid rgba(160,140,255,.30);
}

.right-output-label{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}

.right-output-text{
  font-size: 13px;
  line-height: 1.35;
  opacity: .92;
  word-break: break-word;
}

.right-output-status{
  font-weight: 700;
  color: rgba(185,255,205,.92);
  white-space: nowrap;
  padding-top: 2px;
}
.right-output-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.right-copy-btn{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  cursor:pointer;
}

.right-copy-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
/* =========================================================
   RIGHT PANEL — job chips overlap fix
   - "sm_pack • done" / "viral_hook • done" üst üste binmesin
   - Kart içindeki "Tamamlandı" pill ile çakışmayı keser
   ========================================================= */

/* Sağ panelde chip'lerin kapsayıcısı (varsa) */
.right-panel .right-card{
  position: relative;
}

/* Bu chip'ler genelde absolute gelir; biz stack yapıyoruz */
.right-panel .right-card .job-badge,
.right-panel .right-card .job-pill,
.right-panel .right-card .right-job-pill,
.right-panel .right-card [data-job-pill],
.right-panel .right-card [data-job-badge]{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 8px 0 0 auto !important;
  display: inline-flex !important;
  z-index: 2 !important;
}

/* Chip'leri tutan bir container yoksa ve direkt right-card içine basılıyorsa */
.right-panel .right-card > .job-badge,
.right-panel .right-card > .job-pill,
.right-panel .right-card > .right-job-pill{
  float: right;
  clear: both;
}

/* Çıktı kartlarının header'ı zaten var: onun üstüne binenleri engelle */
.right-output-card{
  position: relative;
  z-index: 1;
}

/* Hook kartı içinde "Tamamlandı" pill'i varsa üstte nefes alanı ver */
.right-panel .right-list{
  padding-top: 8px;
}
/* =========================================================
   ✅ AIVO DASHBOARD KPI — REVIZE CSS (TEK BLOK)
   - Eski KPI CSS + pill renk patch'ini SİL, bununla değiştir
   - Daha premium kart, daha net tipografi
   - Pill renkleri (ok/warn/low) + hover/focus cilası
   ========================================================= */

/* WRAP + GRID */
.aivo-kpi-wrap { margin-top: 12px; }

.aivo-kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* CARD */
.aivo-kpi-card{
  padding: 14px 14px 12px;
  border-radius: 18px;
  min-height: 138px;
  position: relative;
  overflow: hidden;

  /* kart gövdesi daha “cam” */
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* has-gradient varsa da uyumlu dursun */
.aivo-kpi-card.has-gradient{
  border-color: rgba(160,120,255,.14);
  box-shadow:
    0 12px 32px rgba(0,0,0,.30),
    0 0 0 1px rgba(160,120,255,.06) inset,
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* üstte ince glow */
.aivo-kpi-card::before{
  content:"";
  position:absolute;
  inset: -1px;
  pointer-events:none;
  background: radial-gradient(800px 120px at 25% 0%, rgba(160,120,255,.10), transparent 55%);
  opacity: .9;
}

/* hover cilası */
.aivo-kpi-card:hover{
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* TOP */
.aivo-kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.aivo-kpi-title{
  font-size: 13px;
  opacity: .78;
  margin-bottom: 6px;
  letter-spacing: .01em;
}

.aivo-kpi-value{
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 750;
  display:flex;
  align-items:baseline;
  gap: 8px;
}

.aivo-kpi-unit{
  font-size: 12px;
  opacity: .70;
  font-weight: 650;
}

/* PILL */
.aivo-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  opacity: .96;
}

.aivo-pill--muted{
  opacity: .78;
  background: rgba(255,255,255,.04);
}

/* ✅ KPI pill durumları (REVIZE) */
.aivo-pill.is-ok{
  border-color: rgba(120,255,200,.22);
  background: rgba(120,255,200,.10);
}
.aivo-pill.is-warn{
  border-color: rgba(255,210,120,.22);
  background: rgba(255,210,120,.10);
}
.aivo-pill.is-low{
  border-color: rgba(255,120,160,.22);
  background: rgba(255,120,160,.10);
}

/* META */
.aivo-kpi-meta{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.aivo-kpi-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
}

.aivo-kpi-meta-label{ opacity: .72; }
.aivo-kpi-meta-val{ opacity: .92; font-weight: 700; }

.aivo-kpi-inline{
  font-size: 12px;
  opacity: .86;
  line-height: 1.35;
}

/* ACTIONS */
.aivo-kpi-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* chip-btn cilası (var olan chip-btn’lerle uyumlu) */
.aivo-kpi-card .chip-btn{
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
}

/* PROGRESS */
.aivo-kpi-progress{
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  margin-top: 10px;
}

.aivo-kpi-progress-bar{
  height: 100%;
  border-radius: 999px;
  background: rgba(160,120,255,.55);
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .aivo-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .aivo-kpi-grid{ grid-template-columns: 1fr; }
  .aivo-kpi-value{ font-size: 25px; }
}

/* =========================================================
   DASHBOARD — HIZLI KISAYOLLAR (KONTRAST FIX)
   Yazılar görünmüyordu → opacity & color override
   ========================================================= */

.aivo-dash-quick{
  margin-top: 18px;
}

/* Başlık alanı */
.aivo-dash-block-title{
  color: #ffffff;
  font-weight: 800;
  opacity: 1;
}

.aivo-dash-block-sub{
  color: rgba(255,255,255,.75);
  opacity: 1;
}

/* GRID */
.aivo-quick-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* CARD */
.aivo-quick-card{
  background: rgba(20,22,40,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
  text-align: left;
  cursor: pointer;

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

  /* ⛔ opacity mirasını KES */
  opacity: 1;
  color: #fff;

  box-shadow:
    0 12px 34px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.aivo-quick-card:hover{
  transform: translateY(-2px);
  border-color: rgba(160,120,255,.35);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(160,120,255,.15) inset;
}

/* ICON */
.aivo-quick-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);

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

  font-size: 18px;
  color: #fff;
  opacity: 1;
}

/* TEXT */
.aivo-quick-title{
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  opacity: 1;
}

.aivo-quick-sub{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.80);
  opacity: 1;
}

/* META */
.aivo-quick-meta{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* CREDIT PILL */
.aivo-quick-pill{
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;

  color: #ffffff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  opacity: 1;
}

/* ARROW */
.aivo-quick-go{
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.65);
  opacity: 1;
}

/* RESPONSIVE */
@media (max-width: 1200px){
  .aivo-quick-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .aivo-quick-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .aivo-quick-grid{ grid-template-columns: 1fr; }
}
/* ================= DASHBOARD ACTIVITY ================= */
.aivo-dash-activity{ margin-top: 18px; }

.aivo-activity-card{
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(20,22,40,.50);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 12px 34px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.aivo-activity-list{
  display:flex;
  flex-direction:column;
}

.aivo-activity-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.aivo-activity-item:first-child{
  border-top: none;
}

.aivo-activity-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.aivo-activity-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  flex: 0 0 auto;
}

.aivo-activity-text{
  min-width: 0;
}

.aivo-activity-title{
  font-size: 13px;
  font-weight: 850;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aivo-activity-sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aivo-activity-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.aivo-activity-time{
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

/* Badges */
.aivo-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: #fff;
}

.aivo-badge--muted{
  opacity: .75;
}

.aivo-badge--ok{
  border-color: rgba(120,255,200,.22);
  background: rgba(120,255,200,.10);
}

.aivo-badge--warn{
  border-color: rgba(255,210,120,.22);
  background: rgba(255,210,120,.10);
}

.aivo-badge--low{
  border-color: rgba(255,120,160,.22);
  background: rgba(255,120,160,.10);
}

/* Demo satırları biraz soluk olsun */
.aivo-activity-item.is-dim{
  opacity: .55;
}
/* =========================================================
   DASHBOARD — SON İŞLER (SİLİKLİK FIX)
   - demo satırları artık soluk değil
   - badge/time kontrast arttı
   ========================================================= */

/* Demo satırlarını soluk yapma (is-dim varsa bile) */
.aivo-activity-item.is-dim{
  opacity: 1 !important;
}

/* Satır içi metinleri biraz güçlendir */
.aivo-activity-title{
  color: rgba(255,255,255,.96);
}
.aivo-activity-sub{
  color: rgba(255,255,255,.74);
}

/* Sağ taraf (badge + time) daha net */
.aivo-activity-time{
  color: rgba(255,255,255,.70);
  font-weight: 650;
}

/* Badge'ler daha belirgin */
.aivo-badge{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* durum renkleri daha güçlü */
.aivo-badge--ok{
  border-color: rgba(120,255,200,.30);
  background: rgba(120,255,200,.14);
}
.aivo-badge--warn{
  border-color: rgba(255,210,120,.30);
  background: rgba(255,210,120,.14);
}
.aivo-badge--low{
  border-color: rgba(255,120,160,.30);
  background: rgba(255,120,160,.14);
}
.aivo-badge--muted{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  opacity: .92; /* muted ama okunur */
}
/* =========================================================
   DASHBOARD — SON İŞLER (LAYOUT + BADGE FIX)
   - Sağdaki dev yuvarlak badge sorununu düzeltir
   - Badge + time hizasını düzeltir
   - Satır çizgilerini netleştirir
   ========================================================= */

/* Satırlar arası çizgi biraz daha net */
.aivo-activity-item{
  border-top-color: rgba(255,255,255,.08);
}

/* Sağ blok: hizalı + sabit genişlik */
.aivo-activity-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 190px;
}

/* Badge: gerçek pill olsun (koca balon olmasın) */
.aivo-badge{
  padding: 7px 12px;
  border-radius: 999px;
  line-height: 1;
  font-size: 12px;
  font-weight: 850;

  /* Balon etkisini kır */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;

  /* Net kontrast */
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Durum renkleri biraz daha belirgin */
.aivo-badge--ok{
  border-color: rgba(120,255,200,.32);
  background: rgba(120,255,200,.14);
}
.aivo-badge--warn{
  border-color: rgba(255,210,120,.32);
  background: rgba(255,210,120,.14);
}
.aivo-badge--low{
  border-color: rgba(255,120,160,.32);
  background: rgba(255,120,160,.14);
}
.aivo-badge--muted{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  opacity: .95;
}

/* Zaman: tek satır, daha okunur */
.aivo-activity-time{
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
  color: rgba(255,255,255,.72);
}

/* Mobilde sağ blok alt satıra insin */
@media (max-width: 720px){
  .aivo-activity-item{
    flex-direction: column;
    align-items: flex-start;
  }
  .aivo-activity-right{
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
  }
}
/* =========================================================
   DASHBOARD — POLISH (BÖLÜM AYIRICI + IŞIK/GLASS CİLA)
   - başlıkları mini kart yapar
   - section aralarını glow separator ile bağlar
   - kart içi üst glow + hover cilası
   ========================================================= */

/* 1) Bölümler arası ritim */
.aivo-dash-quick,
.aivo-dash-activity{
  position: relative;
  margin-top: 22px;
}

/* 2) Section separator (üstte yumuşak çizgi) */
.aivo-dash-quick::before,
.aivo-dash-activity::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(160,120,255,.18),
    rgba(255,255,255,.10),
    rgba(160,120,255,.18),
    transparent
  );
  opacity: .9;
}

/* 3) Section head’i mini “glass bar” yap */
.aivo-dash-block-head{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow:
    0 10px 26px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* head’in üstten glow’u */
.aivo-dash-block-head::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events:none;
  background: radial-gradient(600px 90px at 18% 0%,
    rgba(160,120,255,.14),
    transparent 60%
  );
  opacity: .9;
}

/* head içindeki başlık/sub net */
.aivo-dash-block-title{ color: rgba(255,255,255,.96); }
.aivo-dash-block-sub{ color: rgba(255,255,255,.72); }

/* 4) Quick kartlara iç glow + ok/pill hiyerarşisi */
.aivo-quick-card{
  position: relative;
  overflow: hidden;
}

.aivo-quick-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(700px 140px at 25% 0%,
    rgba(160,120,255,.16),
    transparent 55%
  );
  opacity: .75;
}

/* ok daha “hafif”, pill daha “net” */
.aivo-quick-go{
  color: rgba(255,255,255,.55);
  transition: transform .18s ease, color .18s ease;
}
.aivo-quick-card:hover .aivo-quick-go{
  transform: translateX(2px);
  color: rgba(255,255,255,.72);
}

.aivo-quick-pill{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}

/* 5) Son İşler kartının içinde glow */
.aivo-activity-card{
  position: relative;
  overflow: hidden;
}
.aivo-activity-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(900px 140px at 30% 0%,
    rgba(160,120,255,.14),
    transparent 60%
  );
  opacity: .8;
}

/* 6) Son İşler divider çizgisini yumuşat */
.aivo-activity-item{
  border-top: none !important;
  position: relative;
}
.aivo-activity-item::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.08),
    rgba(160,120,255,.12),
    rgba(255,255,255,.08),
    transparent
  );
  opacity: .9;
}
.aivo-activity-item:first-child::before{ display:none; }

/* 7) Satır hover: çok hafif parıltı */
.aivo-activity-item:hover{
  background: rgba(255,255,255,.02);
}

/* 8) Dashboard üst header kutusu görünmüyorsa zorla netleştir */
.page-dashboard .aivo-sec-head{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
}
/* =========================================================
   DASHBOARD — BLOCK HEAD (CENTER + WIDE) — FINAL
   - Başlık ortada ama dar kalmaz
   - CTA sol/sağ sabitlenir, metni sıkıştırmaz
   - “Silik” hissini azaltır
   ========================================================= */

.aivo-dash-quick .aivo-dash-block-head,
.aivo-dash-activity .aivo-dash-block-head{
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  /* head görünümü */
  padding: 22px 22px;
  border-radius: 22px;
  opacity: 1 !important;
}

/* Head içindeki metin bloğu: ortada ve geniş */
.aivo-dash-quick .aivo-dash-block-head > div:first-child,
.aivo-dash-activity .aivo-dash-block-head > div:first-child{
  width: 100%;
  max-width: 980px;           /* “geniş ama kontrollü” */
  margin: 0 auto;
  text-align: center;
}

/* Başlık / alt metin: silikliği azalt */
.aivo-dash-block-title{
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
}

.aivo-dash-block-sub{
  color: rgba(255,255,255,.70);
}

/* Head içindeki CTA butonları: metni sıkıştırmadan kenarlara sabitle */
.aivo-dash-quick .aivo-dash-block-head .chip-btn,
.aivo-dash-activity .aivo-dash-block-head .chip-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  z-index: 2;
}

/* Soldaki CTA */
.aivo-dash-quick .aivo-dash-block-head .chip-btn{
  left: 18px;
}

/* Aktivite/son işler bölümünde buton da varsa sola sabitle */
.aivo-dash-activity .aivo-dash-block-head .chip-btn{
  left: 18px;
}

/* Mobil: buton üstte, metin altta ortalı */
@media (max-width: 860px){
  .aivo-dash-quick .aivo-dash-block-head,
  .aivo-dash-activity .aivo-dash-block-head{
    padding-top: 62px;
  }

  .aivo-dash-quick .aivo-dash-block-head .chip-btn,
  .aivo-dash-activity .aivo-dash-block-head .chip-btn{
    top: 18px;
    left: 18px;
    transform: none;
  }

  .aivo-dash-quick .aivo-dash-block-head > div:first-child,
  .aivo-dash-activity .aivo-dash-block-head > div:first-child{
    max-width: 100%;
  }
}
/* =========================================================
   DASHBOARD LAYOUT — 3 COLUMN FIX
   - sidebar | main-panel | right-panel
   - right-panel alt satıra düşmesin
   ========================================================= */

.page-dashboard .layout{
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.page-dashboard .sidebar{
  grid-column: 1;
  min-width: 0;
}

.page-dashboard .main-panel{
  grid-column: 2;
  min-width: 0; /* önemli: taşmayı engeller */
}

.page-dashboard .right-panel{
  grid-column: 3;
  min-width: 0;
}

/* Responsive: dar ekranda sağ panel aşağı insin (normal) */
@media (max-width: 1180px){
  .page-dashboard .layout{
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .page-dashboard .right-panel{
    grid-column: 1 / -1;
  }
}
@media (max-width: 860px){
  .page-dashboard .layout{
    grid-template-columns: 1fr;
  }
  .page-dashboard .sidebar,
  .page-dashboard .main-panel,
  .page-dashboard .right-panel{
    grid-column: 1 / -1;
  }
}
/* =========================================================
   DASHBOARD – SON İŞLER (EMPTY STATE & MIN HEIGHT FIX)
   Bu blok EN ALTA eklenecek
   ========================================================= */

.page-dashboard .aivo-activity-card{
  min-height: 220px;
}

.page-dashboard [data-dashboard-recent-jobs]{
  min-height: 120px;
}

/* Empty state varsa ortala */
.page-dashboard .dash-recent-empty,
.page-dashboard .aivo-activity-item{
  margin-top: 8px;
}
/* ================= DASHBOARD / SON İŞLER — PATCH ================= */
.aivo-activity-list [data-dashboard-recent-jobs]{
  min-height: 72px;         /* boşken kartı çökertmez */
}

.aivo-activity-list.is-compact{
  max-height: 320px;        /* çok uzamasın */
  overflow: auto;
}

.aivo-recent-empty{
  padding: 14px 12px;
  opacity: .78;
  display: flex;
  gap: 10px;
  align-items: center;
}

.aivo-recent-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.aivo-recent-left{
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.aivo-recent-ico{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}

.aivo-recent-title{
  font-weight: 650;
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52ch;
}

.aivo-recent-sub{
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56ch;
}

.aivo-recent-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.aivo-recent-badge{
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.aivo-recent-time{
  font-size: 11px;
  opacity: .75;
}
/* ================= DASHBOARD: SON ISLER — VISIBILITY FIX ================= */
.aivo-activity-card,
.aivo-activity-list,
[data-dashboard-recent-jobs]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
}

.aivo-activity-card{
  min-height: 140px;
}

/* Eğer parent overflow yüzünden kesiliyorsa */
.aivo-activity-list{
  overflow: visible !important;
}

/* Render edilen yeni sınıflar (senin DOM çıktında var) */
.dash-recent-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-recent-item{
  display: block;
}

.dash-recent-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dash-recent-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Yazılar görünmüyorsa (bazı temalarda renk 0 gibi kalıyor) */
.dash-recent-row,
.dash-recent-row *{
  color: inherit;
}
/* ================= /DASHBOARD: SON ISLER — VISIBILITY FIX ================= */

/* DASHBOARD RECENT — LAYER FIX */
.aivo-activity-card,
.aivo-activity-list,
[data-dashboard-recent-jobs]{
  position: relative;
  z-index: 5;
  isolation: isolate;
}
/* ================= DASHBOARD SON ISLER — SAFARI HIT-TEST FIX ================= */

/* Kartı ayrı bir compositing layer yap + izolasyon */
.aivo-activity-card,
.aivo-activity-list,
[data-dashboard-recent-jobs]{
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 10;
}

/* Eğer üstten gelen pseudo/gradient katmanları varsa kırp */
.aivo-activity-card{
  overflow: hidden; /* gerekirse clip yapar */
}

/* İçerik kesin görünür olsun */
[data-dashboard-recent-jobs],
[data-dashboard-recent-jobs] *{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ================= /DASHBOARD SON ISLER — SAFARI HIT-TEST FIX ================= */
/* =========================
   START: AIVO Dashboard "Son İşler" — Safari/WebKit Layer Fix (CLEAN)
   - Safari/WebKit compositing + hit-test sorununu kalıcı çözer
   ========================= */

/* 1) Dashboard ana sarmalayıcı: ayrı stacking context / izolasyon */
.page-dashboard,
.aivo-dashboard,
.aivo-dash,
.dashboard,
[data-page="dashboard"],
.page-dashboard .main-panel,
.page-dashboard .main-wrap,
.page-dashboard .content,
.page-dashboard .panel,
.page-dashboard .panel-body{
  position: relative !important;
  isolation: isolate !important;         /* kritik: pseudo-layer bleed keser */
  z-index: 0 !important;
}

/* 2) Son İşler container: kendi compositing layer’ı */
[data-dashboard-recent-jobs]{
  position: relative !important;
  z-index: 10 !important;                /* üst katmanları delmek için */
  isolation: isolate !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  /* Safari'de blur/gradient taşmaları hit-test'i kırmasın */
  overflow: clip !important;             /* destek yoksa hidden'a düşer */
  contain: layout paint style !important;/* layout + paint sınırı */
}

/* overflow:clip desteklenmeyen tarayıcılar için fallback */
@supports not (overflow: clip){
  [data-dashboard-recent-jobs]{ overflow: hidden !important; }
}

/* 3) Kart / liste elemanları da aynı layer içinde kalsın */
[data-dashboard-recent-jobs] .dash-recent-list,
[data-dashboard-recent-jobs] .dash-recent-item,
[data-dashboard-recent-jobs] .card,
[data-dashboard-recent-jobs] .aivo-card{
  position: relative !important;
  z-index: 1 !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
}

/* 4) Blur / gradient pseudo-layer’ların hit-test’i boğmasını engelle */
.page-dashboard *::before,
.page-dashboard *::after{
  pointer-events: none !important;
}

/* =========================
   END: AIVO Dashboard "Son İşler" — Safari/WebKit Layer Fix (CLEAN)
   ========================= */
/* ================= EMPTY STATE: DASHBOARD SON ISLER ================= */

.dash-empty{
  min-height: 140px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: rgba(255,255,255,.92);
}

.dash-empty-icon{
  font-size: 20px;
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(160,120,255,.35));
}

.dash-empty-title{
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
}

.dash-empty-sub{
  font-size: 13px;
  opacity: .65;
  max-width: 320px;
}

.dash-empty-line{
  margin-top: 12px;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(140,100,255,.9),
    transparent
  );
}
/* =========================
   START: DASHBOARD "SON İŞLER" EMPTY STATE — PREMIUM
   (JS'in bastığı: .dash-recent-empty / -title / -sub)
   ========================= */

[data-dashboard-recent-jobs] .dash-recent-empty{
  min-height: 140px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  color: rgba(255,255,255,.92);
  position: relative;
  isolation: isolate;
}

/* Üstte küçük premium ikon */
[data-dashboard-recent-jobs] .dash-recent-empty::before{
  content: "✨";
  display: block;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
  opacity: .92;
  filter: drop-shadow(0 0 7px rgba(160,120,255,.35));
}

/* Başlık */
[data-dashboard-recent-jobs] .dash-recent-empty-title{
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .2px;
  margin: 0;
}

/* Açıklama */
[data-dashboard-recent-jobs] .dash-recent-empty-sub{
  font-size: 13px;
  opacity: .68;
  margin: 0;
  max-width: 360px;
}

/* Altta ince premium çizgi */
[data-dashboard-recent-jobs] .dash-recent-empty::after{
  content: "";
  width: 68px;
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(140,100,255,.95),
    transparent
  );
  opacity: .95;
}

/* =========================
   END: DASHBOARD "SON İŞLER" EMPTY STATE — PREMIUM
   ========================= */
/* =========================
   START: DASHBOARD "SON İŞLER" — PREMIUM LIST ITEM UI
   ========================= */

/* Liste konteyneri */
[data-dashboard-recent-jobs] .dash-recent-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

/* Item (satır) */
[data-dashboard-recent-jobs] .dash-recent-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 14px;

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  cursor: pointer;
  user-select: none;
}

/* Hover premium */
[data-dashboard-recent-jobs] .dash-recent-item:hover{
  border-color: rgba(160,120,255,.28);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transform: translateY(-1px);
}

/* Sol blok (başlık + meta) */
[data-dashboard-recent-jobs] .dash-recent-left{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Başlık */
[data-dashboard-recent-jobs] .dash-recent-title{
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta: Tür • tarih */
[data-dashboard-recent-jobs] .dash-recent-meta{
  font-size: 12px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sağ blok (durum) */
[data-dashboard-recent-jobs] .dash-recent-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Durum pill */
[data-dashboard-recent-jobs] .dash-recent-status{
  font-size: 12px;
  font-weight: 650;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}

/* Durum renk tonları (opsiyonel class ile) */
[data-dashboard-recent-jobs] .dash-recent-status.is-queued{
  border-color: rgba(240,200,80,.25);
  background: rgba(240,200,80,.08);
  color: rgba(255,230,160,.95);
}
[data-dashboard-recent-jobs] .dash-recent-status.is-running{
  border-color: rgba(120,180,255,.25);
  background: rgba(120,180,255,.08);
  color: rgba(200,230,255,.95);
}
[data-dashboard-recent-jobs] .dash-recent-status.is-done{
  border-color: rgba(120,255,180,.20);
  background: rgba(120,255,180,.08);
  color: rgba(200,255,230,.95);
}
[data-dashboard-recent-jobs] .dash-recent-status.is-failed{
  border-color: rgba(255,120,140,.22);
  background: rgba(255,120,140,.08);
  color: rgba(255,210,220,.95);
}

/* Sağda küçük ok */
[data-dashboard-recent-jobs] .dash-recent-arrow{
  opacity: .55;
  font-size: 14px;
  transform: translateY(-.5px);
}

/* -------------------------
   FALLBACK: Eğer JS şu an class basmıyorsa
   (örn: tek bir div içine "Müzik Üretimi ... Kuyrukta" text basılıyorsa)
   bu durumda içerideki ilk child div'leri satır gibi yapar.
   ------------------------- */

[data-dashboard-recent-jobs] > div:not(.dash-recent-empty):not(.dash-empty){
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

[data-dashboard-recent-jobs] > div:not(.dash-recent-empty):not(.dash-empty) > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 14px;

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
}

/* =========================
   END: DASHBOARD "SON İŞLER" — PREMIUM LIST ITEM UI
   ========================= */
/* =========================
   DASHBOARD JOB ITEM — KAYAN IŞIK (SHIMMER / SWEEP)
   ========================= */

/* Efekti taşıyacak olan job satırı */
[data-dashboard-recent-jobs] .dash-recent-item{
  position: relative;
  overflow: hidden;
}

/* Kayan ışık katmanı */
[data-dashboard-recent-jobs] .dash-recent-item::after{
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(180,140,255,.18) 45%,
    rgba(220,200,255,.28) 50%,
    rgba(180,140,255,.18) 55%,
    transparent 100%
  );

  transform: skewX(-12deg);
  opacity: .55;

  animation: dash-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* Animasyon */
@keyframes dash-sweep{
  0%   { left: -45%; }
  55%  { left: 110%; }
  100% { left: 110%; }
}

/* =========================
   OPSİYONEL: SADECE KUYRUKTA / ÇALIŞIYORSA AKSIN
   (Eğer bu class'ları basıyorsan)
   ========================= */

[data-dashboard-recent-jobs] .dash-recent-item:not(.is-queued):not(.is-running)::after{
  display: none;
}

/* =========================
   PERFORMANS / MOBİL OPT
   ========================= */
@media (prefers-reduced-motion: reduce){
  [data-dashboard-recent-jobs] .dash-recent-item::after{
    animation: none;
    display: none;
  }
}
/* =========================
   DASHBOARD CARD — SOFT EDGE GLOW
   ========================= */

.aivo-dash-activity .card,
.aivo-dash-metrics .card,
.aivo-quick-card{
  position: relative;
  overflow: hidden;
}

/* İnce kenar efekti */
.aivo-dash-activity .card::before,
.aivo-dash-metrics .card::before,
.aivo-quick-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(160,120,255,.25),
      transparent 70%
    );

  opacity: .15;
  transition: opacity .25s ease;
}

/* Hover’da biraz belirginleşsin */
.aivo-dash-activity .card:hover::before,
.aivo-quick-card:hover::before{
  opacity: .35;
}

/* Job çalışıyorsa biraz daha canlı */
.dash-recent-item.is-queued::before,
.dash-recent-item.is-running::before{
  opacity: .45;
}
/* =========================================================
   LIBRARY — CARD GRID (ÜRETTİKLERİM)
   ========================================================= */

.library-grid{
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}

.library-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1200px){
  .library-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .library-cards{ grid-template-columns: 1fr; }
}

.prod-card{
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  cursor: pointer;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.prod-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.045);
  border-color: rgba(170,140,255,0.35);
}

.prod-card:active{
  transform: translateY(0px);
}

.prod-thumb{
  height: 56px;
  width: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(120% 120% at 30% 10%, rgba(170,140,255,0.45), rgba(0,0,0,0) 65%),
              rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
}

.prod-thumb--music{
  background: radial-gradient(120% 120% at 30% 10%, rgba(130,190,255,0.45), rgba(0,0,0,0) 65%),
              rgba(255,255,255,0.03);
}
.prod-thumb--video{
  background: radial-gradient(120% 120% at 30% 10%, rgba(255,170,210,0.45), rgba(0,0,0,0) 65%),
              rgba(255,255,255,0.03);
}
.prod-thumb--cover{
  background: radial-gradient(120% 120% at 30% 10%, rgba(180,255,220,0.38), rgba(0,0,0,0) 65%),
              rgba(255,255,255,0.03);
}

.prod-ico{
  font-size: 18px;
  opacity: 0.95;
}

.prod-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.prod-top{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.prod-title{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.prod-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.72;
}

.prod-dot{ opacity: 0.55; }

.prod-pill{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  white-space: nowrap;
}

.prod-pill--done{
  border-color: rgba(140,255,200,0.22);
  background: rgba(140,255,200,0.08);
}

.prod-pill--proc{
  border-color: rgba(170,140,255,0.28);
  background: rgba(170,140,255,0.10);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pill-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
  animation: aivoPulse 1.1s ease-in-out infinite;
}

@keyframes aivoPulse{
  0%, 100%{ transform: scale(0.75); opacity: .55; }
  50%{ transform: scale(1.0); opacity: 1; }
}

/* Hover actions */
.prod-actions{
  display: flex;
  gap: 10px;
  opacity: 0.0;
  transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease;
  font-size: 12px;
}

.prod-card:hover .prod-actions{
  opacity: 0.85;
  transform: translateY(0px);
}

.prod-action{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
/* =========================================================
   LIBRARY — FIX PACK (toolbar + chips + search + grid polish)
   ========================================================= */

.page-library .library-card{
  padding: 14px;
}

.page-library .library-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.page-library .library-filters-inline{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Default button style reset (çok önemli) */
.page-library .filter-chip{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.page-library .filter-chip:hover{
  border-color: rgba(170,140,255,0.35);
  background: rgba(255,255,255,0.06);
}

.page-library .filter-chip.is-active{
  border-color: rgba(170,140,255,0.55);
  background: linear-gradient(135deg, rgba(106,92,255,0.85), rgba(155,124,255,0.55));
}

/* Search */
.page-library .library-search{
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  min-width: 220px;
}

.page-library .library-search::placeholder{
  color: rgba(255,255,255,0.45);
}

.page-library .library-search:focus{
  border-color: rgba(170,140,255,0.45);
  box-shadow: 0 0 0 3px rgba(170,140,255,0.10);
}

/* Grid container görünümünü sadeleştir */
.page-library .library-grid{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
}

/* Kartlar biraz daha “düzgün” otursun */
.page-library .library-cards{
  gap: 12px;
}

.page-library .prod-card{
  min-height: 84px;
}

.page-library .prod-title{
  max-width: 100%;
}

/* Sağdaki pill taşmasın */
.page-library .prod-top{
  gap: 10px;
}

.page-library .prod-pill{
  flex: 0 0 auto;
}

/* Hover aksiyonları “kartın içinde” daha temiz dursun */
.page-library .prod-actions{
  margin-top: 2px;
}
/* =========================================================
   LIBRARY — REVIZE (toolbar + chips + search + selection + preview)
   ========================================================= */

/* Toolbar */
.page-library .library-card{ padding: 14px; }

.page-library .library-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.page-library .library-filters-inline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Chip (default reset) */
.page-library .filter-chip{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.92);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}

.page-library .filter-chip:hover{
  border-color: rgba(170,140,255,0.35);
  background: rgba(255,255,255,0.06);
}

.page-library .filter-chip.is-active{
  border-color: rgba(170,140,255,0.55);
  background: linear-gradient(135deg, rgba(106,92,255,0.85), rgba(155,124,255,0.55));
}

/* Search */
.page-library .library-search{
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  min-width: 220px;
}

.page-library .library-search::placeholder{ color: rgba(255,255,255,0.45); }

.page-library .library-search:focus{
  border-color: rgba(170,140,255,0.45);
  box-shadow: 0 0 0 3px rgba(170,140,255,0.10);
}

/* Grid wrapper */
.page-library .library-grid{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
}

/* Cards grid (senin mevcut prod-card CSS’inle uyumlu) */
.page-library .library-cards{ gap: 12px; }

/* Selected card ring */
.page-library .prod-card.is-selected{
  border-color: rgba(170,140,255,0.55);
  box-shadow: 0 0 0 3px rgba(170,140,255,0.12);
}

/* Right panel: ikon + preview alt alta, düzgün */
.page-library .right-empty{
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.page-library .lib-preview{
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.page-library .lib-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.page-library .lib-preview-title{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.page-library .lib-preview-meta{
  font-size: 12px;
  opacity: 0.70;
  white-space: nowrap;
}

.page-library .lib-preview-box{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  padding: 12px;
  min-height: 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.page-library .lib-preview-box audio{ width: 100%; }
/* =========================================================
   LIBRARY — SWEEP (processing cards)
   ========================================================= */

.page-library .prod-card[data-status="processing"]{
  position: relative;
  overflow: hidden;
}

.page-library .prod-card[data-status="processing"]::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0.9;
  pointer-events:none;
  animation: libSweep 2.6s linear infinite;
}

@keyframes libSweep{
  0%   { transform: translateX(-40%) rotate(18deg); opacity: 0; }
  8%   { opacity: 0.9; }
  55%  { opacity: 0.9; }
  100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}
.page-library .lib-preview-box.is-processing{
  position: relative;
  overflow: hidden;
}

.page-library .lib-preview-box.is-processing::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0.9;
  pointer-events:none;
  animation: libSweep 2.6s linear infinite;
}
.page-library .prod-actions{
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
}

.page-library .prod-card:hover .prod-actions{
  opacity: 1;
  transform: translateY(0);
}
/* =========================================================
   LIBRARY — CHIP CLICK FIX (overlay / hit-test)
   ========================================================= */

/* Toolbar ve içindeki chip/search üstte kalsın */
.page-library .library-toolbar{
  position: relative;
  z-index: 5;
}

/* Chip row kesin clickable */
.page-library .library-filters-inline{
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.page-library .filter-chip{
  position: relative;
  z-index: 7;
  pointer-events: auto;
}

/* Search de üstte kalsın */
.page-library .library-search{
  position: relative;
  z-index: 6;
}

/* Card / gradient pseudo layer’lar tıklamayı YUTMASIN */
.page-library .library-card::before,
.page-library .library-card::after,
.page-library .library-grid::before,
.page-library .library-grid::after,
.page-library .card::before,
.page-library .card::after{
  pointer-events: none;
}
/* =========================================================
   LIBRARY — AI ÜRET (sol panel) overflow fix
   Studio/Hook satırları kesilmesin
   ========================================================= */
.page-library .sidebar-section--ai{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* =========================================================
   SIDEBAR / AI ÜRET — satır kırpılmasını kesin kapat
   ========================================================= */

/* 1) Sol sidebar genel olarak scroll alabilsin */
.sidebar{
  overflow-y: auto;
}

/* 2) AI Üret kutusu içerik kadar uzasın, kırpmasın */
.sidebar .sidebar-section--ai{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* =========================================================
   HARD FIX: Library'de sidebar kayboluyor / görünmüyor
   - data-active-page / sidebar-switch fark etmez
   - Library sayfasında sidebar'ı zorla görünür yapar
   ========================================================= */

.page-library[data-page="library"] .sidebar[data-sidebar="library"]{
  display: flex !important;
  flex-direction: column !important;

  /* “görünmez” olabilecek her şeyi sıfırla */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform: none !important;
  filter: none !important;

  /* ekran dışına kayma ihtimaline karşı */
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
}

/* AI Üret bölümünün kırpılmasını engelle */
.page-library[data-page="library"] .sidebar[data-sidebar="library"] .sidebar-section--ai{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Butonları kesin görünür yap */
.page-library[data-page="library"] .sidebar[data-sidebar="library"] .sidebar-link{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* =========================================================
   PROFILE (page-profile) — AIVO APP CSS (SAFE)
   - Scope: sadece .page-profile
   - Legacy çakışmalarını minimize eder
   ========================================================= */

.page-profile .profile-ribbon{
  padding: 16px 18px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}

.page-profile .profile-ribbon::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(1200px 380px at 15% 0%,
    rgba(168, 85, 247, .22),
    rgba(56, 189, 248, .10) 35%,
    rgba(0,0,0,0) 70%);
  pointer-events:none;
}

.page-profile .profile-ribbon-inner{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.page-profile .profile-user{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 260px;
}

.page-profile .profile-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  letter-spacing: .2px;
  background: linear-gradient(135deg,
    rgba(168, 85, 247, .85),
    rgba(56, 189, 248, .55));
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.page-profile .profile-name{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

.page-profile .profile-mail{
  font-size: 12.5px;
  opacity: .78;
  margin-top: 2px;
}

.page-profile .profile-meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:center;
}

.page-profile .profile-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}

/* Form kartı */
.page-profile .profile-card .profile-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  padding-top: 6px;
}

.page-profile .profile-card .form-row{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.page-profile .profile-card .form-row label{
  font-size: 12px;
  opacity: .8;
}

.page-profile .profile-card input{
  width: 100%;
  height: 40px;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 12, 18, .55);
  color: rgba(255,255,255,.92);
  outline: none;
}

.page-profile .profile-card input[readonly]{
  opacity: .85;
  cursor: not-allowed;
}

.page-profile .profile-card small{
  font-size: 11.5px;
  opacity: .72;
  margin-top: -2px;
}

/* E-posta satırı tam genişlik */
.page-profile .profile-card .form-row:nth-child(3){
  grid-column: 1 / -1;
}

/* Buton */
.page-profile .profile-card .chip-btn{
  grid-column: 1 / -1;
  height: 40px;
  border-radius: 12px;
}

/* Sağ panel item satırları */
.page-profile .right-panel .right-item{
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}

.page-profile .right-panel .right-item strong{
  font-weight: 800;
}

/* Responsive: dar ekranda ribbon alt alta */
@media (max-width: 980px){
  .page-profile .profile-ribbon-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .page-profile .profile-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .page-profile .profile-card .profile-form{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   PROFILE — Usage Stats (KUTULU + LIVE DOT)
   ========================================= */
.usage-wrap{ gap:12px; }

.usage-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}

.usage-pill{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px 12px 34px; /* solda dot için */
  border-radius:14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.usage-rows{
  display:grid;
  gap:10px;
  margin-top:2px;
}

.usage-row{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 10px 34px; /* solda dot için */
  border-radius:14px;

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

.usage-row--muted{ opacity:.88; }

.usage-label{
  font-size:12px;
  opacity:.78;
  letter-spacing:.2px;
}

.usage-value{
  font-size:13px;
  font-weight:700;
  text-align:right;
  white-space:nowrap;
}

/* Progress */
.usage-progress{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.usage-progress__bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: rgba(255,255,255,.22);
}

/* LIVE DOT (yeşil yanıp sönme + glow) */
.usage-live{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(60, 255, 140, .95);
  box-shadow: 0 0 10px rgba(60, 255, 140, .55);
  animation: aivoPulse 1.35s ease-in-out infinite;
}

/* Hafif varyasyon: satırlarda aynı anda yanıp sönmesin */
.usage-row:nth-child(1) .usage-live{ animation-delay: .00s; }
.usage-row:nth-child(3) .usage-live{ animation-delay: .12s; }
.usage-row:nth-child(4) .usage-live{ animation-delay: .24s; }
.usage-row:nth-child(5) .usage-live{ animation-delay: .36s; }
.usage-pill:nth-child(1) .usage-live{ animation-delay: .00s; }
.usage-pill:nth-child(2) .usage-live{ animation-delay: .18s; }
.usage-pill:nth-child(3) .usage-live{ animation-delay: .32s; }

@keyframes aivoPulse{
  0%, 100%{
    opacity: .35;
    transform: translateY(-50%) scale(.92);
    box-shadow: 0 0 6px rgba(60,255,140,.25);
  }
  50%{
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 0 14px rgba(60,255,140,.65);
  }
}

/* Responsive */
@media (max-width: 980px){
  .usage-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   SETTINGS — Eita benzeri iskelet (AIVO)
   Sadece .page-settings scope
   ========================================================= */
.page-settings .aivo-settings-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.page-settings .aivo-settings-head-actions{ display:flex; gap:10px; }

.page-settings .aivo-settings-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:10px 0 4px;
}
.page-settings .aivo-settings-sub{
  opacity:.78;
  margin:0 0 16px;
}

.page-settings .aivo-settings-pane{ display:none; }
.page-settings .aivo-settings-pane.is-active{ display:block; }

.page-settings .aivo-settings-card{
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:18px;
  margin:14px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.page-settings .aivo-settings-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.page-settings .aivo-settings-card-icon{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(140, 90, 255, 0.18);
  border:1px solid rgba(140, 90, 255, 0.25);
}
.page-settings .aivo-settings-card-title{ font-weight:800; }
.page-settings .aivo-settings-card-sub{ opacity:.72; font-size:13px; margin-top:2px; }

.page-settings .aivo-settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,0.06);
}
.page-settings .aivo-settings-row:first-of-type{ border-top:0; padding-top:6px; }
.page-settings .aivo-settings-row-title{ font-weight:750; }
.page-settings .aivo-settings-row-sub{ opacity:.68; font-size:13px; margin-top:2px; }

.page-settings .aivo-settings-center{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 2px;
}
.page-settings .aivo-settings-muted{ opacity:.72; font-size:13px; }

.page-settings .aivo-toggle{
  position:relative;
  width:46px; height:26px;
  display:inline-block;
  flex:0 0 auto;
}
.page-settings .aivo-toggle input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.page-settings .aivo-toggle span{
  position:absolute;
  inset:0;
  border-radius:999px;
  background: rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.18);
  transition: all .18s ease;
}
.page-settings .aivo-toggle span:after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:999px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: all .18s ease;
}
.page-settings .aivo-toggle input:checked + span{
  background: rgba(140, 90, 255, 0.55);
  border-color: rgba(140, 90, 255, 0.55);
}
.page-settings .aivo-toggle input:checked + span:after{
  transform: translateX(20px);
}

.page-settings .aivo-radio{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  cursor:pointer;
  user-select:none;
}
.page-settings .aivo-radio input{ display:none; }
.page-settings .aivo-radio-ui{
  width:18px; height:18px;
  margin-top:2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  position:relative;
  flex:0 0 auto;
}
.page-settings .aivo-radio input:checked + .aivo-radio-ui{
  border-color: rgba(140, 90, 255, 0.7);
  background: rgba(140, 90, 255, 0.25);
}
.page-settings .aivo-radio input:checked + .aivo-radio-ui:after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  background: rgba(140, 90, 255, 0.95);
}
.page-settings .aivo-radio small{
  display:block;
  opacity:.7;
  margin-top:2px;
}

.page-settings .aivo-slider{ padding:6px 0 0; }
.page-settings .aivo-slider-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  opacity:.85;
  margin-bottom:10px;
}
.page-settings input[type="range"]{
  width:100%;
  accent-color: rgba(140, 90, 255, 1);
}

.page-settings .aivo-select{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  color: inherit;
  border-radius:10px;
  padding:10px 12px;
  min-width:160px;
}

.page-settings .aivo-danger{
  border-color: rgba(255, 70, 70, 0.22);
  background: rgba(255, 70, 70, 0.06);
}
.page-settings .aivo-warn{
  border-color: rgba(255, 170, 60, 0.22);
  background: rgba(255, 170, 60, 0.05);
}
.page-settings .aivo-callout{
  margin:10px 0 12px;
  padding:12px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  font-size:13px;
  opacity:.9;
}

.page-settings .aivo-policy-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.page-settings .aivo-policy-btn{
  text-align:left;
  padding:12px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  color: inherit;
  cursor:not-allowed;
  opacity:.85;
}

.page-settings .aivo-settings-save .chip-btn{
  width:100%;
  justify-content:center;
}
.page-settings .aivo-settings-save-sub{
  opacity:.68;
  font-size:12px;
  margin-top:8px;
}

.page-settings .preset-chip-row.aivo-settings-tabs .preset-chip.is-active{
  border-color: rgba(140, 90, 255, 0.75);
  background: rgba(140, 90, 255, 0.18);
}

.page-settings .aivo-settings-tip{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.page-settings .aivo-settings-tip-text{
  line-height:1.35;
  opacity:.85;
}
/* ================= DASHBOARD: SON İŞLER (RECENT JOBS) POLISH ================= */
.page-dashboard .aivo-dash-activity-card,
[data-page="dashboard"] .aivo-dash-activity-card{
  padding: 14px;
}

/* list container */
.page-dashboard .aivo-recent-list,
[data-page="dashboard"] .aivo-recent-list{
  display: grid;
  gap: 10px;
}

/* row */
.page-dashboard .aivo-recent-item,
[data-page="dashboard"] .aivo-recent-item{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transform: translateY(4px);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background .22s ease;
}

.page-dashboard .aivo-recent-item.is-in,
[data-page="dashboard"] .aivo-recent-item.is-in{
  transform: translateY(0);
  opacity: 1;
}

.page-dashboard .aivo-recent-item:hover,
[data-page="dashboard"] .aivo-recent-item:hover{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.10);
}

/* icon */
.page-dashboard .aivo-recent-ico,
[data-page="dashboard"] .aivo-recent-ico{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 16px;
}

/* text */
.page-dashboard .aivo-recent-title,
[data-page="dashboard"] .aivo-recent-title{
  font-weight: 650;
  line-height: 1.2;
}

.page-dashboard .aivo-recent-meta,
[data-page="dashboard"] .aivo-recent-meta{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  opacity: .78;
}

.page-dashboard .aivo-recent-time,
[data-page="dashboard"] .aivo-recent-time{
  opacity: .85;
}

/* badges */
.page-dashboard .aivo-badge,
[data-page="dashboard"] .aivo-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}

.page-dashboard .aivo-badge--done,
[data-page="dashboard"] .aivo-badge--done{
  border-color: rgba(120,255,190,.18);
  background: rgba(120,255,190,.08);
}
.page-dashboard .aivo-badge--err,
[data-page="dashboard"] .aivo-badge--err{
  border-color: rgba(255,120,140,.18);
  background: rgba(255,120,140,.08);
}
.page-dashboard .aivo-badge--wait,
[data-page="dashboard"] .aivo-badge--wait{
  border-color: rgba(255,210,120,.18);
  background: rgba(255,210,120,.08);
}
.page-dashboard .aivo-badge--run,
[data-page="dashboard"] .aivo-badge--run{
  border-color: rgba(170,140,255,.18);
  background: rgba(170,140,255,.08);
}
/* ===== TOAST (global) — text center fix ===== */
.aivo-toast,
.toast,
[data-toast],
#toast,
#toast-root,
.aivo-toast__item,
.toast-item {
  text-align: center;
}

.aivo-toast,
.toast,
[data-toast]{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ===== TOAST — HARD CENTER (text + inner layout) ===== */

/* 1) Toast kutusunu flex center yap */
.aivo-toast,
.aivo-toast * {
  text-align: center !important;
}

/* Toast kapsayıcı/pill hangi sınıfta olursa olsun yakala */
.aivo-toast,
.aivo-toast-pill,
.aivo-toast-item,
.toast,
.toast-item,
[data-toast]{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2) İçteki yazı elemanını %100 yapıp centerla (asıl fix) */
.aivo-toast .msg,
.aivo-toast .text,
.aivo-toast .label,
.aivo-toast .title,
.aivo-toast [data-toast-text],
.aivo-toast span,
.aivo-toast p,
.toast .msg,
.toast .text,
.toast .label,
.toast .title,
.toast [data-toast-text],
.toast span,
.toast p{
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
}

/* 3) Eğer solda boş “ikon slotu”/padding varsa onu sıfırla */
.aivo-toast,
.aivo-toast-pill,
.toast,
[data-toast]{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ===== MINI TOAST (fallback) — tam ortalama + düzgün hizalama ===== */
#aivo-mini-toast{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* metin kaymasını bitir */
  text-align: center !important;
  padding: 14px 26px !important;

  /* genişlik/pill ortalama */
  width: max-content !important;
  max-width: min(720px, calc(100vw - 28px)) !important;

  /* bazı temalarda solda slot/padding kalıyor: */
  gap: 0 !important;
}

#aivo-mini-toast > *{
  margin: 0 !important;
  flex: 0 1 auto !important;
  text-align: center !important;
}

/* eğer pseudo-element boşluk yaratıyorsa */
#aivo-mini-toast::before,
#aivo-mini-toast::after{
  content: none !important;
  display: none !important;
}
/* ================= SETTINGS TABS ================= */

/* Tüm ayar panelleri varsayılan gizli */
.aivo-settings-pane {
  display: none;
}

/* Aktif olan görünür */
.aivo-settings-pane.is-active {
  display: block;
}

/* === TOPBAR SAFARI DOUBLE PAINT FIX (REVIZE) === */
/* Not: "*" ile herkese transform basmak yerine sadece topbar root + blur katmanı */
.aivo-topbar {
  position: relative !important;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Eğer topbar’da “glass/blur” katmanı varsa sadece ona uygula.
   (Aşağıdaki selector’ları projendeki gerçek class’lara göre bırak/ekle) */
.aivo-topbar::before,
.aivo-topbar .topbar-glass,
.aivo-topbar .aivo-topbar-bg,
.aivo-topbar .blur-layer {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* İçerik katmanını ayrı tut (metinlerde transform sapmasını azaltır) */
.aivo-topbar .aivo-topbar-inner,
.aivo-topbar .aivo-nav,
.aivo-topbar nav {
  position: relative;
  z-index: 1;
}
/* WORKMODE — click + full area + gradient active */
.card[data-ui="workmode"] .mode-toggle{
  position: relative;
  z-index: 5;
  pointer-events: auto;

  display:flex;
  width: min(720px, 100%);
  justify-content: space-between;
  gap: 12px;

  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

/* Butonlar barın yarısını kapsasın, her yer tıklansın */
.card[data-ui="workmode"] .mode-btn{
  all: unset;
  box-sizing: border-box;

  flex: 1 1 0;
  min-width: 0;

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

  height: 38px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;

  /* tıklama güvenliği */
  pointer-events: auto;
  position: relative;
  z-index: 2;

  color: rgba(255,255,255,.78);
}

/* Barın üstündeki overlay/pseudo tıklamayı yutmasın */
.card[data-ui="workmode"] .mode-toggle::before,
.card[data-ui="workmode"] .mode-toggle::after{
  pointer-events: none;
}

/* AKTİF = Müzik Üret butonu gibi gradient */
body[data-mode="basic"] .card[data-ui="workmode"] .mode-btn[data-mode-button="basic"],
body[data-mode="advanced"] .card[data-ui="workmode"] .mode-btn[data-mode-button="advanced"]{
  color: rgba(255,255,255,.96);
  background: linear-gradient(90deg,
    rgba(122, 92, 255, .95),
    rgba(255, 120, 190, .90)
  );
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.35);
}

/* pasif */
body[data-mode="basic"] .card[data-ui="workmode"] .mode-btn[data-mode-button="advanced"],
body[data-mode="advanced"] .card[data-ui="workmode"] .mode-btn[data-mode-button="basic"]{
  background: transparent;
}
/* === WORKMODE FINAL FIX: center + clickable === */
.card[data-ui="workmode"]{
  position: relative;
}

.card[data-ui="workmode"]::before,
.card[data-ui="workmode"]::after{
  pointer-events: none; /* kart glow/overlay tıklamayı yutmasın */
}

.card[data-ui="workmode"] .card-body{
  display:flex;
  justify-content:center;
  align-items:center;
}

.card[data-ui="workmode"] .mode-toggle{
  position: relative;
  z-index: 10;          /* overlay üstüne çıksın */
  pointer-events: auto;

  display:grid;
  grid-template-columns: 1fr 1fr; /* iki eşit yarı */
  width: min(680px, 100%);
  padding: 8px;

  border-radius: 999px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.card[data-ui="workmode"] .mode-btn{
  all: unset;
  box-sizing: border-box;
  width: 100%;
  height: 40px;

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

  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;

  color: rgba(255,255,255,.78);
}

/* aktif = Müzik Üret gradient */
body[data-mode="basic"] .card[data-ui="workmode"] .mode-btn[data-mode-button="basic"],
body[data-mode="advanced"] .card[data-ui="workmode"] .mode-btn[data-mode-button="advanced"]{
  color: rgba(255,255,255,.96);
  background: linear-gradient(90deg,
    rgba(122, 92, 255, .95),
    rgba(255, 120, 190, .90)
  );
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
}
/* Basit Modda gelişmiş alanları gizle */
body[data-mode="basic"] [data-visible-in="advanced"]{
  display: none !important;

/* ✅ Premium gradient for "error" toasts (keeps single source) */
.aivo-toast.toast-error,
.toast.toast-error,
.toastify.toast-error,
.toast-error,
[data-toast-type="error"] {
  background: linear-gradient(90deg, rgba(122,92,255,.92), rgba(255,122,179,.86)) !important;
  color: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}

/* ikon/close kontrast */
.aivo-toast.toast-error .close,
.toast-error .close,
[data-toast-type="error"] .close {
  color: rgba(255,255,255,.9) !important;
}
/* ===============================
   AIVO — WARNING TOAST FIX
   =============================== */

#aivoToasts .aivo-toast--warning {
  background: rgba(255, 186, 0, 0.12) !important; /* amber, pembe değil */
  border: 1px solid rgba(255, 186, 0, 0.35) !important;
  color: #ffd37a !important;
  box-shadow: 0 0 0 1px rgba(255, 186, 0, 0.15) inset,
              0 8px 24px rgba(0,0,0,0.35) !important;
}

#aivoToasts .aivo-toast--warning .aivo-toast__title {
  color: #ffcf66 !important;
}

#aivoToasts .aivo-toast--warning .aivo-toast__icon {
  color: #ffcf66 !important;
}
/* === TOAST NORMALIZE TEST (2026-01-24) === */
.toast {
  --toast-padding: 12px 14px;
  --toast-gap: 10px;
  --toast-radius: 14px;
  --toast-max-width: 360px;

  --toast-title-size: 14px;
  --toast-text-size: 13px;
  --toast-line-height: 1.35;

  max-width: var(--toast-max-width);
  padding: var(--toast-padding) !important;
  border-radius: var(--toast-radius);
}

.toast-title {
  font-size: var(--toast-title-size);
  line-height: var(--toast-line-height);
}

.toast-text {
  font-size: var(--toast-text-size);
  line-height: var(--toast-line-height);
}