/* Created By AkinaCss */
/* Hizmetler area */

/* =====================================================
   HİZMETLER SAYFASI
===================================================== */

.servicesContainer1 {
    width: min(1150px, 90%);
    margin: 0 auto;
}


/* =====================================================
   HERO
===================================================== */

.servicesHero {
    position: relative;
    height: 390px;
    background:
        url("../img/hizmetler/hizmet.jpg")
        center center / cover
        no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}


.servicesHeroOverlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(9, 27, 45, .92),
            rgba(9, 27, 45, .55),
            rgba(9, 27, 45, .25)
        );
}


.servicesHeroContainer {
    position: relative;
    z-index: 2;

    width: min(1150px, 90%);
    margin: 0 auto;
}


.servicesHeroLabel {
    display: block;

    margin-bottom: 15px;

    color: #4da3ff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.servicesHero h1 {
    max-width: 700px;

    margin: 0 0 25px;

    color: #fff;

    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    font-weight: 700;
}


.servicesBreadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(255,255,255,.65);

    font-size: 13px;
}


.servicesBreadcrumb a {
    color: rgba(255,255,255,.65);

    text-decoration: none;

    transition: .3s ease;
}


.servicesBreadcrumb a:hover {
    color: #fff;
}


.servicesBreadcrumb strong {
    color: #fff;
}


/* =====================================================
   INTRO
===================================================== */

.servicesIntro1 {
    padding: 95px 0 70px;

    background: #fff;
}


.servicesIntroGrid {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 90px;
    align-items: center;
}


.sectionMiniTitle {
    display: block;

    margin-bottom: 14px;

    color: #2586d8;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.3px;
}


.servicesIntroLeft h2 {
    max-width: 500px;

    margin: 0;

    color: #183654;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.12;
}


.servicesIntroRight {
    padding-top: 5px;
    width: 100%;
}


.servicesIntroRight p {
    margin: 0 0 18px;
    color: #68798a;
    font-size: 15px;
    line-height: 1.9;
    width: 100%;
}


.servicesIntroRight p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   SERVICES SECTION
===================================================== */

.servicesSection {
    padding: 80px 0 110px;

    background: #f5f7fa;
}


.servicesSectionHeader {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 40px;

    margin-bottom: 45px;
}


.servicesSectionHeader h2 {
    margin: 0;

    color: #183654;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
}


.servicesSectionHeader > p {
    max-width: 310px;

    margin: 0;

    color: #728191;

    font-size: 14px;
    line-height: 1.7;
}


/* =====================================================
   SERVICES GRID
===================================================== */

.servicesGrid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 30px;
}


/* =====================================================
   SERVICE CARD
===================================================== */

.serviceCard1 {
    position: relative;

    display: flex;
    flex-direction: column;

    background: #fff;

    border: 1px solid #e7ebef;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.serviceCard1:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 50px rgba(20, 52, 82, .10);
}


/* =====================================================
   CARD IMAGE
===================================================== */

.serviceCardImage {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #dce3e9;
}


.serviceCardImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}


.serviceCard1:hover .serviceCardImage img {
    transform: scale(1.06);
}

.serviceCard1:hover .serviceDetailButton {
    color: #2388dc;
}

.serviceCardNumber {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #183654;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 4px;
}


/* =====================================================
   CARD CONTENT
===================================================== */

.serviceCardContent {
    position: relative;

    padding: 30px 32px 32px;
}


.serviceCardIcon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #edf6ff;
    border-radius: 4px;
}
.serviceCardIcon svg {
    width: 40px;
    height: 40px;
    fill: #2187da;
}


.serviceCardContent h3 {
    margin: 0 0 12px;

    color: #183654;

    font-size: 24px;
    font-weight: 700;
}


.serviceCardContent p {
    max-width: 600px;

    margin: 0 0 25px;

    color: #71808f;

    font-size: 14px;
    line-height: 1.8;
}


/* =====================================================
   DETAIL BUTTON
===================================================== */

.serviceDetailButton {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: #183654;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}


.serviceDetailButton svg {
    fill: #2388dc;
    width: 18px;
    height: 18px;
    transition: transform .3s ease;
}


.serviceDetailButton:hover {
    color: #2388dc;
}

.serviceCard1:hover .serviceDetailButton svg {
    transform: translateX(5px);
}


/* =====================================================
   WHY SECTION
===================================================== */

.servicesWhy {
    padding: 110px 0;

    background: #fff;
}


.servicesWhyGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 85px;

    align-items: center;
}


.servicesWhyImage {
    position: relative;

    height: 560px;
}


.servicesWhyImage img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.servicesWhyExperience {
    position: absolute;

    right: -25px;
    bottom: 35px;

    width: 145px;
    height: 145px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    background: #183654;

    color: #fff;

    text-align: center;
}


.servicesWhyExperience strong {
    display: block;

    font-size: 38px;
    line-height: 1;
}


