*{
    box-sizing: border-box; /*genişliği ve yüksekliği sabit kılar*/
}
    body{
    margin:0;
    padding:0; /*soldan ve üsten boslukları sıfırlar */
        background-color:#4572c7;/* #dbdbdb; *arkaplan rengini gri yapar*/
        font-family: sans-serif; /*yazı stili*/
        
    }
#social{
    background-color: black; /*sosyal barın arka plan rengini siyah yapar*/
    color:white; /* yazının rengi*/
    height: 55px; /* sosyal barın yüksekliği */
    width: 100%; /*sosyal barın genişliği 100% tüm sayfayı kaplaması için*/
    position:sticky; /*sosyal barın sayfadaki yerine yani top:0 ile en üste yapışması sağlandı*/
    top:0;
    z-index:1; /*sayfada üzerine herhangi birşey gelmemesi en üste klaması için index sırası 1 verildi*/
    font-size: 18px; /* sosyal bardaki yazı boyutu*/
    text-align: right; /* sosyal bardaki yazılar ortalı*/
    padding: 15px; /*sosyal bardaki içeriğin üsten alttan sol ve sağdan boşluğu*/
}

font{
    
    float:left; /* sayfanın solundan gitsin*/
    letter-spacing:2px; /*harf arası boşluk*/
    
}
span{
    font-size: 12px;
    letter-spacing: 1px;
    
}
#social>i{
    margin-right: 15px;/* sağdan 15piksel boşluk*/
    
    
}
#social>i:hover{
    opacity: 0.6;/* saydamlığı ayarlar*/
}

#container{
    width: 80%; /* sayfanın %80 ni kaplasın*/
    margin:auto; /*sağdan ve soldan eşit boşluklar alıp ortalanmasını sağlar*/
    height: auto;/* yüksekliği otomatik olarak ayarladı gelen içeriğe göre boyut alacak*/
    
}
header{
    width: 100%; /* container'ın %100 ü kapla*/ 
    height: 250px;
    box-shadow: 0 2px 8px 2px rgba(20,23,28,.15);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    color:black;
    text-shadow: 1px 1px 2px white, 0 0 25px gray, 0 0 5px darkgray;
    font-family: 'Verdana',sans-serif;
    font-size:35px;
    background-color: #4572c7;
    margin-bottom: 5px;
}
#headerResim{
    width: 100%;
    height: 250px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    
}

#centered{
    position: absolute;
    top:50%;
    left:50%;
}
section{
    width: 100%;
    height: auto;
    overflow:auto; /* bulunduğu etiketin içine sığdırmak için nav 'ı section içine sığdırır*/
    background-color: #f1f1f1; /*SECTİON arkaplan rengi verir*/
    border-top-left-radius: 10px;/*kenarları ovalleştirir*/
    border-top-right-radius: 10px;
    box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/
    margin-top:15px; /* başlıkla banner ile arasına boşluk vermek için*/*
    
    
}
nav{
    width: 20% ;/* container %20 sini kaplasın*/
    float:left;/* bundan sonra gelecek içerik soluna gelsin*/
    margin-top:10px;/* üstten 10 piksel boşluk verir*/
    height: auto; /*yükseklik otomatik olarak ayarla*/
         
}

nav ul{
    width: auto;
    height: 100%;
    margin:0;
    padding: 0;
        
}
nav li a{ /*linkleri düzenlemek için kullanılır*/
    list-style-type: none;/*listelerdeki noktaları kaldırdık*/
    height: 50px; /*linklerin yüksekliğini ayarlar*/
    line-height: 50px;/*satır yüksekliği*/
    text-decoration: none;/*alt çizgiyi kaldırmak için*/
    color:black;/*yazının rengini siyah yapar*/
    border-bottom:1px solid #b4b4b4;/*alta çerçeve çizgisi eklemek için*/
    padding-left:20px ;/* sol taraftan boşluk verir*/
    display:block;
}
nav li a:hover{ /* link üzerinde geldiğimizde ayar vermek için*/
    color:white; /*link üzerine gelince yazı beyaz olur*/
    background-color:#4572c7;/* #adadad;/*link üzerine gelindiğinde arka plan grinin tonu olur*/
    
}
i{
    margin-right: 10px; /* ikonlar ile yazı arasında boşluk ayarlamak için*/
}
main{
    float:left; /* menünün sağına gelmesini sağlar*/
    height: auto;/*yükseklik otomatik olarak ayarlandı*/
    width:80%;/*menünün genişliği 20% olduğu için genişliği 80% olarak ayarlandı*/
    padding: 10px; /*içten boşluk verdik*/
    
}
.icerik{
    width: 46%;/* içerikler arasında boşluk olacağı için genişliği %46 olarak veriyoruz*/
    height:auto; /* yüksekliği içeriğe göre ayarlanması için otomatik yapılıyor*/
    display:inline-block; /*aynı satırda blok özellikleri*/
    margin-right: 15px;/* sağına gelecek içerik ile arasındaki boşulk*/
    border-radius: 10px;
      
     box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/
    margin-bottom: 15px; /* alttan 10 piksellik boşluk verir*/
    
    
}
.rsm{ /* resim ile ilgili özellikler*/
    width:100%;/* içinde bulunduğu etikete göre boyutunu 100% yapar. tüm sayfayı kaplamaz*/
    height: 350px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    transition: opacity 0.8s; /* opaklığın 8 saniyede geri gelmesini sağlar(geçiş özelliği) */
   
       
}
.rsm:hover{ /*resimlerin üzerine gelince opaklığı düşürür*/
    opacity: 0.6; 
}

