body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    cursor: url('cursor/ybacursor.cur'), auto; /* imlec */
}
/* Linklerin üzerine gelindiğinde özel el imleci */
a:hover {
    cursor: url('cursor/ybacursorh2.cur'), pointer; /* Linklerin üzerine gelindiğinde el imleci */
}

/* Ayrıca butonlar ve tıklanabilir öğeler için de uygulayabiliriz */
button:hover,
input[type="submit"]:hover,
.clickable-item:hover { /* Eğer özel tıklanabilir sınıflarınız varsa */
    cursor: url('cursor/ybacursorh2.cur'), pointer;
}

h2 {
    font-size: 1.25rem;
    color: #3689dc;
}
main > div {
    flex: 1;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}

    main > div h2 {
        color: #3689dc;
        border-bottom: 2px solid #3689dc;
        padding-bottom: 5px;
        margin-bottom: 0px;
    }


header {
    height: 40px;
    background-color: #3689dc;
    padding: 0 5px; /* Düzeltme: Sağ ve sol iç boşluklar eklendi */
    display: flex;
    justify-content: center;
    align-items: center; /* Düzeltme: Dikey ortalama eklendi */
    border-radius: 0 0 5px 5px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

#formSonuc {
    /* margin-top: 10px; artık inline style'da tanımlı */
    margin-bottom: 10px; /* Mesaj ile gönder butonu arasındaki boşluk */
    font-size: 14px;
    color: green; /* Başarı mesajı rengi */
    /* İsteğe bağlı: metin hizalama vb. */
    text-align: center; /* Örneğin metni ortalamak isterseniz */
}
.content {
    max-width: 1200px; /* Bu elementin maksimum genişliğini 800 piksel olarak ayarlar. Daha geniş ekranlarda bu genişliği aşmaz. Bu, index sayfasındaki aynı seçiciye ait özelliği ezer (cascade). */
    margin: 0 auto; /* Bu elementin üst ve alt boşluklarını sıfır yapar, sağ ve sol boşluklarını ise otomatik olarak ayarlar. Bu sayede element yatayda ortalanır. Bu da index sayfasındaki aynı seçiciye ait özelliği ezer. */
    padding: 0 5%; /* Bu elementin sol ve sağ iç boşluklarını, bulunduğu elementin genişliğinin %5'i kadar yapar. Üst ve alt iç boşlukları sıfırdır. Bu da index sayfasındaki aynı seçiciye ait özelliği ezer. */
}
h1 {
    font-size: 2.5rem;
    font-family: 'CSRegular', sans-serif; /* h1 başlıkları için CSRegular fontunu kullan */
}

.music-playlist-container {
    border: 1px solid #ccc; /* Çerçevenin kalınlığı, stili ve rengi */
    padding: 15px; /* İç boşluk (içerik ile çerçeve arası mesafe) */
    border-radius: 5px; /* Köşeleri yuvarlatmak için (isteğe bağlı) */
    background-color: #f9f9f9; /* Arka plan rengi (isteğe bağlı) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Gölge efekti (isteğe bağlı) */
}

