/* ======================= MOBİL MENÜ STİLLERİ ======================= */
    /* Açılır (Dropdown) Menü */
/* Dropdown menülerin temel stilini ayarlar */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
    padding: 10px;
    display: block;
    text-decoration: none;
    color: white; /* Yazı rengi beyaz */
    position: relative;
}

.dropdown-toggle::after {
    content: "▼";
    font-size: 12px;
    margin-left: 5px;
    color: white; /* Ok simgesi rengi beyaz */
    transition: transform 0.3s ease;
}

.dropdown.active .dropdown-toggle::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333; /* Menü arka plan rengi koyu gri */
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-top: 2px solid #007bff; /* Alt menü olduğunu belli etmek için üst çizgi */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown.active .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu li {
    padding: 10px;
}

.dropdown-menu li a {
    color: white; /* Menü içindeki yazı rengi beyaz */
    text-decoration: none;
    display: block;
    padding: 8px 16px;
}

.dropdown-menu li a:hover {
    background-color: #007bff; /* Üzerine gelindiğinde arka plan rengi mavi */
    color: white;
}
/* ----------------------------------------------- */
.mobile-menu {
  position: fixed; /* Sayfa kaydırsa bile sabit kalır */
  top: 0; /* Üstten sıfırlanmış pozisyon */
  right: -300px; /* Başlangıçta ekran dışında (sağdan -300px) */
  width: 300px; /* Menü genişliği */
  height: 100%; /* Tam ekran yüksekliği */
  background-color: #007bff; /* Ana arkaplan rengi (mavi) */
  z-index: 1100; /* Diğer elementlerin üzerinde görünmesini sağlar */
  transition: right 0.3s ease; /* Açılış/kapanış animasyonu */
  display: none; /* Varsayılan olarak gizli (JS ile aktif edilecek) */
  flex-direction: column; /* İçeriği dikey sıralar */
  justify-content: space-between; /* İçerikleri arasında eşit boşluk */
  overflow-y: auto; /* İçerik ekran yüksekliğini aşarsa dikey kaydırma sağlar */
}

/* Aktif olduğunda sağdan sıfır konumuna gelir */
.mobile-menu.active {
  right: 0; /* Menüyü ekrana getirir */
}

/* ÜST KISIM (KAPATMA BUTONU ALANI) */
/* ----------------------------------------------- */
.mobile-menu-header {
  display: flex; /* İçindeki elementi esnek hizalar */
  justify-content: flex-end; /* Kapatma butonunu sağa yaslar */
  padding: 10px; /* İç boşluk (Butonun etrafında nefes alanı) */
}

/* Kapatma butonu stilleri */
.mobile-menu-close {
  background: none; /* Arkaplan rengi yok */
  border: none; /* Kenarlık yok */
  font-size: 30px; /* X işaretinin boyutu */
  color: #fff; /* Beyaz renk */
  cursor: pointer; /* Üzerine gelindiğinde el işareti */
}
/* Kapatma butonu boyutunu değiştirmek için font-size'ı ayarla */


/* ANA MENÜ LİSTE ALANI */
/* ----------------------------------------------- */
.mobile-menu-list {
  list-style: none; /* Liste noktalarını kaldırır */
  padding: 0; /* Varsayılan padding'i sıfırla */
  margin: 20px 0; /* Üstten ve alttan 20px boşluk */
  flex-grow: 1; /* Kalan boş alanı doldurur (header ve bottom arasında) */
}

.mobile-menu-list li {
  margin: 10px 0; /* Her menü öğesi arası 10px boşluk */
}

.mobile-menu-list li a {
  color: #fff; /* Metin rengi beyaz */
  text-decoration: none; /* Alt çizgi yok */
  font-size: 18px; /* Yazı boyutu */
  display: block; /* Tüm alanı tıklanabilir yapar */
  padding: 10px 20px; /* İç boşluk (Yazının etrafında) */
  transition: background 0.3s ease; /* Hover efekti için geçiş */
}

/* Fare üzerine gelindiğinde arkaplan rengi değişimi */
.mobile-menu-list li a:hover {
  background-color: #0056b3; /* Koyu mavi ton */
}
/* Hover rengini değiştirmek için background-color'ü güncelle */