.servicesWhyExperience span {
    margin-top: 8px;

    color: rgba(255,255,255,.7);

    font-size: 11px;
    line-height: 1.5;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.servicesWhyContent h2 {
    max-width: 520px;

    margin: 0 0 22px;

    color: #183654;

    font-size: clamp(32px, 4vw, 46px);

    line-height: 1.12;
}


.servicesWhyContent > p {
    max-width: 580px;

    margin: 0 0 35px;

    color: #6e7e8d;

    font-size: 14px;
    line-height: 1.9;
}


/* =====================================================
   WHY LIST
===================================================== */

.whyList {
    display: flex;
    flex-direction: column;

    gap: 25px;
}


.whyItem {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


.whyIcon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf6ff;
}

.whyIcon svg {
    fill: #2388dc;
    width: 35px;
    height: 35px;
}


.whyItem h3 {
    margin: 0 0 5px;

    color: #183654;

    font-size: 16px;
}


.whyItem p {
    margin: 0;

    color: #7a8794;

    font-size: 13px;
    line-height: 1.6;
}

/* =====================================================
   SERVICES RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .servicesIntroGrid {
        gap: 50px;
    }


    .servicesWhyGrid {
        gap: 50px;
    }


    .servicesWhyImage {
        height: 480px;
    }


    .servicesWhyExperience {
        right: -15px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 800px) {

    .servicesHero {
        height: 350px;
    }


    .servicesIntro1 {
        padding: 75px 0 50px;
    }


    .servicesIntroGrid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .servicesSection {
        padding: 65px 0 80px;
    }


    .servicesSectionHeader {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .servicesGrid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .servicesWhy {
        padding: 80px 0;
    }


    .servicesWhyGrid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .servicesWhyImage {
        height: 500px;
    }


    .servicesWhyExperience {
        right: 20px;
    }


    .servicesCTAWrap {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .servicesContainer1 {
        width: min(92%, 1150px);
    }


    .servicesHero {
        height: 330px;
    }


    .servicesHeroContainer {
        width: 92%;
    }


    .servicesHero h1 {
        font-size: 34px;
    }


    .servicesIntro1 {
        padding: 60px 0 45px;
    }


    .servicesIntroLeft h2 {
        font-size: 34px;
    }


    .servicesSection {
        padding: 60px 0 70px;
    }


    .servicesSectionHeader h2 {
        font-size: 34px;
    }


    .serviceCardImage {
        height: 230px;
    }


    .serviceCardContent {
        padding: 25px;
    }


    .serviceCardContent h3 {
        font-size: 21px;
    }


    .servicesWhy {
        padding: 65px 0;
    }


    .servicesWhyImage {
        height: 400px;
    }


    .servicesWhyContent h2 {
        font-size: 34px;
    }


    .servicesWhyExperience {
        width: 120px;
        height: 120px;

        right: 15px;
        bottom: 20px;
    }


    .servicesWhyExperience strong {
        font-size: 32px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .servicesHero h1 {
        font-size: 30px;
    }


    .servicesBreadcrumb {
        font-size: 12px;
    }


    .serviceCardImage {
        height: 210px;
    }


    .serviceCardContent {
        padding: 22px;
    }


    .servicesWhyImage {
        height: 340px;
    }


    .whyItem {
        gap: 12px;
    }


    .whyIcon {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }

}

/* ============================================ */
/* ============================================ */
/* ============================================ */

/* Gayrimenkul css */

/* =====================================================
   GAYRİMENKUL DETAY SAYFASI
===================================================== */

.realEstateContainer {
    width: min(1150px, 90%);
    margin: 0 auto;
}


/* =====================================================
   HERO
===================================================== */

.realEstateHero {
    position: relative;
    height: 440px;
    display: flex;
    align-items: center;
    background:
        url("../img/hizmetler/garimenkul-hero.jpg")
        center center / cover
        no-repeat;
    overflow: hidden;
}


.realEstateHeroOverlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(9, 27, 45, .94),
            rgba(9, 27, 45, .68),
            rgba(9, 27, 45, .25)
        );
}


.realEstateHeroContainer {
    position: relative;
    z-index: 2;

    width: min(1150px, 90%);
    margin: 0 auto;
}


.realEstateHeroLabel {
    display: block;

    margin-bottom: 17px;

    color: #4da3ff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.realEstateHero h1 {
    margin: 0 0 28px;

    color: #fff;

    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.06;
}


.realEstateBreadcrumb {
    display: flex;
    align-items: center;
    gap: 11px;

    color: rgba(255,255,255,.55);

    font-size: 13px;
}


.realEstateBreadcrumb a {
    color: rgba(255,255,255,.6);

    text-decoration: none;

    transition: .3s ease;
}


.realEstateBreadcrumb a:hover {
    color: #fff;
}


.realEstateBreadcrumb strong {
    color: #fff;
}


/* =====================================================
   INTRO
===================================================== */

.realEstateIntro {
    padding: 100px 0 85px;

    background: #fff;
}


.realEstateIntroGrid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap: 90px;

    align-items: start;
}


.realEstateSectionLabel {
    display: block;
    margin-bottom: 14px;
    color: #2388dc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.3px;
}

.contractingContainer .sectionLabel {
    display: block;
    margin-bottom: 14px;
    color: #2388dc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.3px;
}


.realEstateIntroTitle h2 {
    max-width: 480px;

    margin: 0;

    color: #183654;

    font-size: clamp(34px, 4vw, 49px);
    line-height: 1.1;
}


.realEstateIntroText p {
    margin: 0 0 20px;

    color: #6d7d8d;

    font-size: 15px;
    line-height: 1.9;
}


.realEstateIntroText p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   MAIN CONTENT
===================================================== */

.realEstateMain {
    padding: 100px 0;

    background: #f5f7fa;
}


.realEstateMainGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 85px;

    align-items: center;
}


.realEstateMainImage {
    position: relative;

    height: 570px;

    overflow: visible;
}


.realEstateMainImage img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.realEstateImageBadge {
    position: absolute;

    right: -25px;
    bottom: 35px;

    width: 140px;
    height: 140px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #183654;

    color: #fff;

    text-align: center;
}


.realEstateImageBadge strong {
    margin-bottom: 7px;

    color: #4da3ff;

    font-size: 35px;
}


.realEstateImageBadge span {
    font-size: 10px;

    line-height: 1.5;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.realEstateMainContent h2 {
    max-width: 520px;

    margin: 0 0 22px;

    color: #183654;

    font-size: clamp(34px, 4vw, 47px);
    line-height: 1.1;
}


.realEstateMainContent > p {
    max-width: 570px;

    margin: 0 0 17px;

    color: #6e7d8b;

    font-size: 14px;
    line-height: 1.9;
}


/* =====================================================
   CHECK LIST
===================================================== */

.realEstateCheckList {
    display: flex;
    flex-direction: column;

    gap: 15px;

    margin-top: 30px;
}


.realEstateCheckItem {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #314b63;

    font-size: 13px;
    font-weight: 600;
}


.realEstateCheckItem svg {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf5ff;
    fill: #2388dc;
}


/* =====================================================
   HİZMET KAPSAMI
===================================================== */

.realEstateServices {
    padding: 105px 0;

    background: #fff;
}


.realEstateServicesHeader {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 50px;

    margin-bottom: 50px;
}


.realEstateServicesHeader h2 {
    max-width: 550px;

    margin: 0;

    color: #183654;

    font-size: clamp(34px, 4vw, 47px);
    line-height: 1.1;
}


.realEstateServicesHeader > p {
    max-width: 310px;

    margin: 0;

    color: #748291;

    font-size: 14px;
    line-height: 1.8;
}


/* =====================================================
   SERVICE BOXES
===================================================== */

.realEstateServicesGrid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;
}


