@charset "utf-8";

/* CSS Document */



     :root {

            --tech-blue: #0097b2; /* Görseldeki açık mavi tonu */

            --border-color: #ddd;

            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        }



        body {

            

            margin: 0;

            scroll-behavior: smooth; /* Yumuşak kaydırma için */

        }





        .container {

            max-width: 1100px;

            margin: 0 auto;

            padding: 0 20px;

        }



        /* Sabit Kategori Navigasyonu */

        .filter-nav {

            position: sticky;

            top: 0;

            background: white;

            padding: 20px 0;

            z-index: 100;

            display: flex;

            justify-content: center;

            gap: 15px;

            border-bottom: 1px solid #eee;

            margin-bottom: 40px;

        }



       



        /* Akordeon Kategori Başlığı */

        .category-section {

            margin-bottom: 30px;

			scroll-margin-top: 160px;

        }



        .category-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 15px 0;

            border-bottom: 1px solid var(--border-color);

            cursor: pointer;

            user-select: none;

        }



        .category-header h2 {

            margin: 0;

            font-size: 24px;

            font-weight: 500;

            color: #333;

			font-family: 'Quicksand', sans-serif;

        }



        /* Artı-Eksi İkonu */

        .toggle-icon {

            position: relative;

            width: 20px;

            height: 20px;

            transition: var(--transition);

        }



        .toggle-icon::before, .toggle-icon::after {

            content: '';

            position: absolute;

            background-color: var(--tech-blue);

            transition: var(--transition);

        }



        /* Yatay çizgi (Eksi) */

        .toggle-icon::before {

            top: 9px;

            left: 0;

            width: 20px;

            height: 2px;

        }



        /* Dikey çizgi (Artı yapmak için) */

        .toggle-icon::after {

            top: 0;

            left: 9px;

            width: 2px;

            height: 20px;

            transform: scaleY(0); /* Başlangıçta eksi (-) olması için 0 */

        }



        /* Kapalı Durumda Artı (+) Görünümü */

        .collapsed .toggle-icon::after {

            transform: scaleY(1);

        }

        .collapsed .toggle-icon {

            transform: rotate(90deg);

        }



        /* Grid İçerik Alanı */

        .category-content {

            max-height: 2000px; /* Açıkken görünen yükseklik */

            overflow: hidden;

            transition: max-height 0.5s ease-in-out, opacity 0.3s;

            opacity: 1;

            padding: 25px 10px 0 10px;

        }



        .collapsed + .category-content {

            max-height: 0;

            opacity: 0;

            padding-top: 0;

        }



        /* Logo Kartları */

        .references-grid {

            display: grid;

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

            gap: 25px;

        }



        .ref-card {

            border: 1px solid #f0f0f0;

            border-radius: 10px;

            padding: 15px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            min-height: 120px;

            text-align: center;

			background-color: #fff;

			font-family: 'Quicksand', sans-serif;

			position: relative; 

  			overflow: hidden; 

    		transition: var(--transition);

        }



        .ref-card:hover {

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

			transform: translateY(-5px);

        }



        .ref-card img {

            max-width: 85%; /* Logonun kart içinde çok yayılmasını engeller */

    		max-height: 80px;

    		object-fit: contain;

   			margin-bottom: 12px; 

			transition: all 0.4s ease; 

        }

		.ref-card:hover img {

			filter: brightness(1.1);

		}





        .ref-card span {

            font-size: 13px;

            color: #555;

            line-height: 1.3;

        }



        @media (max-width: 992px) {

	

            

			.bm-tabs-sticky-wrapper {

				padding: 10px 0 !important;

				background: rgba(255, 255, 255, 0.95); /* Mobilde zemin net olsun */

			}

			.product-tabs-wrapper {

				display: flex !important;

				flex-wrap: nowrap !important;

				overflow-x: auto !important;

				/* Ortadan başlamayı engellemek için sola yaslıyoruz */

				justify-content: flex-start !important; 



				/* Ekranın tam solundan başlaması için zorunlu ayarlar */

				width: 100vw !important;

				position: relative !important;

				left: 0 !important;

				margin: 0 !important;

				padding: 10px 20px !important; /* İçeriden boşluk vererek ilk butonun yapışmasını önleriz */



				/* Kaydırma akıcılığı */

				-webkit-overflow-scrolling: touch;

				scroll-snap-type: x proximity;

				scrollbar-width: none;

			}



			.product-tabs-wrapper::-webkit-scrollbar {

				display: none; /* Chrome/Safari'de scrollbar'ı gizle */

			}



			/* 2. Butonların daralmasını engelliyoruz */

			.btn-product-tab {

				flex: 0 0 auto !important; 

				min-width: 110px !important;

				max-width: 140px;

				margin-right: 3px !important;

				/* Yazıların buton içinde düzgün durması için */

				white-space: nowrap !important;

				display: flex !important;

				align-items: center;

				justify-content: center;

				text-align: center;

				height: 40px !important;

			    padding: 5px 14px 3px; 

			}

			.references-grid {

				display: grid !important;

				/* Ekranı tam olarak 2 eşit parçaya böler */

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

				/* Kartlar arasındaki boşluğu mobilde biraz daraltıyoruz */

				gap: 12px !important; 

				padding: 10px 0 !important;

			}



			/* Kartların kendisi */

			.ref-card {

				/* Mobilde kart yüksekliğini biraz daha küçültelim ki ekranı kaplamasın */

				min-height: 100px !important; 

				padding: 15px !important;

				border-radius: 8px !important;

			}



			/* Kartın içindeki logo */

			.ref-card img {

				max-height: 45px !important; /* Logoların kutudan taşmasını engeller */

				margin-bottom: 8px !important;

			}



			/* Kartın altındaki isim yazısı */

			.ref-card span {

				font-size: 11px !important; /* Mobilde yazıların sığması için fontu küçülttük */

				line-height: 1.2 !important;

			}

		

			

        }