/* =========================================================
   b2bNet — yardim-detay.css
   Tek bir yardim kilavuzunun sayfasi. main.css'ten SONRA yuklenir.

   Yaklasim: sayfanin isi bir isi ogretmek. Adimlar numarali ve
   dikey bir cizgiyle baglidir; her adimin altinda kendi ekran
   goruntusu durur. Kutu ve golge yok.
   ========================================================= */

.b2b-kdetay{
  /* Sabit menunun kapladigi yukseklik. */
  --b2b-kd-ust:84px;
  /* Metin sutunu genisligi. */
  --b2b-kd-genislik:720px;

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

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

.b2b-kdetay-ic{
  max-width:1120px; margin-inline:auto;
  padding-inline:20px;
  padding-top:calc(var(--b2b-kd-ust) + 44px);
  padding-bottom:90px;
}
@media (min-width:768px){
  .b2b-kdetay-ic{
    padding-top:calc(var(--b2b-kd-ust) + 64px);
    padding-bottom:120px;
  }
}


/* ---------------------------------------------------------
   1. BASLIK
   --------------------------------------------------------- */
.b2b-kd-yol{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13.5px; color:var(--b2b-kd-solgun);
}
.b2b-kd-yol a{ color:var(--b2b-mavi-700); font-weight:600; }
.b2b-kd-yol a:hover{ text-decoration:underline; }

.b2b-kd-baslik{
  max-width:var(--b2b-kd-genislik);
  margin:18px 0 0;
  font-size:clamp(1.75rem,3.6vw,2.4rem);
  font-weight:700; line-height:1.14; letter-spacing:-.032em;
  color:var(--b2b-lacivert);
}
.b2b-kd-ozet{
  max-width:60ch; margin:14px 0 0;
  font-size:clamp(1rem,1.4vw,1.1rem);
  line-height:1.65; color:var(--b2b-gri);
}
.b2b-kd-bilgi{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-top:16px;
  font-size:13px; color:var(--b2b-kd-solgun);
  font-variant-numeric:tabular-nums;
}
.b2b-kd-nokta{ width:4px; height:4px; border-radius:999px; background:#C3D3EE; }


/* ---------------------------------------------------------
   2. DUZEN
   Masaustunde solda icindekiler, sagda anlatim.
   Mobilde icindekiler metnin ustunde duz liste olur.
   --------------------------------------------------------- */
.b2b-kd-duzen{ margin-top:36px; }
@media (min-width:1000px){
  .b2b-kd-duzen{
    display:grid;
    grid-template-columns:220px minmax(0,var(--b2b-kd-genislik));
    gap:0 64px;
    align-items:start;
    margin-top:44px;
  }
}

/* ---- icindekiler ---- */
.b2b-kd-icindekiler{
  padding-top:18px;
  border-top:1px solid var(--b2b-kd-cizgi);
}
@media (min-width:1000px){
  .b2b-kd-icindekiler{
    position:sticky;
    top:calc(var(--b2b-kd-ust) + 28px);
    order:1;
    padding-top:0; border-top:0;
  }
}

.b2b-kd-icindekiler-baslik{
  margin:0 0 8px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--b2b-kd-solgun);
}
.b2b-kd-icindekiler ol{
  list-style:none; margin:0; padding:0;
  counter-reset:b2bIc;
}
.b2b-kd-icindekiler li{ counter-increment:b2bIc; }
.b2b-kd-icindekiler a{
  display:grid; grid-template-columns:22px minmax(0,1fr);
  gap:4px; padding:7px 0;
  font-size:14px; line-height:1.45; color:var(--b2b-gri);
  transition:color .2s ease;
}
.b2b-kd-icindekiler a::before{
  content:counter(b2bIc);
  font-weight:700; color:#B7C6DE;
  font-variant-numeric:tabular-nums;
}
.b2b-kd-icindekiler a:hover{ color:var(--b2b-mavi-700); }


/* ---------------------------------------------------------
   3. ANLATIM
   --------------------------------------------------------- */
.b2b-kd-govde{ padding-top:32px; }
@media (min-width:1000px){ .b2b-kd-govde{ order:2; padding-top:0; } }

/* ---- video ----
   Yerine <iframe> konuldugunda olculer bozulmaz. */
.b2b-kd-video{
  margin:0;
  overflow:hidden; border-radius:20px;
  background:var(--b2b-mavi-50);
}
.b2b-kd-video iframe,
.b2b-kd-video video{
  display:block; width:100%; height:100%;
  aspect-ratio:16/9; border:0;
}
.b2b-kd-video .b2b-kart-yertutucu{ border-radius:20px; aspect-ratio:16/9; }
.b2b-kd-video figcaption{
  margin-top:10px;
  font-size:13px; color:var(--b2b-kd-solgun);
}

.b2b-kd-giris{
  margin:30px 0 0;
  font-size:16.5px; line-height:1.8; color:#3A4C6E;
}

/* ---- on kosullar ---- */
.b2b-kd-kosul{
  margin-top:30px; padding:18px 0 4px;
  border-top:1px solid var(--b2b-kd-cizgi);
  border-bottom:1px solid var(--b2b-kd-cizgi);
}
.b2b-kd-kosul-baslik{
  margin:0 0 10px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--b2b-kd-solgun);
}
.b2b-kd-kosul ul{ list-style:none; margin:0; padding:0 0 14px; }
.b2b-kd-kosul li{
  position:relative; padding-left:22px; margin-bottom:8px;
  font-size:15px; line-height:1.6; color:#3A4C6E;
}
.b2b-kd-kosul li::before{
  content:''; position:absolute; left:5px; top:.72em;
  width:6px; height:6px; border-radius:999px; background:var(--b2b-mavi-400);
}