.realEstateServiceBox {
    position: relative;

    min-height: 330px;

    padding: 35px 28px;

    background: #f5f7fa;

    border: 1px solid #e8edf1;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}


.realEstateServiceBox:hover {
    transform: translateY(-7px);

    background: #fff;

    box-shadow:
        0 20px 45px rgba(20,52,82,.09);
}


.realEstateServiceNumber {
    position: absolute;

    top: 22px;
    right: 23px;

    color: #cbd5de;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}


.realEstateServiceIcon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    background: #eaf5ff;
}

.realEstateServiceIcon svg {
    fill: #2388dc;
    width: 45px;
    height: 45px;
}


.realEstateServiceBox h3 {
    margin: 0 0 14px;

    color: #183654;

    font-size: 19px;
    line-height: 1.3;
}


.realEstateServiceBox p {
    margin: 0;

    color: #748291;

    font-size: 13px;
    line-height: 1.8;
}


/* =====================================================
   PROCESS
===================================================== */

.realEstateProcess {
    padding: 105px 0;

    background: #f5f7fa;
}


.realEstateProcessHeader {
    max-width: 650px;

    margin-bottom: 55px;
}


.realEstateProcessHeader h2 {
    margin: 0;

    color: #183654;

    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.1;
}


.realEstateProcessList {
    display: flex;
    flex-direction: column;

    border-top: 1px solid #dfe6ec;
}


.realEstateProcessItem {
    display: grid;

    grid-template-columns: 110px 1fr;

    gap: 40px;

    padding: 30px 0;

    border-bottom: 1px solid #dfe6ec;
}


.realEstateProcessNumber {
    color: #2388dc;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;
}


.realEstateProcessContent {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}


.realEstateProcessContent h3 {
    min-width: 300px;
    margin: 0;
    color: #183654;
    font-size: 20px;
}


.realEstateProcessContent p {
    margin: 0;
    color: #72818f;
    font-size: 13px;
    line-height: 1.8;
}


/* =====================================================
   WHY
===================================================== */

.realEstateWhy {
    padding: 110px 0;

    background: #fff;
}


.realEstateWhyGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 85px;

    align-items: center;
}


.realEstateWhyContent h2 {
    max-width: 500px;

    margin: 0 0 20px;

    color: #183654;

    font-size: clamp(34px, 4vw, 47px);
    line-height: 1.1;
}


.realEstateWhyContent > p {
    max-width: 520px;

    margin: 0 0 35px;

    color: #71808e;

    font-size: 14px;
    line-height: 1.9;
}


.realEstateWhyList {
    display: flex;
    flex-direction: column;

    gap: 24px;
}


.realEstateWhyItem {
    display: flex;

    gap: 17px;
}


.realEstateWhyIcon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf6ff;
}

.realEstateWhyIcon svg {
    fill: #2388dc;
    width: 38px;
    height: 38px;
}

.realEstateWhyItem h3 {
    margin: 0 0 5px;

    color: #183654;

    font-size: 16px;
}


.realEstateWhyItem p {
    margin: 0;

    color: #788693;

    font-size: 13px;
    line-height: 1.6;
}


.realEstateWhyImage {
    position: relative;

    height: 550px;
}


.realEstateWhyImage > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.realEstateQuote {
    position: absolute;

    left: -30px;
    bottom: 30px;

    width: 260px;

    padding: 25px;

    background: #183654;

    color: #fff;
}


.realEstateQuote svg {
    margin-bottom: 12px;
    fill: #4da3ff;
    width: 20px;
    height: 20px;
}


.realEstateQuote p {
    margin: 0;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.5;
}

/* =====================================================
   GAYRİMENKUL RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .realEstateIntroGrid {
        gap: 50px;
    }


    .realEstateMainGrid {
        gap: 50px;
    }


    .realEstateWhyGrid {
        gap: 50px;
    }


    .realEstateServicesGrid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 800px) {

    .realEstateHero {
        height: 380px;
    }


    .realEstateIntro {
        padding: 75px 0 60px;
    }


    .realEstateIntroGrid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .realEstateMain {
        padding: 75px 0;
    }


    .realEstateMainGrid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .realEstateMainImage {
        height: 500px;
    }


    .realEstateServices {
        padding: 80px 0;
    }


    .realEstateServicesHeader {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }


    .realEstateServicesGrid {
        grid-template-columns: repeat(2, 1fr);
    }


    .realEstateProcess {
        padding: 80px 0;
    }


    .realEstateProcessItem {
        grid-template-columns: 70px 1fr;

        gap: 20px;
    }


    .realEstateProcessContent {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }


    .realEstateProcessContent h3 {
        min-width: auto;
    }


    .realEstateWhy {
        padding: 80px 0;
    }


    .realEstateWhyGrid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .realEstateWhyImage {
        height: 500px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .realEstateContainer {
        width: 92%;
    }


    .realEstateHero {
        height: 340px;
    }


    .realEstateHeroContainer {
        width: 92%;
    }


    .realEstateHero h1 {
        font-size: 36px;
    }


    .realEstateBreadcrumb {
        flex-wrap: wrap;

        gap: 7px;

        font-size: 11px;
    }


    .realEstateIntro {
        padding: 60px 0 50px;
    }


    .realEstateIntroTitle h2 {
        font-size: 35px;
    }


    .realEstateMain {
        padding: 65px 0;
    }


    .realEstateMainImage {
        height: 400px;
    }


    .realEstateImageBadge {
        right: 15px;
        bottom: 20px;

        width: 115px;
        height: 115px;
    }


    .realEstateImageBadge strong {
        font-size: 29px;
    }


    .realEstateMainContent h2 {
        font-size: 34px;
    }


    .realEstateServices {
        padding: 65px 0;
    }


    .realEstateServicesHeader h2 {
        font-size: 34px;
    }


    .realEstateServicesGrid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .realEstateServiceBox {
        min-height: auto;

        padding: 30px 25px;
    }


    .realEstateProcess {
        padding: 65px 0;
    }


    .realEstateProcessHeader h2 {
        font-size: 34px;
    }


    .realEstateProcessItem {
        grid-template-columns: 50px 1fr;

        gap: 15px;

        padding: 25px 0;
    }


    .realEstateProcessContent h3 {
        font-size: 18px;
    }


    .realEstateWhy {
        padding: 65px 0;
    }


    .realEstateWhyContent h2 {
        font-size: 34px;
    }


    .realEstateWhyImage {
        height: 390px;
    }


    .realEstateQuote {
        left: 15px;
        bottom: 15px;

        width: 230px;

        padding: 20px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .realEstateHero h1 {
        font-size: 31px;
    }


    .realEstateMainImage {
        height: 340px;
    }


    .realEstateWhyImage {
        height: 330px;
    }


    .realEstateQuote {
        width: 205px;
    }

}

/* =============================================== */
/* =============================================== */
/* =============================================== */

