body {
    font-family: "Poppins", serif;
    background: #fffef9
}
a, a:hover, a:active, a:focus {
 color:inherit !important; text-decoration:none !important; 
}
h1 {
 font-weight:300
}
    h1.page-title {
        display: inline-block;
        background: url(../img/banner-brushstroke-2@2x.png) no-repeat top 0px left 0px;
        background-size: 80px auto;
        padding: 35px;
        height: 80px !important;   
    }
.btn-outline-secondary {
    --bs-btn-color: #000000;
    --bs-btn-border-color: #101010;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101010;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #101010;
}
.offcanvas {
 background:none
}
.offcanvas.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    max-height: 100%;
    min-height: 100vh;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
}
.active-lang {
 font-weight:500; color:#FEDE67
}
.menu-container {
    background: #fede67f7;
    min-height: 100vh;
    position: absolute;
    width: 100%;
    z-index: 5
}
.close-btn {
    position: absolute;
    top: 15px;
    right: 50px;
    font-size: 30px;
    opacity: 0.8; cursor:pointer
}
    .close-btn:hover {
        opacity: 1; transition:ease-in-out 0.40s
    }
.menu-logo { width:90%; max-width:350px}
.menu-li {
    list-style: none
}


    .menu-li li {
        line-height: 60px;
        font-size: 22px;
        font-weight: 400;
        padding-left: 20px;
        opacity: 0.9;
        transition: ease-in-out 0.40s
    }
        .menu-li li:hover {
            background: url(../img/white-brush.png) no-repeat top left 0px;
            background-size: 80px auto;
            opacity: 1
        }
.color-yellow {
    background-color: #FEDE67
}
.logo-col img {
    max-width:70%
}
.menu-btn {
    width: 80px;
    height: 70px;
    background: url(../img/menu-brushstroke@2x.png) no-repeat ; background-size:contain; line-height:65px;  text-align:center; cursor:pointer
}
.menu-btn img {
    width: 28px;
}
.banner-logo-content {
 max-width:800px; width:75%;   text-align:center
}
.banner-logo-content {
    max-width: 1000px;
    width: 75%;
    text-align: center
}
    .banner-logo-content .logo-col img {
        width: 500px; max-width:70%
    }
.banner-logo-content  p {
     font-size:20px
}
.tablo-col { width:20%}
.tablo-col .position-relative { height:300px}
.bio-section {
    background: #fcf6ed url(../img/biyografi-bg.png) no-repeat ; background-size:100% auto; background-position:center center;  
}

/*.eserSlide .swiper-wrapper {
    height: 580px
}*/
.eser-list-box {
    text-align: center;
    padding:50px;
    width: auto;
    display: inline-block;
  
}
.eser-li {
    display: inline-block;
    flex-shrink: 1 !important;
}
.eserSlide .eser-li:nth-child(4n+1) .eser-list-box {
    background: url(../img/banner-brushstroke-2@2x.png) no-repeat left 0px top 0px;
    background-size: 150px
}
.eserSlide .eser-li:nth-child(4n+2) .eser-list-box {
    background: url(../img/banner-brushstroke-4@2x.png) no-repeat right 0px bottom 0px;
    background-size: 120px
}
.eserSlide .eser-li:nth-child(4n+3) .eser-list-box {
    background: url(../img/banner-brushstroke-3@2x.png) no-repeat right 0px top 0px;
    background-size: 150px
}
.eserSlide .eser-li:nth-child(4n+4) .eser-list-box {
    background: url(../img/banner-brushstroke-5@2x.png) no-repeat bottom 50px left 0px;
    background-size: 150px
}
.eser-list-img-box {
    background-color: #fff; /* Siyah çerçeve */
    padding: 20px; /* Çerçeve genişliği */
    display: inline-block;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-top: 20px #6c757d solid;
    border-bottom: 20px #6c757d solid;
    border-left: 20px #000000 solid;
    border-right: 20px #000000 solid;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}
.eser-list-img {
   
    max-height: 300px; box-sizing:border-box
}

.swiper-button-next, .swiper-button-prev {
 color:#101010 !important; opacity:0.8

}
    .swiper-button-next:hover, .swiper-button-prev:hover {
        opacity:1; /* Hover durumunda opaklık */
    }

    .swiper-button-next:active, .swiper-button-prev:active {
        opacity: 1; /* Active durumunda opaklık */
    }

.sergi-date {
 font-weight:600; width:60px


}
.outer-frame {
    background-color: black;
    padding: 15px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.8);
}

.middle-frame {
    background-color: #2d2d2d;
    padding: 10px;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 4px rgba(0, 0, 0, 0.5);
}

.inner-frame {
    background-color: black;
    padding: 10px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5);
}

