/* ===================== NEDEN ÖZEL DERS? — BAŞLANGIÇ =====================
   Tek bant: solda accent başlık, sağda 4 avantaj kartı (kare foto + metin).
   (Layout: Flexbox + BEM — bkz. CLAUDE.md) */

/* Full-bleed bant — içerik hero ile aynı gutter'da (sol hizaya oturur) */
.why {
    background-color: #141414;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 44px clamp(20px, 4vw, 56px);   /* hero ile aynı yatay gutter */
}

.why__container {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

/* Sol başlık — accent, iki satır */
.why__title {
    flex: 0 0 auto;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
}

/* Kart listesi — 4 kart yan yana */
.why__list {
    flex: 1;
    display: flex;
    gap: clamp(20px, 2.4vw, 40px);
}

.why__card {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

/* Kare foto küçük resim */
.why__card-media {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background-image: var(--why-card-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.why__card-body {
    min-width: 0;
}

.why__card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 8px;
}

.why__card-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-gray-light);
    font-style: normal;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 992px) {
    .why__container {
        flex-direction: column;
        align-items: flex-start;
    }

    .why__title {
        white-space: normal;
    }

    /* Başlığın satır kırılımını masaüstüne özel tut, dar ekranda düz akıt */
    .why__title-br {
        display: none;
    }

    .why__list {
        width: 100%;
        flex-wrap: wrap;
    }

    .why__card {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 560px) {
    .why__card {
        flex: 1 1 100%;
    }
}
/* ===================== NEDEN ÖZEL DERS? — BİTİŞ ===================== */