/* SABİT ALT MENÜ (GİRİŞ/KAYIT) */
/* ----------------------------------------------- */
    .mobile-menu-bottom {
      list-style: none;
      padding: 10px;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .mobile-menu-bottom li {
      text-align: center;
    }
    .mobile-menu-bottom li a {
      display: block;
      background: #0056b3;
      color: #fff;
      text-decoration: none;
      padding: 10px;
      border-radius: 4px;
      transition: background 0.3s;
    }
    .mobile-menu-bottom li a:hover {
      background: #004494;
    }
    /* Eğer 3 adet alt menü varsa: üçüncü öğeyi tam genişlikte ortalamak */
    .mobile-menu-bottom li:nth-child(3):nth-last-child(1) {
      grid-column: 1 / -1;
    }

/* Fare üzerine gelindiğinde arkaplan rengi değişimi */
.mobile-menu-bottom li a:hover {
  background-color: #0056b3; /* Koyu mavi ton */
}

/* MOBİL MENÜ TOGGLE BUTONU */
/* ----------------------------------------------- */
.mobile-menu-toggle {
  position: fixed;           /* Butonun sabit konumda kalmasını sağlar */
  top: 12px;                 /* Üst boşluk: Bu değeri artırarak butonun yukarıdaki mesafesini artırabilirsiniz */
  left: 20px;                /* Sol boşluk: Butonun solda yer alması için sol konum değeri */
  background-color: #007bff; /* Buton arka plan rengi */
  border: none;              /* Kenarlık yok */
  color: #fff;               /* Yazı rengi */
  font-size: 24px;           /* Yazı boyutu (ikon boyutu) */
  padding: 10px;             /* İç boşluk */
  border-radius: 20%;        /* Daire şeklinde görünüm */
  z-index: 1200;             /* Diğer elementlerin üstünde görünmesini sağlar */
  display: none;             /* Varsayılan olarak gizli; JS veya media query ile gösterilir */
  cursor: pointer;           /* Fareyle üzerine gelindiğinde el işareti */
}
/* Buton boyutunu değiştirmek için padding ve font-size'ı birlikte ayarla */

/* MOBİL EKRANLAR İÇİN MEDIA QUERY */
/* ----------------------------------------------- */
@media only screen and (max-width: 768px) {
  .mobile-menu {
    display: flex; /* Mobil menüyü görünür yapar */
  }
  .mobile-menu-toggle {
    display: block; /* Menü açma/kapama butonunu görünür yapar */
    /* Aşağıdaki satırlar kaldırıldı ki buton sabit (fixed) konumunu korusun ve logoyla hizalansın:
       position: relative;
       top: auto;
       right: auto;
    */
  }
}
/* Bu media query, ekran genişliği 768px'den küçük olduğunda mobil menüyü ve toggle butonunu aktif eder. */


/* GENEL STİLLER */
/* ----------------------------------------------- */
body {
  font-family: Arial, sans-serif; /* Varsayılan yazı tipi */
  margin: 0; /* Varsayılan margin'i sıfırla */
  padding: 0; /* Varsayılan padding'i sıfırla */
  background: linear-gradient(to bottom, #e6f0ff, #ffffff, #f8f9fa); /* Arkaplanda dikey gradient */
}
/* Arkaplan rengini değiştirmek için gradient renklerini güncelleyebilirsiniz. */


/* ÜST ÇİZGİ (TOP LINE) */
/* ----------------------------------------------- */
.top-line {
  height: 5px; /* Çizgi kalınlığı */
  background-color: #002147; /* Koyu mavi renk */
  position: fixed; /* Sayfa kaydırsa bile sabit kalır */
  top: 0; /* Üstten sıfırlanmış pozisyon */
  left: 0; /* Soldan sıfırlanmış pozisyon */
  width: 100%; /* Tam genişlik */
  z-index: 1050; /* Diğer elementlerin üzerinde görünmesini sağlar */
}
/* Çizgi rengini değiştirmek için background-color'ü güncelleyin. */


/* NAVBAR (MENÜ ÇUBUĞU) */
/* ----------------------------------------------- */
.navbar {
  position: sticky; /* Sayfa kaydırıldığında yapışkan kalır */
  top: 5px; /* Üst çizgiden 5px aşağıda başlar */
  z-index: 1000; /* Diğer elementlerin üzerinde görünmesini sağlar */
  background-color: #f8f9fa; /* Açık gri arkaplan */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
  transition: top 0.3s; /* Yapışkan menü animasyonu */
}
/* Arkaplan rengini veya gölgeyi değiştirmek için ilgili değerleri güncelleyin. */

.navbar .navbar-brand img {
  height: 50px; /* Logo yüksekliği */
}
/* Logo boyutunu değiştirmek için height değerini güncelleyin. */

.navbar .nav-link {
  color: #000000; /* Menü bağlantılarının rengi (siyah) */
  font-weight: 500; /* Yazı kalınlığı */
  white-space: nowrap; /* Metinlerin alt satıra geçmesini engeller */
  padding: 5px 10px; /* İç boşluk */
}
/* Menü bağlantılarının rengini veya boyutunu değiştirmek için color ve padding değerlerini güncelleyin. */

.navbar .nav-link:hover {
  color: #ffffff; /* Fare üzerine gelindiğinde metin rengi (beyaz) */
  background-color: #0056b3; /* Fare üzerine gelindiğinde arkaplan rengi (koyu mavi) */
  border-radius: 5px; /* Köşeleri yuvarlar */
  transition: all 0.3s ease-in-out; /* Geçiş efekti */
}
/* Hover rengini veya animasyon süresini değiştirmek için ilgili değerleri güncelleyin. */

.navbar-toggler {
  border-color: #ffffff; /* Menü açma/kapama butonunun kenarlık rengi */
}
/* Kenarlık rengini değiştirmek için border-color'ü güncelleyin. */

/* MOBİL MENÜ LOGO */
/* ----------------------------------------------- */
/* Mobil Menü Logo Stili */
.mobile-menu-logo {
  display: block;
  margin: 0 auto;     /* Ortalamak için */
  max-width: 50%;     /* Genişliği %50 ile sınırlandırır */
  height: auto;       /* Yüksekliği orantılı ayarlar */
  padding-top: 10px;  /* Üstten biraz boşluk ekler */
}

.mobile-menu-logo img {
  max-height: 50px; /* Logo yüksekliği */
  display: inline-block;
}

/* BAŞVURU FORMU STİLLERİ */
/* ----------------------------------------------- */
.basvuruWidget {  
  width: 100%; /* Tam genişlik */
  max-width: 400px; /* Maksimum genişlik (400px) */
  background: #fff; /* Beyaz arkaplan */
  border-radius: 10px; /* Köşeleri yuvarlar */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
  padding: 5px; /* İç boşluk */
  margin: 0 auto; /* Ortalama */
}
/* Form genişliğini veya gölgeyi değiştirmek için max-width ve box-shadow değerlerini güncelleyin. */

.formTitle {  
  font-size: 18px; /* Başlık yazı boyutu */
  font-weight: bold; /* Başlık kalınlığı */
  color: #333; /* Başlık rengi (koyu gri) */
  text-align: center; /* Metni ortalar */
  margin-bottom: 15px; /* Alt boşluk */
}
/* Başlık boyutunu veya rengini değiştirmek için font-size ve color değerlerini güncelleyin. */

.formHr {  
  width: 60px; /* Çizgi genişliği */
  margin: 0 auto; /* Çizgiyi ortalar */
  border: 2px solid #007bff; /* Çizgi rengi (mavi) ve kalınlığı */
}
/* Çizgi rengini veya genişliğini değiştirmek için border ve width değerlerini güncelleyin. */

.card-body ul {  
  padding: 0; /* Liste iç boşluğunu sıfırla */
  list-style: none; /* Liste noktalarını kaldırır */
}

.homeContactInput {  
  display: flex; /* İçeriği yatay hizalar */
  align-items: center; /* İçerikleri dikeyde ortalar */
  border: 1px solid #ccc; /* Kenarlık rengi (açık gri) */
  border-radius: 5px; /* Köşeleri yuvarlar */
  padding: 8px; /* İç boşluk */
  background: #f9f9f9; /* Açık gri arkaplan */
  margin-bottom: 15px; /* Alt boşluk */
  width: 100%; /* Tam genişlik */
}
/* Input alanlarının stilini değiştirmek için border, padding veya background değerlerini güncelleyin. */

.homeContactInput .icon {  
  margin-right: 10px; /* İkon ile metin arasındaki boşluk */
  color: #007bff; /* İkon rengi (mavi) */
}
/* İkon rengini değiştirmek için color değerini güncelleyin. */

.contactText {  
  width: 100%; /* Tam genişlik */
  border: none; /* Kenarlık yok */
  outline: none; /* Odaklandığında çıkan çerçeveyi kaldırır */
  background: none; /* Arkaplan rengi yok */
  font-size: 14px; /* Yazı boyutu */
}
/* Input metin boyutunu değiştirmek için font-size değerini güncelleyin. */

.formButton button {  
  width: 100%; /* Tam genişlik */
  background: #007bff; /* Buton arkaplan rengi (mavi) */
  color: #fff; /* Buton metin rengi (beyaz) */
  border: none; /* Kenarlık yok */
  padding: 12px; /* İç boşluk */
  font-size: 16px; /* Yazı boyutu */
  border-radius: 5px; /* Köşeleri yuvarlar */
  transition: 0.3s; /* Geçiş efekti */
}
/* Buton rengini veya boyutunu değiştirmek için background, padding ve font-size değerlerini güncelleyin. */

.formButton button:hover {  
  background: #0056b3; /* Fare üzerine gelindiğinde arkaplan rengi (koyu mavi) */
}
/* Hover rengini değiştirmek için background değerini güncelleyin. */

/* MOBİL UYUMLULUK İÇİN MEDYA SORGULARI (480px ve altı) */
/* ----------------------------------------------- */
@media (max-width: 480px) {
  .basvuruWidget {
    max-width: 100%; /* Mobilde formun tam genişlikte olmasını sağlar */
    padding: 15px; /* İç boşluk azaltıldı */
    margin: 0 10px; /* Kenarlardan 10px boşluk bırakır */
  }
  /* Bu stil, formun mobil cihazlarda daha iyi görünmesini sağlar. */

  .formTitle {
    font-size: 16px; /* Mobilde başlık boyutu küçültüldü */
  }
  /* Başlık boyutunu değiştirmek için font-size değerini güncelleyin. */

  .formButton button {
    padding: 10px; /* Buton iç boşluğu azaltıldı */
    font-size: 15px; /* Buton yazı boyutu küçültüldü */
  }
  /* Buton boyutunu değiştirmek için padding ve font-size değerlerini güncelleyin. */
}
/* Bu medya sorgusu, 480px ve altı ekran genişliklerinde geçerlidir. */


/* FOOTER BAŞVURU FORMU STİLLERİ */
/* ----------------------------------------------- */
.footer-application-form {
  background: #f8f9fa; /* Açık gri arkaplan */
  padding: 20px; /* İç boşluk */
  text-align: center; /* Metni ortalar */
  border-radius: 10px; /* Köşeleri yuvarlar */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
  margin-top: 20px; /* Üstten boşluk */
}
/* Arkaplan rengini veya gölgeyi değiştirmek için background ve box-shadow değerlerini güncelleyin. */

.footer-form {
  display: flex; /* İçeriği yatay hizalar */
  justify-content: center; /* İçeriği ortalar */
  align-items: center; /* İçeriği dikeyde ortalar */
  gap: 15px; /* Elemanlar arası boşluk */
  flex-wrap: wrap; /* Elemanların alt satıra geçmesini sağlar */
}
/* Flex yapısını değiştirmek için justify-content veya align-items değerlerini güncelleyin. */

.footer-form input {
  padding: 10px; /* İç boşluk */
  border: 1px solid #ccc; /* Kenarlık rengi (açık gri) */
  border-radius: 5px; /* Köşeleri yuvarlar */
  width: 200px; /* Input genişliği */
}
/* Input boyutunu veya stilini değiştirmek için width, padding veya border değerlerini güncelleyin. */

.footer-form button {
  background: #007bff; /* Buton arkaplan rengi (mavi) */
  color: white; /* Buton metin rengi (beyaz) */
  padding: 10px 20px; /* İç boşluk */
  border: none; /* Kenarlık yok */
  border-radius: 5px; /* Köşeleri yuvarlar */
  cursor: pointer; /* Fare imleci el işareti olur */
  transition: background 0.3s ease; /* Hover efekti için geçiş */
}
/* Buton rengini veya boyutunu değiştirmek için background, padding veya border-radius değerlerini güncelleyin. */

.footer-form button:hover {
  background: #0056b3; /* Fare üzerine gelindiğinde arkaplan rengi (koyu mavi) */
}
/* Hover rengini değiştirmek için background değerini güncelleyin. */


/* FOOTER (ALT KISIM) STİLLERİ */
/* ----------------------------------------------- */
.footer {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)), url('../assets/images/empty-image2.png'); /* Gradient ve arkaplan resmi */
  background-size: cover; /* Arkaplan resmini kaplar */
  background-position: center; /* Arkaplan resmini ortalar */
  color: white; /* Metin rengi (beyaz) */
  padding: 60px 0; /* Üstten ve alttan boşluk */
  text-align: center; /* Metni ortalar */
  position: relative; /* Konumlandırma için */
  overflow: hidden; /* Taşan içeriği gizler */
  border-top: 5px solid #007bff; /* Üstte mavi çizgi */
}
/* Arkaplan resmini veya gradient rengini değiştirmek için background değerini güncelleyin. */

