/* TailwindCSS genişlik sınıflarını Bootstrap'e uyarlayan özel CSS */

.w-1 {
  width: 0.25rem;
}
.w-2 {
  width: 0.5rem;
}
.w-3 {
  width: 0.75rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-32 {
  width: 8rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-56 {
  width: 14rem;
}
.w-64 {
  width: 16rem;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}
.w-min {
  width: min-content;
}
.w-max {
  width: max-content;
}

/* TailwindCSS yükseklik sınıflarını Bootstrap'e uyarlayan özel CSS */
.h-1 {
  height: 0.25rem;
}
.h-2 {
  height: 0.5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-32 {
  height: 8rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-56 {
  height: 14rem;
}
.h-64 {
  height: 16rem;
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.h-min {
  height: min-content;
}
.h-max {
  height: max-content;
}

/* Tailwind'deki Ekstra Özellikler */

/* Margin ve Padding İçin Negatif Değerler */
.-m-1 {
  margin: -0.25rem;
}
.-m-2 {
  margin: -0.5rem;
}
.-m-4 {
  margin: -1rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-mr-4 {
  margin-right: -1rem;
}

/* Flexbox Özellikleri */
.flex-grow {
  flex-grow: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Grid Özellikleri */
.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-rows-2 {
  grid-template-rows: repeat(2, 1fr);
}
.grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}

/* Görünürlük ve Görsellik */
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-100 {
  opacity: 1;
}

/* Yazı Stilleri */
.text-opacity-50 {
  color: rgba(0, 0, 0, 0.5); /* Tailwind metin opaklığı */
}
.text-opacity-75 {
  color: rgba(0, 0, 0, 0.75);
}
.text-opacity-100 {
  color: rgba(0, 0, 0, 1);
}
.font-thin {
  font-weight: 100;
}
.font-extralight {
  font-weight: 200;
}
.font-light {
  font-weight: 300;
}
.font-semibold {
  font-weight: 600;
}
.font-extrabold {
  font-weight: 800;
}

/* Yuvarlatma (Border Radius) */
.rounded-tl-lg {
  border-top-left-radius: 0.5rem;
}
.rounded-tr-lg {
  border-top-right-radius: 0.5rem;
}
.rounded-bl-lg {
  border-bottom-left-radius: 0.5rem;
}
.rounded-br-lg {
  border-bottom-right-radius: 0.5rem;
}

/* Z-Index */
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-50 {
  z-index: 50;
}

/* Text-size */

/* Tailwind metin boyutlarını Bootstrap'e eklemek için özel sınıflar */
.text-xs {
  font-size: 0.75rem; /* 12px */
}

.text-sm {
  font-size: 0.875rem; /* 14px */
}

.text-base {
  font-size: 1rem; /* 16px */
}

.text-lg {
  font-size: 1.125rem; /* 18px */
}

.text-xl {
  font-size: 1.25rem; /* 20px */
}

.text-2xl {
  font-size: 1.5rem; /* 24px */
}

.text-3xl {
  font-size: 1.875rem; /* 30px */
}

.text-4xl {
  font-size: 2.25rem; /* 36px */
}

.text-5xl {
  font-size: 3rem; /* 48px */
}

.text-6xl {
  font-size: 3.75rem; /* 60px */
}

.text-7xl {
  font-size: 4.5rem; /* 72px */
}

.text-8xl {
  font-size: 6rem; /* 96px */
}

.text-9xl {
  font-size: 8rem; /* 128px */
}

/* max-width  */

.max-w-1-2 {
  max-width: 50%;
}


/* background color  */

.bg-red-300 {
  background-color: #fca5a5;
}

/* border */

/* Tüm kenarlar için border */
.border {
  border: 1px solid #dee2e6; /* Bootstrap'in varsayılan sınır rengi */
}

/* Belirli kenarlara sınır ekleme */
.border-t {
  border-top: 1px solid #dee2e6;
}

.border-r {
  border-right: 1px solid #dee2e6;
}

.border-b {
  border-bottom: 1px solid #dee2e6;
}

.border-l {
  border-left: 1px solid #dee2e6;
}

/* Border kalınlığı */
.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-8 {
  border-width: 8px;
}

/* Sınır renkleri */
.border-red-500 {
  border-color: #ef4444; /* Tailwind'in kırmızı rengi */
}

.border-blue-500 {
  border-color: #3b82f6; /* Tailwind'in mavi rengi */
}

.border-green-500 {
  border-color: #10b981; /* Tailwind'in yeşil rengi */
}

.border-yellow-500 {
  border-color: #f59e0b; /* Tailwind'in sarı rengi */
}

/* Sınır yuvarlama */
.rounded {
  border-radius: 0.25rem; /* Varsayılan yuvarlama */
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-none {
  border-radius: 0;
}

/* Belirli köşeleri yuvarlama */
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}