/* =========================================================
   b2bNet — hakkimizda.css
   Hakkimizda sayfasi. main.css'ten SONRA yuklenir.

   DUZEN MANTIGI
   Her sahne, ekran boyundan uzun bir bolumdur. Icindeki
   canvas ve yazi bloklari ekrana yapisir; bolum boyunca
   kaydirdikca sahne oynar, yazi da uzerinde durur.

   Canvas'in altindaki negatif alt bosluk, yazinin canvas'in
   ustune binmesini saglar. Aksi halde yazi canvas'tan sonra,
   bir ekran asagida baslardi.

   Renkler koyu zemin uzerine kuruludur; sayfa bastan sona
   tek parca bir gece sahnesi gibi okunur.
   ========================================================= */

.b2b-hk{
  --b2b-hk-ust:84px;

  --b2b-hk-cizgi:rgba(255,255,255,.11);
  --b2b-hk-metin:rgba(214,228,255,.74);
  --b2b-hk-vurgu:#8FB6FF;

  position:relative; isolation:isolate;
  color:#fff;
  overflow-x:clip;
  background:linear-gradient(180deg,
    #0C2050 0%, #0A1A40 26%, #08163A 58%, #0A1A40 82%, #0C2050 100%);
}

/* tum sahnelerde ortak canvas yerlesimi */
.b2b-tuval{
  display:block; width:100%;
  pointer-events:none;
}


/* =========================================================
   1. GIRIS — belge ve odeme akisi
   ========================================================= */
.b2b-hk-tepe{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--b2b-hk-ust) + 40px) 20px 60px;
  text-align:center;
}
.b2b-hk-tepe > .b2b-tuval{
  position:absolute; inset:0;
  height:100%; z-index:0;
}

.b2b-hk-tepe-ic{
  position:relative; z-index:2;
  max-width:900px;
  opacity:var(--b2b-solma, 1);
  transform:translate3d(0, calc(var(--b2b-cikis, 0) * 1px), 0) scale(var(--b2b-olcek, 1));
  will-change:transform, opacity;
}

.b2b-hk-ustluk{
  display:inline-flex; align-items:center; gap:12px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--b2b-hk-vurgu);
}
.b2b-hk-ustluk::before,
.b2b-hk-ustluk::after{
  content:''; width:26px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(143,182,255,.55));
}
.b2b-hk-ustluk::after{ background:linear-gradient(90deg, rgba(143,182,255,.55), transparent); }

.b2b-hk-baslik{
  max-width:17ch; margin:24px auto 0;
  font-size:clamp(2.3rem,5.6vw,4rem);
  font-weight:800; line-height:1.04; letter-spacing:-.04em; color:#fff;
  text-shadow:0 4px 40px rgba(8,22,58,.6);
}
.b2b-hk-baslik em{ font-style:normal; color:var(--b2b-hk-vurgu); }

.b2b-hk-yazi{
  max-width:54ch; margin:24px auto 0;
  font-size:clamp(1.02rem,1.5vw,1.16rem);
  line-height:1.72; color:var(--b2b-hk-metin);
}

.b2b-hk-isaret{
  position:absolute; left:50%; bottom:26px; z-index:2;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(214,228,255,.45);
  opacity:var(--b2b-solma, 1);
}
.b2b-hk-isaret i{
  display:block; width:1px; height:40px;
  background:linear-gradient(180deg, rgba(143,182,255,.7), transparent);
}


/* =========================================================
   2. TAM EKRAN SAHNE
   Bolum ekrandan uzun; canvas ve yazi ekrana yapisir.
   ========================================================= */
.b2b-sahne{
  position:relative;
  height:230vh;
}
@media (max-width:760px){ .b2b-sahne{ height:190vh; } }

.b2b-sahne > .b2b-tuval{
  position:sticky; top:0;
  height:100svh;
  /* yazi blogu canvas'in ustune binsin */
  margin-bottom:-100svh;
  z-index:0;
}

.b2b-sahne-yazi{
  position:sticky; top:0; z-index:2;
  height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:calc(var(--b2b-hk-ust) + 20px) 20px 40px;
  text-align:center;
  pointer-events:none;
}
.b2b-sahne-yazi > *{ pointer-events:auto; }

.b2b-sahne-baslik{
  max-width:18ch; margin:20px auto 0;
  font-size:clamp(1.8rem,4vw,2.9rem);
  font-weight:700; line-height:1.12; letter-spacing:-.036em; color:#fff;
  text-shadow:0 4px 40px rgba(8,22,58,.75);
}
.b2b-sahne-yazi p{
  max-width:50ch; margin:18px auto 0;
  font-size:clamp(1rem,1.4vw,1.1rem);
  line-height:1.72; color:var(--b2b-hk-metin);
  text-shadow:0 2px 24px rgba(8,22,58,.8);
}

