@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-Thin.woff2') format('woff2');
    font-display: swap;
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-ThinItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-ExtraLight.woff2') format('woff2');
    font-display: swap;
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-ExtraLightItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-Light.woff2') format('woff2');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-LightItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-Regular.woff2') format('woff2');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-Italic.woff2') format('woff2');
    font-display: swap;
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-Medium.woff2') format('woff2');
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-MediumItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-SemiBold.woff2') format('woff2');
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-SemiBoldItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-Bold.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-BoldItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-ExtraBold.woff2') format('woff2');
    font-display: swap;
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-ExtraBoldItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-Black.woff2') format('woff2');
    font-display: swap;
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('Fonts/Raleway-BlackItalic.woff2') format('woff2');
    font-display: swap;
    font-weight: 900;
    font-style: italic;
}

:root {
    --acik-renk: #9bbbf9;
    --orta-renk: #34519b;
    --koyu-renk: #182752;
    /* Yükseklik birimi. 16:9 olmayan masaüstü ekranlarda 0.5625vw olur (bkz. RESPONSIVE 1). */
    --vh: 1vh;
}

html {
    scrollbar-gutter: stable;
}

body {
    font-family: 'Raleway', Arial, sans-serif;
}

/*--------------------MASTER PAGE--------------------*/
.wrapper {
    width: 100vw;
    height: 99.5svh;
    padding: 0;
}

/* İç sayfaların header'ı. Ana sayfada header'a ayrıca "header-main" eklenir (MainPage.aspx.cs)
   ve bu kurallar uygulanmaz; ana sayfa .header-main kurallarını kullanır. */
.header:not(.header-main) {
    position: relative;
    width: 100vw;
    height: calc(42.5 * var(--vh));
    overflow: hidden;
}

.header-main {
    position: relative;
    width: 100vw;
    aspect-ratio: 1600 / 936;
    height: auto; /* ihtiyaca göre */
    max-height: 99.5svh; /* ihtiyaca göre */
}

.header-bg {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(99.5 * var(--vh));
    background-image: url('Content/gozde_anasayfa_gorsel.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.header-bg-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('Content/gozde_anasayfa_gorsel.webp');
    background-size: 100vw 100%;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 1;
}

.header-content {
    position: relative;
    padding-top: calc(5.2 * var(--vh));
    height: calc(16.5 * var(--vh));
    z-index: 3;
    /* Burada navbar ve diğer içerikler etkilenmez */
}

.header:not(.header-main) .header-bannertext, .header:not(.header-main) .header-social {
    display: none;
}

.container-fluid {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.navbar {
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
}



    .navbar .collapse.show,
    .navbar .collapse.collapsing {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }

@media (min-width: 992px) {
    .navbar .collapse {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    .navbar .collapse {
        display: none;
    }

    .navbar-toggler {
        position: relative;
        z-index: 1060;
    }

    /* Açık menü paneli: yanlardan 10vw, üstten/alttan 5vh boşluklu.
       (375x812 gibi tipik bir telefonda 10vw ≈ 5vh ≈ 38-40px, yani dört kenar eşit görünür.)
       .collapsing: Bootstrap'in açılış animasyonu sırasında panel yerinden kaymasın diye aynı konum verilir. */
    .navbar .collapse.show,
    .navbar .collapsing {
        display: flex;
        position: fixed;
        top: 5vh;
        bottom: 5vh;
        left: 10vw;
        right: 10vw;
        width: auto !important;
        height: auto !important;
        padding: 7vh 6vw 5vh;
        background-color: var(--koyu-renk);
        border-radius: 4vw;
        /* Panelin dışını karartır; dışarı tıklayınca menü kapanır (Script.js) */
        box-shadow: 0 0 0 100vmax rgba(10, 18, 40, 0.6);
        z-index: 1050;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
        transition: none;
    }

        .navbar .collapse.show .navbar-nav,
        .navbar .collapsing .navbar-nav {
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: auto;
            padding-right: 0;
            gap: 4vh;
        }

        .navbar .collapse.show .nav-center,
        .navbar .collapsing .nav-center {
            position: static;
            min-width: 0;
            width: 100%;
            height: auto;
            flex-direction: column;
            justify-content: center;
            gap: 3.2vh;
        }

        /* Yazı boyutu hem genişliğe hem yüksekliğe göre ölçeklenir:
           dar telefonda 6vw, yatay telefonda (alçak ekran) 4.2vh sınırı devreye girer. */
        .navbar .collapse.show .nav-link,
        .navbar .collapsing .nav-link {
            color: #fff;
            font-size: clamp(18px, min(6vw, 4.2vh), 30px);
            font-weight: 600;
            letter-spacing: 0.02em;
            height: auto;
        }

        .navbar .collapse.show .navbar-brand,
        .navbar .collapsing .navbar-brand {
            order: -1;
            margin-bottom: 2vh;
        }

        /* Logo oranı 2953x1181 (≈2.5:1). Alçak ekranda yüksekliği 10vh'yi geçmesin. */
        .navbar .collapse.show .brand-logo,
        .navbar .collapsing .brand-logo {
            width: min(45vw, 25vh);
        }

        .navbar .collapse.show .nav-link-language,
        .navbar .collapsing .nav-link-language {
            margin-left: 0;
            margin-top: 1vh;
            padding: 1vh 4vw !important;
            border: 1px solid var(--acik-renk);
            border-radius: 100px;
            color: var(--acik-renk);
            font-size: clamp(14px, min(4.2vw, 3vh), 20px);
        }

    /* Menü açıkken hamburger butonu panelin sağ üst köşesinde "X" (kapat) butonuna dönüşür */
    .navbar-toggler[aria-expanded="true"] {
        position: fixed;
        top: calc(5vh + 2vw);
        right: calc(10vw + 2vw);
        margin: 0;
        border-color: transparent;
    }

        .navbar-toggler[aria-expanded="true"]:focus {
            box-shadow: none;
        }

        .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239bbbf9'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
            background-size: 55%;
            filter: none;
        }

    /* Menü açıkken arka plandaki sayfa kaymasın */
    body.menu-open,
    body:has(.navbar .collapse.show) {
        overflow: hidden;
    }
}

.navbar-toggler {
    width: 7vw;
    height: 7vw;
    padding: 0.5vw;
    border: 0.15vw solid var(--acik-renk);
    border-radius: 0.4vw;
    background-color: transparent;
    color: var(--acik-renk);
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2vw rgba(155, 187, 249, 0.5);
    }

.navbar-toggler-icon {
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(78%) sepia(37%) saturate(1000%) hue-rotate(190deg) brightness(103%) contrast(96%);
}

.navbar-brand {
    margin: 0;
    padding: 0;
}

.brand-logo {
    width: 20.5vw;
}

.navbar::before {
    content: "";
}

.navbar-nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100%;
    padding-right: 3.3vw;
}

.nav-center {
    min-width: 63.2vw;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-link {
    height: calc(7 * var(--vh));
    padding: 0 !important;
    color: var(--acik-renk);
    font-size: 1.75vw;
    font-weight: 500;
    display: flex;
    justify-content: center;
}

/* Açık olan sayfanın menü linki (MasterPage.Master.cs > NavLinkClass).
   Seçici Bootstrap'in .navbar-nav .nav-link.active kuralını (beyaz renk) geçecek güçte. */
.navbar .nav-center .nav-link.active {
    color: var(--acik-renk);
    font-weight: 700;
}

/* TR | ENG düğmesi: seçili dil kalın */
.nav-link-language {
    gap: .35em;
    margin-left: auto;
    font-size: 1.4vw;
    height: calc(6 * var(--vh));
}

    .nav-link-language a {
        color: inherit;
        text-decoration: none;
    }

        .nav-link-language a.active {
            font-weight: 700;
        }

.header-bannertext {
    position: absolute;
    display: flex;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    width: 30vw;
    box-sizing: border-box;
    z-index: 2;
}

    .header-bannertext img {
        width: 100%;
        height: auto;
        margin-bottom: calc(2.5 * var(--vh));
    }

.header-main .header-social {
    position: absolute;
    display: flex;
    gap: 0.7vw;
    bottom: 4vh;
    left: 45.5vw;
    z-index: 2;
}

    .header-main .header-social #facebook,
    .header-main .header-social #instagram,
    .header-main .header-social #linkedin {
        width: 2.76vw;
        height: auto;
    }

.footer {
    width: 100vw;
    height: calc(68.52 * var(--vh));
}

    .footer .container-fluid {
        display: flex;
    }

    .footer .footer-left {
        display: flex;
        flex-direction: row;
        width: 68vw;
        height: 100%;
        background-color: var(--acik-renk);
        z-index: 2;
    }

    .footer .footer-logosocial {
        display: flex;
        flex-direction: column;
        width: 3.1vw;
        height: calc(49.2 * var(--vh));
        margin-left: 3.5vw;
        margin-top: calc(3.5 * var(--vh));
    }

        .footer .footer-logosocial .footer-logo {
            display: flex;
            width: 2.9vw;
            height: calc(25.5 * var(--vh));
        }

        .footer .footer-logosocial img {
            width: 100%;
            height: auto;
        }

    .footer .footer_social {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.7vw;
        margin-top: calc(10.1 * var(--vh));
        width: 3.1vw;
    }

        .footer .footer_social #footer_facebook,
        .footer .footer_social #footer_instagram,
        .footer .footer_social #footer_linkedin {
            width: 2.1vw;
            height: auto;
        }