/* Insaat taahhut Css */

/* =====================================================
   İNŞAAT TAAHHÜT SAYFASI
===================================================== */

.contractingPage {
    width: 100%;
    overflow: hidden;
}

.contractingContainer {
    width: min(1150px, 90%);
    margin: 0 auto;
}


/* =====================================================
   HERO
===================================================== */

.contractingHero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-image: url("../img/hizmetler/insaat-hero.jpg");
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.contractingHeroOverlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8, 28, 47, 0.92) 0%,
            rgba(8, 28, 47, 0.72) 45%,
            rgba(8, 28, 47, 0.30) 100%
        );
    z-index: -1;
}

.contractingHeroContent {
    max-width: 680px;
    color: #fff;
}

.contractingHeroContent .sectionLabel {
    margin-bottom: 22px;
    color: #5aa9e8;
}

.contractingHeroContent h1 {
    margin: 0;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -1.5px;
}

.contractingHeroContent h1 strong {
    display: block;
    color: #fff;
    font-weight: 700;
}

.contractingHeroContent p {
    max-width: 590px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.8;
}


/* =====================================================
   GENEL BAŞLIK
===================================================== */

.contractingPage .sectionLabel {
    display: block;
    margin-bottom: 16px;
    color: #2478b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.contractingPage h2 {
    margin: 0;
    color: #173653;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -1px;
}

.contractingPage h2 span {
    color: #2478b8;
}

.sectionHeading {
    max-width: 720px;
    margin-bottom: 60px;
}

.sectionHeading p {
    max-width: 620px;
    margin: 22px 0 0;
    color: #687887;
    font-size: 16px;
    line-height: 1.8;
}


/* =====================================================
   INTRO
===================================================== */

.contractingIntro {
    padding: 110px 0;
    background: #fff;
}

.contractingIntroGrid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 80px;
    align-items: center;
}

.contractingIntroContent {
    max-width: 560px;
}

.contractingIntroContent h2 {
    margin-bottom: 28px;
}

.contractingIntroContent p {
    margin: 0 0 17px;
    color: #667684;
    font-size: 16px;
    line-height: 1.85;
}

.contractingIntroContent p:last-child {
    margin-bottom: 0;
}

.contractingIntroImage {
    position: relative;
}

.contractingIntroImage img {
    display: block;
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.contractingExperienceBadge {
    position: absolute;
    right: -25px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 175px;
    padding: 22px 25px;
    background: #173653;
    color: #fff;
}

.contractingExperienceBadge strong {
    font-size: 35px;
    line-height: 1;
}

.contractingExperienceBadge span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =====================================================
   HİZMET KAPSAMI
===================================================== */

.contractingScope {
    padding: 110px 0;
    background: #f5f8fa;
}

.contractingScopeGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.contractingScopeCard {
    position: relative;
    min-height: 330px;
    padding: 35px 28px;
    background: #fff;
    border: 1px solid #e7edf1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contractingScopeCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(23, 54, 83, 0.10);
}

.contractingScopeNumber {
    position: absolute;
    top: 24px;
    right: 25px;
    color: #dbe6ed;
    font-size: 25px;
    font-weight: 800;
}

.contractingScopeIcon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 45px;
    background: #eaf4fb;
}

.contractingScopeIcon svg {
    width: 44px;
    height: 44px;
    fill: #2478b8;
}

.contractingScopeCard h3 {
    margin: 0 0 14px;
    color: #173653;
    font-size: 19px;
    line-height: 1.3;
}

.contractingScopeCard p {
    margin: 0;
    color: #71808d;
    font-size: 14px;
    line-height: 1.75;
}


/* =====================================================
   SÜREÇ
===================================================== */

.contractingProcess {
    padding: 110px 0;
    background: #fff;
}

.contractingProcessList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contractingProcessList::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 55px;
    right: 55px;
    height: 1px;
    background: #d9e3e9;
}

.contractingProcessItem {
    position: relative;
    z-index: 1;
    padding: 0 25px;
    text-align: center;
}

.contractingProcessNumber {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    background: #173653;
    border: 7px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.contractingProcessContent span {
    display: block;
    margin-bottom: 10px;
    color: #2478b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.contractingProcessContent h3 {
    margin: 0 0 12px;
    color: #173653;
    font-size: 18px;
}

.contractingProcessContent p {
    margin: 0;
    color: #71808d;
    font-size: 14px;
    line-height: 1.7;
}


/* =====================================================
   NEDEN ÇALIŞKANLAR
===================================================== */

.contractingWhy {
    padding: 110px 0;
    background: #f5f8fa;
}

.contractingWhyGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 85px;
    align-items: center;
}

.contractingWhyImage img {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.contractingWhyContent {
    max-width: 570px;
}

.contractingWhyContent h2 {
    margin-bottom: 22px;
}

.contractingWhyContent > p {
    margin: 0 0 35px;
    color: #687887;
    font-size: 16px;
    line-height: 1.8;
}

.contractingWhyList {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contractingWhyItem {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.contractingWhyIcon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2478b8;
}

.contractingWhyIcon svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.contractingWhyItem h3 {
    margin: 0 0 6px;
    color: #173653;
    font-size: 16px;
}

.contractingWhyItem p {
    margin: 0;
    color: #74828e;
    font-size: 13px;
    line-height: 1.65;
}


/* =====================================================
   YAKLAŞIM
===================================================== */

.contractingApproach {
    padding: 110px 0;
    background: #173653;
}

.contractingApproach .sectionLabel {
    color: #5aa9e8;
}

.contractingApproach h2 {
    color: #fff;
}

.contractingApproach h2 span {
    color: #5aa9e8;
}

.contractingApproachHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 80px;
    align-items: end;
    margin-bottom: 60px;
}

.contractingApproachHeader > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.8;
}

.contractingApproachGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.contractingApproachCard {
    min-height: 260px;
    padding: 35px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.contractingApproachCard:last-child {
    border-right: 0;
}

.approachNumber {
    display: block;
    margin-bottom: 55px;
    color: #5aa9e8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.contractingApproachCard h3 {
    margin: 0 0 13px;
    color: #fff;
    font-size: 18px;
}

.contractingApproachCard p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    line-height: 1.75;
}


/* =====================================================
   ALT BİLGİ
===================================================== */

.contractingBottom {
    padding: 100px 0;
    background: #fff;
}

