body
{
    padding-top: 122px;
}

section.projeler h1.proje_no
{
    font-family: var(--fontThin);
    font-size: var(--bigFontSize);
    padding: 0.75rem;
    background-color: var(--darkBlue);
    display: none;
}


section.projeler li
{
    background-image: url("../../svg/icon_tick_green.svg");
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-position: 0 15px;
    padding-left: 25px;
    padding-top: 0.5rem;
    font-size: var(--smallFontSize);
}

section.projeler > h1.title
{
    padding: 2rem;
}


section.projeler > div.image
{
    padding: 0 2rem;
    width: 100%;
}

section.projeler > div.image > img
{
    width: 100%;
}



div.projeler_content
{
    background-image: url("../../png/projeler_bg.jpg");
    background-repeat: repeat-y;
    background-size: cover;
    min-height: 100svh;
}



div#isik_sitesi,
div#eta_yasam_mimari
{
    display: flex;
    padding: 2rem;
}



div.image
{
    position: relative;
    width: 50%;
}

div.image > div.location
{
    position: absolute;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}


div.location > img
{
    height: 20px;
}

div.location > p
{
    font-size: calc(var(--smallFontSize) + 0.2rem);
    padding-bottom: 0.2rem;
}

div.photos
{
    position: absolute;
    z-index: 1;
    top: 40px;
}

div.photos > img
{
    width: 100%;
}




div.content
{
    padding: 2rem;
    padding-left: 5%;
}

div.content h1.title
{
    font-size: var(--middleFontSize);
}

div.content h1.title_orange
{
    font-size: calc(var(--middleFontSize) - 1rem);
    font-family: var(--fontRegular);
    color: var(--darkOrange);
    line-height: 1;
}

div.content h1.title_orange > span
{
    font-size: calc(var(--middleFontSize) - 1rem);
    font-family: var(--fontThin);
    color: var(--darkOrange);
}

div.depreme_dayanıkli
{
    display: flex;
    gap: 1rem;
    margin: 2rem;
    margin-left: 0;
    border-radius: 12px;
    width: fit-content;
}

div.depreme_dayanıkli > img
{
    height: 130px;
}


div.depreme_dayanıkli > p
{
    font-family: var(--fontBold);
    font-size: calc(var(--smallFontSize) + 0.2rem);
}


div.genele_metrekare
{
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
    padding: 2rem 0;
}

div.genele_metrekare > div > p,
div.genele_metrekare > div > p > sup
{
    font-size: calc(var(--xsmallFontSize) + 0.2rem);
}

div.genele_metrekare > div > h1
{
    font-size: var(--middleFontSize);
}


div.daire_bilgileri
{
    background-color: rgba(0,0,0,0.4);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
    width: fit-content;
}



div#eta_yasam_mimari div.image > div.location
{
    right: 0;
}



@media only screen and (max-width: 500px)
{
    section.projeler h1.proje_no
    {
        display: block;
    }

    div.projeler_content
    {
        background-size: 300% auto;
        background-position: center center;
    }

    section.projeler > div.image {
        padding: 0 1rem;
        padding-bottom: 1rem;
    }

    div#isik_sitesi, div#eta_yasam_mimari {
        padding: 1rem;
        flex-direction: column;
    }

    div#eta_yasam_mimari div.image {
        order: 1;
    }

    div.image {
        position: unset;
        width: 100%;
    }

    div.photos {
        position: unset;
    }

    div.image > div.location {
        position: unset;
    }

    div#eta_yasam_mimari div.content {
        order: 2;
    }

    div.content {
        padding: 1rem;
    }

    div.daire_bilgileri {
        padding: 1rem;
    }

    div.genele_metrekare {
        gap: 1rem;
        padding: 2rem;
    }

    div.content h1.title_orange
    {
        font-size: calc(var(--middleFontSize) - 0.5rem);
        line-height: normal;
    }
    
    div.content h1.title_orange > span
    {
        font-size: calc(var(--middleFontSize) - 0.5rem);
    }
}