/* =========================================================
   AIVO LANDING — TEK YÜZEY (HEADER + HERO BİRLEŞİK)
   Kart yok, önce sayfa yüzeyi oturacak.
   ========================================================= */

:root{
  /* STUDIO TABAN ZEMİN */
  --bg0:#05060b;
  --bg1:#070918;
  --bg2:#0a0f26;

  /* AIVO STUDIO RENKLERİ */
  --a1:#6f63ff;   /* studio moru */
  --a2:#1fb6ff;   /* studio mavi */

  --text: rgba(255,255,255,.95);
  --soft: rgba(255,255,255,.74);

  --grad: linear-gradient(135deg, var(--a1), var(--a2));
  --radius: 18px;
  --container: 1180px;
}


*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg0);
}

/* Container */
.container{
  width: min(var(--container), calc(100% - 44px));
  margin: 0 auto;
}



/* TEK ZEMİN KATMANI (en kritik) */
.top-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 650px at 12% 12%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(950px 650px at 88% 10%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(1000px 800px at 70% 80%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  pointer-events:none;
}

/* Hafif vignette (daha premium) */
.top-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 900px at 50% 25%, transparent 45%, rgba(0,0,0,.40) 90%);
  pointer-events:none;
}

.site-header,
.hero{
  position: relative; /* pseudo-ların üstünde kalsın */
  z-index: 1;
}

/* =========================================================
   HEADER: ŞERİT HİSSİ YOK (border yok, ayrı bg yok)
   ========================================================= */
.site-header{
  position: static;
  background: transparent;     /* birleşme burada */
  border: none;                /* şerit çizgisi yok */
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 18px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--text);
}
.brand-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: .95;
}
.brand-text{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap: 18px;
}
.nav-link{
  color: rgba(255,255,255,.70);
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 12px;
}
.nav-link:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
}

/* Header right */
.header-cta{
  display:flex;
  align-items:center;
  gap: 10px;
}
.pill{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 13px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  text-decoration:none;
  font-weight: 800;
  font-size: 14px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--grad);
  color: #071018;
  border-color: rgba(255,255,255,.10);
}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.btn-link{
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,.70);
  padding: 0 8px;
}
.btn-link:hover{
  color: rgba(255,255,255,.92);
  transform: none;
}
/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: 54px 0 26px;
}

.hero-inner{
  position: relative;
  min-height: calc(100vh - 84px);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: center;
}

/* Left */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 13px;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 0 0 6px rgba(139,92,246,.12);
}

.hero-title{
  margin: 16px 0 10px;
  font-size: 62px;
  line-height: 1.00;
  letter-spacing: -1px;
}
.grad{
  background: linear-gradient(135deg, #ffffff, rgba(255,255,255,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad2{
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(34,211,238,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub{
  margin: 0 0 18px;
  color: var(--soft);
  font-size: 15px;
  font-weight: 700;
}

.hero-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

/* =========================================================
   HERO RIGHT — MARK SAHNESİ (ORB YOK)
   ========================================================= */
.hero-right{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Yeni görsel sahne */
.hero-mark{
  width: 360px;
  height: 360px;
  position: relative;
  pointer-events: none;

  /* 3D altyapı */
  perspective: 900px;
  transform-style: preserve-3d;

  background: transparent;

  /* SVG merkezleme */
  display: grid;
  place-items: center;
}

/* =========================
   HERO MARK — SVG (GENEL)
   ========================= */
.mark-svg{
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 26px 60px rgba(0,0,0,.45));
}

/* HACİMLİ SVG için ekstra sahne kalitesi */
.mark-svg--vol{
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 34px 110px rgba(0,0,0,.58));
  transform: translateZ(0); /* Safari stabilize */
}

/* =========================
   (ESKİ) FRAME ANİMASYONU — DURABİLİR
   (Eğer SVG’de .frame kullanmıyorsan etkisi yok)
   ========================= */
.frame{
  transform-origin: 300px 300px;
  filter: url(#aivoGlow);
}
.frame--a{
  transform: translateZ(18px) rotateX(62deg) rotateY(-18deg) rotateZ(10deg);
  animation: spinA 12.8s cubic-bezier(.55,.08,.22,1) infinite, floatA 6.8s ease-in-out infinite;
  opacity: .95;
}
.frame--b{
  transform: translateZ(6px) rotateX(48deg) rotateY(22deg) rotateZ(-8deg);
  animation: spinB 7.6s cubic-bezier(.45,.12,.18,1) infinite, floatB 5.6s ease-in-out infinite;
  opacity: .85;
}

/* =========================
   YENİ: HACİMLİ (3D) FRAME ANİMASYONU
   SVG’de .frame3d / .frame3d--a / .frame3d--b var
   ========================= */
.frame3d{
  transform-origin: 300px 300px;
  transform-box: fill-box;
  backface-visibility: hidden;
}

/* Büyük frame: yavaş CW */
.frame3d--a{
  transform:
    translateZ(26px)
    rotateX(66deg)
    rotateY(-16deg)
    rotateZ(12deg);
  animation:
    spin3dA 13.2s cubic-bezier(.55,.08,.22,1) infinite,
    float3dA 7.2s ease-in-out infinite;
}

/* Küçük frame: hızlı CCW */
.frame3d--b{
  transform:
    translateZ(10px)
    rotateX(52deg)
    rotateY(22deg)
    rotateZ(-10deg);
  animation:
    spin3dB 7.8s cubic-bezier(.45,.12,.18,1) infinite,
    float3dB 5.8s ease-in-out infinite;
  opacity: .92;
}

/* =========================
   ANİMASYONLAR (ESKİ)
   ========================= */
@keyframes spinA{
  0%{ transform: translateZ(18px) rotateX(62deg) rotateY(-18deg) rotateZ(10deg) rotate(0deg); }
  55%{ transform: translateZ(26px) rotateX(62deg) rotateY(-18deg) rotateZ(10deg) rotate(185deg); }
  100%{ transform: translateZ(18px) rotateX(62deg) rotateY(-18deg) rotateZ(10deg) rotate(360deg); }
}
@keyframes spinB{
  0%{ transform: translateZ(6px) rotateX(48deg) rotateY(22deg) rotateZ(-8deg) rotate(0deg); }
  45%{ transform: translateZ(12px) rotateX(48deg) rotateY(22deg) rotateZ(-8deg) rotate(-140deg); }
  100%{ transform: translateZ(6px) rotateX(48deg) rotateY(22deg) rotateZ(-8deg) rotate(-360deg); }
}
@keyframes floatA{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -6px; } }
@keyframes floatB{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 5px; } }

/* =========================
   ANİMASYONLAR (YENİ HACİMLİ)
   ========================= */
@keyframes spin3dA{
  0%{ transform: translateZ(26px) rotateX(66deg) rotateY(-16deg) rotateZ(12deg) rotate(0deg); }
  55%{ transform: translateZ(34px) rotateX(66deg) rotateY(-16deg) rotateZ(12deg) rotate(190deg); }
  100%{ transform: translateZ(26px) rotateX(66deg) rotateY(-16deg) rotateZ(12deg) rotate(360deg); }
}
@keyframes spin3dB{
  0%{ transform: translateZ(10px) rotateX(52deg) rotateY(22deg) rotateZ(-10deg) rotate(0deg); }
  45%{ transform: translateZ(16px) rotateX(52deg) rotateY(22deg) rotateZ(-10deg) rotate(-150deg); }
  100%{ transform: translateZ(10px) rotateX(52deg) rotateY(22deg) rotateZ(-10deg) rotate(-360deg); }
}
@keyframes float3dA{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -7px; } }
@keyframes float3dB{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 6px; } }

/* Motion hassasiyeti */
@media (prefers-reduced-motion: reduce){
  .frame--a, .frame--b,
  .frame3d--a, .frame3d--b{
    animation: none;
  }
}


/* =========================
   SCROLL HINT (AYNEN KORUNDU)
   ========================= */
.scroll-hint{
  position:absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
  text-decoration:none;
  font-weight: 800;
}
.scroll-hint:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
}
.mouse{
  width: 18px;
  height: 26px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.35);
  position: relative;
}
.mouse::after{
  content:"";
  position:absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 6px;
  margin-left: -2px;
  border-radius: 9px;
  background: rgba(255,255,255,.55);
  animation: wheel 1.25s ease-in-out infinite;
}
.arrow{
  animation: bounce 1.25s ease-in-out infinite;
}

@keyframes wheel{
  0%{ transform: translateY(0); opacity: .9; }
  60%{ transform: translateY(8px); opacity: .2; }
  100%{ transform: translateY(0); opacity: .9; }
}
@keyframes bounce{
  0%{ transform: translateY(0); opacity: .9; }
  60%{ transform: translateY(6px); opacity: .35; }
  100%{ transform: translateY(0); opacity: .9; }
}

/* Spacer */
.spacer{
  position: relative;
  z-index: 1;
  height: 110vh;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .nav{ display:none; }
  .hero-inner{
    grid-template-columns: 1fr;
    min-height: calc(100vh - 84px);
    padding-bottom: 70px;
  }
  .hero-title{ font-size: 48px; }
  .hero-mark{
    width: 300px;
    height: 300px;
  }
}
@media (max-width: 520px){
  .hero-title{ font-size: 42px; }
  .hero-mark{
    width: 240px;
    height: 240px;
  }
}

/* ================= SECTIONS + FOOTER ================= */
:root{
  --bg0:#050816; --bgDeep:#02030A; --bgUp:#070B1D; --card:#0D1024;
  --a1:#6C5CE7; --a2:#0984E3; --cta:#FD79A8;
  --text:#F5F5FF; --muted:#9AA4D7;
}

/* Sayfa genel akış */
.aivo-main{
  position:relative;
  z-index:1;
}
.aivo-section{
  padding: 80px 0;
}
.aivo-wrap{
  width:min(1120px, calc(100% - 48px));
  margin: 0 auto;
}
.aivo-h2{
  margin:0 0 10px;
  font-size: 34px;
  letter-spacing:-0.02em;
}
.aivo-p{
  margin:0 0 26px;
  color: rgba(154,164,215,.92);
  max-width: 62ch;
}

/* Kartlar */
.aivo-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.aivo-card{
  background: linear-gradient(180deg, rgba(13,16,36,.72), rgba(7,11,29,.55));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.aivo-card h3{ margin:0 0 8px; font-size:16px; color: var(--text); }
.aivo-card p{ margin:0; color: rgba(154,164,215,.92); line-height:1.55; }

/* Steps */
.aivo-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.aivo-step{
  background: rgba(7,11,29,.45);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
}
.aivo-step span{
  display:inline-block;
  font-weight:700;
  color: rgba(108,92,231,.95);
  margin-bottom: 10px;
}
.aivo-step b{ display:block; color: var(--text); margin-bottom: 6px; }
.aivo-step p{ margin:0; color: rgba(154,164,215,.92); }

/* Split block */
.aivo-split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}
.aivo-box{
  background: rgba(7,11,29,.45);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
}
.aivo-box b{ color: var(--text); }
.aivo-box p{ margin:10px 0 0; color: rgba(154,164,215,.92); }

/* FAQ */
.aivo-faq{ display:grid; gap: 10px; }
.aivo-faq-item{
  background: rgba(7,11,29,.45);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 16px;
}
.aivo-faq-item summary{
  cursor:pointer;
  color: var(--text);
  font-weight: 600;
}
.aivo-faq-item p{
  margin: 10px 0 0;
  color: rgba(154,164,215,.92);
}

/* FOOTER (eita benzeri yerleşim) */
.aivo-footer{
  position:relative;
  padding: 40px 0 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(900px 420px at 15% 110%, rgba(108,92,231,.18), transparent 60%),
              radial-gradient(900px 420px at 85% 110%, rgba(9,132,227,.16), transparent 60%),
              linear-gradient(180deg, rgba(2,3,10,.25), rgba(2,3,10,.85));
}
.aivo-footer-top{
  display:grid;
  grid-template-columns: 1.2fr .7fr .8fr 1.3fr;
  gap: 26px;
  padding-bottom: 26px;
}
.aivo-footer-brand p{
  margin: 10px 0 14px;
  color: rgba(154,164,215,.92);
  max-width: 40ch;
}
.aivo-footer-logo{
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 26px;
  color: var(--text);
}
.aivo-social{
  display:flex; gap: 10px;
}
.aivo-social a{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(7,11,29,.35);
  color: rgba(245,245,255,.92);
  text-decoration:none;
}

.aivo-footer-col h4,
.aivo-contact h4{
  margin:0 0 10px;
  color: rgba(245,245,255,.9);
  font-size: 14px;
  letter-spacing:.02em;
}
.aivo-footer-col a,
.aivo-contact a{
  display:block;
  padding: 7px 0;
  color: rgba(154,164,215,.92);
  text-decoration:none;
}
.aivo-footer-col a:hover,
.aivo-contact a:hover{
  color: rgba(245,245,255,.95);
}

/* =========================================================
   AIVO LANDING — FOOTER FIX (KIRIK CSS DÜZELT + BOŞLUK KALDIR)
   Bu blok: .aivo-footer-right satırından itibaren en sona kadar replace edilecek.
   ========================================================= */

/* Footer right */
.aivo-footer-right{ display:grid; gap: 14px; }

