/* Functions */
.xl-container {
  /* width: 100%; */
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}
.custom-xl-col{
  position: relative;
  width: 100%;
  padding-right: var(--gutter-x);
  padding-left: var(--gutter-x);
}
@media (min-width: 1440px) {
  .xl-container {
      max-width: 1450px;
      padding: 0 15px;
      margin: 0 auto;
  }
  .custom-xl-col{
    flex: 0 0 87.333333%;
    max-width: 87.333333%;
}
}

@media (max-width:1440px) {
  .woman-image::after {
      bottom: 30px;
      right: -65%;
  }
  #home-packages .packages-box-area{
      gap:5px;
  }
  #home-packages .packages-box-area .packages-box{
      font-size:14px;
  }
}

@media (max-width:991px) {
  #home-doctors .doctor-image{
    margin-bottom: 25px;
  }
  #home-doctors .doctor-image::before{
    top: 0px;
  }
  #home-doctors .doctors-row{
      margin-top:35px;
  }
  #home-cerrahi-tv .cerrahi-tv-left-content{
    margin-bottom: 25px;
  }
  #body-form-area{
    margin-bottom: 26px;
  }
  #home-packages .packages-image {
      position: relative;
      right: 0;
      margin-right: 0;
      border-radius: 50px;
      overflow: hidden;
      bottom: 37px;
  }
}

@media (max-width:768px) {
  #home-packages .packages-box-area{
    grid-template-columns: repeat(1, 1fr);
  }
  #home-accordion-area .accordion-list .accordion-box .box-front .box-title{
    font-size: 24px;
  }
}

@media (max-width: 768px) {
    /* Liste kapsayıcısını dikey yap */
    #home-accordion-area .accordion-list {
        display: flex;
        flex-direction: column;
        margin:0 30px;
        gap: 30px; /* Her doktor/hizmet bloğu arasındaki mesafe */
    }
    
    #home-banner .banner-content .banner-title{
        margin-bottom:10px;
    }

    /* Bütün kutuları "active" moduna zorla */
    #home-accordion-area .accordion-list .accordion-box {
        width: 100% !important;
        height: auto !important;
        background: #e6e8ef;
        padding: 20px;
        position: relative;
        display: block; /* Flex-auto'yu devre dışı bırak */
    }

    /* Ön taraftaki dikey yazıyı mobilde gizle (çünkü içerik zaten açık) */
    #home-accordion-area .accordion-list .accordion-box .box-front {
        display: none !important;
    }

    /* İçeriği (Resim ve Yazı) görünür yap */
    #home-accordion-area .accordion-list .accordion-box .box-back {
        width: 100% !important;
        opacity: 1 !important;
        display: grid !important;
        grid-template-columns: 1fr; /* Mobilde resim üstte yazı altta */
        gap: 20px;
    }

    /* Resimlerin mobildeki boyutu */
    #home-accordion-area .accordion-list .accordion-box .box-back .box-img-wrapper img {
        height: 300px;
        width: 100%;
        border-radius: 20px;
    }

    /* Metin alanı düzenlemeleri */
    #home-accordion-area .accordion-list .accordion-box .box-back .box-text-area {
        padding: 10px 0;
        text-align: center;
        align-items: center;
    }

    #home-accordion-area .accordion-list .accordion-box .box-back .box-text-area .box-title {
        font-size: 26px;
        margin-bottom: 10px;
        color: #333; /* Okunabilirlik için renk */
    }

    #home-accordion-area .accordion-list .accordion-box .box-back .box-text-area .box-link {
        width: 100%; /* Mobilde butonu tam genişlik yap */
        max-width: 280px;
    }
}

@media (max-width:575px) {
  body .section-title{
    font-size: 28px;
    text-align: center;
  }
  header .logo{
      width:225px;
  }
  header .header-contacts{
      font-size:16px;
  }
  body .ba-link-container{
    flex-direction: column;
    gap: 10px!important;
  }
  #home-process-area .section-box {
      flex-direction: column;
  }
  #home-process-area .section-title{
    text-align: center;
  }
  #home-doctors .doctor-image::before{
    height: 90%;
  }
  #home-before-after .ba-tab-nav .tab-nav-item {
    width: 33%;
    flex: 0 0 33%;
    font-size: 16px;
    border-radius: 6px;
  }
  #home-banner .banner-doctor-text {
      left: 10%;
  }
  #home-banner .banner-doctor-text .branch  {
      font-size: 24px;
  }
  #home-banner .banner-doctor-text .name{
      font-size: 20px;
  }
  #home-banner .input-area {
      margin-bottom: 10px;
  }
}