/* --- MOBİL VE TABLET İÇİN ÖZEL AYARLAR (1200px Altı) --- */ @media (max-width: 1199px) { /* 1. Menü Kutusu ve Genel Renkler */ .navbar-collapse { background-color: #ffffff; /* Zemin BEYAZ */ position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999; border-top: 3px solid #ff0000; /* Üstte kırmızı çizgi */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); max-height: 70vh; overflow-y: auto; } /* 2. Linklerin Normal Hali */ .navbar-nav .nav-link { color: #23244a !important; /* Yazı KOYU */ font-weight: 600; padding: 15px 20px !important; /* Mobilde rahat basılsın */ border-bottom: 1px solid #f1f1f1; } /* 3. Linkin Üstüne Gelince veya Tıklayınca (KIRMIZI ZEMİN - BEYAZ YAZI) */ .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { background-color: #ff0000 !important; color: #ffffff !important; } /* 4. Dropdown Ok İşaretleri (+ / -) */ .navbar-nav .dropdown-toggle::after { content: '+'; border: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: bold; color: #23244a !important; /* Normalde koyu */ } /* Hover olunca Ok İşareti BEYAZ olsun */ .navbar-nav .dropdown-toggle:hover::after, .navbar-nav .nav-item.show .dropdown-toggle::after { color: #ffffff !important; content: '-'; } /* 5. Alt Menüler (Hakkımızda vb.) - Gri Zemin */ .navbar-nav .dropdown-menu { background-color: #f7f7f7 !important; border: none !important; margin: 0 !important; padding: 0 !important; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.05); } .navbar-nav .dropdown-menu li a, .navbar-nav .dropdown-menu .dropdown-item { color: #333333 !important; /* Yazı KOYU */ padding: 12px 20px 12px 40px !important; border-bottom: 1px solid #e0e0e0; font-size: 14px; } /* Alt menüye tıklayınca */ .navbar-nav .dropdown-menu li a:hover { background-color: #ededed !important; color: #ff0000 !important; /* Yazı Kırmızı */ padding-left: 45px !important; /* Hafif sağa kayma */ } /* 6. "Teklif Al" Butonu Mobilde Görünsün */ .navbar-collapse .text-center { display: block !important; padding: 20px; border-top: 1px solid #eee; margin-top: 10px; } .navbar-collapse .text-center .btn { display: block !important; width: 100% !important; } } /* 7. Mobil Menü İkonu ve Çerçevesi (KIRMIZI YAPAR) */ .navbar-toggler { border-color: #ff0000 !important; } .navbar-toggler-icon { /* Bootstrap standart ikonunu Kırmızı (#ff0000) SVG ile değiştiriyoruz */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* --- MOBİL MENÜ AYRIŞTIRMA CSS'İ --- */ /* Masaüstünde (1200px üstü) butonu gizle, link normal çalışsın */ @media (min-width: 1200px) { .dropdown-toggle-btn { display: none !important; } /* Masaüstünde menü hover ile açılması için gerekli (Bootstrap standart) */ .nav-item.dropdown:hover .dropdown-menu { display: block; margin-top: 0; } } /* Mobilde (1199px altı) buton ve link ayarları */ @media (max-width: 1199px) { /* Link ve Butonu yan yana koyan kapsayıcı */ .mobile-nav-split { width: 100%; border-bottom: 1px solid #f1f1f1; position: relative; } /* Linkin kendisi (Butonun olduğu yer kadar boşluk bırakır) */ .mobile-nav-split .nav-link { flex-grow: 1; border-bottom: none !important; /* Çizgiyi kapsayıcıya verdik */ } /* Açma/Kapama Butonu */ .dropdown-toggle-btn { background: transparent; border: none; border-left: 1px solid #f1f1f1; width: 50px; /* Buton genişliği */ height: 53px; /* Link yüksekliği ile aynı */ display: flex; align-items: center; justify-content: center; color: #23244a; font-size: 16px; cursor: pointer; transition: all 0.3s ease; } /* Butona basılınca veya üzerine gelince */ .dropdown-toggle-btn:hover, .dropdown-toggle-btn[aria-expanded="true"] { background-color: #ff0000; color: #ffffff; } /* Menü açıldığında ikonu eksi (-) yap */ .dropdown-toggle-btn[aria-expanded="true"] i::before { content: "\f068"; /* FontAwesome Minus ikonu */ } /* Eski CSS'ten kalan ::after ok işaretlerini temizle */ .navbar-nav .dropdown-toggle::after { display: none !important; } } /* --- MOBİL BUTON ACTIVE DURUMU --- */ @media (max-width: 1199px) { /* Eğer butona "active" sınıfı verilmişse arka planı kırmızı, ikon beyaz olsun */ .dropdown-toggle-btn.active { background-color: #ff0000 !important; color: #ffffff !important; } } /* --- MASAÜSTÜ MENÜ OKLARI (MODERN VE DÜZGÜN HİZALANMIŞ) --- */ @media (min-width: 1200px) { /* 1. Mobilde ayırmak için kullandığımız div'i 'Flex' yaparak yan yana zorluyoruz */ .nav-item.dropdown .mobile-nav-split { display: flex !important; align-items: center; /* Dikeyde tam ortala */ width: auto !important; border: none !important; padding: 0 !important; } /* 2. Linkin yanına FontAwesome oku ekliyoruz */ .nav-item.dropdown .nav-link::after { content: '\f078'; /* Şık aşağı ok ikonu (Chevron Down) */ font-family: 'Font Awesome 5 Free'; font-weight: 900; border: none; /* Eski border üçgeni iptal et */ font-size: 11px; /* İkon boyutu (Metinden biraz küçük olsun) */ margin-left: 7px; /* Metin ile ok arasındaki boşluk */ display: inline-block; transition: transform 0.3s ease; /* Dönme animasyonu */ line-height: 1; /* Satır yüksekliğini sıfırla ki kayma yapmasın */ } /* 3. Mouse ile üzerine gelince oku döndür */ .nav-item.dropdown:hover .nav-link::after { transform: rotate(180deg); } } /* --- MOBİL MENÜ SEÇİLİ ÖĞE RENGİ DÜZELTME --- */ @media (max-width: 1199px) { /* 1. Alt Menüdeki Aktif Eleman (Örn: Alüminyum Kaynak) */ .navbar-nav .dropdown-menu .dropdown-item.active { color: #ff0000 !important; /* Yazı Kırmızı */ background-color: transparent !important; /* Arka plan yok */ background-image: none !important; font-weight: 700 !important; /* Yazı kalın olsun */ padding-left: 45px !important; /* Seçili olduğu belli olsun diye biraz sağda */ } /* 2. Tıklanınca oluşan mavi/gri arka planı engelle */ .navbar-nav .dropdown-menu .dropdown-item:active, .navbar-nav .dropdown-menu .dropdown-item:focus { background-color: transparent !important; color: #ff0000 !important; } }