/* Badges (KIRIK KISIM DÜZELTİLDİ) */
.aivo-badges{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.aivo-badge{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(7,11,29,.35);
  border-radius: 16px;         /* <-- senin dosyada burada kırılmıştı */
  padding: 14px;
  color: rgba(245,245,255,.92);
  text-align:center;
  min-height: 72px;
}
.aivo-badge small{ color: rgba(154,164,215,.88); }

/* Footer bottom */
.aivo-footer-bottom{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(154,164,215,.92);
}
.aivo-status{ display:flex; align-items:center; gap: 8px; }
.aivo-status .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 0 4px rgba(46,204,113,.12);
}

/* =========================================================
   EN KRİTİK: Dev boşluğu yapan spacer'ı kapat
   ========================================================= */
.spacer{
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
}

/* =========================================================
   Footer'ı sayfanın en altına it (içerik az olsa bile)
   Not: spacer kapandığı için gerçek sonuç burada net görünür.
   ========================================================= */
html, body{ height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-shell{ flex: 0 0 auto; }   /* hero alanı */
.aivo-main{ flex: 1 0 auto; }   /* section alanı */
.aivo-footer{ margin-top: auto !important; }

/* Footer biraz daha geniş dursun */
.aivo-footer .aivo-wrap{
  width: min(1240px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
}

/* Footer grid dengesi */
.aivo-footer-top{
  display:grid !important;
  grid-template-columns: 1.2fr .75fr .9fr 1.35fr !important;
  gap: 26px !important;
  padding-bottom: 26px !important;
}

/* Responsive */
@media (max-width: 980px){
  .aivo-footer-top{ grid-template-columns: 1fr 1fr !important; }
  .aivo-badges{ grid-template-columns: 1fr !important; }
}
@media (max-width: 560px){
  .aivo-footer-top{ grid-template-columns: 1fr !important; }
}
/* =========================================================
   AIVO FOOTER TUNING — daha aydınlık + status pulse
   studio.css EN ALTINA EKLE
   ========================================================= */

/* 1) Footer zeminini “çok karanlık” olmaktan çıkar */
.aivo-footer{
  /* mevcut background varsa override */
  background:
    radial-gradient(900px 520px at 12% 120%, rgba(108,92,231,.28), transparent 62%),
    radial-gradient(900px 520px at 88% 120%, rgba(9,132,227,.24), transparent 62%),
    radial-gradient(700px 420px at 50% -10%, rgba(253,121,168,.08), transparent 60%),
    linear-gradient(180deg, rgba(7,11,29,.28), rgba(2,3,10,.72)) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* Footer içindeki metin kontrastını yükselt */
.aivo-footer .aivo-footer-logo{ color: rgba(245,245,255,.95) !important; }
.aivo-footer .aivo-footer-brand p,
.aivo-footer .aivo-footer-col a,
.aivo-footer .aivo-contact a,
.aivo-footer-bottom{
  color: rgba(154,164,215,.95) !important;
}

/* Hover biraz daha canlı */
.aivo-footer .aivo-footer-col a:hover,
.aivo-footer .aivo-contact a:hover{
  color: rgba(245,245,255,.98) !important;
}

/* 2) Footer kart/badge kutularını aydınlat (çok “karanlık blok” hissi gitmesi için) */
.aivo-badge,
.aivo-social a,
.aivo-footer-col a,
.aivo-contact a{
  /* linkler için arka planı zorlamayalım, sadece badge/social */
}

.aivo-badge{
  background: linear-gradient(180deg, rgba(13,16,36,.55), rgba(7,11,29,.35)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.32) !important;
}

.aivo-social a{
  background: rgba(13,16,36,.35) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* 3) “Durum: Aktif” ışığı yanıp sönsün (pulse) */
.aivo-status .dot{
  position: relative;
  background: #2ecc71 !important;
  box-shadow: 0 0 0 4px rgba(46,204,113,.14);
  animation: aivoPulse 1.25s ease-in-out infinite;
}

.aivo-status .dot::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(46,204,113,.35), transparent 60%);
  opacity:.0;
  animation: aivoGlow 1.25s ease-in-out infinite;
}

@keyframes aivoPulse{
  0%   { transform: scale(1);   filter: brightness(1); }
  50%  { transform: scale(1.18); filter: brightness(1.18); }
  100% { transform: scale(1);   filter: brightness(1); }
}

@keyframes aivoGlow{
  0%   { opacity: 0;   transform: scale(.92); }
  50%  { opacity: .85; transform: scale(1.05); }
  100% { opacity: 0;   transform: scale(.92); }
}

/* 4) Footer alt çizgi biraz daha görünür */
.aivo-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
/* =========================================================
   AIVO — MODÜLLER / CTA (FOOTER ÜSTÜ) — BÜYÜK BAŞLIK + 3 KUTU
   ========================================================= */

.aivo-modules{
  padding: 84px 0 56px;
  position: relative;
  z-index: 1;
}

/* Bölümün kendi “parlak” aurası (footer’a yaklaşınca kararmasın) */
.aivo-modules::before{
  content:"";
  position:absolute;
  inset: -80px 0 -40px 0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(108,92,231,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 22%, rgba(9,132,227,.14), transparent 62%),
    radial-gradient(700px 420px at 55% 95%, rgba(253,121,168,.08), transparent 65%);
  opacity: 1;
}

.aivo-modules .aivo-wrap{ position: relative; }

.aivo-modules-head{
  text-align: center;
  margin-bottom: 34px;
}

.aivo-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(13,16,36,.35);
  color: rgba(245,245,255,.92);
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 16px;
}

.aivo-modules-title{
  margin: 0;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.03em;
  color: rgba(245,245,255,.98);
}

.aivo-modules-sub{
  margin: 14px auto 0;
  max-width: 70ch;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(154,164,215,.95);
}

/* 3 kart grid */
.aivo-modules-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 26px;
}

/* Kart tabanı */
.aivo-module-card{
  border-radius: 22px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 80px rgba(0,0,0,.40);
  position: relative;
  overflow: hidden;
  min-height: 340px;
}

.aivo-module-card::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .9;
  background: radial-gradient(520px 420px at 10% 10%, rgba(255,255,255,.07), transparent 55%);
}

.aivo-module-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(245,245,255,.95);
  margin-bottom: 14px;
}

.aivo-module-card h3{
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: rgba(245,245,255,.98);
}

.aivo-module-card p{
  margin: 0 0 14px;
  color: rgba(154,164,215,.95);
  line-height: 1.6;
}

.aivo-module-card ul{
  margin: 0 0 18px;
  padding-left: 18px;
  color: rgba(245,245,255,.88);
}
.aivo-module-card li{ margin: 7px 0; }

.aivo-module-btn{
  margin-top: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  height: 46px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 700;
  color: rgba(245,245,255,.98);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,11,29,.35);
}

/* Kart renkleri (AIVO paletine uygun) */
.aivo-module-card.is-music{
  background:
    radial-gradient(680px 420px at 18% 0%, rgba(108,92,231,.38), transparent 60%),
    linear-gradient(180deg, rgba(32,18,66,.55), rgba(7,11,29,.38));
}
.aivo-module-card.is-art{
  background:
    radial-gradient(680px 420px at 18% 0%, rgba(9,132,227,.30), transparent 60%),
    linear-gradient(180deg, rgba(10,22,60,.55), rgba(7,11,29,.38));
}
.aivo-module-card.is-video{
  background:
    radial-gradient(680px 420px at 18% 0%, rgba(253,121,168,.22), transparent 62%),
    linear-gradient(180deg, rgba(55,18,38,.50), rgba(7,11,29,.38));
}

/* Alt CTA */
.aivo-modules-cta{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:center;
  margin-top: 28px;
  flex-wrap: wrap;
}

.aivo-cta-note{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(13,16,36,.30);
  color: rgba(245,245,255,.88);
}

.aivo-cta-big{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 800;
  color: rgba(245,245,255,.98);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(108,92,231,.95), rgba(9,132,227,.85));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* Responsive */
@media (max-width: 980px){
  .aivo-modules-grid{ grid-template-columns: 1fr; }
  .aivo-module-card{ min-height: auto; }
}
/* =========================================================
   AIVO — MODÜL KART BUTONLARI + CTA EĞLENCELİ ANİMASYON (CSS)
   studio.css EN ALTINA EKLE
   ========================================================= */

/* Kart genel hover: hafif kalksın + parlak kenar */
.aivo-module-card{
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.aivo-module-card:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 34px 110px rgba(0,0,0,.46);
  filter: brightness(1.06);
}

/* Kartın üst “shine” ışığı hover’da oynasın */
.aivo-module-card::before{
  transition: transform .55s ease, opacity .35s ease;
}
.aivo-module-card:hover::before{
  transform: translateX(14px) translateY(-10px) scale(1.08);
  opacity: 1;
}

/* Buton: hover’da gradient sweep + hafif zıplama */
.aivo-module-btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Buton üstünden kayan parlak şerit */
.aivo-module-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.10) 65%,
    transparent 100%
  );
  transform: translateX(-120%);
  opacity: .0;
  transition: transform .55s ease, opacity .25s ease;
  pointer-events:none;
}

.aivo-module-card:hover .aivo-module-btn{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.34);
  background: rgba(13,16,36,.40);
}
.aivo-module-card:hover .aivo-module-btn::before{
  transform: translateX(120%);
  opacity: 1;
}

/* “Dokununca” (mobile) da his versin */
.aivo-module-btn:active{
  transform: translateY(0px) scale(.98);
}

/* CTA alanı: daha eğlenceli, nefes alan bir his */
.aivo-modules-cta{
  position: relative;
}

/* Ücretsiz 5 kredi pill: pulse + küçük parıltı */
.aivo-cta-note{
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  animation: aivoNotePulse 2.4s ease-in-out infinite;
}

.aivo-cta-note::after{
  content:"";
  position:absolute;
  inset:-10px;
  background: radial-gradient(circle at 20% 30%, rgba(108,92,231,.26), transparent 55%),
              radial-gradient(circle at 80% 70%, rgba(9,132,227,.22), transparent 55%);
  opacity: .55;
  filter: blur(10px);
  pointer-events:none;
}

@keyframes aivoNotePulse{
  0%   { transform: translateY(0);    border-color: rgba(255,255,255,.10); }
  50%  { transform: translateY(-2px); border-color: rgba(255,255,255,.16); }
  100% { transform: translateY(0);    border-color: rgba(255,255,255,.10); }
}

/* Büyük CTA butonu: canlı gradient + shimmer + hover bounce */
.aivo-cta-big{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: aivoCtaGlow 2.2s ease-in-out infinite;
}

/* CTA üstünden kayan shimmer */
.aivo-cta-big::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width: 60%;
  height: 220%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: rotate(18deg);
  opacity: .0;
  animation: aivoShimmer 2.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes aivoShimmer{
  0%   { transform: translateX(-140%) rotate(18deg); opacity: 0; }
  35%  { opacity: .35; }
  55%  { opacity: .15; }
  100% { transform: translateX(240%) rotate(18deg); opacity: 0; }
}

@keyframes aivoCtaGlow{
  0%   { filter: saturate(1) brightness(1); box-shadow: 0 18px 60px rgba(0,0,0,.32); }
  50%  { filter: saturate(1.15) brightness(1.08); box-shadow: 0 26px 90px rgba(0,0,0,.40); }
  100% { filter: saturate(1) brightness(1); box-shadow: 0 18px 60px rgba(0,0,0,.32); }
}

.aivo-cta-big:hover{
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.06) saturate(1.12);
}
.aivo-cta-big:active{
  transform: translateY(-1px) scale(.98);
}

/* Kullanıcı “reduce motion” seçtiyse animasyonları kapat */
@media (prefers-reduced-motion: reduce){
  .aivo-module-card,
  .aivo-module-card::before,
  .aivo-module-btn,
  .aivo-module-btn::before,
  .aivo-cta-note,
  .aivo-cta-big,
  .aivo-cta-big::before{
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   AIVO — LOGIN MODAL (EITA-LIKE)
   index.css EN ALTINA EKLE
   ========================================================= */

.aivo-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.aivo-modal.is-open{ display: block; }

.aivo-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}

.aivo-modal-dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100vw - 32px));
  border-radius: 22px;
  padding: 22px 22px 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(108,92,231,.18), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(9,132,227,.14), transparent 62%),
    linear-gradient(180deg, rgba(13,16,36,.62), rgba(7,11,29,.72));
  box-shadow: 0 40px 140px rgba(0,0,0,.55);
}

.aivo-modal-x{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(245,245,255,.92);
  cursor: pointer;
}

.aivo-modal-title{
  margin: 6px 0 6px;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: rgba(245,245,255,.98);
}

.aivo-modal-sub{
  margin: 0 0 14px;
  color: rgba(154,164,215,.95);
  line-height: 1.6;
}

.aivo-oauth-btn{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.92);
  color: rgba(10,12,20,.95);
  font-weight: 800;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.aivo-oauth-btn .gdot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, #4285F4, #34A853, #FBBC05, #EA4335, #4285F4);
}

.aivo-sep{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 14px 0;
  color: rgba(154,164,215,.85);
  font-weight: 700;
}
.aivo-sep::before,
.aivo-sep::after{
  content:"";
  height: 1px;
  flex: 1;
  background: rgba(255,255,255,.10);
}
.aivo-sep span{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.aivo-field{ display:block; margin: 10px 0; }
.aivo-field span{
  display:block;
  font-size: 12px;
  color: rgba(154,164,215,.92);
  margin-bottom: 8px;
}

.aivo-field input{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,11,29,.40);
  color: rgba(245,245,255,.95);
  padding: 0 14px;
  outline: none;
}

