/* Genel Sıfırlama */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #111; color: #fff; font-family: 'Arial', sans-serif; line-height: 1.6; }

/* Konteyner */
.container { width: 90%; max-width: 1100px; margin: auto; }

/* Header & Menü */
header { background: #000; padding: 20px 0; border-bottom: 2px solid #e31e24; }
.navbar { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: bold; text-transform: uppercase; }
.logo span { color: #e31e24; }
nav ul { display: flex; list-style: none; }
nav ul li a { color: #fff; text-decoration: none; padding: 0 15px; font-weight: bold; }

/* Hero Bölümü */
.main-banner { padding: 80px 0; text-align: left; background: linear-gradient(to right, #111, #222); }
.main-banner h2 { font-size: 2.5rem; margin-bottom: 20px; }
.banner-btns { margin-top: 30px; display: flex; gap: 15px; }

/* Butonlar */
.btn { padding: 12px 25px; text-decoration: none; border-radius: 4px; font-weight: bold; display: inline-block; }
.btn.red { background: #e31e24; color: #fff; }
.btn.outline { border: 2px solid #e31e24; color: #fff; }

/* Kategoriler (Yan Yana Dizilim) */
.cat-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; 
    margin-top: 40px; 
}
.cat-item { 
    background: #1c1c1c; 
    padding: 25px; 
    border-radius: 8px; 
    border: 1px solid #333;
    transition: 0.3s;
}
.cat-item:hover { border-color: #e31e24; }
.cat-item img { width: 100px; margin-bottom: 15px; filter: brightness(0) invert(1); } /* Resimler gelene kadar ikon gibi görünür */

/* Footer */
footer { background: #000; padding: 40px 0; margin-top: 60px; border-top: 1px solid #333; }
.footer-links a { color: #3498db; text-decoration: none; margin-right: 15px; }

/* Ürün Sayfası Ek CSS */
.product-filter { margin-bottom: 30px; display: flex; gap: 10px; align-items: center; }
.btn-sm { background: #222; border: 1px solid #444; color: #fff; padding: 5px 15px; cursor: pointer; border-radius: 3px; }
.btn-sm.active, .btn-sm:hover { background: #e31e24; border-color: #e31e24; }

.product-img-box { background: #fff; padding: 20px; border-radius: 8px 8px 0 0; }
.product-img-box img { width: 100%; height: auto; }

.product-info { padding: 20px; }
.tech-table { width: 100%; font-size: 0.8rem; margin: 15px 0; color: #aaa; border-collapse: collapse; }
.tech-table td { padding: 5px 0; border-bottom: 1px solid #333; }
.tech-table td:last-child { text-align: right; color: #fff; font-weight: bold; }

.btn-buy { display: block; text-align: center; background: transparent; border: 1px solid #e31e24; color: #e31e24; padding: 8px; text-decoration: none; border-radius: 4px; transition: 0.3s; }
.btn-buy:hover { background: #e31e24; color: #fff; }