.footer-column-divider {
    display: flex;
    flex-shrink: 0;
    width: 7.55vw;
    height: calc(68.52 * var(--vh));
}

.footer .footer-orta {
    display: flex;
    flex-direction: column;
    width: 53.85vw;
    height: 100%;
    z-index: 2;
}

.footer .footer-contact {
    display: flex;
    justify-content: space-between;
    width: 50.13vw;
    height: calc(16 * var(--vh));
}

    .footer .footer-contact .phone,
    .footer .footer-contact .mail,
    .footer .footer-contact .location {
        display: flex;
        align-items: center;
        gap: 0.7vw;
    }

    .footer .footer-contact #phone,
    .footer .footer-contact #mail {
        width: 2.3vw;
    }

    .footer .footer-contact #location {
        width: 2vw;
    }

    .footer .footer-contact .phone-text,
    .footer .footer-contact .mail-text,
    .footer .footer-contact .location-text {
        font-size: 1.2vw;
        font-weight: 700;
    }

.footer .footer-left .footer-divider {
    width: 50.13vw;
    height: calc(0.1 * var(--vh));
    margin: 0;
    background-color: var(--orta-renk);
}

.footer .footer-link {
    display: flex;
    justify-content: space-between;
    width: 50.13vw;
    height: calc(37 * var(--vh));
    padding-top: calc(7.6 * var(--vh));
    z-index: 2;
}

    .footer .footer-link .footer-list {
        padding: 0;
        display: flex;
        width: 16.71vw;
        height: 100%;
    }

        .footer .footer-link .footer-list.hakkimizda {
            justify-content: flex-start;
        }

        .footer .footer-link .footer-list.sektorler {
            justify-content: flex-start;
        }

        .footer .footer-link .footer-list.projeler {
            padding-right: 1vw;
            justify-content: flex-end;
        }

        .footer .footer-link .footer-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .footer .footer-link .footer-list ul li {
                padding: 0 0 calc(1 * var(--vh)) 0;
            }

        .footer .footer-link .footer-list a {
            text-decoration: none;
            color: var(--koyu-renk);
            font-size: .9vw;
            font-weight: 600;
        }

        .footer .footer-link .footer-list .baslik {
            padding: 0 0 calc(3.5 * var(--vh)) 0;
        }

            .footer .footer-link .footer-list .baslik a {
                font-size: 1.3vw;
                font-weight: 700;
            }

.footer-copyright {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50.13vw;
    height: calc(12 * var(--vh));
    font-size: 1vw;
    color: var(--orta-renk);
}

.footer .footer-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32vw;
    height: 100%;
    background-color: var(--koyu-renk);
    color: #fff;
    z-index: 2;
}

    .footer .footer-right .motto {
        text-align: center;
        line-height: 1.2;
        margin-bottom: calc(3 * var(--vh));
    }

    .footer .footer-right p {
        width: 20.2vw;
        font-size: 1.5vw;
        font-weight: 700;
        font-style: italic;
    }

    .footer .footer-right .contact-link {
        display: flex;
        align-items: center;
        text-align: center;
        border-radius: 50%;
        border: 0.7vw solid var(--acik-renk);
        aspect-ratio: 1 / 1;
        width: 15.625vw;
    }

        .footer .footer-right .contact-link a {
            text-decoration: none;
            color: #fff;
        }

    .footer .footer-right h5 {
        font-size: 2.5vw;
        font-weight: 700;
        font-style: italic;
    }

/*--------------------MAİN PAGE--------------------*/

.main-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: calc(27 * var(--vh));
}

    .main-title h2 {
        font-size: 3.1vw;
        font-weight: 800;
        color: var(--koyu-renk);
    }

.main-sectors {
    display: flex;
    justify-content: center;
    gap: 2.7vw;
    width: 100vw;
    height: calc(30.1 * var(--vh));
}

    /* Sektör kartları: Ana sayfa (.main-sectors) ve Sektörler sayfası (.sectors) ortak */
    .main-sectors div,
    .sectors div {
        display: flex;
        flex-direction: column;
        width: 24.56vw;
        height: calc(30.1 * var(--vh));
        padding: calc(5.4 * var(--vh)) 2.5vw;
        border-radius: .7vw;
        color: var(--koyu-renk);
        box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
    }

    .main-sectors .main-construction,
    .main-sectors .main-digital-advertising,
    .sectors .construction,
    .sectors .digital-advertising {
        background-color: #eff3f9;
    }

    .main-sectors .main-tourism-bg,
    .sectors .tourism-bg {
        position: absolute;
        background: url('Content/bright-shot-new-buildings-neighborhood.webp') center;
        background-size: cover;
        border-radius: .7vw;
        z-index: 1;
    }

    .main-sectors .main-tourism,
    .sectors .tourism {
        position: relative;
        z-index: 2;
        color: #fff;
    }

.main-tourism-bg::after,
.tourism-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #10408a; /* Yarı saydam mavi */
    opacity: 1;
    mix-blend-mode: multiply;
    z-index: 2;
    pointer-events: none; /* İçerik tıklanabilir kalır */
    border-radius: .7vw;
}

.main-sectors h2,
.sectors h2 {
    font-size: 1.9vw;
    font-weight: 800;
    margin-bottom: calc(4.55 * var(--vh));
}

.main-sectors p,
.sectors p {
    font-size: 1.35vw;
    font-weight: 500;
    word-spacing: -0.15vw;
    line-height: 1.5;
}

.main-aboutus {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: calc(74 * var(--vh));
    padding: calc(12.3 * var(--vh)) 10.3vw;
    margin: 0;
}

    .main-aboutus .main-aboutus-letter {
        display: flex;
        flex-direction: column;
        width: 50vw;
        height: calc(49 * var(--vh));
        padding: 0;
        margin: 0 3.5vw 0 0;
    }

    .main-aboutus h2 {
        font-size: 3.2vw;
        font-weight: 700;
        color: var(--koyu-renk);
        padding: 0;
        margin: 0;
        margin-bottom: calc(3.75 * var(--vh));
    }

    .main-aboutus p {
        width: 45.5vw;
        height: calc(33 * var(--vh));
        font-size: 1.3vw;
        font-weight: 500;
        word-spacing: -0.15vw;
        line-height: 1.7;
        color: var(--koyu-renk);
        text-align: justify;
        padding: 0;
        margin: 0;
    }

.main-aboutus-letter a {
    text-decoration: none;
    color: var(--koyu-renk);
    font-size: 1.3vw;
    font-weight: 700;
    font-style: italic;
    margin-top: calc(1.5 * var(--vh));
}

.main-aboutus-picture {
    background-image: url('Content/modern-business-center-hongkong.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: .7vw;
    width: 26.5vw;
    height: calc(29.5 * var(--vh));
    margin: calc(11.5 * var(--vh)) 0 0 0;
}

/*--------------------ABOUT US--------------------*/

.wrapper-aboutus {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(230 * var(--vh));
    padding: 0;
}

.aboutus-title {
    position: relative;
    display: flex;
    justify-content: center;
    width: 31.5vw;
    height: calc(20 * var(--vh));
    background-color: #fff;
    color: var(--koyu-renk);
    border-radius: 2vw;
    z-index: 4;
    margin: 0 auto;
    margin-top: calc(-10 * var(--vh));
}

    .aboutus-title h1 {
        font-size: 4vw;
        font-weight: 800;
        margin-top: calc(3 * var(--vh));
    }

.aboutus-text-picture {
    display: flex;
    flex-direction: row;
    width: 89.5vw;
    height: calc(103 * var(--vh));
    margin-top: calc(2.5 * var(--vh));
    margin-left: 10.5vw;
    padding: 0;
}

.aboutus-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 53.9vw;
    height: 100%;
}

    .aboutus-text p {
        font-size: 1.3vw;
        font-weight: 500;
        word-spacing: -0.15vw;
        line-height: 1.6;
        color: var(--koyu-renk);
        text-align: justify;
        padding: 0;
        margin: 0;
    }

        .aboutus-text p:nth-last-child(2) {
            word-spacing: -0.03vw;
        }

