/*başlangıç sayfası ayarları*/
header.back {
    background-color: rgb(141, 141, 141);
}

.c-item {
    height: 60vw;
    max-height: 750px;
    overflow: hidden;
}

.c-img {
    height: 100%;
    width: 100%;
    filter: brightness(0.6);
}

.carousel-caption {
    padding-bottom: 10rem;
}

#headerlogo img {
    width: auto;
    height: 12.5vw;
    max-height: 70px;
}

#headerlogo3 {
    max-height: 60px !important;
}

.mainbg {
    position: relative;
    /* Pseudo-element için referans oluşturur */
    overflow: hidden;
    
    /* Taşan kısımları gizler */
}

.mainbg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(220, 220, 220, 0.9), rgba(220, 220, 220, 0.9)), url('../../img/bg.png');
    background-repeat: repeat;
    background-size: 500px 500px;
    filter: blur(1px);
    /* Hafif bulanıklık efekti */
    z-index: -1;
    /* İçeriğin altında kalması için */
}

/*navbar başlangıcı*/
#mainNavbar {
    padding-top: 0rem;
    padding-bottom: 0rem;
    background-color: #0f223f;
}

.navbarFixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

#mainNavbar .navbar-nav .nav-item .nav-link {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    color: #fff;
    letter-spacing: 0.06em;

}

#mainNavbar .navbar-nav .nav-item .nav-link.active,
#mainNavbar .navbar-nav .nav-item .nav-link:hover {
    color: #4e87cd;
}

/*tarihçe başlangıcı*/
#mis {
    margin-top: 5rem;
}

.mySection {
    padding: 3rem 0;
}

.mySection h2.s-heading {
    font-size: 2.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.mySection h3.s-subheading {
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/*sanatci başlangıcı*/


#sanatci .p-item {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

#sanatci .p-item .p-link {
    position: relative;
    display: block;
    margin: 0 auto;
}

#sanatci .p-item .p-link .p-hover {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(48, 48, 48, 0.75);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity ease-in-out 0.3s;
    -webkit-transition: opacity ease-in-out 0.3s;
    -moz-transition: opacity ease-in-out 0.3s;
    -ms-transition: opacity ease-in-out 0.3s;
    -o-transition: opacity ease-in-out 0.3s;
}

#sanatci .p-item .p-link .p-hover .ph-content {
    font-size: 3.3rem;
}

#sanatci .p-item .p-link:hover .p-hover {
    opacity: 1;
}

#vizmis .p-item .p-caption .pc-heading {
    font-size: 1.5rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-bottom: 0;
    font-weight: 700;
}

#sanatci .p-item .p-caption .pc-subheading {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


/*sanatçılar kart*/
/* Genel kart stili */
.card {
    border-radius: 8px; /* Köşe yuvarlaklık */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* Hover efektiyle kartın yukarı kayması */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Hover efektiyle daha belirgin gölge */
}

/* Başlık (Sanat eseri başlığı) */
.card-title {
    font-size: 1.5rem; /* Başlık boyutu */
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    color: #333; /* Başlık için koyu gri renk */
    text-align: center;
}

/* Sanatçı adı soyadı */
.card-text.fw-bold {
    font-size: 1rem; /* Sanatçı adı soyadı boyutu */
    font-weight: 600;
    color: #0056b3; /* Mavi tonunda renk */
    margin: 0.3rem 0;
    text-align: center;
    transition: color 0.3s ease;
}

.card-text.fw-bold:hover {
    color: #003366; /* Sanatçı adı üzerine gelindiğinde renk değişimi */
}

/* Eser numarası */
.card-text.fw-bold:last-child {
    font-size: 0.9rem; /* Eser numarasının boyutunu biraz küçült */
    font-weight: 600;
    color: #666; /* Gri renk */
    text-align: center;
    margin-top: 0.3rem;
}

