@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
body{
     background-color: #121212;
}
/* Font Ayarları */
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}

/* Genel Sıfırlama ve Font */
* {
    margin: 0px;
    padding: 0px;
    font-family: 'Open Sans', sans-serif; /* Daha modern bir font */
    box-sizing: border-box; /* Kutu modelini daha kolay yönetmek için */
}

/* Ana Kapsayıcı */
.kapsayici {
    width: 90%; /* Kapsayıcı genişliği biraz arttı */
    margin: auto;
    background-color: #121212; /* Koyu tema arka planı */
    color: #f0f0f0; /* Açık renkli metin */
}

/* Banner Alanı */
.banner {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0px;
    border-bottom: 2px solid #333333;
}
.logo {
    width: 60px; /* Logo boyutu küçüldü */
    filter: invert(1); /* Logo rengini tersine çevirerek koyu temaya uyum sağla */
}
.banner h1 {
    text-align: center;
    font-size: 35px;
    letter-spacing: 5px;
    color: #f0f0f0;
}
.banner li:last-child {
    display: flex;
    gap: 15px;
}
.banner .material-symbols-outlined {
    font-size: 30px;
    color: #f0f0f0;
    cursor: pointer;
}

/* Menü Alanı */
.menu {
    display: flex;
    list-style-type: none;
    justify-content: center;
    gap: 0; /* Menü öğeleri arasında boşluk yok */
    background-color: #1f1f1f;
}
.menu li {
    flex-grow: 1;
}
.menu li a {
    display: block;
    text-decoration: none;
    color: #cccccc;
    font-size: 18px;
    text-align: center;
    padding: 15px 0px;
    border-bottom: 3px solid transparent; /* Varsayılan border */
    transition: all 0.3s;
}
.menu li a:hover {
    color: #ffffff;
    border-bottom: 3px solid gray; /* Vurgu Rengi: Parlak Mor */
    background-color: #333333;
}
/* Anasayfa için Banner 2 (Promosyon Alanı) */
.banner2 {
    background-image: url(img2/gaming-banner-3noktxpgfhhbf47h.png); /* Oyun temalı görsel varsayımı */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 350px; /* Yükseklik ayarlandı */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
}
.banner2 .kutu {
    background-color: rgb(0, 0, 0); /* Mor vurgu renginin şeffaf hali */
    width: 400px;
    padding: 20px 15px;
    text-align: left;
    color: white;
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 1.2;
    font-weight: bold;
    border-radius: 5px;
}

/* Kartlar Alanı (Öne Çıkan Oyunlar) */
.kartlar {
    margin: 40px 0;
    padding: 30px 0;
    background-color: #1f1f1f; /* Kartların arka planı */
}
.baslik {
    text-align: center;
    font-size: 30px;
    letter-spacing: 4px;
    padding-bottom: 30px;
    color: rgb(185, 185, 185); /* Vurgu rengi */
}
.kartlar_kart {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    padding: 0 10px;
}
.kart {
    flex-grow: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #2a2a2a; /* Kart arka planı */
    padding-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s;
}
.kart:hover {
    transform: translateY(-5px); /* Hafif yukarı hareket */

}
.foto {
    width: 100%;
 
    display: block;
}
.foto3{
    width: 100%;
    display: block;
    height: 65%;
}


.kart h1 {
    font-size: 20px;
    color: #f0f0f0;
}
.cizgi {
    height: 3px;
    width: 40px;
    background-color: rgb(206, 206, 206);;
    margin: 0 auto;
}
.fiyat {
    font-style: normal;
    font-size: 18px;
    color: #00ffaa; /* Fiyat için farklı bir vurgu rengi */
    font-weight: bold;
}

/* Footer Alanı */
footer {
    background-color: #000000;
    color: #aaaaaa;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    margin-top: 20px;
}
.kart a {
    display: block;
    text-decoration: none;
    background-color: #ff8800; /* Vurgu rengi */
    color: white;
    text-align: center;
    width: 100%;
    padding: 12px 0;
    transition: background-color 0.3s;
    font-weight: bold;
}
.kart a:hover {
    background-color: orange;
}
/*----------------------------------------------------------------*/
/* ÜRÜNLER SAYFASI CSS */
/*----------------------------------------------------------------*/
.urunlerSayfasi {
    display: flex;
    gap: 20px;
    padding: 30px 0;
}

/* Sol Taraftaki Banner/Filtre Alanı */
.resimAlani {
    background-image: url(img2/gaming-banner-3noktxpgfhhbf47h.png); /* Oyun temalı görsel varsayımı */
 /* Oyun Kategorileri/Filtre Bannerı */
    width: 25%;
    min-height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
    background-position: center;
    border-radius: 5px;
}

