--- START OF FILE style.txt ---

/* Global Resets & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fdfbf5; /* Very light beige for sepia base */
}

/* Sepia theme filter is not used as per clean design, but colors reflect a sepia palette */
/* .sepia-theme img:not(.logo-img):not(.social-media-icons i) {
    filter: sepia(0.3) contrast(0.9) brightness(1.05);
    transition: filter 0.3s ease-in-out;
}
.sepia-theme img:hover {
    filter: sepia(0) contrast(1) brightness(1);
} */


h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: #4a3b31; /* Darker brown for titles */
    margin-bottom: 0.8em;
}

a {
    text-decoration: none;
    color: #8B4513; /* SaddleBrown or similar */
}
a:hover {
    color: #A0522D; /* Sienna */
}

.container { /* Optional wrapper for content sections */
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Header & Navigation */


/* Mevcut CSS'inizde bulunan ".header-main" kuralı, sağlanan HTML'de bulunmayan bir div için yazılmıştır.
   Bu kuralı kaldırdık veya kullanmıyoruz, çünkü flexbox'ı doğrudan <header> etiketine uyguluyoruz. */

.header-top {
    /* Bu div logo ve mobil menü geçiş düğmesini içerir. */
    /* Logoyu ve mobil düğmeyi (gerekirse) hizalamak için */
    display: flex; /* İçindeki öğeleri de flex olarak hizala */
    align-items: center; /* Dikeyde ortala */
    flex-shrink: 0; /* Logo konteynerinin sıkışmasını engelle */
}

.logo-container {
    /* Logo konteynerine stil ekleyebilirsiniz, örneğin maksimum genişlik/yükseklik */
}

.logo-img {
    max-height: 60px; /* Logonuzun yüksekliğini ayarlayın */
    width: auto; /* Oranı koru */
    display: block; /* Resmin altındaki boşluğu kaldırmak için */
}

.mobile-menu-toggle {
    /* Mobil menü düğmesini masaüstünde gizle */
    display: none;
    /* Mobil ekranlar için medya sorgusu ile görünür hale getirilmelidir */
    /* Örn:
    @media (max-width: 768px) {
        .mobile-menu-toggle {
            display: block;
            margin-left: auto; // Logodan sağa it (eğer header-top'ın içinde tek başına olacaksa)
            // Eğer header-top içinde logo ile yan yana ve toggle sağdaysa:
            // justify-content: space-between; header-top içinde kullanılmalı.
        }
    }
    */
}





.main-nav ul li a:hover,
.main-nav ul li a.active {
    color: #8d6e63; /* Fare üzerine gelindiğinde veya aktif olduğunda daha açık sepya */
}

.visitor-counter {
    /* Ziyaretçi sayacı menünün hemen sağında, aynı satırda olacaktır. */
    /* main-nav'in margin-left: auto; özelliği bunu da sağa itecektir. */
    margin-left: 20px; /* Menü ile sayaç arasına boşluk bırak */
    flex-shrink: 0; /* Sayacın daralmasını engelle */
    white-space: nowrap; /* Sayacın tek satırda kalmasını sağla */
    font-size: 0.9em; /* Biraz küçült */
    color: #5d4037; /* Metin rengi */
}

.visitor-counter p {
    margin: 0; /* Varsayılan paragraf boşluklarını kaldır */
}

/* --- Medya Sorguları (Responsive Tasarım İçin Önemli) --- */
/* Küçük ekranlar (mobil) için menü düzenini değiştir */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Mobil görünümde öğeleri dikey sırala */
        align-items: flex-start; /* Öğeleri sola hizala */
        padding: 10px 20px; /* Mobil padding ayarlaması */
    }

    .header-top {
        width: 100%; /* Mobil görünümde tam genişlik */
        justify-content: space-between; /* Logo sola, toggle sağa */
        margin-bottom: 10px; /* Altına boşluk bırak */
    }

    .mobile-menu-toggle {
        display: block; /* Mobil cihazlarda görünür yap */
        background: none;
        border: none;
        font-size: 2em;
        cursor: pointer;
        color: #5d4037;
    }




    .visitor-counter {
        width: 100%; /* Mobil görünümde tam genişlik */
        text-align: center; /* Mobil görünümde ortala */
        margin-left: 0; /* Marjini sıfırla */
        margin-top: 10px; /* Üstten boşluk bırak */
    }
}
.header-top {
    /* Removed as per wireframe, visitor counter is now in a section */
    /* If needed, keep it for other top elements, e.g. language selection */
}
.logo-container {
    /*margin-bottom: 15px;  Space between logo and nav */
    text-align: center;
}
.logo-container .logo-img {
    max-height: 100px; /* Adjust as needed */
    margin: 0; /* Remove previous left margin */
}

.mobile-menu-toggle {
    display: none; /* Hidden by default, shown on mobile */
    font-size: 1.8em;
    background: none;
    border: none;
    color: #4a3b31;
    cursor: pointer;
    position: absolute; /* Position relative to header or header-main */
    top: 25px;
    right: 5%;
}
/* .visitor-counter { /* Moved to a dedicated section */
    /* text-align: right; */
    /* font-size: 0.9em; */
    /* color: #666; */
    /* margin-top: 5px; */
/* } */


/* Main Content Sections */
.home-main-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}
section {
    padding: 40px 0;
    border-bottom: 1px dashed #dcd0c0; /* Subtle separator */
}
section:last-child {
    border-bottom: none;
}
section h2 {
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}
section h2::after { /* Decorative underline for section titles */
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background-color: #8B4513;
    margin: 10px auto 0;
    /* For decorative flourishes, you would use background-image or SVG here */
    /* Example: background-image: url('path/to/decorative-svg.svg'); background-repeat: no-repeat; background-position: center; */
}

/* Home Page Specific Layouts */
.anasayfa-slider-and-videos-section {
    display: flex;
    gap: 30px; /* Space between main slider and sidebar */
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 40px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.main-slider-area {
    flex: 2; /* Main slider takes more space */
    min-width: 500px; /* Minimum width for slider */
}
.sidebar-videos-and-counter {
    flex: 1; /* Sidebar takes remaining space */
    min-width: 300px; /* Minimum width for sidebar */
    display: flex;
    flex-direction: column;
    /*gap: 30px;*/
}
.visitor-counter-box {
    background-color: #f9f5ef;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #e0d8cd;
    text-align: center;
}
.visitor-counter-box h3 {
    font-family: 'Playfair Display', serif;
    color: #4a3b31;
    font-size: 1.5em;
    margin-bottom: 10px;
}
.visitor-counter-box p {
    font-size: 2.2em;
    font-weight: bold;
    color: #8B4513;
}


/* Slider Styles (Swiper.js Integration) */
.slider-container.swiper-container {
    width: 100%;
    /* height: 550px; /* Define a fixed height for the container */
    padding-bottom: 40px; /* Space for pagination */
    position: relative;
    overflow: hidden; /* Important for Swiper */
}

/* Anasayfa Photo Slider Specifics */
.photo-slider.swiper-container {
    height: 550px; /* Fixed height for main slider */
}

.photo-slider .swiper-slide.photo-slide-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensure content doesn't overflow slide bounds */
}
/* Gizli img etiketi lightbox için */
.photo-slider .swiper-slide.photo-slide-item .slide-img-for-lightbox {
    display: none;
}