.footer-section {
  display: flex; /* İçeriği yatay hizalar */
  justify-content: space-between; /* Elemanlar arasında eşit boşluk */
  align-items: flex-start; /* İçeriği üstten hizalar */
  flex-wrap: wrap; /* Elemanların alt satıra geçmesini sağlar */
}
/* Flex yapısını değiştirmek için justify-content veya align-items değerlerini güncelleyin. */

.footer-application-form,
.right-sidebar {
  background: rgba(255, 255, 255, 0.2); /* Yarı saydam beyaz arkaplan */
  padding: 20px; /* İç boşluk */
  border-radius: 10px; /* Köşeleri yuvarlar */
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1); /* Hafif gölge efekti */
  margin: 10px; /* Dış boşluk */
  flex: 1; /* Esnek genişlik */
  min-width: 300px; /* Minimum genişlik */
  max-width: 500px; /* Maksimum genişlik */
}
/* Arkaplan rengini veya gölgeyi değiştirmek için background ve box-shadow değerlerini güncelleyin. */

.footer-application-form h3,
.right-sidebar h2 {
  color: #f8f9fa; /* Başlık rengi (açık gri) */
}
/* Başlık rengini değiştirmek için color değerini güncelleyin. */

.footer-form input,
.footer-form button {
  width: 100%; /* Tam genişlik */
  margin-bottom: 10px; /* Alt boşluk */
}
/* Input ve buton genişliğini değiştirmek için width değerini güncelleyin. */