.aboutus-picture {
    display: flex;
    flex-direction: column;
    width: 30.45vw;
    height: 100%;
    margin-left: auto;
    padding-top: calc(.9 * var(--vh));
    gap: calc(8 * var(--vh));
}

    .aboutus-picture img {
        border-radius: .7vw;
    }

        .aboutus-picture img:first-child {
            height: calc(38.5 * var(--vh));
        }

        .aboutus-picture img:last-child {
            height: calc(55.5 * var(--vh));
        }

.aboutus-visionmission {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: calc(30 * var(--vh));
    margin-top: calc(15 * var(--vh));
    gap: 3.3vw;
}

/* Footer'daki Vizyon / Misyon linkleriyle (#vision, #mission) gelindiğinde kart ekranın tam kenarına yapışmasın */
.aboutus-visionmission .vision, .aboutus-visionmission .mission {
    scroll-margin-top: 32px;
}

    .aboutus-visionmission .vision,
    .aboutus-visionmission .mission {
        display: flex;
        flex-direction: column;
        width: 38.1vw;
        height: calc(28.8 * var(--vh));
        background-color: #eff3f9;
        color: var(--koyu-renk);
        margin: 0;
        padding: calc(3.5 * var(--vh)) 5.6vw;
        border-radius: .7vw;
        box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
    }

    .aboutus-visionmission h2 {
        font-size: 2.4vw;
        font-weight: 800;
        text-align: center;
        margin-bottom: calc(1.5 * var(--vh));
    }

    .aboutus-visionmission p {
        font-size: 1.3vw;
        font-weight: 500;
        text-align: justify;
        text-align-last: center;
        word-spacing: -0.15vw;
        line-height: 1.6;
    }

.aboutus-partners-title {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: calc(10 * var(--vh));
    color: var(--koyu-renk);
    margin-top: calc(9 * var(--vh));
    z-index: 4;
}

    .aboutus-partners-title h2 {
        display: flex;
        font-size: 3.5vw;
        font-weight: 800;
        margin-top: calc(3 * var(--vh));
    }

.aboutus-partners {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: calc(30 * var(--vh));
    margin-top: calc(6.3 * var(--vh));
    margin-bottom: calc(3.5 * var(--vh));
    gap: 8.5vw;
}

    .aboutus-partners img {
        display: flex;
        width: 14.5vw;
        height: 14.5vw;
        padding: 0;
        margin: 0;
        border: 0.3vw solid var(--koyu-renk);
        border-radius: .7vw;
    }

/*--------------------CONTACT--------------------*/

.wrapper-contact {
    display: flex;
    flex-direction: column;
    width: 100vw;
    /* Yükseklik içeriğe göre: form kutusu uzarsa footer'a binmez.
       Alttaki boşluk (haritayla footer arası), form ile harita arasındaki boşlukla aynıdır. */
    height: auto;
    padding: 0 0 calc(13.15 * var(--vh)) 0;
}

.contact-title {
    position: relative;
    display: flex;
    justify-content: center;
    width: 31.5vw;
    height: calc(20 * var(--vh));
    background-color: #fff;
    color: var(--koyu-renk);
    border-radius: 2vw;
    z-index: 4;
    margin: 0 auto;
    margin-top: calc(-10 * var(--vh));
}

    .contact-title h1 {
        font-size: 4vw;
        font-weight: 800;
        margin-top: calc(3 * var(--vh));
    }

.contact-content {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 100vw;
    height: auto;
    margin: calc(13.15 * var(--vh)) 0 0 0;
    padding: 0;
    gap: 7.5vw;
}

.contact-info {
    display: flex;
    flex-direction: column;
    width: 26.5vw;
    height: calc(67 * var(--vh));
    margin: 0;
    color: var(--koyu-renk);
}

    .contact-info p {
        font-size: 1.57vw;
        font-weight: 700;
        font-style: italic;
        margin-bottom: calc(11.5 * var(--vh));
    }

    .contact-info .phone,
    .contact-info .mail,
    .contact-info .location {
        display: flex;
        flex-direction: row;
        gap: 0.7vw;
        margin-bottom: calc(2.4 * var(--vh));
    }

    .contact-info #contact_phone,
    .contact-info #contact_mail,
    .contact-info #contact_location {
        width: 2.3vw;
        align-self: flex-start;
    }

    .contact-info .phone-text,
    .contact-info .mail-text,
    .contact-info .location-text {
        width: 23.3vw;
        font-size: 1.2vw;
        font-weight: 700;
    }

    .contact-info .contact-social #contact_facebook,
    .contact-info .contact-social #contact_instagram,
    .contact-info .contact-social #contact_linkedin {
        width: 3.2vw;
        height: auto;
    }

.contact-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #eff3f9;
    color: var(--koyu-renk);
    width: 42.3vw;
    /* Form elemanları (Bootstrap) px tabanlı: küçük ekranlarda kutu gerekirse uzar */
    min-height: calc(67 * var(--vh));
    margin: 0;
    padding: calc(8 * var(--vh)) 5.3vw;
    border-radius: .7vw;
    font-size: 1.1vw;
    font-weight: 700;
}

    /* "Gönder" butonu: sitedeki "Detaylı Bilgi" / "Projeler" butonlarıyla aynı görünüm.
       Renkler Bootstrap değişkenleriyle verilir ki üzerine gelince/tıklayınca Bootstrap mavisine dönmesin. */
    .contact-form .btn-primary {
        --bs-btn-color: var(--orta-renk);
        --bs-btn-bg: var(--acik-renk);
        --bs-btn-border-color: transparent;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--orta-renk);
        --bs-btn-hover-border-color: transparent;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--koyu-renk);
        --bs-btn-active-border-color: transparent;
        --bs-btn-focus-shadow-rgb: 155, 187, 249;
        font-size: 1.4vw;
        font-weight: 600;
        font-style: italic;
        padding: calc(1 * var(--vh)) 2vw;
        border-radius: .5vw;
        box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
    }

    /* Telefon ülke kodu: kutuda bayrak + kod ve küçük bir ok görünür. Üstüne şeffaf bir liste (select) yayılır;
       tıklanınca ülke adlarıyla açılır. Klavyeyle de seçilebilir; odaklanınca kutu diğer alanlar gibi çerçevelenir. */
    .contact-form .phone-country {
        position: relative;
        gap: .4em;
        cursor: pointer;
    }

        .contact-form .phone-country::after {
            content: "";
            width: .42em;
            height: .42em;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: translateY(-25%) rotate(45deg);
        }

        .contact-form .phone-country:hover {
            background-color: #e9ecef;
        }

        .contact-form .phone-country:focus-within {
            z-index: 5;
            border-color: #86b7fe;
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        }

    .contact-form .phone-country-select {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
        /* iOS'ta 16px'ten küçük alana dokununca sayfa yakınlaşır */
        font-size: 16px;
    }

    /* Spam tuzağı (honeypot) alanı: ekranda görünmez, botlar doldurur */
    .contact-form .form-hp {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

/* Harita: üstteki bilgi + form bloğuyla aynı genişlikte (26.5 + 7.5 + 42.3 = 76.3vw) ve ortada.
   Ofis kartı haritanın sağında durur; solda Google'ın kendi yer kartı görünür. */
.contact-map {
    position: relative;
    width: 76.3vw;
    height: calc(58 * var(--vh));
    margin: calc(13.15 * var(--vh)) auto 0;
}

    .contact-map iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: .7vw;
        background-color: #eff3f9;
    }

.contact-map-card {
    position: absolute;
    top: 50%;
    right: 3vw;
    transform: translateY(-50%);
    width: 25vw;
    padding: 2.2vw 2.3vw;
    background-color: #fff;
    color: var(--koyu-renk);
    border-radius: .9vw;
    box-shadow: 0 1vw 2.6vw rgba(24, 39, 82, .22);
}

    .contact-map-card h2 {
        font-size: 1.75vw;
        font-weight: 800;
        margin: 0 0 1vw 0;
    }