.photo-slider .swiper-slide.photo-slide-item .slide-bg-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* Resmi tüm alanı kaplayacak şekilde boyutlandır, gerekirse kırp */
    border: 3px solid #dcd0c0;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
    cursor: zoom-in;
}

/* Lightbox trigger on the background image div */
.photo-slider .swiper-slide.photo-slide-item .slide-bg-img.lightbox-trigger {
    cursor: zoom-in;
}


/* Eser Slider Styles */
.eser-slider.swiper-container {
    /* Swiper handles width and items per view, so no fixed width or flex on slide */
    /* height: auto; */
    padding-bottom: 40px; /* For pagination */
}
.eser-slider .swiper-slide.eser-item-anasayfa {
    text-align: center;
    display: flex; /* Enable flex for vertical centering if needed */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align to top */
    /* Swiper will set the width based on slidesPerView */
}
.eser-slider .swiper-slide.eser-item-anasayfa img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border: 2px solid #dcd0c0;
    margin-bottom: 10px;
    cursor: pointer;
}
.eser-slider .swiper-slide.eser-item-anasayfa h3 {
    font-size: 1.2em;
    color: #4a3b31;
    margin-bottom: 0;
    text-align: center;
}

/* Swiper navigation buttons */
.swiper-button-prev, .swiper-button-next {
    color: #8B4513 !important; /* Override default Swiper color */
}
/* Swiper pagination dots */
.swiper-pagination-bullet-active {
    background: #8B4513 !important; /* Override default Swiper color */
}

/* Videolar */
.videolar-section {
    padding: 0; /* Remove extra padding as it's part of a two-column layout */
    border-bottom: none; /* No separator here */
}
.videolar-section h2 {
    text-align: left; /* Align title to left within its column */
    font-size: 1.8em; /* Slightly smaller for sidebar */
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #dcd0c0;
}
.videolar-section h2::after {
    display: none; /* Remove underline for sidebar title */
}
.video-gallery {
    display: grid; /* Grid kullanın */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Daha küçük kutular */
    gap: 15px; /* Space between videos */
}
.video-item {
    cursor: pointer;
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    display: flex; /* İçeriği dikeyde ortalamak için */
    flex-direction: column;
    justify-content: space-between; /* Resim ve metin arasında boşluk */
}
.video-item img {
    width: 100%;
    height: 120px; /* Sabit küçük yükseklik */
    object-fit: cover; /* Resmi kutuya sığdırmak için */
    margin-bottom: 10px;
}
.video-item span {
    font-family: 'Playfair Display', serif;
    font-size: 1em; /* Daha küçük başlık */
    color: #4a3b31;
    display: block; /* Tam genişlik alması için */
    white-space: nowrap; /* Tek satırda kalması için */
    overflow: hidden; /* Taşmayı gizle */
    text-overflow: ellipsis; /* Üç nokta göster */
}

/* Hakkında Kısa */
.hakkinda-kisa-section h2 { /* Align with wireframe - heading above content */
    margin-bottom: 30px;
}
.hakkinda-kisa-content {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
}
.hakkinda-foto {
    position: relative; /* For positioning the background effect */
    flex-basis: 300px; /* Fixed width */
    max-width: 100%;
    height: 350px; /* Define a height for the container */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide overflow of background */
}
.hakkinda-foto .hakkinda-foto-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/mustafa_duzleme_hakkinda_bg.png'); /* A separate background image for blur (assuming you'll create this) */
    background-size: cover;
    background-position: center;
    filter: blur(5px); /* Apply blur effect */
    transform: scale(1.05); /* To hide blur edges */
    z-index: 0;
}
.hakkinda-foto img {
    position: relative; /* Position relative to the parent hakkinda-foto */
    max-width: 90%; /* Smaller image on top of blurred background */
    max-height: 80%;
    border-radius: 5px;
    border: 5px solid white;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    z-index: 1; /* Place above the background */
    object-fit: contain; /* Ensure image fits */
}
.hakkinda-metin {
    flex: 1;
}
.hakkinda-metin p {
    font-size: 1.05em;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #555;
    padding-left: 15px;
    padding-right: 15px;
}
.btn-devamini-oku {
    display: inline-block;
    background-color: #8B4513;
    color: #fff;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.btn-devamini-oku:hover {
    background-color: #7a3c00;
}


/* Kim Ne Dedi Anasayfa */
.kim-ne-dedi-grid { /* Changed from slider to grid */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Two columns for larger screens */
    gap: 20px;
}
.kim-ne-dedi-item {
    background-color: #f9f6f0;
    padding: 20px;
    border-left: 5px solid #8B4513;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}
.kim-ne-dedi-item p { font-style: italic; margin-bottom: 10px; }
.kim-ne-dedi-item footer { text-align: right; font-weight: bold; }

/* Orduzudan Kareler */
.orduzu-slider.swiper-container {
    height: 400px; /* Fixed height for Orduzu slider */
}
.orduzu-slider .swiper-slide.orduzu-slide-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.orduzu-slider .swiper-slide.orduzu-slide-item img {
    width: 100%; /* Make image fill the slide */
    height: 100%; /* Make image fill the slide */
    object-fit: contain; /* Ensure the full image is visible, showing borders if necessary */
    border: 2px solid #dcd0c0;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    cursor: zoom-in;
}

/* Footer */
footer {
    background-color: #4a3b31; /* Dark brown footer */
    color: #efebe4; /* Light text on dark footer */
    text-align: center;
    padding: 30px 5%;
    margin-top: 30px;
}
.social-media-icons a {
    color: #efebe4;
    margin: 0 10px;
    font-size: 1.5em;
    transition: color 0.3s;
}
.social-media-icons a:hover {
    color: #c0a080; /* Lighter brown for hover */
}
footer p {
    margin-top: 10px;
    font-size: 0.9em;
}

/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.85);
    justify-content: center; /* Flex container olarak ortalama */
    align-items: center; /* Flex container olarak ortalama */
}
.lightbox-modal-content { /* For image lightbox */
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}
.lightbox-video-container { /* For video lightbox */
    display: flex; /* İçindeki iframe'i ortalamak için */
    justify-content: center;
    align-items: center;
    width: 100%; /* Kapsayıcının genişliği */
    height: 100%; /* Kapsayıcının yüksekliği */
}
.lightbox-video-container iframe {
    width: 80vw;
    height: calc(80vw * 9 / 16); /* 16:9 aspect ratio */
    max-width: 900px; /* Daha geniş video izleme deneyimi */
    max-height: 506px; /* 900 * 9 / 16 */
    display: block;
    margin: auto;
}

#lightbox-caption {
    margin: 15px auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    font-size: 1.2em;
}
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
}


