@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin: 0px; /* Tüm elemanların varsayılan dış boşluklarını sıfırlar */
    padding: 0px; /* Tüm elemanların varsayılan iç boşluklarını sıfırlar */
    font-family: 'Poppins', sans-serif; /* Yazı tipi olarak Poppins kullanır */
}
.container{
    background-color: aquamarine; /* Konteynerin arka plan rengini aquamarine yapar */
}
.yukari{
    background-color: rgb(13, 116, 92); /* Yukarı butonunun arka plan rengini ayarlar */
    width: 45px; /* Butonun genişliğini ayarlar */
    border-radius: 20px; /* Köşeleri yuvarlatır */
    position: fixed; /* Ekran kaydırıldığında sabit kalmasını sağlar */
    bottom: 15px; /* Butonu ekranın altından 15px yukarıda konumlandırır */
    right: 15px; /* Butonu ekranın sağından 15px içeride konumlandırır */
}
.yukari a{
    display: block; /* Linki blok eleman yapar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    color: beige; /* Yazı rengini bej yapar */
    text-align: center; /* Yazıyı ortalar */
    padding-top: 5px; /* Üstten iç boşluk ekler */
    font-weight: bold; /* Yazıyı kalın yapar */
}
/*Menü*/

.menu{
    background-color: rgb(34, 34, 34); /* Menü arka plan rengini koyu gri yapar */
    list-style-type: none; /* Liste işaretlerini kaldırır */
    display: flex; /* Menü elemanlarını yatay hizalar */
    justify-content: end; /* Menü elemanlarını sağa yaslar */
}
.menu li a{
    text-decoration: none; /* Alt çizgiyi kaldırır */
    color: beige; /* Yazı rengini bej yapar */
    display: block; /* Linki blok eleman yapar */
    padding: 20px; /* İç boşluk ekler */
    transition: all 0.5s; /* Geçiş efektini 0.5 saniye yapar */
}
.menu li a:hover{
    color: rgb(54, 54, 54); /* Üzerine gelindiğinde yazı rengini koyu gri yapar */
    background-color: beige; /* Üzerine gelindiğinde arka plan rengini bej yapar */
}
.banner{
    background-image: url(img/bg2.jpg); /* Arka plan resmi ekler */
    background-repeat: no-repeat; /* Resmin tekrar etmesini engeller */
    background-position: top center; /* Resmi üst merkeze hizalar */
    background-size: cover; /* Resmi kapsayacak şekilde ölçeklendirir */
    padding: 150px 0px 150px 0px; /* Üst ve alt boşluk ekler */
    color: #424242; /* Yazı rengini gri yapar */
}
.banner h2{
    font-size: 72px; /* Başlık yazı boyutunu ayarlar */
    padding-left: 30px; /* Sol boşluk ekler */
}

.banner ul{
    display: flex; /* Liste elemanlarını yatay hizalar */
    justify-content: space-around; /* Elemanlar arasında eşit boşluk bırakır */
    list-style-type: none; /* Liste işaretlerini kaldırır */
    margin-left: 30px; /* Sol dış boşluk ekler */
    padding-top: 15px; /* Üstten iç boşluk ekler */
    width: 30%; /* Genişliği %30 yapar */
    border-top: 5px solid #424242; /* Üst kenarlık ekler */
}
.banner ul li img{
    width: 40px; /* Resim genişliğini ayarlar */
}

/*Hizemetler sayfası*/

.hizmet{
    background-color: rgb(140, 84, 46); /* Hizmet bölümünün arka plan rengini kahverengi yapar */
    color: beige; /* Yazı rengini bej yapar */
    display: flex; /* Elemanları esnek kutu düzenine alır */
    flex-direction: column; /* Elemanları dikey hizalar */
    align-items: center; /* Elemanları yatayda ortalar */
    padding: 100px 0px 100px 0px; /* Üst ve alt boşluk ekler */
    gap: 15px; /* Elemanlar arasında boşluk bırakır */
    text-align: center; /* Yazıyı ortalar */
}
.hizmet a{
    display: block; /* Linki blok eleman yapar */
    width: 175px; /* Genişliği ayarlar */
    background-color: rgb(13, 116, 92); /* Arka plan rengini yeşil yapar */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    color: beige; /* Yazı rengini bej yapar */
    padding: 15px 0px 15px 0px; /* İç boşluk ekler */
}
.hizmet h2{
    font-size: 35px; /* Başlık yazı boyutunu ayarlar */
}

/*Referanslar Sayfası*/