.footer-form button {
  background: #007bff; /* Buton arkaplan rengi (mavi) */
  transition: background 0.3s ease, transform 0.3s ease; /* Hover efekti için geçiş */
}
/* Buton rengini veya animasyon süresini değiştirmek için background ve transition değerlerini güncelleyin. */

.footer-form button:hover {
  background: #0056b3; /* Fare üzerine gelindiğinde arkaplan rengi (koyu mavi) */
  transform: scale(1.05); /* Butonu hafifçe büyütür */
}
/* Hover efekti veya büyütme oranını değiştirmek için background ve transform değerlerini güncelleyin. */

.footer-copy {
  margin-top: 20px; /* Üstten boşluk */
  font-size: 14px; /* Yazı boyutu */
  color: #ccc; /* Metin rengi (açık gri) */
}
/* Metin rengini veya boyutunu değiştirmek için color ve font-size değerlerini güncelleyin. */

@keyframes fadeIn {
  from {
    opacity: 0; /* Başlangıçta görünmez */
    transform: translateY(20px); /* Başlangıçta aşağıda */
  }
  to {
    opacity: 1; /* Sonunda görünür */
    transform: translateY(0); /* Sonunda normal pozisyonda */
  }
}
/* Bu animasyon, elementlerin yavaşça görünmesini sağlar. */

