/* ===========================================================
   ULUSLARARASI HAZIRLIK (MOBILE SAFE)
=========================================================== */

.prep-section {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
    overflow: hidden; /* scroll taşmasını keser */
}

/* ===========================================================
   HEADINGS
=========================================================== */

.prep-title {
    font-size: clamp(26px, 3vw, 42px);
    margin-bottom: 14px;
    color: #3A3A3A;
}

/* ===========================================================
   TEXT
=========================================================== */

.prep-subtitle {
    max-width: 900px;
    margin: 0 auto 50px auto;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.6;
    color: #3A3A3A;
    opacity: 0.85;
}

/* ===========================================================
   GRID
=========================================================== */

.prep-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* ===========================================================
   CARD
=========================================================== */

.prep-card {
    background: #F3EDE4;
    border-radius: 24px;
    padding: 20px;
    overflow: hidden; /* swiper taşmasını engeller */
}

.prep-card h3 {
    font-size: 20px;
    margin-bottom: 14px;
}

/* ===========================================================
   SWIPER
=========================================================== */

.prep-swiper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.prep-swiper .swiper-wrapper,
.prep-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.prep-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media (max-width: 768px) {

    .prep-section {
        margin: 70px auto;
    }

    .prep-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .prep-card h3 {
        text-align: center;
    }

    /* Mobilde paragraf kırılımı daha doğal olsun */
    .prep-subtitle br {
        display: none;
    }
}

/* Yazı bloğunu biraz daha rahat okutmak için */
.prep-subtitle {
    line-height: 1.7;
}