.mat {
    background-color: white;
    padding: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.image {
    display: block;
    max-width: 500px;
    height: auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.eser-tab.nav-tabs {
    border:none !important
}
.eser-tab.nav-tabs .nav-item { margin:5px 5px}

.eser-tab.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover {
    border-radius: 0px;
    border: #101010 solid 1px
}
    .eser-tab.nav-tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
        border-radius: 0px;
        border: #FEDE67 solid 1px;
        color: #101010;
        padding-left: 25PX;
        padding-right: 25PX;
    }
        .eser-tab.nav-tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            border-radius: 0px;
            border: #FEDE67 solid 1px;
            background:#FEDE67
        }


@media (max-width:992px) {
    .close-btn {
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 30px;
        opacity: 0.8;
        cursor: pointer;
    }
        .menu-logo {
        width: 85%;
        max-width: 350px; margin-bottom:40px
    }
    .menu-li {
        list-style: none;
        padding-left:0px
    }


        .menu-li li {
            line-height: 60px;
            font-size: 22px;
            font-weight: 400;
            padding-left: 0px;
            opacity: 0.9;
            transition: ease-in-out 0.40s
        }

            .menu-li li:hover {
                background: url(../img/white-brush.png) no-repeat center center;
                background-size: 80px auto;
                opacity: 1
            }
}
    @media (max-width:768px) {
        .menu-btn {
            width: 80px;
            height: 60px;
            background: url(../img/menu-brushstroke@2x.png) no-repeat;
            background-size: contain;
            line-height: 56px;
            text-align: center;
            cursor: pointer
        }

            .menu-btn img {
            width:25px
            }
        .logo-col img {
            max-width: 80%
        }
                /*.tablo-col:first-child { position:absolute; top:25px;  left:25px; max-width:10%}
        .tablo-col:nth-child(2) {
            position: absolute;
            top: 25px;
            left: 25px;
            max-width: 70%
        }
        .tablo-col:nth-child(3) {
            position: absolute;
            top: 55px;
            right: 25px;
            max-width: 20%
        }
        .tablo-col:nth-child(4) {
            position: absolute;
            top: 25px;
            left: 25px;
            max-width: 10%
        }
        .tablo-col:nth-child(5) {
            position: absolute;
            top: 25px;
            left: 25px;
            max-width: 10%
        }*/
                .tablo-col .position-relative {
         height:120px}
        .tablo-col {
            width: 50%
        }
            .eserlerTabContainer .tablo-col .position-relative {
                height: 117px;
            }
        .eser-list-box {
            text-align: center;
            padding: 10px;
            width: auto;
            display: inline-block;
        }

        .eser-li {
            display: inline-block;
            flex-shrink: 1 !important;
        }

        .eserSlide .eser-li:nth-child(4n+1) .eser-list-box {
            background: url(../img/banner-brushstroke-2@2x.png) no-repeat left 0px top 0px;
            background-size: 150px
        }

        .eserSlide .eser-li:nth-child(4n+2) .eser-list-box {
            background: url(../img/banner-brushstroke-4@2x.png) no-repeat right 0px bottom 0px;
            background-size: 120px
        }

        .eserSlide .eser-li:nth-child(4n+3) .eser-list-box {
            background: url(../img/banner-brushstroke-3@2x.png) no-repeat right 0px top 0px;
            background-size: 150px
        }

        .eserSlide .eser-li:nth-child(4n+4) .eser-list-box {
            background: url(../img/banner-brushstroke-5@2x.png) no-repeat bottom 50px left 0px;
            background-size: 150px
        }

        .eser-list-img-box {
            background-color: #fff; /* Siyah çerçeve */
            padding: 10px; /* Çerçeve genişliği */
            display: inline-block;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            border-top: 10px #6c757d solid;
            border-bottom: 10px #6c757d solid;
            border-left: 10px #000000 solid;
            border-right: 10px #000000 solid;
            box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
        }

        .eserlerTabContainer .eser-list-img {
            max-height: 300px;
            box-sizing: border-box;
            max-width: 100%
        }

        .eser-li-info p {
            margin-bottom: 10px
        }
        .banner-logo-content .logo-col img {
            width: 500px;
            max-width: 85%;
        }


        /*swiper*/
        /*.swiper .eser-li {
         min-width:60vw;
        }*/
        /* .swiper .eser-list-img {
            max-height: 300px;
            height: auto;
            box-sizing: border-box;
            max-width: 60%;
            width: auto
        }

        .swiper-wrapper .eser-list-img-box {
        }*/
        /*.swiper.eserSlide .eser-list-box {
            min-width: 100%;
            height: 250px;
            width: auto;
            display: inline-block;
            min-width: 250px; 
        }
        .swiper.eserSlide .eser-list-img-box {
        
        }
        .swiper .eser-list-img-box {
            max-height: 300px;
            height: auto;
            box-sizing: border-box;
            width: 60%
        }*/

        .swiper .eser-list-img {
            max-height: 150px;
            box-sizing: border-box;
            max-width: max-content
        }
        .swiper .eser-list-box {
            padding:30px
        }

     
    }