.contractingBottomBox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 70px;
    align-items: center;
    padding: 65px 70px;
    background: #f2f6f9;
}

.contractingBottomBox h2 {
    margin-bottom: 20px;
}

.contractingBottomBox p {
    max-width: 620px;
    margin: 0;
    color: #6e7e8b;
    font-size: 15px;
    line-height: 1.8;
}

.contractingBottomSide {
    padding-left: 40px;
    border-left: 1px solid #d7e1e8;
}

.contractingBottomSide span {
    display: block;
    margin-bottom: 15px;
    color: #2478b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.contractingBottomSide strong {
    color: #173653;
    font-size: 27px;
    line-height: 1.25;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .contractingScopeGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contractingProcessList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 50px;
    }

    .contractingProcessList::before {
        display: none;
    }

    .contractingApproachGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contractingApproachCard:nth-child(2) {
        border-right: 0;
    }

    .contractingApproachCard:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
}


@media (max-width: 850px) {

    .contractingHero {
        min-height: 500px;
    }

    .contractingIntroGrid,
    .contractingWhyGrid,
    .contractingApproachHeader {
        grid-template-columns: 1fr;
    }

    .contractingIntroGrid,
    .contractingWhyGrid {
        gap: 50px;
    }

    .contractingIntroImage img {
        height: 470px;
    }

    .contractingWhyImage img {
        height: 500px;
    }

    .contractingApproachHeader {
        gap: 25px;
    }

    .contractingBottomBox {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px;
    }

    .contractingBottomSide {
        padding-left: 0;
        padding-top: 30px;
        border-left: 0;
        border-top: 1px solid #d7e1e8;
    }
}


@media (max-width: 600px) {

    .contractingContainer {
        width: min(92%, 1150px);
    }

    .contractingHero {
        min-height: 470px;
        background-position: 60% center;
    }

    .contractingHeroOverlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 28, 47, 0.94),
                rgba(8, 28, 47, 0.70)
            );
    }

    .contractingHeroContent h1 {
        font-size: 39px;
    }

    .contractingHeroContent p {
        font-size: 14px;
        line-height: 1.7;
    }

    .contractingIntro,
    .contractingScope,
    .contractingProcess,
    .contractingWhy,
    .contractingApproach {
        padding: 75px 0;
    }

    .contractingPage h2 {
        font-size: 32px;
    }

    .sectionHeading {
        margin-bottom: 40px;
    }

    .contractingIntroImage img {
        height: 390px;
    }

    .contractingExperienceBadge {
        right: 15px;
        bottom: 20px;
    }

    .contractingScopeGrid {
        grid-template-columns: 1fr;
    }

    .contractingScopeCard {
        min-height: auto;
    }

    .contractingProcessList {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .contractingProcessItem {
        padding: 0;
        text-align: left;
    }

    .contractingProcessNumber {
        margin: 0 0 20px;
    }

    .contractingWhyImage img {
        height: 390px;
    }

    .contractingWhyList {
        gap: 22px;
    }

    .contractingApproachGrid {
        grid-template-columns: 1fr;
    }

    .contractingApproachCard {
        min-height: auto;
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .contractingApproachCard:last-child {
        border-bottom: 0;
    }

    .contractingApproachCard:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .approachNumber {
        margin-bottom: 25px;
    }

    .contractingBottom {
        padding: 70px 0;
    }

    .contractingBottomBox {
        padding: 35px 25px;
    }

    .contractingBottomSide strong {
        font-size: 24px;
    }

}

/* =====================================================
   PROJE YÖNETİMİ SAYFASI
===================================================== */

.projectManagementPage {
    width: 100%;
    overflow: hidden;
}

.projectManagementContainer {
    width: min(1150px, 90%);
    margin: 0 auto;
}


/* =====================================================
   HERO
===================================================== */

.projectManagementHero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-image: url("../img/hizmetler/proje-hero.jpg");
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.projectManagementHeroOverlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8, 28, 47, 0.93) 0%,
            rgba(8, 28, 47, 0.72) 48%,
            rgba(8, 28, 47, 0.28) 100%
        );
    z-index: -1;
}

.projectManagementHeroContent {
    max-width: 690px;
    color: #fff;
}

.projectManagementHeroContent .sectionLabel {
    margin-bottom: 22px;
    color: #5aa9e8;
}

.projectManagementHeroContent h1 {
    margin: 0;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -1.5px;
}

.projectManagementHeroContent h1 strong {
    display: block;
    color: #fff;
    font-weight: 700;
}

.projectManagementHeroContent p {
    max-width: 600px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.8;
}


/* =====================================================
   GENEL BAŞLIKLAR
===================================================== */

.projectManagementPage .sectionLabel {
    display: block;
    margin-bottom: 16px;
    color: #2478b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.projectManagementPage h2 {
    margin: 0;
    color: #173653;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -1px;
}

.projectManagementPage h2 span {
    color: #2478b8;
}

.sectionHeading {
    max-width: 720px;
    margin-bottom: 60px;
}

.sectionHeading p {
    max-width: 630px;
    margin: 22px 0 0;
    color: #687887;
    font-size: 16px;
    line-height: 1.8;
}


/* =====================================================
   INTRO
===================================================== */

.projectManagementIntro {
    padding: 110px 0;
    background: #fff;
}

.projectManagementIntroGrid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 80px;
    align-items: center;
}

.projectManagementIntroContent {
    max-width: 560px;
}

.projectManagementIntroContent h2 {
    margin-bottom: 28px;
}

.projectManagementIntroContent p {
    margin: 0 0 17px;
    color: #667684;
    font-size: 16px;
    line-height: 1.85;
}

.projectManagementIntroContent p:last-child {
    margin-bottom: 0;
}

.projectManagementIntroImage {
    position: relative;
}

.projectManagementIntroImage img {
    display: block;
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.projectManagementBadge {
    position: absolute;
    right: -25px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 175px;
    padding: 22px 25px;
    background: #173653;
    color: #fff;
}

.projectManagementBadge strong {
    font-size: 34px;
    line-height: 1;
}

.projectManagementBadge span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =====================================================
   HİZMET KAPSAMI
===================================================== */

.projectManagementScope {
    padding: 110px 0;
    background: #f5f8fa;
}

.projectManagementScopeGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.projectManagementScopeCard {
    min-height: 320px;
    padding: 32px 30px;
    background: #fff;
    border: 1px solid #e6edf1;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.projectManagementScopeCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(23, 54, 83, 0.10);
}

.projectManagementScopeTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 45px;
}