/* Kart içindeki metin düzeni */
.card-body {
    padding: 1rem; /* İç padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/*yönetici partı*/
.bbody,
.bbody2 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.thn {
    width: 25%;
    float: left;
}

.thn2 {
    width: 25%;
    float: right;
}

.yonImg,.yonImg2 {
    width: 14vw;
    max-width: 17rem;
    aspect-ratio: 5 / 8;
    border-radius: 0.1rem;
    float: left;
    object-fit: cover;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

.yonImg2 {
    float: right !important;
}

.bb {
    float: right;
    width: 57.5vw;
    max-width: 942px;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 1);
}

.bb h2{
    font-size: 32px;
}

.bb h6 {
    font-size: 16px;
}

.bb p{
    font-size: 16px;
}

.dividerdiv{
    display: flex;
    justify-content: center;
}

/* Çizgi stilini ekleyelim */
.divider-line {
    margin-top: 10px;
    border-top: 2px solid #000;
    width: 100%;
}

/* Button Box stilini ekleyelim */
.button-box {
    display: flex;
    gap: 40px;
    /* Butonlar arasında boşluk */
    justify-content: center;
}

.bb2 {
    float: left;
    width: 57.5vw;
    max-width: 942px;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 1);
}

.extraText {
    font-style: italic;
}

.mbhidden {
    display: block;
}

.mbnonhidden {
    display: none;
}

/*harita*/
.ourMap {
    width: 100%;
    height: 20rem;
}

/* Başlangıçta sadece bir kısmı görünür kılmak için */
.hidden-text {
    display: none;
    /* Gizli */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    /* Daha yumuşak geçiş */
}

/* Görünür hale geldiğinde animasyonu */
.hidden-text.show {
    display: block;
    opacity: 1;
}

.divider-line2 {
    border-top: 2px solid #000;
    width: 100%;
}


.action-btn {
    padding: 12px 30px;
    font-size: 16px;
    background-color: #1d3c6d;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Hover ve tıklama efektleri */
    min-width: 180px;
    /* Tüm butonlar eşit boyutta */
    box-shadow: 0 4px 8px rgba(29, 60, 109, 0.5);
    /* Hafif gölge efekti */
}

.action-btn:hover {
    background-color: #142a50;
    /* Koyu mavi tonlarında hover efekti */
    transform: translateY(-2px);
    /* Butona hover efekti */
}

.action-btn:focus {
    outline: none;
}

/* Sergiler listesinin görünürlüğü */
.sergiler-list {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin-top: 2rem;
}

.sergiler-overflow {
    max-height: 600px;
    /* Maksimum yükseklik */
    overflow-y: auto;
    /* Dikey kaydırma çubuğu */
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    /* Biraz boşluk eklemek için */
}