@media (max-width: 600px) {
    .container {
        flex-direction: column;
        height: auto;
        padding: 0;
    }

    .video-list {
        display: flex; /* Videoları yatay olarak sıralar */
        overflow-x: auto; /* Yatay kaydırma çubuklarını etkinleştirir */
        scroll-snap-type: x mandatory; /* Kaydırma noktalarını zorunlu hale getirir */
    }

        .video-list li {
            flex: 0 0 auto; /* Videoların genişliğini otomatik ayarlar */
            scroll-snap-align: start; /* Videoları sola hizalar */
            margin-right: 10px; /* Videolar arasında boşluk bırakır */
        }

    nav ul {
        flex-direction: column;
        padding: 0;
        align-items: center;
        background-color: #3689dc;
    }


        nav ul li {
            margin: 5px 0;
            width: 100%;
        }

            nav ul li a {
                width: 90%;
                box-sizing: border-box;
            }

    h1 {
        color: #3689dc;
        font-size: 1.5rem;
        font-family: 'CSRegular', sans-serif; /* h1 başlıkları için CSRegular fontunu kullan */
    }

   

    .item {
        flex: 1 1 100%;
        margin: 5px 0;
    }

    nav ul li a {
        padding: 10px;
        width: 90%;
        box-sizing: border-box;
    }

    .gallery img {
        width: 100%;
        margin: 5px 0;
    }

    .video-container {
        width: 100%;
    }

    .ziyaretci-defteri-container, .iletisim-container, .hakkimizda-container, .site-haritasi-container {
        padding: 10px;
    }

    form input, form textarea {
        width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .item {
        flex: 1 1 300px;
        margin: 10px;
    }
}

img {
    max-width: 100%;
    height: auto;
}

.item {
    flex: 1 1 300px;
    margin: 10px;
}

nav {
    text-align: center;
    margin-top: -20px;
}

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

        nav ul li {
            margin: 0 5px;
        }

            nav ul li a {
                background-color: #3689dc;
                transition: background-color 0.6s;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 10px;
                border-radius: 5px;
                text-decoration: none;
                color: #fff;
                border: 2px solid #0056b3;
            }

                nav ul li a:hover {
                    background-color: #1f3d4a;
                }

                nav ul li a.button {
                    background-color: #00619e;
                }

                    nav ul li a.button:hover {
                        background-color: #0072c1;
                    }

                nav ul li a.active {
                    background-color: #00619e;
                }

.exit-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-bottom: 10px; /* Alttaki elemanla çakışmayı önlemek için margin eklendi */
    padding: 0 5px;
    padding-top: 2px; /* Üst iç boşluk sıfırlandı */
    padding-right: 10px; /* Sağ iç boşluğu 2 katına çıkarıldı */
    border-radius: 0 0 0 0;
    background-color: #3689dc;
}

    .exit-header h1 {

        flex: 1;
        text-align: center;
        margin: 0;
    }

    .exit-header .button {
        background-color: #00619e;
        transition: background-color 0.6s;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        font-size: 14px;
        border-radius: 5px;
        text-decoration: none;
        color: #fff;
        border: 2px solid #0056b3;
    }

        .exit-header .button:hover {
            background-color: #0072c1;
        }

exit-header .button:active {
    background-color: #0072a8;
}

/* --- Etkileşim Stilleri --- */
.image-interactions {
    margin-top: 10px;
    color: #333;
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
    height: 20px; /* Sabit yükseklik */
    /*overflow-y: auto; /* İçerik taşarsa kaydır */
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    white-space: nowrap; /* İçeriğin tek satırda kalmasını sağlar */
}

.likes-section {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc; /* Yorum bölümünden ayır */
    display: flex; /* Beğenme sayısı ve butonu yan yana */
    align-items: center; /* Dikeyde ortala */
}

#like-count {
    font-weight: bold;
    margin-right: 5px;
    font-size: 1.1em;
}

#like-button {
    background-color: #1a76d2;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Butonun küçülmesini engelle */
}

    #like-button:hover {
        background-color: #155ba6;
    }

    #like-button:disabled {
        background-color: #ccc;
        cursor: default;
    }

.comments-section h3 {
    margin-top: 0;
    color: #3689dc;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 1.1em;
}

#comments-list {
    margin-bottom: 15px;
}

    #comments-list p {
        margin: 5px 0;
        padding-bottom: 5px;
        border-bottom: 1px dashed #eee; /* Yorumlar arasına kesikli çizgi */
        word-wrap: break-word; /* Uzun kelimeleri böl */
        white-space: pre-wrap; /* Yorumlardaki satır sonlarını koru */
    }

        #comments-list p:last-child {
            border-bottom: none; /* Son yorumun altında çizgi olmasın */
        }


#comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Alanlar arası boşluk */
    margin-top: 15px;
}

#comment-textarea {
    width: 100%; /* Kapsayıcıya uyum sağla */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical; /* Sadece dikey yeniden boyutlandırmaya izin ver */
    min-height: 90px;
    box-sizing: border-box; /* Padding ve border genişliğe dahil */
    font-size: 1em;
    font-family: inherit; /* Ana sayfadaki fontu miras al */
}

