body { margin: 0; font-family: 'Segoe UI', sans-serif; background-color: #f4f4f4; }

/* 1. Modern Üst Çubuk */
.top-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 5%; background: #002244; color: #ffcc00; font-size: 13px;
    border-bottom: 2px solid #ffcc00; transition: opacity 0.3s;
}
.contact-info { display: flex; gap: 20px; }
.contact-info span { display: flex; align-items: center; gap: 8px; }
.social-icons { display: flex; gap: 15px; }
.social-icons a { color: white; transition: 0.3s; }
.social-icons a:hover { color: #ffcc00; }

/* 2. Degrade Menü */
.main-nav {
    display: flex; align-items: center; padding: 20px 5%;
    background: linear-gradient(90deg, #003366, #0055aa, #ffcc00);
    color: white; position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); min-height: 80px;
}

/* 3. Logo Sarkan ve Neon Efektli Tasarım */
.brand-logo {
    height: 160px; position: absolute; top: 5px; left: 40px; z-index: 1001;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)) drop-shadow(0 0 15px rgba(255,255,255,0.6));
    background: transparent;
}
.brand-logo:hover { 
    transform: scale(1.15) rotate(2deg); 
    filter: drop-shadow(0 0 20px white) drop-shadow(0 0 35px white); 
}

/* 4. Menü Linkleri */
.menu-items { 
    display: flex; list-style: none; gap: 45px; margin: 0; padding: 0;
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 1002;
}
.menu-items a { 
    color: white; text-decoration: none; font-weight: 600; font-size: 16px; 
    transition: all 0.3s ease; padding: 12px 15px; white-space: nowrap;
}
.menu-items a:hover { 
    background: rgba(255, 255, 255, 0.25); border-radius: 10px; text-shadow: 0 0 10px white; 
}

/* 5. Alt Menü (Dropdown) */
.dropdown { position: relative; }
.dropdown-menu {
    display: none; position: absolute; top: 100%; left: 0;
    background: #003366; min-width: 160px; padding: 10px 0;
    border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,0.3); 
    list-style: none; z-index: 1003;
}
.dropdown-menu li a { display: block; padding: 10px 20px; font-size: 14px; color: white; }
.dropdown-menu li a:hover { background: #ffcc00; color: #003366; }

/* 6. Ara ve Sepet */
.nav-tools { 
    font-size: 20px; cursor: pointer; display: flex; gap: 20px; margin-left: auto; z-index: 1002; color: white;
}
.nav-tools span:hover { color: #fff; text-shadow: 0 0 10px white; }

/* BANNER İÇİN KRİTİK DÜZELTME */
.carousel-control-prev, .carousel-control-next { z-index: 100 !important; cursor: pointer; }
.carousel-inner { z-index: 1; }

/* MASAÜSTÜ GÜVENCESİ */
@media (min-width: 1025px) {
    .dropdown:hover .dropdown-menu { display: block; }
}

/* MOBİL DÜZENLEMELER */
@media (max-width: 1024px) {
    .main-nav { justify-content: space-between !important; padding: 10px 15px !important; }
    #menu-toggle { display: block !important; order: 1; border: none; background: none; font-size: 24px; color: #ffc107; }
    .logo-container { order: 2; margin: 0 auto; }
    .brand-logo { height: 80px; position: static; filter: none; }
    .nav-tools { order: 3; }
    
    .menu-items { 
        display: none !important; flex-direction: column; width: 100%; 
        background: #003366 !important; position: absolute; top: 100%; left: 0; 
        z-index: 9999; padding: 10px 0; box-shadow: 0 5px 10px rgba(0,0,0,0.1); 
    }
    .menu-items.active { display: flex !important; }
    
    .dropdown-menu { display: none !important; position: static !important; background: #002244 !important; width: 100%; }
    .dropdown-menu.show { display: block !important; }
}