/* ============================================================
   Kurulum süreci (modules/onboarding-steps.blade.php)
   ============================================================
   Masaüstünde yatay ray, mobilde dikey liste. Ray, modules/compare
   içindeki sipariş zinciriyle aynı görsel dili konuşuyor: ayrı bir
   "timeline" tasarımı çıkarmak sayfada ikinci bir süreç metaforu
   yaratıyor ve iki bölüm birbiriyle yarışıyordu. */

.onboard-track {
    /* Ray parçalarının uzunluğu boşluğa bağlı (aşağıdaki calc'lara
       bakın); ikisi ayrı ayrı yazılınca breakpoint'te biri güncellenip
       diğeri unutuluyor ve çizgi balonun ortasına değil kenarına
       bağlanıyordu. Tek değişkene bağlandı. */
    --onboard-gap: 28px;
    --onboard-dot: 44px;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--onboard-gap);
    max-width: 1120px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.onboard-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Ray tek bir uzun çizgi değil, adımlar arası parçalar. Tek çizgi
   .onboard-track::before ile denendi ama adım sayısına bağlı bir
   sağ offset hesabı gerektiriyordu (son balonun ortasında bitmesi
   için); parçalı kurguda hesap adım sayısından bağımsız.
   Son adımda parça yok: rayın boşluğa doğru uzaması süreci
   bitmemiş gibi gösteriyordu. */
.onboard-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--onboard-dot) / 2 - 1px);
    left: calc(var(--onboard-dot) / 2);
    right: calc(-1 * (var(--onboard-gap) + var(--onboard-dot) / 2));
    height: 2px;
    border-radius: 2px;
    background: var(--neutral-300);
}

/* Metin sola hizalı: adım açıklamaları iki cümle ve ortalanmış iki
   cümle satır başları kaydığı için taranamıyordu. Numara balonu da
   bu yüzden ortada değil, sütunun solunda. */
.onboard-num {
    /* Ray, mutlak konumlu bir ::before olduğu için konumsuz kardeşi
       olan balonun ÜSTÜNE biniyordu; balon konumlandırılarak öne
       alındı. */
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--onboard-dot);
    height: var(--onboard-dot);
    border-radius: 50%;
    /* Balonun içindeki rakam GERÇEK metin (adım numarası), süs değil: beyaz
       glif ham marka mavisinde 2.76:1 veriyordu, AA 4.5:1 istiyor. Marka
       ZEMİN olduğunda %70 + siyah yeterli: beyazla 5.20:1. Oran styles.css'teki
       .rts-btn.btn-primary ile bilerek aynı — aynı "beyaz metin marka hapta"
       deseni sayfada tek bir maviye karşılık gelsin. Sabit hex önce yazılıyor:
       main.js data-color-primary ile --brand'i sekiz renge çevirebiliyor,
       türetilmiş değer tema değişince de aynı oranda koyulaşır; color-mix'i
       desteklemeyen tarayıcı sabitte kalır. */
    background-color: #2a739a;
    background-color: color-mix(in srgb, var(--brand) 70%, #000);
    color: var(--white);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Sayfa zemini rengiyle halka: ray balonun altından geçtiği için
       halka olmadan çizgi balonun kenarına değip kirli duruyordu. */
    box-shadow:
        0 0 0 6px var(--body, #fff),
        0 6px 14px -6px rgba(60, 165, 220, 0.9);
}

.onboard-phase {
    display: inline-flex;
    align-items: center;
    margin-top: 22px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--neutral-100);
    /* Rozet zemini --neutral-100 (#f4f4f5); --neutral-500 orada 4.40:1 ile
       AA'nın 4.5 eşiğinin altında kalıyordu (12px/700 "büyük metin" değil).
       --neutral-600 => 7.03:1. */
    color: var(--neutral-600);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.onboard-step-title {
    margin: 14px 0 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--primary);
}

/* Gövde metinleri sayfa zemininde (--body #edecec) duruyor; --neutral-500
   orada 4.10:1. --neutral-600 => 6.56:1. */