/* ---- adimlar ----
   Numaralar dikey bir cizgiyle baglanir; kullanici kacinci
   adimda oldugunu takip eder. */
.b2b-adim-liste{
  list-style:none; margin:40px 0 0; padding:0;
  counter-reset:b2bAdim;
}

.b2b-adim{
  position:relative;
  display:grid; grid-template-columns:34px minmax(0,1fr);
  gap:16px;
  padding-bottom:34px;
  counter-increment:b2bAdim;
  scroll-margin-top:calc(var(--b2b-kd-ust) + 24px);
}
/* adimlari birlestiren cizgi */
.b2b-adim::before{
  content:''; position:absolute;
  left:16px; top:38px; bottom:0;
  width:1px; background:var(--b2b-kd-cizgi);
}
.b2b-adim:last-child{ padding-bottom:0; }
.b2b-adim:last-child::before{ display:none; }

.b2b-adim-no{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  background:#fff; border:1px solid var(--b2b-kd-cizgi);
  font-size:14px; font-weight:700; color:var(--b2b-mavi-700);
  font-variant-numeric:tabular-nums;
}
.b2b-adim-no::before{ content:counter(b2bAdim); }

.b2b-adim-baslik{
  margin:5px 0 0;
  font-size:1.1rem; font-weight:700; line-height:1.35;
  letter-spacing:-.02em; color:var(--b2b-lacivert);
}
.b2b-adim-govde{
  margin:9px 0 0;
  font-size:16px; line-height:1.75; color:#3A4C6E;
}
.b2b-adim-govde p{ margin:0 0 14px; }
.b2b-adim-govde p:last-child{ margin-bottom:0; }
.b2b-adim-govde strong{ font-weight:700; color:var(--b2b-lacivert); }

/* ekran goruntusu */
.b2b-adim-gorsel{
  margin:16px 0 0;
  overflow:hidden; border-radius:14px;
  border:1px solid var(--b2b-kd-cizgi);
  background:#fff;
}
.b2b-adim-gorsel img{ display:block; width:100%; height:auto; }
.b2b-adim-gorsel .b2b-kart-yertutucu{ border:0; border-radius:0; }
.b2b-adim-gorsel figcaption{
  padding:9px 12px;
  border-top:1px solid var(--b2b-kd-cizgi);
  font-size:12.5px; color:var(--b2b-kd-solgun);
}

/* ---- ipucu / uyari ----
   Kutu degil, soldan ince cizgi. */