/* Ürün Kartları Listesi */
.urunler {
    width: 75%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; 
    justify-content: flex-start; /* Kartları sola hizala */
}
.urun-kart {
    width: 280px; /* Kart genişliği ayarlandı */
    border: 1px solid #333333;
    background-color: #1f1f1f;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}
.urun-kart h3 {
    color: #f0f0f0;
    font-size: 20px;
}
.urun-kart p {
    font-size: 18px;
    color: #00ffaa;
    font-weight: bold;
    padding: 5px 0;
}
.urun-kart a {
    display: block;
    text-decoration: none;
    background-color: #ff8800; /* Vurgu rengi */
    color: white;
    text-align: center;
    width: 100%;
    padding: 12px 0;
    transition: background-color 0.3s;
    font-weight: bold;
}
.urun-kart a:hover {
    background-color: orange;
}
.ustunuCiz {
    text-decoration: line-through;
    color: #aaaaaa;
    font-weight: normal;
    font-size: 14px;
}
.resim {
    border-bottom: 1px solid #333333;
    overflow: hidden;
}
.resim img {
    transition: all 0.5s;
    width: 100%;
    display: block;
}
.resim:hover img {
    scale: 1.1; /* Hafif büyütme */
    transform: none; /* Dönme efekti kaldırıldı */
}

/*----------------------------------------------------------------*/
/* İLETİŞİM SAYFASI CSS */
/*----------------------------------------------------------------*/
.iletisim-resim {
    height: 250px;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    background-image: url(img2/gaming-banner-3noktxpgfhhbf47h.png); /* İletişim Bannerı */
    margin-bottom: 30px;
    border-radius: 5px;
}
form {
    background-color: #1f1f1f;
    padding: 30px;
    border-radius: 5px;

}
.iletisim {
    display: flex;
    list-style-type: none;
    padding-bottom: 25px;
    gap: 30px;
}
.iletisim-sol, .iletisim-orta, .iletisim-sag {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.iletisim-sol ul, .iletisim-orta ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.iletisim-sol ul li input {
    height: 45px;
    width: 95%;
    border: 1px solid #333333;
    padding: 0 10px;
    background-color: #2a2a2a;
    color: #f0f0f0;
    border-radius: 3px;
}
.iletisim-orta textarea {
    width: 95%;
    height: 120px;
    border: 1px solid #333333;
    padding: 10px;
    background-color: #2a2a2a;
    color: #f0f0f0;
    border-radius: 3px;
    resize: none;
}
.kutu {
    height: 45px;
    width: 95%;
    background-color: orange; /* Gönder butonu vurgu rengi */
    color: white;
    font-size: 18px;
    text-align: center;
    line-height: 45px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.kutu a {
    text-decoration: none;
    color: white;
    display: block;
    width: 100%;
    height: 100%;
}
.kutu:hover {
    background-color: rgb(248, 202, 116);
}
.iletisim-sag {
    margin-top: 5px;
    gap: 15px;
}
.iletisim-sag a, .iletisim-sag li {
    color: #cccccc;
    text-decoration: none;
    font-size: 16px;
}
.tel {
    color: #00ffaa;
    font-weight: bold;
    font-size: 20px;
}
.resim2 img {
    margin: 0 10px 0 0;
    width: 35px;
    filter: invert(1);
    transition: transform 0.3s;
}
.resim2 img:hover {
    transform: scale(1.1);
list-style: none;
}

/*----------------------------------------------------------------*/
/* RESPONSIVE CSS (550px altı) */
/*----------------------------------------------------------------*/
@media screen and (max-width:1100px) {
    .urunler {
        justify-content: center; /* Ürünler sayfasında kartları ortala */
    }
    .urun-kart {
        width: 45%; /* Daha küçük ekranlarda daha geniş kartlar */
    }
}
@media screen and (max-width:850px) {
    .kapsayici {
        width: 100%;
        padding: 0 10px;
    }
    .urunlerSayfasi {
        flex-direction: column;
    }
    .resimAlani {
        width: 100%;
        min-height: 200px;
    }
    .urunler {
        width: 100%;
        gap: 10px;
        justify-content: space-around;
    }
    .urun-kart {
        width: 48%; 
    }
    .banner h1 {
        font-size: 25px;
    }
    .kutu {
        width: 90%;
        left: 0;
        margin: auto;
    }
}
@media screen and (max-width:550px) {
    .gizle {
        display: none !important;
    }
    .banner {
        justify-content: space-between;
        padding: 10px;
    }
    .banner h1 {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .menu, .kartlar_kart, .iletisim {
        flex-direction: column;
        gap: 0;
    }
    .menu li a {
        border-bottom: 1px solid #333;
    }
    .kutu {
        text-align: center;
        font-size: 20px;
    }
    .kartlar_kart {
        padding: 0;
    }
    .kart {
        margin-bottom: 15px;
        width: 90%;
    }
    .urun-kart {
        width: 100%;
    }
    .iletisim-sol ul li input, 
    .iletisim-orta textarea, 
    .kutu {
        width: 100%;
        margin: 5px 0;
    }
    .iletisim-orta ul li:first-child {
        width: 100%;
    }
}
   
        .indirim-baslik {
            text-align: center;
            font-size: 35px;
            color: rgb(185, 185, 185);;
            padding: 30px 0 15px 0;
        }
        .indirimler-liste {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px 0;
            justify-content: space-around;
        }
        .indirim-kart {
            width: 300px; 
            background-color: #1f1f1f;
            border: 1px solid #333333;
            border-radius: 5px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }
        .indirim-kart:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px orange;
        }
        .indirim-yuzdesi {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #ff4500; /* Kırmızı/Turuncu vurgu */
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
            font-size: 18px;
            z-index: 10;
        }
        .indirim-detay {
            padding: 15px;
        }
        .indirim-detay h3 {
            color: #f0f0f0;
            margin-bottom: 5px;
        }
        .eski-fiyat {
            text-decoration: line-through;
            color: #aaaaaa;
            font-size: 14px;
            margin-right: 10px;
        }
        .yeni-fiyat {
            color: #00ffaa;
            font-size: 20px;
            font-weight: bold;
        }
        .indirim-kart a {
            display: block;
            text-align: center;
            background-color: rgb(255, 189, 66);
            color: white;
            padding: 10px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 10px;
        }
        .indirim-kart a:hover {
            background-color: orange;
        }