.onboard-step-desc {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--neutral-600);
}

.onboard-note {
    max-width: 720px;
    margin: 56px auto 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    /* .onboard-step-desc ile aynı gerekçe: 4.10 -> 6.56. */
    color: var(--neutral-600);
}

.onboard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 28px;
    margin-top: 32px;
}

.onboard-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--neutral-600);
    text-decoration: none;
    border-bottom: 1px solid var(--neutral-300);
    padding-bottom: 2px;
    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}

/* Hover/odak rengi ham marka mavisiydi: --body zemininde 2.34:1, yani
   fareyle üzerine gelen kullanıcı için link okunamaz hale geliyordu.
   Marka METİN olduğu için %60 + siyah: aynı zeminde 5.58:1. */
.onboard-readmore:hover,
.onboard-readmore:focus-visible {
    color: #246384;
    color: color-mix(in srgb, var(--brand) 60%, #000);
    border-bottom-color: #246384;
    border-bottom-color: color-mix(in srgb, var(--brand) 60%, #000);
}

.onboard-readmore i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.onboard-readmore:hover i {
    transform: translateX(3px);
}

@media (max-width: 1199px) {
    .onboard-track {
        --onboard-gap: 20px;
    }

    .onboard-step-title {
        font-size: 18px;
    }
}

/* 991px'te dört sütun kalmıyor: metinler 3-4 kelimede bir kırılıyordu.
   Ray dikeye dönüyor, numara balonu satırın soluna geçiyor. */
@media (max-width: 991px) {
    .onboard-track {
        --onboard-gap: 32px;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        max-width: 620px;
    }

    .onboard-step {
        display: grid;
        grid-template-columns: var(--onboard-dot) minmax(0, 1fr);
        column-gap: 20px;
        align-items: start;
    }

    .onboard-step:not(:last-child)::before {
        top: calc(var(--onboard-dot) / 2);
        bottom: calc(-1 * (var(--onboard-gap) + var(--onboard-dot) / 2));
        left: calc(var(--onboard-dot) / 2 - 1px);
        right: auto;
        width: 2px;
        height: auto;
    }

    .onboard-num {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .onboard-phase {
        grid-column: 2;
        /* Grid hücresinde justify-self varsayılanı stretch: inline-flex
           olmasına rağmen rozet satır boyunca uzayıp etiket değil çubuk
           gibi görünüyordu. */
        justify-self: start;
        margin-top: 4px;
    }

    .onboard-step-title {
        grid-column: 2;
        margin-top: 10px;
    }

    .onboard-step-desc {
        grid-column: 2;
    }

    .onboard-note {
        margin-top: 44px;
        text-align: left;
    }

    .onboard-actions {
        justify-content: flex-start;
    }
}

/* 360px: 40px balon + 14px boşluk metne yaklaşık 300px bırakıyor.
   Balonu daha da küçültmek numarayı okunmaz hale getiriyordu; onun
   yerine sütun aralığı daraltıldı. */
@media (max-width: 575px) {
    .onboard-track {
        --onboard-dot: 40px;
    }

    .onboard-step {
        column-gap: 14px;
    }

    .onboard-num {
        font-size: 15px;
        box-shadow:
            0 0 0 5px var(--body, #fff),
            0 6px 14px -6px rgba(60, 165, 220, 0.9);
    }

    .onboard-step-title {
        font-size: 17px;
    }
}

/* Hareketi azaltma tercihi.
   Ayrım bilinçli: renk geçişleri (.onboard-readmore'un rengi ve alt çizgisi)
   KALIYOR — yer değiştirmiyorlar ve hover geri bildirimini taşıyorlar.
   Kalkan tek şey okun sağa kayması: bilgi taşımayan, tamamen süs olan ve
   vestibüler rahatsızlığa yol açabilecek tek hareket o. */
@media (prefers-reduced-motion: reduce) {
    .onboard-readmore i {
        transition: none;
        transform: none;
    }

    .onboard-readmore:hover i {
        transform: none;
    }
}