/* ---- sahne ortasindaki dev sayi ---- */
.b2b-dev-sayi{
  display:flex; align-items:baseline; justify-content:center; gap:4px;
  margin:0;
  font-size:clamp(4rem,13vw,10rem);
  font-weight:800; line-height:.92; letter-spacing:-.055em;
  color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 8px 60px rgba(37,99,235,.55);
}
.b2b-dev-sayi small{
  font-size:.28em; font-weight:700; letter-spacing:-.02em;
  color:var(--b2b-hk-vurgu);
}

/* ---- alt kunye satiri ---- */
.b2b-sahne-kunye{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--b2b-hk-cizgi);
  font-size:13.5px; color:rgba(214,228,255,.62);
}
.b2b-sahne-kunye b{ color:#fff; font-weight:700; }


/* =========================================================
   3. ZAMAN TUNELI
   Dikey kaydirma, yatay harekete cevrilir. Yillar ekranin
   icinden gecer; ortadaki yil one cikar.
   ========================================================= */
.b2b-yol{ position:relative; height:420vh; }
@media (max-width:760px){ .b2b-yol{ height:340vh; } }

.b2b-yol-sabit{
  position:sticky; top:0;
  height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}

.b2b-yol-basi{
  padding:calc(var(--b2b-hk-ust) + 12px) 20px 0;
  text-align:center;
}
.b2b-yol-basi h2{
  max-width:20ch; margin:16px auto 0;
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:700; line-height:1.16; letter-spacing:-.034em; color:#fff;
}

.b2b-yol-pencere{
  position:relative;
  flex:1; display:flex; align-items:center;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 86%, transparent);
}

.b2b-yol-ray{
  display:flex; align-items:center; gap:0;
  /* Sagdaki genis bosluk bilincli: son yil da odak noktasina
     kadar gelebilsin, yolun sonunda kenarda asili kalmasin. */
  padding-inline:16vw 46vw;
  will-change:transform;
}

.b2b-yol-madde{
  flex:0 0 auto;
  width:min(78vw, 460px);
  padding-right:5vw;
  text-align:left;
  /* uzaktaki yillar soluk ve geride durur */
  opacity:calc(.18 + var(--b2b-y, 0) * .82);
  transform:scale(calc(.88 + var(--b2b-y, 0) * .12));
  transform-origin:left center;
  transition:opacity .2s linear, transform .2s linear;
}

.b2b-yol-yil{
  display:block;
  font-size:clamp(3.4rem,9vw,7rem);
  font-weight:800; line-height:.9; letter-spacing:-.055em;
  color:rgba(143,182,255,calc(.28 + var(--b2b-y, 0) * .72));
  font-variant-numeric:tabular-nums;
  transition:color .2s linear;
}
.b2b-yol-baslik{
  display:block; margin-top:18px;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  font-weight:700; line-height:1.3; letter-spacing:-.022em; color:#fff;
}
.b2b-yol-yazi{
  display:block; margin-top:10px; max-width:38ch;
  font-size:14.5px; line-height:1.65; color:var(--b2b-hk-metin);
}

/* ilerleme cizgisi */
.b2b-yol-cizgi{
  position:relative;
  height:1px; margin:0 20px 6vh;
  background:var(--b2b-hk-cizgi);
}
.b2b-yol-cizgi i{
  position:absolute; left:0; top:0; height:100%; width:100%;
  background:linear-gradient(90deg,#60A5FA,#2563EB);
  transform-origin:left;
  transform:scaleX(var(--b2b-ilerleme, 0));
}


/* =========================================================
   4. ARA BOLUM (yazi)
   ========================================================= */
.b2b-hk-ic{
  position:relative; z-index:1;
  max-width:940px; margin-inline:auto;
  padding-inline:20px; text-align:center;
}
.b2b-hk-bolum{ padding:110px 0 0; }
@media (min-width:768px){ .b2b-hk-bolum{ padding-top:140px; } }

.b2b-hk-bolum-baslik{
  max-width:20ch; margin:20px auto 0;
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  font-weight:700; line-height:1.16; letter-spacing:-.034em; color:#fff;
}
.b2b-hk-bolum-yazi{
  max-width:56ch; margin:16px auto 0;
  font-size:16px; line-height:1.72; color:var(--b2b-hk-metin);
}

.b2b-hk-giris{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--b2b-gecis-hizli), transform .8s var(--b2b-gecis);
  transition-delay:calc(var(--b2b-sira, 0) * 90ms);
}
.b2b-hk-giris.b2b-gorunur{ opacity:1; transform:none; }

