/* ==========================================================================
   b2bNet · Modül bağlantı bölümü
   Solda anlatım, sağda b2bNet logosunun etrafında dönen modül simgeleri.
   Diğer modül sayfalarında da aynen kullanılabilir.
   ========================================================================== */

.b2b-baglanti {
  --b2b-egri: cubic-bezier(.22, 1, .36, 1);
  --b2b-lacivert: #12306E;
  --b2b-mavi: #2563EB;

  background: #FFFFFF;
  padding: 96px 24px;
  overflow: hidden;
}

.b2b-baglanti-ic {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 56px;
  align-items: center;
}

@media (min-width: 1024px) {
  .b2b-baglanti    { padding: 128px 32px; }
  .b2b-baglanti-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; }
}

/* --------------------------------------------------------------- SOL METİN */

.b2b-baglanti-etiket {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--b2b-mavi);
  background: #EEF4FF;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.b2b-baglanti-baslik {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.026em;
  font-weight: 700;
  color: var(--b2b-lacivert);
  margin: 0 0 20px;
  max-width: 17ch;
}

.b2b-baglanti-aciklama {
  font-size: 17px;
  line-height: 1.65;
  color: #4C5F80;
  margin: 0 0 30px;
  max-width: 46ch;
}

.b2b-baglanti-madde {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.b2b-baglanti-madde li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #35486B;
}

.b2b-baglanti-madde svg {
  width: 22px;
  height: 22px;
  stroke: var(--b2b-mavi);
  stroke-width: 1.7;
  fill: none;
}

/* ------------------------------------------------------- SAĞ: YÖRÜNGE ALANI */

.b2b-baglanti-gorsel {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

/* İki eş merkezli halka */
.b2b-yorunge-halka {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(37, 99, 235, .13);
}

.b2b-yorunge-halka--dis { width: 88%; height: 88%; }
.b2b-yorunge-halka--ic  {
  width: 54%;
  height: 54%;
  background: radial-gradient(circle, rgba(37, 99, 235, .07) 0%, rgba(37, 99, 235, 0) 70%);
}

/* Simge kutuları */
.b2b-yorunge-kutu {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #E8EEF9;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(18, 48, 110, .08);
  animation: b2b-yorunge-suzul 6s var(--b2b-egri) infinite;
}

.b2b-yorunge-kutu svg {
  width: 24px;
  height: 24px;
  stroke: var(--b2b-mavi);
  stroke-width: 1.7;
  fill: none;
}

/* Uzaktakiler soluk dursun, derinlik hissi versin */
.b2b-yorunge-kutu--soluk { opacity: .45; }

/* Ortadaki b2bNet simgesi */
.b2b-yorunge-merkez {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(37, 99, 235, .20);
}

.b2b-yorunge-merkez img { width: 46px; height: 46px; }

/* Konumlar: yüzde cinsinden, halkalar üzerine oturtuldu */
.b2b-yorunge-kutu[data-b2b-yer="1"] { left: 68.6%; top: 10.1%; animation-delay: 0s; }
.b2b-yorunge-kutu[data-b2b-yer="2"] { left: 21.7%; top: 16.3%; animation-delay: .7s; }
.b2b-yorunge-kutu[data-b2b-yer="3"] { left: 8.6%;  top: 65.0%; animation-delay: 1.4s; }
.b2b-yorunge-kutu[data-b2b-yer="4"] { left: 46.2%; top: 93.8%; animation-delay: 2.1s; }
.b2b-yorunge-kutu[data-b2b-yer="5"] { left: 91.4%; top: 65.0%; animation-delay: 2.8s; }
.b2b-yorunge-kutu[data-b2b-yer="6"] { left: 75.4%; top: 40.8%; animation-delay: 3.5s; }
.b2b-yorunge-kutu[data-b2b-yer="7"] { left: 29.3%; top: 32.6%; animation-delay: 4.2s; }
.b2b-yorunge-kutu[data-b2b-yer="8"] { left: 40.8%; top: 75.4%; animation-delay: 4.9s; }

/* Çok hafif süzülme; dikkat dağıtmasın diye 6 px */
@keyframes b2b-yorunge-suzul {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 6px)); }
}

@media (max-width: 639px) {
  .b2b-yorunge-kutu   { width: 46px; height: 46px; border-radius: 13px; }
  .b2b-yorunge-kutu svg { width: 20px; height: 20px; }
  .b2b-yorunge-merkez { width: 74px; height: 74px; border-radius: 20px; }
  .b2b-yorunge-merkez img { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .b2b-yorunge-kutu { animation: none; }
}