/* Bölüm: kimler için? — "split" varyantı.

   TASARIM KARARI: Kart, kutu, kalın çerçeve ve 3B efekt YOK. Bölüm çok sadeydi
   ama çözüm kutulamak değil; ağırlık tipografide, ince aksan çizgisinde ve
   soldaki fotoğrafta. Böylece sayfa premium sadeliğini korur. */

.au-split {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(var(--sp-8), 4vw, var(--sp-16));
    align-items: center;
}

.au-figure {
    margin: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    /* Yükseltme yerine yumuşak bir oturma gölgesi — kart hissi vermez */
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.au-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    /* Üst sınır: geniş ekranda görsel büyüyüp bölümü şişirmesin */
    max-height: 430px;
    object-fit: cover;
}

/* Başlık bloğu sütun içinde kendi hizasında durur */
.au-intro .sc-head { margin-bottom: 0; }
.au-intro .sc-head__title { max-width: 18ch; }
.au-intro .sc-head__lead  { max-width: 46ch; }

/* ---------------------------------------------------------------- Liste */

.au-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--sp-6), 3vw, var(--sp-10));
    margin-top: clamp(var(--sp-10), 4vw, var(--sp-16));
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.au-item {
    position: relative;
    padding-top: var(--sp-6);
    /* Tek ince üst çizgi; ızgara çerçevesi değil */
    border-top: 1px solid var(--ink-200);
    transition: border-color var(--dur) var(--ease);
}

/* Sıra numarası: ritim verir, süs değil */
.au-item__no {
    display: block;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    /* ink-400 beyaz üstünde yalnızca 2,56:1 veriyordu; numara okunur olmalı */
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur) var(--ease);
}

/* Marka degradesinden kısa aksan — kutunun yaptığı işi çizgiyle yapar */
.au-item__rule {
    position: absolute;
    top: -1px;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--grad-brand-soft);
    transition: width var(--dur-slow) var(--ease-out);
}

.au-item__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

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

/* Hover: aksan çizgisi uzar, numara markaya döner. Kart kalkmaz, gölge büyümez. */
.au-item:hover .au-item__rule { width: 64px; }
.au-item:hover .au-item__no   { color: var(--brand-700); }
.au-item:hover               { border-top-color: var(--brand-200); }

/* Koyu zeminde */
.section--deep .au-item        { border-top-color: rgba(255, 255, 255, 0.16); }
.section--deep .au-item__title { color: #fff; }
.section--deep .au-item__text  { color: var(--ink-300); }
.section--deep .au-item__no    { color: var(--ink-400); }

@media (max-width: 900px) {
    .au-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }

    /* Dar ekranda fotoğraf yatay bir şeride döner; dikey 4:5 çok yer kaplardı.
       Yığılmış düzende tam genişlikte 425px'e çıkıp bölümü şişiriyordu. */
    .au-figure img { aspect-ratio: 16 / 10; max-height: 280px; }

    .au-intro .sc-head__title { max-width: none; }

    .au-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .au-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

@media (prefers-reduced-motion: reduce) {
    .au-item__rule { transition: none; }
}