#comment-form button {
    align-self: flex-end; /* Sadece butonu sağa hizala */
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #comment-form button:hover {
        background-color: #218838;
    }

    #comment-form button:disabled {
        background-color: #ccc;
        cursor: default;
    }

/* Adjust lightbox content to accommodate interactions */
.lightbox-content {
    /* Öğeleri dikey sırala */
    flex-direction: column;
    align-items: center; /* Merkez hizala */
    padding: 20px; /* İç boşluk ekle */
    max-width: 90vw;
    max-height: 90vh;
    background-color: white; /* Beyaz arka plan */
    border-radius: 8px;
    position: relative; /* Oklar için */
    overflow-y: auto; /* İçerik taşarsa kaydırma çubuğu */
    overflow-x: hidden; /* Yatay kaydırmayı engelle */
    box-sizing: border-box;
}

.lightbox img {
    max-width: 100%; /* Kapsayıcı genişliğine sığdır */
    max-height: 55vh; /* Görüntü için maksimum yükseklik, etkileşim alanına yer bırak */
    object-fit: contain;
    margin-bottom: 10px; /* Resim ile etkileşim alanı arasına boşluk */
}

/* Okları lightbox-content'in kenarlarına sabitle */
.lightbox-arrow {
    position: fixed; /* Lightbox-content yerine viewport'a sabitle */
    top: 50%;
    transform: translateY(-50%);
    /* ... diğer stiller ... */
    z-index: 1003; /* Diğer lightbox içeriğinin üzerinde olsun */
}

.lightbox-prev {
    left: 20px; /* Sol kenardan biraz boşluk */
}

.lightbox-next {
    right: 20px; /* Sağ kenardan biraz boşluk */
}

#backToTop {
    position: fixed;
    bottom: 90px;
    right: 72px;
    display: none; /* Başlangıçta gizli */
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1000; /* Diğer içeriklerin üstünde görünmesi için */
}
.content {
    padding: 20px; /* Bu elementin ic bosluklarini (icerigi ile kenarlari arasindaki mesafe) her yönden 20 piksel yapar. */
    padding-top: 0px;
    background-color: white; /* Bu elementin arka plan rengini beyaz olarak ayarlar. */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Bu elemente bir kutu gölgesi ekler. Degerler sirasiyla: yatay kayma (0), dikey kayma (0), bulaniklik yaricapi (10px), renk (rgba(0, 0, 0, 0.1) - %10 opaklikta siyah). */
    display: flex; /* Bu elementi bir flex konteyner yapar, icindeki ögeleri düzenlemek icin esnek bir yapi saglar. */
    flex-direction: column; /* Flex ögelerini dikey bir sütun halinde siralar. */
    min-height: 30vh; /* Bu elementin minimum yüksekligini ekran yüksekliginin %25'i olarak ayarlar. Sayfa icerigi az olsa bile bu minimum yüksekligi korur. */
    position: relative; /* Bu elementin konumlandirma baglamini göreli (relative) yapar. Bu, icindeki mutlak konumlandirilmis (absolute) ögelerin bu elemente göre konumlanmasini saglar. Ayrica z-index gibi özellikleri kullanabilmek icin de gereklidir (bu örnekte kullanilmiyor). */
}
@font-face {
    font-family: 'CSRegular'; /* Font ailesi adı (istediğiniz gibi değiştirebilirsiniz) */
    src: url('fonts/cs_regular.ttf') format('truetype'); /* Font dosyasının yolu ve formatı */
}

@font-face {
    font-family: 'GamecubeN'; /* Font ailesi adı (istediğiniz gibi değiştirebilirsiniz) */
    src: url('fonts/gamecuben.ttf') format('truetype'); /* Font dosyasının yolu ve formatı */
}

.main-button:hover {
    background-color: #0056b3; /* Mevcut #007bff'nin biraz daha koyu tonu */
}

.other-link-button:hover {
    background-color: #1e8449; /* Mevcut #28a745'in biraz daha koyu tonu */
}

p {
    /*font-family: 'GamecubeN', sans-serif; */ /* p paragrafları için GamecubeN fontunu kullan */
}

    /* İsterseniz, başka HTML elemanları için de bu fontları kullanabilirsiniz: */
    /*
div {
    font-family: 'GamecubeN', sans-serif;
}
*/