/* ══ Üyelik kayıt akışı — adım göstergesi ve adımlar arası geçiş ═══════════
   Yalnızca kayıt akışındaki sayfalar yükler. @view-transition belge düzeyinde
   çalıştığı için site.css'e konulamazdı: oraya konsaydı sitedeki her bağlantı
   geçişe girerdi. Akışın bütün sayfaları bu dosyayı yüklediğinden geçiş
   yalnızca adımlar arasında oluşur; akıştan çıkan bağlantılarda (Ana Sayfa,
   Giriş Yap) karşı sayfa katılmadığı için sayfa eskisi gibi anında açılır.

   Geçişi desteklemeyen tarayıcıda hiçbir şey bozulmaz: registration-flow.js
   <html>'e .reg-vt sınıfını ekleyemez, aşağıdaki yedek giriş animasyonu
   devreye girer. */

/* ── Adım göstergesi ──────────────────────────────────────────────────── */
.registration-stepper {
    --registration-marker: 34px;
    max-width: 672px;
    margin: 0 auto 34px;
}

.registration-stepper__list {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ray ilk ve son dairenin merkezleri arasında durur; uçları dışarı taşmaz. */
.registration-stepper__rail {
    position: absolute;
    top: calc(var(--registration-marker) / 2 - 2px);
    right: calc(50% / var(--registration-steps));
    left: calc(50% / var(--registration-steps));
    height: 4px;
    border-radius: 99px;
    background: #e7ebf2;
}

.registration-stepper__rail-fill {
    display: block;
    width: var(--registration-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f76fb8 0%, var(--brand-primary) 100%);
}

.registration-stepper__item {
    display: grid;
    justify-items: center;
    gap: 9px;
    text-align: center;
}

.registration-stepper__marker {
    position: relative;
    display: grid;
    width: var(--registration-marker);
    height: var(--registration-marker);
    place-items: center;
    border: 2px solid #dde2ea;
    border-radius: 50%;
    background: #fff;
    color: #97a1b2;
    font-size: 13px;
    font-weight: 800;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.registration-stepper__number,
.registration-stepper__check {
    grid-area: 1 / 1;
    transition: opacity .18s ease, transform .18s ease;
}

.registration-stepper__check {
    width: 18px;
    height: 18px;
    opacity: 0;
    transform: scale(.6);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.registration-stepper__item.is-done .registration-stepper__marker {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.registration-stepper__item.is-done .registration-stepper__number { opacity: 0; transform: scale(.6); }
.registration-stepper__item.is-done .registration-stepper__check { opacity: 1; transform: scale(1); }

.registration-stepper__item.is-current .registration-stepper__marker {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(var(--brand-rgb), .14);
}

.registration-stepper__label {
    color: #8b96a8;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
    transition: color .2s ease;
}

.registration-stepper__item.is-done .registration-stepper__label { color: #556073; }
.registration-stepper__item.is-current .registration-stepper__label { color: #101827; font-weight: 800; }

/* Üyelik tipi seçilene kadar tek adım duruyor: bağlanacağı bir sonraki daire
   olmadığı için ray da çizilmiyor. */
.registration-stepper--single .registration-stepper__rail { display: none; }

/* Dar ekranda dört etiket yan yana sığmıyor; tek satırlık özet ve ince çubuk
   aynı bilgiyi veriyor, üstelik yatay kaydırma gerektirmiyor. */
.registration-stepper__compact { display: none; }

@media (max-width: 620px) {
    .registration-stepper { margin-bottom: 26px; }
    .registration-stepper__list { display: none; }

    /* Tek adım dar ekrana da sığıyor; "Adım 1 / 1" demektense dairenin
       kendisi duruyor. */
    .registration-stepper--single .registration-stepper__list { display: grid; }
    .registration-stepper--single .registration-stepper__compact { display: none; }

    .registration-stepper__compact {
        display: grid;
        gap: 9px;
        margin: 0;
    }

    .registration-stepper__compact span {
        color: var(--brand-primary);
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .registration-stepper__compact strong {
        color: #101827;
        font-family: "Hanken Grotesk", Inter, sans-serif;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .registration-stepper__compact::after {
        content: "";
        height: 5px;
        border-radius: 99px;
        background:
            linear-gradient(90deg, #f76fb8 0%, var(--brand-primary) 100%) left / var(--registration-progress-bar, 0%) 100% no-repeat,
            #e7ebf2;
    }
}

/* ── Seçim kartlarına dokunuş ─────────────────────────────────────────── */
/* Kartlar tıklanabilir olduklarını yalnızca imleçle belli ediyordu; ok hem
   yönü hem de "buradan devam" mesajını veriyor. */
.registration-choice-card,
.registration-option { position: relative; }

.registration-choice-card::after,
.registration-option::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2.5px solid #c4ccda;
    border-right: 2.5px solid #c4ccda;
    border-radius: 1px;
    transform: rotate(45deg);
    transition: transform .22s cubic-bezier(.22, .61, .36, 1), border-color .22s ease;
}

.registration-choice-card::after {
    position: absolute;
    top: 39px;
    right: 33px;
}

.registration-option { justify-content: space-between; gap: 16px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease; }
.registration-option::after { flex: 0 0 auto; }

.registration-choice-card:hover::after,
.registration-option:hover::after {
    border-color: var(--brand-primary);
    transform: rotate(45deg) translate(3px, -3px);
}

.registration-choice-card:active,
.registration-option:active { transform: translateY(0) scale(.994); }

.registration-choice-card:focus-visible,
.registration-option:focus-visible {
    border-color: var(--brand-primary);
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .registration-choice-card::after { top: 31px; right: 25px; }
}

/* ── Adımlar arası geçiş ──────────────────────────────────────────────── */
@view-transition { navigation: auto; }

/* Parçalar tek tek animasyonlanıyor; kökün varsayılan çapraz geçişi üstüne
   binmesin. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

.registration-back { view-transition-name: reg-back; }
.registration-stepper { view-transition-name: reg-stepper; }
.registration-stepper__rail-fill { view-transition-name: reg-progress; }
.registration-step { view-transition-name: reg-step; }

/* Gösterge ve "Geri" yerinde kalır, yalnızca içerik kayar: sayfa değişmiş
   değil, sihirbaz bir adım ilerlemiş gibi okunur. Dolan çubuk eski
   genişliğinden yenisine büyür — grup animasyonu boyutu enterpole ediyor. */
::view-transition-group(reg-back),
::view-transition-group(reg-stepper) { animation-duration: .34s; }

::view-transition-group(reg-progress) {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.34, .89, .3, 1);
}

/* Çubuğun içi düz renk; anlık görüntüleri ayrıca soldurmak titremeye yol
   açıyor, yalnızca grup genişliği hareket etsin. */
::view-transition-old(reg-progress),
::view-transition-new(reg-progress) { animation: none; }

::view-transition-group(reg-step) {
    animation-duration: .42s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* Adımların yükseklikleri çok farklı (iki kart ile uzun form). height: auto
   olmadan anlık görüntüler grup kutusuna esnetilir ve içerik ezilir. */
::view-transition-old(reg-step),
::view-transition-new(reg-step) { height: auto; }

::view-transition-old(reg-step) { animation: reg-step-leave .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(reg-step) { animation: reg-step-enter .38s cubic-bezier(.16, .84, .44, 1) 70ms both; }

/* Boşluksuz yazılmalı: bu sözde öğeler kök öğenin üzerinde oluşuyor, alt
   öğesi değiller. Araya boşluk konursa kural hiç eşleşmez ve geri gidişte de
   ileri animasyonu oynar. */
html[data-reg-direction="back"]::view-transition-old(reg-step) { animation-name: reg-step-leave-back; }
html[data-reg-direction="back"]::view-transition-new(reg-step) { animation-name: reg-step-enter-back; }

@keyframes reg-step-leave { to { opacity: 0; transform: translateX(-28px); } }
@keyframes reg-step-enter { from { opacity: 0; transform: translateX(34px); } }
@keyframes reg-step-leave-back { to { opacity: 0; transform: translateX(28px); } }
@keyframes reg-step-enter-back { from { opacity: 0; transform: translateX(-34px); } }

/* ── Yedek: View Transitions desteklemeyen tarayıcı ───────────────────── */
/* Çıkış animasyonu yok — o, gezinmeyi geciktirirdi. Yalnızca yeni adım
   yerine otururken yükseliyor, kartlar da sırayla beliriyor. */
html:not(.reg-vt) .registration-step {
    animation: reg-step-fade-up .4s cubic-bezier(.16, .84, .44, 1) both;
}

html:not(.reg-vt) .registration-stepper {
    animation: reg-step-fade-up .34s cubic-bezier(.16, .84, .44, 1) both;
}

html:not(.reg-vt) .registration-choice-card,
html:not(.reg-vt) .registration-option {
    animation: reg-step-fade-up .42s cubic-bezier(.16, .84, .44, 1) both;
}

html:not(.reg-vt) .registration-choice-card:nth-child(1),
html:not(.reg-vt) .registration-option:nth-child(1) { animation-delay: .07s; }
html:not(.reg-vt) .registration-choice-card:nth-child(2),
html:not(.reg-vt) .registration-option:nth-child(2) { animation-delay: .13s; }

@keyframes reg-step-fade-up {
    from { opacity: 0; transform: translateY(14px); }
}

/* Dolan çubuk yedek yolda da hareketli görünsün: sıfırdan hedef genişliğine. */
html:not(.reg-vt) .registration-stepper__rail-fill {
    animation: reg-rail-grow .55s cubic-bezier(.34, .89, .3, 1) .1s both;
}

@keyframes reg-rail-grow { from { width: 0; } }

/* ── Hareket azaltma tercihi ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(reg-step),
    ::view-transition-old(reg-step),
    ::view-transition-new(reg-step),
    ::view-transition-group(reg-back),
    ::view-transition-group(reg-stepper),
    ::view-transition-group(reg-progress) { animation: none !important; }

    html:not(.reg-vt) .registration-step,
    html:not(.reg-vt) .registration-stepper,
    html:not(.reg-vt) .registration-choice-card,
    html:not(.reg-vt) .registration-option,
    html:not(.reg-vt) .registration-stepper__rail-fill { animation: none !important; }
}