.footer-application-form,
.right-sidebar {
  animation: fadeIn 1s ease-in-out; /* fadeIn animasyonunu uygular */
}
/* Animasyon süresini değiştirmek için 1s değerini güncelleyin. */


/* MOBİL UYUMLULUK İÇİN MEDYA SORGULARI (768px ve altı) */
/* ----------------------------------------------- */
@media (max-width: 768px) {
  .footer {
    background-size: contain; /* Arkaplan resmini sığdırır */
  }
  .footer-application-form,
  .right-sidebar {
    width: 100%; /* Tam genişlik */
  }
}
/* Bu medya sorgusu, 768px ve altı ekran genişliklerinde geçerlidir. */

/* === BENZER MAKALELER WIDGET STİL === */
/* ----------------------------------------------- */
.right-sidebar {
  background: #ffffff; /* Beyaz arkaplan */
  padding: 20px; /* İç boşluk */
  border-radius: 10px; /* Köşeleri yuvarlar */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Hover animasyonu */
}
/* Bu stil, sağ taraftaki benzer makaleler widget'ını şekillendirir. */

.right-sidebar:hover {
  transform: scale(1.02); /* Fare üzerine gelindiğinde hafifçe büyütür */
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15); /* Gölgeyi artırır */
}
/* Hover efekti, widget'ı daha belirgin hale getirir. */

