﻿/* root {
  padding: 0 !important;
  margin: 0 !important;
} */
.sortable {
  cursor: move;
}

/* .text-primary {
  background-color: #0000ff !important;
} */

.menu .box-container {
  display: flex; /* Flexbox kullanımı */
  flex-wrap: wrap; /*Satır taşmalarına izin ver*/

  justify-content: space-between; /* Boşlukları düzenler */
  border-radius: 3rem;

  border: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 15px;
}

.menu .box-container .box {
  flex: 1 1 calc(33.333% - 15px); /* Genişlik %33.333 ve boşlukları hesaba kat */
  box-sizing: border-box; /* Dolgu ve kenarlık genişliğini hesaba katar */
  padding: 3rem;
  background-color: hsl(180, 17%, 89.6%);
  border-radius: 3rem;
  min-height: 40rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  border: none;
  margin: 20px 60px !important; /* Üst ve alt: 20px, Sağ ve sol: 10px */
}

/* .box-head {
  border-radius: 10px;
  border: 1px solid;
  width: 100%;
} */

.text-primary {
  color: #007bff !important;
}

.text--primary {
  background: rgb(76, 141, 226) !important;
}

.btn-info {
  background-color: #007bff !important;
  border-radius: 5px; /* Kenarları hafifçe yuvarlat */
  color: white;
  padding: 12px 24px; /* Yatay ve dikey boşlukları artır */
  font-size: 18px; /* Yazı boyutunu büyüt */
  min-width: 150px; /* Minimum genişlik */
  min-height: 50px; /* Minimum yükseklik */
  font-weight: bold; /* Yazıyı kalınlaştır */
  text-transform: uppercase; /* Yazıyı büyük harfe çevir (isteğe bağlı) */
  border: none;
  width: 100%;
  text-align: center;
  border-radius: unset;
}
body {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}



.btn-info:hover {
  background-color: #2c73b4 !important; /* Hover rengini ayarla */
  transform: scale(1.1); /* Butonu biraz büyüt */
  transition: all 0.3s ease; /* Geçiş animasyonu */
}

.carousel img {
  width: 100%;
  /* Görsel genişliğini her zaman kapsama göre ayarla */
  height: auto;
  /* Oranını koruyarak yüksekliği ayarla */
  object-fit: cover;
  /* Taşmayı engelle */
}

.carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.carousel-caption {
  top: 50%;
  transform: translateY(-50%); /* Ortalamak için yukarıdan aşağı hizalama */
  text-align: center;
}

@media (max-width: 768px) {
  .carousel-caption h1 {
    font-size: 2rem !important;
    /* Başlık boyutunu küçült */
  }

  .carousel-caption h6 {
    font-size: 1.2rem !important; /* Alt başlık boyutunu küçült */
  }
  .carousel img {
    object-fit: contain !important; /* Görseli daha uygun şekilde küçült */
  }

  .carousel-caption {
    padding: 1rem !important; /* Mobilde boşlukları daralt */
  }

  .py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

.navbar-toggler {
  margin-left: auto; /* ikon sağa yaslansın */
  padding: 0.25rem 0.5rem;
}

@media (max-width: 575.98px) {
  .navbar-brand img {
    margin-top: 10px;
    max-width: 170px;
  }
}
