/* Filtre Menü */
.bagis-filtre {
  text-align: center;
  margin: 20px 0;
}

.bagis-filtre button {
  margin: 5px;
  padding: 10px 20px;
  background: #f5f5f5;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bagis-filtre button:hover {
  background: rgb(8, 8, 97);
  color: #fff;
}

.bagis-filtre .active {
  background: rgb(35, 35, 143);
  color: #fff;
}

/* Bağış Alanı */
.bagis-container {
    display: flex; /* Kartlar (grid) ve sepetin yan yana durmasını sağlar */
    gap: 20px;
    padding: 20px;
    /* flex-wrap: wrap; mobil için kalsın */
    margin-bottom: 80px;
    
    /* Sayfada ortalama için eklenenler */
    max-width: 1200px; /* Veya istediğiniz ana genişlik */
    margin: 0 auto 80px auto; /* Ortala ve alttan boşluk bırak */
}

.bagis-card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.bagis-grid {
    /* Sepet için yer açması adına kart alanına esneklik veriyoruz */
    flex-grow: 1; /* Mevcut alanı doldurmasını sağlar */
    flex-shrink: 1; 
    
    /* Kartların düzeni */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px 20px;
    align-items: stretch;
}

.bagis-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* içerikler eşit şekilde dağılır */
  height: 100%; /* parent grid tarafından yüksekliği doldurur */
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.bagis-card:hover {
  transform: translateY(-5px);
}

.bagis-card img {
  width: 100%;
  border-radius: 10px;
}

.bagis-card h3 {
  margin: 10px 0;
  font-size: 18px;
  color: #333;
}

.bagis-input {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.bagis-input input {
  width: 70px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}

.bagis-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.bagis-buttons button {
  padding: 10px;
  flex: 1;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-sepete {
  background: rgb(8, 8, 97);
  color: #fff;
}

.btn-sepete:hover {
  background: rgb(35, 35, 143);
}

.btn-hemen {
  background: rgb(35, 35, 143);
  color: #fff;
}

.btn-hemen:hover {
  background: rgb(8, 8, 97);
}

/* Sepet Alanı */
.bagis-sepet {
    /* Bu, sepetin sağda, kartların genişliğinden bağımsız kalmasını sağlar */
    flex-shrink: 0; /* Sepetin kartlar daralsa bile küçülmesini engeller */
    flex-grow: 0;   /* Sepetin gereksiz yere genişlemesini engeller */
    
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    background: #fff;
    max-width: 300px; /* Sabit genişlik */
    width: 100%; /* max-width ile çalışması için ekle */
}

.bagis-sepet h4 {
  margin-bottom: 15px;
  font-size: 20px;
}

/* Sepet İçeriği Stili */
#sepet-icerik p {
  margin: 5px 0;
  display: flex; /* İçerik ve miktar arasında boşluk bırakmak için */
  justify-content: space-between; /* İçeriği sağa ve sola yaslar */
  font-size: 15px;
  color: #555;
}

.sepet-toplam {
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: right; /* Sağa Yaslı Toplam Tutar */
  padding-top: 10px; /* Üstten boşluk ekledik */
}

/* Ödeme Butonu (Sağda kalmaya devam ediyor) */
.btn-odeme {
  width: 100%;
  padding: 12px;
  margin-top: 15px;
  background: rgb(8, 8, 97);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* Responsive */
@media (max-width: 992px) {
  .bagis-container {
    flex-direction: column;
  }

  .bagis-sepet {
    max-width: 100%;
  }
}

/* Responsive Geliştirmeler */

/* Orta ekranlar - Tablet (992px altı) zaten var, biraz daha detay ekleyelim */
@media (max-width: 992px) {
  .bagis-container {
    flex-direction: column;
    padding: 0 15px;
  }

  .bagis-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .bagis-sepet {
    max-width: 100%;
    margin-top: 25px;
  }
}

/* Küçük ekranlar - Mobil (768px altı) */
@media (max-width: 768px) {
  .bagis-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .bagis-card {
    padding: 15px 10px;
  }

  .bagis-input {
    flex-direction: column;
    gap: 8px;
  }

  .bagis-input input {
    width: 100%;
    max-width: 100%;
  }

  .bagis-buttons {
    flex-direction: column;
  }

  .bagis-buttons button {
    width: 100%;
    flex: none;
  }

  .bagis-filtre {
    text-align: center;
    margin: 20px auto; /* Üst/Alt 20px, Sol/Sağ otomatik boşluk */
    max-width: 1200px; /* Bagis-container ile aynı max genişliği kullanabilirsin */
}
}

/* Çok küçük ekranlar - Küçük telefonlar (480px altı) */
@media (max-width: 480px) {
  .bagis-filtre button {
    padding: 6px 10px;
    font-size: 13px;
  }

  .bagis-sepet h4 {
    font-size: 18px;
    max-width: 90%;
  }

  .sepet-tablosu{
    max-width: 90%;
  }

  .sepet-toplam {
    max-width: 90%;
  }

  .btn-odeme {
    font-size: 14px;
    padding: 10px;
    max-width: 90%;
  }

  .bagis-input input {
    width: 90%
  }

}