.contact-map-row {
    display: flex;
    align-items: flex-start;
    gap: .9vw;
    margin: .7vw 0;
    font-size: 1vw;
    font-weight: 600;
}

    .contact-map-row svg {
        flex: none;
        width: 1.7vw;
        height: 1.7vw;
    }

    .contact-map-row small {
        display: block;
        font-size: .8vw;
        font-weight: 500;
        color: #5b6787;
    }

    .contact-map-row a {
        color: inherit;
        text-decoration: none;
    }

        .contact-map-row a:hover {
            text-decoration: underline;
        }

.contact-map-btn {
    display: inline-block;
    margin-top: 1.2vw;
    padding: .6vw 1.7vw;
    background-color: var(--acik-renk);
    color: var(--koyu-renk);
    border-radius: 999px;
    font-size: 1vw;
    font-weight: 700;
    text-decoration: none;
}

    .contact-map-btn:hover,
    .contact-map-btn:focus-visible {
        background-color: var(--orta-renk);
        color: #fff;
    }

/*--------------------SECTORS--------------------*/

.wrapper-sectors {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(100 * var(--vh));
    padding: 0;
}

.sectors {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.7vw;
    width: 100vw;
    height: calc(90 * var(--vh));
}

    .sectors a {
        text-decoration: none;
    }

/* Sektör kartlarının stilleri ANA SAYFA bölümünde (.main-sectors ile ortak) tanımlıdır. */

.wrapper-construction {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: calc(207.5 * var(--vh));
    padding: 0;
}

.sectors-title {
    position: relative;
    display: flex;
    justify-content: center;
    width: 31.5vw;
    height: calc(20 * var(--vh));
    background-color: #fff;
    color: var(--koyu-renk);
    border-radius: 2vw;
    z-index: 4;
    margin: 0 auto;
    margin-top: calc(-10 * var(--vh));
}

    /* İnşaat, Turizm ve Dijital Reklam sayfalarında bu kutudaki yazı H1 değil (<p class="h1">); sayfanın H1'i alt başlık */
    .sectors-title h1,
    .sectors-title .h1 {
        font-size: 4vw;
        font-weight: 800;
        margin-top: calc(3 * var(--vh));
    }

/*--------------------İNŞAAT--------------------*/

/* Sektör alt sayfalarının (İnşaat, Turizm, Dijital Reklam) ortak alt başlığı */
.construction-title,
.tourism-title,
.advertising-title {
    display: flex;
    justify-content: center;
    width: 100vw;
    height: calc(10 * var(--vh));
    color: var(--koyu-renk);
    z-index: 4;
}

    .construction-title h1,
    .tourism-title h1,
    .advertising-title h1 {
        display: flex;
        font-size: 2.8vw;
        font-weight: 700;
    }

.construction-content {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(187.5 * var(--vh));
}

/* Metin kutuya sığmazsa kutu uzar (Türkçe metin 1920x1080'de ~7px taşıyordu) */
.construction-textpicture {
    display: flex;
    flex-direction: row;
    width: 80vw;
    min-height: calc(37.5 * var(--vh));
    margin: calc(3 * var(--vh)) 0 0 10vw;
    gap: 4.2vw;
}

    .construction-textpicture .text {
        display: flex;
        flex-direction: column;
        width: 51vw;
        color: var(--koyu-renk);
    }

        .construction-textpicture .text h6 {
            font-size: 1.55vw;
            font-weight: 700;
            margin-bottom: calc(4.6 * var(--vh));
        }

        .construction-textpicture .text p {
            font-size: 1.3vw;
            font-weight: 500;
            text-align: justify;
            word-spacing: 0.22vw;
            line-height: 1.65;
            margin-bottom: calc(3.8 * var(--vh));
        }

            /* Son paragrafın alt boşluğu gereksiz; altında zaten kartların boşluğu var */
            .construction-textpicture .text p:last-child {
                margin-bottom: 0;
            }

    .construction-textpicture .picture {
        background-image: url('Content/construction-site.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 1vw;
        width: 24vw;
    }

.construction-card {
    display: flex;
    justify-content: center;
    width: 80vw;
    height: calc(42.8 * var(--vh));
    margin-top: calc(9.5 * var(--vh));
    margin-left: 10vw;
    gap: 3.3vw;
}

    .construction-card div {
        display: flex;
        flex-direction: column;
        width: 38vw;
        height: calc(42.8 * var(--vh));
        background-color: var(--koyu-renk);
        color: #fff;
        margin: 0;
        padding: calc(5 * var(--vh)) 3.2vw;
        border-radius: 1.8vw;
        box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
    }

    .construction-card h2 {
        font-size: 2.1vw;
        font-weight: 600;
        margin-bottom: calc(2.7 * var(--vh));
    }

    .construction-card p {
        font-size: 1.27vw;
        font-weight: 400;
        word-spacing: -0.05vw;
        line-height: 1.7;
        text-align: justify;
    }

/* Buton kutunun içinde kalacak şekilde: buton ve altındaki görsel önceki konumlarında */
.construction-projects {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 80vw;
    height: calc(6.25 * var(--vh));
    margin-top: calc(11.1 * var(--vh));
    margin-left: 10vw;
    padding-top: calc(1.25 * var(--vh));
}

    .construction-projects .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 27vw;
        height: calc(5 * var(--vh));
        background-color: var(--acik-renk);
        color: var(--orta-renk);
        font-size: 1.9vw;
        font-weight: 700;
        font-style: italic;
        margin: 0;
        padding: calc(2.1 * var(--vh)) 2vw;
        border: none;
        border-radius: .5vw;
        box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
    }

.construction-picture {
    background: url('Content/shanghai-urban-city-aerial-panorama-view-with-skyscrapers.webp') no-repeat center;
    background-size: cover;
    display: flex;
    width: 100vw;
    height: calc(49 * var(--vh));
    margin-top: calc(12.95 * var(--vh));
}

/*--------------------TURİZM--------------------*/

.wrapper-tourism {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: calc(125 * var(--vh));
    padding: 0;
}

.tourism-content {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(105 * var(--vh));
}

.tourism-textpicture {
    display: flex;
    flex-direction: row;
    width: 80vw;
    height: calc(49.2 * var(--vh));
    margin: calc(3 * var(--vh)) 0 0 10vw;
    gap: 4.2vw;
}

.tourism-text {
    display: flex;
    flex-direction: column;
    width: 39.5vw;
    height: calc(49.2 * var(--vh));
    color: var(--koyu-renk);
}

    .tourism-text p {
        font-size: 1.3vw;
        font-weight: 500;
        text-align: justify;
        line-height: 1.65;
        margin-bottom: calc(2.8 * var(--vh));
    }

.tourism-picture {
    display: flex;
    background-image: url('Content/name_gorsel.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1vw;
    width: 55vw;
    z-index: 4;
    margin: calc(-11 * var(--vh)) -13vw calc(-18 * var(--vh)) -9vw
}

/* .tourism-card stilleri DİJİTAL REKLAM bölümünde (.advertising-card ile ortak) tanımlıdır. */

.tourism-logo {
    background-image: url('Content/name-turizm-logo.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    justify-content: center;
    width: 29vw;
    height: calc(30 * var(--vh));
    margin: calc(7 * var(--vh)) auto 0 auto;
}

.tourism-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    height: calc(5.2 * var(--vh));
    margin-top: calc(-1 * var(--vh));
    margin-left: 10vw;
}

    .tourism-detail button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 14.5vw;
        height: calc(3 * var(--vh));
        background-color: var(--acik-renk);
        color: var(--orta-renk);
        font-size: 1.6vw;
        font-weight: 500;
        font-style: italic;
        margin: 0 0 calc(3.7 * var(--vh)) 0.2vw;
        padding: calc(2.1 * var(--vh)) 2vw;
        border: none;
        border-radius: .5vw;
        box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
    }


/*--------------------DİJİTAL REKLAM--------------------*/

.wrapper-advertising {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: calc(130 * var(--vh));
    padding: 0;
}

.advertising-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: calc(110 * var(--vh));
}

.advertising-textpicture {
    display: flex;
    flex-direction: row;
    width: 89.6vw;
    height: calc(45 * var(--vh));
    margin: calc(3 * var(--vh)) 0 0 10.4vw;
    gap: 4.8vw;
}

.advertising-text {
    display: flex;
    flex-direction: column;
    width: 39.5vw;
    height: calc(45.7 * var(--vh));
    color: var(--koyu-renk);
}

    .advertising-text p {
        font-size: 1.3vw;
        font-weight: 400;
        text-align: justify;
        line-height: 1.65;
        margin-bottom: calc(2.8 * var(--vh));
    }