.aivo-field input:focus{
  border-color: rgba(108,92,231,.45);
  box-shadow: 0 0 0 4px rgba(108,92,231,.14);
}

.aivo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 8px 0 14px;
}

.aivo-check{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(245,245,255,.86);
  font-size: 13px;
}

.aivo-link{
  color: rgba(154,164,215,.95);
  text-decoration: none;
  font-weight: 700;
}
.aivo-link:hover{ color: rgba(245,245,255,.98); }

.aivo-login-btn{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(108,92,231,.95), rgba(9,132,227,.85));
  color: rgba(245,245,255,.98);
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.aivo-bottom{
  display:flex;
  justify-content:center;
  gap: 8px;
  margin-top: 12px;
  color: rgba(154,164,215,.92);
}

/* Açılış animasyonu */
.aivo-modal.is-open .aivo-modal-dialog{
  animation: aivoPop .20s ease-out;
}
@keyframes aivoPop{
  from{ transform: translate(-50%,-48%) scale(.98); opacity: 0; }
  to  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
/* =========================================================
   LOGIN MODAL — PRICING MODAL İLE AYNI DAVRANIŞ
   ========================================================= */

.login-modal {
  position: absolute;
  inset: 0;
  z-index: 1200; /* pricing-modal ile aynı veya +1 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.login-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

/* Backdrop */
.login-modal .login-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top,
    rgba(108, 92, 231, 0.35),
    rgba(0, 0, 0, 0.65)
  );
  backdrop-filter: blur(8px);
}

/* Dialog */
.login-modal .login-panel {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  border-radius: 16px;
  background: var(--bg-elevated, #0b1024);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  padding: 24px;
}
/* =========================================================
   AIVO LOGIN CARD — MODERN / PREMIUM
   ========================================================= */

.login-modal .login-panel {
  padding: 32px;
  border-radius: 20px;
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(120, 90, 255, 0.18),
      rgba(10, 14, 35, 0.92)
    );
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 40px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.06);
  color: #fff;
}

/* Başlık */
.login-panel h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.login-panel p {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  margin-bottom: 24px;
}

/* Google Button */
#btnGoogleLogin {
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg,#ffffff,#f3f4f6);
  color: #111;
  font-weight: 600;
  box-shadow:
    0 10px 25px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}

#btnGoogleLogin:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 35px rgba(0,0,0,.35);
}

/* Ayraç */
.login-panel .or {
  margin: 20px 0;
  text-align: center;
  color: rgba(255,255,255,.4);
}

/* Input */
.login-panel input[type="email"] {
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: 0 16px;
  font-size: 15px;
}

.login-panel input:focus {
  outline: none;
  border-color: rgba(140,120,255,.8);
  box-shadow:
    0 0 0 4px rgba(140,120,255,.25);
}

/* Primary CTA */
#btnLogin {
  margin-top: 18px;
  height: 54px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg,#8b5cf6,#3b82f6);
  color: #fff;
  box-shadow: 0 18px 40px rgba(90,70,255,.45);
  transition: transform .15s ease, box-shadow .15s ease;
}

#btnLogin:hover {
  transform: translateY(-1px);
  box-shadow: 0 26px 60px rgba(90,70,255,.6);
}

/* Alt linkler */
.login-panel a {
  color: rgba(255,255,255,.6);
  font-size: 14px;
}

.login-panel a:hover {
  color: #fff;
}
/* =========================================================
   AIVO LOGIN — ULTRA HQ CARD SYSTEM
   ========================================================= */

.login-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ortak kart stili */
.login-card {
  padding: 22px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02)
    );
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 50px rgba(0,0,0,.35);
}

/* Header */
.login-header h3 {
  font-size: 28px;
  margin-bottom: 6px;
}
.login-header p {
  color: rgba(255,255,255,.65);
}

/* Section titles */
.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.card-sub {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-bottom: 14px;
}

/* Google */
.btn-google {
  height: 52px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.btn-google:hover {
  transform: translateY(-1px);
}

/* Email */
.email-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.email-row input {
  flex: 1;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: 0 16px;
}
.email-row input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139,92,246,.25);
}

.btn-primary {
  height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  background: linear-gradient(135deg,#8b5cf6,#3b82f6);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 18px 40px rgba(90,70,255,.45);
}

/* Links */
.link-muted {
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.link-accent {
  font-weight: 600;
  color: #a78bfa;
}
.link-accent:hover {
  color: #fff;
}
/* ================= AUTH MODAL — FINAL UX FIX ================= */

/* Scroll lock */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}

/* Modal root */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Açık hali */
.login-modal.is-open {
  pointer-events: auto;
}

/* Backdrop */
.login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Modal panel */
.login-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 100%;
  max-width: 420px;
  padding: 18px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

/* Açık animasyon */
.login-modal.is-open .login-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Kartlar */
.login-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

/* Header kart biraz daha büyük */
.login-header {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Google buton */
.btn-google {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-weight: 600;
}

/* Primary */
.btn-primary {
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg,#7c6cff,#4f7cff);
  color: #fff;
  font-weight: 600;
  border: none;
}
/* ================= LOGIN MODAL — FORCE CENTER ================= */
.login-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

.login-modal.is-open{
  display: block !important;
}

.login-modal .login-panel{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-height: calc(100vh - 40px) !important;
  overflow: auto !important;
}
/* ===== LOGIN FIX: email+pass row + button visible ===== */
.email-row.email-row-2{
  display:flex;
  gap: 10px;
  margin-bottom: 10px;
}

.email-row.email-row-2 input{
  flex: 1 1 0;
  min-width: 0;           /* Safari taşmasını engeller */
}

/* Buton alt satır full */
.btn-login-full{
  width: 100%;
  height: 52px;
  display: block;
  margin: 6px 0 10px;
}

/* ===== Autofill sarılığını kapat (Safari/Chrome) ===== */
.login-modal input{
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

.login-modal input:-webkit-autofill,
.login-modal input:-webkit-autofill:hover,
.login-modal input:-webkit-autofill:focus{
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0 1000px rgba(255,255,255,.06) inset !important; /* senin input bg'ninle uyumlu */
  transition: background-color 9999s ease-out 0s;
}
/* =========================================================
   AIVO TOPBAR (INDEX) — ISOLATED / SAFE PATCH
   Sadece topbar + dropdown + auth butonları.
   ========================================================= */

:root{
  --aivo-accent1: #7c3aed;
  --aivo-accent2: #6366f1;

  --topbar-h: 78px;
  --glass-bg: rgba(10,12,22,.45);
  --glass-bd: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
}

/* ================= TOPBAR ================= */

.aivo-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 9999;

  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.25));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.aivo-topbar-inner{
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* ================= LOGO ================= */

.aivo-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.aivo-brand-logo{
  height: 36px;            /* LOGO BOYUTU */
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(111,99,255,.28));
}

/* ================= NAV ================= */

.aivo-nav{
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  justify-content: center;
}

.nav-link{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  padding: 10px 8px;
  cursor: pointer;
  opacity: .92;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.nav-link:hover{ opacity: 1; }

/* ================= DROPDOWN ================= */

.nav-item{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;

  padding: 10px;
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  display: none;
}

.dropdown a{
  display: block;
  padding: 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  opacity: .92;
  white-space: nowrap;
}

.dropdown a:hover{
  opacity: 1;
  background: rgba(255,255,255,.06);
}

/* hover + js open */
.has-dropdown:hover .dropdown,
.nav-item.is-open .dropdown{
  display: block;
}

/* ================= AUTH ================= */

.aivo-auth{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  min-width: 240px;
}

.auth-guest,
.auth-user{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* ================= BUTTONS ================= */

.btn-ghost{
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,12,22,.35);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{
  background: rgba(10,12,22,.5);
}

.btn-primary{
  appearance: none;
  border: 0;
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;

  background: linear-gradient(135deg, var(--aivo-accent1), var(--aivo-accent2));
  box-shadow: 0 16px 45px rgba(124,58,237,.25);
}
.btn-primary:hover{
  filter: brightness(1.05);
}

/* ================= PAGE OFFSET ================= */

body{
  padding-top: var(--topbar-h);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 980px){
  .aivo-nav{ gap: 14px; }
  .aivo-auth{ min-width: auto; }
}

@media (max-width: 760px){
  .aivo-brand-logo{ height: 32px; }

  .aivo-nav{
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .aivo-nav::-webkit-scrollbar{ display:none; }

  .btn-ghost,
  .btn-primary{
    padding: 10px 14px;
    font-size: 15px;
  }
}
.aivo-logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* LOGO GÖRSELİ */
.aivo-logo img{
  height: 42px;          /* 🔥 ASIL OLAY BU */
  width: auto;
  display: block;
}

/* LOGO YAZISI (AIVO) */
.aivo-logo span{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--text);
}
/* ===== FIX: FORCE TOPBAR LOGO SIZE (FINAL) ===== */
/* HTML'deki gerçek class: .aivo-brand-logo */
.aivo-topbar img.aivo-brand-logo{
  height: 58px !important;
  width: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  display: block !important;
}

/* Bazı CSS’ler img’yi küçültür (ör. height: 100% / max-height) — hepsini ez */
.aivo-topbar .aivo-brand{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

/* Logo büyüyünce kırpılmasın */
:root{ --topbar-h: 92px; }

@media (max-width: 760px){
  .aivo-topbar img.aivo-brand-logo{ height: 48px !important; }
  :root{ --topbar-h: 82px; }
}
/* =========================
   TOPBAR DROPDOWN ITEMS
   ========================= */

.nav-dropdown a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px 12px 16px;
  margin: 4px 0;

  border-radius: 12px;
  color: rgba(255,255,255,.9);
  text-decoration: none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.01)
  );

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

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

/* sol nokta */
.nav-dropdown a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg,#6f63ff,#1fb6ff);
  opacity: .7;
  flex-shrink: 0;
}

/* alt çizgi */
.nav-dropdown a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg,#6f63ff,#1fb6ff);
  opacity: 0;
  transform: scaleX(.6);
  transition: .25s ease;
}

/* hover */
.nav-dropdown a:hover {
  background: linear-gradient(
    180deg,
    rgba(111,99,255,.12),
    rgba(31,182,255,.06)
  );
  border-color: rgba(111,99,255,.35);
  transform: translateX(2px);
}

.nav-dropdown a:hover::after {
  opacity: .9;
  transform: scaleX(1);
}
/* =========================
   HERO ROTATOR (AIVO)
   ========================= */

/* Değişen kelimenin rengi/gradient'i JS sadece data-theme değiştirerek kontrol eder */
:root{
  --swap-g1: #6f63ff; /* default (music) */
  --swap-g2: #1fb6ff;
}

