/* 02-baglantilar.css — bölüm 2: sabit telefon kartı + 3 adım + SVG çizgi. */

.sahne-baglantilar {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: 120px clamp(16px, 7vw, 120px) 90px;
  max-width: 1280px; margin: 0 auto;
}

.adimlar-satir { display: flex; gap: 14px; align-items: stretch; }
.baglanti-cizgi { width: 20px; flex: none; align-self: stretch; height: auto; min-height: 220px; }
.baglanti-cizgi-taban { fill: none; stroke: var(--cizgi); stroke-width: 2; }
.baglanti-cizgi-dolu {
  fill: none; stroke: var(--altin); stroke-width: 2;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s var(--yay);
}
.baglanti-cizgi circle { fill: var(--zemin); stroke: var(--cizgi); stroke-width: 2; }

.adimlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.adimlar li { margin: 0; }
.adim {
  appearance: none; width: 100%; font: inherit; color: inherit; background: none;
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  padding: 14px 12px; border-radius: 18px; cursor: pointer;
  min-height: 44px;
  border: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s;
}
.adim:hover { background: color-mix(in srgb, var(--kor) 6%, transparent); }
.adim:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }
.adim.aktif { background: color-mix(in srgb, var(--kor) 9%, transparent); border-color: color-mix(in srgb, var(--kor) 30%, transparent); }
.adim-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  font: 700 13px var(--govde-font); color: var(--metin-ikincil);
  border: 1.5px solid var(--cizgi); margin-top: 2px;
}
.adim.aktif .adim-no { color: #1e1a16; background: var(--altin); border-color: var(--altin); }
.adim-metin { display: flex; flex-direction: column; gap: 4px; }
.adim-baslik { font: 700 17px var(--govde-font); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adim-aciklama { display: block; font-size: 14.5px; line-height: 1.5; color: var(--metin-ikincil); }
.rozet-pro {
  font: 700 10px var(--govde-font); letter-spacing: 0.06em; text-transform: uppercase;
  color: #1e1a16; background: var(--altin); padding: 2px 8px; border-radius: 999px;
}

.telefon-sahne { display: flex; justify-content: center; }
/* Görseller ÜST ÜSTE (aynı ızgara hücresi): eski soluklaşıp çıkarken yeni
   girer — eskiden display:none ile eski anında kayboluyordu, geçiş sertti. */
.kart-telefon-sabit { width: min(300px, 70vw); position: relative; display: grid; }
.gorsel-adim {
  grid-area: 1 / 1; width: 100%; height: auto; border-radius: 20px;
  opacity: 0; transform: translateY(14px) scale(0.97);
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.gorsel-adim.gorsel-goster { opacity: 1; transform: none; }

/* İpucu + kendiliğinden ilerleme göstergesi: etkileşimin görünür olması için. */
.adim-ipucu {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--kor);
}
.adim-ipucu svg { width: 16px; height: 16px; }
.adim { position: relative; overflow: hidden; }
.adim:hover .adim-no { border-color: var(--kor); }

@media (prefers-reduced-motion: reduce) {
  .gorsel-adim { transition: opacity 0.2s ease; transform: none; }
}

@media (max-width: 760px) {
  .sahne-baglantilar { grid-template-columns: 1fr; padding-top: 100px; }
  .telefon-sahne { order: -1; margin-bottom: 12px; }
  .baglanti-cizgi { min-height: 0; }
}