/* ==================================================
   MEDİKAL ESTETİK — GENEL AYARLAR
   ================================================== */

.yc-medical,
.yc-medical *,
.yc-medical *::before,
.yc-medical *::after {
    box-sizing: border-box;
}

.yc-medical {
    width: 100%;
    min-width: 0;
    padding-top: clamp(40px, 4.2vw, 80px);
    background-color: #fff;
    color: #476e70;
    font-family: "Poppins", sans-serif;
}

.yc-medical__container {
    width: 70.416667%;
    max-width: 1352px;
    min-width: 0;
    margin-inline: auto;
}

/* ==================================================
   BÖLÜM BAŞLIĞI VE AÇIKLAMASI
   ================================================== */

.yc-medical__heading {
    margin-bottom: clamp(28px, 3vw, 58px);
    text-align: center;
}

.yc-medical .yc-medical__title {
    margin: 0;
    padding: 0;
    color: #476e70;
    font-family: inherit;
    font-size: clamp(26px, 2.4vw, 46px);
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.yc-medical .yc-medical__description {
    max-width: 1000px;
    margin: clamp(12px, 1.1vw, 21px) auto 0;
    color: #374345;
    font-size: clamp(13px, 0.94vw, 18px);
    line-height: 1.5;
}

/* ==================================================
   HER EKRANDA ÜÇ SÜTUN
   Sol liste / görsel / sağ liste aynı satırda kalır.
   ================================================== */

.yc-medical__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr)
        minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(12px, 1.6vw, 30px);
    min-width: 0;
}

/* Sütunların konumları açıkça belirlenir.
   Tablet ve mobilde de bu sıra korunur. */
.yc-medical__list--left {
    grid-column: 1;
    grid-row: 1;
}

.yc-medical__visual {
    grid-column: 2;
    grid-row: 1;
}

.yc-medical__list--right {
    grid-column: 3;
    grid-row: 1;
}

/* ==================================================
   UYGULAMA LİSTELERİ
   Sabit yükseklik veya negatif konum kullanılmaz.
   ================================================== */

.yc-medical .yc-medical__list {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(14px, 1.5vw, 28px);

    min-width: 0;
    margin: 0;
    padding: clamp(8px, 0.8vw, 15px) 0
             clamp(20px, 2.4vw, 46px);

    list-style: none;
}

.yc-medical .yc-medical__item {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yc-medical .yc-medical__item-title {
    display: flex;
    align-items: baseline;
    gap: 6px;

    min-width: 0;
    margin: 0 0 6px;
    padding: 0;

    color: #476e70;
    font-family: inherit;
    font-size: clamp(14px, 1.05vw, 20px);
    font-weight: 600;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Küçük yön işareti başlığın yanında kalır. */
.yc-medical__arrow {
    flex: 0 0 auto;
    font-size: 1.4em;
    line-height: 1;
}

.yc-medical .yc-medical__link {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    font: inherit;
    text-decoration: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.yc-medical .yc-medical__item-description {
    margin: 0;
    padding: 0;
    color: #374345;
    font-family: inherit;
    font-size: clamp(12px, 0.78vw, 15px);
    font-weight: 400;
    line-height: 1.45;
    word-break: normal;
    overflow-wrap: break-word;
}

/* ==================================================
   ORTA GÖRSEL
   En-boy oranı korunarak sütunla birlikte küçülür.
   Metinler uzadığında üzerlerine taşmaz.
   ================================================== */

.yc-medical__visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

.yc-medical__image {
    display: block;
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ==================================================
   BAĞLANTI ETKİLEŞİMLERİ
   ================================================== */

.yc-medical .yc-medical__link:hover {
    color: #36585a;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.yc-medical .yc-medical__link:focus-visible {
    outline: 2px solid #476e70;
    outline-offset: 4px;
    border-radius: 2px;
}

/* ==================================================
   TABLET
   Üç sütun korunur; yan boşluklar ve görsel payı azalır.
   ================================================== */

@media (min-width: 768px) and (max-width: 1199.98px) {
    .yc-medical {
        padding-bottom: 40px;
    }

    .yc-medical__container {
        width: calc(100% - 48px);
    }

    .yc-medical__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.55fr)
            minmax(0, 1fr);
        gap: clamp(12px, 1.6vw, 19px);
    }

    .yc-medical .yc-medical__list {
        gap: 18px;
        padding: 8px 0 20px;
    }

    .yc-medical .yc-medical__item-title {
        font-size: clamp(13px, 1.35vw, 16px);
    }

    .yc-medical .yc-medical__item-description {
        font-size: clamp(12px, 1.15vw, 14px);
    }
}

/* ==================================================
   MOBİL
   Listeler görselin altına geçmez.
   Dar ekranda metne daha fazla sütun genişliği ayrılır.
   ================================================== */

@media (max-width: 767.98px) {
    .yc-medical {
        padding-block: 40px;
    }

    .yc-medical__container {
        width: calc(100% - 24px);
    }

    .yc-medical__heading {
        margin-bottom: 24px;
    }

    .yc-medical .yc-medical__title {
        font-size: clamp(25px, 6vw, 34px);
    }

    .yc-medical .yc-medical__description {
        font-size: 14px;
        line-height: 1.5;
    }

    .yc-medical__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.15fr)
            minmax(0, 1fr);
        gap: clamp(6px, 1.5vw, 11px);
    }

    .yc-medical .yc-medical__list {
        gap: 16px;
        padding: 0;
    }

    .yc-medical .yc-medical__item-title {
        gap: 3px;
        margin-bottom: 5px;
        font-size: clamp(12px, 2.2vw, 15px);
        line-height: 1.35;
    }

    .yc-medical .yc-medical__item-description {
        font-size: clamp(12px, 1.9vw, 14px);
        line-height: 1.4;
    }

    /* Uzun listelerin yanında görsel dikey olarak ortalanır. */
    .yc-medical__visual {
        align-items: center;
    }
}
/* ==================================================
   MEDİKAL ESTETİK — MASAÜSTÜ VE TABLET HİZALAMASI
   Listeler yukarıdan başlar; görsel boyunca dağıtılmaz.
   ================================================== */

