* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-family: Arial, sans-serif;
    background-color: #00162c;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: 30px;
    flex-direction: column; /* Body elemanlarını alt alta sıralar */
}

/* Ortalanmış Konteyner */
.content-container {
    width: 100%; /* Her bir konteyner genişliği */
    margin:15px auto;
    /* Yukarıdan ve aşağıdan boşluk ve ortalama */
    background-color: #00162c; /* Arka plan rengi */
    border-radius: 5px; /* Köşeleri yuvarla */
    /*   box-shadow: 0 0 2px rgb(0, 154, 207);  İnce mavi çizgi efekti */
    padding: 20px; /* İçerik çevresinde boşluk */
    display: block; /* Her bir konteynerin tam genişlikte görünmesi için block yap */

}

/* H2 Başlık */
h2 {
    text-align: center; /* Başlığı ortala */
    margin: 0; /* Varsayılan dış boşlukları kaldır */
    margin-bottom: 20px; /* Altında 20px boşluk bırak */
    font-size: 1.8rem; /* Yazı boyutunu belirle */
    color: #007acc; /* Yazı rengi */
}

h4 {
    text-align: left;
    margin-bottom: 10px;
    color: #0ba7e3;
    font-size: 1.4rem;
}

/* Resim ve Metin Alanı İçin Düzen */
.content-row {
    display: flex; /* Resim ve metni yan yana yerleştir */
    flex-wrap: wrap; /* İçerik taşarsa alt satıra geç */
    gap: 20px; /* Resim ve metin arasında boşluk */
}

/* Sol Üst Köşe Resim */
.image-container img {
    width: 300px; /* Resim genişliği */
    height: auto; /* Yüksekliği orantılı tut */
    border-radius: 7px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

/* Metin Alanı */
.text-container {
    flex: 1; /* Metin alanı esnek genişlik alır */
    font-size: 1.6rem;
    color: #b3d9d3;
    line-height: 1.6;
    text-align: justify; /* Metni sağa ve sola yasla */
    text-indent: 20px; /* Paragraf başı boşluğu */
}

/* Liste Elemanları İçin Özel İkon */
.text-container ul {
    list-style: none; /* Varsayılan liste işaretlerini kaldır */
    padding: 0; /* Liste boşluklarını kaldır */
    margin: 0;
}

.text-container ul li {
    position: relative; /* Özel işaret için pozisyon ayarla */
    padding-left: 25px; /* İşarete yer açmak için soldan boşluk bırak */
    margin-bottom: 10px; /* Liste elemanları arasında boşluk */
    font-size: 1.3rem; /* Yazı boyutu */
    line-height: 1.6; /* Satır arası boşluğu */
    color: #b3d9d3; /* Metin rengi */
}

.text-container ul li::before {
    content: "\2605"; /* Unicode yıldız karakteri */
    position: absolute; /* Mutlak pozisyon */
    left: 0; /* Sol kenarda yer al */
    color: #00ff00; /* Yeşil renk */
    font-size: 1.2rem; /* Yıldızın boyutu */
    top: 0; /* Yıldızın dikey hizası */
}
.text-container ul ul li {
    list-style-type: none; /* Varsayılan işaretçiyi kaldır */
    position: relative;
    padding-left: 20px; /* Noktadan sonraki boşluk */
    font-size: 1.2rem !important;
}

/* Noktayı manuel olarak ekle */
.text-container ul ul li::before {
    content: '•'; /* Unicode nokta simgesi */
    position: absolute;
    left: 0;
    font-size: 1.2rem; /* Noktanın boyutu */
    color: white; /* Noktanın rengi (isteğe göre değiştirilebilir) */
}
.text-container p {
    font-size: 1.4rem;
}

/* Mobil Uyum (900px ve altı) */
@media (max-width: 900px) {
    .content-container {
        width:100%; /* Mobilde genişliği artır */
    }
    .text-container ul h4 {
        font-size: 1.2rem;!important;/* Mobilde genişliği artır */
        color: #0e970d; !important;
    }
    .content-row {
        flex-direction: column; /* Mobilde resim ve metin alt alta gelir */
        width: 100%;
    }

    .image-container img {
        width: 100%; /* Mobilde resim tam genişlikte olur */
        margin: 0 auto; /* Ortala */
    }
    .image-container_trnst_ozl img{
        width: 100%;
    }

    .text-container {
        width: 100%;
        font-size: 1.1rem; /* Yazı boyutunu biraz küçült */
        text-align: left; /* Sola hizala */
        line-height: 1.6; /* Satır arası boşluğu */
        text-indent: 20px; /* Paragraf başı boşluğu */
        padding: 5px; /* Metin çevresinde biraz daha fazla boşluk */
        /*  max-width: 600px; Metin genişliğini sınırlayarak daha düzenli görünüm */
        margin: 0 auto; /* Metni ortala */
        hyphens: auto; /* Doğru heceleme */
       /* word-break: break-word;*/ /* Kelimeleri gerektiğinde kır */
        overflow-wrap: break-word; /* Uzun kelimeleri satıra sığdır */
        color: #eff8ff; /* Metin rengi */
    }
    .text-container p {
        font-size: 1.1rem;
    }

    .text-container ul li p {
        font-size: 1rem !important; /* Yazı boyutu */
    }

    /* Ana listeye yıldız ekle */
    .text-container > ul > li {
        width: 100%;
        list-style-type: none; /* Varsayılan işaretçiyi kaldır */
        position: relative;
        padding-left: 25px; /* Yıldızdan sonraki boşluk */
        font-size: 1rem !important;
        margin: auto;
        margin-left: -40px;

    }

    /* Yıldızı manuel olarak ekle */
    .text-container > ul > li::before {
        content: '★'; /* Unicode yıldız simgesi */
        position: absolute;
        left: 0;
        color: green; /* İstenirse renk değiştirilebilir */
        font-size: 1rem;
        margin-bottom: 30px;
    }

    /* Alt liste için nokta */
    .text-container ul ul li {
        list-style-type: none; /* Varsayılan işaretçiyi kaldır */
        position: relative;
        padding-left: 15px; /* Noktadan sonraki boşluk */
        font-size: 1rem !important;
        margin-left:-5px;
        width: 100%;
    }

    /* Noktayı manuel olarak ekle */
    .text-container ul ul li::before {
        content: '•'; /* Unicode nokta simgesi */
        position: absolute;
        left: 0;
        font-size: 1.2rem; /* Noktanın boyutu */
        color: white; /* Noktanın rengi (isteğe göre değiştirilebilir) */
    }



}