.advertising-picture {
    display: flex;
    background-image: url('Content/colleagues-working-desk.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1vw 0 0 1vw;
    width: 45.3vw;
    height: calc(43 * var(--vh));
    z-index: 4;
}

/* Turizm ve Dijital Reklam sayfalarının ortak lacivert kartı.
   Not: .tourism-text p ve .advertising-text p kurallarından SONRA gelmeli ki kart içindeki yazıyı onlar ezmesin. */
.tourism-card,
.advertising-card {
    display: flex;
    flex-direction: column;
    width: 39.5vw;
    height: calc(20.3 * var(--vh));
    background-color: var(--koyu-renk);
    color: #fff;
    margin: 0 0 calc(3.7 * var(--vh)) 0;
    padding: calc(2.6 * var(--vh)) 2vw;
    border-radius: 1.8vw;
    box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
}

    .tourism-card p,
    .advertising-card p {
        font-size: 1.27vw;
        font-weight: 400;
        word-spacing: -0.05vw;
        line-height: 1.7;
        text-align: justify;
        margin: 0;
    }

.advertising-logo {
    background-image: url('Content/horose_logo_1080x1080.webp');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    width: 15vw;
    height: 15vw;
    margin-top: calc(9 * var(--vh));
}

.advertising-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14vw;
    height: calc(1 * var(--vh));
    background-color: var(--acik-renk);
    color: var(--orta-renk);
    font-size: 1.5vw;
    font-weight: 500;
    font-style: italic;
    margin: calc(7 * var(--vh)) 0 calc(3.7 * var(--vh)) 0;
    padding: calc(2.1 * var(--vh)) 2vw;
    border: none;
    border-radius: .5vw;
    box-shadow: 0 0 .8vw .4vw rgba(0, 0, 0, 0.15);
}

/* Açık mavi butonlar (Projeler, Detaylı Bilgi): üzerine gelince/tıklayınca
   Bootstrap mavisi yerine sitenin renkleri. "Gönder" butonu aynı renkleri değişkenlerle alır. */
.construction-projects .btn:hover,
.construction-projects .btn:focus-visible,
.tourism-detail button:hover,
.tourism-detail button:focus-visible,
.advertising-detail:hover,
.advertising-detail:focus-visible {
    background-color: var(--orta-renk);
    color: #fff;
}

.construction-projects .btn:active,
.tourism-detail button:active,
.advertising-detail:active {
    background-color: var(--koyu-renk);
    color: #fff;
}

/*--------------------PROJELER--------------------*/

.wrapper-projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    padding: 0 0 calc(18.6 * var(--vh)) 0;
}

.projects-title {
    position: relative;
    display: flex;
    justify-content: center;
    width: 31.5vw;
    height: calc(20 * var(--vh));
    background-color: #fff;
    color: var(--koyu-renk);
    border-radius: 2vw;
    z-index: 4;
    margin: 0 auto;
    margin-top: calc(-10 * var(--vh));
}

    .projects-title h1 {
        font-size: 4vw;
        font-weight: 800;
        margin-top: calc(3 * var(--vh));
    }

/* Üst bölüm: "KAKLIK ARTIK / DAHA GÖZDE" yazısı ve altındaki proje görseli */
.projects-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: calc(98.8 * var(--vh));
}

/* Proje görseli: üstü ve altı maskeyle şeffaflaşıp beyaz sayfaya karışır
   (beyaz bir katmanla örtmek, kenarlarda ince gri çizgi bırakıyordu).
   Şimdilik header'daki render kullanılıyor; tarayıcı önbelleğinde olduğundan ek indirme yok. */
.projects-render {
    position: absolute;
    top: calc(10.8 * var(--vh));
    left: 0;
    width: 100vw;
    height: calc(86.7 * var(--vh));
    background: url('Content/gozde_anasayfa_gorsel.webp') top center / 100vw auto no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 22%, #000 48%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 22%, #000 48%, #000 84%, transparent 100%);
    z-index: 1;
}