.kartlar{
    background-color: #dbdbdb; /* Kartlar bölümünün arka plan rengini açık gri yapar */
    display: flex; /* Elemanları yatay hizalar */
    justify-content: center; /* Elemanları ortalar */
    gap: 10px; /* Elemanlar arasında boşluk bırakır */
    padding: 50px 0px 50px 0px; /* Üst ve alt boşluk ekler */
}
.kart{
    width: 450px; /* Kart genişliğini ayarlar */
    position: relative; /* Göreceli konumlandırma yapar */
}
.kart img{
    width: 100%; /* Resmi kartın genişliğine uyarlar */
}
.indirim{
    font-size: 15px; /* Yazı boyutunu ayarlar */
    text-align: center; /* Yazıyı ortalar */
    color: beige; /* Yazı rengini bej yapar */
    width: 100px; /* Genişliği ayarlar */
    padding: 3px 0px 3px 0px; /* İç boşluk ekler */
    background-color: rgba(200, 41, 17, 0.685); /* Arka plan rengini yarı saydam kırmızı yapar */
}
.indirimSol{
    position: absolute; /* Mutlak konumlandırma yapar */
    top: 75px; /* Üstten 75px boşluk bırakır */
    right: 0px; /* Sağdan sıfır boşluk bırakır */
}
.indirimSag{
    position: absolute; /* Mutlak konumlandırma yapar */
    top: 200px; /* Üstten 200px boşluk bırakır */
    left: 0px; /* Soldan sıfır boşluk bırakır */
}
.yazi{
    text-align: right; /* Yazıyı sağa hizalar */
    padding-top: 10px; /* Üstten iç boşluk ekler */
    color: #424242; /* Yazı rengini gri yapar */
}
.baslik{
    font-size: 35px; /* Başlık yazı boyutunu ayarlar */
    color: #424242; /* Yazı rengini gri yapar */
}
.tel{
    font-size: 20px; /* Yazı boyutunu ayarlar */
    color: rgb(131, 18, 18); /* Yazı rengini kırmızı yapar */
}
.refbaslik{
    background-color: #dbdbdb; /* Arka plan rengini açık gri yapar */
    text-align: center; /* Yazıyı ortalar */
    font-size: 35px; /* Yazı boyutunu ayarlar */
    color: #424242; /* Yazı rengini gri yapar */
    padding: 25px 0px 0px 0px; /* Üstten iç boşluk ekler */  
}

/*İletişim Sayfası*/

.iletisim{
    background-color: beige; /* İletişim bölümünün arka plan rengini bej yapar */
    display: flex; /* Elemanları yatay hizalar */
    justify-content: center; /* Elemanları ortalar */
    padding: 15px 0px 15px 0px; /* Üst ve alt boşluk ekler */
    gap: 10px; /* Elemanlar arasında boşluk bırakır */
}
.iletbaslik{
    background-color: beige; /* Arka plan rengini bej yapar */
    text-align: center; /* Yazıyı ortalar */
    font-size: 35px; /* Yazı boyutunu ayarlar */
    color: #424242; /* Yazı rengini gri yapar */
    padding: 25px 0px 0px 0px; /* Üstten iç boşluk ekler */  
}
.kutu{
    width: 450px; /* Kutunun genişliğini ayarlar */
}
.form form{
    display: flex; /* Form elemanlarını esnek kutu düzenine alır */
    flex-direction: column; /* Elemanları dikey hizalar */
    gap: 15px; /* Elemanlar arasında boşluk bırakır */
}
#isim {
    height: 50px; /* Yüksekliği ayarlar */
    border: 1px solid black; /* Siyah kenarlık ekler */
}
#yorum{
    height: 180px; /* Yüksekliği ayarlar */
    border: 1px solid black; /* Siyah kenarlık ekler */
}
#gonder{
    background-color: rgb(36, 92, 47); /* Arka plan rengini yeşil yapar */
    color: beige; /* Yazı rengini bej yapar */
    height: 50px; /* Yüksekliği ayarlar */
    border: 1px solid black; /* Siyah kenarlık ekler */
}

/*Çalışmalar Sekmesi*/

.calismalar{
    display: flex; /* Elemanları yatay hizalar */
    justify-content: center; /* Elemanları ortalar */
    gap: 15px; /* Elemanlar arasında boşluk bırakır */
    padding: 30px 0px 30px 0px; /* Üst ve alt boşluk ekler */
}
.calisma h2{
    text-align: center; /* Yazıyı ortalar */
    font-size: 35px; /* Yazı boyutunu ayarlar */
    color: #424242; /* Yazı rengini gri yapar */
    padding: 25px 0px 0px 0px; /* Üstten iç boşluk ekler */
}
.calisma{
    background-color: #aeaeae; /* Arka plan rengini açık gri yapar */
}

.footer{
    padding: 15px 0px 15px 0px; /* Üst ve alt boşluk ekler */
    display: flex; /* Elemanları yatay hizalar */
    justify-content: space-around; /* Elemanlar arasında eşit boşluk bırakır */
    background-color: #424242; /* Arka plan rengini gri yapar */
    color: beige;   /* Yazı rengini bej yapar */
}

@media screen and (max-width:700px) {
    .menu,.kartlar,.iletisim,.calismalar{
        flex-direction: column; /* Elemanları dikey hizalar */
        align-items: center; /* Elemanları yatayda ortalar */
    }
    .menu li{
        width: 100%; /* Genişliği %100 yapar */
    }
    .menu li a{
        text-align: center; /* Yazıyı ortalar */
    }
    .banner,.hizmet{
        padding: 25px 0px 25px 0px; /* Üst ve alt boşluk ekler */
    }
    .banner ul{
        width: 80%;  /* Genişliği %80 yapar */
    }
}