/* =============================================== */
/*              TEMEL DEĞİŞKENLER VE FONT            */
/* =============================================== */
:root {
    --background: #fff;
    --foreground: #171717;
    --primary: #adbbd5;
    --secondary: #b9e9e9;
    --highlight: #adbbd5;
}

/* Sayfanızda bu font tanımları zaten varsa tekrar eklemenize gerek yok */
@font-face {
    font-family: 'Gotham-Bold';
    src: url(https://happen.co.uk/media/Gotham-Bold.5306f5d5.otf) format("opentype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham-Medium';
    src: url(https://happen.co.uk/media/Gotham%20Medium.026843f9.otf) format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham-Book';
    src: url(https://happen.co.uk/media/Gotham%20Book.9aa2dd90.otf) format("opentype");
    font-weight: 400;
    font-style: normal;
}


/* =============================================== */
/*         DOKTOR ONAYLI ZAYIFLAMA BÖLÜMÜ          */
/* =============================================== */

/* Bölümün Ana Taşıyıcısı */
.weight-loss-section .container {
    max-width: 96rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5rem; /* sm:py-20 */
    padding-bottom: 1.25rem; /* max-lg:pb-5 */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Degrade Arka Plana Sahip Ana Kutu */
.gradient-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(120deg, #fbecdf, #fbecdf 7320.54%);
    color: white;
    position: relative;
    width: 100%;
}

/* Ana Başlık (Doctor approved weight loss.) */
.main-heading {
    text-align: start;
    font-family: var(--bold-font);
    letter-spacing: -0.25px;
}

/* Özellik Satırları (İkon + Metin) */
.feature-item {
    display: flex;
    align-items: center;
}

.check-icon {
    width: 1.5rem; /* max-md:size-6 */
    height: 1.5rem;
}

.feature-text {
    margin-left: 1.25rem; /* ml-5 */
    font-family: var(--medium-font);
    font-size: 0.75rem; /* max-md:text-xs */
}

/* Dekoratif Resimlerin Taşıyıcıları (Sadece büyük ekranda) */
.absolute-image-1,
.absolute-image-2 {
    position: absolute;
    z-index: 0;
    display: none; /* Varsayılan olarak gizli */
}

.absolute-image-1 {
    top: 16rem; /* max-xl:top-64 */
    right: -30rem; /* max-xl:-right-[30rem] */
}

.absolute-image-2 {
    top: 0;
    left: -7.5rem; /* max-xl:-left-30 */
    width: 7rem; /* w-28 */
}

.decorative-image {
    width: 66.6667%; /* max-xl:w-2/3 */
}


/* Mobil Cihazlarda Görünen Resimler */
.mobile-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem; /* gap-4 */
    margin-top: 1.25rem; /* mt-5 */
}

/* Buton ve Animasyonu */
.button-wrapper {
    margin-top: 2.5rem; /* mt-10 */
    position: relative;
    z-index: 10;
}

.journey-button {
    border: 5px solid var(--secondary);
    background: var(--highlight);
    cursor: pointer;
    padding: 10px 20px;
    animation: borderPulse 2s infinite;
    color: white;
    font-family: var(--primary-font);
    font-size: 1rem;
    border-radius: 9999px;
    width: 200px;
    text-align: center;
}

@keyframes borderPulse {
    0% { border-color: #b9e9ea; }
    50% { border-color: #b9e9ea4d; }
    100% { border-color: #b9e9ea; }
}


/* =============================================== */
/*               RESPONSIVE STİLLER                */
/* =============================================== */

/* Medium Ekranlar ve Üzeri (Tablet, >768px) */
@media (min-width: 768px) {
    .weight-loss-section .container {
        padding-bottom: 5rem;
    }
    .gradient-box {
        padding-left: 4rem; /* md:pl-16 */
        border-top-right-radius: 10rem; /* md:rounded-tr-[10rem] */
        width: 659px;
        height: 659px;
    }
    .main-heading {
        font-size: 75px; /* md:text-[75px] */
        line-height: 86.6px; /* md:leading-[86.6px] */
    }
    .feature-item {
        margin-top: 1.75rem; /* md:mt-7 */
        width: 25rem; /* md:w-100 */
    }
    .check-icon {
        width: 2rem; /* md:size-8 */
        height: 2rem;
    }
    .feature-text {
        font-size: 22px; /* md:text-[22px] */
    }
    .mobile-image-grid {
        gap: 2.5rem; /* md:gap-10 */
        width: 659px;
    }
    .journey-button {
        width: 322px;
        padding: 1rem;
        font-size: 1.25rem;
    }
}

/* Küçük Ekranlar (Mobil, <768px) */
@media (max-width: 767.98px) {
    .weight-loss-section .container {
      max-width: 80%;
    }
    .gradient-box {
        padding: 1.25rem 2rem; /* max-md:py-5 max-md:px-8 */
        border-top-right-radius: 4rem; /* max-md:rounded-tr-[4rem] */
    }
    .main-heading {
        font-size: 33px; /* max-md:text-[33px] */
        line-height: 1.25; /* max-md:leading-tight */
    }
    .feature-item {
        margin-top: 0.5rem; /* max-md:mt-2 */
    }
}

/* Large Ekranlar ve Üzeri (Desktop, >1024px) */
@media (min-width: 1024px) {
    .gradient-box {
        margin-left: -10rem; /* lg:-ml-[10rem] */
    }
    .absolute-image-1,
    .absolute-image-2 {
        display: block; /* Geniş ekranda göster */
    }
    .mobile-image-grid {
        display: none; /* lg:hidden */
    }
    .journey-button {
        font-size: 1.875rem;
    }
}

/* Extra Large Ekranlar ve Üzeri (>1280px) */
@media (min-width: 1280px) {
    .gradient-box {
        margin-left: -15rem; /* xl:-ml-[15rem] */
    }
    .absolute-image-1 {
        top: 4.5rem; /* xl:top-[4.5rem] */
        right: -26.5rem; /* xl:-right-[26.5rem] */
    }
    .absolute-image-2 {
        left: -9rem; /* xl:-left-36 */
    }
}