/* Ana kapsayıcı stili (görseldeki mavi arka planı taklit eder) */
.focus-areas-list {
    background-color: #1e51bf; /* Koyu Mavi */
    color: #ffffff;          /* Beyaz metin */
    margin: 0 auto;
    flex: 1 1 50%;
    padding: 0px 20px;
    display: flex;
    align-items: center;     
    flex-wrap: wrap;     
    flex-direction: row;
    gap: 20px;   
}

/* Sırasız liste (<ul>) için ayarlar */
.focus-areas-list ul {
    list-style: none; /* Liste işaretlerini (noktaları) kaldırır */
    padding: 0;
    margin: 0;
}

/* Her bir liste öğesi (<li>) için ayarlar */
.focus-areas-list li {
    padding: 15px 0; /* Liste öğeleri arasında dikey boşluk */
    /* İstenirse liste öğelerinin altına ince bir çizgi eklenebilir: */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.2); */
}

/* Başlık stili (h3) */
.focus-areas-list .focus-title {
    font-size: 1.8em;       /* Başlığı büyük yapar */
    font-weight: 700;       /* Kalın yapar */
    text-transform: lowercase; /* Görseldeki gibi küçük harf yapar */
    margin-bottom: 5px;     /* Başlık ile açıklama arasına küçük boşluk */
    line-height: 1.2;
    text-decoration: underline;
}

/* Açıklama paragrafı stili */
.focus-areas-list .focus-description {
    font-size: 1em;         /* Normal metin boyutu */
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Mobil Uyum (Gerekliyse font boyutunu küçültmek için) */
@media (max-width: 450px) {
    .focus-areas-list .focus-title {
        font-size: 1.5em;
    }
}