 <style>

a {

    text-decoration: none !important;

}

        /* Genel Stiller */

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }



        body {

            background-color: #f8f9fa;

            color: #333;

            line-height: 1.6;

        }



        .container {

            width: 100%;

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 15px;

        }



        /* --- YENİLENMİŞ HEADER STİLLERİ BAŞLANGIÇ --- */

        

        /* Top Bar (En üst ince şerit) */

        .top-bar {

            background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);

            font-size: 12px;

            padding: 8px 0;

            color: white;

        }



        .top-bar .container {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .top-links a {

            text-decoration: none;

            color: white;

            margin-left: 15px;

            transition: color 0.2s;

        }



        .top-links a:hover {

            color: #fbbc05;

        }



        header {

            background-color: #fff;

            box-shadow: 0 4px 12px rgba(0,0,0,0.05);

            position: sticky;

            top: 0;

            z-index: 1000;

        }



        /* Header Ana Kısım (Logo, Search, Actions) */

        .header-main {

            padding: 20px 0;

            background-color: #fff;

        }



        .header-wrapper {

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 30px;

        }



        .logo {

            font-size: 28px;

            font-weight: 800;

            color: #1a73e8;

            text-decoration: none;

            letter-spacing: -0.5px;

            display: flex;

            align-items: center;

            gap: 5px;

        }



        .logo i {

            font-size: 24px;

        }



        .logo span {

            color: #ea4335;

        }



        /* Modern Arama Çubuğu */

        .search-container {

            flex: 1;

            max-width: 600px;

            position: relative;

        }



        .search-box {

            display: flex;

            align-items: center;

            background: #f1f3f4;

            border-radius: 25px;

            padding: 5px;

            transition: all 0.3s ease;

            border: 2px solid transparent;

        }



        .search-box:focus-within {

            background: #fff;

            border-color: #4285f4;

            box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.1);

        }



        .search-box input {

            flex: 1;

            border: none;

            background: transparent;

            padding: 10px 15px;

            font-size: 15px;

            outline: none;

            color: #333;

        }



        .search-btn {

            background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);

            color: white;

            border: none;

            width: 40px;

            height: 40px;

            border-radius: 50%;

            cursor: pointer;

            font-size: 16px;

            transition: all 0.2s;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .search-btn:hover {

            transform: scale(1.05);

            box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);

        }



        /* Header Aksiyonları */

        .header-actions {

            display: flex;

            align-items: center;

            gap: 20px;

        }



        .action-item {

            display: flex;

            flex-direction: column;

            align-items: center;

            text-decoration: none;

            color: #5f6368;

            font-size: 12px;

            font-weight: 500;

            transition: color 0.3s;

            position: relative;

        }



        .action-item i {

            font-size: 22px;

            margin-bottom: 4px;

            color: #444;

            transition: transform 0.2s;

        }



        .action-item:hover {

            color: #4285f4;

        }



        .action-item:hover i {

            color: #4285f4;

            transform: translateY(-2px);

        }



        .badge {

            position: absolute;

            top: -5px;

            right: -2px;

            background-color: #ea4335;

            color: white;

            font-size: 10px;

            width: 16px;

            height: 16px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

            font-weight: bold;

        }



        /* GÜNCELLENMİŞ: Header Menü Arka Planı */

        .navbar-area {

            background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%);

            color: white;

        }



        .nav-menu {

            display: flex;

            list-style: none;

        }



        .nav-item {

            position: relative;

        }



        .nav-link {

            display: block;

            padding: 14px 20px;

            text-decoration: none;

            color: white;

            font-weight: 500;

            font-size: 14px;

            transition: background 0.3s, color 0.3s;

            border-bottom: 3px solid transparent;

        }



        .nav-link:hover {

            background-color: rgba(255, 255, 255, 0.1);

            color: #fff;

            border-bottom-color: #fbbc05;

        }



        /* Dropdown Menü */

        .dropdown {

            position: absolute;

            top: 100%;

            left: 0;

            background-color: #fff;

            box-shadow: 0 10px 30px rgba(0,0,0,0.15);

            min-width: 240px;

            opacity: 0;

            visibility: hidden;

            transform: translateY(15px);

            transition: all 0.25s ease;

            z-index: 1001;

            border-radius: 0 0 6px 6px;

            overflow: hidden;

            border-top: 2px solid #4285f4;

        }



        .nav-item:hover .dropdown {

            opacity: 1;

            visibility: visible;

            transform: translateY(0);

        }



        .dropdown-item {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 12px 20px;

            color: #333;

            text-decoration: none;

            border-bottom: 1px solid #f1f3f4;

            font-size: 14px;

            transition: background 0.2s;

        }



        .dropdown-item:hover {

            background-color: #f8f9fa;

            color: #4285f4;

            padding-left: 25px; /* Hafif kayma efekti */

        }

        

        .dropdown-item:last-child {

            border-bottom: none;

        }



        .dropdown-item i {

            font-size: 12px;

            color: #ccc;

        }



        /* Mobile Menu Button */

        .mobile-menu-btn {

            display: none;

            background: none;

            border: none;

            font-size: 24px;

            color: #333;

            cursor: pointer;

            padding: 5px;

        }

        

        /* --- HEADER STİLLERİ SONU --- */



        /* --- Mobile Responsive Header --- */

        @media (max-width: 992px) {

            .top-bar { display: none; } /* Mobilde üst barı gizle */

            

            .navbar-area {

                display: none; /* Normal menüyü gizle */

            }



            .header-actions span {

                display: none; /* Mobilde yazıları gizle, sadece ikon */

            }



            .search-container {

                position: absolute;

                top: 100%;

                left: 0;

                right: 0;

                padding: 10px;

                background: #fff;

                box-shadow: 0 5px 10px rgba(0,0,0,0.05);

                display: none; /* Javascript ile açılacak */

                z-index: 99;

            }

            

            .search-container.active {

                display: block;

            }



            .mobile-menu-btn {

                display: block;

            }



            /* Logo küçültme */

            .logo { font-size: 22px; }

        }

        

        /* Mobile Nav Overlay */

        .mobile-nav {

            display: none;

            background-color: #fff;

            position: fixed;

            top: 70px; /* Header yüksekliği kadar boşluk */

            left: 0;

            right: 0;

            bottom: 0;

            z-index: 999;

            overflow-y: auto;

            border-top: 1px solid #eee;

        }



        .mobile-nav.active {

            display: block;

        }



        .mobile-nav-item {

            border-bottom: 1px solid #f1f3f4;

        }



        .mobile-nav-link {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 15px 20px;

            text-decoration: none;

            color: #333;

            font-weight: 600;

            font-size: 16px;

        }



        .mobile-nav-link i {

            color: #4285f4;

            width: 24px;

        }



        .mobile-dropdown {

            display: none;

            background-color: #f8f9fa;

            padding: 10px 0;

        }



        .mobile-dropdown.active {

            display: block;

        }



        .mobile-dropdown-item {

            display: block;

            padding: 12px 20px 12px 50px;

            text-decoration: none;

            color: #5f6368;

            border-bottom: 1px solid #e8eaed;

        }



        /* YENİ: Hero Bölümü - Daha Modern */

        .hero {

            background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);

            color: white;

            padding: 60px 0;

            text-align: center;

            margin-bottom: 30px;

            position: relative;

            overflow: hidden;

        }



        .hero::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');

            background-size: cover;

            background-position: bottom;

        }



        .hero-content {

            position: relative;

            z-index: 1;

        }



        .hero h1 {

            font-size: 42px;

            margin-bottom: 15px;

            font-weight: 700;

            text-shadow: 0 2px 4px rgba(0,0,0,0.1);

        }



        .hero p {

            font-size: 18px;

            max-width: 600px;

            margin: 0 auto 25px;

            opacity: 0.9;

        }



        .hero-buttons {

            display: flex;

            justify-content: center;

            gap: 15px;

            margin-top: 20px;

        }



        .btn {

            padding: 12px 24px;

            border-radius: 25px;

            font-weight: 600;

            text-decoration: none;

            transition: all 0.3s;

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }



        .btn-primary {

            background-color: white;

            color: #4285f4;

        }



        .btn-primary:hover {

            background-color: #f8f9fa;

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(0,0,0,0.1);

        }



        .btn-secondary {

            background-color: transparent;

            color: white;

            border: 2px solid white;

        }



        .btn-secondary:hover {

            background-color: rgba(255,255,255,0.1);

            transform: translateY(-2px);

        }



        /* Ürün Bölümleri */

        .section-title {

            font-size: 28px;

            margin: 40px 0 20px;

            padding-bottom: 15px;

            border-bottom: 2px solid #f1f3f4;

            color: #333;

            display: flex;

            justify-content: space-between;

            align-items: center;

            position: relative;

        }



        .section-title::after {

            content: '';

            position: absolute;

            bottom: -2px;

            left: 0;

            width: 80px;

            height: 3px;

            background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);

            border-radius: 3px;

        }



        .view-all {

            color: #4285f4;

            text-decoration: none;

            font-size: 14px;

            font-weight: 500;

            display: flex;

            align-items: center;

            gap: 5px;

        }



        .view-all:hover {

            color: #1a73e8;

            text-decoration: underline;

        }



        .section-subtitle {

            font-size: 16px;

            color: #5f6368;

            margin-bottom: 20px;

        }



        /* YENİ: Markalar Bölümü */

        .brands-section {

            background-color: #fff;

           

            margin: 40px 0;

            border-radius: 12px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

        }



        .brands-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

            gap: 20px;

            align-items: center;

        }



        .brand-item {

            display: flex;

            flex-direction: column;

            align-items: center;

            text-decoration: none;

            color: #333;

            transition: transform 0.3s;

        }



        .brand-item:hover {

            transform: translateY(-5px);

        }



        .brand-logo {

            width: 80px;

            height: 80px;

            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 10px;

            font-size: 30px;

            color: #4285f4;

        }



        .brand-name {

            font-weight: 600;

            font-size: 14px;

            text-align: center;

        }



        /* GÜNCELLENMİŞ: Daha küçük ürün kartları - 5'li grid */

        .product-grid {

            display: grid;

            grid-template-columns: repeat(5, 1fr);

            gap: 20px;

            margin-bottom: 40px;

        }



        .product-card {

            background-color: #fff;

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

            transition: transform 0.3s, box-shadow 0.3s;

            display: flex;

            flex-direction: column;

            position: relative;

        }



        .product-card:hover {

            transform: translateY(-8px);

            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);

        }



        .product-image {

            height: 160px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #5f6368;

            position: relative;

            padding: 10px;

        }

        

        .product-image img {

            max-height: 100%;

            max-width: 100%;

            object-fit: contain;

            transition: transform 0.3s;

        }



        .product-card:hover .product-image img {

            transform: scale(1.05);

        }



        .product-image i {

            font-size: 50px;

        }



        /* DÜZELTİLMİŞ: Rating yıldız CSS hatası */

        .rating {

            position: absolute;

            top: 10px;

            right: 10px;

            background-color: rgba(255, 255, 255, 0.95);

            padding: 6px 8px;

            border-radius: 20px;

            font-weight: 700;

            color: #f4b400;

            font-size: 12px;

            box-shadow: 0 2px 5px rgba(0,0,0,0.1);

            display: flex;

            align-items: center;

            gap: 3px;

        }



        .rating i {

            font-size: 12px;

        }



        .product-info {

            padding: 15px;

            flex: 1;

            display: flex;

            flex-direction: column;

        }



        .product-name {

            font-weight: 600;

            margin-bottom: 8px;

            font-size: 14px;

            height: 40px;

            overflow: hidden;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

        }



        .product-specs {

            margin-bottom: 8px;

        }



        .spec-item {

            display: flex;

            align-items: center;

            margin-bottom: 5px;

            font-size: 12px;

            color: #5f6368;

        }



        .spec-item i {

            margin-right: 8px;

            color: #34a853;

            font-size: 14px;

        }



        .product-stats {

            margin-top: auto;

        }



        .stat {

            margin-bottom: 8px;

        }



        .stat-label {

            display: flex;

            justify-content: space-between;

            margin-bottom: 3px;

            font-size: 12px;

        }



        .stat-name {

            color: #5f6368;

        }



        .stat-value {

            font-weight: 600;

        }



        .progress-bar {

            height: 6px;

            background-color: #f1f3f4;

            border-radius: 3px;

            overflow: hidden;

        }



        .progress {

            height: 100%;

            border-radius: 3px;

        }



        .price-progress {

            background: linear-gradient(90deg, #ea4335 0%, #fbbc05 100%);

            width: 82%;

        }



        .performance-progress {

            background: linear-gradient(90deg, #34a853 0%, #4285f4 100%);

            width: 94%;

        }



        .product-actions {

            display: flex;

            justify-content: space-between;

            margin-top: 12px;

            padding-top: 10px;

            border-top: 1px solid #f1f3f4;

        }



        .action-link {

            color: #4285f4;

            text-decoration: none;

            font-size: 12px;

            font-weight: 600;

            display: flex;

            align-items: center;

            transition: color 0.2s;

        }



        .action-link i {

            margin-right: 5px;

            font-size: 12px;

        }



        .action-link:hover {

            color: #1a73e8;

            text-decoration: underline;

        }



        /* YENİ: Popüler Motorlar Bölümü - Farklı Görünüm */

        .motors-section {

            margin: 40px 0;

        }



        .motors-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            gap: 20px;

        }



        .motor-card {

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

            transition: transform 0.3s;

            color: white;

            position: relative;

        }



        .motor-card:nth-child(2) {

            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

        }



        .motor-card:nth-child(3) {

            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

        }



        .motor-card:hover {

            transform: translateY(-5px);

        }



        .motor-header {

            padding: 20px;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .motor-icon {

            font-size: 40px;

            opacity: 0.8;

        }



        .motor-rating {

            background-color: rgba(255, 255, 255, 0.2);

            padding: 5px 10px;

            border-radius: 20px;

            font-weight: 600;

            display: flex;

            align-items: center;

            gap: 5px;

        }



        .motor-content {

            padding: 0 20px 20px;

        }



        .motor-name {

            font-size: 18px;

            font-weight: 700;

            margin-bottom: 10px;

        }



        .motor-specs {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 10px;

            margin-bottom: 15px;

        }



        .motor-spec {

            display: flex;

            flex-direction: column;

        }



        .spec-value {

            font-size: 16px;

            font-weight: 700;

        }



        .spec-label {

            font-size: 12px;

            opacity: 0.8;

        }



        .motor-actions {

            display: flex;

            gap: 10px;

        }



        .motor-btn {

            flex: 1;

            padding: 8px;

            background-color: rgba(255, 255, 255, 0.2);

            color: white;

            border: none;

            border-radius: 6px;

            font-weight: 600;

            cursor: pointer;

            transition: background-color 0.3s;

        }



        .motor-btn:hover {

            background-color: rgba(255, 255, 255, 0.3);

        }



        /* YENİ: Popüler Karşılaştırmalar Bölümü */

        .comparison-groups {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 20px;

            margin-bottom: 40px;

        }



        .comparison-group {

            background-color: #fff;

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

            transition: transform 0.3s;

        }



        .comparison-group:hover {

            transform: translateY(-5px);

        }



        .comparison-products {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 1px;

            background-color: #e0e0e0;

        }



        .comparison-product {

            background-color: #fff;

            padding: 15px;

            text-align: center;

        }



        .comparison-product-image {

            height: 150px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #5f6368;

            margin-bottom: 10px;

            border-radius: 8px;

        }

        

        .comparison-product-image img {

            max-height: 100%;

            max-width: 100%;

        }



        .comparison-product-image i {

            font-size: 40px;

        }



        .comparison-product-name {

            font-weight: 600;

            margin-bottom: 8px;

            font-size: 14px;

        }



        .comparison-btn {

            display: block;

            width: 100%;

            padding: 12px;

            background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);

            color: white;

            border: none;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s;

        }



        .comparison-btn:hover {

            background: linear-gradient(90deg, #3367d6 0%, #2e8b57 100%);

            box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);

        }



        /* GÜNCELLENMİŞ: Yan yana 2 liste bölümü */

        .comparison-sections {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 30px;

            margin-bottom: 40px;

        }



        .comparison-section {

            background-color: #fff;

            border-radius: 12px;

            padding: 20px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

        }



        .comparison-title {

            font-size: 20px;

            margin-bottom: 15px;

            padding-bottom: 10px;

            border-bottom: 1px solid #f1f3f4;

            color: #333;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        /* Liste Görünümü */

        .product-list {

            display: flex;

            flex-direction: column;

            gap: 15px;

        }



        .list-item {

            display: flex;

            background-color: #f8f9fa;

            border-radius: 8px;

            overflow: hidden;

            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

            transition: transform 0.3s, box-shadow 0.3s;

            border: 1px solid transparent;

        }



        .list-item:hover {

            transform: translateY(-3px);

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

            border-color: #e0e0e0;

            background-color: #fff;

        }



        .list-image {

            width: 100px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #5f6368;

            position: relative;

            border-right: 1px solid #f1f3f4;

        }



        .list-image i {

            font-size: 35px;

        }



        .list-rating {

            position: absolute;

            top: 5px;

            left: 5px;

            background-color: #34a853;

            padding: 2px 6px;

            border-radius: 4px;

            font-weight: 600;

            color: #fff;

            font-size: 10px;

        }



        .list-info {

            flex: 1;

            padding: 12px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }



        .list-details {

            margin-bottom: 10px;

        }



        .list-name {

            font-weight: 600;

            margin-bottom: 5px;

            font-size: 16px;

            color: #202124;

        }



       .list-specs {

            font-size: 13px;

            color: #5f6368;

            margin-bottom: 8px;

        }



        .list-stats {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 10px;

        }



        .list-actions {

            display: flex;

            justify-content: space-between;

            margin-top: 10px;

            padding-top: 8px;

            border-top: 1px solid #e8eaed;

        }



        /* Blog Bölümü */

        .blog-section {

            margin: 50px 0;

        }



        .blog-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

            gap: 25px;

        }



        .blog-card {

            background-color: #fff;

            border-radius: 12px;

            overflow: hidden;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

            transition: transform 0.3s;

        }



        .blog-card:hover {

            transform: translateY(-5px);

        }



        .blog-image {

            height: 180px;

            background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            position: relative;

            overflow: hidden;

        }



        .blog-image::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: rgba(0,0,0,0.1);

        }



        .blog-image i {

            font-size: 50px;

            z-index: 1;

        }



        .blog-content {

            padding: 20px;

        }



        .blog-title {

            font-size: 18px;

            font-weight: 600;

            margin-bottom: 10px;

            line-height: 1.4;

        }



        .blog-excerpt {

            color: #5f6368;

            margin-bottom: 15px;

            font-size: 14px;

        }



        .blog-meta {

            display: flex;

            justify-content: space-between;

            font-size: 12px;

            color: #9aa0a6;

            border-top: 1px solid #f1f3f4;

            padding-top: 10px;

        }



        /* Footer */

        footer {

            background: linear-gradient(135deg, #202124 0%, #303134 100%);

            color: #e8eaed;

            padding: 50px 0 20px;

            margin-top: 60px;

        }



        .footer-content {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            gap: 40px;

            margin-bottom: 40px;

        }



        .footer-column h3 {

            font-size: 16px;

            margin-bottom: 20px;

            color: #fff;

            text-transform: uppercase;

            letter-spacing: 1px;

            position: relative;

            padding-bottom: 10px;

        }



        .footer-column h3::after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 0;

            width: 40px;

            height: 2px;

            background: linear-gradient(90deg, #4285f4 0%, #34a853 100%);

        }



        .footer-links {

            list-style: none;

        }



        .footer-links li {

            margin-bottom: 12px;

        }



        .footer-links a {

            color: #9aa0a6;

            text-decoration: none;

            transition: color 0.3s;

            font-size: 14px;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .footer-links a:hover {

            color: #fff;

            text-decoration: underline;

        }



        .copyright {

            text-align: center;

            padding-top: 20px;

            border-top: 1px solid #3c4043;

            color: #9aa0a6;

            font-size: 14px;

        }



        /* Responsive */

        @media (max-width: 1200px) {

            .product-grid {

                grid-template-columns: repeat(4, 1fr);

            }

            

            .comparison-groups {

                grid-template-columns: repeat(2, 1fr);

            }

        }



        @media (max-width: 992px) {

            .product-grid {

                grid-template-columns: repeat(3, 1fr);

            }

            

            .comparison-sections {

                grid-template-columns: 1fr;

            }

            

            .comparison-groups {

                grid-template-columns: 1fr;

            }



            .header-wrapper {

                gap: 15px;

            }



            .brands-grid {

                grid-template-columns: repeat(4, 1fr);

            }

        }



        @media (max-width: 768px) {

            .product-grid {

                grid-template-columns: repeat(2, 1fr);

            }



            .list-item {

                flex-direction: column;

            }



            .list-image {

                width: 100%;

                height: 120px;

                border-right: none;

                border-bottom: 1px solid #f1f3f4;

            }



            .hero h1 {

                font-size: 32px;

            }



            .hero-buttons {

                flex-direction: column;

                align-items: center;

            }



            .brands-grid {

                grid-template-columns: repeat(3, 1fr);

            }

        }



        @media (max-width: 576px) {

            .product-grid {

                grid-template-columns: 1fr;

            }

            

            .comparison-products {

                grid-template-columns: 1fr;

            }



            .header-actions {

                gap: 15px;

            }







/* --- YENİ 3 SEVİYELİ MENÜ SİSTEMİ --- */



/* Menü Kapsayıcısı */

.tech-navbar {

    position: relative;

    z-index: 1000; /* En üstte dursun */

}



.tech-menu {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

}



/* 1. Seviye Linkler */

.tech-menu > li {

    position: relative; /* Alt menüler buna göre hizalanacak */

}



.tech-menu > li > a {

    display: block;

    padding: 15px 20px;

    color: #fff;

    text-decoration: none;

    font-weight: 500;

    transition: background 0.3s;

}



.tech-menu > li:hover > a {

    background: rgba(255, 255, 255, 0.15);

}



/* --- DROPDOWN (2. Seviye) --- */

.tech-dropdown {

    position: absolute;

    top: 100%; /* Parent'ın tam altına */

    left: 0;

    background: #fff;

    min-width: 240px;

    box-shadow: 0 8px 16px rgba(0,0,0,0.1);

    border-radius: 0 0 4px 4px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all 0.2s ease;

    border-top: 2px solid #4285f4;

}



/* 1. Seviye üzerine gelince 2. Seviyeyi göster */

.tech-menu > li:hover .tech-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.tech-dropdown li {

    position: relative; /* 3. Seviye buna göre konumlanacak */

    border-bottom: 1px solid #f1f1f1;

}



.tech-dropdown li a {

    display: flex;

    justify-content: space-between; /* Ok işareti sağa gitsin */

    align-items: center;

    padding: 12px 20px;

    color: #333;

    text-decoration: none;

    font-size: 14px;

    transition: background 0.2s;

}



.tech-dropdown li:hover > a {

    background: #f8f9fa;

    color: #4285f4;

    padding-left: 25px; /* Hafif kayma efekti */

}



/* --- FLYOUT (3. Seviye - Yan Menü) --- */

.tech-submenu {

    position: absolute;

    top: 0;

    left: 100%; /* Parent'ın SAĞINA yapış */

    background: #fff;

    min-width: 220px;

    box-shadow: 0 8px 16px rgba(0,0,0,0.1);

    border-radius: 0 4px 4px 4px;

    opacity: 0;

    visibility: hidden;

    margin-left: 0px; /* Boşluk olmasın ki mouse kopmasın */

    border-left: 2px solid #4285f4;

    transition: all 0.2s ease;

}



/* 2. Seviye üzerine gelince 3. Seviyeyi göster */

.tech-dropdown li:hover > .tech-submenu {

    opacity: 1;

    visibility: visible;

}

/* --- 3. SEVİYE DROPDOWN STİLLERİ --- */

.dropdown-submenu {

    position: absolute;

    top: 0;

    left: 100%;

    background-color: #fff;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    min-width: 200px;

    opacity: 0;

    visibility: hidden;

    transform: translateX(15px);

    transition: all 0.25s ease;

    z-index: 1002;

    border-radius: 0 6px 6px 6px;

    border-left: 2px solid #4285f4;

}



.dropdown-item-wrapper:hover .dropdown-submenu {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}



/* Dropdown item wrapper için hover efekti */

.dropdown-item-wrapper {

    position: relative;

}



.dropdown-item-wrapper:hover > .dropdown-item {

    background-color: #f8f9fa;

    color: #4285f4;

    padding-left: 25px;

}



/* --- MOBİL MENÜ DÜZELTMELERİ --- */

.mobile-nav {

    display: none;

}



.mobile-nav.active {

    display: block;

}



/* Mobil dropdown için ok animasyonu */

.mobile-nav-link .fa-chevron-down {

    transition: transform 0.3s ease;

}

/* Masaüstü menü için hover state */

.nav-item:hover .dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



/* Dropdown item hover state */

.dropdown-item-wrapper:hover .dropdown-submenu {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}



/* Dropdown item hover efekti */

.dropdown-item-wrapper:hover > .dropdown-item {

    background-color: #f8f9fa;

    color: #4285f4;

    padding-left: 25px;

}

/* Mobilde header düzeltmeleri */

@media (max-width: 992px) {

    .navbar-area {

        display: none;

    }

    

    .mobile-menu-btn {

        display: block;

    }

    

    .header-actions .action-item span {

        display: none;

    }

}



/* Mobil dropdown item düzeni */

.mobile-sub-item {

    border-bottom: 1px solid #e8eaed;

}



.mobile-sub-item:last-child {

    border-bottom: none;

}



/* Ok ikonları için */

.menu-arrow {

    font-size: 10px;

    opacity: 0.6;

}

            .brands-grid {

                grid-template-columns: repeat(2, 1fr);

            }

        }



        /* --- MENÜ GÖRÜNÜRLÜK AYARLARI --- */



/* Menü dışına taşmaya izin ver */

.header-main, .navbar-area, .container {

    overflow: visible !important;

}



/* Menü yapılandırması */

.tech-menu { list-style: none; padding: 0; margin: 0; display: flex; }

.tech-menu > li { position: relative; }

.tech-menu > li > a { display: block; padding: 15px 20px; color: #fff; text-decoration: none; }



/* 2. Seviye (Aşağı Açılan) */

.tech-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    background: #fff;

    min-width: 240px;

    border-top: 2px solid #4285f4;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    

    /* Varsayılan Gizli */

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all 0.2s ease;

    z-index: 1000;

}



/* 1. Seviye Hover Olunca 2. Seviyeyi Göster */

.tech-menu > li:hover .tech-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.tech-dropdown li { position: relative; } /* 3. seviye buna göre hizalanacak */



.tech-dropdown li a {

    display: flex; 

    justify-content: space-between; 

    padding: 10px 15px; 

    color: #333; 

    text-decoration: none;

    border-bottom: 1px solid #f1f1f1;

}



.tech-dropdown li:hover > a { background: #f8f9fa; color: #4285f4; }



/* 3. Seviye (Yana Açılan - Flyout) */

.tech-submenu {

    position: absolute;

    top: 0;

    left: 100%; /* Tam sağa yapıştır */

    background: #fff;

    min-width: 220px;

    border-left: 2px solid #4285f4;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    

    /* Varsayılan Gizli */

    display: none; /* Opacity yerine display kullanmak daha garantidir */

    z-index: 1001;

}



/* 2. Seviye Hover Olunca 3. Seviyeyi Göster */

.tech-dropdown li:hover > .tech-submenu {

    display: block;

}

/* --- LİSTE İŞARETLERİNİ KALDIRMA --- */



/* Tüm menü seviyelerindeki (1., 2. ve 3. seviye) noktaları kaldır */

.tech-menu, 

.tech-dropdown, 

.tech-submenu {

    list-style: none !important;

    list-style-type: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



.tech-menu li, 

.tech-dropdown li, 

.tech-submenu li {

    list-style: none !important;

    list-style-type: none !important;

}



.brands-grid.new-brand-layout {

    display: grid;

    /* Yan yana 4 veya 5 dikdörtgen kutu için ayarlanır */

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 

    gap: 15px;

    padding: 10px 0;

}



/* Dikdörtgen Kutu Stili */

.brand-rect-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    

    /* Dikdörtgen Şekil (Yatay) */

    height: 90px; 

    padding: 15px;

    

    /* Görsel Stil */

    background: #fff;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    text-decoration: none;

    color: #333;

    transition: all 0.2s;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

}



.brand-rect-card:hover {

    border-color: #3b82f6;

    background: #f8faff;

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.15);

}



/* Marka Adı Metin Stili */

.brand-name-text {

    font-size: 1.7rem;

    

    color: #2c3e50;

    line-height: 1.2;

    margin-bottom: 5px;

}

/* --- YENİ KARŞILAŞTIRMA STİLLERİ --- */



.comparison-groups.compact-grid {

    display: grid;

    /* Yan yana 2 sütun */

    grid-template-columns: 1fr 1fr; 

    gap: 20px; 

    margin-bottom: 40px;

}



.comparison-group-card {

    /* Genel kart stili */

    background: #ffffff;

    border: 2px solid #3b82f6; /* Mavi dış çerçeve ile öne çıkar */

    border-radius: 12px;

    padding: 15px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    position: relative; /* VS etiketi için gereklidir */

}



/* Ürünler Arasındaki Esnek Konumlandırma */

.comparison-products {

    display: flex;

    justify-content: space-around; /* Ürünleri biraz ayırır */

    align-items: center;

    position: relative;

    padding: 10px 0;

    flex-grow: 1;

    z-index: 10;

}



.comparison-product {

    text-align: center;

    width: 45%; /* Daha az yer kaplar */

    /* VS etiketi için boşluk bırakır */

    padding: 0 10px; 

}



.comparison-product-image {

    height: 70px; /* Görsel yüksekliği küçüldü */

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 5px;

}



.comparison-product-image img {

    max-height: 100%;

    max-width: 100%;

    object-fit: contain;

}



.comparison-product-name {

    font-size: 13px;

    font-weight: 600;

    color: #444;

}



/* 💡 VS ETİKETİ (Estetik ve Öne Çıkarıcı) */

.comparison-vs-label {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    

    /* Renk ve Stil */

    background: #ea4335; /* Kırmızı Arkaplan */

    color: white;

    font-size: 11px;

    font-weight: 700;

    padding: 4px 8px;

    border-radius: 50%; /* Daire şekli */

    z-index: 20; /* Ürünlerin üzerinde kalması için */

    border: 3px solid #ffffff; /* Beyaz halka */

    box-shadow: 0 0 0 1px #ea4335; /* Kırmızı dış gölge */

}



/* BUTON */

.comparison-btn.compact-btn {

    margin-top: 15px;

    background: #34a853; /* Yeşil/Başarılı renk */

    color: white;

    padding: 8px; /* Daha küçük padding */

    border-radius: 8px;

    text-align: center;

    font-weight: 600;

    text-decoration: none;

}



.comparison-btn.compact-btn:hover {

    background: #2b8c47;

}



/* Mobilde Tek Sütun */

@media (max-width: 768px) {

    .comparison-groups.compact-grid {

        grid-template-columns: 1fr;

    }

}

/* Ürün Sayısı Metin Stili */

.brand-product-count {

    font-size: 0.75rem;

    color: #888;

    font-weight: 600;

    text-transform: uppercase;

}



/* Marka listesi başlığı için de bir düzenleme ekleyelim */

.brands-section .section-title {

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 25px;

    border-bottom: 2px solid #eee;

    padding-bottom: 10px;



    </style>