/* =========================================================
   b2bNet — blog-detay.css
   Tek bir blog yazısının sayfası. main.css'ten SONRA yüklenir.

   NOT: alt seridin sinif adlari (.b2b-serit-*) bicim.php'deki
   duyuru seridiyle ayniydi; hepsi .b2b-serit altina kapatildi.

   Kural: listeleme sayfasıyla aynı sadelik. Gölge, gradient
   ve hover hareketi yok. Metin genişliği okumaya göre dar
   tutulur; yan sütun yalnızca masaüstünde belirir.
   ========================================================= */

.b2b-yazi{
  /* Sabit menünün kapladığı yükseklik. */
  --b2b-yazi-ust:84px;
  /* Metin sütununun genişliği. Uzun satır okumayı yorar. */
  --b2b-yazi-genislik:680px;

  --b2b-yazi-zemin:#F6F9FF;
  --b2b-yazi-cizgi:#E4EBF7;
  --b2b-yazi-solgun:#8296B5;

  background:var(--b2b-yazi-zemin);
}

.b2b-yazi-ic{
  max-width:var(--b2b-genislik);
  margin-inline:auto;
  padding-inline:20px;
}


/* ---------------------------------------------------------
   1. BAŞLIK ALANI
   Mobilde de masaüstünde de metin sütunuyla aynı hizada
   durması için ortalanmış tek bir kolon.
   --------------------------------------------------------- */
.b2b-yazi-tepe{
  max-width:var(--b2b-yazi-genislik);
  margin-inline:auto;
  padding-top:calc(var(--b2b-yazi-ust) + 40px);
}
@media (min-width:768px){
  .b2b-yazi-tepe{ padding-top:calc(var(--b2b-yazi-ust) + 60px); }
}

.b2b-yazi-yol{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--b2b-yazi-solgun);
}
.b2b-yazi-yol a{ color:var(--b2b-mavi-700); font-weight:600; }
.b2b-yazi-yol a:hover{ text-decoration:underline; }
.b2b-yazi-yol span[aria-current]{
  /* uzun başlıklarda tek satırda kalsın */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.b2b-yazi-baslik{
  margin:18px 0 0;
  font-size:clamp(1.85rem,4.2vw,2.6rem);
  font-weight:700; line-height:1.14; letter-spacing:-.032em;
  color:var(--b2b-lacivert);
}

.b2b-yazi-ozet{
  margin:16px 0 0;
  font-size:clamp(1.02rem,1.5vw,1.15rem);
  line-height:1.62; color:var(--b2b-gri);
}

.b2b-yazi-bilgi{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-top:20px;
  font-size:13.5px; color:var(--b2b-yazi-solgun);
  font-variant-numeric:tabular-nums;
}
.b2b-yazi-nokta{
  width:4px; height:4px; border-radius:999px; background:#C3D3EE;
}


/* ---------------------------------------------------------
   2. KAPAK GÖRSELİ
   Metinden bir tık geniş; sayfaya yayılmaz.
   --------------------------------------------------------- */
.b2b-yazi-kapak{
  max-width:860px; margin:34px auto 0;
  overflow:hidden; border-radius:20px;
  background:var(--b2b-mavi-50);
}
.b2b-yazi-kapak img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
}
.b2b-yazi-kapak .b2b-kart-yertutucu{ border-radius:20px; aspect-ratio:16/9; }


/* ---------------------------------------------------------
   3. YAZI SÜTUNU
   Tek kolon, ortalanmış. Yan sütun yok: çağrı ve paylaşma
   alt şeritte toplandı.
   --------------------------------------------------------- */
.b2b-yazi-metin{
  max-width:var(--b2b-yazi-genislik);
  margin:44px auto 0;
}
@media (min-width:768px){ .b2b-yazi-metin{ margin-top:56px; } }


/* ---------------------------------------------------------
   4. METİN GÖVDESİ
   CMS'ten gelen ham HTML burada biçimlenir.
   --------------------------------------------------------- */
.b2b-yazi-metin{
  font-size:16.5px; line-height:1.8; color:#3A4C6E;
}
@media (min-width:768px){ .b2b-yazi-metin{ font-size:17px; } }

.b2b-yazi-metin > *:first-child{ margin-top:0; }
.b2b-yazi-metin p{ margin:0 0 22px; }