/* Değişen kelime */
.swap-word{
  display: inline-block;
  margin-left: .18em;
  font-weight: 800;
  line-height: 1;

  background: linear-gradient(90deg, var(--swap-g1), var(--swap-g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  transform: translateY(0);
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  filter: drop-shadow(0 10px 22px rgba(111,99,255,.16));
}

/* çıkış animasyonu */
.swap-word.is-out{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
}

/* giriş animasyonu (JS class'ı kaldırınca geri gelir) */
.swap-word.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Tema token’ları (3 mod) */
[data-hero-theme="music"]{
  --swap-g1:#6f63ff;
  --swap-g2:#1fb6ff;
}
[data-hero-theme="visual"]{
  --swap-g1:#a855f7;
  --swap-g2:#22d3ee;
}
[data-hero-theme="video"]{
  --swap-g1:#f59e0b;
  --swap-g2:#ef4444;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .swap-word{ transition: none; }
}
/* =========================
   HERO — TOP OFFSET FIX
   ========================= */

/* hero bölümünün üst boşluğunu azalt */
.hero{
  padding-top: clamp(26px, 4.2vh, 56px) !important;
}

/* içeride ekstra boşluk varsa onu da kırp */
.hero-inner{
  padding-top: 0 !important;
  align-items: flex-start;
}

/* badge+başlık bloğunu biraz yukarı al */
.hero-left{
  padding-top: clamp(6px, 1.2vh, 14px) !important;
}
/* =========================
   HERO — ÜST BOŞLUK AZALTMA (ADIM 1)
   ========================= */

.hero{
  padding-top: 48px !important;
}
.hero-benefits{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: rgba(255,255,255,.70);
  font-size: 14px;
}

.hero-benefits .hb-item{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
/* =========================
   HERO — YATAY DENGE + OKUNURLUK
   ========================= */

/* Yazı bloğunu sağa doğru biraz genişlet */
.hero-left{
  max-width: 720px;              /* yazı alanını büyüt */
}

/* Başlık biraz daha nefes alsın */
.hero-title{
  font-size: clamp(40px, 5vw, 64px);
}

/* Alt açıklama (3. resimde küçük kalan metin) */
.hero-sub{
  font-size: 18px;
  line-height: 1.6;
  max-width: 560px;
}

/* Fayda pill'lerini büyüt */
.hero-benefits{
  gap: 14px;
}

.hero-benefits .hb-item{
  font-size: 14.5px;
  padding: 8px 14px;
  border-radius: 999px;
}
/* =========================
   HERO — DROPDOWN SAFE ZONE
   ========================= */

.hero{
  padding-top: clamp(96px, 12vh, 140px) !important;
}
/* =========================
   HERO BADGE — MICRO OFFSET
   ========================= */

.hero .badge{
  margin-top: 44px;
}
/* =========================
   HERO — KURUMSAL DROPDOWN SAFE ZONE
   ========================= */

.nav-item.has-dropdown.is-open ~ .hero {
  padding-top: clamp(140px, 18vh, 200px) !important;
}
/* HERO dynamic accent */
:root{
  --hero-accent1:#6f63ff; /* default */
  --hero-accent2:#1fb6ff;
  --hero-accentSolid: #6f63ff;
}

.swap-word{
  background: linear-gradient(135deg, var(--hero-accent1), var(--hero-accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* hero sub + benefits senkron renk */
.hero-sub,
.hero-benefits .hb-item{
  color: rgba(255,255,255,.78);
}

/* “renk değişsin” efekti: hafif vurgulu glow + accent */
.hero-benefits .hb-item{
  border: 1px solid rgba(255,255,255,.10);
}

.hero-benefits .hb-item::before{
  content:"";
  display:none;
}

/* accent mode (JS body’ye class atacak) */
body.hero-accent-on .hero-sub{
  color: rgba(255,255,255,.82);
}

body.hero-accent-on .hero-benefits .hb-item{
  border-color: color-mix(in srgb, var(--hero-accentSolid) 30%, rgba(255,255,255,.10));
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 24px color-mix(in srgb, var(--hero-accentSolid) 22%, transparent);
}

body.hero-accent-on .hero-benefits .hb-item{
  color: rgba(255,255,255,.84);
}

body.hero-accent-on .hero-benefits .hb-item b,
body.hero-accent-on .hero-benefits .hb-item strong{
  color: var(--hero-accentSolid);
}
/* =========================================================
   HERO THEME — FINAL OVERRIDE (en altta)
   ========================================================= */

:root{
  --heroAccent: #6F63FF;
  --heroGrad1:  #7C6BFF;
  --heroGrad2:  #2FB7FF;

  /* ✅ Subtitle da tema ile dönecek */
  --heroSubColor: rgba(255,255,255,.86);
}

/* Swap-word gradient */
.hero .hero-title .swap-word{
  background: linear-gradient(135deg, var(--heroGrad1), var(--heroGrad2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* ✅ Subtitle: artık sabit değil, değişken okuyor */
.hero .hero-sub{
  color: var(--heroSubColor) !important;
}

/* Benefits check: accent'e kilitle (ezilmesin diye !important) */
.hero .hero-benefits .hb-item .hb-check{
  color: var(--heroAccent) !important;
  font-weight: 900;
}

/* Benefits pill border: hafif accent dokunuş (isteğe bağlı ama güzel) */
.hero .hero-benefits .hb-item{
  border-color: rgba(255,255,255,.12) !important;
}

/* Badge dot da accent olsun (uyum) */
.hero .badge .dot{
  background: var(--heroAccent) !important;
}

/* DENGELİ FADE */
.hero .swap-out{
  opacity: .18;
  transform: translateY(3px);
  filter: blur(1.2px);
  transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease;
}
.hero .swap-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}
/* =========================================================
   HERO THEME + HERO VIDEO (FINAL) — SADECE OVERRIDE
   - Hero layout'ı bozmaz (hero-inner display'ine dokunmaz)
   - Dropdown açılınca hero aşağı kaymasın diye kuralı nötralize eder
   - Video "koyu kabuk" hissini mask + blend ile kamufle eder
   ========================================================= */

/* 1) Dropdown open iken hero'yu aşağı iten kuralı etkisizleştir */
.nav-item.has-dropdown.is-open ~ .hero{
  padding-top: 0 !important;
}

/* 2) Tema değişkenleri */
:root{
  --heroAccent: #6F63FF;
  --heroGrad1:  #7C6BFF;
  --heroGrad2:  #2FB7FF;
  --heroSubColor: rgba(255,255,255,.86);

  /* Video kabuğunu kamufle şiddeti (0.0 - 1.0 gibi düşün) */
  --videoBlend: 1; /* 1=aktif, 0=pasif */
}

/* 3) Swap gradient'i SADECE HERO içinde uygula (globali bozma) */
.hero .swap-word{
  background: linear-gradient(135deg, var(--heroGrad1), var(--heroGrad2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* 4) Subtitle tema rengi */
.hero .hero-sub{
  color: var(--heroSubColor) !important;
}

/* 5) Badge dot accent */
.hero .badge .dot{
  background: var(--heroAccent) !important;
}

/* 6) Benefits check accent */
.hero .hero-benefits .hb-item .hb-check{
  color: var(--heroAccent) !important;
  font-weight: 900;
}

/* 7) HERO RIGHT — kutu/kabuk üretmesin */
.hero .hero-right{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;

  /* Yazının tam karşısında dursun */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* 8) VIDEO — boyut + hizalama + “kabuk” kamuflaj */
.hero .hero-video-el{
  width: min(520px, 44vw);  /* küçült + responsive */
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;

  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* Dikey hizayı biraz yukarı al (ince ayar) */
  transform: translateY(-10px);

  /* Hafif parlatma */
  filter: brightness(1.06) contrast(1.02)
          drop-shadow(0 0 90px rgba(120,180,255,0.10));

  /* “Koyu dikdörtgen” video içinde gömülüyse:
     - Mask ile kenarları yumuşatır
     - Blend-mode ile siyahı “daha transparan gibi” hissettirir (tam çözüm değildir) */
  -webkit-mask-image:
    radial-gradient(closest-side, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(closest-side, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);

  /* Blend (opsiyonel ama çoğu koyu kabuğu güzel saklar) */
  mix-blend-mode: screen;
  opacity: 0.92;
}

/* Blend istemezsen 1 satırla kapat:
   :root{ --videoBlend:0; } gibi kullanmak istersen diye güvenli kapatma */
@supports (mix-blend-mode: screen){
  :root{ --_vb: var(--videoBlend); }
  .hero .hero-video-el{
    mix-blend-mode: screen;
  }
}

/* 9) MOBİL */
@media (max-width: 900px){
  .hero .hero-right{
    justify-content: center;
  }
  .hero .hero-video-el{
    width: min(360px, 86vw);
    transform: translateY(0);
    mix-blend-mode: normal;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
  }
}
/* =========================================================
   HERO — DİKEY HİZALAMA + YAZI KAYMA FIX (GÜVENLİ)
   ========================================================= */

.hero{
  position: relative;
  padding-top: clamp(96px, 12vh, 140px); /* header altı güvenli mesafe */
  padding-bottom: clamp(80px, 14vh, 120px);
}

/* İçeriği yukarı sabitle */
.hero-inner{
  align-items: flex-start;   /* ⬅️ kritik satır */
}

/* Yazı bloğu */
.hero-left{
  margin-top: 0;
}

/* Ücretsiz deneme / özellik pill’leri */
.hero-benefits,
.hero .hero-benefits{
  margin-top: 28px; /* yazının hemen altına sabitle */
}
/* =========================================================
   HERO CONTENT FLOW FIX (NON-DESTRUCTIVE)
   ========================================================= */

/* Hero ana akışı */
.hero{
  position: relative;
}

/* İç grid / flex */
.hero-inner{
  align-items: flex-start !important;
}

/* Sol içerik dikey akış */
.hero-left{
  display: flex;
  flex-direction: column;
}

/* Başlık + açıklama + butonlardan sonra gelen alt satır */
.hero-left .hero-benefits,
.hero-left .hero-features,
.hero-left .benefits{
  position: relative !important;
  margin-top: 28px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mobilde biraz daha sıkı */
@media (max-width: 900px){
  .hero-left .hero-benefits{
    margin-top: 20px;
  }
}
/* =========================================================
   HERO VIDEO — SIZE + SOFT EDGES (FINAL)
   ========================================================= */

/* Hero sağ alanı: kutusuz, sayfaya gömülü */
.hero .hero-right{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;

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

/* Video kapsayıcı: Eita gibi "daha kısa + biraz geniş" */
.hero .hero-video{
  width: min(520px, 42vw);   /* biraz genişlettik */
  aspect-ratio: 10 / 16;     /* 9/16 yerine: daha geniş görünür */
  height: auto;
  position: relative;
}

/* Video element */
.hero .hero-video-el{
  width: 100%;
  height: 100%;
  object-fit: cover;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* Sayfaya karışsın (koyu kabuk hissini kırar) */
  filter:
    brightness(1.06)
    contrast(1.02)
    drop-shadow(0 0 90px rgba(120,180,255,0.14));

  /* Yanları yumuşat: kabuk gibi görünmesin */
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
}

/* Mobil */
@media (max-width: 900px){
  .hero .hero-video{ width: min(380px, 86vw); }
  .hero .hero-video-el{ -webkit-mask-image:none; mask-image:none; }
}
/* =========================================================
   HERO VIDEO — FINAL SCALE & BLEND (TEK BLOK / GÜVENLİ)
   ========================================================= */

/* Hero sağ kolon konumu */
.hero-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4vw; /* metne biraz yaklaşsın */
}

/* Video container */
.hero-video{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* Video element */
.hero-video video{
  width: 58%;              /* ⬅️ biraz daha geniş */
  max-width: 520px;
  height: auto;
  aspect-ratio: 9 / 16;

  object-fit: cover;
  background: transparent;
  border-radius: 0;
  box-shadow: none;

  /* biraz daha kısa hissi */
  transform: scaleY(0.92);

  /* sayfaya yedir */
  opacity: 0.96;
  filter:
    brightness(1.05)
    contrast(1.02)
    drop-shadow(0 0 70px rgba(120,180,255,0.10));

  /* ⬅️ KABUK HİSSİNİ YOK EDEN ASIL NOKTA */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 14%,
    rgba(0,0,0,1) 86%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 14%,
    rgba(0,0,0,1) 86%,
    rgba(0,0,0,0) 100%
  );
}

/* MOBİL */
@media (max-width: 900px){
  .hero-right{
    justify-content: center;
    padding-right: 0;
    margin-top: 32px;
  }

  .hero-video video{
    width: 72%;
    max-width: 360px;
    transform: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
/* =========================================================
   HERO VIDEO — FINAL v3 (DAHA HAFİF / YUKARI + SAĞA YAKIN)
   Donma riskini azaltmak için: ağır filter + mask yumuşatıldı
   ========================================================= */

.hero-right{
  display:flex;
  align-items:flex-start;          /* yukarı hizala */
  justify-content:flex-end;        /* sağa yanaştır */
  padding-right: 6vw;              /* login’e doğru yaklaş */
  padding-top: 10px;               /* çok az yukarı */
}

.hero-video{
  width: 100%;
  display:flex;
  justify-content:flex-end;
}

.hero-video video{
  width: 62%;                      /* şişman ama kontrollü */
  max-width: 540px;
  height: auto;
  aspect-ratio: 9 / 16;

  object-fit: cover;
  background: transparent;
  border-radius: 0;
  box-shadow: none;

  /* yukarı + biraz sağa (login tarafına) */
  transform: translate(10px, -34px);

  /* AĞIR FILTER’LAR ÇIKTI (donma azaltır) */
  opacity: .98;
  filter: none;

  /* Mask daha yumuşak ve daha hafif */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 18%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 18%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0) 100%
  );
}

/* 1200px altı biraz toparla */
@media (max-width: 1200px){
  .hero-video video{
    width: 66%;
    transform: translate(6px, -26px);
  }
}

/* MOBİL */
@media (max-width: 900px){
  .hero-right{
    justify-content:center;
    padding-right: 0;
    padding-top: 0;
    margin-top: 24px;
  }

  .hero-video video{
    width: 78%;
    max-width: 380px;
    transform: translate(0, -8px);
    mask-image: none;
    -webkit-mask-image: none;
  }
}
/* =========================================================
   HERO VIDEO — FINAL FINE TUNE
   Sağda ama fazla kaçmadan (Login altı hizası)
   ========================================================= */

.hero-right{
  justify-content: flex-end !important;
}

/* Video sağa ama kontrollü */
.hero-video{
  display: flex !important;
  justify-content: flex-end !important;
}

/* 🔧 İNCE AYAR */
.hero-video video{
  transform: translate(40px, -26px) !important; /* ⬅️ GERİ ALDIK */
  transform-origin: center center;
  will-change: transform;
}

/* Büyük ekran: çok az daha sağ */
@media (min-width: 1400px){
  .hero-video video{
    transform: translate(120px, -40px) !important;
  }
}

/* Orta ekran */
@media (max-width: 1200px){
  .hero-video video{
    transform: translate(70px, -28px) !important;
  }
}

/* Mobil: normal akış */
@media (max-width: 900px){
  .hero-video video{
    transform: none !important;
  }
}
/* HERO altındaki ölü boşluğu kaldır */
.hero{
  min-height: auto !important;
  padding-bottom: 0 !important;
}
.hero-inner{
  min-height: auto !important;
}
/* HERO içeriğini biraz daha yukarı çek */
.hero{
  padding-bottom: 24px !important;
}
.hero{
  padding-bottom: 12px !important;
}
/* FOOTER üst alanı yukarı doğru genişlet */
.aivo-footer-top{
  padding-top: 96px !important;   /* varsayılan genelde 56–64px */
}
/* Footer üst sınırı biraz daha yukarı taşı */
.aivo-footer{
  margin-top: -32px;
}
/* ===============================
   VITRIN — KURUMSAL FINAL STYLE
   =============================== */

.corp-vitrin{
  max-width: 1200px;
  margin: 0 auto 120px;
  padding: 80px 24px 0;
  color: #fff;
}

/* HERO */
.corp-v-hero{
  max-width: 760px;
  margin-bottom: 56px;
}

.corp-badge{
  display:inline-block;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9aa2ff;
  margin-bottom:14px;
}

.corp-title{
  font-size:42px;
  line-height:1.15;
  margin-bottom:16px;
}

.corp-title span{
  display:block;
  font-weight:400;
  font-size:22px;
  color:#b8c0ff;
  margin-top:6px;
}

.corp-desc{
  font-size:16px;
  color:rgba(255,255,255,.78);
  margin-bottom:10px;
}

.corp-note{
  font-size:13px;
  color:rgba(255,255,255,.55);
}

/* GRID */
.corp-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:22px;
}

/* CARDS */
.corp-card{
  background: linear-gradient(
    180deg,
    rgba(120,120,255,.12),
    rgba(40,40,80,.08)
  );
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px 24px;
  backdrop-filter: blur(6px);
}

.corp-card h3{
  font-size:18px;
  margin-bottom:10px;
}

.corp-card p,
.corp-card li{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.75);
}

.corp-card ul{
  padding-left:18px;
}

.corp-muted{
  font-size:12px;
  color:rgba(255,255,255,.45);
  margin-top:10px;
}

/* CONTACT */
.corp-contact{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:14px;
}

.corp-contact a{
  color:#7aa2ff;
  text-decoration:none;
}

.corp-contact a:hover{
  text-decoration:underline;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .corp-grid{
    grid-template-columns:1fr;
  }
  .corp-title{
    font-size:34px;
  }
}
/* ================= KURUMSAL VITRIN ================= */
.corp-vitrin{
  padding: 96px 0 64px;
}

.corp-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.corp-hero{
  max-width: 640px;
  margin-bottom: 48px;
}

.corp-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8b8cff;
  margin-bottom:8px;
}

.corp-hero h2{
  font-size:36px;
  margin:0 0 12px;
}

.corp-lead{
  color:rgba(255,255,255,.75);
}

.corp-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
}

.corp-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:24px;
}

.corp-card h3{
  margin-top:0;
}

.corp-list{
  padding-left:18px;
}

.corp-list li{
  margin-bottom:8px;
}

.corp-contact{
  margin-top:40px;
  text-align:center;
  color:rgba(255,255,255,.7);
}

.corp-contact a{
  color:#8b8cff;
  font-weight:600;
  margin-left:6px;
}

@media(max-width:900px){
  .corp-grid{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   AIVO — VITRIN / KURUMSAL (FINAL)
   ========================================================= */

#corp-vitrin{
  position: relative;
  padding: 140px 0 160px;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(111,99,255,.18), transparent 60%),
    radial-gradient(1000px 500px at 80% 20%, rgba(31,182,255,.14), transparent 60%);
}

#corp-vitrin .corp-head{
  max-width: 720px;
  margin-bottom: 72px;
}

#corp-vitrin .corp-eyebrow{
  color: #9aa3ff;
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 12px;
  margin-bottom: 12px;
}

#corp-vitrin h2{
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.1;
  margin-bottom: 20px;
}

#corp-vitrin .corp-lead{
  font-size: 18px;
  color: rgba(255,255,255,.75);
  max-width: 560px;
}

/* GRID */
#corp-vitrin .corp-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}

/* CARD */
#corp-vitrin .corp-card{
  position: relative;
  padding: 40px 42px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  transition: transform .35s ease, box-shadow .35s ease;
}

#corp-vitrin .corp-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: radial-gradient(400px 200px at 20% 0%, rgba(111,99,255,.25), transparent 60%);
  opacity:.6;
  pointer-events:none;
}

#corp-vitrin .corp-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* TITLE */
#corp-vitrin .corp-card h3{
  font-size: 22px;
  margin-bottom: 14px;
}