.projectManagementScopeNumber {
    color: #d8e3ea;
    font-size: 24px;
    font-weight: 800;
}

.projectManagementScopeIcon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf4fb;
    font-size: 23px;
}

.projectManagementScopeIcon svg {
    fill: #2478b8;
    width: 40px;
    height: 40px;
}

.projectManagementScopeCard h3 {
    margin: 0 0 14px;
    color: #173653;
    font-size: 19px;
    line-height: 1.3;
}

.projectManagementScopeCard p {
    margin: 0;
    color: #71808d;
    font-size: 14px;
    line-height: 1.75;
}


/* =====================================================
   PROJE YÖNETİM SÜRECİ
===================================================== */

.projectManagementProcess {
    padding: 110px 0;
    background: #fff;
}

.projectManagementProcessGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.projectManagementProcessCard {
    position: relative;
    padding: 0 22px;
}

.processStepNumber {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 28px;
    border-radius: 50%;
    background: #173653;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.processLine {
    position: absolute;
    top: 31px;
    left: 100px;
    right: 0;
    height: 1px;
    background: #d9e3e9;
}

.projectManagementProcessCard:last-child .processLine {
    display: none;
}

.processLabel {
    display: block;
    margin-bottom: 9px;
    color: #2478b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.projectManagementProcessCard h3 {
    margin: 0 0 12px;
    color: #173653;
    font-size: 18px;
    line-height: 1.35;
}

.projectManagementProcessCard p {
    margin: 0;
    color: #71808d;
    font-size: 13px;
    line-height: 1.75;
}


/* =====================================================
   METRİKLER
===================================================== */

.projectManagementMetrics {
    padding: 90px 0;
    background: #173653;
}

.projectManagementMetricsGrid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 100px;
    align-items: center;
}

.projectManagementMetrics .sectionLabel {
    color: #5aa9e8;
}

.projectManagementMetrics h2 {
    color: #fff;
}

.projectManagementMetrics h2 span {
    color: #5aa9e8;
}

.projectManagementMetricsIntro p {
    max-width: 520px;
    margin: 25px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.8;
}

.projectManagementMetricList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.projectManagementMetricItem {
    min-height: 145px;
    padding: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.projectManagementMetricItem:nth-child(2n) {
    border-right: 0;
}

.projectManagementMetricItem:nth-child(n + 3) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.projectManagementMetricItem strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 20px;
}

.projectManagementMetricItem span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.6;
}


/* =====================================================
   NEDEN ÇALIŞKANLAR
===================================================== */

.projectManagementWhy {
    padding: 110px 0;
    background: #f5f8fa;
}

.projectManagementWhyGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 85px;
    align-items: center;
}

.projectManagementWhyImage img {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.projectManagementWhyContent {
    max-width: 570px;
}

.projectManagementWhyContent h2 {
    margin-bottom: 22px;
}

.projectManagementWhyContent > p {
    margin: 0 0 35px;
    color: #687887;
    font-size: 16px;
    line-height: 1.8;
}

.projectManagementWhyList {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.projectManagementWhyItem {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.whyCheck {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2478b8;
}
.whyCheck svg {
    fill: #fff;
    width: 20px;
    height: 20px;
}

.projectManagementWhyItem h3 {
    margin: 0 0 6px;
    color: #173653;
    font-size: 16px;
}

.projectManagementWhyItem p {
    margin: 0;
    color: #74828e;
    font-size: 13px;
    line-height: 1.65;
}


/* =====================================================
   YAKLAŞIM
===================================================== */

.projectManagementApproach {
    padding: 110px 0;
    background: #fff;
}

.projectManagementApproachHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 80px;
    align-items: end;
    margin-bottom: 60px;
}

.projectManagementApproachHeader > p {
    margin: 0;
    color: #687887;
    font-size: 15px;
    line-height: 1.8;
}

.projectManagementApproachGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #dce5eb;
    border-bottom: 1px solid #dce5eb;
}

.projectManagementApproachCard {
    min-height: 265px;
    padding: 35px 28px;
    border-right: 1px solid #dce5eb;
}

.projectManagementApproachCard:last-child {
    border-right: 0;
}

.projectManagementApproachCard > span {
    display: block;
    margin-bottom: 55px;
    color: #2478b8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.projectManagementApproachCard h3 {
    margin: 0 0 13px;
    color: #173653;
    font-size: 18px;
}

.projectManagementApproachCard p {
    margin: 0;
    color: #71808d;
    font-size: 13px;
    line-height: 1.75;
}


/* =====================================================
   ALT BİLGİ
===================================================== */

.projectManagementBottom {
    padding: 100px 0;
    background: #f5f8fa;
}

.projectManagementBottomBox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 70px;
    align-items: center;
    padding: 65px 70px;
    background: #fff;
}

.projectManagementBottomBox h2 {
    margin-bottom: 20px;
}

.projectManagementBottomBox p {
    max-width: 620px;
    margin: 0;
    color: #6e7e8b;
    font-size: 15px;
    line-height: 1.8;
}

.projectManagementBottomSide {
    padding-left: 40px;
    border-left: 1px solid #d7e1e8;
}

.projectManagementBottomSide span {
    display: block;
    margin-bottom: 15px;
    color: #2478b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.projectManagementBottomSide strong {
    color: #173653;
    font-size: 27px;
    line-height: 1.25;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .projectManagementScopeGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .projectManagementProcessGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 50px;
    }

    .projectManagementProcessCard:nth-child(3) .processLine,
    .projectManagementProcessCard:nth-child(5) .processLine {
        display: none;
    }

    .projectManagementApproachGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .projectManagementApproachCard:nth-child(2) {
        border-right: 0;
    }

    .projectManagementApproachCard:nth-child(-n + 2) {
        border-bottom: 1px solid #dce5eb;
    }

    .projectManagementMetricsGrid {
        gap: 60px;
    }
}


@media (max-width: 850px) {

    .projectManagementHero {
        min-height: 500px;
    }

    .projectManagementIntroGrid,
    .projectManagementWhyGrid,
    .projectManagementMetricsGrid,
    .projectManagementApproachHeader {
        grid-template-columns: 1fr;
    }

    .projectManagementIntroGrid,
    .projectManagementWhyGrid {
        gap: 50px;
    }

    .projectManagementIntroImage img {
        height: 470px;
    }

    .projectManagementWhyImage img {
        height: 500px;
    }

    .projectManagementMetricsGrid {
        gap: 50px;
    }

    .projectManagementApproachHeader {
        gap: 25px;
    }

    .projectManagementBottomBox {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px;
    }

    .projectManagementBottomSide {
        padding-left: 0;
        padding-top: 30px;
        border-left: 0;
        border-top: 1px solid #d7e1e8;
    }
}


