/* =========================================================
   b2bNet — yardim-modul.css
   Bir yardim modulunun altindaki kilavuz listesi.
   main.css'ten SONRA yuklenir.

   Yaklasim: yardim.html ile ayni dil — kutu yok, satirlar
   ince cizgilerle ayrilir. Masaustunde solda moduller arasi
   gecis icin yapiskan bir sutun, mobilde ayni liste yatay
   kayan serit olur.
   ========================================================= */

.b2b-kilavuz{
  /* Sabit menunun kapladigi yukseklik. */
  --b2b-klv-ust:84px;
  /* Mobildeki yatay modul seridinin yuksekligi. */
  --b2b-klv-serit:58px;

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

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

.b2b-kilavuz-ic{
  max-width:1120px; margin-inline:auto;
  padding-inline:20px;
  padding-bottom:90px;
}
@media (min-width:768px){ .b2b-kilavuz-ic{ padding-bottom:120px; } }


/* ---------------------------------------------------------
   1. DUZEN
   --------------------------------------------------------- */
@media (min-width:1000px){
  .b2b-kilavuz-duzen{
    display:grid;
    grid-template-columns:232px minmax(0,1fr);
    gap:0 56px;
    align-items:start;
    padding-top:calc(var(--b2b-klv-ust) + 56px);
  }
}


/* ---------------------------------------------------------
   2. MODULLER ARASI GECIS
   Tek HTML, iki davranis: mobilde yapiskan yatay serit,
   masaustunde yapiskan dikey sutun.
   --------------------------------------------------------- */
.b2b-klv-gezinme{
  position:sticky; top:0; z-index:6;
  margin-inline:-20px; padding-inline:20px;
  padding-top:var(--b2b-klv-ust);
  background:var(--b2b-klv-zemin);
}

.b2b-klv-gezinme-baslik{ display:none; }

.b2b-klv-modul-liste{
  display:flex; align-items:center; gap:7px;
  min-height:var(--b2b-klv-serit);
  margin:0; padding:9px 0;
  list-style:none;
  border-bottom:1px solid var(--b2b-klv-cizgi);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.b2b-klv-modul-liste::-webkit-scrollbar{ display:none; }
.b2b-klv-modul-liste li{ flex-shrink:0; scroll-snap-align:center; }

.b2b-klv-modul-bag{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:0 14px;
  border-radius:999px;
  white-space:nowrap;
  font-size:14px; font-weight:600; color:#42567B;
  transition:color .2s ease, background-color .2s ease;
}
.b2b-klv-modul-bag img{ width:17px; height:17px; object-fit:contain; }
.b2b-klv-modul-bag:hover{ color:var(--b2b-mavi-700); background:#EDF3FF; }
.b2b-klv-modul-bag[aria-current]{
  color:var(--b2b-mavi-700); background:#E4EEFF;
}

@media (min-width:1000px){
  .b2b-klv-gezinme{
    top:calc(var(--b2b-klv-ust) + 28px);
    margin-inline:0; padding-inline:0; padding-top:0;
    background:transparent;
  }
  .b2b-klv-gezinme-baslik{
    display:block; margin:0 0 12px; padding-left:14px;
    font-size:11.5px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--b2b-klv-solgun);
  }
  .b2b-klv-modul-liste{
    display:grid; gap:2px;
    min-height:0; padding:0;
    border-bottom:0; overflow:visible;
  }
  .b2b-klv-modul-bag{
    width:100%; min-height:40px; padding:0 14px;
    border-radius:11px; white-space:normal;
  }
}


/* ---------------------------------------------------------
   3. BASLIK ALANI
   --------------------------------------------------------- */
.b2b-klv-govde{ padding-top:34px; }
@media (min-width:1000px){ .b2b-klv-govde{ padding-top:0; } }

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

.b2b-klv-tepe{
  display:flex; align-items:center; gap:16px;
  margin-top:18px;
}
.b2b-klv-tepe-ikon{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:58px; height:58px;
  border-radius:16px;
  background:#fff; border:1px solid var(--b2b-klv-cizgi);
}
.b2b-klv-tepe-ikon img{ width:30px; height:30px; object-fit:contain; }

.b2b-klv-baslik{
  margin:0;
  font-size:clamp(1.7rem,3.4vw,2.3rem);
  font-weight:700; line-height:1.14; letter-spacing:-.032em;
  color:var(--b2b-lacivert);
}
.b2b-klv-aciklama{
  max-width:52ch; margin:14px 0 0;
  font-size:15.5px; line-height:1.65; color:var(--b2b-gri);
}


/* ---------------------------------------------------------
   4. KILAVUZ LISTESI
   --------------------------------------------------------- */
.b2b-klv-oblek{ margin-top:42px; }

.b2b-klv-oblek-baslik{
  margin:0 0 2px;
  font-size:11.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--b2b-klv-solgun);
}

.b2b-klv-liste{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--b2b-klv-cizgi);
}
.b2b-klv-liste li{ border-bottom:1px solid var(--b2b-klv-cizgi); }