.b2b-kd-not{
  margin:16px 0 0; padding:2px 0 2px 16px;
  border-left:2px solid var(--b2b-mavi-400);
  font-size:15px; line-height:1.7; color:#3A4C6E;
}
.b2b-kd-not-etiket{
  display:block; margin-bottom:3px;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--b2b-mavi-600);
}
.b2b-kd-not--uyari{ border-left-color:#E2A03F; }
.b2b-kd-not--uyari .b2b-kd-not-etiket{ color:#B87914; }


/* ---------------------------------------------------------
   4. ALT ALAN
   --------------------------------------------------------- */
.b2b-kd-dip{
  max-width:var(--b2b-kd-genislik);
  margin-top:52px; padding-top:28px;
  border-top:1px solid var(--b2b-kd-cizgi);
}
@media (min-width:1000px){
  .b2b-kd-dip{ margin-left:284px; }
}

.b2b-kd-dip-baslik{
  margin:0 0 4px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--b2b-kd-solgun);
}
.b2b-kd-ilgili{ list-style:none; margin:0; padding:0; }
.b2b-kd-ilgili li{ border-bottom:1px solid var(--b2b-kd-cizgi); }
.b2b-kd-ilgili a{
  display:block; padding:14px 0;
  font-size:15.5px; font-weight:600; color:var(--b2b-lacivert);
  transition:color .2s ease;
}
.b2b-kd-ilgili a:hover{ color:var(--b2b-mavi-700); }

.b2b-kd-yardim{
  margin:26px 0 0;
  font-size:14.5px; line-height:1.65; color:var(--b2b-gri);
}
.b2b-kd-yardim a{
  color:var(--b2b-lacivert); font-weight:600;
  border-bottom:1px solid var(--b2b-kd-cizgi);
  transition:color .2s ease, border-color .2s ease;
}
.b2b-kd-yardim a:hover{
  color:var(--b2b-mavi-700); border-bottom-color:var(--b2b-mavi-200);
}


/* ---------------------------------------------------------
   5. YAZDIRMA
   --------------------------------------------------------- */
@media print{
  .b2b-kdetay{ background:#fff; }
  .b2b-kdetay-ic{ max-width:none; padding:0; }
  .b2b-kd-icindekiler,
  .b2b-kd-video,
  .b2b-kd-dip{ display:none; }
  .b2b-kd-duzen{ display:block; }
  .b2b-adim{ break-inside:avoid; }
}


/* =========================================================
   6. EDITOR METNI  (.b2b-kd-yazi)
   Veritabanindaki kilavuz govdesi WYSIWYG cikisi: basliksiz
   <div> satirlari, arada bosluk icin bos <div>'ler, gorseller
   <figure> icinde. Adim listesi / video yapisi veride YOK,
   o yuzden burada uydurulmuyor — gelen ne ise okunakli
   tipografiye oturtuluyor.
   ========================================================= */
.b2b-kd-yazi{
  font-size:16px; line-height:1.8; color:#3A4C6E;
  overflow-wrap:break-word;
}
.b2b-kd-yazi > *:first-child{ margin-top:0; }
.b2b-kd-yazi > *:last-child{ margin-bottom:0; }

.b2b-kd-yazi p,
.b2b-kd-yazi > div{ margin:0 0 12px; }
.b2b-kd-yazi div:empty{ margin:0; height:10px; }
.b2b-kd-yazi br + br{ display:none; }

.b2b-kd-yazi strong,
.b2b-kd-yazi b{ font-weight:700; color:var(--b2b-lacivert); }
.b2b-kd-yazi em,
.b2b-kd-yazi i{ font-style:italic; color:#4A5D80; }

.b2b-kd-yazi h2,
.b2b-kd-yazi h3,
.b2b-kd-yazi h4{
  margin:34px 0 12px;
  font-weight:700; letter-spacing:-.022em; line-height:1.3;
  color:var(--b2b-lacivert);
  scroll-margin-top:calc(var(--b2b-kd-ust) + 24px);
}
.b2b-kd-yazi h2{ font-size:1.4rem; }
.b2b-kd-yazi h3{ font-size:1.15rem; }
.b2b-kd-yazi h4{ font-size:1rem; }

.b2b-kd-yazi a{
  color:var(--b2b-mavi-700); font-weight:600;
  border-bottom:1px solid var(--b2b-mavi-200);
}
.b2b-kd-yazi a:hover{ border-bottom-color:var(--b2b-mavi-600); }

.b2b-kd-yazi ul,
.b2b-kd-yazi ol{ margin:0 0 16px; padding-left:0; list-style:none; }
.b2b-kd-yazi li{
  position:relative; padding-left:26px; margin-bottom:9px;
  line-height:1.7;
}
.b2b-kd-yazi ul > li::before{
  content:''; position:absolute; left:7px; top:.78em;
  width:6px; height:6px; border-radius:999px; background:var(--b2b-mavi-400);
}
.b2b-kd-yazi ol{ counter-reset:b2bSira; }
.b2b-kd-yazi ol > li{ counter-increment:b2bSira; }
.b2b-kd-yazi ol > li::before{
  content:counter(b2bSira) ".";
  position:absolute; left:0; top:0;
  font-weight:700; color:var(--b2b-mavi-600);
  font-variant-numeric:tabular-nums;
}
.b2b-kd-yazi li > ul,
.b2b-kd-yazi li > ol{ margin:9px 0 0; }

/* gorseller — editor bazilarini <figure><a><img> olarak sariyor */
.b2b-kd-yazi figure{ margin:20px 0; }
.b2b-kd-yazi figure a{ border-bottom:0; }
.b2b-kd-yazi img{
  display:block; max-width:100%; height:auto;
  margin:20px 0;
  border-radius:14px; border:1px solid var(--b2b-kd-cizgi);
  background:#fff;
}
.b2b-kd-yazi figure img{ margin:0; }
.b2b-kd-yazi figcaption{
  margin-top:9px; font-size:12.5px; color:var(--b2b-kd-solgun);
}

/* tablo — dar ekranda kendi icinde kayar */
.b2b-kd-tablo{ overflow-x:auto; margin:22px 0; }
.b2b-kd-yazi table{
  width:100%; border-collapse:collapse;
  font-size:14.5px;
}
.b2b-kd-yazi th,
.b2b-kd-yazi td{
  padding:10px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--b2b-kd-cizgi);
}
.b2b-kd-yazi th{
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--b2b-kd-solgun);
  white-space:nowrap;
}

.b2b-kd-yazi iframe{
  display:block; width:100%; aspect-ratio:16/9; height:auto;
  margin:22px 0; border:0; border-radius:16px; background:var(--b2b-mavi-50);
}

/* govdesi hic doldurulmamis kilavuz */
.b2b-kd-bos{
  margin:0; padding:22px 0 0;
  border-top:1px solid var(--b2b-kd-cizgi);
  font-size:15.5px; line-height:1.7; color:var(--b2b-gri);
}
.b2b-kd-bos a{ color:var(--b2b-lacivert); font-weight:600; }

/* icindekiler yoksa tek sutuna dus */
@media (min-width:1000px){
  .b2b-kd-duzen--tek{ grid-template-columns:minmax(0,var(--b2b-kd-genislik)); }
  .b2b-kd-duzen--tek .b2b-kd-dip,
  .b2b-kd-duzen ~ .b2b-kd-dip.b2b-kd-dip--tek{ margin-left:0; }
}
.b2b-kd-icindekiler[hidden]{ display:none; }

/* onceki / sonraki */
.b2b-kd-gezinme{
  display:grid; gap:10px;
  margin:0 0 28px;
}
@media (min-width:640px){
  .b2b-kd-gezinme{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
}
.b2b-kd-gez{
  display:block; padding:14px 16px;
  border:1px solid var(--b2b-kd-cizgi); border-radius:14px;
  background:#fff;
  transition:border-color .2s ease;
}
.b2b-kd-gez:hover{ border-color:var(--b2b-mavi-200); }
.b2b-kd-gez-etiket{
  display:block; margin-bottom:3px;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--b2b-kd-solgun);
}
.b2b-kd-gez-ad{
  display:block;
  font-size:15px; font-weight:600; line-height:1.4; color:var(--b2b-lacivert);
}
.b2b-kd-gez--sonraki{ text-align:right; }

/* Mobilde ust alan durgunken 140px (duyuru seridi + menu). */
@media (max-width:767px){
  .b2b-kdetay{ --b2b-kd-ust:104px; }
}


/* =========================================================
   7. YAN SUTUN — MODUL AGACI
   Kilavuz sayfasi blog yazisi gibi tek akis olmamali:
   okuyan kisi hangi modulun kacinci kilavuzunda oldugunu
   ekranda gormeli. Sag sutun yapiskan durur; icinde bulunulan
   modul acik, kilavuzlari alt alta; diger moduller tek satir.
   ========================================================= */
@media (min-width:1000px){
  .b2b-kd-duzen{
    grid-template-columns:minmax(0,var(--b2b-kd-genislik)) 250px;
    gap:0 56px;
  }
  .b2b-kd-govde{ order:1; padding-top:0; }
  .b2b-kd-yan{
    order:2;
    position:sticky; top:calc(var(--b2b-kd-ust) + 28px);
  }
  .b2b-kd-dip{ margin-left:0; }
}

.b2b-kd-yan{
  margin-top:38px; padding-top:24px;
  border-top:1px solid var(--b2b-kd-cizgi);
}
@media (min-width:1000px){
  .b2b-kd-yan{ margin-top:0; padding-top:0; border-top:0; }
}

.b2b-kd-agac-ust{
  margin:0 0 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--b2b-kd-solgun);
}
.b2b-kd-agac-ust a{ color:inherit; }
.b2b-kd-agac-ust a:hover{ color:var(--b2b-mavi-700); }

