/* İçerik Alanı */
.content {
    display: flex;
    flex-direction: column; /* Üstten alta sıralama */
    gap: 20px; /* Kutucuklar arası boşluk */
    padding: 20px;
    padding-top: 10px; /* Header ile içerik arasında boşluk */
}

/* Slider Kutusu */
.slider-container {
    width: 100%; /* Tam genişlik */
    height: 300px; /* Sabit yükseklik */
    background-color: #ffffff; /* Beyaz arka plan */
    display: flex;
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
}

.slider {
    width: 90%; /* İçeriğin genişliği */
    height: 100%; /* Tam yükseklik */
    background-color: #ffffff; /* Daha koyu gri arka plan */
    display: flex;
    align-items: center; /* Dikey ortalama */
    justify-content: center; /* Yatay ortalama */
    border-radius: 5px; /* Köşeleri yuvarlat */
    text-align: center;
}

/* Grid Konteyner */
.grid-container {
    display: grid; /* Grid düzeni */
    grid-template-columns: 2fr 1fr; /* Sol geniş, sağ dar */
    gap: 20px;
}

/* Sol Kutucuk (Resim Alanı) */
.left-box {
    width: 100%; /* Sayfanın tamamını kapla */
    max-width: 800px; /* Maksimum genişlik */
    height: 400px; /* Kutunun yüksekliği */
    margin: 0 auto; /* Ortala */
    background-color: #ffffff; /* Arka plan rengi */
    overflow: hidden; /* Taşan içerikleri gizle */
    position: relative; /* İçerideki slider konumlandırması için */
    border-radius: 8px; /* Hafif köşeli bir görünüm */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
}

/* Sağdaki İçerik Alanı */
.right-content {
    display: flex; /* Kutuları yan yana veya alt alta yerleştirmek için flex kullanıyoruz */
    flex-direction: column; /* Varsayılan olarak alt alta hizalanır */
    gap: 20px; /* Kutular arasına boşluk koyar */
}

/* Döviz Kutuları */

.currency-box {
    display: flex;
    gap: 20px; /* Kartlar arasında boşluk */
    justify-content: space-between;
}

.eurocard,
.dolarcard {
    background-color: #bbb6b6; /* Arka plan rengi */
    padding: 1rem;
    border-radius: 20px; /* Kart köşelerini yuvarlat */
    max-width: 320px;
    width: 100%;
    display: flex;
    flex-direction: column; /* Dikey düzen */
    justify-content: space-between;
    text-align: left;
    position: relative; /* İkon yerleştirme için */
}

/* Hizmetler ALanı */
.hizmetler {
    width: 90%; /* Sayfanın %90'ını kaplasın */
    max-width: 1200px; /* Maksimum genişlik */
    margin: 40px auto; /* Ortalamak için margin: auto */
    padding: 20px; /* İçerik boşlukları */
    background-color: #f5f5f5; /* Hafif gri arka plan */
    border: 1px solid #ddd; /* Kenarlık */
    border-radius: 10px; /* Köşeleri yuvarlat */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
    text-align: center; /* Metni ortala */
}