.projects-slogan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    color: var(--koyu-renk);
    z-index: 2;
}

    .projects-slogan-top {
        margin-top: calc(1.3 * var(--vh));
        font-size: 6.1vw;
        font-weight: 200;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    /* "DAHA GÖZDE": aşağı doğru şeffaflaşan, çizilmiş (SVG) dar harfler */
    .projects-slogan-bottom {
        width: 39.2vw;
        height: auto;
        margin-top: calc(1.6 * var(--vh));
    }

/* Gözde Yaşam logosu: beyaz PNG maske olarak kullanılıp lacivert boyanır */
.projects-logo {
    position: relative;
    width: 28.2vw;
    aspect-ratio: 1132 / 690;
    background-color: var(--koyu-renk);
    -webkit-mask: url('Content/gozde_yasam_logo.webp') center / contain no-repeat;
    mask: url('Content/gozde_yasam_logo.webp') center / contain no-repeat;
    z-index: 2;
}

/* Havadan görünüm. Content/projeler/kaklik-hava.webp eklenene kadar lacivert zemin görünür. */
.projects-aerial {
    position: relative;
    width: 100vw;
    height: calc(101.4 * var(--vh));
    margin-top: calc(1.7 * var(--vh));
    background:
        url('Content/projeler/kaklik-hava.webp') center / cover no-repeat,
        linear-gradient(160deg, #4a5f93 0%, #253764 50%, #142146 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 80%, transparent 100%);
}

/* "20 ADET / 2+1 DAİRELER": dört satır aynı genişlikte */
.projects-count {
    --count-w: 5.7vw;
    position: absolute;
    left: 18.3vw;
    top: calc(63.5 * var(--vh));
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--count-w);
    margin: 0;
    color: #fff;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 .5vw rgba(0, 0, 0, 0.35);
}

    .projects-count span {
        display: block;
    }

    /* Yazı boyutları her satırın genişliği --count-w olacak şekilde ölçülerek ayarlandı */
    .projects-count .count-number {
        font-size: calc(var(--count-w) * 0.837);
    }

    .projects-count .count-unit {
        width: 100%;
        margin-bottom: calc(var(--count-w) * 0.07);
        padding-bottom: calc(var(--count-w) * 0.06);
        border-bottom: max(1px, calc(var(--count-w) * 0.025)) solid #fff;
        font-size: calc(var(--count-w) * 0.384);
        text-align: center;
    }

    .projects-count .count-rooms {
        font-size: calc(var(--count-w) * 0.657);
    }

    .projects-count .count-type {
        margin-top: calc(var(--count-w) * 0.04);
        font-size: calc(var(--count-w) * 0.196);
        letter-spacing: 0.04em;
    }

    /* İngilizce: "UNITS" ve "APARTMENTS" daha uzun, aynı genişliğe sığması için küçültüldü */
    html[lang="en"] .projects-count .count-unit {
        font-size: calc(var(--count-w) * 0.329);
    }

    html[lang="en"] .projects-count .count-type {
        font-size: calc(var(--count-w) * 0.142);
    }

/* Özellikler: çizgiyle birbirine bağlı yuvarlak fotoğraflar */
.projects-features {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 5.2vw;
    margin: calc(-12.6 * var(--vh)) 0 0 0;
    padding: 0;
    list-style: none;
    z-index: 2;
}

    .projects-features::before {
        content: "";
        position: absolute;
        top: 6.67vw;
        left: 6.8vw;
        right: 6.8vw;
        height: .26vw;
        background-color: var(--acik-renk);
        z-index: -1;
    }

    .projects-features li {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 13.6vw;
    }

    .projects-features .feature-photo {
        width: 13.6vw;
        height: 13.6vw;
        border: .55vw solid var(--acik-renk);
        border-radius: 50%;
        background: #e9eef7 center / cover no-repeat;
        transition: border-color .2s;
    }

    .projects-features li:hover .feature-photo {
        border-color: var(--orta-renk);
    }

    /* Fotoğraflar eklenene kadar açık gri-mavi daire görünür */
    .projects-features .feature-salon {
        background-image: url('Content/projeler/ozellik-salon.webp');
    }

    .projects-features .feature-mutfak {
        background-image: url('Content/projeler/ozellik-mutfak.webp');
    }

    .projects-features .feature-banyo {
        background-image: url('Content/projeler/ozellik-banyo.webp');
    }

    .projects-features .feature-asansor {
        background-image: url('Content/projeler/ozellik-asansor.webp');
    }

    .projects-features p {
        margin: calc(3.1 * var(--vh)) 0 0 0;
        font-size: 1.5vw;
        font-weight: 500;
        line-height: 1.25;
        color: var(--koyu-renk);
        text-align: center;
        white-space: nowrap;
    }

/* =====================================================================
   RESPONSIVE
   Yukarıdaki tüm kurallar 1920x1080 (16:9) ekrana göre ayarlıdır ve
   DEĞİŞTİRİLMEMİŞTİR. Aşağıdaki media query'ler tam 16:9 ekranlarda
   (1920x1080, 2560x1440, 3840x2160 ...) hiç devreye girmez.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) MASAÜSTÜ - 16:9 OLMAYAN EKRANLAR
      (ör. tarayıcı penceresinde 1920x945, 1366x657, 1536x730,
       ultrawide 2560x1080 / 3440x1440, 16:10 ve 4:3 ekranlar)
   Sorun: Yazılar vw ile, kutular vh ile ölçekleniyor. Ekran oranı 16:9'dan
   saptığında yazı kutusundan taşıyor ya da gereksiz boşluk oluşuyor.
   Çözüm: Yukarıdaki kurallarda yükseklikler "calc(X * var(--vh))" ile yazılır.
   --vh normalde 1vh'dir; bu ekranlarda 1vh'nin 1920x1080'deki karşılığı olan
   0.5625vw olur (1080/1920). Böylece sayfa her ekranda 1920x1080 tasarımının
   birebir ölçeklenmiş hali olur. Yeni bir yükseklik eklerken de
   "calc(X * var(--vh))" yazmanız yeterlidir; burada ayrıca karşılık yazmaya
   gerek yoktur.
   Not: Ana sayfa kapak görseli (.header-main) ekran yüksekliğiyle
   sınırlı kalmaya devam eder (max-height: 99.5svh).
   --------------------------------------------------------------------- */
@media (min-width: 992px) and (min-aspect-ratio: 1921/1080),
       (min-width: 992px) and (min-aspect-ratio: 1001/1000) and (max-aspect-ratio: 1919/1080) {
    :root {
        --vh: 0.5625vw;
    }
}

/* Küçük masaüstü / laptop ekranlarında (992px - 1399px) çok küçülen
   yazılar için alt sınır. 1920 genişlikte bu kurallar zaten etkisizdir. */
@media (min-width: 992px) and (max-width: 1399.98px) and (min-aspect-ratio: 1001/1000) {
    .footer .footer-link .footer-list a {
        font-size: max(.9vw, 13px);
    }

    .footer-copyright {
        font-size: max(1vw, 12px);
    }

    /* iPad yatay ve küçük laptoplarda (992-1199px) 11-12px'e düşen yazılar */
    .footer .footer-contact .phone-text,
    .footer .footer-contact .mail-text,
    .footer .footer-contact .location-text,
    .contact-info .phone-text,
    .contact-info .mail-text,
    .contact-info .location-text {
        font-size: max(1.2vw, 14px);
    }

    .contact-form {
        font-size: max(1.1vw, 14px);
    }

    .contact-form .btn-primary {
        font-size: max(1.4vw, 15px);
    }

    /* Ofis kartı: yazılar alt sınıra takılınca kart uzar; harita da kartı sığdıracak kadar uzar */
    .contact-map {
        min-height: 420px;
    }

    .contact-map-card {
        width: max(25vw, 300px);
    }

        .contact-map-card h2 {
            font-size: max(1.75vw, 20px);
        }

    .contact-map-row {
        font-size: max(1vw, 14px);
    }

        .contact-map-row svg {
            width: max(1.7vw, 22px);
            height: max(1.7vw, 22px);
        }

        .contact-map-row small {
            font-size: max(.8vw, 12px);
        }

    .contact-map-btn {
        font-size: max(1vw, 14px);
    }
}

/* ---------------------------------------------------------------------
   2) TABLET (DİKEY) VE TELEFON
      992px'den dar ekranlar ve dikey (portrait) ekranlar.
      Yan yana duran bloklar alt alta dizilir, sabit yükseklikler
      kaldırılır, yazılar okunabilir boyuta getirilir.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px), (max-aspect-ratio: 1/1) {
    :root {
        --m-fs-sm: clamp(12px, 3.4vw, 15px);
        --m-fs: clamp(15px, 4vw, 19px);
        --m-fs-lg: clamp(17px, 4.6vw, 22px);
        --m-fs-h3: clamp(20px, 5.6vw, 28px);
        --m-fs-h2: clamp(24px, 6.8vw, 36px);
        --m-fs-h1: clamp(30px, 8.5vw, 46px);
        --m-icon: clamp(28px, 8vw, 44px);
        --m-gutter: 6vw;
        /* Tablet sınırları: telefonda (≈730px'e kadar) vw değeri geçerlidir, daha geniş
           ekranlarda (dikey tablet, 900x600 gibi pencereler) boşluk ve genişlikler büyümeyi durdurur. */
        --m-col: min(88vw, 720px);
        --m-pad-x: max(var(--m-gutter), calc((100vw - 720px) / 2));
        --m-gap-xl: min(12vw, 88px);
        --m-gap-l: min(8vw, 60px);
        --m-gap: min(6vw, 44px);
        --m-gap-s: min(4vw, 30px);
        --m-radius: min(3vw, 22px);
    }

    .wrapper {
        height: auto;
    }

    /* Dar sütunda iki yana yaslı metin kelimeler arasında büyük boşluklar açar */
    .main-aboutus p,
    .aboutus-text p,
    .construction-textpicture .text p,
    .construction-card p,
    .tourism-text p,
    .tourism-card p,
    .advertising-text p,
    .advertising-card p {
        text-align: left;
    }

    /* ---------- MASTER: HEADER ---------- */
    /* Açılan mobil menü, sayfa başlık kutularının (z-index: 4) altında kalmasın */
    .header-content {
        z-index: 5;
    }

    .navbar-toggler {
        width: clamp(44px, 7vw, 56px);
        height: clamp(44px, 7vw, 56px);
        margin-left: var(--m-gutter);
        padding: 6px;
        border-width: 2px;
        border-radius: 6px;
    }

    .header-main {
        aspect-ratio: auto;
        height: 75svh;
        max-height: none;
    }

    .header-bg-main {
        background-size: cover;
        background-position: center;
    }

    .header-main .header-bannertext {
        top: 48%;
        width: min(60vw, 480px);
    }

    .header-main .header-social {
        left: 50%;
        bottom: 5vh;
        transform: translateX(-50%);
        gap: min(3vw, 22px);
    }

        .header-main .header-social #facebook,
        .header-main .header-social #instagram,
        .header-main .header-social #linkedin {
            width: var(--m-icon);
        }

    /* Alt sayfaların başlık kutusu (header'ın üstüne binen beyaz kutu).
       Bütün ölçüler yazı boyutuna (--t-fs) bağlı ve masaüstündeki oranlarla aynı:
       kutu yarı yarıya header'ın üstünde/altında durur, genişlik yazının ~7.9 katı.
       991px'de (40px yazı) masaüstünün 992px'deki haliyle neredeyse aynıdır, geçişte sıçrama olmaz. */
    .aboutus-title,
    .contact-title,
    .sectors-title,
    .projects-title {
        --t-fs: clamp(30px, 7.6vw, 40px);
        width: calc(7.875 * var(--t-fs));
        height: calc(2.81 * var(--t-fs));
        margin-top: calc(-1.406 * var(--t-fs));
        padding: 0;
        border-radius: calc(0.5 * var(--t-fs));
    }

        .aboutus-title h1,
        .contact-title h1,
        .sectors-title h1,
        .sectors-title .h1,
        .projects-title h1 {
            font-size: var(--t-fs);
            margin: calc(0.42 * var(--t-fs)) 0 0;
        }

    /* ---------- MASTER: FOOTER ---------- */
    .footer {
        height: auto;
    }

        .footer .container-fluid {
            flex-direction: column;
        }

        .footer .footer-left {
            flex-direction: column;
            width: 100%;
            height: auto;
            padding: var(--m-gap-l) var(--m-pad-x);
        }

        .footer .footer-logosocial {
            flex-direction: row;
            align-items: center;
            gap: var(--m-gap);
            width: auto;
            height: auto;
            margin: 0;
        }

            .footer .footer-logosocial .footer-logo {
                width: clamp(24px, 7vw, 40px);
                height: auto;
            }

        .footer .footer_social {
            flex-direction: row;
            gap: min(3vw, 22px);
            width: auto;
            margin-top: 0;
        }

            .footer .footer_social #footer_facebook,
            .footer .footer_social #footer_instagram,
            .footer .footer_social #footer_linkedin {
                width: var(--m-icon);
            }

    .footer-column-divider {
        display: none;
    }

    .footer .footer-orta {
        width: 100%;
        height: auto;
        margin-top: var(--m-gap);
    }

    .footer .footer-contact {
        flex-direction: column;
        gap: min(3vw, 22px);
        width: 100%;
        height: auto;
        padding-bottom: min(5vw, 36px);
    }

        .footer .footer-contact .phone,
        .footer .footer-contact .mail,
        .footer .footer-contact .location {
            gap: min(3vw, 22px);
        }

        .footer .footer-contact #phone,
        .footer .footer-contact #mail,
        .footer .footer-contact #location {
            width: clamp(24px, 7vw, 36px);
        }

        .footer .footer-contact .phone-text,
        .footer .footer-contact .mail-text,
        .footer .footer-contact .location-text {
            font-size: var(--m-fs);
        }

    .footer .footer-left .footer-divider {
        width: 100%;
        height: 1px;
    }

    .footer .footer-link {
        width: 100%;
        height: auto;
        padding: var(--m-gap) 0;
    }

        .footer .footer-link .footer-list {
            width: 33.33%;
            height: auto;
        }

            .footer .footer-link .footer-list.projeler {
                padding-right: 0;
            }

            .footer .footer-link .footer-list ul li {
                padding: 0 0 min(2vw, 14px) 0;
            }

            .footer .footer-link .footer-list .baslik {
                padding: 0 0 var(--m-gap-s) 0;
            }

            .footer .footer-link .footer-list a {
                font-size: var(--m-fs-sm);
            }

            .footer .footer-link .footer-list .baslik a {
                font-size: var(--m-fs);
            }

    .footer-copyright {
        width: 100%;
        height: auto;
        padding-top: min(5vw, 36px);
        font-size: var(--m-fs-sm);
    }

    .footer .footer-right {
        width: 100%;
        height: auto;
        padding: min(10vw, 72px) var(--m-pad-x);
    }

        .footer .footer-right p {
            width: min(80vw, 560px);
            font-size: var(--m-fs-lg);
        }

        .footer .footer-right .motto {
            margin-bottom: var(--m-gap);
        }

        .footer .footer-right .contact-link {
            width: clamp(150px, 45vw, 260px);
            border-width: clamp(6px, 1.6vw, 10px);
            justify-content: center;
        }

        .footer .footer-right h5 {
            font-size: var(--m-fs-h3);
        }

    /* ---------- ANA SAYFA ---------- */
    .main-title {
        height: auto;
        padding: var(--m-gap-xl) var(--m-pad-x) var(--m-gap-l);
        text-align: center;
    }

        .main-title h2 {
            font-size: var(--m-fs-h2);
        }

    /* Sektör kartları (Ana sayfa + Sektörler sayfası) */
    .main-sectors,
    .sectors {
        flex-direction: column;
        align-items: center;
        gap: var(--m-gap);
        height: auto;
    }

    .sectors {
        padding: var(--m-gap-xl) 0;
    }

        .sectors a {
            width: var(--m-col);
        }

        .main-sectors div,
        .sectors div {
            width: var(--m-col);
            height: auto;
            padding: min(7vw, 52px) var(--m-gap);
            border-radius: var(--m-radius);
        }

        .sectors a div {
            width: 100%;
        }

        /* Turizm kartının mavi fotoğraflı zemini: masaüstündeki üst üste bindirme
           yöntemi alt alta düzende kaymaya açık olduğundan, zemin doğrudan karta verilir. */
        .main-sectors .main-tourism-bg,
        .sectors .tourism-bg {
            display: none;
        }

        .main-sectors .main-tourism,
        .sectors .tourism {
            background: url('Content/bright-shot-new-buildings-neighborhood.webp') center / cover, #10408a;
            background-blend-mode: multiply;
        }

        .main-sectors h2,
        .sectors h2 {
            font-size: var(--m-fs-h3);
            margin-bottom: min(3vw, 22px);
        }

        .main-sectors p,
        .sectors p {
            font-size: var(--m-fs);
            word-spacing: normal;
            margin: 0;
        }

    .main-aboutus {
        flex-direction: column;
        height: auto;
        padding: var(--m-gap-xl) var(--m-pad-x);
    }

        .main-aboutus .main-aboutus-letter {
            width: 100%;
            height: auto;
            margin: 0;
        }

        .main-aboutus h2 {
            font-size: var(--m-fs-h2);
            margin-bottom: min(5vw, 36px);
        }

        .main-aboutus p {
            width: 100%;
            height: auto;
            font-size: var(--m-fs);
            word-spacing: normal;
        }

    .main-aboutus-letter a {
        font-size: var(--m-fs);
        margin-top: var(--m-gap-s);
    }

    .main-aboutus-picture {
        width: 100%;
        height: calc(var(--m-col) * 0.625);
        margin: var(--m-gap-l) 0 0 0;
        border-radius: var(--m-radius);
    }

    /* ---------- HAKKIMIZDA ---------- */
    .wrapper-aboutus {
        height: auto;
        padding-bottom: var(--m-gap-xl);
    }

    .aboutus-text-picture {
        flex-direction: column;
        width: var(--m-col);
        height: auto;
        margin: var(--m-gap-l) auto 0;
    }

    .aboutus-text {
        width: 100%;
        height: auto;
        gap: min(5vw, 36px);
    }

        .aboutus-text p,
        .aboutus-text p:nth-last-child(2) {
            font-size: var(--m-fs);
            word-spacing: normal;
        }

    .aboutus-picture {
        width: 100%;
        height: auto;
        margin: var(--m-gap-l) 0 0 0;
        padding: 0;
        gap: min(5vw, 36px);
    }

        .aboutus-picture img,
        .aboutus-picture img:first-child,
        .aboutus-picture img:last-child {
            width: 100%;
            height: auto;
            border-radius: var(--m-radius);
        }

    .aboutus-visionmission {
        flex-direction: column;
        align-items: center;
        height: auto;
        margin-top: var(--m-gap-xl);
        gap: var(--m-gap);
    }

        .aboutus-visionmission .vision,
        .aboutus-visionmission .mission {
            width: var(--m-col);
            height: auto;
            padding: min(7vw, 52px) var(--m-gap);
            border-radius: var(--m-radius);
        }

        .aboutus-visionmission h2 {
            font-size: var(--m-fs-h2);
            margin-bottom: min(3vw, 22px);
        }

        .aboutus-visionmission p {
            font-size: var(--m-fs);
            word-spacing: normal;
            text-align: center;
            margin: 0;
        }

    .aboutus-partners-title {
        height: auto;
        margin-top: min(14vw, 100px);
    }

        .aboutus-partners-title h2 {
            font-size: var(--m-fs-h2);
            margin: 0;
        }

    .aboutus-partners {
        height: auto;
        margin: var(--m-gap) 0 0 0;
        gap: var(--m-gap-l);
    }

        .aboutus-partners img {
            width: min(36vw, 240px);
            height: min(36vw, 240px);
            border-width: clamp(2px, .6vw, 4px);
            border-radius: var(--m-radius);
        }

    /* ---------- İLETİŞİM ---------- */
    .wrapper-contact {
        height: auto;
        padding-bottom: var(--m-gap-xl);
    }

    .contact-content {
        flex-direction: column;
        align-items: center;
        height: auto;
        margin: min(10vw, 72px) 0 0 0;
        gap: var(--m-gap-l);
    }

    .contact-info {
        width: var(--m-col);
        height: auto;
    }

        .contact-info p {
            font-size: var(--m-fs-lg);
            margin-bottom: var(--m-gap);
        }

        .contact-info .phone,
        .contact-info .mail,
        .contact-info .location {
            gap: min(3vw, 22px);
            margin-bottom: var(--m-gap-s);
        }

        .contact-info #contact_phone,
        .contact-info #contact_mail,
        .contact-info #contact_location {
            width: clamp(24px, 7vw, 36px);
        }

        .contact-info .phone-text,
        .contact-info .mail-text,
        .contact-info .location-text {
            width: auto;
            font-size: var(--m-fs);
        }

        .contact-info .contact-social {
            display: flex;
            gap: var(--m-gap-s);
            margin-top: min(2vw, 14px);
        }

            .contact-info .contact-social #contact_facebook,
            .contact-info .contact-social #contact_instagram,
            .contact-info .contact-social #contact_linkedin {
                width: var(--m-icon);
            }

    .contact-form {
        width: min(92vw, 760px);
        height: auto;
        min-height: 0;
        padding: var(--m-gap-l) min(5vw, 36px);
        border-radius: var(--m-radius);
        font-size: var(--m-fs);
    }

        /* Mobildeki butonların ortak ölçüsü (Gönder, Projeler, Detaylı Bilgi): ~44-56px yükseklik */
        .contact-form .btn-primary {
            font-size: var(--m-fs);
            padding: clamp(10px, 2.6vw, 14px) clamp(20px, 5vw, 32px);
            border-radius: clamp(6px, 1.6vw, 10px);
        }

    /* Harita formla aynı genişlikte; ofis kartı haritanın altına iner.
       Kart haritaya binmez: Google'ın alt kenardaki logo ve "Harita verileri" yazısı görünür kalmalı. */
    .contact-map {
        width: min(92vw, 760px);
        height: auto;
        min-height: 0;
        margin-top: var(--m-gap-l);
    }

        .contact-map iframe {
            height: clamp(280px, 75vw, 440px);
            border-radius: var(--m-radius);
        }

    .contact-map-card {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: auto;
        margin: var(--m-gap-s) 0 0 0;
        padding: min(5.6vw, 32px);
        border-radius: var(--m-radius);
        box-shadow: 0 4px 18px rgba(24, 39, 82, .14);
    }

        .contact-map-card h2 {
            font-size: var(--m-fs-h3);
            margin-bottom: min(2.6vw, 16px);
        }

    .contact-map-row {
        gap: min(3vw, 18px);
        margin: min(2.6vw, 16px) 0;
        font-size: var(--m-fs);
    }

        .contact-map-row svg {
            width: clamp(22px, 6.5vw, 32px);
            height: clamp(22px, 6.5vw, 32px);
        }

        .contact-map-row small {
            font-size: var(--m-fs-sm);
        }

    .contact-map-btn {
        margin-top: min(2.6vw, 16px);
        padding: clamp(10px, 2.6vw, 14px) clamp(20px, 5vw, 32px);
        font-size: var(--m-fs);
    }

    /* ---------- SEKTÖRLER ---------- */
    .wrapper-sectors {
        height: auto;
    }

    /* ---------- SEKTÖR ALT SAYFALARI: ORTAK ---------- */
    .wrapper-construction,
    .wrapper-tourism,
    .wrapper-advertising {
        height: auto;
        padding-bottom: var(--m-gap-xl);
    }

    .construction-title,
    .tourism-title,
    .advertising-title {
        height: auto;
        margin-top: var(--m-gap);
    }

        .construction-title h1,
        .tourism-title h1,
        .advertising-title h1 {
            font-size: var(--m-fs-h2);
            margin: 0;
        }

    .construction-content,
    .tourism-content,
    .advertising-content {
        align-items: center;
        height: auto;
    }

    .construction-textpicture,
    .tourism-textpicture,
    .advertising-textpicture {
        flex-direction: column;
        width: var(--m-col);
        height: auto;
        min-height: 0;
        margin: var(--m-gap) auto 0;
        gap: var(--m-gap);
    }

    /* ---------- İNŞAAT ---------- */
    .construction-textpicture .text {
        width: 100%;
    }

        .construction-textpicture .text h6 {
            font-size: var(--m-fs-lg);
            margin-bottom: var(--m-gap-s);
        }

        .construction-textpicture .text p,
        .construction-textpicture .text p:last-child {
            font-size: var(--m-fs);
            word-spacing: normal;
            margin-bottom: var(--m-gap-s);
        }

    .construction-textpicture .picture {
        width: 100%;
        height: calc(var(--m-col) * 0.6818);
        border-radius: var(--m-radius);
    }

    .construction-card {
        flex-direction: column;
        width: var(--m-col);
        height: auto;
        margin: var(--m-gap-l) auto 0;
        gap: var(--m-gap);
    }

        .construction-card div {
            width: 100%;
            height: auto;
            padding: min(7vw, 52px) var(--m-gap);
            border-radius: min(4vw, 28px);
        }

        .construction-card h2 {
            font-size: var(--m-fs-h3);
            margin-bottom: min(3vw, 22px);
        }

        .construction-card p {
            font-size: var(--m-fs);
            word-spacing: normal;
            margin: 0;
        }

    .construction-projects {
        width: 100%;
        height: auto;
        margin: min(10vw, 72px) 0 0 0;
        padding-top: 0;
    }

        .construction-projects .btn {
            width: auto;
            min-width: clamp(160px, 45vw, 260px);
            height: auto;
            font-size: var(--m-fs-lg);
            margin: 0;
            padding: clamp(10px, 2.6vw, 14px) clamp(20px, 5vw, 32px);
            border-radius: clamp(6px, 1.6vw, 10px);
        }

    .construction-picture {
        height: min(50vw, 420px);
        margin-top: var(--m-gap-xl);
    }

    /* ---------- TURİZM ---------- */
    .tourism-text,
    .advertising-text {
        width: 100%;
        height: auto;
    }

        .tourism-text p,
        .advertising-text p {
            font-size: var(--m-fs);
            margin-bottom: var(--m-gap-s);
        }

    .tourism-picture {
        width: 100%;
        height: calc(var(--m-col) * 0.6818);
        margin: 0;
        border-radius: var(--m-radius);
    }

    .tourism-logo {
        width: min(70vw, 440px);
        height: calc(min(70vw, 440px) * 0.5814);
        margin: min(10vw, 72px) auto 0 auto;
    }

    .tourism-detail {
        width: 100%;
        height: auto;
        margin: var(--m-gap-l) 0 0 0;
    }

        .tourism-detail button {
            width: auto;
            min-width: clamp(160px, 45vw, 260px);
            height: auto;
            font-size: var(--m-fs);
            margin: 0;
            padding: clamp(10px, 2.6vw, 14px) clamp(20px, 5vw, 32px);
            border-radius: clamp(6px, 1.6vw, 10px);
        }

    /* ---------- DİJİTAL REKLAM ---------- */
    .advertising-picture {
        width: 100%;
        height: calc(var(--m-col) * 0.6818);
        border-radius: var(--m-radius);
    }

    .tourism-card,
    .advertising-card {
        width: 100%;
        height: auto;
        margin: 0 0 var(--m-gap-s) 0;
        padding: min(5vw, 36px);
        border-radius: min(4vw, 28px);
    }

        .tourism-card p,
        .advertising-card p {
            font-size: var(--m-fs);
            word-spacing: normal;
        }

    .advertising-logo {
        width: min(45vw, 280px);
        height: min(45vw, 280px);
        margin-top: min(10vw, 72px);
    }

    .advertising-detail {
        width: auto;
        min-width: clamp(160px, 45vw, 260px);
        height: auto;
        font-size: var(--m-fs);
        margin: var(--m-gap-l) 0 0 0;
        padding: clamp(10px, 2.6vw, 14px) clamp(20px, 5vw, 32px);
        border-radius: clamp(6px, 1.6vw, 10px);
    }

    /* ---------- PROJELER ---------- */
    .wrapper-projects {
        padding-bottom: var(--m-gap-xl);
    }

    .projects-hero {
        height: auto;
        padding-top: var(--m-gap);
    }

    .projects-slogan {
        order: 0;
    }

        .projects-slogan-top {
            margin-top: 0;
            font-size: clamp(30px, 9.5vw, 68px);
        }

        .projects-slogan-bottom {
            width: min(62vw, 440px);
            margin-top: min(2vw, 14px);
        }

    /* Görsel, yazının şeffaflaşan alt kısmının arkasına girer */
    .projects-render {
        position: relative;
        order: 1;
        top: auto;
        height: min(62vw, 470px);
        margin-top: calc(-0.24 * min(62vw, 440px));
        background-size: cover;
        background-position: center 70%;
    }

    .projects-logo {
        width: min(60vw, 360px);
        margin-top: var(--m-gap-s);
    }

    /* Kare kutuda iki bina birden sığmıyor: sağdaki (öndeki) bina tam görünsün */
    .projects-aerial {
        height: min(100vw, 680px);
        margin-top: var(--m-gap);
        background-position: 85% 50%, 0 0;
    }

    .projects-count {
        --count-w: clamp(64px, 17vw, 110px);
        left: var(--m-pad-x);
        top: auto;
        bottom: 28%;
    }

    /* Yuvarlak fotoğraflar 2x2; ilk satır havadan görünümün alt kenarına oturur */
    .projects-features {
        flex-wrap: wrap;
        width: var(--m-col);
        gap: var(--m-gap) var(--m-gap-s);
        margin: calc(-0.5 * min(36vw, 220px)) auto 0;
    }

        .projects-features::before {
            display: none;
        }

        .projects-features li {
            width: calc((100% - var(--m-gap-s)) / 2);
        }

        .projects-features .feature-photo {
            width: min(36vw, 220px);
            height: min(36vw, 220px);
            border-width: clamp(3px, 1vw, 6px);
        }

        .projects-features p {
            margin-top: min(3vw, 22px);
            font-size: var(--m-fs);
            white-space: normal;
        }
}