* {
    box-sizing: border-box;
}

/*Body Bölümü Başlangıç*/
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif, serif;
}

/*Body Bölümü Bitiş*/

/*Grid Bölümü Başlangıç*/
#grid-container {
    max-width: 1200px;
    min-height: 500px;
    margin: auto;
    /*background-color: rgb(26, 219, 233);*/
    margin: 0 auto 0;
    border: 0 solid 2px;
    border-radius: 3px;
    display: grid;
    grid-gap: 2px;
    /*DİV'ler Arası Boşluk*/
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 50px 120px 60px 300px 200px 200px 200px 200px 200px 200px 200px;
    grid-template-areas:
        "a a a a a"
        /* (1) topbar */
        "b b b b b"
        /* (2) header */
        "c c c c c"
        /* (3) nav */
        "d e e e e"
        /* (4) aside ve section */
        "d f f f f"
        /* (5) aside ve article */
        "g g g g n"
        /* (6) main-1 ve kategoriler */
        "h h h h n"
        /* (7) main-2 ve kategoriler */
        "k k k k n"
        /* (8) main-3 ve kategoriler */
        "l l l l n"
        /* (9) main-4 ve kategoriler */
        "m m m m n"
        /* (10) main-4 ve kategoriler */
        "p p p p p"
        /* (11) footer */
    ;
}

/*Grid Bölümü Bitiş*/

/*Topbar Bölümü Başlangıç*/
.topbar {
    grid-area: a;
    max-width: 1200px;
    height: 50px;
    border: 3px dashed black;
    background-color: white;
    display: flex;
    justify-content: space-around;
    padding: 2px;
}

/*Topbar Bölümü Bitiş*/
#sosyal-medya {
    width: 30%;
    height: 40px;
    border: 2px dashed black;
    background-color: white;
}

#iletisim {
    width: 30%;
    height: 40px;
    border: 2px dashed black;
    background-color: white;
}

#search {
    width: 30%;
    height: 40px;
    border: 2px dashed black;
    background-color: white;
}

/*Header Bölümü Başlangıç*/
header {
    grid-area: b;
    max-width: 1200px;
    height: 120px;
    border: 3px dashed black;
    background-color: white;
    display: flex;
    justify-content: space-between;
    padding: 2px;
}

/*Header Bölümü Bitiş*/

#logo {
    width: 10%;
    height: 100px;
    border: 2px dashed black;
    background-color: white;
    margin: 5px;
}

#islamder {
    width: 90%;
    height: 100px;
    border: 2px dashed black;
    background-color: white;
    margin: 5px;
    text-align: center;
    /*Yazıyı Ortamala (Bu işlem Kapsayan DİV'de Gerçekleşir)*/
}

/*Nav Bölümü Başlangıç*/
nav {
    grid-area: c;
    max-width: 1200px;
    height: 60px;
    border: 3px dashed black;
    background-color: #20d2df;
    display: flex;
    justify-content: space-around; /*Tüm Listeleri Ortaya Düzeyde Dağıtmaktadır.*/
    
}

/*Nav Bölümü Bitiş*/
ul.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
   /* background-color: #20d2df;*/
    /*Liste Arkaplan Rengi Kısmıdır, Çok Lazım Olmadıkça Kullanılmamalıdır.*/
    /*Ana Arkaplan Rengi*/
    justify-content: center;
    /*Menüleri Ortalama ve Düzenleme*/
    overflow: hidden;
    border: 1px solid #bbbbbb;
    border-radius: 0%;
    list-style-type: none;
    /*İşaretleri Silme Attirübutesi*/
    
}

ul.navbar li {
    float: left;
    background-color: #20d2df;
    /*Düğme Arkaplan Rengi*/
    border-right: 1px solid black;
}

ul.navbar li:last-child {
  border-right: none;
}

ul.navbar li a {
    display: block;
    text-decoration: none;
    /*Yazı Rengi*/
    color: white;
    text-align: center;
    padding: 14px 16px; /*Tüm Linklerin Arkaplan Paddinglerini Değiştirmektedir.*/
    font-weight: bold; 
}

ul.navbar li a:hover {
    background-color: black;
}

ul.navbar li a.active {
    background-color: #af2525;
}

/*Aside Bölümü Başlangıç*/
aside {
    grid-area: d;
    max-width: 1100px;
    min-height: 350px;
    border: 3px dashed black;
    background-color: white;
}

/*Aside Bölümü Bitiş*/

/*Section Bölümü Başlangıç*/
section {
    grid-area: e;
    max-width: 960px;
    min-height: 300px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border: 3px dashed black;
    background-image: linear-gradient(to right, grid, white);
    /*Renk Geçiş Özelliği Eklemek*/
    /* position: relative;*/
    /* overflow: scroll;
    /*flex-direction: column;*/
    display: inline-block;
    /*box-shadow: 1px 1px 1px gray;*/
    /*DİV'e (kutuya) Derinlik Verme*/
    /*overflow: scroll;*/
}