@media (max-width: 600px) {

    .projectManagementContainer {
        width: min(92%, 1150px);
    }

    .projectManagementHero {
        min-height: 470px;
        background-position: 60% center;
    }

    .projectManagementHeroOverlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 28, 47, 0.94),
                rgba(8, 28, 47, 0.70)
            );
    }

    .projectManagementHeroContent h1 {
        font-size: 39px;
    }

    .projectManagementHeroContent p {
        font-size: 14px;
        line-height: 1.7;
    }

    .projectManagementIntro,
    .projectManagementScope,
    .projectManagementProcess,
    .projectManagementWhy,
    .projectManagementApproach {
        padding: 75px 0;
    }

    .projectManagementMetrics {
        padding: 75px 0;
    }

    .projectManagementPage h2 {
        font-size: 32px;
    }

    .sectionHeading {
        margin-bottom: 40px;
    }

    .projectManagementIntroImage img {
        height: 390px;
    }

    .projectManagementBadge {
        right: 15px;
        bottom: 20px;
    }

    .projectManagementScopeGrid {
        grid-template-columns: 1fr;
    }

    .projectManagementScopeCard {
        min-height: auto;
    }

    .projectManagementProcessGrid {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .projectManagementProcessCard {
        padding: 0;
    }

    .projectManagementProcessCard .processLine {
        display: none;
    }

    .projectManagementMetricList {
        grid-template-columns: 1fr;
    }

    .projectManagementMetricItem {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .projectManagementMetricItem:nth-child(2n) {
        border-right: 0;
    }

    .projectManagementMetricItem:last-child {
        border-bottom: 0;
    }

    .projectManagementWhyImage img {
        height: 390px;
    }

    .projectManagementWhyList {
        gap: 22px;
    }

    .projectManagementApproachGrid {
        grid-template-columns: 1fr;
    }

    .projectManagementApproachCard {
        min-height: auto;
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid #dce5eb;
    }

    .projectManagementApproachCard:last-child {
        border-bottom: 0;
    }

    .projectManagementApproachCard > span {
        margin-bottom: 25px;
    }

    .projectManagementBottom {
        padding: 70px 0;
    }

    .projectManagementBottomBox {
        padding: 35px 25px;
    }

    .projectManagementBottomSide strong {
        font-size: 24px;
    }

}

/* =====================================================
   MİMARLIK & İÇ MİMARLIK SAYFASI
===================================================== */

.architecturePage {
    width: 100%;
    overflow: hidden;
}

.architectureContainer {
    width: min(1150px, 90%);
    margin: 0 auto;
}


/* =====================================================
   HERO
===================================================== */

.architectureHero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    background-image: url("../img/hizmetler/mimar-hero.jpg");
    background-size: cover;
    background-position: center;
    isolation: isolate;
}

.architectureHeroOverlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8, 28, 47, 0.93) 0%,
            rgba(8, 28, 47, 0.70) 48%,
            rgba(8, 28, 47, 0.25) 100%
        );
    z-index: -1;
}

.architectureHeroContent {
    max-width: 690px;
    color: #fff;
}

.architectureHeroContent .sectionLabel {
    margin-bottom: 22px;
    color: #5aa9e8;
}

.architectureHeroContent h1 {
    margin: 0;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -1.5px;
}

.architectureHeroContent h1 strong {
    display: block;
    font-weight: 700;
    color: #fff;
}

.architectureHeroContent p {
    max-width: 600px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.8;
}


/* =====================================================
   GENEL BAŞLIKLAR
===================================================== */

.architecturePage .sectionLabel {
    display: block;
    margin-bottom: 16px;
    color: #2478b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.architecturePage h2 {
    margin: 0;
    color: #173653;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -1px;
}

.architecturePage h2 span {
    color: #2478b8;
}

.architecturePage .sectionHeading {
    max-width: 720px;
    margin-bottom: 60px;
}

.architecturePage .sectionHeading p {
    max-width: 630px;
    margin: 22px 0 0;
    color: #687887;
    font-size: 16px;
    line-height: 1.8;
}


/* =====================================================
   INTRO
===================================================== */

.architectureIntro {
    padding: 110px 0;
    background: #fff;
}

.architectureIntroGrid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 80px;
    align-items: center;
}

.architectureIntroContent {
    max-width: 560px;
}

.architectureIntroContent h2 {
    margin-bottom: 28px;
}

.architectureIntroContent p {
    margin: 0 0 17px;
    color: #667684;
    font-size: 16px;
    line-height: 1.85;
}

.architectureIntroContent p:last-child {
    margin-bottom: 0;
}

.architectureIntroImage {
    position: relative;
}

.architectureIntroImage img {
    display: block;
    width: 100%;
    height: 560px;
    object-fit: cover;
}

.architectureBadge {
    position: absolute;
    right: -25px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 175px;
    padding: 22px 25px;
    background: #173653;
    color: #fff;
}

.architectureBadge strong {
    font-size: 34px;
    line-height: 1;
}

.architectureBadge span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =====================================================
   HİZMETLER
===================================================== */

.architectureServices {
    padding: 110px 0;
    background: #f5f8fa;
}

.architectureServicesGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.architectureServiceCard {
    background: #fff;
    border: 1px solid #e5edf2;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.architectureServiceCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(23, 54, 83, 0.10);
}

.architectureServiceImage {
    position: relative;
    height: 255px;
    overflow: hidden;
}

.architectureServiceImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.architectureServiceCard:hover .architectureServiceImage img {
    transform: scale(1.04);
}

.architectureServiceImage > span {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #173653;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.architectureServiceContent {
    padding: 30px;
}

.architectureServiceLabel {
    display: block;
    margin-bottom: 12px;
    color: #2478b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.architectureServiceContent h3 {
    margin: 0 0 13px;
    color: #173653;
    font-size: 20px;
    line-height: 1.3;
}

.architectureServiceContent p {
    margin: 0;
    color: #71808d;
    font-size: 14px;
    line-height: 1.75;
}


/* =====================================================
   TASARIM FELSEFESİ
===================================================== */

.architecturePhilosophy {
    padding: 110px 0;
    background: #fff;
}

.architecturePhilosophyGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 85px;
    align-items: center;
}

