* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
    position: relative; /* Butonun pozisyonu için gerekli */

}

#top-con {
    background-image: url(gokhan1.jpg);
    background-size: cover; /* Resmi container'a sığdırır, taşan kısımları kırpar */
    background-position: center; /* Resmi dikey ve yatay olarak ortalar */
    background-repeat: no-repeat; /* Resmin tekrar etmesini engeller */
    height: 100vh; /* Container'ın yüksekliğini tam ekran yapar */
    width: 100%; /* Container'ın genişliğini tam ekran yapar */
    display: flex; /* Flexbox ile hizalama yapacağız */
    flex-direction: column; /* İçeriği dikey olarak hizala */
    justify-content: center; /* Yatayda ortalama */
    align-items: center; /* Dikeyde ortalama */
    text-align: center;
    position: relative;
    flex-wrap: flex;
}


/* Overlay katmanını ekleyin */
#top-con::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Karartma efekti */
    z-index: 1; /* Overlay katmanı yazıların altına gelir */
}

/* Yazıyı ortalamak için */
#top-con h1 {
    position: relative;
    z-index: 2; /* Yazıyı overlay katmanının üstüne yerleştirir */
    font-size: 70px; /* Yazı boyutu */
    color: aliceblue; /* Yazı rengi */
}

/* Butonları yan yana dizmek için Flexbox kullanıyoruz */
#top-con .button-container {
    display: flex; /* Flexbox düzenini aktif et */
    justify-content: center; /* Butonları yatayda ortala */
    gap: 20px; /* Butonlar arasında boşluk bırak */
    z-index: 2;
}

/* Buton stilini ayarlayalım */
#top-con button {
    padding: 15px 30px; /* Buton boyutları */
    font-size: 15px; /* Buton yazı boyutu */
    color: white; /* Buton yazı rengi */
    background-color: rgba(0, 0, 0, 0.562);
    border: 2px solid white; /* Buton kenarını beyaz yap */
    border-radius: 5px; /* Kenarları yuvarlak yapar */
    cursor: pointer; /* Butona tıklanabilir işareti verir */
}

#top-con button:hover {
    background-color: rgba(255, 255, 255, 0.466); /* Hover efekti */
}

.card {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 20px;

}

.card a {
    border: none;
    background-color: rgb(124, 124, 124);
    color: aliceblue;
}

.card-img-top {
    width: 100%; /* Resmin genişliğini %100 yaparak kartın genişliğine uymasını sağlarız */
    height: 300px; /* Resmin yüksekliğini sabitleriz */
    object-fit: cover; /* Resmin kırpılmasını sağlar, böylece en iyi şekilde görünür */
}

#mid-con h1 {
    text-align: center;
    color: gray;
    font-size: 3rem; /* Başlık boyutunu büyütme */

}

#aboutme {
    border: 1px solid grey;
    border-left: none;
    border-right: none;

}

#aboutme .row {
    justify-content: center; /* Yatayda ortalar */
    align-items: center; /* Dikeyde ortalar */
    text-align: center;
  }
  




#contact h1 {
    text-align: center;
    color: gray;
    font-size: 3rem; /* Başlık boyutunu büyütme */

}

#contact * {
    border: none;
}

#contact img {
    max-width: 4%;
    background-color: aliceblue;
}



.btn-ana-sayfa {
    position: fixed; /* Sayfada sabit kalması için */
    bottom: 60px; /* Üstten boşluk */
    right: 60px; /* Soldan boşluk */
    z-index: 1000; /* Diğer içeriklerin üzerinde olması için */
    padding: 10px 20px; /* Butonun iç boşluğu */
    font-size: 1rem; /* Yazı boyutu */
    border-radius: 25px; /* Yuvarlak köşeler */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Hafif gölge */
    transition: background-color 0.3s ease; /* Renk geçiş efekti */
}

.btn-ana-sayfa:hover {
    background-color: #31cf22; /* Hover durumunda renk değişimi */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Hover durumunda gölge artışı */
}