/* TEXT */
#corp-vitrin .corp-card p,
#corp-vitrin .corp-card li{
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
}

/* LIST */
#corp-vitrin ul{
  padding-left: 18px;
}

/* FOOT NOTE */
#corp-vitrin .corp-foot{
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 900px){
  #corp-vitrin .corp-grid{
    grid-template-columns: 1fr;
  }
  #corp-vitrin{
    padding: 110px 0 120px;
  }
}
/* ===============================
   KURUMSAL KART CANLANDIRMA
   =============================== */

/* Kart yüzeyi – hafif renk derinliği */
#corp-vitrin .corp-card{
  background:
    radial-gradient(
      120% 120% at 0% 0%,
      rgba(111,99,255,0.14),
      rgba(10,14,30,0.85)
    );
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  transition: all .35s ease;
}

/* Hover’da kart canlansın */
#corp-vitrin .corp-card:hover{
  transform: translateY(-4px);
  border-color: rgba(111,99,255,0.35);
  box-shadow:
    0 0 0 1px rgba(111,99,255,0.15),
    0 25px 80px rgba(0,0,0,0.55);
}

/* Başlıklar – renkli + glow */
#corp-vitrin .corp-card h3{
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 14px;

  background: linear-gradient(
    135deg,
    #ffffff,
    #a9a4ff
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 18px rgba(111,99,255,0.35);
}

/* Liste maddeleri biraz daha rahat */
#corp-vitrin .corp-card ul li{
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
}

/* Hakkımızda kartına ekstra vurgu */
#corp-vitrin .corp-card:nth-child(1){
  background:
    radial-gradient(
      120% 120% at 100% 0%,
      rgba(31,182,255,0.18),
      rgba(10,14,30,0.9)
    );
}

/* Özellikler kartına farklı ton */
#corp-vitrin .corp-card:nth-child(2){
  background:
    radial-gradient(
      120% 120% at 0% 100%,
      rgba(168,85,247,0.18),
      rgba(10,14,30,0.9)
    );
}

/* Gizlilik kartı – daha güven hissi */
#corp-vitrin .corp-card:nth-child(3){
  background:
    radial-gradient(
      120% 120% at 100% 100%,
      rgba(34,211,238,0.18),
      rgba(10,14,30,0.9)
    );
}

/* Mesafeli satış – daha nötr */
#corp-vitrin .corp-card:nth-child(4){
  background:
    radial-gradient(
      120% 120% at 50% 50%,
      rgba(255,255,255,0.06),
      rgba(10,14,30,0.95)
    );
}
#corp-vitrin .corp-card{
  position: relative;
  overflow: hidden;
}

/* ışık katmanı */
#corp-vitrin .corp-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,0.12),
      transparent 70%
    );
  opacity:.0;
  transform: translateX(-120%);
  transition: all .6s ease;
}

#corp-vitrin .corp-card:hover::before{
  opacity:.6;
  transform: translateX(120%);
}
@keyframes aivoGlow {
  0%   { text-shadow: 0 0 10px rgba(111,99,255,.25); }
  50%  { text-shadow: 0 0 22px rgba(111,99,255,.55); }
  100% { text-shadow: 0 0 10px rgba(111,99,255,.25); }
}

#corp-vitrin h1,
#corp-vitrin .corp-card h3{
  animation: aivoGlow 5.5s ease-in-out infinite;
}
#corp-vitrin .corp-card::after{
  content:"";
  position:absolute;
  left:20%;
  right:20%;
  bottom:0;
  height:2px;
  background: linear-gradient(
    90deg,
    transparent,
    #6f63ff,
    #1fb6ff,
    transparent
  );
  opacity:0;
  transition: all .35s ease;
}

#corp-vitrin .corp-card:hover::after{
  opacity:1;
  left:10%;
  right:10%;
}
#corp-vitrin{
  background-size: 200% 200%;
  animation: corpBgMove 22s ease infinite;
}

@keyframes corpBgMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* =========================================================
   VITRIN — CORP SECTION POLISH (EITA STYLE)
   Append to /index.css
   ========================================================= */

#corp-vitrin .corp-head{
  max-width: 880px;
  margin: 0 auto 18px;
}

#corp-vitrin .corp-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 1100px){
  #corp-vitrin .corp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #corp-vitrin .corp-grid{ grid-template-columns: 1fr; }
}

#corp-vitrin .corp-card{
  display: block;
  padding: 18px 18px 16px;
  border-radius: 20px;
  text-decoration: none;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);

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

#corp-vitrin .corp-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.05);
  border-color: rgba(160,140,255,.28);
}

#corp-vitrin .corp-card h3{
  margin: 0 0 10px;
  padding-bottom: 10px;
  position: relative;
}

#corp-vitrin .corp-card h3::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 78px;
  height: 2px;
  background: rgba(160,140,255,.55);
  box-shadow: 0 0 18px rgba(160,140,255,.35);
  border-radius: 99px;
}

#corp-vitrin .corp-card p,
#corp-vitrin .corp-card li{
  opacity: .78;
  line-height: 1.55;
}

#corp-vitrin .corp-card ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
/* ===============================
   TOPBAR DROPDOWN – SADECE TOPBAR
   =============================== */

.aivo-topbar .dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;

  padding: 10px;
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  display: none;
}

.aivo-topbar .dropdown a{
  display: block;
  padding: 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  opacity: .92;
  white-space: nowrap;
}

.aivo-topbar .dropdown a:hover{
  opacity: 1;
  background: rgba(255,255,255,.06);
}
/* ===============================
   FIX: CORP BACKGROUND ANIMATION OFF
   (sayfanın altından renk dönmesini keser)
   =============================== */
#corp-vitrin{
  animation: none !important;
  background-size: auto !important;
  background-position: 50% 50% !important;
}
/* ===============================
   FIX 2: CORP TEXT GLOW + PSEUDO LAYERS OFF
   (yanıp sönmeyi ve mikro parlamayı keser)
   =============================== */
#corp-vitrin h1,
#corp-vitrin .corp-card h3{
  animation: none !important;
  text-shadow: none !important;
}

#corp-vitrin .corp-card::before,
#corp-vitrin .corp-card::after{
  animation: none !important;
  transition: none !important;
  opacity: 0 !important;
}
/* =========================================
   FORCE FOOTER CONTACT MAIL (FINAL, GUARANTEED)
   ========================================= */

.aivo-contact a.aivo-contact-mail{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  color: #cfd3ff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;

  background:
    radial-gradient(260px 100px at 30% 0%, rgba(111,99,255,.22), transparent 60%),
    rgba(12,18,32,.55) !important;

  border: 1px solid rgba(185,167,255,.30) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  backdrop-filter: blur(8px) !important;

  position: relative !important;
}

/* hover */
.aivo-contact a.aivo-contact-mail:hover{
  border-color: rgba(185,167,255,.45) !important;
  box-shadow:
    0 12px 32px rgba(111,99,255,.40),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* focus */
.aivo-contact a.aivo-contact-mail:focus-visible{
  outline: 2px solid rgba(185,167,255,.55) !important;
  outline-offset: 3px !important;
}
/* =========================================
   AIVO CONTACT MAIL — UNDERLINE GLOW (FINAL)
   ========================================= */

.aivo-contact a.aivo-contact-mail{
  position: relative !important;
  display: inline-flex !important;
  width: fit-content !important;
}

/* alt ışık çizgisi */
.aivo-contact a.aivo-contact-mail::after{
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: -7px !important;   /* çizgi kapsülün altına insin */
  height: 2px !important;
  border-radius: 2px !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(185,167,255,.95),
    transparent
  ) !important;

  opacity: .9 !important;
  filter: blur(.2px) !important;
  pointer-events: none !important;
}

/* hover’da biraz daha parlak */
.aivo-contact a.aivo-contact-mail:hover::after{
  opacity: 1 !important;
  filter: blur(0px) !important;
}
/* =========================================
   FOOTER CONTACT ALIGN — CENTER POLISH
   ========================================= */

.aivo-contact{
  align-items: center;     /* içerikleri ortaya al */
  text-align: center;      /* başlık ve mail ortalansın */
  margin-top: 10px;
}

/* Başlık biraz daha “footer title” gibi dursun */
.aivo-contact h4{
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}

/* Mail chip ortada kalsın */
.aivo-contact-mail{
  margin: 0 auto;
}
/* =========================================
   TOPBAR — Daha koyu premium + en üste yapış (GLOBAL)
   ========================================= */

:root{
  /* Daha koyu (sayfadan 0.5–1 ton açık) */
  --topbar-bg: rgba(14, 18, 30, .78);
  --topbar-bd: rgba(255, 255, 255, .08);

  /* Görsel yükseklik (menünün içerik yüksekliği) */
  --topbar-h: 72px;
}

/* Topbar kabuğu */
.aivo-topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 999999 !important;

  /* iOS/Safari üst güvenli alan */
  padding-top: env(safe-area-inset-top, 0px);

  /* Toplam yükseklik = içerik + safe-area */
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));

  display: flex;
  align-items: center;

  background: linear-gradient(
    180deg,
    rgba(12, 14, 24, .86),
    var(--topbar-bg)
  ) !important;

  border-bottom: 1px solid var(--topbar-bd) !important;

  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* Hafif glow (daha sakin) */
.aivo-topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 20% 0%,
      rgba(111,99,255,.10), transparent 62%);
  opacity:.8;
}

/* İç container hizalama */
.aivo-topbar-inner{
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}

/* Topbar fixed olduğu için sayfayı aşağı başlat (index + studio) */
body{
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}
/* TOPBAR — Player gibi daha premium cam hissi (fine tune) */
:root{
  --topbar-bg: rgba(12, 16, 26, .62); /* daha şeffaf */
  --topbar-bd: rgba(255,255,255,.06); /* daha ince kenar */
}