.sergiler-subtitle {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.sergiler-list.show {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    margin-top: 20px;
}

/* Sergiler listesinin stilleri */
.blue-divider {
    border: none;
    opacity: 0.2;
    border-top: 2px solid #183959;
    width: 80%;
    margin: 15px auto;
}

.sergiler-items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.sergiler-items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.sergiler-items li {
    margin-bottom: 10px;
    font-size: 1em;
    color: #555;
}

.sergiler-items li:last-child {
    margin-bottom: 0;
}

/* Ödüller listesinin görünürlüğü */
.oduller-list {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin-top: 2rem;
}

.oduller-overflow {
    max-height: 600px;
    /* Maksimum yükseklik */
    overflow-y: auto;
    /* Dikey kaydırma çubuğu */
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    /* Biraz boşluk eklemek için */
}

.oduller-subtitle {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.oduller-list.show {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    margin-top: 20px;
}

.oduller-items {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.oduller-items li {
    margin-bottom: 10px;
    font-size: 1em;
    color: #555;
}

.oduller-items li:last-child {
    margin-bottom: 0;
}

/* Butonların aktif olduğu zaman görüntülenmesini sağlamak */
.show-more-btn.active+.sergiler-list {
    display: block;
}

.footer {
    background-color: #0f223f;
}

/* TEST */
/* Genel Konteyner */
.eserler-container {
    margin-top: 2rem;
    padding: 2rem;
    background: #ffffff;
    /* Beyaz arka plan */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* Daha şık bir gölge */
    width: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    overflow: hidden;
    /* Sınırlı içerik için taşmayı engeller */
}

.eserler-container.show {
    display: block;
    opacity: 1;
}

/* Başlık */
.eserler-title {
    text-align: center;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid #dcdcdc;
    /* Hafif gri alt sınır */
    padding-bottom: 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: #333;
}

/* Eser Kartı */
.eser-card {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.8rem;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    /* Daha derin gölge */
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
}

.eser-card:hover {
    transform: translateY(-5px);
    /* Hover'da kart yukarıya kayar */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.eser-img {
    width: 35%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 12px;
    /* Üst sol köşe yuvarlatma */
    border-bottom-left-radius: 12px;
    /* Alt sol köşe yuvarlatma */
}

/* Eser Bilgileri */
.eser-details {
    padding: 1.5rem;
    width: 65%;
    font-family: 'Roboto', sans-serif;
}

/* Başlık, Açıklama ve Diğer Bilgiler */
.eser-name {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #333;
}

.eser-desc {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.eser-num {
    font-size: 1rem;
    color: #777;
    /* Açık gri renk */
    margin-bottom: 1.25rem;
    font-style: italic;
    display: block;
}

/* Yeni Alanlar: En, Boy, Fiyat */
.eser-dimensions {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #555;
    display: flex;
    gap: 1rem;
}

.dimension {
    display: inline-block;
    background-color: #f2f2f2;
    padding: 0.15rem 0.75rem;
    border-radius: 8px;
    font-weight: 500;
}

/* Satılık Durumu: Her zaman görünür olacak şekilde */
.eser-status-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.eser-price {
    font-size: 1.15rem;
    font-weight: 500;
    color: #1f3b5a;
    /* Lacivert-mavi fiyat rengi */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eser-hidden-status {
    font-size: 1rem;
    color: #e74c3c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Animasyonlar */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.eserler-container {
    animation: fadeIn 0.8s ease-out;
}

/* TEST 2 */
/* Genel Alan */
.container {
    margin: 0 auto;
}

.navcontainer {
    max-width: 1600px;
}

.s-heading {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
}

.s-subheading {
    font-size: 1rem;
    color: #666;
}

/* Duyuru Kartları Alanı */
.duyuru-cards {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Dinamik sütun düzeni */
    gap: 2rem;
    /* Aralarındaki boşluk */
    justify-content: center;
    /* Kartları yatayda ortalar */
}

.duyuru-card {
    background: linear-gradient(180deg, #ffffff, #d0d0d0);
    border-radius: 10px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.8);
    width: 400px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-height: 50rem;
}

.duyuru-card:hover {
    transform: translateY(-5px);
    box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.2);
}

/* Duyuru Resmi */
.duyuru-img {
    width: 100%;
    height: 300px;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
}

/* Başlık */
.duyuru-title {
    font-size: 1.25rem;
    color: #333;
    margin: 1rem 0 0.5rem;
}

/* Yayınlanma Tarihi */
.duyuru-date {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.5rem;
}

/* İçerik */
.duyuru-content {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
    display: -webkit-box;
    /* Flex gibi davranmasını sağlar */
    -webkit-line-clamp: 8;
    /* 8 satırda sonlandırır */
    -webkit-box-orient: vertical;
    /* Satır yönünü dikey yapar */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Devamını Oku Butonu */
.duyuru-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #fff;
    background-color: #1d3c6d;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.duyuru-button:hover {
    background-color: #142a50;
}


/* TEST 3 DUYURULAR SAYFASI */

/* Duyuru Satırı */
.duyuru-satiri {
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Duyuru Kartı */
.duyuru-kart {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    width: 100%;
    /* Yüksekliği tamamen kapsar */
}

.duyuru-kart:hover {
    transform: translateY(-15px);
    /* Hover animasyonu */
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.3);
}

/* Resim Alanı */
.duyuru-resim-wrapper {
    width: 100%;
    height: 30rem;
    /* Görsel yüksekliği */
    overflow: hidden;
}

.duyuru-resim {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.duyuru-kart:hover .duyuru-resim {
    transform: scale(1.02);
    /* Hover animasyonu */
}

/* İçerik Alanı */
.duyuru-icerik {
    padding: 2rem;
}

.duyuru-baslik {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

.duyuru-metni {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 1rem;
    max-height: calc(1.8rem * 10); /* 10 satır yüksekliği */
    overflow-y: auto; /* Yalnızca dikey kaydırma çubuğu ekler */
}

.duyuru-tarih {
    font-size: 1rem;
    color: #999;
}

/* Genel Stil */
.contact-section {
    color: black;
}

/* İletişim Bilgi Kutusu */
.contact-info {
    background: linear-gradient(180deg, #ffffff, #d0d0d0); /* Info kartlarıyla aynı */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Bilgi Kutuları */
.info-box {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background: #ddd; /* Hafif mavi-gri tonu */
    padding: 12px;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
    border-left: 5px solid #2a5d9f; /* Sol kenarda renkli çizgi efekti */
}

/* İkonlar */
.info-box i {
    font-size: 24px;
    margin-right: 15px;
    color: #2a5d9f; /* Canlı mavi tonu */
}

/* Metin Renkleri */
.info-box p {
    margin: 0;
    font-size: 18px;
    color: #333; /* Daha koyu okunabilir gri */
}

/* Linkler */
.info-box a {
    color: #2a5d9f;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.info-box a:hover {
    color: #1d3c6d;
}

/* Hover Efekti */
.info-box:hover {
    transform: scale(1.03);
    background: #d6e4f0; /* Hover'da biraz daha koyu maviye dönüyor */
    border-left: 5px solid #1d3c6d; /* Kenar çizgisi koyulaşıyor */
}

/* Harita */
.ourMap {
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Bilgi Kartları Stili */
.info-card {
    background: linear-gradient(180deg, #ffffff, #d0d0d0);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    margin-bottom: 20px;
}

.info-card i {
    font-size: 40px;
    color: #4e87cd;
    margin-bottom: 10px;
    color: #1d3c6d;
}

.info-card h4 {
    font-size: 20px;
    margin-bottom: 10px;
    color: black;
}

.info-card p {
    font-size: 16px;
    margin: 0;
    color: black;
}

/* Hover Efekti */
.info-card:hover {
    transform: scale(1.05);
}



/* Responsive Ayarlar */
@media (max-width: 1600px) { 
    .button-box {
        gap: 20px;
    }
    
    .action-btn {
        padding: 10px 10px;
        font-size: 0.7rem;
        min-width: 140px;
    }
}

/* Responsive Ayarlar */
@media (max-width: 1400px) { 
    .duyuru-card {
        width: 350px !important;
    }

    .duyuru-img {
        height: 250px !important;
    }

    .card-title{
        font-size: 1.2rem;
    }

    .card-text.fw-bold{
        font-size: 0.8rem;
    }

    .card-text.fw-bold:last-child {
        font-size: 0.7rem; /* Eser numarasının boyutunu biraz küçült */
    }
}

/* Responsive Ayarlar */
@media (max-width: 1200px) { 
    .button-box {
        gap: 4px;
    }
    
    .action-btn {
        padding: 10px 10px;
        font-size: 0.7rem;
        min-width: 100px;
    }
}

/*ekran boyutuna göre ayarlar*/
@media(max-width:991.98px) {
    header.back {
        padding-top: 0rem;
    }

    #mainNavbar .navbar-nav .nav-item .nav-link {
        color: black;
    }


    #sanatci .p-item {
        max-width: 10rem;
        margin-left: auto;
        margin-right: auto;
    }

    .bbody,
    .bbody2 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
    }

    .thn,
    .thn2 {
        width: 40%;
        padding-bottom: 1rem;

    }

    .yonImg,
    .yonImg2 {
        width: 30vw;
        float: none;
    }

    .mbhidden {
        display: none;
    }

    .mbnonhidden {
        display: block;
    }

    .duyuru-resim-wrapper {
        height: 15rem;
    }

    .duyuru-baslik {
        font-size: 1.5rem;
    }

    .duyuru-metni {
        font-size: 1rem;
    }

    .mySection {
        padding: 1rem 0;
    }
    
    .mySection h2.s-heading {
        font-size: 1.5rem;
    }

    .mySection h3.s-subheading {
        font-size: 0.9rem;
        padding: 0 1rem;
    }

    #mis {
        margin-top: 2rem;
    }

    .duyuru-baslik {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
    }
    
    .duyuru-metni {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 0.8rem;
    }
    
    .duyuru-tarih {
        font-size: 0.8rem;
    }

    .eser-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .eser-img {
        width: 100%;
        height: 200px; /* Resmin boyutunu ayarlayabilirsin */
        border-radius: 12px 12px 0 0; /* Üst köşeleri yuvarlak yap */
    }

    .eser-details {
        width: 100%;
        padding: 1rem;
    }

    .eser-dimensions {
        justify-content: center;
    }

    .eser-status-container {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .mainbg::before {
        background-size: 450px 450px;
    }

    .card-title{
        font-size: 1rem;
    }

    .card-text.fw-bold{
        font-size: 0.7rem;
    }

    .card-text.fw-bold:last-child {
        font-size: 0.6rem; /* Eser numarasının boyutunu biraz küçült */
    }

}

@media(min-width:992px) {
    header.back {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    #mainNavbar{
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border: none;
        background-color: #0f223f;
        transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
        -webkit-transition: padding-top 0.3 ease-in-out, padding-bottom 0.3s ease-in-out;
        -moz-transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
        -ms-transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
        -o-transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
    }

    #mainNavbar .navbar-brand {
        font-size: 0.5rem;
        transition: font-size 0.3s ease-in-out;
        -webkit-transition: font-size 0.3s ease-in-out;
        -moz-transition: font-size 0.3s ease-in-out;
        -ms-transition: font-size 0.3s ease-in-out;
        -o-transition: font-size 0.3s ease-in-out;
    }

    #mainNavbar .navbar-nav .nav-item {
        margin-right: 1rem;
    }

    #mainNavbar .navbar-nav .nav-item .nav-link {
        color: white;
        text-shadow: black 2px 1px 2px;
    }

    #mainNavbar.navbar-mobile {
        padding-top: 0rem;
        padding-bottom: 0rem;
        background-color: #0f223f;
        color: #666;
    }

    .eser-img{
        max-width: 282px;
        max-height: 282px;
    }
}

.duyuru-cards {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Dinamik sütun düzeni */
    gap: 2rem; /* Aralarındaki boşluk */
    justify-content: center; /* Kartları yatayda ortalar */
}

.duyuru-card {
    background: linear-gradient(180deg, #ffffff, #d0d0d0);
    border-radius: 10px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.8);
    width: 400px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-height: 50rem;
}

.duyuru-card:hover {
    transform: translateY(-5px);
    box-shadow: 3px 6px 15px rgba(0, 0, 0, 0.2);
}

/* Duyuru Resmi */
.duyuru-img {
    width: 100%;
    height: 300px;
    border-radius: 10px 10px 0 0;
    object-fit: cover;
}

/* Başlık */
.duyuru-title {
    font-size: 1.25rem;
    color: #333;
    margin: 1rem 0 0.5rem;
}

/* Yayınlanma Tarihi */
.duyuru-date {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.5rem;
}

/* İçerik */
.duyuru-content {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Devamını Oku Butonu */
.duyuru-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #fff;
    background-color: #1d3c6d;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.duyuru-button:hover {
    background-color: #142a50;
}

/* Media Query: Mobil uyumlu düzen */
@media (max-width: 768px) {
    .duyuru-card {
        width: 90%; /* Kart genişliğini daha küçük yap */
        max-height: 35rem; /* Kart yüksekliğini küçült */
        padding: 0.75rem; /* Kart içindeki boşluğu azalt */
    }

    .duyuru-img {
        width: 100%;
        height: 220px;
        border-radius: 10px 10px 0 0;
        object-fit: cover;
    }

    .duyuru-title {
        font-size: 1.1rem; /* Başlık boyutunu küçült */
    }

    .card-img-top {
        height: 400px !important;
    }

    .duyuru-content {
        font-size: 0.9rem; /* İçerik boyutunu küçült */
        -webkit-line-clamp: 5; /* Daha az satır göster */
    }

    .duyuru-button {
        font-size: 0.8rem; /* Buton boyutunu küçült */
        padding: 0.4rem 0.8rem; /* Buton içindeki boşluğu küçült */
    }

    .duyuru-baslik {
        font-size: 1.2rem;
        margin-bottom: 0.6rem;
    }
    
    .duyuru-metni {
        font-size: 0.7rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }
    
    .duyuru-tarih {
        font-size: 0.6rem;
    }

    .bb,
    .bb2 {
        width: 100%;
        position: relative;
        padding: 2rem;
        border-radius: 10px;
    }

    .bb h2{
        font-size: 1.2rem;
    }
    
    .bb h6 {
        font-size: 0.8rem;
    }

    .sergiler-list h3,
    .oduller-list h3,
    .eserler-container h2{
        font-size: 1rem;
    }

    .sergiler-list h4,
    .oduller-list h4{
        font-size: 0.8rem;
    }

    .sergiler-list ul,
    .oduller-list ul{
        font-size: 0.6rem;
    }

    .eser-card .eser-name {
        font-size: 0.8rem;
    }

    .eser-card .eser-desc {
        font-size: 0.6rem;
    }

    .eser-card .eser-num {
        font-size: 0.6rem;
    }

    .eser-card .dimension {
        font-size: 0.6rem;
    }

    .eser-card .eser-price {
        font-size: 0.75rem;
    }

    .eser-card .eser-satilir {
        font-size: 0.7rem;
    }
    
    .bb p{
        font-size: 0.6rem;
    }

    .button-box {
        gap: 4.2px;
    }
    
    .action-btn {
        padding: 6px 6px;
        font-size: 0.5rem;
        min-width: 65px;
    }

    .mainbg::before {
        background-size: 350px 350px;
    }

    .card-title{
        font-size: 1.2rem;
    }

    .card-text.fw-bold{
        font-size: 0.8rem;
    }

    .card-text.fw-bold:last-child {
        font-size: 0.7rem; /* Eser numarasının boyutunu biraz küçült */
    }
}

/* Media Query: Çok küçük ekranlar için */
@media (max-width: 480px) {
    .duyuru-card {
        width: 80%; /* Kart genişliği tam ekranı kaplasın */
        max-height: 32rem; /* Kart yüksekliği daha da küçülsün */
    }

    .duyuru-img {
        width: 100%;
        height: 20
        0px;
        border-radius: 10px 10px 0 0;
        object-fit: cover;
    }

    .duyuru-title {
        font-size: 1rem; /* Başlık boyutunu daha da küçült */
    }

    .duyuru-content {
        font-size: 0.85rem; /* İçerik boyutunu daha da küçült */
        -webkit-line-clamp: 4; /* Daha da az satır göster */
    }

    .duyuru-button {
        font-size: 0.75rem; /* Buton boyutunu küçült */
        padding: 0.3rem 0.6rem; /* Buton içindeki boşluğu daha da küçült */
    }

    .duyuru-kart {
        width: 80%;
    }

    .duyuru-baslik {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }
    
    .duyuru-metni {
        font-size: 0.7rem;
        line-height: 1.4;
        margin-bottom: 0.7rem;
        max-height: calc(1.8rem * 6); /* 10 satır yüksekliği */
        overflow-y: auto; /* Yalnızca dikey kaydırma çubuğu ekler */
        -webkit-overflow-scrolling: touch;
    }

    .duyuru-icerik {
        background-color: #e0e0e0;
    }
    .duyuru-tarih {
        font-size: 0.7rem;
    }

    .mainbg::before {
        background-size: 250px 250px;
    }

    .bb,
    .bb2 {
        width: 100%;
        position: relative;
        padding: 2rem;
        border-radius: 10px;
    }

    .bb h2{
        font-size: 1.2rem;
    }
    
    .bb h6 {
        font-size: 0.8rem;
    }

    .sergiler-list h3,
    .oduller-list h3,
    .eserler-container h2{
        font-size: 1rem;
    }

    .sergiler-list h4,
    .oduller-list h4{
        font-size: 0.8rem;
    }

    .sergiler-list ul,
    .oduller-list ul{
        font-size: 0.6rem;
    }

    .eser-card .eser-name {
        font-size: 0.8rem;
    }

    .eser-card .eser-desc {
        font-size: 0.6rem;
    }

    .eser-card .eser-num {
        font-size: 0.6rem;
    }

    .eser-card .dimension {
        font-size: 0.6rem;
    }

    .eser-card .eser-price {
        font-size: 0.75rem;
    }

    .eser-card .eser-satilir {
        font-size: 0.7rem;
    }
    
    .bb p{
        font-size: 0.6rem;
    }

    .button-box {
        gap: 4.2px;
    }
    
    .action-btn {
        padding: 6px 6px;
        font-size: 0.5rem;
        min-width: 65px;
    }
}