@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
:root {
    --main-color: #bda892;
    --black-color: #231F20;
    --border: 0.1rem solid rgba(117, 75, 40, 0.4);
    --main-color2: #754b28;
}

.haberler {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 100px;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
}

.haberler>.haber {
    display: flex;
    justify-content: center;
    justify-items: center;
    flex-flow: row wrap;
    width: 98%;
    aspect-ratio: 2/1;
    content: '';
    margin: 20px 0;
    background-color: rgb(240, 240, 240);
    border-radius: 20px;
}

.haberler>.haber:hover {
    transform: scale(1);
}

.haberler>.haber>.baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: min-content;
    width: 100%;
    padding: 20px 20px;
    font-weight: 500;
    font-size: 32px;
    color: var(--main-color2);
}

.haberler>.haber>.baslik>.odul {
    width: 100px;
    aspect-ratio: 1/1;
}

.haberler>.haber>.icerik {
    height: min-content;
    width: 100%;
    padding: 10px 20px;
    font-weight: 500;
    color: var(--main-color2);
}

.haberler>.haber>.icerik>a>img {
    width: 100%;
    object-fit: cover;
}

.haberler>.haber>.icerik>iframe {
    aspect-ratio: 16/9;
    width: 100%;
}

.haberler>.haber>.icerik>.doubleInsta {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0 8% 0 8%;
}

.haberler>.haber>.icerik>.doubleInsta>img {
    aspect-ratio: 102/182;
    width: 40%;
    object-fit: cover;
}

.haberler>.haber>.aciklama {
    height: min-content;
    width: 100%;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 20px;
    color: var(--main-color2);
}

.haberler>.haber>.aciklama>.tarih {
    margin-top: 20px;
    font-weight: 200;
    font-size: 20px;
    color: black;
}

@media(max-width:500px) {
    .haberler {
        width: 100%;
        margin-left: 0%;
        background-color: transparent;
    }
    .haberler>.haber {
        width: 100%;
        margin: 25px 0;
        background-color: white;
    }
    .haberler>.haber:hover {
        transform: scale(1);
    }
    .haberler>.haber>.baslik {
        height: min-content;
        width: 100%;
        padding: 20px 20px;
        font-weight: 500;
        font-size: 16px;
        color: var(--main-color2);
    }
    .haberler>.haber>.aciklama {
        height: min-content;
        width: 100%;
        padding: 10px 20px;
        font-weight: 500;
        font-size: 10px;
        color: var(--main-color2);
    }
    .haberler>.haber>.aciklama>.tarih {
        margin-top: 20px;
        font-weight: 200;
        font-size: 10px;
        color: black;
    }
    .haberler>.haber>.icerik>.doubleInsta {
        padding: 0 3% 0 3%;
    }
    .haberler>.haber>.icerik>.doubleInsta>img {
        width: 45%;
    }
}