/* kabuk yumuşasın */
.aivo-topbar{
  background: linear-gradient(
    180deg,
    rgba(10, 12, 20, .72),
    var(--topbar-bg)
  ) !important;

  border-bottom: 1px solid var(--topbar-bd) !important;

  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* üstte ince highlight çizgisi (premium) */
.aivo-topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  pointer-events:none;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.10),
    transparent
  );
  opacity:.7;
}

/* glow biraz daha sakin */
.aivo-topbar::before{
  opacity:.55 !important;
}
/* TOPBAR — Çizgileri yok et (final polish) */

/* 1) Alt border çizgisini kapat / çok azalt */
.aivo-topbar{
  border-bottom: 0 !important;                 /* çizgi tamamen gitsin */
  box-shadow: 0 18px 60px rgba(0,0,0,.28) !important;  /* tek, yumuşak gölge */
}

/* 2) Üst highlight çizgisi varsa kapat */
.aivo-topbar::after{
  display: none !important;
}

/* 3) Glow’u biraz daha doğal yap (çizgi hissi azaltır) */
.aivo-topbar::before{
  opacity: .45 !important;
}
/* =========================================
   TOPBAR — yükseklik eşitleme (FINAL FIX)
   1px bant / çizgi sorununu bitirir
   ========================================= */

:root{
  --topbar-h: 72px; /* TOPBAR GERÇEK YÜKSEKLİĞİ */
}

/* Sayfa içeriğini topbar kadar aşağı al */
body{
  padding-top: calc(
    var(--topbar-h) + env(safe-area-inset-top, 0px)
  ) !important;
}

/* Topbar’ın kendisi */
.aivo-topbar{
  height: calc(
    var(--topbar-h) + env(safe-area-inset-top, 0px)
  ) !important;
}

/* İç container */
.aivo-topbar-inner{
  height: var(--topbar-h) !important;
}
/* =========================================================
   TOPBAR USER / ADMIN PANEL (VITRIN)
   ========================================================= */

.topbar-user{
  position: relative;
  display: flex;
  align-items: center;
}

/* Kullanıcı pill */
.user-pill{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.user-pill .user-ava{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#7b6cff,#5fd4ff);
  font-weight: 700;
}

.user-pill .user-name{
  font-weight: 600;
}

.user-pill .chev{
  opacity: .6;
}

/* Dropdown panel */
.user-menu{
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  display: none;
  z-index: 99999;
}

.user-menu.is-open{
  display: block;
}

/* Kart */
.user-menu-card{
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(900px 300px at 10% 0%, rgba(123,108,255,.25), transparent 60%),
    radial-gradient(800px 260px at 90% 20%, rgba(95,212,255,.18), transparent 60%),
    rgba(10,12,22,.92);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

/* Üst kullanıcı bilgisi */
.um-head{
  display: flex;
  gap: 12px;
  align-items: center;
}

.um-ava{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#7b6cff,#5fd4ff);
  font-size: 20px;
  font-weight: 800;
}

.um-title{
  font-size: 20px;
  font-weight: 800;
}

.um-sub{
  font-size: 13px;
  opacity: .65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Plan */
.um-plan{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}

/* Ayraç */
.um-sep{
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
}

/* Menü item */
.um-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all .15s ease;
}

.um-item:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.um-i{
  width: 22px;
  display: flex;
  justify-content: center;
  opacity: .9;
}

/* Logout */
.um-logout{
  border-color: rgba(255,90,90,.35);
}

.um-logout:hover{
  border-color: rgba(255,90,90,.6);
  background: rgba(255,90,90,.08);
}
/* =========================================================
   ADMIN PANEL — SIZE TUNING (KÜÇÜLTME)
   ========================================================= */

/* Panel genel genişlik */
.user-menu{
  width: 300px; /* 320 → 300 */
}

/* Kart iç boşluk */
.user-menu-card{
  padding: 14px; /* 16 → 14 */
  border-radius: 20px; /* 22 → 20 */
}

/* Üst avatar */
.um-ava{
  width: 46px;   /* 52 → 46 */
  height: 46px;
  font-size: 18px;
}

/* İsim */
.um-title{
  font-size: 18px; /* 20 → 18 */
}

/* Email */
.um-sub{
  font-size: 12px;
}

/* Plan badge */
.um-plan{
  padding: 8px 10px;
  font-size: 14px;
}

/* Menü itemleri */
.um-item{
  padding: 10px 12px; /* 12/14 → 10/12 */
  border-radius: 14px;
  font-size: 14px;
  margin-bottom: 8px;
}

/* Logout butonu */
.um-logout{
  margin-top: 6px;
  padding: 10px 12px;
}

/* Ayraç */
.um-sep{
  margin: 12px 0;
}
/* =========================================================
   TOPBAR — FULL WIDTH (Sadece üst bar)
   ========================================================= */

#top{
  width: 100%;
}

#top .aivo-topbar-inner.container{
  max-width: none !important;
  width: 100% !important;

  /* Kenarlardan nefes */
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* NAV ortada, AUTH sağda kalsın */
#top .aivo-topbar-inner{
  display: flex !important;
  align-items: center !important;
}

#top .aivo-nav{
  margin: 0 auto !important;   /* menü ortada */
}

#top .aivo-auth{
  margin-left: 0 !important;   /* sağ blok */
}


/* =========================================================
   USER PILL — OUTLINE GLASS (Premium & Minimal)
   İç: neredeyse tamamen saydam
   Renk: sadece kenarlarda
   ========================================================= */

#top .user-pill{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;

  /* İÇ: neredeyse yok */
  background: rgba(10, 14, 26, 0.12) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;

  /* Kenar: premium outline */
  border: 1px solid rgba(160,120,255,0.45) !important;

  /* Gölge çok hafif */
  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Kenar ışığı (renk sadece burada) */
#top .user-pill::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 18px !important;
  pointer-events: none !important;

  background: linear-gradient(
    135deg,
    rgba(180,150,255,0.55),
    rgba(90,220,255,0.40)
  ) !important;

  opacity: 0.55 !important;

  /* sadece kenar */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Avatar: canlı ama taşmıyor */
#top .user-pill .user-ava{
  background:
    radial-gradient(circle at 30% 30%, rgba(200,175,255,0.90), rgba(98,72,255,0.65)) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    0 8px 18px rgba(98,72,255,0.25) !important;
}

/* Hover: sadece kenar biraz canlansın */
#top .user-pill:hover{
  background: rgba(10, 14, 26, 0.18) !important;
  border-color: rgba(160,120,255,0.65) !important;
}

#top .user-pill:hover::before{
  opacity: 0.85 !important;
}
/* =========================================================
   TOPBAR — CREDITS PILL (User-Pill ile aynı premium dil)
   ========================================================= */

#topCredits{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 12px;
}

/* Ortak kredi pill stili */
#topCredits .credit-pill,
#topCredits .btn-credit-buy{
  position: relative;
  overflow: hidden;
  border-radius: 18px;

  /* iç neredeyse tamamen saydam */
  background: rgba(10,14,26,0.12);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);

  /* premium outline */
  border: 1px solid rgba(160,120,255,0.45);

  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;

  box-shadow:
    0 10px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05);

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

/* Kenar ışığı — renk SADECE burada */
#topCredits .credit-pill::before,
#topCredits .btn-credit-buy::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(180,150,255,0.55),
    rgba(90,220,255,0.40)
  );

  opacity: .55;

  /* sadece kenar */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Kredi sayısı — daha kompakt */
#topCredits .credit-pill{
  padding: 9px 14px;
  font-size: 14px;
}

#topCredits .credit-pill strong{
  margin-left: 6px;
  font-weight: 900;
}

/* Kredi Al — biraz daha geniş ama aynı stil */
#topCredits .btn-credit-buy{
  padding: 10px 18px;
  font-size: 15px;
}

/* Hover: sadece kenar canlansın */
#topCredits .credit-pill:hover,
#topCredits .btn-credit-buy:hover{
  background: rgba(10,14,26,0.18);
  border-color: rgba(160,120,255,0.65);
  transform: translateY(-1px);
}

#topCredits .credit-pill:hover::before,
#topCredits .btn-credit-buy:hover::before{
  opacity: .85;
}

/* Active */
#topCredits .credit-pill:active,
#topCredits .btn-credit-buy:active{
  transform: translateY(0);
}

/* Mobil */
@media (max-width: 820px){
  #topCredits{ gap: 8px; margin-right: 8px; }
  #topCredits .credit-pill{ padding: 8px 12px; font-size: 13px; }
  #topCredits .btn-credit-buy{ padding: 9px 14px; font-size: 14px; }
}
/* =========================================================
   CTA — SOFT PULSE (STRONG / PREMIUM)
   Sadece "Kredi Al" — daha görünür ama hâlâ şık
   ========================================================= */

#topCredits .btn-credit-buy::after{
  content: "";
  position: absolute;
  inset: -12px;              /* dalga daha geniş */
  border-radius: 28px;
  pointer-events: none;

  background: radial-gradient(
    circle at center,
    rgba(200,170,255,0.65),
    rgba(200,170,255,0.35),
    rgba(200,170,255,0.18),
    transparent 72%
  );

  opacity: 0;
  transform: scale(0.88);
  animation: creditPulseStrong 1.9s ease-in-out infinite;
}

#topCredits .btn-credit-buy:hover::after{
  animation-play-state: paused;
  opacity: .85;
  transform: scale(1.04);
}

@keyframes creditPulseStrong{
  0%{
    opacity: 0;
    transform: scale(0.88);
  }
  30%{
    opacity: .75;            /* ana vurgu */
    transform: scale(1.06);
  }
  60%{
    opacity: .35;
    transform: scale(1.14);
  }
  100%{
    opacity: 0;
    transform: scale(1.22);
  }
}
/* 🚫 Footer arka plan logo fix */
footer::before,
footer::after {
  content: none !important;
  background: none !important;
}

footer {
  background-image: none !important;
}
/* =============================
   FIX: A/B üstüne binen bant (Safari/WebKit)
   Kaynak: #modules / .aivo-modules overlay katmanı
   ============================= */

#modules, .aivo-modules{
  position: relative;
  z-index: 1;
}

#ab-pack{
  position: relative;
  z-index: 5;
  isolation: isolate;
}

/* modules içindeki büyük glow layer’ları yukarı taşmasın */
#modules::before, #modules::after,
.aivo-modules::before, .aivo-modules::after{
  z-index: 0 !important;
  pointer-events: none;
}

/* Eğer modules negatif margin/transform ile yukarı çekildiyse sıfırla */
#modules, .aivo-modules{
  margin-top: 0 !important;
  transform: none !important;
}
/* =========================================================
   A/B SOSYAL MEDYA — TEK BLOK (FINAL)
   Hedef: Safari band + kaybolma + #modules çakışması bitsin
   Dosya: index.ab.css (EN ALT)
   ========================================================= */

/* Section container */
#ab-pack{
  display: block;
  position: relative;
  isolation: isolate;

  /* önemli: taşmayı kilitle (band + sızma biter) */
  overflow: hidden;

  padding: 64px 0 42px;
  margin: 0 0 64px;          /* modules ile mesafe */
}

/* Arka glow (kontrollü, section dışına taşmaz) */
#ab-pack::before{
  content:"";
  position:absolute;
  inset:-32px;               /* ⛔ devasa -110px yok */
  pointer-events:none;

  background:
    radial-gradient(900px 420px at 18% 18%, rgba(126, 92, 255, .22), transparent 62%),
    radial-gradient(900px 420px at 82% 18%, rgba(0, 200, 255, .14), transparent 64%),
    radial-gradient(1000px 520px at 50% 95%, rgba(255, 90, 200, .10), transparent 66%);

  transform: translateZ(0);
  z-index: 0;
  opacity: .95;
}

/* İçerik üstte */
#ab-pack > .container{
  position: relative;
  z-index: 1;
}

/* Head */
#ab-pack .sm-pack__head{
  max-width: 980px;
  margin: 0 auto 18px;
  text-align: left;
}

#ab-pack .sm-pack__title{
  margin: 0;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

#ab-pack .sm-pack__sub{
  margin: 10px 0 0;
  max-width: 760px;
  opacity: .78;
  line-height: 1.55;
}

/* Grid */
#ab-pack .sm-pack__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
  align-items: stretch;
}

@media (max-width: 920px){
  #ab-pack{ padding: 54px 0 34px; margin-bottom: 56px; }
  #ab-pack .sm-pack__grid{ grid-template-columns: 1fr; }
}

/* Cards */
#ab-pack a.sm-card,
#ab-pack a.sm-card:visited{
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 20px 20px 16px;
  border-radius: 22px;

  text-decoration: none;
  color: inherit;

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

  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);

  transform: translateZ(0);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  #ab-pack a.sm-card,
  #ab-pack a.sm-card:visited{
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

#ab-pack a.sm-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(900px 380px at 20% 20%, rgba(126, 92, 255, .24), transparent 60%),
    radial-gradient(900px 380px at 80% 20%, rgba(0, 200, 255, .14), transparent 62%);
  opacity: .85;
  z-index: 0;
}

#ab-pack a.sm-card.sm-card--alt::before{
  background:
    radial-gradient(900px 380px at 20% 20%, rgba(255, 90, 210, .20), transparent 62%),
    radial-gradient(900px 380px at 80% 20%, rgba(126, 92, 255, .18), transparent 60%);
}

#ab-pack a.sm-card > *{ position: relative; z-index: 1; }