/* === BAŞLIK STİLİ === */
.right-sidebar h2 {
  font-size: 20px; /* Başlık boyutu */
  font-weight: bold; /* Kalın yazı tipi */
  color: #0056b3; /* Mavi renk */
  text-align: center; /* Metni ortalar */
  margin-bottom: 15px; /* Alt boşluk */
  position: relative; /* Alt çizgi için konumlandırma */
}
/* Başlık boyutunu veya rengini değiştirmek için font-size ve color değerlerini güncelleyin. */

/* === ALT ÇİZGİ EFEKTİ === */
.right-sidebar h2::after {
  content: ""; /* İçerik yok */
  width: 50px; /* Çizgi genişliği */
  height: 3px; /* Çizgi kalınlığı */
  background-color: #007bff; /* Mavi renk */
  display: block; /* Blok düzeyinde göster */
  margin: 8px auto 0; /* Ortala ve üst boşluk */
  border-radius: 3px; /* Köşeleri yuvarlar */
}
/* Çizgi rengini veya boyutunu değiştirmek için background-color ve width değerlerini güncelleyin. */

/* === LİSTE STİLİ === */
#makaleListesi {
  padding: 0; /* İç boşluk yok */
  margin: 0; /* Dış boşluk yok */
  list-style: none; /* Liste noktalarını kaldırır */
}
/* Bu stil, makale listesini şekillendirir. */

#makaleListesi li {
  margin-bottom: 10px; /* Liste öğeleri arası boşluk */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Hover animasyonu */
  opacity: 0.85; /* Hafif saydamlık */
}
/* Liste öğelerinin stilini değiştirmek için margin-bottom veya opacity değerlerini güncelleyin. */

/* === BAĞLANTILAR İÇİN ANİMASYON === */
#makaleListesi li a {
  display: block; /* Blok düzeyinde göster */
  font-size: 13px; /* Yazı boyutu */
  color: #000; /* Siyah renk */
  text-decoration: none; /* Alt çizgi yok */
  padding: 10px; /* İç boşluk */
  border-radius: 5px; /* Köşeleri yuvarlar */
  background: linear-gradient(to right, #ffffff, #f8f9fa); /* Gradient arkaplan */
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s; /* Hover animasyonu */
}
/* Bağlantıların stilini değiştirmek için font-size, color veya padding değerlerini güncelleyin. */

/* === HOVER EFEKTİ (ÜZERİNE GELİNDİĞİNDE) === */
#makaleListesi li a:hover {
  background: #007bff; /* Mavi arkaplan */
  color: #fff; /* Beyaz renk */
  transform: translateX(8px); /* Sağa kaydırır */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Hafif gölge */
}
/* Hover rengini veya kaydırma miktarını değiştirmek için background ve transform değerlerini güncelleyin. */

/* === LİSTE HOVER EFEKTİ (TAM KART ANİMASYONU) === */
#makaleListesi li:hover {
  transform: scale(1.05); /* Hafifçe büyütür */
  opacity: 1; /* Saydamlığı kaldırır */
}
/* Büyütme oranını değiştirmek için transform değerini güncelleyin. */

