/* =========================================================
   b2bNet — kahraman.css
   Ana sayfa kahraman sahnesi:
   donen pixel kurenin yerini alan 4 kisilik modul sahnesi.
   Kisi gorselleri + arkalarinda canvas ile cizilen 3B ekranlar.

   Kurallar: sol border yok, hover'da kabarma yok,
   cam yuzeylerin altinda renk lekesi var (kahraman gradienti).
   ========================================================= */

/* ---------------------------------------------------------
   1. IKI KOLONLU YERLESIM
   --------------------------------------------------------- */
.b2b-kahraman-ic{
  position:relative; z-index:10;
  box-sizing:border-box;   /* padding disaridan eklenince 20px tasiyordu */
  width:100%; max-width:var(--b2b-genislik);
  margin:auto; padding-inline:20px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}



/* ---------------------------------------------------------
   2. SAHNE ALANI (sag kolon)
   --------------------------------------------------------- */
.b2b-sahne-alan{
  position:relative;
  width:100%; max-width:1240px;
  margin-inline:auto;
  display:flex; flex-direction:column;
}

/* --- 2a. sahne kutusu: tuval + kisi + bildirim --- */
.b2b-sahne-kutu{
  position:relative;
  width:100%;
  height:clamp(452px, 58svh, 512px);
  isolation:isolate;
}
@media (min-width:1024px){
  .b2b-sahne-kutu{ height:clamp(520px, 66svh, 620px); }
}

/* kisinin arkasindaki yumusak isik — cam panellerin
   uzerinde parlamasi icin gereken renk lekesi */
.b2b-sahne-kutu::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:2%; transform:translateX(-50%);
  width:84%; aspect-ratio:1; border-radius:999px;
  background:radial-gradient(circle,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.14) 38%,
    rgba(255,255,255,0) 68%);
}

/* Kisi gorselleri kadrajin altinda ayaktan kesik geliyor.
   Kesim, alttaki cam bildirim kartiyla kapatilir; kart ayni
   zamanda o modulun sonucunu tasir. Kartin ustunde ince bir
   golge kisiyi kartla birlestirir. */
.b2b-sahne-kutu::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; bottom:52px; transform:translateX(-50%);
  width:52%; height:22px; border-radius:999px;
  background:radial-gradient(ellipse at center,
    rgba(12,40,96,.26) 0%,
    rgba(12,40,96,.10) 48%,
    rgba(12,40,96,0) 74%);
  filter:blur(3px);
}

/* --- 2b. ekran tuvalleri ---
   Iki katman var: ana ekran kisinin ARKASINDA (z:1), yardimci
   ekran kisinin ONUNDE (z:4) ve yari saydam, boylece kisiyi
   kapatmadan onunde duruyor gibi gorunuyor. */
.b2b-ekran-tuval{
  /* Tuval kutudan TASAR: panel golgesi (blur 44 + offset 20) kutunun
     kenarinda kirpiliyordu. Merkez ayni kaldigi icin panel konumlari
     degismez, yalnizca golgeye yer acilir. */
  position:absolute; z-index:1;
  left:-52px; top:-64px;
  width:calc(100% + 104px);
  height:calc(100% + 128px);
  pointer-events:none;
}
.b2b-ekran-tuval--on{ z-index:4; opacity:.88; }

/* --- 2c. kisi gorselleri --- */
.b2b-kisi{
  position:absolute; z-index:3;
  left:50%; bottom:0;
  /* genis ekranda kisi sag yariya kayar; soldaki buyuk panel
     boylece ortulmeden okunur (bkz. @media asagida) */
  height:100%; width:auto; max-width:none;
  transform:translateX(-50%);
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 18px 34px rgba(9,32,86,.30));
  opacity:0;
  transition:opacity .62s var(--b2b-gecis), filter .62s var(--b2b-gecis);
  will-change:opacity;
}
.b2b-kisi[data-b2b-etkin]{ opacity:1; }

/* dar ekranda kisi kisalir: ustunde kalan bant ekran panelinin
   okunur kalmasi icin ayrilir (panel konumu kahraman.js'te) */
/* Kisi sahnenin ORTASINDA; ekranlar iki yaninda ve arkasinda durur. */
@media (max-width:759px){
  .b2b-kisi{ height:64%; left:50%; }
}
@media (min-width:760px){
  /* Ekran SOLDA, kisi SAGDA — ust uste binmezler, boylece ekranin
     tamami okunur kalir (Emre'nin gonderdigi duzen). */
  .b2b-kisi{ height:100%; left:76%; }
}

/* <picture> sarmalayicisi konumlandirmayi bozmasin */
.b2b-sahne-kutu picture{ display:contents; }

/* --- 2d. kisinin onundeki cam bildirim --- */
.b2b-sahne-bildirim{
  position:absolute; z-index:5;
  left:50%; bottom:0; transform:translateX(-50%);
  width:min(430px, 92%);
  padding:12px 15px;
  border-radius:16px;
  border:1px solid var(--b2b-cam-kenar);
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:var(--b2b-cam-bulanik);
  backdrop-filter:var(--b2b-cam-bulanik);
  box-shadow:0 16px 38px rgba(9,32,86,.22);
  display:flex; align-items:center; justify-content:center; gap:11px;
  opacity:0;
  transition:opacity .5s var(--b2b-gecis);
}
.b2b-sahne-bildirim[data-b2b-etkin]{ opacity:1; }

.b2b-bildirim-ikon{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--b2b-mavi-600);
  color:#fff;
}
.b2b-bildirim-ikon svg{ width:16px; height:16px; }

.b2b-bildirim-ust{
  font-size:14.5px; font-weight:700; line-height:1.3;
  letter-spacing:-.012em;
  color:var(--b2b-lacivert);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


/* Masaustunde bildirim karti KISININ TAM ALTINDA durur: kisi
   gorselleri ayaktan kesik geldigi icin kesimi bu kart kapatir.
   (Bu kural base tanimdan SONRA gelmeli, yoksa eziliyor.) */
@media (min-width:760px){
  .b2b-sahne-bildirim{ left:76%; width:min(392px, 34%); }
  /* zemin golgesi de kisiyle ayni eksende dursun (ortada kaliyordu) */
  .b2b-sahne-kutu::after{ left:76%; width:30%; }
}

/* ---------------------------------------------------------
   5. MOBIL DUZEN
   --------------------------------------------------------- */
@media (max-width:1023px){
  .b2b-sahne-alan{ margin-top:26px; }
}
@media (max-width:480px){
  .b2b-sahne-bildirim{ padding:10px 12px; gap:10px; }
    .b2b-bildirim-ust{ font-size:13px; }
}

/* ---------------------------------------------------------
   6. HAREKET AZALTMA
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .b2b-kisi,

  .b2b-sahne-bildirim{ transition-duration:.001ms; }
}