/* öne çıkan atölyeler */

  .oa_govde {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 100%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 377px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 377 / 447;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_ahsap_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  .oa_govde_1 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 100%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 377px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 377 / 447;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_ilkokul_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  .oa_govde_2 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 100%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 377px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 377 / 447;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_ortaokul_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  .oa_govde_3 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 100%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 377px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 377 / 447;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_lise_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  .oa_govde_4 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 100%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 377px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 377 / 447;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_egitici_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  
  /* Başlık metni: Yüzde değerlerle konumlandırılır */
  .oa_baslik {
    position: absolute;
    top: 78%;                         /* Arkaplan yüksekliğinin %20'si kadar aşağı */
    left:120px;                        /* Yatayda tam ortalama */
    transform: translateX(-50%);      /* Metni tam ortalamak için */
    color: #000;                      /* Metin rengi */
    font-size: 1rem;                  /* Responsive font boyutu (isteğe göre değiştirilebilir) */
    text-align: center;
    margin: 0;                        /* Varsayılan başlık boşluklarını sıfırlamak için */
    z-index: 1;                       /* Metnin arkaplanda kalmaması için */
    font: normal 2.1rem/1.9rem 'sitefont';
  }
  
  /* Buton: Yüzde değerlerle konumlandırılır */

  .oa_buttonx {
    position: absolute;
    top:355px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
    left:329px;
    transform: translateX(-50%);
    z-index: 1; 
  } 
  
  /* Daha küçük ekranlar için örnek media query */
  @media (max-width: 480px) {
    
    
  }


/* başla */
.oa_button {
    /* Buton sabit boyut */
    width: 88px;
    height: 88px;

    /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    cursor: pointer;
    overflow: hidden;
  }
  /* Alt katman: turuncu arka plan */
  .oa_button::before,
  .oa_button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .oa_button::before {
    background-image: url('../img/bt_turuncu.png');
    z-index: 1;
  }
  /* Üst katman: siyah arka plan, varsayılan olarak görünmez */
  .oa_button::after {
    background-image: url('../img/bt_siyah.png');
    opacity: 0;
    transition: opacity 0.3s ease; /* Hover animasyonu */
    z-index: 2;
  }
  /* Hover durumunda siyah katman görünür */
  .oa_button:hover::after {
    opacity: 1;
  }
  /* Metin katmanı */
  .button-text {
    position: relative;
    z-index: 3;           /* Arka plan katmanlarının üstünde kalması için */
    color: #fff;          /* Yazı rengi (tercihinize göre değiştirebilirsiniz) */
    font-size: 1rem;      /* Yazı boyutu */
    font-weight: bold;    /* Kalın yazı */
    text-align: center;
    font: normal 1.6rem/1.8rem 'sitefont6';
  }

  @media (max-width: 1520px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:325px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:300px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }
  @media (max-width: 1541px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:325px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:302px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1460px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:310px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:285px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1432px) {
    .oa_baslik {
      position: absolute;
      top: 78%;                         /* Arkaplan yüksekliğinin %20'si kadar aşağı */
      left:120px;                        /* Yatayda tam ortalama */
      transform: translateX(-50%);      /* Metni tam ortalamak için */
      color: #000;                      /* Metin rengi */
      font-size: 1rem;                  /* Responsive font boyutu (isteğe göre değiştirilebilir) */
      text-align: center;
      margin: 0;                        /* Varsayılan başlık boşluklarını sıfırlamak için */
      z-index: 1;                       /* Metnin arkaplanda kalmaması için */
      font: normal 2rem/1.9rem 'sitefont';
      width: 250px !important;
    }
    /*  */
    .oa_buttonx {
      position: absolute;
      top:290px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:280px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1381px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:275px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:265px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1284px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:275px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:260px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1272px) {

    .oa_button {
      /* Buton sabit boyut */
      width: 75px;
      height: 75px;
  
      /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
      display: flex;
      justify-content: center;
      align-items: center;
  
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }

  }

  @media (max-width: 1252px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:272px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:258px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1240px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:272px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:245px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1238px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:270px;                         
      left:258px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1235px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:268px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:258px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  
  @media (max-width: 1233px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:260px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:255px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1228px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:263px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:255px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  

  @media (max-width: 1210px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:262px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:245px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1200px) {
    .oa_button {
      /* Buton sabit boyut */
      width: 70px;
      height: 70px;
  
      /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
      display: flex;
      justify-content: center;
      align-items: center;
  
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:266px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:246px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1178px) {

    .oa_button {
      /* Buton sabit boyut */
      width: 88px;
      height: 88px;
  
      /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
      display: flex;
      justify-content: center;
      align-items: center;
  
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:340px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:318px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 1154px) {
    .oa_buttonx {
      position: absolute;
      top:330px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:312px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 1145px) {
    .oa_buttonx {
      position: absolute;
      top:328px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:310px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 1125px) {
    .oa_buttonx {
      position: absolute;
      top:320px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:290px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 1107px) {
    .oa_buttonx {
      position: absolute;
      top:310px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:296px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 1086px) {
    .oa_buttonx {
      position: absolute;
      top:300px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:280px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 1056px) {
    .oa_buttonx {
      position: absolute;
      top:290px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:280px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }
  @media (max-width: 1039px) {
    .oa_buttonx {
      position: absolute;
      top:290px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:270px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 1026px) {
    .oa_buttonx {
      position: absolute;
      top:280px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:268px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 1000px) {

    .oa_button {
      /* Buton sabit boyut */
      width: 84px;
      height: 84px;
  
      /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
      display: flex;
      justify-content: center;
      align-items: center;
  
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }

    .oa_buttonx {
      position: absolute;
      top:360px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:325px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 957px) {
    .oa_buttonx {
      position: absolute;
      top:360px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:325px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 937px) {
    .oa_buttonx {
      position: absolute;
      top:360px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:325px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  

  @media (max-width: 900px) {

  

    .oa_buttonx {
      position: absolute;
      top:360px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:325px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

 
 

 

  

  @media (max-width: 782px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:340px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:312px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 772px) {
    
    /*  */
    .oa_buttonx {
      position: absolute;
      top:328px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:305px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }
  @media (max-width: 767px) {
    /*  */
    .oa_buttonx {
      position: absolute;
      top:335px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:300px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 753px) {
    /*  */
    .oa_buttonx {
      position: absolute;
      top:328px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:300px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 753px) {
    /*  */
    .oa_buttonx {
      position: absolute;
      top:318px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:295px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 721px) {
    /*  */
    .oa_buttonx {
      position: absolute;
      top:300px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:285px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 699px) {
    /*  */
    .oa_buttonx {
      position: absolute;
      top:290px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:265px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 672px) {
    /*  */
    .oa_buttonx {
      position: absolute;
      top:280px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:265px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 657px) {
    /*  */
    .oa_buttonx {
      position: absolute;
      top:275px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:260px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 645px) {

    .oa_button {
      /* Buton sabit boyut */
      width: 75px;
      height: 75px;
  
      /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
      display: flex;
      justify-content: center;
      align-items: center;
  
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    /*  */
    .oa_buttonx {
      position: absolute;
      top:275px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:250px;
      transform: translateX(-50%);
      z-index: 1; 
    } 

  }

  @media (max-width: 632px) {
    .oa_buttonx {
      position: absolute;
      top:265px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:248px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 617px) {
    .oa_buttonx {
      position: absolute;
      top:260px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:240px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 607px) {
    .oa_buttonx {
      position: absolute;
      top:250px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:238px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 594px) {

    .oa_button {
      /* Buton sabit boyut */
      width: 65px;
      height: 65px;
  
      /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
      display: flex;
      justify-content: center;
      align-items: center;
  
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    .oa_buttonx {
      position: absolute;
      top:250px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:238px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  @media (max-width: 578px) {
    .oa_buttonx {
      position: absolute;
      top:245px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:228px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  }

  
  @media (max-width: 567px) {
    .oa_button {
      /* Buton sabit boyut */
      width: 75px;
      height: 75px;
  
      /* İçerik (metin) tam ortada olsun diye flex kullanıyoruz */
      display: flex;
      justify-content: center;
      align-items: center;
  
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }

    .oa_buttonx {
      position: absolute;
      top:275px;                         /* Arkaplan yüksekliğinin %60'ı kadar aşağı */
      left:258px;
      transform: translateX(-50%);
      z-index: 1; 
    } 
  
  /* */
  .oa_govde {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 90%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 300px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 300 / 356;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_ahsap_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  } 

  .oa_govde_1 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 90%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 300px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 300 / 356;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_ilkokul_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  .oa_govde_2 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 90%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 300px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 300 / 356;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_ortaokul_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  .oa_govde_3 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 90%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 300px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 300 / 356;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_lise_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }
  .oa_govde_4 {
    position: relative;               /* Üzerine eleman yerleştirebilmek için */
    width: 90%;                      /* Genişliği, üst kapsayıcının tamamı */
    max-width: 300px;                 /* Görselin orijinal genişliği ya da istediğiniz bir değer */
    margin: 0 auto;                   /* Ortalamak için */
    aspect-ratio: 300 / 356;          /* Resmin en-boy oranına göre (örnek değer) */
    background: url("../img/oa_egitici_new_300.png") no-repeat center center;
    background-size: contain;         /* Resmi kapsayıcıya sığdırır (cover da kullanılabilir) */
  }

  
  /*  */
  /* .oa_buttonx {
    position: absolute;
    top:280px;                         
    left:258px;
    transform: translateX(-50%);
    z-index: 1; 
  } 

  .oa_button {
    width: 75px;
    height: 75px;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    cursor: pointer;
    overflow: hidden;
  } */



}