body {
    padding-top: 3% !important;
    background-color: #f5f5f5;
    background-image: url('../images/gri-arka-plan.jpg'); /* Arka plan resminiz */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    font-family: 'Arial', sans-serif; /* Modern bir font ekledik */
}

h1 {
    font-size: 2.5rem; /* Başlık boyutu */
    color: #343a40; /* Başlık rengi */
    margin-bottom: 20px; /* Başlık altında boşluk */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Başlık için hafif gölge efekti */
}

.organization-card {
    display: inline-flex; /* Flexbox düzeni */
    flex-direction: row; /* Yana doğru yerleşim */
    align-items: stretch; /* Kart içeriklerinin yüksekliğini eşitle */
    border: none; /* Kart sınırını kaldırdık */
    border-radius: 15px; /* Yuvarlak köşe */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Gölgeli efekt */
    transition: transform 0.3s; /* Animasyon efekti */
    background: linear-gradient(135deg, #d8d8d8cb, #d3d3d3c2, #79797994);
    overflow: hidden; /* Taşan içeriği gizler */
}

.organization-card:hover {
    
}

.card-content {
    flex-grow: 1; /* İçeriğin genişlemesi */
    min-width: 0; /* Flex elemanının daralmasını sağlamak için 0 olarak ayarlayın */
    padding: 20px; /* İçerik için boşluk */
    max-width: calc(100% - 420px); /* Harita genişliğini sabitlemek için */
}

.card-title {
    font-weight: bold; /* Başlık kalınlığı */
    font-size: 1.5rem; /* Başlık boyutu */
    color: #000000; /* Başlık rengi */
    text-decoration: underline;
}

.card-text {
    color: #272727; /* Metin rengi */
    margin-bottom: 10px; /* Metinler arasında boşluk */
    overflow-wrap: break-word; /* Uzun kelimelerin alt satıra geçmesini sağlar */
    word-wrap: break-word; /* Eski tarayıcılar için destek */
    overflow: hidden; /* Taşan içeriği gizler */
    white-space: normal; /* Normal beyaz boşluk davranışı */
    max-height: 200px; /* Max yüksekliği belirleyin */
    overflow-y: auto; /* Taşan içeriği kaydırılabilir yap */
}

.map-container {
    flex: 0 0 400px; /* Harita alanının sabit genişliği */
    height: auto; /* Harita yüksekliği artırıldı */
    margin-left: 20px; /* Kartın sol tarafında boşluk */
    border-radius: 10px; /* Yuvarlak köşe */
    overflow: hidden; /* Taşan içerik gizleniyor */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Harita gölgesi */
}

.details-container {
    background-color: #f9f9f900; /* Açık gri arka plan */
    border-radius: 5px; /* Kenarları yuvarlatma */
    padding: 10px; /* İç kenar boşluğu */
    padding-left: 0px;
    max-height: 200px; /* Maksimum yükseklik, ihtiyaca göre ayarlayın */
    overflow-y: auto; /* Dikey kaydırma çubuğu için otomatik taşma */
}

/* Kaydırma çubuğu stilleri */
.details-container::-webkit-scrollbar {
    width: 8px; /* Kaydırma çubuğu genişliği */
}

.details-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Kaydırma çubuğu arka planı */
    border-radius: 10px; /* Arka planın kenarlarını yuvarlat */
}

.details-container::-webkit-scrollbar-thumb {
    background: #888; /* Kaydırma çubuğu "kolu" */
    border-radius: 10px; /* Kaydırma çubuğu "kolu" kenarlarını yuvarlat */
}

.details-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* Kaydırma çubuğu "kolu" hover rengi */
}

.map-container iframe {
    width: 100%; /* İframe genişliği */
    height: 90%; /* İframe yüksekliği */
    border: 0; /* Kenar çizgisi yok */
}

.map-title {
    margin: 0; /* Başlık margin'i sıfırla */
    padding: 10px; /* Başlık için iç boşluk */
    background-color: #303030; /* Arka plan rengi */
    color: white; /* Metin rengi */
    text-align: center; /* Ortala */
    font-weight: bold; /* Kalın metin */
}

/* Gri ve siyah tonlarında buton stilleri */
.btn-primary {
     /* Buton ile üstteki metin arasında boşluk */
    background-color: #6c757d; /* Gri buton rengi */
    border-color: #6c757d; /* Gri buton kenar rengi */
    color: white; /* Buton üzerindeki metin rengi */
}

.btn-primary:hover {
    background-color: #495057; /* Koyu gri hover durumu */
    border-color: #343a40; /* Koyu gri hover durumu */
}

/* Sayfalama Stili */
.pagination-container {
    
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.pagination-link {
    margin: 0 5px;
    padding: 10px 20px;
    color: #515253;
    text-decoration: none;
    border: 1px solid #515253;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination-link:hover {
    border-color: #3d3d3d;
    background-color: #3d3d3d;
    color: white;
}

.pagination .active .pagination-link {
    border-color: #5a6268;
    background: linear-gradient(135deg, #8f8f8f, #858585, #000000a1);
    color: white;
    border-color: #6c757d;
}

@media (max-width: 768px) {
    body {
        margin-top: 5% !important;
    }

    .organization-card {
        flex-direction: column; /* Kart içeriğini dikey yerleştir */
    }

    .card-content {
        max-width: 100%; /* İçeriğin maksimum genişliğini %100 yap */
        margin-bottom: 20px; /* İçerik ile harita arasında boşluk bırak */
    }

    .map-container {
        flex: 0 0 auto; /* Genişlik ayarı */
        width: 100%; /* Harita alanını %100 genişlikte yap */
        max-height: 300px; /* Harita yüksekliğini sabit ayarla */
        margin-left: 0; /* Sol boşluğu kaldır */
        border-radius: 10px; /* Yuvarlak köşe */
        overflow: hidden; /* Taşan içeriği gizle */
        margin-bottom: 10px;
    }

    .map-container iframe {
        width: 100%; /* İframe genişliği */
        height: 100%; /* İframe yüksekliği */
        border: 0; /* Kenar çizgisi yok */
    }
    

    .pagination-container {
        margin-top: 9%;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    


    .disabled-btn {
        width: 100%; /* Butonun genişliğini %100 yap */
    }
}