/* Bölüm: nasıl çalışır. Numaralar sayfanın tek "süsü"; ikon eklenmez. */

.st-list { list-style: none; }

.st-num {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    /* brand-600 üzerinde beyaz yalnızca 3,68:1 veriyordu; 15 px kalın metin
       "büyük yazı" sayılmadığı için eşik 4,5:1. brand-700 ile 5,36:1 olur. */
    background: var(--brand-700);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

.st-title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
}

.st-text {
    margin-top: var(--sp-2);
    color: var(--ink-600);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.section--deep .st-title { color: #fff; }
.section--deep .st-text  { color: var(--ink-300); }

/* --- yan yana --- */

.st-list--row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-8);
}

.st-list--row .st-item { display: grid; gap: var(--sp-4); }

/* Adımlar arasında ince bağlantı çizgisi — akış hissi verir */
.st-list--row .st-item { position: relative; }

.st-list--row .st-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(38px + var(--sp-3));
    right: calc(var(--sp-8) * -1 + var(--sp-3));
    height: 1px;
    background: var(--border-strong);
}

@media (max-width: 760px) {
    .st-list--row .st-item::after { display: none; }
}

/* --- zaman çizgisi --- */

.st-list--timeline { display: grid; gap: var(--sp-8); }

.st-list--timeline .st-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--sp-5);
    position: relative;
}

.st-list--timeline .st-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 46px;
    bottom: calc(var(--sp-8) * -1);
    width: 1px;
    background: var(--border-strong);
}

.st-media { margin-top: var(--sp-5); max-width: 620px; }

/* ============================================================
   "tiles" varyantı — çerçeveli ikon kutusu + numaralı başlık

   Numaralı dolu daire yerine ince çerçeveli bir ikon kutusu; sıra bilgisi
   başlığın önündeki "1-" ile veriliyor. Kart çerçevesi yok, sütunlar
   yalnızca boşlukla ayrılıyor — ferah ve sakin durur.
   ============================================================ */

.st-tiles {
    display: grid;
    /* 210px alt sınır: dört adım geniş ekranda tek sıraya sığar, üç adımda
       sütunlar kendiliğinden genişler. */
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(var(--sp-5), 2.4vw, var(--sp-8));
    margin-top: clamp(var(--sp-6), 3vw, var(--sp-8));
    list-style: none;
    counter-reset: none;
}

.st-tile__ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--indigo-500);
    border-radius: var(--r-md);
    color: var(--indigo-600);
}

.st-tile__title {
    margin-top: var(--sp-5);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

.st-tile__no { color: var(--ink-900); }

.st-tile__text {
    margin-top: var(--sp-3);
    max-width: 34ch;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-600);
}

/* Koyu zeminde */
.section--deep .st-tile__ico   { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.section--deep .st-tile__title,
.section--deep .st-tile__no    { color: #fff; }
.section--deep .st-tile__text  { color: var(--ink-300); }

@media (max-width: 620px) {
    .st-tiles { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .st-tile__ico { width: 42px; height: 42px; }
}