@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
    @import url('footer.css');
    @import url('header.css');
    @import url('main.css');
    @import url('slider.css');
    @import url('katalog.css');
    @import url('dropdown.css');
    @import url('contact.css');
    @import url('urunler.css');
    @import url('hizmetler.css');
    @import url('hakkimizda.css');
    @font-face {
        font-family: "kalam";
        src: url("/fonts/Kalam-Bold.ttf");
    }
    
    @font-face {
        font-family: "poppins";
        src: url("/fonts/Poppins-Regular.ttf");
    }
    
    @font-face {
        font-family: "poppins-bold";
        src: url("/fonts/Poppins-Bold.ttf");
    }
    
    @font-face {
        font-family: "poppins-extrabold";
        src: url("/fonts/Poppins-ExtraBold.ttf");
    }
    
    @font-face {
        font-family: "poppins-black";
        src: url("/fonts/Poppins-Black.ttf");
    }
    
    @font-face {
        font-family: "poppins-semibold";
        src: url("/fonts/Poppins-SemiBold.ttf");
    }
    
     :root {
        /*Renkler*/
        --footer-rengi: #A7E3E7;
        --footer-yazi-rengi: #0A3D62;
        --genel-metin-rengi: #000;
        --wp-rengi: green;
        --tlfn-rengi: orange;
        --tlfn-icon-rengi: white;
        --slider-yazi-rengi: white;
        --active-tab-rengi: rgb(228, 158, 0);
        /*Boyutlar*/
        --h1: 50px;
        --h2: 35px;
        --h3: 30px;
        --p: 25px;
        --mobil-h1: 35px;
        --mobil-h2: 25px;
        --mobil-h3: 25px;
        --mobil-p: 20px;
        --slider-h1: 30px;
        --slider-p: 20px;
        --mobil-slider-h1: 18px;
        --mobil-slider-p: 14px;
        --hovered-tab-radius: 7.5px;
    }
    
    * {
        font-family: "poppins";
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
        color: var(--genel-metin-rengi);
    }
    
    html {
        scroll-behavior: smooth;
    }
    
    body.noscroll {
        overflow: hidden;
    }
    
    .social-media {
        align-items: center;
        transform: scale(0.8);
        margin: 10px;
    }
    
    .social-media ul {
        display: flex;
        gap: 20px;
    }
    
    .social-media li {
        padding: 10px;
        border: solid 2.75px black;
        border-radius: 100%;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }
    
    .social-media li a {
        margin: auto;
        text-align: center;
        display: block;
        justify-content: center;
        align-content: center;
    }
    
    .social-media li a i {
        font-size: 35px;
    }