@font-face {
  font-family: 'Avenir Book 45';
  src: url('/Fonts/avenir/Avenir-Book.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat Regular 15';
  src: url('/Fonts/montserat/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


html , body {
  height: 100%;
  margin: 0;
}


@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
    font-family: 'Avenir Book 45', sans-serif;

}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
.hero-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  text-align: center;
    font-family: 'Avenir Book 45', sans-serif;

}

.hero-text {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
    font-family: 'Avenir Book 45', sans-serif;

}

.highlight {
  color: black;
  font-weight: bold;
  background: yellow;
  padding: 4px;
  border-radius: 5px;
}
/* Modern Navbar Tasarımı */
.navbar {
  background: linear-gradient(to right, #bcbdc5, #c8ca39) !important; /* Modern mavi geçiş */
  
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* Hafif gölge */
  padding: 10px 20px !important;
}

/* Navbar Marka */
.navbar .navbar-brand {
  color: white !important;
  font-weight: bold !important;
  font-size: 1.2rem !important;
  transition: color 0.3s ease-in-out !important;
}

.navbar .navbar-brand:hover {
  color: #c8ca39 !important; /* Sarı hover efekti */
}

/* Navbar Menü Elemanları */
.navbar-nav .nav-link {
  color: white !important;
  font-weight: 500 !important;
  padding: 10px 15px !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  border-radius: 8px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #f3f2ef !important; /* Sarı hover efekti */
}

/* Navbar Mobil Buton */
.navbar-toggler {
  border: none !important;
  background: none !important;
}

.navbar-toggler-icon {
  filter: invert(100%) !important;
}

/* Kullanıcı Adı ve Çıkış Butonu */
.navbar .nav-link.text-dark {
  color: white !important;
  font-weight: bold !important;
}

.navbar .nav-link.text-dark:hover {
  color: #ffdd57 !important;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
  .navbar {
      border-radius: 0 !important; /* Küçük ekranlarda tam genişlik görünümü */
  }

  .navbar-nav {
      text-align: center !important;
  }

  .navbar-nav .nav-item {
      margin-bottom: 5px !important;
  }
}



.footer-link {
  color: #f8f9fa;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #0d6efd;
}

.social-icon {
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  display: inline-block;
  margin: 0 8px;
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  color: #fff;
}
/* Dropdown menü hover ile açılacak */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Navbar ile uyumlu arkaplan */
.dropdown-menu {
  border-radius: 12px;
  border: none;
  background: linear-gradient(to right, #bcbdc5, #c8ca39); /* Header arkaplanına uyumlu gradient */
  backdrop-filter: blur(10px); /* Hafif bulanıklık efekti */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Dropdown içindeki linkler */
.dropdown-item {
  padding: 14px 22px;
  font-weight: 600;
  font-size: 16px;
  color: white; /* Navbar yazı rengini koru */
  font-family: inherit; /* Navbar ile aynı font kullanılsın */
  border-radius: 10px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dropdown hover efekti (Header ile uyumlu) */
.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.2); /* Navbar’daki hover rengine benzer */
  color: #f3f2ef;
  transform: scale(1.05);
}

/* İlk ve son elemanların yuvarlatılmış kenarlarını düzeltme */
.dropdown-menu .dropdown-item:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.dropdown-menu .dropdown-item:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Dropdown içindeki ikonlar */
.dropdown-item i {
  font-size: 18px;
  color: inherit;
}
/* From Uiverse.io by Nawsome */ 
.pl {
  width: 6em;
  height: 6em;
}

.pl__ring {
  animation: ringA 2s linear infinite;
}

.pl__ring--a {
  stroke: #f42f25;
}

.pl__ring--b {
  animation-name: ringB;
  stroke: #f49725;
}

.pl__ring--c {
  animation-name: ringC;
  stroke: #255ff4;
}

.pl__ring--d {
  animation-name: ringD;
  stroke: #f42582;
}

/* Animations */
@keyframes ringA {
  from, 4% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }

  12% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -335;
  }

  32% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -595;
  }

  40%, 54% {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -660;
  }

  62% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -665;
  }

  82% {
    stroke-dasharray: 60 600;
    stroke-width: 30;
    stroke-dashoffset: -925;
  }

  90%, to {
    stroke-dasharray: 0 660;
    stroke-width: 20;
    stroke-dashoffset: -990;
  }
}

@keyframes ringB {
  from, 12% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -110;
  }

  20% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -115;
  }

  40% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -195;
  }

  48%, 62% {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  70% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  90% {
    stroke-dasharray: 20 200;
    stroke-width: 30;
    stroke-dashoffset: -305;
  }

  98%, to {
    stroke-dasharray: 0 220;
    stroke-width: 20;
    stroke-dashoffset: -330;
  }
}

@keyframes ringC {
  from {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  8% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  28% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  36%, 58% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  66% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  86% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  94%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

@keyframes ringD {
  from, 8% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: 0;
  }

  16% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -5;
  }

  36% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -175;
  }

  44%, 50% {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -220;
  }

  58% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -225;
  }

  78% {
    stroke-dasharray: 40 400;
    stroke-width: 30;
    stroke-dashoffset: -395;
  }

  86%, to {
    stroke-dasharray: 0 440;
    stroke-width: 20;
    stroke-dashoffset: -440;
  }
}

.button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 0px 4px rgba(59, 75, 2, 0.253);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 9999999;  /* Sadece bunu koru */
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
}
*/

.button.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.svgIcon {
  width: 12px;
  transition: 0.3s;
}

.svgIcon path {
  fill: white;
}

.button:hover {
  width: 140px;
  border-radius: 50px;
  background-color: rgb(197, 195, 98);
}

.button:hover .svgIcon {
  transform: translateY(-200%);
}

.button::before {
  position: absolute;
  bottom: -20px;
  content: "Başa Dönün";
  color: white;
  font-size: 0px;
}

.button:hover::before {
  font-size: 13px;
  bottom: unset;
  transition: 0.3s;
}


.navbar-brand img {
  height: 70px; /* Şu an muhtemelen 30px civarında */
  max-height: 80px;
  transition: all 0.3s ease-in-out;
}
.navbar .navbar-brand {
  padding: 0 !important;
  margin-right: 20px; /* veya 10px */
}
@media (max-width: 768px) {
  .navbar-brand img {
    height: 40px;
  }
}
.navbar {
  position: relative;
}

.navbar .navbar-brand {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 10px;
  z-index: 2;
}