h5{
    margin:10px;
    color:dimgray;
    
}
.iceriktext{
    margin:10px;
    color:dimgray;
    
}
.btnDevam:link{  /*DEVAM BUTUNO*/
    dsiplay:block;
    width: 150px;   /*butonun genişliğini 150 piksel yapar*/
    height: 45px;   /*butonun yüksekliğini 45 piksel yapar*/
    padding:10px 20px; /*buton içinde yazı için üstten ve soldan boşluk verir*/
    background-color: #0071ce;  /*butonun arkaplan rengini ayarlar*/
    color:white;  /*buton üzerindeki yazının rengini ayarlar*/
    text-decoration: none; /*yazının altındaki çizgiyi kaldırı*/
    margin:15px; /*sol sağ üst alt kısımlardan 15 piksel boşluk bırakır*/
    border-radius: 10px; /*butonun kenarlarını yuvarlatır*/
    
    
}
.btnDevam:hover{  /*butonun üzerindeki durumu*/
    opacity:0.8; /*opaklığını azaltır*/
}

footer{
    width:100%;
    height: 75px;
    background-color: black;
    color:white;
     line-height: 75px;
    
    
    
    text-align: center;
     box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/
   
    
}

/*  *****HAKKIMIZDA SAYFASI****** İÇİN GEREKLİ STİLLER* (5. video)*/

h1{
    text-align: center;
    background-color: #4572c7;
    color:white;
    height: 50px;
    line-height:50px;
    margin:0 10 px;
    border-radius: 10px;
     box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/
}
#hakkimizdaRSM{
    width:350px; /*resmin genişliğini ayarlar*/
    height: 300px;/*resmin yüksekliğini ayarlar*/
    float: left;  /* resmi içeriğin sol tarafına yerleştirir*/
    border-radius: 10px;
    margin:25px; /*resmin etrafında 25 piksellik boşluk ayarlar*/
    margin-bottom: 10px; /*resmin altından 10 piksellik boşluk ayarlar*/
    transition: opacity 0.8s; /*resmin üzerine gelindiğinde opacity özelliğine geçiş özelliği verir.0,8 saniye içinde opaklık eski haline gelir*/
    
    
}
#hakkimizdaRSM:hover:{
    opacity: 0.6; /*resmin üzerine gelindiğinde opaklığını düşürür*/
}
.hakYazi{
    margin-right:15px; /* sağ taraftan dış boşluk ayarlar*/
    font-size: 15px;
    font-family: Cambria;
    text-indent: 40px;/*satır başı yapmak için kullanılır.İç girinti vermek için kullanılır;*/
    color:#494949; /* yazı rengi*/
    
}

/* *****ALANLAR sayfası**** (video 6)*/