/* === MOBİL UYUMLULUK === */
@media (max-width: 768px) {
  .right-sidebar {
    padding: 15px; /* İç boşluk azaltıldı */
  }

  .right-sidebar h2 {
    font-size: 18px; /* Başlık boyutu küçültüldü */
  }

  #makaleListesi li a {
    font-size: 14px; /* Yazı boyutu büyütüldü */
    padding: 8px; /* İç boşluk azaltıldı */
  }
}
/* Bu stil, mobil cihazlarda widget'ın daha iyi görünmesini sağlar. */


/* === FORM BAŞLIK STİLİ (TEKRAR) === */
.formTitle {
  font-size: 18px; /* Başlık boyutu */
  font-weight: bold; /* Kalın yazı tipi */
  color: #333; /* Koyu gri renk */
  text-align: center; /* Metni ortalar */
  margin-bottom: 15px; /* Alt boşluk */
}
/* Bu stil, form başlıklarını şekillendirir. */

/* === FORM ÇİZGİ STİLİ (TEKRAR) === */
.formHr {
  width: 60px; /* Çizgi genişliği */
  margin: 0 auto; /* Çizgiyi ortalar */
  border: 2px solid #007bff; /* Mavi çizgi */
}
/* Çizgi rengini veya genişliğini değiştirmek için border ve width değerlerini güncelleyin. */

/* === LİSTE STİLİ (TEKRAR) === */
.card-body ul {
  padding: 0; /* İç boşluk yok */
  list-style: none; /* Liste noktalarını kaldırır */
}
/* Bu stil, listelerin görünümünü şekillendirir. */

/* === INPUT ALANI STİLİ (TEKRAR) === */
.homeContactInput {
  display: flex; /* İçeriği yatay hizalar */
  align-items: center; /* İçeriği dikeyde ortalar */
  border: 1px solid #ccc; /* Kenarlık rengi (açık gri) */
  border-radius: 5px; /* Köşeleri yuvarlar */
  padding: 8px; /* İç boşluk */
  background: #f9f9f9; /* Açık gri arkaplan */
}
/* Input alanlarının stilini değiştirmek için border veya padding değerlerini güncelleyin. */

/* === İKON STİLİ (TEKRAR) === */
.homeContactInput .icon {
  margin-right: 10px; /* İkon ile metin arası boşluk */
  color: #007bff; /* Mavi renk */
}
/* İkon rengini değiştirmek için color değerini güncelleyin. */

/* === METİN ALANI STİLİ (TEKRAR) === */
.contactText {
  width: 100%; /* Tam genişlik */
  border: none; /* Kenarlık yok */
  outline: none; /* Odaklandığında çıkan çerçeveyi kaldırır */
  background: none; /* Arkaplan rengi yok */
  font-size: 14px; /* Yazı boyutu */
}
/* Input metin boyutunu değiştirmek için font-size değerini güncelleyin. */

/* === BUTON STİLİ (TEKRAR) === */
.formButton button {
  width: 100%; /* Tam genişlik */
  background: #007bff; /* Mavi arkaplan */
  color: #fff; /* Beyaz renk */
  border: none; /* Kenarlık yok */
  padding: 10px; /* İç boşluk */
  font-size: 16px; /* Yazı boyutu */
  border-radius: 5px; /* Köşeleri yuvarlar */
  transition: 0.3s; /* Hover animasyonu */
}
/* Buton rengini veya boyutunu değiştirmek için background veya padding değerlerini güncelleyin. */

.formButton button:hover {
  background: #0056b3; /* Koyu mavi renk */
}
/* Hover rengini değiştirmek için background değerini güncelleyin. */


/* === MAKALE DETAY STİLİ === */
.makale-detay {
  max-width: 920px; /* Maksimum genişlik */
  margin: 20px auto; /* Ortalama ve dış boşluk */
  padding: 15px; /* İç boşluk */
}
/* Bu stil, makale detay sayfasının içeriğini şekillendirir. */

.makale-detay img {
  width: 100%; /* Tam genişlik */
  height: auto; /* Otomatik yükseklik */
  border-radius: 9px; /* Köşeleri yuvarlar */
}
/* Resim boyutunu veya yuvarlaklığını değiştirmek için width veya border-radius değerlerini güncelleyin. */