/* giriş cümlesi — ilk paragraf bir tık büyük */
.b2b-yazi-metin .b2b-yazi-giris{
  font-size:1.06em; font-weight:500; color:var(--b2b-lacivert);
}

.b2b-yazi-metin h2{
  margin:40px 0 12px;
  font-size:clamp(1.3rem,2.2vw,1.55rem);
  font-weight:700; line-height:1.3; letter-spacing:-.022em;
  color:var(--b2b-lacivert);
}
.b2b-yazi-metin h3{
  margin:30px 0 10px;
  font-size:1.1rem; font-weight:700; color:var(--b2b-lacivert);
}

.b2b-yazi-metin ul,
.b2b-yazi-metin ol{ margin:0 0 22px; padding-left:0; list-style:none; }
.b2b-yazi-metin li{ position:relative; padding-left:26px; margin-bottom:10px; }
.b2b-yazi-metin ul li::before{
  content:''; position:absolute; left:6px; top:.72em;
  width:7px; height:7px; border-radius:999px;
  background:var(--b2b-mavi-400);
}
.b2b-yazi-metin ol{ counter-reset:b2bMadde; }
.b2b-yazi-metin ol li{ counter-increment:b2bMadde; }
.b2b-yazi-metin ol li::before{
  content:counter(b2bMadde) '.';
  position:absolute; left:0; top:0;
  font-weight:700; color:var(--b2b-mavi-600);
}

.b2b-yazi-metin strong{ font-weight:700; color:var(--b2b-lacivert); }
.b2b-yazi-metin a{
  font-weight:600; color:var(--b2b-mavi-700);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(29,78,216,.35);
}
.b2b-yazi-metin a:hover{ text-decoration-color:var(--b2b-mavi-700); }

/* alıntı — kutu değil, sol çizgi */
.b2b-yazi-metin blockquote{
  margin:0 0 22px; padding:2px 0 2px 20px;
  border-left:2px solid var(--b2b-mavi-400);
  font-size:1.05em; line-height:1.7; color:var(--b2b-lacivert);
}
.b2b-yazi-metin blockquote p:last-child{ margin-bottom:0; }

.b2b-yazi-metin figure{ margin:28px 0; }
.b2b-yazi-metin img{
  display:block; width:100%; height:auto; border-radius:16px;
}
.b2b-yazi-metin figcaption{
  margin-top:10px; text-align:center;
  font-size:13px; color:var(--b2b-yazi-solgun);
}

.b2b-yazi-metin hr{
  border:0; border-top:1px solid var(--b2b-yazi-cizgi);
  margin:36px 0;
}


/* ---------------------------------------------------------
   5. İLGİLİ YAZILAR
   Listeleme sayfasındaki kart düzeninin aynısı.
   --------------------------------------------------------- */
.b2b-ilgili{
  margin-top:72px; padding-bottom:96px;
  border-top:1px solid var(--b2b-yazi-cizgi);
}
@media (min-width:768px){
  .b2b-ilgili{ margin-top:96px; padding-bottom:130px; }
}

.b2b-ilgili-baslik{
  margin:36px 0 0;
  font-size:1.05rem; font-weight:700; letter-spacing:-.015em;
  color:var(--b2b-lacivert);
}

.b2b-ilgili-izgara{
  display:grid; grid-template-columns:1fr;
  gap:36px 28px; margin-top:26px;
}
@media (min-width:600px){ .b2b-ilgili-izgara{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .b2b-ilgili-izgara{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 32px; } }

.b2b-ilgili-yazi{ display:block; }

.b2b-ilgili-gorsel{
  overflow:hidden; border-radius:16px;
  background:var(--b2b-mavi-50);
}
.b2b-ilgili-gorsel img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover;
}
.b2b-ilgili-gorsel .b2b-kart-yertutucu{ border-radius:16px; }

.b2b-ilgili-yazi-baslik{
  margin:14px 0 0;
  font-size:16.5px; font-weight:700; line-height:1.4;
  letter-spacing:-.015em; color:var(--b2b-lacivert);
  transition:color .2s ease;
}
.b2b-ilgili-yazi:hover .b2b-ilgili-yazi-baslik{ color:var(--b2b-mavi-700); }

.b2b-ilgili-bilgi{
  display:block; margin-top:8px;
  font-size:13.5px; color:var(--b2b-yazi-solgun);
  font-variant-numeric:tabular-nums;
}