section>h3 {
    /* position: absolute;*/
    float: left;
    font-family: sans-serif;
    padding-bottom: 5px;
    margin-top: 1px;
    margin-bottom: 0px;
    color: rgb(148, 42, 42);
    border: 1px dashed black;
    /*Bu Blok Elementi Olan Bir (width: 100px;) Elementi Sınırlamak Demektir.*/
    font-size: 15px;
    /*width: fit-content;
    /*Blok Başlığı İnline Yaptı*/
    /*  top: 5px;
    left: 5px;
    z-index: 1;*/

}

section>p img {
    /* position: absolute;*/
    /*Resmi Yazıyla Birleştirme Parametresi / Width Değeri İle Birlikte Verilmelidir.*/
    float: left;
    margin: 2px 2px 2px 2px;
    /*Resim Çevresi Boşluk*/
    border-radius: 8px;
    max-width: 150px;
    border: 1px dashed black;
    /*    top: 35px;
    left: 5px;
    z-index: 1;*/
}

section>p {
    /*position: absolute;*/
    max-width: 960px;
    max-height: 300px;
    float: left;
    font-family: sans-serif;
    padding-left: 5px;
    padding-right: 5px;
    text-align: justify;
    /*İki Yana Yaslama*/
    text-indent: 2px;
    /*İlk Satır Girişi*/
    margin-top: 0px;
    color: black;
    border: 1px dashed black;
    /*  top: 5px;
    left: 220px;
    z-index: 1;*/
    /* overflow: scroll;*/
    column-count: 2;
    /*Metni Sütun Sayısına Ekleme / Ayrıca İlgili Konu için 168-169 Sayfaları*/
    column-gap: 15px;
    /* Sütunlar Arası Boşluk*/
    /*column-rule: 1px dashed black;*/
}

/*Section Bölümü Bitiş*/

/*Article Bölümü Başlangıç*/

article {
    grid-area: f;
    max-width: 960px;
    max-height: 300px;
    padding: 5px;
    border: 3px dashed black;
    background-image: linear-gradient(to right, grid, white);
    display: flex;
    margin-top: 2px;
    row-gap: 5px;
    justify-content: space-around;
}

#kutu-1 {
    width: 300px;
    height: 182px;
    border: 2px dashed black;
    background-image: linear-gradient(to right, grid, white);
}

#kutu-2 {
    width: 300px;
    height: 182px;
    border: 2px dashed black;
    background-image: linear-gradient(to right, grid, white);
}

#kutu-3 {
    width: 300px;
    height: 182px;
    border: 2px dashed black;
    background-image: linear-gradient(to right, grid, white);
}

/*Article Bölümü Bitiş*/

/*Main-1 Bölümü Başlangıç*/
.main-1 {
    grid-area: g;
    max-width: 960px;
    min-height: 100px;
    border: 3px dashed black;
    background-color: white;
    display: inline-block;
}

.main-1>h2 {
    float: left;
    width: 400px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 3px;
}

.main-1>p {
    font-size: 14px;
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    text-align: justify;
    column-count: 2;
    column-gap: 15px;
}

.main-1>p img {
    width: 150px;
    height: 100px;
    padding: 5px 5p 5px 10px;
    margin: 2px 5px 2px 5px;
    float: left;
    opacity: 80%;
    border-radius: 10px;
}

/*Main-1 Bölümü Bitiş*/

/*Main-2 Bölümü Başlangıç*/
.main-2 {
    grid-area: h;
    max-width: 960px;
    min-height: 200px;
    border: 3px dashed black;
    background-color: white;
    display: inline-block;
}

.main-2>h2 {
    float: left;
    width: 400px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 3px;
}

.main-2>p {
    font-size: 14px;
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    text-align: justify;
    column-count: 2;
    column-gap: 15px;
}

.main-2>p img {
    width: 150px;
    height: 100px;
    padding: 5px 5p 5px 10px;
    margin: 2px 5px 2px 5px;
    float: left;
    opacity: 80%;
    border-radius: 10px;
}

/*Main-2 Bölümü Bitiş*/

/*Main-3 Bölümü Başlangıç*/
.main-3 {
    grid-area: k;
    max-width: 960px;
    min-height: 200px;
    border: 3px dashed black;
    background-color: white;
    display: inline-block;
}

.main-3>h2 {
    float: left;
    width: 400px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 3px;
}

.main-3>p {
    font-size: 14px;
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    text-align: justify;
    column-count: 2;
    column-gap: 15px;
}

.main-3>p img {
    width: 150px;
    height: 100px;
    padding: 5px 5p 5px 10px;
    margin: 2px 5px 2px 5px;
    float: left;
    opacity: 80%;
    border-radius: 10px;
}

/*Main-3 Bölümü Bitiş*/

/*Main-4 Bölümü Başlangıç*/
.main-4 {
    grid-area: l;
    max-width: 960px;
    min-height: 200px;
    border: 3px dashed black;
    background-color: white;
    display: inline-block;
}

.main-4>h2 {
    float: left;
    width: 400px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 3px;
}

.main-4>p {
    font-size: 14px;
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    text-align: justify;
    column-count: 2;
    column-gap: 15px;
}

