@font-face {
  font-family: 'NeonBulb';
  src: url('fonts/neon-bulb-neon-bulb-svg-400.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


body {
  background: hsla(64, 41%, 92%, 1);

  background: linear-gradient(90deg, hsla(64, 41%, 92%, 1) 0%, hsla(196, 83%, 84%, 1) 50%, rgb(255, 199, 250) 100%);
  
  background: -moz-linear-gradient(90deg, hsla(64, 41%, 92%, 1) 0%, hsla(196, 83%, 84%, 1) 50%, hsla(305, 75%, 83%, 1) 100%);
  
  background: -webkit-linear-gradient(90deg, hsla(64, 41%, 92%, 1) 0%, hsla(196, 83%, 84%, 1) 50%, rgb(250, 202, 246) 100%);
  
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F2F3E2", endColorstr="#B2E5F8", GradientType=1 );

  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.NeonBulb {
  font-family: "NeonBulb", serif;
  font-size:40px;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: 'NeonBulb', sans-serif;
  font-size: 40px;
  color:#1d1919;
}


a { font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;}



 /* Şeffaf ve gölgeli navbar için ek CSS */
 .navbar-custom {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */
  backdrop-filter: blur(10px); /* Hafif arka plan bulanıklığı */
}

 /* Navbar toggler simgesinin rengini değiştirme */
 .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgb(121, 0, 168)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.btn-warning:hover {
  background-color: #e69500; /* Hover durumunda daha koyu turuncu */
  border-color: #e69500;    /* Border rengini de değiştiriyoruz */
}


.card {
  cursor: pointer;
  width: calc(10% - 10px); /* Varsayılan olarak her satıra 10 kart sığacak */
  padding-top: calc(10% - 10px); /* Kartların kare olmasını sağlamak için */
  margin: 5px; /* Kartlar arasına boşluk */
  position: relative;
  border-radius: 10px;
}

.card-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}

.card-front {
  background-image: url('img/card-back.png'); /* Kapalı kartın resmi */
  background-size: cover;
}

.card-back {
  transform: rotateY(180deg);
  background-size: cover;
}

/* Mobil cihazlar için: 8 satır ve 5 sütun olacak */
@media (max-width: 768px) {
  .card {
    width: calc(20% - 10px); /* Mobilde her satıra 5 kart sığacak */
    padding-top: calc(20% - 10px); /* Kare yapısını korumak için */
  }
}