.b2b-kd-agac,
.b2b-kd-agac ul{ list-style:none; margin:0; padding:0; }

.b2b-kd-agac > li{ border-top:1px solid var(--b2b-kd-cizgi); }
.b2b-kd-agac > li:last-child{ border-bottom:1px solid var(--b2b-kd-cizgi); }

/* modul satiri */
.b2b-kd-agac-modul{
  display:block; padding:11px 0;
  font-size:14.5px; font-weight:600; line-height:1.4;
  letter-spacing:-.012em; color:#42567B;
  transition:color .2s ease;
}
.b2b-kd-agac-modul:hover{ color:var(--b2b-mavi-700); }
.b2b-kd-agac > li.b2b-kd-agac--acik > .b2b-kd-agac-modul{
  color:var(--b2b-lacivert); font-weight:700;
}

/* acik modulun kilavuzlari — soldan dikey cizgiye baglanir */
.b2b-kd-agac-alt{
  margin:0 0 12px; padding-left:13px;
  border-left:1px solid var(--b2b-kd-cizgi);
}
.b2b-kd-agac-alt a{
  display:block; padding:7px 0 7px 11px;
  margin-left:-13px;
  border-left:2px solid transparent;
  font-size:13.5px; line-height:1.5; color:var(--b2b-gri);
  transition:color .2s ease, border-color .2s ease;
}
.b2b-kd-agac-alt a:hover{ color:var(--b2b-mavi-700); }
.b2b-kd-agac-alt a[aria-current]{
  color:var(--b2b-mavi-700); font-weight:700;
  border-left-color:var(--b2b-mavi-600);
}

