/* Genel stil ayarları */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo {
    max-height: 3.7vw;
    /* Logonun ekran boyutuna göre dinamik yüksekliği */
    margin-right: 20px;
}


.prose-card .card-title {
    color: inherit;
    /* Varsayılan rengin korunması için */
    transition: color 0.3s;
    /* Geçiş efekti ekleme */
}

.prose-card:hover .card-title {
    color: rgb(191, 61, 35);
    /* Üzerine gelindiğinde renk değişimi */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

header {
    background: #333;
    color: #ffffff;
    text-align: center;
}

header h1 {
    margin-bottom: 2rem;
    font-size: 6rem;
    display: inline-block;
    width: auto;
    text-align: center;
    color: #000;
    font-weight: 580;
    white-space: nowrap;

}

.container {
    width: 100%;
    /* max-width: none; */
    padding-left: 0.5rem;
    padding-right: 1rem;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem !important;
}

.nav-link {
    color: rgb(65, 65, 65) !important;
    /* Web sürüm rengi */
}

.mt-4 {
    margin-top: 0;
}

.mt-5 {
    margin-top: 0 !important;
}

main {
    flex: 1;
    /* Ana içerik esnek alanı dolduracak */
    margin-bottom: 50px;
    /* Footer ile arasındaki boşluk */
}

.bg-dark {
    background-color: #000 !important;
}

.dropdown-menu {
    background-color: rgb(65, 65, 65);
    /* Düşük arka plan rengi */
    border: none;
    /* Kenarları kaldırmak için isteğe bağlı */
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    width: 100%;
    position: relative;
    bottom: 0;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    bottom: 0 !important;
}

/* Header section */
.header-section {
    display: flex;
    align-items: center;
    padding: 2rem;
    height: 400px;
    overflow: hidden;
}

.image-preview {
    width: 100%;
    height: auto;
    /* Yükseklik otomatik ayarlanır */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    aspect-ratio: 3 / 2;
    /* Oran korunur */
    overflow: hidden;
    /* Taşmaları önlemek için */
}


/* Sağdaki makale başlıkları için tam siyah arka plan ve beyaz yazılar */
.article-list-web {
    background-color: #000;
    color: white;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 3 / 1;
    /* Sağ tarafın oranını artırıyoruz */
    overflow: hidden;
    /* İçeriğin taşmasını engeller */
    padding: 10px;
    /* İçerik sıkışmaması için padding eklenir */
}

.article-list-web h2 {
    color: #fff;
    margin-bottom: 20px;

}

.prose-list {
    flex: 1 1 33.333%;
    /* 3 sütun düzeni için */
    max-width: calc(33.333% - 1rem);
    /* Boşluk için ayarlanmış genişlik */
    box-sizing: border-box;
}


.row-home {
    height: 100%;
    display: flex;
    align-items: stretch;

}

.row.detail {
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 1rem;

}

.container .row>* {
    padding-right: 0;
    /* margin-right: rem; */
}


/* Makale grid düzeni */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;

}

.article-card {
    background: #fff;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: auto;
    transition: none;
}

.site-title {
    font-size: 5vw;
    /* Ekran genişliğine göre dinamik font boyutu */
    white-space: nowrap;
    /* Yazının tek satırda kalmasını sağla */
}

/* .article-card img {
    width: 100vh;
    height: 33.3vh;
    object-fit: cover;
} */

.article-image-wrapper {
    width: 100%;
    /* Tam genişlik */
    height: auto;
    /* Yükseklik otomatik ayarlandı */
    overflow: hidden;
    /* Taşan kısımları gizle */
    aspect-ratio: 3 / 2;
    /* Yatay görüntü oranı (örneğin 16:9) */
}

.article-card .author-name,
.article-card .article-title {
    transition: none;
}

.author-name {
    margin: 0.5rem 0;
    font-family: "heldane", Georgia, Cambria, "Times New Roman", Times, serif;
    text-align: left;
}

.col-md-6.d-flex.flex-column div a:hover h5 {
    color: rgb(191, 61, 35) !important;
    /* Hover sırasında yazının rengini değiştirir */
}

.row.mt-4 .col-md-4 .card a:hover .card-title {
    color: rgb(191, 61, 35) !important;
    /* Hover sırasında yazı rengini değiştirir */
}


.article-title {
    margin: 0;
    color: rgb(65, 65, 65);
    transition: color 0.3s;
    font-family: "heldane", Georgia, Cambria, "Times New Roman", Times, serif;
    text-align: left;

}

.article-card:hover .article-title {
    color: rgb(191, 61, 35);
    /* Üzerine gelindiğinde renk değişimi */
}

