/* Başlangıç rehberi */
.bs-govde { counter-reset: adim; }
.bs-yol { margin-bottom: 8px; }
.bs-adim { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--cizgi); }
.bs-adim:last-of-type { border-bottom: 0; }
.bs-no { position: relative; display: flex; justify-content: center; }
.bs-no::before { content: ""; position: absolute; top: 64px; bottom: -34px; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--cizgi-2), transparent); }
.bs-adim:last-of-type .bs-no::before { display: none; }
.bs-no span { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--yesil); color: var(--murekkep); font: 700 26px/1 var(--f-baslik); box-shadow: 0 0 0 6px rgba(151, 218, 121, .14), var(--golge-k); }
html.hareket .bs-adim.gorundu .bs-no span { animation: pat .55s cubic-bezier(.2, .8, .2, 1.4) backwards; }
.bs-ic { display: grid; gap: 14px; min-width: 0; }
.bs-bas { display: flex; align-items: center; gap: 12px; }
.bs-ikon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(151, 218, 121, .12); color: var(--yesil); flex: none; }
.bs-ikon svg { width: 20px; height: 20px; }
.bs-bas h2 { font-size: clamp(24px, 2.6vw, 32px); }
.bs-ic > p { margin: 0; max-width: 760px; color: var(--krem-2); font-size: 17px; line-height: 1.65; }
.bs-ek { margin-top: 6px; }
.bs-kolay { display: flex; flex-wrap: wrap; gap: 10px; }
.bs-kolay a { display: grid; justify-items: center; gap: 4px; width: 104px; padding: 10px 6px; border-radius: 10px; background: linear-gradient(180deg, var(--kart-2), var(--kart)); border: 1px solid var(--cizgi); text-align: center; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), border-color .2s; }
.bs-kolay a:hover { transform: translateY(-4px); border-color: rgba(151, 218, 121, .5); }
.bs-kolay img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; object-position: 50% 12%; }
.bs-kolay b { font: 700 14px/1.1 var(--f-baslik); text-transform: uppercase; }
.bs-kolay small { font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); }
html.hareket .bs-adim.gorundu .bs-kolay a { animation: pat .45s cubic-bezier(.2, .8, .2, 1.3) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.elmaslar { display: inline-flex; gap: 4px; }
.elmaslar i { width: 7px; height: 7px; transform: rotate(45deg); background: rgba(247, 233, 213, .22); }
.elmaslar.z1 i:nth-child(-n+1) { background: var(--yesil); box-shadow: 0 0 6px var(--yesil); }
.bs-kademe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 760px; }
.bs-kademe div { display: grid; gap: 4px; padding: 14px; border-radius: 10px; background: rgba(247, 233, 213, .04); border: 1px solid var(--cizgi); }
.bs-kademe b { display: inline-flex; align-items: center; gap: 5px; font: 700 20px/1 var(--f-baslik); color: #a6f5da; }
.bs-kademe b .ruh-ikon { width: 15px; height: 15px; }
.bs-kademe span { font: 700 13px/1 var(--f-arayuz); }
.bs-kademe small { font-size: 12.5px; color: var(--krem-3); }
.bs-ek .baglanti { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 14px/1 var(--f-arayuz); color: var(--krem-2); }
.bs-ek .baglanti svg { width: 16px; height: 16px; }
.bs-puan { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-puan div { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(247, 233, 213, .04); font: 600 13.5px/1 var(--f-arayuz); }
.kh-bedel { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #3b2c5a; color: #d9c6ff; font: 700 12px/1 var(--f-arayuz); }
.bs-puan div:nth-child(3) .kh-bedel { background: var(--altin); color: var(--murekkep); }
.bs-hatalar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bs-hata { display: grid; gap: 8px; align-content: start; padding: 18px; border-top: 3px solid var(--kirmizi); }
.bs-hata > svg { width: 22px; height: 22px; color: var(--kirmizi); }
.bs-hata b { font: 700 17px/1.1 var(--f-baslik); text-transform: uppercase; }
.bs-hata p { margin: 0; color: var(--krem-2); font-size: 14px; line-height: 1.5; }
.bs-son { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 26px 30px; background: radial-gradient(80% 140% at 0% 0%, rgba(151, 218, 121, .16), transparent 60%), linear-gradient(180deg, var(--kart-2), var(--kart)); }
.bs-son p { margin: 8px 0 0; color: var(--krem-2); max-width: 560px; }
.bs-son-dug { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1000px) { .bs-hatalar, .bs-kademe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .bs-adim { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .bs-no { justify-content: flex-start; }
  .bs-no::before { display: none; }
  .bs-no span { width: 46px; height: 46px; font-size: 21px; }
  .bs-hatalar { grid-template-columns: 1fr; }
}