/* =========================================================
   b2bNet — birlesim.css
   2. bolumdeki "moduller logoda birlesir" sahnesi.
   Scroll'a bagli calisir, mantigi js/birlesim.js icinde.
   main.css'ten SONRA yuklenir.
   ========================================================= */

/* ---------------------------------------------------------
   1. SARMAL — sahnenin yapisacagi uzun alan
   Yukseklik ne kadar buyukse animasyon o kadar yavas akar.
   --------------------------------------------------------- */
.b2b-birlesim{
  position:relative;
  height:340vh;
  background:#F6F9FF;
}
@media (max-width:760px){ .b2b-birlesim{ height:280vh; } }

/* ---------------------------------------------------------
   2. SAHNE — ekranda sabit kalan kisim
   --------------------------------------------------------- */
.b2b-sahne{
  position:sticky; top:0;
  height:100svh;
  display:grid; place-items:center;
  overflow:hidden;
}

.b2b-sahne-ic{
  position:relative;
  width:100%; height:100%;
  max-width:1240px;
  margin-inline:auto;
}

/* ---------------------------------------------------------
   3. ORTADAKI LOGO SIMGESI
   --------------------------------------------------------- */
.b2b-sahne-logo{
  position:absolute; left:50%; top:50%;
  z-index:20;
  width:clamp(88px, 11vw, 128px);
  aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:28%;
  background:linear-gradient(150deg,#4B8DF8 0%,#2563EB 52%,#1A45C4 100%);
  box-shadow:
    0 24px 54px -18px rgba(29,78,216,.65),
    inset 0 2px 0 rgba(255,255,255,.35);
  transform:translate(-50%,-50%);
  will-change:transform, opacity;
}
.b2b-sahne-logo svg{ width:42%; height:auto; color:#fff; }

/* logonun arkasindaki hale — kartlar girdikce parlar */
.b2b-sahne-hale{
  position:absolute; left:50%; top:50%;
  z-index:10;
  width:clamp(240px, 34vw, 460px);
  aspect-ratio:1; border-radius:999px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(91,148,250,.30) 0%,
    rgba(91,148,250,.14) 40%,
    rgba(91,148,250,0) 70%);
  opacity:.25;
  pointer-events:none;
  will-change:opacity, transform;
}

/* ---------------------------------------------------------
   4. MODUL KARTLARI
   --------------------------------------------------------- */
.b2b-modul-kart{
  position:absolute; left:50%; top:50%;
  z-index:15;
  width:clamp(168px, 19vw, 236px);
  transform:translate(-50%,-50%);
  will-change:transform, opacity;
}

/* kartin ekran gorunumu — gercek ekran goruntusu gelince
   .b2b-modul-ekran icerigi <img> ile degistirilecek */
.b2b-modul-ekran{
  border-radius:12px; overflow:hidden;
  background:#fff;
  border:1px solid #E4EBF7;
  box-shadow:0 18px 40px -20px rgba(11,38,102,.42);
}
.b2b-modul-ekran img{ display:block; width:100%; height:auto; }

.b2b-modul-tepe{
  display:flex; align-items:center; gap:5px;
  padding:8px 10px;
  background:#F5F8FE; border-bottom:1px solid #EAF0FA;
}
.b2b-modul-tepe i{
  width:6px; height:6px; border-radius:999px;
  background:#CBD9F0; flex-shrink:0;
}
.b2b-modul-tepe span{
  margin-left:4px; height:6px; flex:1; max-width:64px;
  border-radius:999px; background:#DCE6F8;
}

.b2b-modul-govde{ padding:11px 11px 13px; }

/* sahte veri satirlari */
.b2b-modul-satir{
  height:7px; border-radius:999px; background:#EDF2FC;
  margin-bottom:7px;
}
.b2b-modul-satir--kisa{ width:58%; }
.b2b-modul-satir--vurgu{ background:#C9DCFB; width:74%; }

/* sahte cubuk grafik */
.b2b-modul-grafik{
  display:flex; align-items:flex-end; gap:5px;
  height:44px; margin:10px 0 4px;
}
.b2b-modul-grafik i{
  flex:1; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#8CB4FA,#3B82F6);
}

/* kartin kosesindeki modul rozeti */
.b2b-modul-rozet{
  position:absolute; left:-14px; bottom:-14px;
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:11px;
  background:#fff; border:1px solid #E4EBF7;
  box-shadow:0 10px 22px -10px rgba(11,38,102,.4);
  color:var(--b2b-mavi-700);
}
.b2b-modul-rozet svg{ width:19px; height:19px; }

.b2b-modul-ad{
  display:block; margin-top:11px;
  font-size:13px; font-weight:600; text-align:center;
  color:#5A6D8F;
}

/* ---------------------------------------------------------
   5. SLOGAN — kartlar birlestikten sonra belirir
   --------------------------------------------------------- */
.b2b-sahne-slogan{
  position:absolute; left:50%; top:50%;
  z-index:25;
  width:min(88%, 760px);
  transform:translate(-50%,-50%);
  text-align:center;
  opacity:0;
  pointer-events:none;
  will-change:transform, opacity, filter;
}
.b2b-sahne-slogan p{
  margin:0;
  font-size:clamp(1.6rem, 3.4vw, 2.75rem);
  font-weight:700; line-height:1.3; letter-spacing:-.025em;
  color:var(--b2b-lacivert);
}
.b2b-sahne-slogan span{ color:var(--b2b-mavi-600); }

/* ---------------------------------------------------------
   6. JS YOKSA / AZ HAREKET TERCIHINDE
   Kartlar dagilmis halde, slogan gorunur kalir.
   --------------------------------------------------------- */
.b2b-birlesim:not(.b2b-hazir) .b2b-sahne{ position:relative; height:auto; padding:80px 20px; }
.b2b-birlesim:not(.b2b-hazir) .b2b-sahne-ic{ height:auto; }
.b2b-birlesim:not(.b2b-hazir){ height:auto; }

.b2b-birlesim:not(.b2b-hazir) .b2b-sahne-ic{
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  place-items:center;
}
.b2b-birlesim:not(.b2b-hazir) .b2b-modul-kart,
.b2b-birlesim:not(.b2b-hazir) .b2b-sahne-logo,
.b2b-birlesim:not(.b2b-hazir) .b2b-sahne-slogan{
  position:static; transform:none; opacity:1; width:100%;
}
.b2b-birlesim:not(.b2b-hazir) .b2b-sahne-hale{ display:none; }
.b2b-birlesim:not(.b2b-hazir) .b2b-sahne-slogan{ grid-column:1/-1; }