/* dort kucuk sayac */
.b2b-sayac-serit{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px 20px;
  margin-top:52px; padding-top:44px;
  border-top:1px solid var(--b2b-hk-cizgi);
}
@media (min-width:820px){
  .b2b-sayac-serit{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
}
.b2b-sayac-deger{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  margin:0;
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800; letter-spacing:-.045em; line-height:1; color:#fff;
  font-variant-numeric:tabular-nums;
}
.b2b-sayac-ek{ font-size:.5em; font-weight:700; color:var(--b2b-hk-vurgu); }
.b2b-sayac-ad{
  display:block; max-width:22ch; margin:12px auto 0;
  font-size:13.5px; line-height:1.5; color:rgba(214,228,255,.62);
}


/* ---- "Neden b2bNet?" ozellik listesi ---- */
.b2b-hk-ozellik{
  display:grid; gap:26px 34px;
  margin:44px 0 0; padding:0; list-style:none;
  text-align:left;
}
@media (min-width:760px){
  .b2b-hk-ozellik{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 46px; }
}
.b2b-hk-ozellik li{
  position:relative; padding-left:22px;
  font-size:15px; line-height:1.7; color:var(--b2b-hk-metin);
}
.b2b-hk-ozellik li::before{
  content:''; position:absolute; left:0; top:11px;
  width:7px; height:7px; border-radius:999px;
  background:var(--b2b-hk-vurgu);
  box-shadow:0 0 14px rgba(143,182,255,.7);
}
.b2b-hk-ozellik b{
  display:block; margin-bottom:5px;
  font-size:16.5px; font-weight:700; letter-spacing:-.015em; color:#fff;
}
.b2b-hk-ozellik a{ color:var(--b2b-hk-vurgu); }
.b2b-hk-ozellik a:hover{ text-decoration:underline; }


/* =========================================================
   5. KAPANIS
   ========================================================= */
.b2b-hk-kapanis{
  margin-top:120px; padding:60px 0 110px;
  border-top:1px solid var(--b2b-hk-cizgi);
}
@media (min-width:768px){
  .b2b-hk-kapanis{ margin-top:150px; padding:74px 0 140px; }
}
.b2b-hk-kapanis-baslik{
  max-width:20ch; margin:0 auto;
  font-size:clamp(1.6rem,3.2vw,2.35rem);
  font-weight:700; line-height:1.18; letter-spacing:-.034em; color:#fff;
}
.b2b-hk-kapanis-yazi{
  max-width:52ch; margin:16px auto 0;
  font-size:16px; line-height:1.72; color:var(--b2b-hk-metin);
}
.b2b-hk-eylem{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:32px;
}
.b2b-hk-eylem .b2b-buton{ margin-top:0; }
.b2b-hk-kapanis-not{
  margin:16px 0 0; font-size:13px; color:rgba(214,228,255,.5);
}


/* =========================================================
   6. AZ HAREKET TERCIHI
   Yapisiklik kalkar, bolumler normal yuksekligine doner.
   Canvas'lar tek duragan kare cizer.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .b2b-hk-tepe-ic{ transform:none !important; opacity:1 !important; }
  .b2b-hk-giris{ opacity:1 !important; transform:none !important; transition:none !important; }

  .b2b-sahne{ height:auto !important; }
  .b2b-sahne > .b2b-tuval{
    position:static !important; height:56svh !important; margin-bottom:0 !important;
  }
  .b2b-sahne-yazi{
    position:static !important; height:auto !important;
    padding:44px 20px 90px !important;
  }

  .b2b-yol{ height:auto !important; }
  .b2b-yol-sabit{ position:static !important; height:auto !important; overflow:visible !important; }
  .b2b-yol-pencere{ overflow:visible !important; -webkit-mask-image:none; mask-image:none; }
  .b2b-yol-ray{
    flex-direction:column; align-items:flex-start; gap:44px;
    padding:44px 20px 90px; transform:none !important;
  }
  .b2b-yol-madde{
    width:auto; opacity:1 !important; transform:none !important; padding-right:0;
  }
  .b2b-yol-yil{ color:var(--b2b-hk-vurgu); }
  .b2b-yol-cizgi{ display:none; }
}