body{
    margin: 0px;
    box-sizing: border-box;
}
.container {
    text-align: center;
}
.anasayfa{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    background-color: aliceblue;
    box-sizing: border-box;
    overflow: hidden;
}
    /* FONTLAR */
    @font-face {
        font-family: SweetTalk;
        src: url(css/SweetTalk.otf);
    }
    @font-face {
        font-family: ethnocentric;
        src: url(css/ethnocentric.ttf);
    }


    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 9999;
        text-align: center;
        }
        .prediv{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        }

        #preloader img {
            height: auto;
            width: 80%;
            min-width: 350px;
        }
        #preloader h2{
        margin: auto;
        margin-top: -40px;
        color: white;
        text-align: center;
        text-shadow: 0 0 20px rgb(255, 123, 0);
        font-size: large;
        }

        .duyurubar{
            margin: 0px;
            background-color: black;
            color: white;
            overflow: hidden;
        }
        .duyurubar .yazi1{
            margin: 0px;
            padding: 0px;
        }
        .duyurubar h4{
            margin: auto;
            position: relative;
            text-align: center;
            padding: 15px;
            animation: duyuruyazi 10s linear infinite;
        }
        @keyframes duyuruyazi {
                0% {
                transform: translateX(0%);
            }
                100% {
                transform: translateX(-0%);
            }
        }
        .duyurubar span{
            color: red;
        }

        /* DUYURU POPAP */
        .duyurupopap{
            margin: 0px;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.850);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: fixed;
            z-index: 999999999;

        }
        .kutupop{
            width: 60vh;
            max-width: 95%;
            background-color: black;
            position: fixed;
            left: 0px;
            right: 0px;
            margin: auto;
            margin-top: 15%;    
            color: white;
            border-radius: 20px;
            font-size: large;
            box-shadow: 0px 0px 50px black;

        }
        .duyurupopap .rows1{
            margin: auto;
            text-align: center;
        }
        .duyurupopap .rows1 img{
            text-align: center;
            margin: auto;
            width: 60px;
            height: auto;
            padding: 9px;
            background-color: gray;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .duyurupopap .rows2 h2{
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 15px;
            font-size: x-large;
        }
        .duyurupopap .rows0{
            margin: auto;
            text-align: center;
            position: absolute;
            right: 8px;
            top: 8px;
        }
        .duyurupopap .rows0 button{
            background-color: rgb(118, 118, 118);
            border-radius: 100px;
            font-weight: 900;
            height: 22px;
            width: 22px;
            padding: 0px;
            font-size: 14px;
            color: black;
        }
        .duyurupopap .rows2 span{
            color: red;
        }
        /*---*/


            /*  ROW1  */

.anasayfa .row1 {
    z-index: 1;
    background-color: aliceblue;
    display:inline-block;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 30px;
    width: 100%;
    display: none;
}
.anasayfa .row1 >h2{
    text-align: center;
    color: rgb(28, 117, 225);
    font-size: 35px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 65px;
    margin: auto;
    background-color: white;
    box-shadow: 0 0px 0px rgb(164, 189, 213);
    margin-top: -8px;
    margin-bottom: 20px;
}
.anasayfa .row1> ul{
    position: relative;
    text-decoration: none;
    list-style-type: none;
    margin-bottom: 50px;
    display: inherit;

}
.anasayfa .row1 li{
    display: grid;
    place-items: center;
    text-align: center;
    float: left;
    width: 31%;
    margin: 5px;
    min-width: 180px;
}

.anasayfa .row1 .kutu{  
    position: relative;
    height: auto lenght;
    float: left;
    text-align: center;
    transition: 1s;
    border-radius: 0px;
    background-color: white;
    box-shadow: 0 40px 40px rgb(164, 189, 213);
    padding-bottom: 0px;
    max-width: 380px;

    
}
.kutu:hover{
    background-color: #292929;
    transition: 1s;
    border-radius: 15px;
    
}
.kutu1:hover{
    background-color: red;
}
.kutu:hover h2{
    color: aliceblue;
    
}
.kutu:hover p{
    color: aliceblue;
}
.kutu:hover img{
    border-radius: 0px;
}

.kutu img{
    width: 100%;
    padding: 0px;
    margin-top: 0px;
    background-color:rgb(0, 195, 255);
    
}
.kutu h2{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;;
    margin-top: 3px;
    color: #1A1A1A; 
}
.kutu h2:hover{
    color: rgb(255, 255, 255);
}
.kutu p{
    margin: auto;
    margin-top: -14px;
    text-align: center;
    width: 80%;
    padding: 3px;
    font-size: 12px;
    color: #494949;
    font-weight: 600;
    height: auto lenght;
    
    visibility: hidden;
    position: absolute;
}

                                        /* HİZMETLER */

    .hizmetler{
        position: relative;
        width: 100%;
        background-color: rgb(241, 241, 241);
        margin: auto;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 90px;
    }
    .hizmetler >h2{
        font-size: 30px;
        font-weight: 500;
        display: block;
        margin: auto;
        margin-bottom: 10px;
        padding: 20px;
        color: black;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        width: 75%;
        border: 1px solid lightgrey;
    }
    .hizmet{
        position: relative;
        margin: auto;
        display: inline-table;
        margin: 7px;  
        height: lenght auto;
        width: 25%;
        padding: 25px;
        min-width: 200px;
        max-width: 330px;
        border: 1px solid lightgrey;
    }
    .hizmet:hover{
        border-radius: 10px;
        box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.2);
        bottom: 2px;
        border: none;
        background-color: white;
    }
    .hizmet:hover h2{
        color: #0d4a6d;
    }
    .hizmet img{
        height: auto;
        width: 90%;
    }
    .hizmet h2{
        font-size:larger;
        font-weight: 700;
    }
    .hizmet p{
        text-align: center;
        font-size: medium;
        font-weight: 400;
        margin: auto;

    }
    .hizmet h3{
        position: relative;
        font-size: 10px;
        font-weight: 500;
        color: lavender;
        font-style: italic;
        display: inline-block;
        margin: 2px;
        background-color: #292929;
        padding: 5px;
    }
    /* Not: even çiftleri, odd tekleri seçer, 3n 3.cü elemanlar.. */
    .hizmet h3:nth-child(even){
        color: aliceblue;
    }




            /*  ROW4  */

            .anasayfa .row4 {
                position: relative;
                z-index: 1;
                background-color: aliceblue;
                display:inline-table;
                text-decoration: none;
                width: 100%;
                padding-top: 60px;
                padding-bottom: 100px;
                text-align: center;
            }
            .anasayfa .row4 ul > h2{
                font-size: 35px;
                font-weight: 600;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin-bottom: 50px;
                color: #0d4a6d;
                text-align: center;

            }
            
            .anasayfa .row4 ul{
                text-decoration: none;
                display:inline-block;
                list-style-type: none;
                width: 90%;
                max-width: 1100px;
            }
            
            .anasayfa .row4 .daire{
                height: 205px;
                width: 20%;
                min-width: 300px;
                float: left;
                text-align: center;
                transition: 0.5s;
                border-radius: 50px;
                margin: 5px;
                background-color: white;
                box-shadow: 1px 1px 50px rgb(164, 189, 213);
              
            }

            @media screen and (min-width: 1200px){
                .anasayfa .row4 .daire{
                    min-width: 350px;
                }
            }

            .daire:hover {
                border-radius: 0px;
                box-shadow: 1px 1px 20px rgb(65, 155, 234);
            
            }
            .daire:hover img{
                border-radius: 0px;
            }
            
            .daire img{
                width: 70px;
                height: 70px;
                padding: 3px;
                margin-top: 11px;
                background-color:rgb(0, 195, 255);
                border-radius: 100px;
            }
            .anasayfa .row4 .daire h2{
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: large;
                margin-top: 0px;
                color: #1A1A1A;
            }
            .anasayfa .row4 .daire:hover h2{
                color: rgb(14, 58, 92);
            }
            .daire p{
                margin: auto;
                margin-top: -12px;
                text-align: center;
                width: 95%;
                padding: 4px;
                font-size: medium;
                color: #2f2f2f;
                font-weight: 400;
            }
            .daire:hover p{
                color: black;
            }


            /* KUTU img*/

            .daire1 img{
                background-color:darkblue ;
            }
            .daire2 img{
                background-color: green;
            }
            .daire3 img{
                background-color: purple;
            }
            .daire4 img{
                background-color: rgb(30, 96, 162);
            }
            .daire5 img{
                background-color: red;
            }
            .daire6 img{
                background-color: darkorange;
            }



        /* REFERANS*/
        .referans{
            height: auto lenght;
            width: 100%;
            padding-top: 30px;
            padding-bottom: 50px;
            position: relative;
            background-color: white;
            color: white;
            text-align: center  ;
            margin: auto;
            display: none;
        }
        .referans> h2{
            color:#0d4a6d;
            font-size: xxX-large;
            font-weight: 300;
            padding: 18px;
            margin: auto;
            margin-top: -5px;
        }       
        .referans h2> p{
            font-size: medium;
            margin-top: auto;
            color: #1A1A1A;
            font-weight: 500;
        }
        .ref{
            position: relative;
            width: 24%;
            min-width: 175px;
            height: auto;
            background-color: black;
            display: inline-flex;
            margin: auto;
            margin: 4px;
            text-align: center;
            overflow: hidden;
        }
        .ref img{
            height: auto;
            width: 100%;
        }
        .ref img:hover{
            backdrop-filter: blur(10px);
        }
        .reftext{
            position: absolute;
            margin: auto;
            height: 10%;
            width: 10%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.815);
            backdrop-filter: blur(10px);
            overflow: hidden;
            display: none;
            
        }
        .ref:hover .reftext{
            transition: 1s;
            display: block;
            height: 95%;
            width: 95%;
        }
        .reftext> p{
            color: rgba(0, 0, 0, 0.533);
            margin: auto;
        }

        .ref ul{
            text-decoration: none;
            list-style-type: square;
            text-align: left;
            height: auto;
            width: auto;
        }
        .ref li{
            margin: 5px;
            font-weight: 300;
            font-size: medium;
            color: black;
        }
        .ref h2{
            padding: 3px;
            margin: auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 400;
            font-size: xx-large;
            color:black;


        }

        .ref h3{
            color: black;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: x-medium;
            font-weight: 500;
            padding: 2px;
            padding-top: 5px;
            width: fit-content;
            margin: auto;
            border-bottom: 2px solid black; 
            height: fit-content;
            
        }
        .refac{
            position: absolute;
            bottom: 0px;
            right: 0px;
            background-color: rgba(0, 0, 0, 0.700);
            padding: 12px;
            height: 14px;
            line-height: 14px;
            width: 60px;
            margin: auto;
            border-top-left-radius: 10px;
            
        }
        .refac:hover{
            background-color: black;
        }
        .referans .refurl{
            color: rgba(0, 0, 0, 0.505);
            margin: 20px;
            font-weight: 300;
        }
        .refbegeni{
            position: absolute;
            color: rgba(0, 0, 0, 0.59);
            margin: auto;
            bottom: 5px;
            left: 10px;
        }



                                                /* WEB ŞABLONLAR */

    .sablonlar{
        position: relative;
        width: 100%;
        background-color: rgb(239, 239, 239);
        margin: auto;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 90px;
    }
    .sablonlar a{
        color: white;
        text-decoration: none;
    }
    .sablonlar >h2{
        font-size: 30px;
        font-weight: 500;
        display: block;
        margin: auto;
        margin-bottom: 10px;
        background-color: white;
        padding: 20px;
        color: #4476DA;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.066);
        width: 90%;
    }
    .sablon{
        position: relative;
        background-color: white;
        margin: auto;
        display: inline-table;
        margin: 6px;  
        height: lenght auto;
        width: 20%;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.066);
        padding: 18px;
        min-width: 200px;
        max-width: 330px;
        min-height: 240px;
        border-bottom: 7px solid #4476DA;
    }
    .sablon:hover{
        border-radius: 10px;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.367);
        bottom: 2px;
    }
    .sablon:hover h2{
        color: #0d4a6d;
    }
    .sablon img{
        height: auto;
        width: 25%;
        float: left;
        display: none;
    }
    .sablon i{
        font-size: 40px;
        color: #4476DA;
    }
    .sablon h2{
        font-size:larger;
        font-weight: 700;
        margin: auto;
        padding: 10px;
    }
    .sablon p{
        text-align: center;
        font-size: medium;
        font-weight: 400;
        margin: auto;
        padding-top: 10px;
    }
    button{
        width: 80px ;
        height: auto;
        background-color: rgb(62, 62, 62);
        color: white;
        border: none;
        padding: 5px;
    }
    .sablon h3{
        position: relative;
        font-size: 10px;
        font-weight: 500;
        color: lavender;
        font-style: italic;
        display: inline-block;
        margin: 2px;
        background-color: #292929;
        padding: 5px;
    }
    /* Not: even çiftleri, odd tekleri seçer, 3n 3.cü elemanlar.. */
    .sablon h3:nth-child(even){
        color: aliceblue;
    }



    @media screen and (max-width: 1100px){

        .sablon img{
            height: auto;
            width: 19%;
            position: absolute;
            left: 5px;
            top: 5px;
        }
        .sablonlar >h2{
            width: 74%;
        }
    }

    @media screen and (max-width: 530px){

        .sablon{
            width: 33%;
            min-width: 140px;
            max-width: auto;
            margin: 3px;
            min-height: 355px;
            margin-top: 10px;
        }
        .sablonlar >h2{
            width: 83%;
        }
    }

    @media screen and (max-width: 370px){

        .sablon{
            width: 80%;
            min-width: auto;
            max-width: auto;
            margin: 3px;
            min-height: auto;
        }
    }



         /* ROW5 */
        
         .blog{
            width: 100%;
            height: auto lenght;
            background-color: rgb(241, 241, 241);
            text-align: center;
            padding-top: 30px;
            padding-bottom: 50px;
            display: none;
        }
         .blog .yazi{
            position: relative;
            margin: auto;
            width: 28%;
            height: auto lenght;
            min-width: 350px;
            background-color: rgb(255, 255, 255);
            display: inline-block;
            margin: 5px;
            margin-top: 10px;
            padding: 5px;
        }
        .blog> h2{
            color:#0d4a6d;
            font-size: xxX-large;
            font-weight: 300;
            margin: auto;
        }       
        .blog> p{
            font-size: large;
            margin-top: auto;
            color: #1A1A1A;
            font-weight: 500;
        }
        .yazi h2{
            margin: auto;
            font-size: 2.5vh;
            font-weight: 600;
            padding: 10px;
            color: rgb(0, 103, 193);
        }
         .yazi p{
            margin: auto;
            font-size: 1.8vh;
            font-weight: 200;
            padding: 5px;
            padding-top: 0;
            color: rgb(88, 88, 88);
        }
         .blog .images{
            height: fit-content;
            width: 100%;
            position: relative;
            margin: auto;
            
        }
        .blog img{
            width: 100%;
            height: auto;
        }
        .blog .blogbegeni{
            position:absolute;
            color:white;
            top: 35px;
            left: 10px;
        }
        .blog .bloggoruntuleme{
            position:absolute;
            color:white;
            top: 10px;
            left: 10px;
        }



                     /* İLETİŞİM */ 
        .iletisim{
            position: relative;
            height: 450px;
            width: auto;
            background-color: #0d4a6d6d;
            background-repeat: no-repeat;
            background-position: center right;
            background-size: cover;
            color: black;
            text-align: center;
            margin: auto;
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
        .iletisim a{
            text-decoration: none;
            color: black;
        }
        .iletisim h3{
            color: white;
            background-color: #00000084;
            width: 30%;
            min-width: 300px;
            height: 50px;
            margin: auto;
            position: relative;
            top: 90px;
            line-height: 50px;
            border-radius: 0px;
        }
        .iletisim .ileti{
            position: relative;
            top: 150px;
            margin: auto;
            background-color: white;
            width: 270px;
            height: 58px;
            display: inline-block;
            border-radius: 50px;
            margin: 5px;
            overflow: hidden;
        }
        .iletisim .ileti:hover{
            transition: 1s;
            width: 180px;
        }
        .iletisim .ileti1{
            border: 3.5px solid green ;
        }
        .iletisim .ileti2{
            border: 3.5px solid #6666FF ;
        }
        .iletisim img{
            position: relative;
            margin: auto;
            top: 1px;
            left: 1px;
            float: left;
            padding: 2px;
            border-radius: 100px;
        }
        .iletisim p{
            margin: auto;
            position: relative;
            font-size: 25px;
            font-weight: 900;
            left: -10px;
            top: -4px;            
        }
        .ileti1 b{
            font-size: 18px;
            color: green;
        }
        .ileti2 b{
            font-size: 18px;
            color: #6666FF;
        }