/* Loader Styles */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fdfbf5; /* Match body background */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#loader-content p {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    color: #4a3b31;
    margin-bottom: 20px;
}
#loader-animation-container {
    width: 200px; /* Adjust as needed for your animation */
    height: 200px; /* Adjust as needed */
    /* border: 1px solid #ccc;  For visualizing */
    margin: 0 auto;
    /* For SVG/Canvas based drawing animation */
}


/* Responsive Styles */
@media (max-width: 1024px) { /* Adjust breakpoint for two column layout */
    .anasayfa-slider-and-videos-section {
        flex-direction: column; /* Stack main slider and sidebar vertically */
        align-items: center; /* Center them */
    }
    .main-slider-area, .sidebar-videos-and-counter {
        min-width: unset; /* Remove min-width to allow full width */
        width: 100%;
    }
    .main-slider-area {
        margin-bottom: 30px; /* Space between stacked sections */
    }
    .photo-slider.swiper-container {
        height: 450px; /* Adjust height for smaller screens */
    }
    .orduzu-slider.swiper-container {
        height: 300px;
    }
    .video-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Daha küçük ekranlarda daha da küçült */
    }
    .video-item img {
        height: 100px; /* Daha da küçük resimler */
    }
    .video-item span {
        font-size: 0.9em;
    }
}


@media (max-width: 768px) {
    .header-main {
        align-items: center;
    }
    .mobile-menu-toggle {
        display: block;
        position: static; /* Adjust for better positioning on mobile */
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .main-nav {
        display: none; /* Initially hidden on mobile */
        width: 100%;
    }
    .main-nav.active { display: block; } /* Shown by JS */
    .main-nav ul {
        flex-direction: column;
        align-items: center;
    }
    .main-nav li { margin: 10px 0; }

    .hakkinda-kisa-content { flex-direction: column; }
    .hakkinda-foto { max-width: 80%; margin-bottom: 20px; height: 300px; }
    .hakkinda-foto img { max-width: 90%; max-height: 80%; }

    .eser-slider .swiper-slide {
        width: calc(50% - 10px); /* 2 items on mobile */
    }
    .photo-slider .swiper-slide.photo-slide-item .slide-bg-img {
        height: 300px; /* Further reduce height for main slider image */
    }
    .kim-ne-dedi-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }

    .video-gallery {
        grid-template-columns: 1fr; /* Single column for videos */
    }
}

/* === İletişim ve Ziyaretçi Defteri Sayfası === */
.iletisim-ziyaretci-defteri-section h2 {
    margin-bottom: 50px;
}
.iletisim-content {
    display: flex;
    gap: 40px;
    flex-wrap: wrap; /* Mobil için */
}
.iletisim-form-wrap {
    flex: 2; /* Form alanı daha geniş olsun */
    min-width: 300px; /* Mobil için minimum genişlik */
}
.iletisim-bilgi-wrap {
    flex: 1;
    min-width: 280px;
    background-color: #f9f5ef; /* Açık renk arkaplan */
    padding: 30px;
    border-radius: 6px;
}

.iletisim-form-wrap h3, .iletisim-bilgi-wrap h3 {
    font-size: 1.6em;
    color: #4a3b31;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #a07c52;
}
.iletisim-form-wrap p, .iletisim-bilgi-wrap p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: #555;
}