.main-4>p img {
    width: 150px;
    height: 100px;
    padding: 5px 5p 5px 10px;
    margin: 2px 5px 2px 5px;
    float: left;
    opacity: 80%;
    border-radius: 10px;
}

/*Main-4 Bölümü Bitiş*/

/*Main-5 Bölümü Başlangıç*/
.main-5 {
    grid-area: m;
    max-width: 960px;
    min-height: 200px;
    border: 3px dashed black;
    background-color: white;
    display: inline-block;
}

.main-5>h2 {
    float: left;
    width: 400px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 3px;
}

.main-5>p {
    font-size: 14px;
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    text-align: justify;
    column-count: 2;
    column-gap: 15px;
}

.main-5>p img {
    width: 150px;
    height: 100px;
    padding: 5px 5p 5px 10px;
    margin: 2px 5px 2px 5px;
    float: left;
    opacity: 80%;
    border-radius: 10px;
}

/*Main-5 Bölümü Bitiş*/

/*Kategoriler Bölümü Başlangı*/
.kategoriler {
    grid-area: n;
    min-width: 240px;
    min-height: 750px;
    border: 3px dashed black;
    background-color: white;
    display: flex;
    flex-direction: column;
    padding: 2px 2px 2px 3px;
}

#birinci-kategori {
    max-width: 230px;
    min-height: 492px;
    border: 2px dashed black;
    background-color: white;
    margin-bottom: 10px;
}

#ikinci-kategori {
    max-width: 230px;
    min-height: 492px;
    border: 2px dashed black;
    background-color: white;
    margin-bottom: 0px;
}

/*Kategoriler Bölümü Bitiş*/

/*Footer Bölümü Başlangıç*/
footer {
    grid-area: p;
    max-width: 1200px;
    min-height: 100px;
    border: 3px dashed black;
    background-image: linear-gradient(to right, grid, white);
    display: flex;
    margin: 0px;
    /*row-gap: 5px;*/
    justify-content: space-around;
    align-items: center;
}

#kutu-5 {
    width: 390px;
    height: 190px;
    border: 2px dashed black;
    background-image: linear-gradient(to right, grid, white);
    margin: 5px 5px 5px 5px;
    display: block;
    align-items: center;
    padding: 10px 10px 10px 10px;
}

#kutu-5>h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

#kutu-5>ul li {
    float: inherit;
    width: 100px;
    height: 20px;
    /* border: 1px solid #bbbbbb;
    border-radius: 5%;*/
    margin: 5px 5px 5px 5px;
    /*background-color: #97A5A6;*/
    text-decoration: none;
    list-style-type: none;
    padding: 2px 2px 2px 2px;
    /*Sosyal Medya Kutularının Genişliklerini Biçimlendirmektedir*/
    /* flex-wrap: wrap;
    align-content: flex-start;*/
}

#kutu-5>ul li a {
    text-decoration: none;
    color: white;
    /*Yazı Rengi*/
    margin: 0px;
    /*font-size: 12px;*/
}


#kutu-6 {
    width: 390px;
    height: 190px;
    border: 2px dashed black;
    background-image: linear-gradient(to right, grid, white);
    margin: 5px 5px 5px 5px;
    display: block;
    align-items: center;
    padding: 10px 10px 10px 10px;
}

#kutu-6>h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

#kutu-6>ul li {
    float: inherit;
    width: 100px;
    height: 20px;
    /*border: 1px solid #bbbbbb;
    border-radius: 5%;*/
    margin: 5px 5px 5px 5px;
    /*background-color: #97A5A6;*/
    text-decoration: none;
    list-style-type: none;
    padding: 2px 2px 2px 2px;
    /*Sosyal Medya Kutularının Genişliklerini Biçimlendirmektedir*/
    /* flex-wrap: wrap;
    align-content: flex-start;*/
}

#kutu-6>ul li a {
    text-decoration: none;
    color: white;
    /*Yazı Rengi*/
    margin: 0px;
    /*font-size: 12px;*/
}


#kutu-7 {
    width: 390px;
    height: 190px;
    border: 2px dashed black;
    background-image: linear-gradient(to right, grid, white);
    margin: 5px 5px 5px 5px;
    text-decoration: none;
    list-style-type: none;
    padding: 2px 2px 2px 2px;
    /*Sosyal Medya Kutularının Genişliklerini Biçimlendirmektedir*/
    /* flex-wrap: wrap;
    align-content: flex-start;*/
}

#kutu-7>ul li {
    float: inherit;
    width: 250px;
    height: 30px;
    /*border: 1px solid #bbbbbb;
    border-radius: 5%;*/
    margin: 5px 5px 5px 5px;
    background: none;
    text-decoration: none;
    list-style-type: none;
    padding: 2px 2px 2px 2px;
    /*Sosyal Medya Kutularının Genişliklerini Biçimlendirmektedir*/
    /* flex-wrap: wrap;
    align-content: flex-start;*/

}

.clear {
    clear: left;
}

/*Footer Bölümü Bitiş*/