.author {
    margin-right: auto;
    color: rgb(191, 61, 35);
    /* Yazar adını sola itmek için */
}

/* Çizgi ile tarih arasında boşluk bırakma */
.date {
    margin-left: 20px;
    color: rgb(65, 65, 65);
    /* İsteğe bağlı olarak boşluk ekleyin */
}



/* Responsive tasarım */
@media (max-width: 767px) {


    .header-section {
        flex-direction: column;
        height: auto;
    }

    .author-container {
        width: 100% !important;
    }

    .news-content {
        width: 100% !important;
    }

    .news-title {
        font-size: 1.5em;
    }

    .news-image {
        /* Yeni stil */
        width: 100% !important;
        height: auto;
    }

    .col-md-4 {
        flex: 1 1 100%;
        /* 3 sütun düzeni için */
        max-width: calc(100%);
        /* Boşluk için ayarlanmış genişlik */
        box-sizing: border-box;
    }

    .image-preview,
    .article-list {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .image-preview img {
        width: 100%;
        height: auto;
        padding: 0;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0rem;
        padding-right: 0rem;

    }


    .container.mt-0 {
        padding-left: 0;
        /* Sol boşluğu kaldır */
        padding-right: 0;
        /* Sağ boşluğu kaldır */
        background-color: #000;
        /* Arka plan rengi siyah */


    }

    .articles-grid {
        display: flex;
        flex-direction: column;
        /* Öğeleri dikey hizala */
    }

    .article-card {
        margin-bottom: 15px;
        /* Her kart arasında boşluk bırak */
    }

    .nav-link {
        color: #fff !important;
        /* Mobil sürüm rengi beyaz */
    }

    .site-title {
        font-size: 5vw;
        /* Daha küçük font boyutu */
    }

    .logo {
        width: auto;
        height: 4.5vw;
        /* Mobilde daha küçük logo */
        margin-right: 5px;
    }

    .divider {
        /* Yeni stil */
        width: 100% !important;
        margin-bottom: 5px;
        border-top: 1px solid rgb(65, 65, 65);
    }

    .detail-container {
        padding-left: 10px;
        /* Sol boşluk */
        padding-right: 10px;
        /* Sağ boşluk */
    }

    .detail-container img {
        width: 100%;
        /* Fotoğrafın genişliğini %100 yap */
        height: auto;
        /* Yüksekliği otomatik ayarla */
        margin-top: 20px;
        /* Üstteki öğelerle arayı açmak için boşluk bırak */
    }

    .detail-container p {
        font-size: 1em;
        /* Metin boyutu ayarı */
        margin-top: 0;
        /* Üstte boşluk bırakma */
        width: 100%;
        /* Metin genişliğini %100 yap */
        line-height: 1.5;
        /* Satır yüksekliği */
    }

    .about-us-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* İçeriği ortalar */
        width: 90% !important;
        /* İçeriğin genişliği %50 */
        margin: 0 auto;
        /* Merkeze hizalar */
    }

    .submission-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* İçeriği ortalar */
        padding: 20px;
        width: 90% !important;
        margin: 0 auto;
        /* Üst ve alt boşluk */
    }

    .article-title {
        margin: 0;
        color: #ffffff;
        transition: color 0.3s;
        font-family: "heldane", Georgia, Cambria, "Times New Roman", Times, serif;
        text-align: left;

    }

    .date {
        font-size: 1em;
        /* Tarih font boyutu */
        line-height: 1;
        /* Tek satırda kalmasını sağla */
        white-space: nowrap;
        /* Tek satırda kalması için */
    }

    .navbar-nav .nav-link {
        border-bottom: none;
        /* Alt çizgiyi kaldır */
    }



    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        background-color: #000;
        /* Arka plan siyah */
        text-align: center;
        /* İçerikleri ortala */
    }

    .navbar-nav .dropdown-item {
        color: #fff;
        /* Yazı rengi beyaz */
    }


    .navbar-nav .dropdown-item:hover {
        background-color: #333;
        /* Üzerine gelindiğinde koyulaşan arka plan */
    }

    nav ul li {
        flex: 1;
        /* Daha küçük ekranlarda öğelerin eşit dağılımını sağlar */
        min-width: auto;
        /* Minimum genişliği kaldır */
    }



}

.navbar-toggler {
    margin-left: auto;
    /* İkonu sağa itme */
}


/* Her makale başlığının altına beyaz çizgi */
.list-group-item {
    margin: 10px 0;
    color: #fff;
    border: none;
    border-bottom: 1px solid white;
    background-color: transparent;
    padding: 15px 0;
    cursor: pointer;
    height: auto;
    transition: none;
}