/* yan sutundaki "bu sayfada" listesi agacin altina duser */
.b2b-kd-yan .b2b-kd-icindekiler{
  position:static;
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--b2b-kd-cizgi);
}

@media print{ .b2b-kd-yan{ display:none; } }

/* Agac sutunu beyaz yuzeye otursun. */
.b2b-kd-yan{
  padding:20px 18px;
  border-top:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 50px -44px rgba(11,38,102,.5);
}
@media (min-width:1000px){
  .b2b-kd-yan{ padding:20px 18px; }
}
.b2b-kd-agac > li:first-child{ border-top:0; }
.b2b-kd-agac > li:last-child{ border-bottom:0; }

/* Agac alt listesindeki dikey ayirac cizgisi kalksin; aktif
   kilavuzun mavi isareti tek basina yeterli. */
.b2b-kd-agac-alt{ border-left:0; padding-left:13px; }

/* ---------------------------------------------------------
   8. GOMULU VIDEO
   Editorden <video controls width="300" height="150"> olarak
   geliyor; olcu ozniteliklerini PHP tarafinda temizliyoruz,
   oran videonun kendi orani olsun diye height:auto.
   --------------------------------------------------------- */
.b2b-kd-yazi video{
  display:block;
  width:100%; max-width:100%; height:auto;
  margin:24px 0;
  border-radius:14px;
  border:1px solid var(--b2b-kd-cizgi);
  background:#0A1834;
  outline:0;
}
.b2b-kd-yazi video:focus-visible{
  border-color:var(--b2b-mavi-400);
  box-shadow:0 0 0 4px #E8F0FF;
}
/* video tek basina bir satirda duruyorsa etrafindaki bos
   <div> paragraf boslugunu ikiye katlamasin */
.b2b-kd-yazi div:has(> video){ margin:0; }