#ab-pack a.sm-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 28px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Card internals */
#ab-pack .sm-card__top{ display:flex; align-items:center; justify-content: space-between; }

#ab-pack .sm-ico{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

#ab-pack .sm-badge{
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  opacity: .95;
}

#ab-pack .sm-card__title{ margin: 4px 0 0; font-size: 18px; font-weight: 900; }
#ab-pack .sm-card__desc{ margin: 0; opacity: .78; line-height: 1.55; }

#ab-pack .sm-card__bullets{ margin: 4px 0 12px; padding-left: 18px; opacity: .92; }
#ab-pack .sm-card__bullets li{ margin: 6px 0; }

#ab-pack .sm-card__cta{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
  opacity: .95;
}

/* =========================================================
   LAYOUT GUARANTEE: #modules yukarı çekilse bile çakışmasın
   (tek defa, tek yerde)
   ========================================================= */
#modules, .aivo-modules{
  margin-top: 0 !important;
  transform: none !important;
  top: auto !important;
  position: relative !important;
}
/* =========================================================
   GLOBAL PAGE HEIGHT FIX (vitrin)
   Amaç: sayfa uzasın, section'lar akışta yer kaplasın
   Dosya: index.css (EN ALT)
   ========================================================= */

html, body{
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body{
  position: relative !important;
}

/* Bazı temalarda hero/wrapper 100vh + overflow hidden ile sayfayı kilitliyor */
#topHero,
.hero{
  height: auto !important;
  min-height: 100vh;  /* hero görünümü korunur */
  overflow: visible !important;
}

/* Section'lar akış içinde kalsın (absolute/fixed ile üst üste binmesin) */
section{
  position: relative;
}

/* Modules yukarı çekiliyorsa kesin iptal */
#modules, .aivo-modules{
  margin-top: 0 !important;
  transform: none !important;
  top: auto !important;
  position: relative !important;
}
/* =========================================================
   A/B → Modules Dikey Oran Düzeltme (FINAL POLISH)
   ========================================================= */

/* A/B section biraz daha uzun dursun */
#ab-pack{
  padding-bottom: 96px;   /* önce 56–64 idi, şimdi dengeli */
  margin-bottom: 96px;    /* modules ile araya net mesafe */
}

/* Modüller başlığı yukarı zıplamasın */
#modules,
.aivo-modules{
  padding-top: 32px;
}
/* =========================================================
   A/B (ab-pack) ORAN + BİTİŞ FADE — index.css (EN ALT)
   Amaç: A/B bloğu kısa bitmesin, geçiş yumuşasın
   ========================================================= */

#ab-pack{
  padding-top: 64px;
  padding-bottom: clamp(120px, 14vh, 200px);
  margin-bottom: clamp(72px, 10vh, 140px);
  position: relative;
  isolation: isolate;
}

/* glow katmanı varsa biraz genişlet (ani bitiş azalır) */
#ab-pack::before{
  inset: -48px;
}

/* alt fade (kısalık hissini bitirir) */
#ab-pack::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 160px;
  pointer-events:none;
  z-index: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0),
    rgba(10,12,22,.55)
  );
}

/* içerik her zaman üstte kalsın */
#ab-pack > .container{
  position: relative;
  z-index: 1;
}
/* =========================================================
   SAFARI / WEBKIT "LIGHT LEAK" FIX (radial-gradient + animation)
   - Alt tarafta parlayan renk / ışık sızması giderir
   - Kompozit katmanı izole eder ve taşmayı keser
   ========================================================= */

/* 1) Sayfa genelinde yatay taşmayı kapat (bazı blur/gradient overflow yapıyor) */
html, body{
  overflow-x: hidden;
}

/* 2) Işık sızmasının geldiği ana bölümleri izole et + clip'le
   (bu seçicilerden sende hangileri varsa etki eder) */
.hero,
#topHero,
#modules,
.aivo-modules,
#corp-vitrin,
#vitrin,
#ab-pack{
  position: relative;
  isolation: isolate;      /* stacking context */
  overflow: hidden;        /* taşmayı kes (sızıntıyı bitirir) */
  transform: translateZ(0);/* WebKit kompozit */
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

/* 3) Eğer sızıntı pseudo-element (::before/::after) kaynaklıysa güvenli sınır */
.hero::before, .hero::after,
#modules::before, #modules::after,
.aivo-modules::before, .aivo-modules::after,
#corp-vitrin::before, #corp-vitrin::after,
#vitrin::before, #vitrin::after,
#ab-pack::before, #ab-pack::after{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 4) (Opsiyonel ama güçlü) Safari'de background animasyonu bug'ı tetikliyorsa
      sadece WebKit'te animasyonu yumuşat */
@supports (-webkit-touch-callout: none){
  #corp-vitrin{
    will-change: transform;
  }
}
/* =========================================================
   SAFE SOFT TRANSITIONS (ONLY ::after) — glow/pseudo çakışmaz
   ========================================================= */
:root{
  --page-bg-rgb: 10, 12, 22;
  --sec-fade: clamp(22px, 5vh, 56px);
  --sec-fade-alpha: .55;
}

.hero,
#topHero,
#ab-pack,
#nasil-calisir,
#modules,
.aivo-modules,
#corp-vitrin,
#vitrin,
section[id]{
  position: relative;
}

.hero::after,
#topHero::after,
#ab-pack::after,
#nasil-calisir::after,
#modules::after,
.aivo-modules::after,
#corp-vitrin::after,
#vitrin::after,
section[id]::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: -1px;
  height: var(--sec-fade);
  pointer-events:none;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(var(--page-bg-rgb), var(--sec-fade-alpha)),
    rgba(var(--page-bg-rgb), 0)
  );
}
/* =========================================================
   A/B — CTA SHINE + TITLE CENTER (only #ab-pack)
   Dosya: index.css (EN ALT)
   ========================================================= */

/* 1) Başlığı ortala (kartların hizasında) */
#ab-pack .sm-pack__head{
  max-width: 1180px;           /* kart alanıyla uyumlu */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#ab-pack .sm-pack__sub{
  margin-left: auto;
  margin-right: auto;
}

/* 2) "Paketi Oluştur →" alanına hover shine efekti */
#ab-pack .sm-card__cta{
  position: relative;
  display: inline-flex;         /* yazı kutu gibi dursun */
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ışık şeridi */
#ab-pack .sm-card__cta::before{
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  width: 70px;
  left: -90px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  filter: blur(0.4px);
  opacity: 0;                   /* hover yokken görünmesin */
  transform: skewX(-18deg);
}

/* hover tetik: kartın üstüne gelince CTA parlasın */
#ab-pack a.sm-card:hover .sm-card__cta::before{
  opacity: 1;
  animation: aivoCtaShine 0.45s linear forwards;
}



@keyframes aivoCtaShine{
  from { left: -90px; }
  to   { left: calc(100% + 90px); }
}

/* isteğe bağlı: hover'da hafif beyaz vurgu */
#ab-pack a.sm-card:hover .sm-card__cta{
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
}
/* =========================================================
   A/B SOSYAL MEDYA PAKETİ — TYPO + CTA SHINE (OVERRIDE)
   Dosya: index.css (EN ALT)
   ========================================================= */

/* 1) Başlık / metin ölçeği: alttaki büyük kartlarla aynı hissiyat */
#ab-pack .sm-card__title{
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#ab-pack .sm-card__desc{
  font-size: 15px;
  line-height: 1.45;
  opacity: .92;
}

#ab-pack .sm-card ul,
#ab-pack .sm-card li{
  font-size: 15px;
  line-height: 1.45;
}

/* (İstersen) kart içi CTA yazısını da bir tık büyüt */
#ab-pack .sm-card__cta{
  font-size: 15px;
}

/* 2) CTA shine hızı: 0.6s -> daha hızlı */
#ab-pack a.sm-card:hover .sm-card__cta::before{
  opacity: 1;
  animation: aivoCtaShine 0.35s linear forwards; /* daha hızlı */
}

/* (Opsiyonel) iOS/Safari hissi için biraz daha “snappy” */
@media (hover: hover){
  #ab-pack a.sm-card:hover .sm-card__cta::before{
    animation-duration: 0.32s;
  }
}
/* =========================================================
   AIVO — AB PACK (TEXT SCALE + SHINE FIX)
   ========================================================= */

/* ---------- Section isolation ---------- */
#ab-pack{
  position: relative;
  isolation: isolate;
}

/* ---------- Head ---------- */
#ab-pack .sm-pack__head{
  text-align: center;
}

#ab-pack .sm-pack__title{
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

#ab-pack .sm-pack__sub{
  max-width: 820px;
  margin: 0 auto 24px;
  opacity: .9;
}

/* ---------- Cards ---------- */
#ab-pack .sm-card{
  position: relative;
  overflow: hidden;              /* 🔴 IŞIK İÇİN ZORUNLU */
  isolation: isolate;
}

/* Kart başlıkları (büyüklük eşitlendi) */
#ab-pack .sm-card__title,
#ab-pack .sm-card h3{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* Açıklama */
#ab-pack .sm-card__desc,
#ab-pack .sm-card p{
  font-size: 15.5px;
  line-height: 1.55;
  opacity: .9;
}

/* ---------- KAYAN IŞIK KATMANI ---------- */
#ab-pack .sm-card::before{
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(
      110deg,
      transparent 35%,
      rgba(255,255,255,.18) 45%,
      rgba(255,255,255,.28) 50%,
      rgba(255,255,255,.18) 55%,
      transparent 65%
    );
  transform: translateX(-120%);
  pointer-events: none;
  z-index: 0;
}

/* Hover’da ışık akışı */
#ab-pack .sm-card:hover::before{
  animation: abCardShine 0.45s linear forwards;
}

/* CTA üstte kalsın */
#ab-pack .sm-card > *{
  position: relative;
  z-index: 1;
}

/* ---------- Keyframes ---------- */
@keyframes abCardShine{
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
/* =========================================================
   SECTION TRANSITION — soft fade separator (Safari-friendly)
   Add class: .soft-sep  to sections
   ========================================================= */

.soft-sep{
  position: relative;
  isolation: isolate;              /* Safari banding azaltır */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* üstten fade (section'a girerken) */
.soft-sep::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;
  height: 56px;                    /* 36–80 arası deneyebilirsin */
  pointer-events:none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.00),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0.00)
  );
  transform: translateZ(0);
}

/* alttan fade (section'dan çıkarken) */
.soft-sep::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height: 56px;
  pointer-events:none;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.00),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0.00)
  );
  transform: translateZ(0);
}
/* =========================================================
   SECTION SPACING — proper visual separation
   ========================================================= */

/* Üstteki Sosyal Medya Paketi */
#ab-pack{
  padding-bottom: clamp(140px, 18vh, 200px);
}

/* Alttaki Yaratıcılık Yolculuğu */
#creative-start{
  padding-top: clamp(140px, 18vh, 200px);
}
/* =========================================
   A/B PACK — BLOĞU 1 TIK AŞAĞI AL (FINAL)
   ========================================= */

/* SADECE bu section */
#ab-pack{
  position: relative;

  /* 👇 BLOĞU AŞAĞI İT */
  margin-top: clamp(24px, 4vh, 48px) !important;

  /* alt nefesi dengede tut */
  padding-bottom: clamp(56px, 7vh, 96px) !important;
  margin-bottom: 0 !important;

  min-height: auto !important;
}

/* container içi ekstra boşluk varsa */
#ab-pack > .container{
  padding-top: 0 !important;
}

/* =========================================================
   A/B MICROCOPY — hover + "kalp atışı" (index.css fallback)
   ========================================================= */

/* pill ortak */
#ab-pack .sm-pack__note{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  transform: translateZ(0);
  will-change: transform;
}

/* hover’da hafif yükselsin */
#ab-pack .sm-pack__note:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}

/* ALT PILL (5 kredi) — kalp gibi atsın */
@keyframes aivoPulse {
  0%   { transform: translateZ(0) scale(1);   box-shadow: 0 0 0 rgba(139,92,246,0); }
  45%  { transform: translateZ(0) scale(1.02); box-shadow: 0 20px 70px rgba(139,92,246,0.18); }
  100% { transform: translateZ(0) scale(1);   box-shadow: 0 0 0 rgba(139,92,246,0); }
}

/* sadece alt yazıya pulse */
#ab-pack .sm-pack__note--free{
  animation: aivoPulse 1.8s ease-in-out infinite;
}

/* hover olunca pulse dursun ve daha net hover hissi gelsin */
#ab-pack .sm-pack__note--free:hover{
  animation: none;
  transform: translateY(-2px) scale(1.01);
}
/* =========================================
   DOMINO (PRO) — no bounce, clean highlight
   ========================================= */

#ab-pack .domino-letters{
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  animation: none !important;
}

/* her span harf */
#ab-pack .domino-letters span{
  display: inline-block;
  opacity: .42;
  transform: none !important;      /* zıplama yok */
  filter: none !important;         /* blur yok */
  text-shadow: none;

  animation: dominoGlow 2.6s linear infinite;
  will-change: opacity, text-shadow;
}

/* boşluk span'larını sabit tut (nbps) */
#ab-pack .domino-letters span:empty,
#ab-pack .domino-letters span.space{
  opacity: 1 !important;
  animation: none !important;
}

/* İlk karakter "5" daha güçlü vursun */
#ab-pack .domino-letters span:nth-child(1){
  opacity: .70;
}