.list-group-item .author-name {
    font-size: 0.875em;
    /* Yazar adı boyutu */
}

.list-group-item strong {
    font-size: 1.5em;
    /* Başlık boyutu */
}

/* Resim sabit boyutlandırma */
#articleImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover durumunda da sabit boyut */
.article-card:hover,
.list-group-item:hover {
    transform: none;
    transition: none;
}

/* news */
/* Makale kartları */
.news-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.news-card:hover {
    transform: scale(1.05);
}

/* .news-card img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: top;
} */

/* .news-card .card-body {
    padding: 1 5px;
} */
.card-body {
    padding: 0;
}

.news-card .card-title {
    font-size: 1.25rem;
    margin: 0.5rem 0 !important;
    color: #333;
}

.news-card .card-text {
    margin: 0;
    color: #666;
}

.article-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-img,
.card-img-top {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    margin-bottom: 1rem;
}




.pagination .page-item .page-link {
    color: rgb(65, 65, 65);
    ;
    /* Bağlantı metni rengi */
    border-radius: 0;
    /* Kenarları düz yap */
    border: none;
    /* Kenarlıkları kaldır */
}

.pagination .page-item .page-link:hover {
    background-color: #f1f1f1;
    /* Üzerine gelindiğinde arka plan rengi */
}

.pagination .page-item.active .page-link {
    background-color: rgb(65, 65, 65);
    ;
    /* Seçili sayfanın arka plan rengi */
    color: white;
    /* Seçili sayfanın yazı rengi */
}

.text-justify {
    text-align: justify;
}

.mb-2 {
    margin-bottom: 0.5rem;
}


.highlight {
    color: #BF3D23;
    /* Yaxınlaşdıqda mətnin yeni rəngi */
    transition: color 0.3s;
    /* Rəng dəyişmə animasiyası */
}

.nav-link {
    transition: color 0.3s ease;
    /* Rəngin değişme etkisini ekle */
}

.nav-link:hover {
    color: rgb(191, 61, 35);
    /* İstədiyiniz rəng */
}

.mt-3 {
    margin-top: 1rem !important;

}

.detail-container {
    /* Yeni stil */
    padding-left: 1rem;
    padding-right: 1rem;
}

.news-title {
    width: 75%;
    font-size: 2.5em;
    color: rgb(65, 65, 65);
}

.dropdown-item:focus {
    box-shadow: none;
    /* Fokus durumunda gölgeyi kaldır */
    outline: none;
    /* Kenarlık çizgisini kaldır */
}

.dropdown-item:hover {
    background-color: transparent;
    /* Üzerine gelindiğinde arka plan rengini kaldır */
}


.divider {
    /* Yeni stil */
    width: 80%;
    margin-bottom: 5px;
    border-top: 1px solid rgb(65, 65, 65);
}

.news-meta {
    /* Yeni stil */
    display: flex;
    justify-content: space-between;
    width: 75%;
    margin: 0;
    padding-top: 5px;
}

.date {
    /* Yeni stil */
    font-size: 1.5em;
}

.image-container {
    /* Yeni stil */
    /* flex-grow: 1; */
    margin-top: 5px;
}

.news-image {
    /* Yeni stil */
    width: 80%;
    height: auto;
}

.news-content {
    /* Yeni stil */
    font-size: 1.2em;
    margin-top: 20px;
    width: 80%;
}

.archive-container {
    /* Yeni stil */
    margin-top: 0em;
    padding-right: 7px;
    margin-top: 5px;
}

.archive-title {
    /* Yeni stil */
    margin-bottom: 1em;
    color: rgb(65, 65, 65);
}

.archive-image {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* Görsel konteynere tam oturur, ancak kesme olabilir */
    width: 100%;
    /* Konteyneri tam kaplar */
    height: auto;
    /* Yükseklik oranını korur */
}

.archive-link {
    /* Yeni stil */
    color: rgb(65, 65, 65);
    ;
    text-decoration: none;
}

.archive-link:hover {
    /* Yeni stil */
    text-decoration: none;
}

.about-us-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* İçeriği ortalar */
    padding: 20px;
    /* Üst ve alt boşluk */
}

.about-us-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* İçeriği ortalar */
    width: 52%;
    /* İçeriğin genişliği %50 */
    margin: 0 auto;
    /* Merkeze hizalar */
}

.submission-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* İçeriği ortalar */
    padding: 20px;
    width: 52%;
    margin: 0 auto;
    /* Üst ve alt boşluk */
}

.content-body {
    padding: 20px;
    /* İçerik etrafında boşluk */
}