.b2b-klv-satir{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 14px; align-items:center;
  padding:16px 4px;
}

.b2b-klv-ad{
  display:block;
  font-size:16px; font-weight:600; line-height:1.4;
  letter-spacing:-.012em; color:var(--b2b-lacivert);
  transition:color .2s ease;
}
.b2b-klv-satir:hover .b2b-klv-ad{ color:var(--b2b-mavi-700); }

.b2b-klv-yazi{
  display:block; margin-top:3px;
  font-size:13.5px; line-height:1.55; color:var(--b2b-gri);
}

/* icerik turu — rozet degil, kucuk yazi */
.b2b-klv-tur{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--b2b-klv-solgun);
  white-space:nowrap;
}
.b2b-klv-tur svg{ width:14px; height:14px; }
.b2b-klv-tur--video{ color:var(--b2b-mavi-600); }


/* ---------------------------------------------------------
   5. ALT ALAN
   --------------------------------------------------------- */
.b2b-klv-dip{
  margin-top:52px; padding-top:30px;
  border-top:1px solid var(--b2b-klv-cizgi);
}
.b2b-klv-dip-baslik{
  margin:0;
  font-size:15.5px; font-weight:700; color:var(--b2b-lacivert);
}
.b2b-klv-dip-yazi{
  margin:7px 0 0;
  font-size:14.5px; line-height:1.65; color:var(--b2b-gri);
}
.b2b-klv-dip-yazi a{
  color:var(--b2b-lacivert); font-weight:600;
  border-bottom:1px solid var(--b2b-klv-cizgi);
  transition:color .2s ease, border-color .2s ease;
}
.b2b-klv-dip-yazi a:hover{
  color:var(--b2b-mavi-700); border-bottom-color:var(--b2b-mavi-200);
}

/* ---------------------------------------------------------
   6. MOBILDE UST ALAN PAYI
   Ust alan durgunken 140px (duyuru seridi + menu), sayfa
   kaydirilinca serit kapanip 84px'e iniyor. Yapiskan modul
   seridinin kendi padding-top'u 84px oldugu icin, durgun
   haldeki 56px'lik farki kapsayiciya ekliyoruz; boylece serit
   ne acilista menunun altina giriyor ne de kaydirinca bosluk
   biakiyor.
   --------------------------------------------------------- */
@media (max-width:999px){
  .b2b-kilavuz-ic{ padding-top:56px; }
}

/* Kilavuz satiri hover'da beyaz zemine otursun; cizgili liste
   hissi bozulmasin diye satir kendi ic bosluguna kadar genisler. */
.b2b-klv-satir{
  margin-inline:-14px; padding-inline:14px;
  border-radius:12px;
  transition:background-color .18s ease;
}
.b2b-klv-satir:hover{ background:#fff; }