@media (min-width: 768px) {
    .yc-medical {
        /* Görsel ile sonraki bölüm arasındaki ek boşluğu kaldırır. */
        padding-bottom: 0;
    }

    .yc-medical__layout {
        /* Tablet dahil aynı sütun oranını korur. */
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 2fr)
            minmax(0, 1fr);

        align-items: stretch;
        gap: clamp(12px, 1.6vw, 30px);
    }

    .yc-medical .yc-medical__list {
        position: static;

        /* Son öğeyi görselin dibine iten space-between kaldırılır. */
        justify-content: flex-start;
        gap: clamp(18px, 2vw, 38px);

        margin: 0;
        padding-top: clamp(12px, 1.4vw, 27px);

        /* SSS'nin üst üste gelen dekoratif alanından
           son metin satırını uzak tutar. */
        padding-bottom: 80px;
    }

    .yc-medical .yc-medical__item-title {
        margin: 0 0 6px;
        font-size: clamp(14px, 1.05vw, 20px);
        line-height: 1.3;
    }

    .yc-medical .yc-medical__item-description {
        margin: 0;
        font-size: clamp(12px, 0.78vw, 15px);
        line-height: 1.4;
    }

    .yc-medical__visual {
        grid-column: 2;
        grid-row: 1;
        align-items: flex-end;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .yc-medical__image {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }
}

/* MOBİL: görsel üstte, uygulamalar altında iki sütun. */
@media (max-width: 767.98px) {
    .yc-medical {
        padding-block: 40px 32px;
    }

    .yc-medical__container {
        width: calc(100% - 32px);
    }

    .yc-medical__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
        align-items: start;
    }

    /* Görsel iki sütunu kaplar ve doğal oranını korur. */
    .yc-medical__visual {
        grid-column: 1 / -1;
        grid-row: 1;
        align-items: flex-end;
        width: 100%;
        max-width: 340px;
        margin-inline: auto;
    }

    .yc-medical__list--left {
        grid-column: 1;
        grid-row: 2;
    }

    .yc-medical__list--right {
        grid-column: 2;
        grid-row: 2;
    }

    .yc-medical .yc-medical__list {
        justify-content: flex-start;
        gap: 24px;
        padding: 0;
    }

    .yc-medical .yc-medical__item-title {
        gap: 5px;
        margin-bottom: 6px;
        font-size: 15px;
        line-height: 1.4;
    }

    .yc-medical .yc-medical__item-description {
        font-size: 13px;
        line-height: 1.5;
    }
}