/* ---------------------------------------------------------
   6. ALT ŞERİT — çağrı bandı
   Sayfa yazının içine girince aşağıdan kayarak gelir,
   ilgili yazılara varınca geri çekilir.
   --------------------------------------------------------- */
.b2b-serit{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:0 14px 14px;
  transform:translateY(130%);
  transition:transform .5s var(--b2b-gecis);
  pointer-events:none;
}
.b2b-serit.b2b-gorunur{
  transform:translateY(0);
  pointer-events:auto;
}

/* Cam yuzey uc katmandan olusur:
   1) ustten alta hafif azalan beyaz sis
   2) ust kenarda ince isik cizgisi (inset)
   3) biri yakin biri uzak iki golge — yuzeyin havada durmasi icin
   Tek renk yarı saydam zemin duz ve ucuz görünür, bu yüzden
   degrade + isik cizgisi birlikte kullanilir. */
.b2b-serit .b2b-serit-ic{
  display:flex; align-items:center; gap:12px;
  max-width:820px; margin-inline:auto;
  padding:10px 12px 10px 20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.62) 100%);
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.85) inset,
    0 0 0 1px rgba(18,48,110,.05),
    0 6px 16px -8px rgba(11,38,102,.22),
    0 26px 50px -24px rgba(11,38,102,.4);
}

/* Cam desteklemeyen tarayicida saydamlik okunurlugu bozmasin. */
@supports not (backdrop-filter: blur(2px)){
  .b2b-serit .b2b-serit-ic{ background:#fff; }
}

.b2b-serit .b2b-serit-yazi{
  flex:1; min-width:0; margin:0;
  font-size:14.5px; font-weight:600; line-height:1.4;
  letter-spacing:-.012em; color:var(--b2b-lacivert);
}
.b2b-serit .b2b-serit-ek{
  display:block; margin-top:2px;
  font-size:13px; font-weight:500; color:var(--b2b-gri);
}

.b2b-serit .b2b-buton{ margin-top:0; flex:0 0 auto; }

/* ---- şerit içindeki paylaşma ikonları ---- */
.b2b-serit .b2b-paylas-liste{
  display:flex; align-items:center; gap:6px;
  margin:0; padding:0; list-style:none;
}
.b2b-serit .b2b-paylas-baglanti{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  color:var(--b2b-yazi-solgun);
  transition:color .2s ease, background-color .2s ease;
}
.b2b-serit .b2b-paylas-baglanti svg{ width:15px; height:15px; fill:currentColor; }
.b2b-serit .b2b-paylas-baglanti:hover{
  color:var(--b2b-lacivert);
  background:rgba(18,48,110,.06);
}

.b2b-serit .b2b-serit-ayirac{
  width:1px; height:24px; flex:0 0 auto;
  background:rgba(18,48,110,.12);
}

.b2b-serit .b2b-serit-kapat{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:30px; height:30px;
  border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--b2b-yazi-solgun);
  transition:color .2s ease, background-color .2s ease;
}
.b2b-serit .b2b-serit-kapat svg{ width:15px; height:15px; }
.b2b-serit .b2b-serit-kapat:hover{ color:var(--b2b-lacivert); background:rgba(18,48,110,.06); }

/* Şerit hiçbir ende iki satıra düşmez: dar ekranda önce alt
   cümle, sonra paylaşma ikonları, en sonda başlık gizlenir. */
@media (max-width:720px){
  .b2b-serit .b2b-serit-ek{ display:none; }
  .b2b-serit .b2b-serit-yazi{ font-size:14px; }
}
@media (max-width:560px){
  .b2b-serit{ padding:0 10px 10px; }
  .b2b-serit .b2b-serit-ic{ gap:8px; padding:10px 10px 10px 14px; border-radius:16px; }
  .b2b-serit .b2b-serit-yazi{ font-size:13.5px; }
  .b2b-serit .b2b-paylas-baglanti{ width:32px; height:32px; }
  .b2b-serit .b2b-buton{ padding-inline:16px; font-size:14px; }
}
@media (max-width:430px){
  /* burada başlık yerine yalnızca paylaşma + düğme kalır */
  .b2b-serit .b2b-serit-yazi{ display:none; }
  .b2b-serit .b2b-serit-ic{ justify-content:space-between; padding-inline:12px; }
  .b2b-serit .b2b-paylas-liste{ margin-right:auto; }
}

@media (prefers-reduced-motion: reduce){
  .b2b-serit{ transition:none; }
}