.architecturePhilosophyImage img {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.architecturePhilosophyContent {
    max-width: 570px;
}

.architecturePhilosophyContent h2 {
    margin-bottom: 22px;
}

.architecturePhilosophyContent > p {
    margin: 0 0 38px;
    color: #687887;
    font-size: 16px;
    line-height: 1.8;
}

.architecturePhilosophyItems {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.architecturePhilosophyItem {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 18px;
    align-items: start;
}

.philosophyNumber {
    color: #2478b8;
    font-size: 12px;
    font-weight: 800;
    padding-top: 3px;
}

.architecturePhilosophyItem h3 {
    margin: 0 0 7px;
    color: #173653;
    font-size: 17px;
}

.architecturePhilosophyItem p {
    margin: 0;
    color: #74828e;
    font-size: 13px;
    line-height: 1.7;
}


/* =====================================================
   SÜREÇ
===================================================== */

.architectureProcess {
    padding: 110px 0;
    background: #f5f8fa;
}

.architectureProcessGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.architectureProcessItem {
    position: relative;
    padding: 0 22px;
}

.architectureProcessNumber {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border-radius: 50%;
    background: #173653;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.architectureProcessItem::after {
    content: "";
    position: absolute;
    top: 32px;
    left: 100px;
    right: 0;
    height: 1px;
    background: #d7e2e9;
}

.architectureProcessItem:last-child::after {
    display: none;
}

.architectureProcessItem > span {
    display: block;
    margin-bottom: 9px;
    color: #2478b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.architectureProcessItem h3 {
    margin: 0 0 12px;
    color: #173653;
    font-size: 18px;
    line-height: 1.35;
}

.architectureProcessItem p {
    margin: 0;
    color: #71808d;
    font-size: 13px;
    line-height: 1.75;
}


/* =====================================================
   YAKLAŞIM
===================================================== */

.architectureApproach {
    padding: 110px 0;
    background: #173653;
}

.architectureApproach .sectionLabel {
    color: #5aa9e8;
}

.architectureApproach h2 {
    color: #fff;
}

.architectureApproach h2 span {
    color: #5aa9e8;
}

.architectureApproachHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: 80px;
    align-items: end;
    margin-bottom: 60px;
}

.architectureApproachHeader > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.8;
}

.architectureApproachGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.architectureApproachCard {
    min-height: 260px;
    padding: 35px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.architectureApproachCard:last-child {
    border-right: 0;
}

.architectureApproachCard > span {
    display: block;
    margin-bottom: 55px;
    color: #5aa9e8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.architectureApproachCard h3 {
    margin: 0 0 13px;
    color: #fff;
    font-size: 18px;
}

.architectureApproachCard p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    line-height: 1.75;
}


/* =====================================================
   ALT BİLGİ
===================================================== */

.architectureBottom {
    padding: 100px 0;
    background: #fff;
}

.architectureBottomBox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 70px;
    align-items: center;
    padding: 65px 70px;
    background: #f2f6f9;
}

.architectureBottomBox h2 {
    margin-bottom: 20px;
}

.architectureBottomBox p {
    max-width: 620px;
    margin: 0;
    color: #6e7e8b;
    font-size: 15px;
    line-height: 1.8;
}

.architectureBottomSide {
    padding-left: 40px;
    border-left: 1px solid #d7e1e8;
}

.architectureBottomSide span {
    display: block;
    margin-bottom: 15px;
    color: #2478b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.architectureBottomSide strong {
    color: #173653;
    font-size: 27px;
    line-height: 1.25;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .architectureServicesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .architectureProcessGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 50px;
    }

    .architectureProcessItem:nth-child(3)::after,
    .architectureProcessItem:nth-child(5)::after {
        display: none;
    }

    .architectureApproachGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .architectureApproachCard:nth-child(2) {
        border-right: 0;
    }

    .architectureApproachCard:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
}


@media (max-width: 850px) {

    .architectureHero {
        min-height: 500px;
    }

    .architectureIntroGrid,
    .architecturePhilosophyGrid,
    .architectureApproachHeader {
        grid-template-columns: 1fr;
    }

    .architectureIntroGrid,
    .architecturePhilosophyGrid {
        gap: 50px;
    }

    .architectureIntroImage img {
        height: 470px;
    }

    .architecturePhilosophyImage img {
        height: 500px;
    }

    .architectureApproachHeader {
        gap: 25px;
    }

    .architectureBottomBox {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px;
    }

    .architectureBottomSide {
        padding-left: 0;
        padding-top: 30px;
        border-left: 0;
        border-top: 1px solid #d7e1e8;
    }
}


@media (max-width: 600px) {

    .architectureContainer {
        width: min(92%, 1150px);
    }

    .architectureHero {
        min-height: 470px;
        background-position: 60% center;
    }

    .architectureHeroOverlay {
        background:
            linear-gradient(
                90deg,
                rgba(8, 28, 47, 0.94),
                rgba(8, 28, 47, 0.70)
            );
    }

    .architectureHeroContent h1 {
        font-size: 39px;
    }

    .architectureHeroContent p {
        font-size: 14px;
        line-height: 1.7;
    }

    .architectureIntro,
    .architectureServices,
    .architecturePhilosophy,
    .architectureProcess,
    .architectureApproach {
        padding: 75px 0;
    }

    .architecturePage h2 {
        font-size: 32px;
    }

    .architecturePage .sectionHeading {
        margin-bottom: 40px;
    }

    .architectureIntroImage img {
        height: 390px;
    }

    .architectureBadge {
        right: 15px;
        bottom: 20px;
    }

    .architectureServicesGrid {
        grid-template-columns: 1fr;
    }

    .architectureServiceImage {
        height: 240px;
    }

    .architecturePhilosophyImage img {
        height: 390px;
    }

    .architecturePhilosophyItems {
        gap: 22px;
    }

    .architectureProcessGrid {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .architectureProcessItem {
        padding: 0;
    }

    .architectureProcessItem::after {
        display: none;
    }

    .architectureApproachGrid {
        grid-template-columns: 1fr;
    }

    .architectureApproachCard {
        min-height: auto;
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .architectureApproachCard:last-child {
        border-bottom: 0;
    }

    .architectureApproachCard > span {
        margin-bottom: 25px;
    }

    .architectureBottom {
        padding: 70px 0;
    }

    .architectureBottomBox {
        padding: 35px 25px;
    }

    .architectureBottomSide strong {
        font-size: 24px;
    }

}