.btn-ana-sayfa2 {
    position: fixed; /* Sayfada sabit kalması için */
    bottom: 110px; /* Üstten boşluk */
    right: 60px; /* Soldan boşluk */
    z-index: 1000; /* Diğer içeriklerin üzerinde olması için */
    padding: 10px 20px; /* Butonun iç boşluğu */
    font-size: 1rem; /* Yazı boyutu */
    border-radius: 25px; /* Yuvarlak köşeler */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Hafif gölge */
    transition: background-color 0.3s ease; /* Renk geçiş efekti */
}

.btn-ana-sayfa:hover {
    background-color: #31cf22; /* Hover durumunda renk değişimi */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Hover durumunda gölge artışı */
}

.btn-ana-sayfa3 {
    position: fixed; /* Sayfada sabit kalması için */
    bottom: 160px; /* Üstten boşluk */
    right: 60px; /* Soldan boşluk */
    z-index: 1000; /* Diğer içeriklerin üzerinde olması için */
    padding: 10px 20px; /* Butonun iç boşluğu */
    font-size: 1rem; /* Yazı boyutu */
    border-radius: 25px; /* Yuvarlak köşeler */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Hafif gölge */
    transition: background-color 0.3s ease; /* Renk geçiş efekti */
}

.btn-ana-sayfa:hover {
    background-color: #31cf22; /* Hover durumunda renk değişimi */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Hover durumunda gölge artışı */
}

.btn-ana-sayfa img {
    width: 30px; 
    vertical-align: middle; 
    margin-right: 10px;
}

.btn-ana-sayfa2 img {
    width: 30px; 
    vertical-align: middle; 
    margin-right: 10px;
}

.btn-ana-sayfa3 img {
    width: 30px; 
    vertical-align: middle; 
    margin-right: 10px;
}




/* Mobil cihazlar için (576px'den küçük ekranlar) */
@media (max-width: 575.98px) {

    * {
        overflow-x: hidden;
    }

    .button-container {
        flex-direction: column; /* Butonları dikey olarak hizala */
        margin-top: 20px;
    }

    #aboutme .row {
        flex-direction: column; /* İçerikleri dikey olarak hizala */
    }

    .card {
        right: 25px;
    }
    
    .btn-ana-sayfa {
        right: 2px; /* Soldan boşluk */
        top: 0px;
        background-color: transparent !important; /* Arka plan rengini şeffaf yap */
        border: none !important; /* Kenarlığı kaldır */
        padding: 0 !important; /* Padding'i sıfırla */
        box-shadow: none !important; /* Gölgeyi kaldır */

    }
 
    .btn-ana-sayfa2 {
        right: 2px; /* Soldan boşluk */
        top: 40px;
        background-color: transparent !important; /* Arka plan rengini şeffaf yap */
        border: none !important; /* Kenarlığı kaldır */
        padding: 0 !important; /* Padding'i sıfırla */
        box-shadow: none !important; /* Gölgeyi kaldır */
    }
    .btn-ana-sayfa3 {
        right: 2px; /* Soldan boşluk */
        top: 80px;
        background-color: transparent !important; /* Arka plan rengini şeffaf yap */
        border: none !important; /* Kenarlığı kaldır */
        padding: 0 !important; /* Padding'i sıfırla */
        box-shadow: none !important; /* Gölgeyi kaldır */
    }

    .btn-ana-sayfa img {
        width: 50px; /* Resmi %100 genişlik yap */
        margin-right: 0px;
        margin-top: 10px;
    }
    .btn-ana-sayfa2 img {
        width: 50px; /* Resmi %100 genişlik yap */
        margin-right: 0px;
        margin-top: 30px;
    }
    .btn-ana-sayfa3 img {
        width: 50px; /* Resmi %100 genişlik yap */
        margin-right: 0px;
        margin-top: 50px;
    }
    .randevu-text {
        display: none; /* Yazıyı gizle */
    }
    
    
  }
  
  /* Tablet cihazlar için (576px - 991.98px arası) */
  @media (min-width: 576px) and (max-width: 991.98px) {

  }