@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');


    html {

        --color: #575c5f;
        --color-2: #f5f5f5;
        --text-color: #575c5f;
        --bg-color: #0a306f;
        --bg-dark: #000;
        --p-color: #575c5f;
        --w-color: #fff;
        --dodge: #efa500;
        --light: #F7FBFF;
        --shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.05);
        --imgdodge: brightness(0) saturate(100%) invert(94%) sepia(93%) saturate(2%) hue-rotate(223deg) brightness(105%) contrast(100%);

    }


    h1,
    h2,
    h3,
    h4,
    p,
    strong,
    b,
    ul,
    li {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }

    p {

        font-size: 15px;
        line-height: 30px;


    }

    a {
        text-decoration: none;
        color: #666
    }

    button,
    input {
        outline: none;
    }

    body {
        margin: 0;
        padding: 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 17px;
        overflow-x: hidden;
        content: none;
        color: var(--p-color);
        background: var(--bg-color);
    }




    ::-webkit-scrollbar {
        width: 3px !important;
    }

    ::-webkit-scrollbar-track {}

    ::-webkit-scrollbar-thumb {
        background: #272727;
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        background: #272727;
    }


    .content {

        max-width: 1500px;
        margin: 0 auto;
        box-sizing: border-box;
    }

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

        .content {
            max-width: 1500px;
        }

    }

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

        .content {
            max-width: 1300px;
        }

        .header-4 .logo {
            height: 40px;
        }

    }

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

        .content {
            max-width: 1200px;
        }

    }

    @media screen and (max-width: 1300px) {
        .content {
            max-width: 1000px;
        }

        .content-2 {
            padding-left: 20px;
            padding-right: 20px;
        }
    }

    @media screen and (max-width: 1000px) {
        .content {
            max-width: 100%;
            padding-left: 10px;
            padding-right: 10px;
        }

        .content-2 {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    @media screen and (max-width: 575.98px) {
        .content {
            width: auto;
            padding-left: 10px;
            padding-right: 10px;
        }

        .content-2 {
            padding-left: 0px;
            padding-right: 0px;
        }
    }


    .center-content {
        display: flex;
        align-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;

    }
 .center-content > div { width: 100%;}

.anacontent { background: #fff; border-radius: 30px; overflow: hidden ; position: relative;}
 .header {   padding: 40px; border-bottom: 1px solid #f2f2f2;  }

 .header .logo {   font-size: 36px; font-weight: 800;}
 .header .tarih { font-size: 14px; }
 .header .label { font-size: 12px; color: #ccc; }


 .site-font h1 { font-size: 36px; font-weight: 800; padding-bottom: 20px;  }
 .site-font h2 { font-size: 18px;  }
 .site-font h2 strong {  color: var(--bg-color);  }
 .site-font p { line-height: 35px; font-size: 16px; color: var(--color);}



 .tablo-liste  { border: 1px solid #f2f2f2; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 40px rgba(0,0,0,0.05); }
.tablo-liste > div   {  border-bottom: 1px solid #f2f2f2; }
.tablo-liste > div:last-child { border-bottom: none; }
.tablo-liste > div > div { padding: 15px 25px; font-size: 15px; font-weight: 600; color: #000;   }
.tablo-liste .footer-fiyat {font-size: 22px;}

.user-kart { max-width:400px; margin: 0 auto; background: #fff; border-radius: 20px; padding:0px 30px 40px 30px; box-shadow: 0px 0px 40px rgba(0,0,0,0.05);  position: relative; z-index: 30;   }
.user-kart .user-image { width: 150px; height: 150px; border-radius: 500px; margin-top: -75px; }
.user-kart h2 { color: var(--bg-color); padding :10px 0px; }

@media screen and (max-width: 600px) {
    .user-kart {  max-width: 90%; box-shadow: 0px 0px 0px rgba(0,0,0,0.05);    }
.user-kart .user-image {  margin-top: 0px;  width: 100px; height: 100px;} 
}


.btn-3 { background: var(--bg-color) !important; border: 1px solid var(--bg-color) !important;  }


.small-font { font-size: 14px; }


.taslak { position: fixed; background: rgba(0,0,0,0.5); height: 100vh; width: 100%; left:0; top:0; z-index: 30000; display: flex; align-items: center; align-content: center; }
.taslak > div { width: 100%; color: #fff; font-size: 38px; text-align: center;}
.taslak > div p { font-size: 14px; padding: 20px ;}



 

.teklif-icerigi { padding: 25px;  }
.teklif-icerigi h1 { color: var(--bg-color); padding-bottom: 15px;  }
.teklif-icerigi h2 { color: var(--bg-color); padding: 10px 0px;  }
.teklif-icerigi p { font-size: 15px; list-style: 30px; padding: 0px; }
.teklif-icerigi ul   { margin: 0px; padding-left: 0px; border: 1px solid #f2f2f2; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 40px rgba(0,0,0,0.05); margin-bottom: 20px;}
.teklif-icerigi ul li { padding: 15px 25px; font-size: 15px; margin: 0px; font-weight: 600; color: #000;  border-bottom: 1px solid #f2f2f2;  }
.teklif-icerigi ul li strong {  float: right;  }
.teklif-icerigi ul li:last-child { border-bottom: none; }
.teklif-icerigi ul li em { font-size: 12px;  font-style: normal; display: inline-block; background:#efa500; color: #fff; padding: 3px; border-radius: 3px; margin: 0px 4px;  }


.teklif-icerigi ol   { margin: 0px; padding-left: 0px; border: 1px solid #f2f2f2; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 40px rgba(0,0,0,0.05); margin-bottom: 20px;  list-style: circle;}
.teklif-icerigi ol li { padding: 15px 25px; font-size: 15px; margin: 0px; font-weight: 400; color: #000;  border-bottom: 1px solid #f2f2f2;  list-style: circle; }
.teklif-icerigi ol li::before {
  content: '✔';
  color: green !important;
  margin-right: 5px;
}
.teklif-icerigi ol li strong {  float: right;  }
.teklif-icerigi ol li:last-child { border-bottom: none; }









.article h2 { font-size: 34px; color: var(--bg-color) ; padding-bottom: 15px; }



.comp-4 .img   { border-radius:300px; position: relative; z-index: 20;  }
.comp-4 .img img { z-index: 0; }
 
.comp-4 .title {   padding: 20px 0px 0px 20%; position: relative; z-index: 0; }
.comp-4 .title .info { font-size: 11px; color: #ccc; padding-bottom: 0px; padding-left: 20px;}
.comp-4 .title .h2 { font-size: 18px; color: var(--color); font-weight: 600;  padding-left: 20px;}
.comp-4 .title .p { font-size: 13px; color: #666; padding-bottom: 0px; padding-left: 20px; padding-top: 10px;}
.comp-4 .title:after { content:''; position: absolute; width: 1px; height: 130%; top:-30%; display: inline-table; background: #002060; transition: 0.5s;}
.comp-4:hover .title:after { height: 50%; }
.comp-4  img {transition: 0.5s; filter: grayscale(100%);}
.comp-4:hover:hover img {transform: scale(1.10); filter: grayscale(0%);}

body h1 { color: #efa500;}

.ikon-tema  {  color: var(--bg-color); }       
.ikon-tema ul { list-style: none; margin: 0; padding: 0; margin: 0; }
.ikon-tema ul li {   list-style: none; padding:25px 50px; color: #000; text-align: center;   font-size: 13px; background: #f5f5f5; position: relative; color: var(--bg-color); }
.ikon-tema ul li strong { display: inline-block; width: 100%; padding-bottom:10px; font-size: 25px; padding-top: 55px; }
.ikon-tema ul li i { display: inline-block; width: 100%; padding-bottom:10px; font-size: 32px; background: var(--dodge); color: #fff; width: 60px; height: 60px; line-height: 60px; border-radius: 10px;


position: absolute; left:50%; top:0px; margin-left: -30px; z-index: 50;

}

.ikon-tema ul li:after { width: 100%; height: 30px; background: #fff; content:''; display: inline-block; left:0; top:0; position: absolute; z-index: 0; }