/* === KAYDIRMA ÇUBUĞU STİLİ === */
::-webkit-scrollbar {
  width: 10px; /* Kaydırma çubuğu genişliği */
}
/* Bu stil, tarayıcının kaydırma çubuğunu özelleştirir. */

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Açık gri arkaplan */
}
/* Kaydırma çubuğu arkaplan rengini değiştirmek için background değerini güncelleyin. */

::-webkit-scrollbar-thumb {
  background: #0056b3; /* Mavi renk */
  border-radius: 5px; /* Köşeleri yuvarlar */
}
/* Kaydırma çubuğu rengini değiştirmek için background değerini güncelleyin. */

::-webkit-scrollbar-thumb:hover {
  background: #002147; /* Koyu mavi renk */
}
/* Hover rengini değiştirmek için background değerini güncelleyin. */


/* === YUKARI KAYDIRMA BUTONU === */
#scrollTopBtn {
  display: none; /* Varsayılan olarak gizli */
  position: fixed; /* Sabit pozisyon */
  bottom: 20px; /* Alttan boşluk */
  right: 20px; /* Sağdan boşluk */
  z-index: 99; /* Diğer elementlerin üzerinde görünmesini sağlar */
  background-color: #0056b3; /* Mavi arkaplan */
  color: white; /* Beyaz renk */
  border: none; /* Kenarlık yok */
  padding: 10px 15px; /* İç boşluk */
  border-radius: 50%; /* Daire şekli */
  cursor: pointer; /* Fare imleci el işareti olur */
  font-size: 18px; /* Yazı boyutu */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge */
  transition: all 0.3s ease-in-out; /* Hover animasyonu */
}
/* Buton rengini veya boyutunu değiştirmek için background-color veya padding değerlerini güncelleyin. */

#scrollTopBtn:hover {
  background-color: #002147; /* Koyu mavi renk */
  transform: scale(1.1); /* Hafifçe büyütür */
}
/* Hover rengini veya büyütme oranını değiştirmek için background-color veya transform değerlerini güncelleyin. */

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); /* Normal pozisyon */
  }
  40% {
    transform: translateY(-10px); /* Yukarı kaydırır */
  }
  60% {
    transform: translateY(-5px); /* Hafifçe yukarı kaydırır */
  }
}
/* Bu animasyon, butonun zıplamasını sağlar. */

#scrollTopBtn.show {
  animation: bounce 1s infinite; /* Animasyonu uygular */
}
/* Animasyon süresini değiştirmek için 1s değerini güncelleyin. */


/* === FOOTER STİLİ === */
footer {
  text-align: center; /* Metni ortalar */
  padding: 15px 0; /* İç boşluk */
  background-color: #f8f9fa; /* Açık gri arkaplan */
  margin-top: 20px; /* Üstten boşluk */
}
/* Footer rengini veya boşluğunu değiştirmek için background-color veya padding değerlerini güncelleyin. */


/* === MOBİL GÖRÜNÜM AYARLARI === */
@media (max-width: 768px) {
  /* Web menüyü tamamen gizle */
  .navbar-collapse {
    display: none !important;
  }

  /* Navbar içeriğini ortala */
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 15px;
  }

  /* Logoyu sabit boyutta tut */
  .navbar-brand {
    margin: 0;
    padding: 0;
  }

  /* Mobil menü toggle butonunu göster */
  .mobile-menu-toggle {
    display: block;
    /* Yukarıdaki ayarlar korunuyor (fixed konumda, top:10px, right:20px) */
  }

  /* Navbar toggler'ı tamamen gizle */
  .navbar-toggler {
    display: none;
  }

  /* Logoyu sağa yasla */
  .navbar-brand {
    margin-left: auto; /* Logoyu sağa iter */
    position: relative;
    z-index: 1000;
  }

  /* Navbar nav'i mobilde gizle */
  .navbar-nav {
    display: none !important;
  }

  /* Logo ve toggle buton hizalaması */
  .navbar > .container {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
}
/* Bu stil, mobil cihazlarda navbar'ın daha iyi görünmesini sağlar. */


/* === BİLGİSAYAR GÖRÜNÜMÜ === */
@media (min-width: 769px) {
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }
}
/* Bu stil, bilgisayar ekranlarında navbar'ın düzgün görünmesini sağlar. */