.iletisim-form .form-grup {
    margin-bottom: 20px;
}
.iletisim-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #5a4a42;
}
.iletisim-form input[type="text"],
.iletisim-form input[type="email"],
.iletisim-form input[type="tel"],
.iletisim-form textarea {
    width: 95%;
    padding: 12px 15px;
    border: 1px solid #dcd0c0;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    transition: border-color 0.3s;
}
.iletisim-form input:focus, .iletisim-form textarea:focus {
    outline: none;
    border-color: #a07c52;
    box-shadow: 0 0 0 2px rgba(160, 124, 82, 0.2);
}
.iletisim-form textarea {
    min-height: 150px;
    resize: vertical;
}
.btn-gonder {
    display: inline-block;
    background-color: #8B4513; /* Ana tema rengi */
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.btn-gonder:hover {
    background-color: #7a3c00; /* Koyu ton */
}

/* Form mesajları (başarı, hata) */
.form-message {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-weight: 500;
}
.form-message.success {
    background-color: #e6ffed;
    border: 1px solid #5cb85c;
    color: #1e4620;
}
.form-message.error {
    background-color: #ffebee;
    border: 1px solid #d32f2f;
    color: #c62828;
}


.iletisim-bilgi-wrap ul {
    list-style: none;
    padding-left: 0;
}
.iletisim-bilgi-wrap ul li {
    margin-bottom: 15px;
    font-size: 1.05em;
    color: #444;
    display: flex;
    align-items: center;
}
.iletisim-bilgi-wrap ul li i {
    margin-right: 12px;
    color: #a07c52; /* İkon rengi */
    font-size: 1.3em;
    width: 25px; /* İkonlar için sabit genişlik */
    text-align: center;
}
.map-placeholder {
    width: 100%;
    height: 250px;
    background-color: #e9e2d9;
    border-radius: 4px;
    margin-top: 20px;
    border: 1px solid #dcd0c0;
}


/* === Kim Ne Dedi Sayfası === */
.kim-ne-dedi-sayfasi-section h2 {
    margin-bottom: 30px;
}
.kim-ne-dedi-aciklama {
    margin-bottom: 40px;
    font-size: 1.1em;
    line-height: 1.8;
    color: #555;
    text-align: center;
}
.kim-ne-dedi-aciklama a {
    font-weight: bold;
}
.mustafa-duzleme-kisilik-kutu {
    background-color: #f9f5ef;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #e0d8cd;
    margin-top: 30px;
    text-align: left; /* İçeriği sola yasla */
}
.mustafa-duzleme-kisilik-kutu h3 {
    font-size: 1.5em;
    color: #4a3b31;
    margin-bottom: 15px;
    text-align: center;
}
.mustafa-duzleme-kisilik-kutu p {
    font-size: 1.05em;
    line-height: 1.9;
    color: #444;
}

.yorumlar-listesi h3 {
    font-size: 1.8em;
    color: #4a3b31;
    margin-bottom: 30px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #a07c52;
    display: inline-block; /* Sadece metin kadar alt çizgi */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.yorum-item {
    background-color: #fff;
    padding: 25px 30px;
    margin-bottom: 25px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #a07c52;
}
.yorum-item blockquote p {
    font-style: italic;
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 1.05em;
    position: relative; /* For quotes */
    padding-left: 30px; /* Space for quote mark */
}
.yorum-item blockquote p::before {
    content: '\201C'; /* Left double quotation mark */
    font-family: 'Playfair Display', serif;
    font-size: 3em;
    color: #c0a080;
    position: absolute;
    left: -5px;
    top: -10px;
    opacity: 0.8;
}
.yorum-item footer {
    text-align: right;
}
.yorum-yazar {
    font-weight: bold;
    color: #000000; /* Changed from #c8c8c8 for better contrast */
    font-family: 'Playfair Display', serif;
    font-size: 25px;
}
.yorum-tarih {
    display: block;
    font-size: 15px;
    color: #ffffff;
    margin-top: 5px;
}
.bilgi-mesaji {
    text-align: center;
    font-style: italic;
    color: #666;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 4px;
}


/* Responsive eklemeler (iletişim ve kim ne dedi için) */
@media (max-width: 768px) {
    .iletisim-content {
        flex-direction: column; /* Form ve bilgi alt alta */
    }
    .iletisim-form-wrap, .iletisim-bilgi-wrap {
        flex: none; /* Tam genişlik */
        width: 85%;
    }
    .iletisim-bilgi-wrap {
        margin-top: 30px;
    }
    .yorum-item blockquote p::before {
        font-size: 2.5em;
        left: 0;
        top: -5px;
    }
    .yorum-item blockquote p {
        padding-left: 25px;
    }
}

/* === Biyografi Sayfası === */
.biyografi-sayfasi-section h2 { /* Genel başlık */
    text-align: center;
    font-size: 2.8em;
    margin-bottom: 40px;
}

.biyografi-ust-alan {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start; /* Dikeyde başa hizala */
    flex-wrap: wrap; /* Mobil için */
}
.biyografi-ana-foto {
    flex-basis: 460px; /* Ana fotoğraf için genişlik */
    max-width: 100%;
}
.biyografi-ana-foto img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 5px solid white;
}
.biyografi-yan-bilgiler {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bilgi-kutu {
    background-color: #f9f5ef;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #e0d8cd;
    text-align: center;
}
.bilgi-kutu.el-yazisi-ad img {
    max-width: 330px;
    height: auto;
}
.bilgi-kutu.lakap h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.bilgi-kutu.lakap p {
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    color: #4a3b31;
    font-weight: bold;
}
.bilgi-kutu.oval-foto img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.biyografi-metin-alani h2 { /* "BİYOGRAFİ" başlığı */
    font-size: 2.2em;
    text-align: left; /* Sola yaslı */
    border-bottom: 2px solid #a07c52;
    padding-bottom: 10px;
    margin-bottom: 30px;
    display: inline-block;
}
.biyografi-bolum {
    margin-bottom: 40px;
}
.biyografi-bolum h3 { /* Bölüm başlıkları (I. Giriş vb.) */
    font-size: 1.6em;
    color: #5a4a42;
    margin-bottom: 20px;
    padding-bottom: 8px;
    /* border-bottom: 1px dashed #c0a080; */
}
.bolum-icerik {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap; /* Mobil */
}
.bolum-icerik .metin {
    flex: 2; /* Metin alanı daha geniş */
    line-height: 1.9;
    font-size: 1.05em;
    color: #444;
}
.bolum-icerik .metin p {
    margin-bottom: 18px;
}
.bolum-icerik .gorsel-kolon {
    flex: 1;
    min-width: 250px; /* Mobil için */
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.bolum-icerik .gorsel-kolon img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #e0d8cd;
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.bolum-icerik .gorsel-kolon span { /* Resim altı açıklama */
    font-size: 0.9em;
    color: #666;
    text-align: center;
    display: block;
    margin-top: -10px; /* Resme yakınlaştırma */
    margin-bottom: 5px;
}

.kendi-sesinden-bolumu, .orduzudan-kareler-biyografi {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e0d8cd;
}
.kendi-sesinden-bolumu h2, .orduzudan-kareler-biyografi h2 { /* Alt bölüm başlıkları */
    text-align: center;
    font-size: 2em;
    margin-bottom: 30px;
}
/* Yeni El Yazısı Koleksiyonu Slider Stilleri */
.el-yazisi-slider {
    /* Swiper'ın kendisi flexbox/grid gibi davranır, bu yüzden genişliği %100 yapıp
       slaytları içindeki ayarlayacağız. */
    width: 90%; /* Sayfadaki ana içerik genişliğine göre ayarla */
    max-width: 1000px; /* Maksimum genişlik sınırlaması */
    margin: 0 auto; /* Ortala */
    padding-bottom: 40px; /* Pagination için boşluk */
    /* Ok butonları için boşluk */
    padding-left: 50px; 
    padding-right: 50px;
    position: relative; /* Okların konumlandırılması için */
    overflow: hidden; /* İçerik taşmasını önle */
}

.el-yazisi-slider .swiper-wrapper {
    align-items: stretch; /* Slaytların eşit yükseklikte olmasını sağlar */
}

.el-yazisi-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Resim ve yazıyı ortala */
    text-align: center;
    border: 1px solid #e0d8cd;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    height: 100%; /* Kart yüksekliğini doldur */
    transition: box-shadow 0.3s ease;
}

.el-yazisi-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.el-yazisi-item img {
    width: 100%; /* Slayt genişliğinin %100'ü */
    height: 200px; /* Sabit yükseklik, ihtiyaca göre ayarla */
    object-fit: contain; /* İçeriği tamamen göster, oranları koru */
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: zoom-in;
    /* Eğer el yazısı resimleriniz yatay ise, object-fit: contain iyi bir seçimdir.
       Dikey ise ve alanı doldurmasını isterseniz object-fit: cover kullanabilirsiniz. */
}

.el-yazisi-item span {
    font-size: 0.9em;
    color: #555;
    display: block;
    line-height: 1.4;
}

/* El Yazısı Slider Navigasyon Okları */
.el-yazisi-slider .swiper-button-next,
.el-yazisi-slider .swiper-button-prev {
    color: #8B4513 !important;
    font-size: 1.5em !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

.el-yazisi-slider .swiper-button-next:hover,
.el-yazisi-slider .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1);
}

.el-yazisi-slider .swiper-button-prev {
    left: 10px; /* Slider kapsayıcısının sol kenarına göre */
}
.el-yazisi-slider .swiper-button-next {
    right: 10px; /* Slider kapsayıcısının sağ kenarına göre */
}

/* El Yazısı Slider Pagination (Noktalar) */
.el-yazisi-pagination {
    bottom: 10px !important;
}
/* Aktif nokta rengi zaten genel olarak swiper-pagination-bullet-active tarafından ayarlanmış */


/* Responsive Styles (Biyografi Sayfası El Yazısı Slider İçin) */
@media (max-width: 1024px) {
    .el-yazisi-slider {
        max-width: 800px; /* Tabletlerde biraz daralt */
    }
    .el-yazisi-item img {
        height: 180px; /* Resim yüksekliğini ayarla */
    }
}

@media (max-width: 768px) {
    .el-yazisi-slider {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .el-yazisi-slider .swiper-button-next,
    .el-yazisi-slider .swiper-button-prev {
        display: none; /* Mobil'de okları gizle */
    }
    .el-yazisi-item img {
        height: 150px; /* Mobil için resim yüksekliğini ayarla */
    }
}

.video-slider-biyografi .swiper-slide, .orduzu-slider-biyografi .swiper-slide {
    background-color: transparent;
}
.video-item-biyografi img, .orduzu-slider-biyografi img {
    width: 100%;
    height: 220px; /* Sabit yükseklik */
    object-fit: cover;
    border-radius: 5px;
    border: 3px solid white;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.video-item-biyografi span { /* Video başlığı */
    display: block;
    margin-top: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1em;
    color: #4a3b31;
}


/* === Eserler Sayfası === */
.eserler-sayfasi-section > h2 { /* "ESERLERİ" ana başlığı */
    text-align: center;
    font-size: 2.8em;
    margin-bottom: 40px;
}
.eserler-ana-slider, .one-cikan-eserler-bolumu, .kullandigi-stiller-bolumu {
    margin-bottom: 30px;
}
.eserler-ana-slider h3, .one-cikan-eserler-bolumu h3, .kullandigi-stiller-bolumu h3 {
    font-size: 1.8em;
    color: #4a3b31;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    position: relative;
}
.eserler-ana-slider h3::after, .one-cikan-eserler-bolumu h3::after, .kullandigi-stiller-bolumu h3::after {
    content: '';
    display: block;
    width: 70px;
    height: 2px;
    background-color: #a07c52;
    margin: 8px auto 0;
}

.eser-sayfasi-ana-slider {
    width: 90%; /* Wireframe'e göre daha dar bir genişlik */
    max-width: 800px; /* Maksimum genişlik */
    margin: 0 auto 40px auto; /* Ortala */
    height: 450px; /* Slider yüksekliği */
    border: 1px solid #dcd0c0; /* Çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Hafif gölge */
    border-radius: 4px;
    overflow: hidden; /* İçerik taşmasını önle */
    background-color: #fff;
}

.eser-sayfasi-ana-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fdfbf5; /* Slider arka planı */
}

.eser-sayfasi-ana-slider .swiper-slide img {
    display: block;
    max-width: 95%; /* Resmin slayt içinde biraz boşluk bırakması için */
    max-height: 95%; /* Resmin slayt içinde biraz boşluk bırakması için */
    width: auto;
    height: auto;
    object-fit: contain; /* Resmi tamamen göster, gerekirse boşluk bırakarak sığdır */
    border: 4px solid #fff; /* Resim etrafında beyaz çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* Swiper navigation buttons (Wireframe'deki gibi içe ve daha küçük) */
.eser-sayfasi-ana-slider .swiper-button-next,
.eser-sayfasi-ana-slider .swiper-button-prev {
    color: #8B4513 !important;
    font-size: 1.8em !important; /* Boyutu küçült */
    width: 40px !important; /* Buton genişliği */
    height: 40px !important; /* Buton yüksekliği */
    background-color: rgba(255, 255, 255, 0.7); /* Hafif şeffaf arka plan */
    border-radius: 50%; /* Yuvarlak butonlar */
    transition: background-color 0.3s ease;
}

.eser-sayfasi-ana-slider .swiper-button-next:hover,
.eser-sayfasi-ana-slider .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.eser-sayfasi-ana-slider .swiper-button-prev {
    left: 10px !important; /* Sol kenardan uzaklık */
}
.eser-sayfasi-ana-slider .swiper-button-next {
    right: 10px !important; /* Sağ kenardan uzaklık */
}

/* Swiper pagination dots */
.eser-sayfasi-ana-slider-pagination {
    bottom: 10px !important; /* Sayfa numaralarını alta al */
}
.swiper-pagination-bullet-active {
    background: #8B4513 !important;
}


/* Öne Çıkan Eserler Slider */
.one-cikan-eserler-slider {
    padding-bottom: 40px; /* Pagination için boşluk */
    /* OK butonlarının dışarıda olması için sağ ve sol padding */
    padding-left: 50px; 
    padding-right: 50px; 
    position: relative; /* Okların konumlandırılması için */
    /* Swiper.js kendi overflow yönetimi yapar, ancak dış kapsayıcıda tutmak bazen iyidir. */
    overflow: hidden; 
}
.one-cikan-eserler-slider .swiper-wrapper {
    display: flex;
    align-items: stretch; /* Kartların eşit yüksekliğe sahip olmasını sağlayın */
}

.eser-kart {
    border: 1px solid #e0d8cd;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Slayt yüksekliğine esneklik kazandır */
}
.eser-kart:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.eser-kart img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.eser-kart-bilgi {
    padding: 15px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.eser-kart-bilgi h4 {
    font-size: 1.2em;
    color: #4a3b31;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eser-kart-bilgi p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Kullandığı Stiller ve Teknikler */
.kullandigi-stiller-bolumu .stiller-icerik {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap; /* Mobil */
    background-color: #f9f5ef;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #e0d8cd; /* Wireframe'deki gibi ince bir çerçeve */
}
.kullandigi-stiller-bolumu .stil-metin {
    flex: 1.5; /* Metin daha geniş */
    min-width: 300px; /* Metin alanının minimum genişliği */
    line-height: 1.8;
}
.kullandigi-stiller-bolumu .stil-metin p { margin-bottom: 15px; }
.kullandigi-stiller-bolumu .stil-metin ul {
    list-style: none;
    padding-left: 20px;
    margin-bottom: 15px;
}
.kullandigi-stiller-bolumu .stil-metin ul li {
    margin-bottom: 10px;
    padding-left: 10px;
    position: relative;
}
.kullandigi-stiller-bolumu .stil-metin ul li::before {
    content: '\2022';
    color: #a07c52;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.2em;
    position: absolute;
    left: 5px;
}

.kullandigi-stiller-bolumu .stil-gorsel {
    flex: 1;
    min-width: 280px; /* Wireframe'e göre görseller için minimum genişlik */
    display: grid; /* Izgara düzeni için */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Küçük ekranlarda 1, büyüklerde 2 sütun */
    gap: 15px; /* Görseller arası boşluk */
}
.kullandigi-stiller-bolumu .stil-gorsel-item { /* Her bir görsel kapsayıcısı */
    display: flex;
    flex-direction: column;
    align-items: center; /* Resmi ve yazıyı ortala */
    text-align: center;
    border: 1px solid #e0d8cd; /* Her görselin kendi çerçevesi */
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.kullandigi-stiller-bolumu .stil-gorsel-item img {
    width: 100%;
    height: 120px; /* Sabit yükseklik (örneğin) */
    object-fit: cover; /* Resmi kutuya sığdır ve kırp */
    border-radius: 4px;
    margin-bottom: 8px; /* Resim ile açıklama arasına boşluk */
    cursor: zoom-in; /* Lightbox için */
}
.kullandigi-stiller-bolumu .stil-gorsel-item span {
    font-size: 0.85em;
    color: #666;
    display: block; /* Tam genişlik alması için */
}
.eser-detay-modal-ozel {
    /* Genel modalın kendisi (display: none; buradan JS ile 'flex' yapılır) */
    display: none; /* Varsayılan olarak gizli */
    position: fixed;
    z-index: 2000; /* Diğer tüm içeriklerin üzerinde */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* İçerik sığmazsa kaydırılabilir */
    background-color: rgba(0,0,0,0.85); /* Koyu yarı şeffaf arkaplan */
    justify-content: center; /* Flex container olarak içeriği yatayda ortala */
    align-items: center; /* Flex container olarak içeriği dikeyde ortala */
    /* Padding-top yerine align-items kullanıyoruz, bu daha esnek */
    padding-top: 0; /* Kaldırılabilir veya sıfırlanabilir */
}

/* Eser Detay Modal (Lightbox) Özelleştirmesi */
.eser-detay-modal-ozel .lightbox-content-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(60, 50, 40, 0.95);
    padding: 25px;
    border-radius: 8px;
    max-width: 95vw;
    width: 800px; /* Maksimum genişlik */
    max-height: 90vh;
}
.eser-detay-slider-container {
    width: 100%;
    margin-bottom: 20px;
    max-height: 60vh; /* Slider için maksimum yükseklik */
    /* Resimlerin içinde Swiper tarafından yönetilen overflow. */
    /* Ek bir çerçeve veya arkaplan istenirse buraya eklenebilir */
    background-color: #fdfbf5; /* Slider kutusunun arka planı */
    border-radius: 4px;
}
.eser-modal-image-slider .swiper-slide {
    display: flex; /* İçindeki resmi ortalamak için */
    justify-content: center;
    align-items: center;
    /* Slaytın kendi arka plan rengi, resim yüklenene kadar görünür */
    background-color: #fdfbf5; 
}
.eser-modal-image-slider .swiper-slide img {
    display: block;
    max-width: 100%; /* Slaytın içindeki resim, slaytın genişliğini aşmasın */
    max-height: 100%; /* Slaytın içindeki resim, slaytın yüksekliğini aşmasın */
    width: auto; /* Oranı koru */
    height: auto; /* Oranı koru */
    object-fit: contain; /* Resmi tamamen göster, sığdırırken boşluk bırak */
    border-radius: 4px;
    border: 4px solid #fff; /* Beyaz çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Hafif gölge */
}
.eser-detay-bilgi {
    color: #f0e8df;
    max-height: 25vh;
    overflow-y: auto; /* İçerik taşarsa kaydırma çubuğu göster */
    padding-right: 10px;
}
.eser-detay-bilgi h3 {
    color: #fff;
    font-size: 1.6em;
    margin-bottom: 10px;
}
.eser-detay-bilgi p {
    font-size: 1em;
    line-height: 1.7;
}
.eser-detay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 2001; /* Kapanış düğmesinin diğer içeriklerin üzerinde olduğundan emin olun */
}

/* Eserler sayfası responsive düzenlemeler */
@media (max-width: 992px) {
    .eser-sayfasi-ana-slider {
        height: 350px; /* Daha küçük ekranlarda ana slider yüksekliğini azalt */
    }
    .eser-kart img { height: 200px; } /* Kart resimlerinin yüksekliğini azalt */
    .kullandigi-stiller-bolumu .stil-gorsel {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Daha küçük ekranlarda 2 sütun */
    }
    .kullandigi-stiller-bolumu .stil-gorsel-item img {
        height: 100px; /* Görsel öğe resimlerinin yüksekliğini azalt */
    }
}
@media (max-width: 768px) {
    .eser-sayfasi-ana-slider {
        height: 280px; /* Mobil ekranlar için ana slider yüksekliğini daha da azalt */
        width: 100%; /* Tam genişlik */
    }
    .one-cikan-eserler-slider .swiper-slide {
        width: 90% !important; /* Mobil görünümde tek bir eser kartı göster */
        margin: 0 auto; /* Ortala */
    }
    .eser-kart img { height: 180px; }

    .kullandigi-stiller-bolumu .stiller-icerik {
        flex-direction: column; /* Metin ve görselleri alt alta sırala */
    }
    .kullandigi-stiller-bolumu .stil-metin, .kullandigi-stiller-bolumu .stil-gorsel {
        flex: none;
        width: 100%;
        min-width: unset;
    }
    .kullandigi-stiller-bolumu .stil-gorsel {
        margin-top: 20px; /* Metin ile görseller arasına boşluk */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Mobil ekranlarda 2 sütun */
        justify-content: center; /* Eğer tam doldurmuyorsa ortala */
    }
    .kullandigi-stiller-bolumu .stil-gorsel-item img {
        height: 100px;
    }

    .eser-detay-modal-ozel .lightbox-content-wrapper {
        padding: 15px;
        max-width: 90vw; /* Mobil modal genişliği */
        max-height: 90vh; /* Mobil modal yüksekliği */
    }
    .eser-detay-slider-container { max-height: 50vh; }
    .eser-modal-image-slider .swiper-slide img { max-height: 48vh; }
}

.footer-yorum{
    background-color: #d4d4d4; /* Dark brown footer */
    color: #000000; /* Light text on dark footer */
    text-align: right;
    padding: 30px 5%;
    margin-top: 30px;
}

/* Existing but slightly adjusted photo slider/swiper slide styles */
.photo-slider .swiper-slide {
    display: flex; /* Flexbox'ı etkinleştir */
    justify-content: center; /* Yatayda ortala */
    align-items: center; /* Dikeyde ortala */
    overflow: hidden; /* Gerekirse taşmaları gizle */
    /* height: 550px; /* Slider yüksekliğini burada belirleyebilirsiniz, img'den buraya taşıyın */
    background-color: #f0f0f0; /* Opsiyonel: Resim yüklenene kadar veya resim küçükse arkaplan */
}

/* Lightbox'ı tetikleyecek overlay link (opsiyonel) - No longer needed as img is hidden and bg-img is trigger */
/* .photo-slider .swiper-slide.photo-slide-item .lightbox-trigger-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: zoom-in;
} */

/* ... (mevcut .yorum-item stilinin devamına veya altına) ... */

.yorum-eklenen-resim {
    margin-bottom: 15px; /* Mesajdan önce boşluk */
    text-align: center; /* Resmi ortala (opsiyonel, veya sola yaslı bırak) */
}
.yorum-eklenen-resim img {
    max-width: 100%; /* Yorum alanını geçmesin */
    max-height: 350px; /* Maksimum yükseklik */
    border-radius: 5px;
    border: 1px solid #e0d8cd;
    padding: 4px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    cursor: zoom-in; /* Lightbox için */
}


/* Header & Navigation */
header {
    background-color: #efebe4; /* Lighter shade of sepia theme */
    padding: 10px 5%; /* Yanlarda boşluk bırakır */
    border-bottom: 1px solid #dcd0c0;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex; /* Flexbox modelini kullan */
    align-items: center; /* Öğeleri dikeyde ortala */
    /* flex-wrap: wrap; mobil için medya sorgusu içinde kullanılacak */
    box-sizing: border-box; /* Padding'in toplam genişliğe dahil olmasını sağlar */
}

.header-top {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Logo konteynerinin sıkışmasını engelle */
    /* Mobil menü düğmesi için alan ayırmak isterseniz: */
    /* flex-basis: content; */
}

.logo-container {
    /* Logo konteynerine stil ekleyebilirsiniz */
}

.logo-img {
    max-height: 60px;
    width: auto;
    display: block;
}

.mobile-menu-toggle {
    display: none; /* Masaüstünde gizli */
}

.main-nav {
    margin-left: auto; /* Kalan tüm boşluğu kaplar ve kendini (ve sonrasındaki öğeleri) sağa iter */
    flex-shrink: 0; /* Menünün daralmasını engelle */
    /* Min-width ekleyerek menünün minimum genişliğini korumasını sağlayabiliriz */
    /* min-width: content; */
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 45px;
}

.main-nav ul li a {
    text-decoration: none;
    color: #5d4037;
    font-weight: bold;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
    white-space: nowrap; /* Menü öğelerinin kelimelerinin alt satıra geçmesini engelle */
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    color: #c36b4c;
}

.visitor-counter {
    margin-left: 20px; /* Menü ile sayaç arasına boşluk bırak */
    flex-shrink: 0; /* Sayacın daralmasını engelle */
    white-space: nowrap; /* Sayacın tek satırda kalmasını sağla */
    font-size: 0.9em;
    color: #5d4037;
    /* Ekran dışına taşmayı önlemek için max-width verebiliriz */
    /* max-width: 150px; /* Örneğin */
    /* overflow: hidden; /* Taşmayı gizle (eğer metin hala uzunsa) */
    /* text-overflow: ellipsis; /* Taşmayı (...) ile göster (eğer overflow hidden ile kullanılıyorsa) */
}

.visitor-counter p {
    margin: 0;
}

/* --- Medya Sorguları (Responsive Tasarım İçin Önemli) --- */
@media (max-width: 992px) { /* Tablet ve daha küçük ekranlar için */
    .main-nav ul li a {
        padding: 5px 0; /* Menü öğelerinin dikey boşluğunu azalt */
        font-size: 0.9em; /* Menü yazı boyutunu küçült */
        gap: 10px; /* Menü öğeleri arasındaki boşluğu azalt */
    }
    .visitor-counter {
        margin-left: 10px; /* Sayaç ile menü arasındaki boşluğu azalt */
        font-size: 0.8em; /* Sayaç yazı boyutunu küçült */
    }
}

@media (max-width: 768px) { /* Mobil ekranlar için */
    header {
        flex-direction: column; /* Mobil görünümde öğeleri dikey sırala */
        align-items: flex-start; /* Öğeleri sola hizala */
        padding: 10px 20px; /* Mobil padding ayarlaması */
    }

    .header-top {
        width: 100%; /* Mobil görünümde tam genişlik */
        justify-content: space-between; /* Logo sola, toggle sağa */
        margin-bottom: 10px; /* Altına boşluk bırak */
    }

    .mobile-menu-toggle {
        display: block; /* Mobil cihazlarda görünür yap */
        background: none;
        border: none;
        font-size: 2em;
        cursor: pointer;
        color: #5d4037;
    }

    .main-nav {
        width: 100%; /* Tam genişlik */
        margin-left: 0; /* Mobil görünümde marjini sıfırla */
        /* Mobil menü başlangıçta gizli olabilir (JS ile toggle edilecek) */
        /* display: none; */
    }

    .main-nav ul {
        flex-direction: column; /* Menü öğelerini dikey sırala */
        gap: 5px;
        width: 100%;
    }

    .main-nav ul li {
        width: 100%;
    }

    .main-nav ul li a {
        padding: 10px 15px;
        border-bottom: 1px solid #dcd0c0;
        text-align: center;
    }

    .visitor-counter {
        width: 100%; /* Mobil görünümde tam genişlik */
        text-align: center; /* Mobil görünümde ortala */
        margin-left: 0; /* Marjini sıfırla */
        margin-top: 10px; /* Üstten boşluk bırak */
    }
}

/* === Eserler Sayfası === */
.eserler-sayfasi-section > h2 { /* "ESERLERİ" ana başlığı */
    text-align: center;
    font-size: 2.8em;
    margin-bottom: 40px;
}
.eserler-ana-slider, .one-cikan-eserler-bolumu, .kullandigi-stiller-bolumu {
    margin-bottom: 30px;
}
.eserler-ana-slider h3, .one-cikan-eserler-bolumu h3, .kullandigi-stiller-bolumu h3 {
    font-size: 1.8em;
    color: #4a3b31;
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 10px;
    position: relative;
}
.eserler-ana-slider h3::after, .one-cikan-eserler-bolumu h3::after, .kullandigi-stiller-bolumu h3::after {
    content: '';
    display: block;
    width: 70px;
    height: 2px;
    background-color: #a07c52;
    margin: 8px auto 0;
}

.eser-sayfasi-ana-slider {
    width: 90%; /* Wireframe'e göre daha dar bir genişlik */
    max-width: 800px; /* Maksimum genişlik */
    margin: 0 auto 40px auto; /* Ortala */
    height: 450px; /* Slider yüksekliği */
    border: 1px solid #dcd0c0; /* Çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Hafif gölge */
    border-radius: 4px;
    overflow: hidden; /* İçerik taşmasını önle */
    background-color: #fff;
}

.eser-sayfasi-ana-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fdfbf5; /* Slider arka planı */
}

.eser-sayfasi-ana-slider .swiper-slide img {
    display: block;
    max-width: 95%; /* Resmin slayt içinde biraz boşluk bırakması için */
    max-height: 95%; /* Resmin slayt içinde biraz boşluk bırakması için */
    width: auto;
    height: auto;
    object-fit: contain; /* Resmi tamamen göster, gerekirse boşluk bırakarak sığdır */
    border: 4px solid #fff; /* Resim etrafında beyaz çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* Swiper navigation buttons (Wireframe'deki gibi içe ve daha küçük) */
.eser-sayfasi-ana-slider .swiper-button-next,
.eser-sayfasi-ana-slider .swiper-button-prev {
    color: #8B4513 !important;
    font-size: 1.8em !important; /* Boyutu küçült */
    width: 40px !important; /* Buton genişliği */
    height: 40px !important; /* Buton yüksekliği */
    background-color: rgba(255, 255, 255, 0.7); /* Hafif şeffaf arka plan */
    border-radius: 50%; /* Yuvarlak butonlar */
    transition: background-color 0.3s ease;
}

.eser-sayfasi-ana-slider .swiper-button-next:hover,
.eser-sayfasi-ana-slider .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.eser-sayfasi-ana-slider .swiper-button-prev {
    left: 10px !important; /* Sol kenardan uzaklık */
}
.eser-sayfasi-ana-slider .swiper-button-next {
    right: 10px !important; /* Sağ kenardan uzaklık */
}

/* Swiper pagination dots */
.eser-sayfasi-ana-slider-pagination {
    bottom: 10px !important; /* Sayfa numaralarını alta al */
}
.swiper-pagination-bullet-active {
    background: #8B4513 !important;
}


/* Öne Çıkan Eserler Slider */
.one-cikan-eserler-slider {
    padding-bottom: 40px; /* Pagination için boşluk */
    /* Opsiyonel: Eğer ok butonları varsa, onların da spaceBefore/After değerini ayarlayabiliriz. */
}
.one-cikan-eserler-slider .swiper-wrapper {
    display: flex;
    align-items: stretch; /* Kartların eşit yüksekliğe sahip olmasını sağlayın */
}

.eser-kart { /* Öne çıkan eserler için */
    border: 1px solid #e0d8cd;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Slayt yüksekliğine esneklik kazandır */
}
.eser-kart:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.eser-kart img {
    width: 100%;
    height: 250px; /* Sabit yükseklik */
    object-fit: cover;
    display: block;
}
.eser-kart-bilgi {
    padding: 15px;
    text-align: left;
    flex-grow: 1; /* Bilgi kısmı kalan alanı doldursun */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.eser-kart-bilgi h4 {
    font-size: 1.2em;
    color: #4a3b31;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eser-kart-bilgi p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    display: -webkit-box; /* Çoklu satır ellipsis için */
    -webkit-line-clamp: 3; /* Maksimum 3 satır */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kullandığı Stiller ve Teknikler */
.kullandigi-stiller-bolumu .stiller-icerik {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap; /* Mobil */
    background-color: #f9f5ef;
    padding: 30px;
    border-radius: 6px;
    border: 1px solid #e0d8cd; /* Wireframe'deki gibi ince bir çerçeve */
}
.kullandigi-stiller-bolumu .stil-metin {
    flex: 1.5; /* Metin daha geniş */
    min-width: 300px; /* Metin alanının minimum genişliği */
    line-height: 1.8;
}
.kullandigi-stiller-bolumu .stil-metin p { margin-bottom: 15px; }
.kullandigi-stiller-bolumu .stil-metin ul {
    list-style: none;
    padding-left: 20px;
    margin-bottom: 15px;
}
.kullandigi-stiller-bolumu .stil-metin ul li {
    margin-bottom: 10px;
    padding-left: 10px;
    position: relative;
}
.kullandigi-stiller-bolumu .stil-metin ul li::before {
    content: '\2022';
    color: #a07c52;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.2em;
    position: absolute;
    left: 5px;
}

.kullandigi-stiller-bolumu .stil-gorsel {
    flex: 1;
    min-width: 280px; /* Wireframe'e göre görseller için minimum genişlik */
    display: grid; /* Izgara düzeni için */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Küçük ekranlarda 1, büyüklerde 2 sütun */
    gap: 15px; /* Görseller arası boşluk */
}
.kullandigi-stiller-bolumu .stil-gorsel-item { /* Her bir görsel kapsayıcısı */
    display: flex;
    flex-direction: column;
    align-items: center; /* Resmi ve yazıyı ortala */
    text-align: center;
    border: 1px solid #e0d8cd; /* Her görselin kendi çerçevesi */
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.kullandigi-stiller-bolumu .stil-gorsel-item img {
    width: 100%;
    height: 120px; /* Sabit yükseklik (örneğin) */
    object-fit: cover; /* Resmi kutuya sığdır ve kırp */
    border-radius: 4px;
    margin-bottom: 8px; /* Resim ile açıklama arasına boşluk */
    cursor: zoom-in; /* Lightbox için */
}
.kullandigi-stiller-bolumu .stil-gorsel-item span {
    font-size: 0.85em;
    color: #666;
    display: block; /* Tam genişlik alması için */
}


/* Eser Detay Modal (Lightbox) Özelleştirmesi */
.eser-detay-modal-ozel .lightbox-content-wrapper {
   display: flex;
    flex-direction: column;
    background-color: rgba(60, 50, 40, 0.95); /* Koyu iç arkaplan */
    padding: 25px;
    border-radius: 8px;
    max-width: 95vw; /* Ekran genişliğinin %95'i */
    width: 800px; /* Maksimum genişlik */
    max-height: 90vh; /* Ekran yüksekliğinin %90'ı */
    overflow: hidden; /* Kendi içeriğinin taşmasını önle */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Modalın kendisine daha belirgin gölge */
}
.eser-detay-slider-container {
    width: 100%;
    margin-bottom: 20px;
    max-height: 60vh;
}
.eser-modal-image-slider .swiper-slide {
    display: flex; /* İçindeki resmi ortalamak için */
    justify-content: center;
    align-items: center;
}
.eser-modal-image-slider .swiper-slide img {
    width: 100%;
    max-height: 58vh;
    object-fit: contain;
    border-radius: 4px;
}
.eser-detay-bilgi {
    color: #f0e8df;
    max-height: 25vh;
    overflow-y: auto;
    padding-right: 10px;
}
.eser-detay-bilgi h3 {
    color: #fff;
    font-size: 1.6em;
    margin-bottom: 10px;
}
.eser-detay-bilgi p {
    font-size: 1em;
    line-height: 1.7;
}
.eser-detay-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 2001; /* Kapanış düğmesinin diğer içeriklerin üzerinde olduğundan emin olun */
}

/* Eserler sayfası responsive düzenlemeler */
@media (max-width: 992px) {
    .eser-sayfasi-ana-slider {
        height: 350px; /* Daha küçük ekranlarda ana slider yüksekliğini azalt */
    }
    .eser-kart img { height: 200px; } /* Kart resimlerinin yüksekliğini azalt */
    .kullandigi-stiller-bolumu .stil-gorsel {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Daha küçük ekranlarda 2 sütun */
    }
    .kullandigi-stiller-bolumu .stil-gorsel-item img {
        height: 100px; /* Görsel öğe resimlerinin yüksekliğini azalt */
    }
}
@media (max-width: 768px) {
    .eser-sayfasi-ana-slider {
        height: 280px; /* Mobil ekranlar için ana slider yüksekliğini daha da azalt */
        width: 100%; /* Tam genişlik */
    }
    .one-cikan-eserler-slider .swiper-slide {
        width: 90% !important; /* Mobil görünümde tek bir eser kartı göster */
        margin: 0 auto; /* Ortala */
    }
    .eser-kart img { height: 180px; }

    .kullandigi-stiller-bolumu .stiller-icerik {
        flex-direction: column; /* Metin ve görselleri alt alta sırala */
    }
    .kullandigi-stiller-bolumu .stil-metin, .kullandigi-stiller-bolumu .stil-gorsel {
        flex: none;
        width: 100%;
        min-width: unset;
    }
    .kullandigi-stiller-bolumu .stil-gorsel {
        margin-top: 20px; /* Metin ile görseller arasına boşluk */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Mobil ekranlarda 2 sütun */
        justify-content: center; /* Eğer tam doldurmuyorsa ortala */
    }
    .kullandigi-stiller-bolumu .stil-gorsel-item img {
        height: 100px;
    }

    .eser-detay-modal-ozel .lightbox-content-wrapper {
        padding: 15px;
        max-width: 90vw; /* Mobil modal genişliği */
        max-height: 90vh; /* Mobil modal yüksekliği */
    }
    .eser-detay-slider-container { max-height: 50vh; }
    .eser-modal-image-slider .swiper-slide img { max-height: 48vh; }
}