/* DOMINO gecikmeler */
#ab-pack .domino-letters span:nth-child(1)  { animation-delay: 0s; }
#ab-pack .domino-letters span:nth-child(2)  { animation-delay: .10s; }
#ab-pack .domino-letters span:nth-child(3)  { animation-delay: .20s; }
#ab-pack .domino-letters span:nth-child(4)  { animation-delay: .30s; }
#ab-pack .domino-letters span:nth-child(5)  { animation-delay: .40s; }
#ab-pack .domino-letters span:nth-child(6)  { animation-delay: .50s; }
#ab-pack .domino-letters span:nth-child(7)  { animation-delay: .60s; }
#ab-pack .domino-letters span:nth-child(8)  { animation-delay: .70s; }
#ab-pack .domino-letters span:nth-child(9)  { animation-delay: .80s; }
#ab-pack .domino-letters span:nth-child(10) { animation-delay: .90s; }
#ab-pack .domino-letters span:nth-child(11) { animation-delay: 1.00s; }
#ab-pack .domino-letters span:nth-child(12) { animation-delay: 1.10s; }
#ab-pack .domino-letters span:nth-child(13) { animation-delay: 1.20s; }
#ab-pack .domino-letters span:nth-child(14) { animation-delay: 1.30s; }
#ab-pack .domino-letters span:nth-child(15) { animation-delay: 1.40s; }
#ab-pack .domino-letters span:nth-child(16) { animation-delay: 1.50s; }

@keyframes dominoGlow{
  0%, 78%, 100%{
    opacity: .42;
    text-shadow: none;
  }
  86%{
    opacity: 1;
    text-shadow:
      0 0 10px rgba(255,255,255,.22),
      0 0 18px rgba(110,120,255,.18);
  }
/* =========================================================
   A/B SOSYAL MEDYA — SOFT COLOR WASH (PREMIUM / NON-LOUD)
   index.css EN ALT
   ========================================================= */

#ab-pack .sm-pack__grid a.sm-card{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  isolation: isolate;
}

/* içerik hep üstte */
#ab-pack .sm-pack__grid a.sm-card > *{
  position: relative;
  z-index: 2;
}

/* soft renk katmanı */
#ab-pack .sm-pack__grid a.sm-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  /* PATLAMAYAN formül:
     - opaklık düşük
     - renkler köşelerde kalıyor
     - orta alan karanlık kalıyor */
  background:
    radial-gradient(800px 520px at 18% 20%, rgba(var(--c1), .22) 0%, transparent 62%),
    radial-gradient(760px 520px at 86% 22%, rgba(var(--c2), .16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(0,0,0,.00) 55%, rgba(0,0,0,.18) 100%);
}

/* derinlik / vignette */
#ab-pack .sm-pack__grid a.sm-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(1200px 700px at 50% 0%, transparent 0%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.55) 100%);
  opacity: .28;
}

/* CTA bar sakin kalsın */
#ab-pack .sm-pack__grid a.sm-card .sm-card__cta{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

/* Hover: çok hafif canlılık */
@media (hover:hover){
  #ab-pack .sm-pack__grid a.sm-card:hover{
    border-color: rgba(255,255,255,.16);
    transform: translateY(-1px);
  }
  #ab-pack .sm-pack__grid a.sm-card:hover::before{
    filter: saturate(1.05);
  }
}

/* Renk presetleri (soft) */
#ab-pack .sm-pack__grid a.sm-card[data-mod="sm-pack-a"],
#ab-pack .sm-pack__grid a.sm-card.sm-card--a{
  --c1: 139, 92, 246;   /* mor */
  --c2: 59, 130, 246;   /* mavi */
}

#ab-pack .sm-pack__grid a.sm-card[data-mod="sm-pack-b"],
#ab-pack .sm-pack__grid a.sm-card.sm-card--b{
  --c1: 56, 189, 248;   /* cyan */
  --c2: 236, 72, 153;   /* pink */
}
/* CTA bar RENKSİZ kalsın (wash geçmesin) */
#ab-pack .sm-pack__grid a.sm-card .sm-card__cta{
  position: relative;
  z-index: 3;

  /* Renkli arka planı kes */
  background: rgba(10,12,18,.72) !important;  /* koyu cam */
  border: 1px solid rgba(255,255,255,.10) !important;

  /* blur sadece CTA'nın içinde olsun */
  backdrop-filter: blur(14px) saturate(1.0) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.0) !important;

  /* daha “flat” */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
/* =========================================================
   A/B PACK — ALIGN FIX (PILL’LER ORTADA KALSIN)
   ========================================================= */

#ab-pack .container{
  max-width: 1180px;          /* senin grid genişliğiyle uyumlu */
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* üst/alt pill wrapper tam ortada */
#ab-pack .sm-pack__note-wrap{
  display: flex;
  justify-content: center;
}

/* pill’in kendisi: genişlik limiti + ortalama */
#ab-pack .sm-pack__note{
  width: min(980px, 100%);
  margin: 0 auto;
}
/* HERO: "Nasıl çalışır?" yok (layout bozulmadan) */
.hero .hero-actions a[href*="how"],
.hero .hero-actions a[data-action="how"],
.hero .hero-actions .how-it-works,
.hero .hero-actions .btn-how,
.hero .hero-actions .how {
  display: none !important;
}
/* =========================================================
   AIVO VITRIN — STABILITY PATCH (EN ALTTA KALSIN) ✅ REVIZE
   Amaç: layer sızıntısı + çakışan layout kuralları bitsin
   Not: Bu patch SADECE vitrin/marketing sayfaları için.
        Studio'yu etkilememesi için body/html .is-studio dışında çalışır.
   ========================================================= */

/* -------------------------
   0) SCOPE: Studio HARİÇ
   ------------------------- */
html:not(.is-studio) body:not(.is-studio) {
  /* boş: scope anchor */
}

/* 1) TOP-SHELL pseudo layer’ları doğru ata’ya bağla */
html:not(.is-studio) body:not(.is-studio) .top-shell{
  position: relative;      /* ✅ şart */
  isolation: isolate;      /* ✅ Safari band/sızıntı azaltır */
  overflow: hidden;        /* ✅ glow taşmasını keser */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 2) Pseudo layer’ların içerik üstüne çıkmasını garanti et */
html:not(.is-studio) body:not(.is-studio) .site-header,
html:not(.is-studio) body:not(.is-studio) .hero,
html:not(.is-studio) body:not(.is-studio) .aivo-main,
html:not(.is-studio) body:not(.is-studio) .aivo-footer{
  position: relative;
  z-index: 1;
}

/* 3) “body flex ile footer itme” stratejisini NETLEŞTİR
   - Bu bölüm Studio’yu bozabileceği için scope’landı.
*/
html:not(.is-studio),
html:not(.is-studio) body:not(.is-studio){
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

html:not(.is-studio) body:not(.is-studio){
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Akış: top-shell + main büyür, footer en alta iner */
html:not(.is-studio) body:not(.is-studio) .top-shell{ flex: 0 0 auto; }
html:not(.is-studio) body:not(.is-studio) .aivo-main{ flex: 1 0 auto; }
html:not(.is-studio) body:not(.is-studio) .aivo-footer{ margin-top: auto; }

/* 4) Spacer tamamen kapalı kalsın */
html:not(.is-studio) body:not(.is-studio) .spacer{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Hero: tek bir üst boşluk kuralı bırak (zıplamayı kes) */
html:not(.is-studio) body:not(.is-studio) .hero{
  padding-top: calc(var(--topbar-h, 72px) + 28px) !important; /* ✅ topbar + nefes */
  padding-bottom: 28px !important;
  min-height: auto !important; /* 100vh zorlamayı kesiyoruz */
}

html:not(.is-studio) body:not(.is-studio) .hero-inner{
  min-height: auto !important;
  align-items: center !important;
}

/* 6) Dropdown açılınca hero padding-top ile oynamayı iptal et */
html:not(.is-studio) body:not(.is-studio) .nav-item.has-dropdown.is-open ~ .hero{
  padding-top: calc(var(--topbar-h, 72px) + 28px) !important;
}

/* 7) #modules / .aivo-modules “yukarı çekme” varsa kesin iptal */
html:not(.is-studio) body:not(.is-studio) #modules,
html:not(.is-studio) body:not(.is-studio) .aivo-modules{
  position: relative !important;
  margin-top: 0 !important;
  transform: none !important;
  top: auto !important;
}

/* ================= CONTACT FORM (FOOTER) ================= */

html:not(.is-studio) body:not(.is-studio) .aivo-contact-form {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html:not(.is-studio) body:not(.is-studio) .aivo-contact-form input,
html:not(.is-studio) body:not(.is-studio) .aivo-contact-form textarea {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

html:not(.is-studio) body:not(.is-studio) .aivo-contact-form input {
  flex: 1 1 48%;
}

html:not(.is-studio) body:not(.is-studio) .aivo-contact-form textarea {
  flex: 1 1 100%;
  min-height: 70px;
  resize: none;
}

html:not(.is-studio) body:not(.is-studio) .aivo-contact-form button {
  margin-left: auto;
  background: linear-gradient(135deg, #4f7cff, #6a8dff);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

html:not(.is-studio) body:not(.is-studio) .aivo-contact-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79, 124, 255, 0.45);
}

html:not(.is-studio) body:not(.is-studio) .aivo-contact-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ============================================
   GLOBAL: "Studio hazırlanıyor..." loader KAPAT
   ============================================ */
.k-wrap,
.k-wrp,
.k-loader,
.k-loading,
.aivo-loading,
.loading-overlay,
.studio-overlay,
.auth-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.studio-loading,
html.auth-loading,
html.loading,
body.studio-loading,
body.auth-loading,
body.loading,
body.is-loading {
  overflow: auto !important;
}

/* Auth preload */
html.aivoAuthPreload #authGuest,
html.aivoAuthPreload #authUser {
  display: none !important;
}

html.is-auth  #authGuest { display: none !important; }
html.is-auth  #authUser  { display: flex !important; }

html.is-guest #authGuest { display: flex !important; }
html.is-guest #authUser  { display: none !important; }
html.is-guest #topCredits { display: none !important; }

/* Topbar: tek otorite */
.aivo-topbar {
  position: sticky;
  top: 0;
  z-index: 9999;
  pointer-events: auto;
}

/* Studio’da sticky kapat */
body.is-studio .aivo-topbar,
html.is-studio .aivo-topbar {
  position: relative !important;
  top: auto !important;
}

.user-menu,
.dropdown {
  position: absolute;
  z-index: 10000;
  pointer-events: auto;
}

/* Sadece overlay’ler */
.hero-overlay,
.bg-overlay {
  pointer-events: none;
}

[hidden] { display: none !important; }
/* ===== HERO FIX: btn-link parlak + baslik nefes ===== */

/* 1) "Örnekleri Gör" soluk olmasın */
.hero .btn.btn-link,
.hero a.btn.btn-link {
  opacity: 1 !important;
  color: rgba(255,255,255,.88) !important;
  font-weight: 700;
  text-decoration: none;
}

.hero .btn.btn-link:hover,
.hero a.btn.btn-link:hover {
  color: #fff !important;
}

/* 2) Başlık satır arası: "İ" yapışık görünmesin */
.hero-title{
  line-height: 1.02; /* çok az aç */
  letter-spacing: -0.02em;
}

.hero-title .swap-word{
  margin-left: .18em; /* sağdaki kelimeyi nefeslendir */
}

/* İstersen bir tık daha boşluk: (gerekirse aç) */
/* .hero-title{ line-height: 1.05; } */
/* HERO: Örnekleri Gör parlak */
.hero .hero-actions a.hero-link{
  opacity: 1 !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.hero .hero-actions a.hero-link:hover{
  color: #fff !important;
  filter: brightness(1.15);
}
#atmosphere-video{
  margin: 56px 0;
}

#atmosphere-video .feature-hero{
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 120% at 0% 0%,
      rgba(140,110,255,.22),
      rgba(0,0,0,0)
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.015)
    );
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: center;
}
#atmosphere-video .feature-visual{
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: 22px;
  background:
    radial-gradient(80% 80% at 30% 20%,
      rgba(120,180,255,.22),
      rgba(0,0,0,0)
    ),
    radial-gradient(80% 80% at 70% 80%,
      rgba(255,110,180,.18),
      rgba(0,0,0,0)
    );
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
#atmosphere-video .feature-title{ 
  margin: 8px 0 10px;
  font-size: 40px;
}
#atmosphere-video .feature-desc{
  max-width: 540px;
  opacity: .82;
}
#atmosphere-video .feature-actions{
  margin-top: 18px;
}
@media (max-width: 900px){
  #atmosphere-video .feature-hero{
    grid-template-columns: 1fr;
    padding: 28px;
  }
  #atmosphere-video .feature-visual{
    min-height: 220px;
  }
/* ===== AI ATMOSFER VIDEO — HEADER'ı ŞEFFAF KUTUYA AL ===== */
#atmosphere-video .atmo-head{
  width: min(1148px, calc(100% - 48px));
  margin: 0 auto 18px;
  padding: 18px 18px 16px;
  border-radius: 18px;

  /* şeffaf kutu */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 50px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#atmosphere-video .atmo-title{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

#atmosphere-video .atmo-sub{
  margin: 0 0 8px;
  max-width: 980px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.45;
  opacity: .92;
}

#atmosphere-video .atmo-pill{
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  opacity: .88;
}

#atmosphere-video .atmo-pill strong{
  font-weight: 700;
}