.alan{ /* alanlar sayfamızdaki div'in özellikleri*/
    width:30%; /* div'in genişliğini %30 olarak ayarlar. Yan yana kutular konulacağı ve aralarda boşuk olması için değer 31 olarak verildi*/
    height:350px; /* yükseklik 300 piksel olarak ayarlandı*/
    background-color: white;/*arkaplan rengi beyaz*/
    float:left;/*soldan akışı sağlar*/
    margin: 10px;/*tüm kenarlardan dış boşluğu 10piksel olarak ayarlar*/
    border-radius: 5px;/*kenarları yuvarlatır*/
     box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/
}
  .alan2{ /* alanlar sayfamızdaki div'in özellikleri*/
    width:30%; /* div'in genişliğini %30 olarak ayarlar. Yan yana kutular konulacağı ve aralarda boşuk olması için değer 31 olarak verildi*/
    height:350px; /* yükseklik 300 piksel olarak ayarlandı*/
    background-color: white;/*arkaplan rengi beyaz*/
    float:left;/*soldan akışı sağlar*/
    margin: 10px;/*tüm kenarlardan dış boşluğu 10piksel olarak ayarlar*/
    border-radius: 5px;/*kenarları yuvarlatır*/
     box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/  
    
}
.alanResim{
    width:100%;
    height: 200px;
    border-top-left-radius: 5px; /*üst sol köşeyi yuvarlar*/
    border-top-right-radius: 5px; /*üst sağ köşeyi yuvarlar*/
    opacity:1;
    transition: 0.8s;
}
.alanResim:hover{
    
    opacity: 0.6;
}
.alanBaslik{
    font-size: 20px;
    display: inline-block;
    margin-top:0; /* yukarıdan resme yapışması için sıfır verildi*/
    color:black;
    text-align: center;
    height: 45px;
    line-height: 45px;
    background-color: #f1f1f1;
    width:100%;
    margin-top: -5px;
   text-shadow: 1px 1px 2px black, 0 0 25px gray, 0 0 5px darkgray; /*yazıya gölge verir*/
    /*text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; yazının rengini beyaz verip bu gölgeyi uygularsanız yazıya kenarlık ekler*/
    
    
}
.alanBaslik:hover{
    letter-spacing: 2px;
   /* font-size:30px;*/
}

.alanDetay{
    text-align:center;/* yazıyı ortalar*/
    
}

/* ürünler sayfası*/

.urunResim
{
    width:85%;
     margin:10px;
    object-fit: cover;
     box-shadow: 0 2px 8px 2px rgba(20,23,28,.15);
}
/*  GALERİ SAYFASI video6 */

.galResim{
   width: 29%; /* bir satıra 4 tane sığdırmak için %22 değer verildi 22*4=88 kalan kısım boşluklar için */
    height: 200px; /* yükseklik değeri*/
    border-radius: 5px; /* kenar yuvarlatması için*/
    opacity:0.8; /* başlangıçta opaklığı düşük olacak üzerine gelince normal olucak*/
    box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/
    margin:10px;
    transition:all 0.6s;/* opaklığın 6 saniye içinde geçişli olmasını sağlar*/
    object-fit: cover; /* resim küçüldüğünde oranını korumayı sağlar*/
    
    
    
}
.galResim:hover{
     opacity: 1;
    border:5px solid white; /* resmin üzerine geldiğinde 5piksel kalınlığında beyaz renkte kenarlık ekler*/
    cursor: pointer; /*üzerine gelindiğinde imlecin şeklini deiştirir(ok şeklinden el şekline çevirir)*/
    
}
.link:link{
    text-decoration: none;/* link üzerindeki alt çizgiyi kaldırır*/
}


/*  İLETİŞİM SAYFASI   video8  */

iframe{
    width:%98;
    height:350px;
    border-radius:10px;
    margin-top:10px;
    box-shadow: 0 2px 8px 2px rgba(20,23,28,.15); /*gölge verir*/
    margin-left:10px;
    
    
}

.section1{
    width:98%;
    height: auto;
    margin:auto;
    margin-top:10px;
    background-color: #f2f2f2;
    padding:10px;
    
    
}
.form{
    width:49%;
    float:left;
    height:380px;
    border:1px solid #d8d8d8;
    padding:10px;
    margin-right:10px;
    
}

.col25{
    width:25%;
    float:left;
    margin-top:6px;
}
.col75{
    width:75%;
    float:left;
    margin-top:6px;
}
label{
    padding:12px 12px 12px 0;
    display:inline-block;
}

input[type=text],textarea{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:4px;
    
}

.row:after{
    content:"";
    clear:both;
    display:block;
    
}

input[type=submit]{
    background-color:#4CAF50;
    color:white;
    padding:12px 20px;
    border:none;
    border-radius:4px;
    float:right;
	
    
}

.adres{
    width:49%;
    float:left;
    height:380px;
    border:1px solid #d8d8d8;
    padding:10px;
	alignment-adjust:central;
	
    
}
h2{
    text-align: center;
    
}
.span1{
    display:block; /* herbir spanın ayrı bir satırda olmasını sağlar*/
    font-family:Calibri;
    margin:10px;
    letter-spacing: 1.5px;/* harf aralığını ayarlar*/
    text-align: center;
    font-size:16px;
    
    
}