/* GENEL STİLLER */

/* Koyu arka plan, gradient veya düz renk kullanabiliriz. */
body {
    margin: 0;
    padding-top: 45px; /* Sabit navbar için üst boşluk */
    font-family: 'Roboto', Arial, sans-serif; /* Örnek bir gaming/e-spor hissi için */
    background: #1c1c1c; /* Tamamen koyu bir arka plan */
    color: #ffffff; /* Metin rengi */
}

/* Navbar */
.navbar-dark.bg-dark {
    background-color: #0d0d0d !important; /* Daha koyu bir ton */
    border-bottom: 2px solid #ff6600; /* Turuncu bir alt çizgi */
}

.nav-link {
    color: #ffffff !important;
    margin: 0 5px;
    font-weight: 500;
}

.nav-link:hover {
    color: #ff6600 !important;
}

/* Navbar Brand */
.navbar-brand {
    font-weight: bold;
    font-size: 1.8rem;
    color: #ff6600 !important; /* Logo yazısını turuncu yapalım */
}

/* HERO BÖLÜMÜ */
.hero-section {
    background: url('../img/esports-bg.jpg') no-repeat center center; /* e-spor temalı arka plan */
    background-size: cover;
    color: #ffffff;
    padding: 150px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    border-radius: 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Hero başlık */
.hero-section h1.display-4 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Hero alt açıklama */
.hero-section p.lead {
    font-size: 1.3rem;
    margin-bottom: 30px;
}

/* Hero buton */
.hero-section .btn-primary {
    background-color: #ff6600;
    border: none;
    font-size: 1.2rem;
    padding: 10px 30px;
}

.hero-section .btn-primary:hover {
    background-color: #cc5200;
}

/* Kartlar */
.card {
    background-color: #2b2b2b;
    border: none;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #ffffff;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px #ff6600;
}

/* Kart Görselleri (eşit boyutlandırma için) */
.card-img-top-event {
    width: 100%;          /* Kart genişliğine uyum sağlar */
    height: 200px;        /* Tüm resimler 200px yüksekliğinde */
    object-fit: cover;    /* Resmi çerçeveye uyacak şekilde kes */
    object-position: center;
}

/* Kart başlığı */
.card .card-title {
    color: #ff6600;
}

/* Projeler, Etkinlikler bölümü */
#projects, #events {
    background-color: #1c1c1c;
    border-radius: 0;
    padding: 40px;
    box-shadow: none;
}

/* Form Stilleri */
#contactForm input,
#contactForm textarea {
    background-color: #2b2b2b;
    color: #ffffff;
    border: 1px solid #444;
}

#contactForm input:focus,
#contactForm textarea:focus {
    outline: none;
    border-color: #ff6600;
}

/* Butonlar */
.btn-primary {
    background-color: #ff6600;
    border: none;
}

.btn-primary:hover {
    background-color: #cc5200;
}

/* Footer */
footer.bg-dark {
    background-color: #0d0d0d !important;
    border-top: 2px solid #ff6600;
}

/* Dropdown Menü (animasyonlu, siyah arka plan) */
.dropdown-menu {
    display: block !important; 
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1000 !important;
  
    /* Renk ve stil ayarları */
    background-color: #0d0d0d !important; /* Siyah arka plan */
    border: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    
    /* Animasyon başlangıç değerleri */
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    pointer-events: none !important;
    
    /* Geçiş animasyonu */
    transition: 
      opacity 0.5s ease, 
      transform 0.5s ease, 
      visibility 0.5s ease !important;
  }
.dropdown-menu.show {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  
/* Dropdown öğeleri (linkler) */
.dropdown-item {
    color: #ffffff !important;
    background-color: transparent !important;
    transition: background-color 0.3s ease;
  }

  .dropdown-item:hover {
    background-color: #ff6600 !important;
    color: #ffffff !important;
  }

/* Masaüstü için hover ile açma animasyonu */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
      visibility: visible !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
    }
}


/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}