@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');


/* ================= RESET ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", Arial, sans-serif;

    background: #f5f4f1;

    color: #111;

    line-height: 1.6;
}

a {
    color: inherit;

    text-decoration: none;
}

.container {
    width: min(1160px, calc(100% - 48px));

    margin: auto;
}


/* ================= HEADER ================= */

.header {
    height: 82px;

    background: #f5f4f1;

    border-bottom: 1px solid #deddd8;

    position: sticky;

    top: 0;

    z-index: 100;
}

.header-inner {
    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* LOGO */

.logo-link {
    display: flex;
    align-items: center;
    width: 125px;
    height: 45px;
    flex-shrink: 0;
}

.logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 125px;
    max-height: 45px;
    object-fit: contain;
}

/* NAVIGATION */

.navigation {
    display: flex;

    gap: 34px;

    font-size: 12px;

    font-weight: 600;

    color: #6c6b66;
}

.navigation a {
    transition: .2s;
}

.navigation a:hover {
    color: #111;
}


/* HEADER WHATSAPP */

.header-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 44px;

    padding: 0 18px;

    background: #111;

    color: white;

    font-size: 11px;

    font-weight: 700;

    transition: .25s;
}

.header-button:hover {
    background: #25D366;

    color: #071b0d;
}

.header-button .whatsapp-icon {
    width: 19px;

    height: 19px;

    object-fit: contain;
}


/* ================= WHATSAPP ICON ================= */

.whatsapp-icon {
    width: 21px;

    height: 21px;

    object-fit: contain;

    display: block;
}


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

.hero {
    min-height: 720px;

    position: relative;

    background:
        linear-gradient(
            90deg,
            #111 0%,
            #111 35%,
            rgba(17,17,17,.88) 60%,
            rgba(17,17,17,.7) 100%
        );

    color: white;

    overflow: hidden;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255,255,255,.08),
            transparent 35%
        );
}

.hero-container {
    min-height: 720px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;
}

.hero-content {
    max-width: 760px;

    padding: 90px 0;
}

.eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    font-size: 10px;

    letter-spacing: .2em;

    color: #aaa;
}

.eyebrow span {
    width: 28px;

    height: 1px;

    background: #777;
}

.hero h1 {
    font-family: Manrope, sans-serif;

    font-size: clamp(58px, 8vw, 105px);

    line-height: .9;

    letter-spacing: -.075em;

    margin-bottom: 36px;
}

.hero h1 em {
    display: block;

    color: #d7d6d1;

    font-style: normal;
}

.hero-content > p {
    max-width: 550px;

    color: #aaa;

    font-size: 15px;
}

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 38px;
}


/* ================= GENERAL BUTTON ================= */

.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-height: 50px;

    padding: 0 22px;

    border: 1px solid transparent;

    font-size: 11px;

    font-weight: 700;

    transition: .25s;
}


/* ================= WHATSAPP BUTTON ================= */

.whatsapp-button {
    background: #25D366;

    color: #071b0d;

    border-color: #25D366;
}

.whatsapp-button:hover {
    background: #20bd5b;

    border-color: #20bd5b;

    transform: translateY(-2px);
}

.whatsapp-button .whatsapp-icon {
    width: 21px;

    height: 21px;
}


/* HERO LINK */

.hero-link {
    font-size: 12px;

    font-weight: 600;

    color: #ddd;
}

.hero-link span {
    margin-left: 12px;
}


/* HERO NUMBER */

.hero-number {
    align-self: flex-end;

    margin-bottom: 60px;

    border-left: 1px solid #555;

    padding-left: 18px;

    display: flex;

    gap: 16px;

    color: #888;

    font-size: 10px;
}

.hero-number strong {
    color: white;

    font-size: 12px;

    line-height: 1.3;
}


/* ================= LABEL ================= */

.section-label {
    font-size: 10px;

    letter-spacing: .2em;

    font-weight: 700;

    color: #8a8882;
}


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

.intro {
    padding: 135px 0;

    background: #f5f4f1;
}

.intro-grid {
    display: grid;

    grid-template-columns: .55fr 1.45fr;

    gap: 60px;
}

.intro-content h2 {
    font-family: Manrope, sans-serif;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -.065em;
}

.intro-content h2 strong {
    display: block;

    font-weight: 800;
}

.intro-content p {
    max-width: 680px;

    margin-top: 28px;

    color: #696864;

    font-size: 15px;
}

.underline-link {
    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 30px;

    padding-bottom: 6px;

    border-bottom: 1px solid #111;

    font-size: 12px;

    font-weight: 700;
}


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

.services {
    padding: 125px 0;

    background: white;
}

.services-header {
    display: grid;

    grid-template-columns: .55fr 1.45fr;

    gap: 60px;

    margin-bottom: 70px;
}

.services-header h2 {
    font-family: Manrope, sans-serif;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -.065em;
}

.services-header strong {
    display: block;
}

.service-list {
    border-top: 1px solid #dddcd7;
}

.service-item {
    display: grid;

    grid-template-columns: 70px 1fr 40px;

    align-items: center;

    gap: 25px;

    padding: 32px 0;

    border-bottom: 1px solid #dddcd7;

    transition: .25s;
}

.service-item:hover {
    padding-left: 10px;

    background: #fafaf8;
}

.service-number {
    font-size: 10px;

    color: #999;
}

.service-info h3 {
    font-family: Manrope, sans-serif;

    font-size: 25px;

    letter-spacing: -.04em;
}

.service-info p {
    max-width: 600px;

    margin-top: 5px;

    color: #777;

    font-size: 13px;
}

.service-arrow {
    font-size: 20px;

    color: #999;

    text-align: right;
}


/* ================= CTA ================= */

.cta {
    padding: 110px 0;

    background: #d9d8d2;
}

.cta-container {
    display: grid;

    grid-template-columns: .55fr 1.45fr;

    gap: 60px;
}

.cta h2 {
    font-family: Manrope, sans-serif;

    font-size: clamp(45px, 5vw, 70px);

    line-height: 1;

    letter-spacing: -.065em;
}

.cta h2 strong {
    display: block;
}


/* CTA WHATSAPP */

.cta-whatsapp {
    margin-top: 35px;
}


/* ================= CONTACT ================= */

.contact {
    padding: 125px 0 100px;

    background: #111;

    color: white;
}

.contact-header {
    display: grid;

    grid-template-columns: .55fr 1.45fr;

    gap: 60px;

    margin-bottom: 65px;
}

.contact-header h2 {
    font-family: Manrope, sans-serif;

    font-size: clamp(60px, 7vw, 90px);

    line-height: .9;

    letter-spacing: -.075em;
}

.contact-header p {
    margin-top: 25px;

    color: #888;

    font-size: 14px;
}

.contact-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #333;
}

.contact-card {
    min-height: 155px;

    position: relative;

    padding: 28px 35px 28px 0;

    border-bottom: 1px solid #333;
}

.contact-card:nth-child(even) {
    padding-left: 35px;

    border-left: 1px solid #333;
}

.contact-card small {
    display: block;

    margin-bottom: 24px;

    color: #666;

    font-size: 9px;

    letter-spacing: .17em;
}

.contact-card strong {
    font-size: 14px;

    font-weight: 500;
}

.contact-card > span {
    position: absolute;

    right: 0;

    top: 28px;

    color: #666;

    font-size: 18px;
}

.contact-card:hover strong {
    color: #d9d8d2;
}

.contact-card:hover > span {
    color: white;
}


/* ================= FOOTER ================= */

footer {
    padding: 28px 0;

    background: #111;

    border-top: 1px solid #292929;

    color: #666;
}

.footer-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-size: 10px;
}

.footer-logo {
    height: 30px;

    width: auto;

    max-width: 140px;

    object-fit: contain;

    filter: brightness(0) invert(1);
}

.footer-inner a {
    color: #aaa;
}


/* ================= FLOATING WHATSAPP ================= */

.whatsapp {
    position: fixed;

    right: 22px;

    bottom: 40px;

    z-index: 200;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #25D366;

    border: none;

    box-shadow:
        0 8px 25px rgba(37, 211, 102, .35);

    transition: .25s;
}

.whatsapp img {
    width: 32px;

    height: 32px;

    object-fit: contain;

    display: block;
}

.whatsapp:hover {
    transform: translateY(-4px) scale(1.04);

    background: #20bd5b;

    box-shadow:
        0 12px 30px rgba(37, 211, 102, .45);
}


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

@media (max-width: 800px) {

    .logo-link {
        width: 105px;
        height: 40px;
    }

    .logo {
        width: auto;
        height: auto;
        max-width: 105px;
        max-height: 40px;
    }

}

    .navigation {
        display: none;
    }

    .header-button {
        min-height: 40px;

        padding: 0 13px;
    }

    .header-button .whatsapp-icon {
        width: 18px;

        height: 18px;
    }


    /* HERO */

    .hero,
    .hero-container {
        min-height: 650px;
    }

    .hero-content {
        padding: 70px 0;
    }

    .hero h1 {
        font-size: clamp(52px, 15vw, 80px);
    }

    .hero-buttons {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;
    }

    .hero-number {
        display: none;
    }


    /* INTRO */

    .intro {
        padding: 80px 0;
    }

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

        gap: 30px;
    }

    .intro-content h2 {
        font-size: 45px;
    }


    /* SERVICES */

    .services {
        padding: 80px 0;
    }

    .services-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 45px;
    }

    .services-header h2 {
        font-size: 45px;
    }

    .service-item {
        grid-template-columns: 35px 1fr 25px;

        gap: 12px;
    }

    .service-info h3 {
        font-size: 21px;
    }


    /* CTA */

    .cta {
        padding: 80px 0;
    }

    .cta-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .cta h2 {
        font-size: 45px;
    }


    /* CONTACT */

    .contact {
        padding: 80px 0;
    }

    .contact-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 45px;
    }

    .contact-header h2 {
        font-size: 65px;
    }

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

    .contact-card,
    .contact-card:nth-child(even) {
        padding-left: 0;

        padding-right: 30px;

        border-left: 0;
    }


    /* FOOTER */

    .footer-inner {
        flex-wrap: wrap;
    }


    /* FLOATING WHATSAPP */

    .whatsapp {
        width: 54px;

        height: 54px;

        right: 16px;

        bottom: 16px;
    }

    .whatsapp img {
        width: 30px;

        height: 30px;
    }

}

/* ================= CUSTOM ARROWS ================= */

.arrow {
    display: inline-block;
    position: relative;

    width: 14px;
    height: 14px;

    flex-shrink: 0;

    color: currentColor;
}


/* ================= ÇAPRAZ OK ================= */

.arrow-up-right::before {
    content: "";

    position: absolute;

    width: 11px;
    height: 1px;

    background: currentColor;

    left: 1px;
    top: 9px;

    transform: rotate(-45deg);

    transform-origin: left center;
}

.arrow-up-right::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;

    right: 0;
    top: 1px;
}


/* ================= AŞAĞI OK ================= */

.arrow-down::before {
    content: "";

    position: absolute;

    width: 1px;
    height: 11px;

    background: currentColor;

    left: 6px;
    top: 1px;
}

.arrow-down::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    left: 3px;
    bottom: 0;

    transform: rotate(45deg);
}


/* ================= YUKARI OK ================= */

.arrow-up::before {
    content: "";

    position: absolute;

    width: 1px;
    height: 11px;

    background: currentColor;

    left: 6px;
    top: 2px;
}

.arrow-up::after {
    content: "";

    position: absolute;

    width: 6px;
    height: 6px;

    border-left: 1px solid currentColor;
    border-top: 1px solid currentColor;

    left: 3px;
    top: 0;

    transform: rotate(45deg);
}


/* ================= OK KONUMALARI ================= */

.hero-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;
}

.underline-link {
    display: inline-flex;

    align-items: center;

    gap: 14px;
}

.service-arrow {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    color: #999;
}

.contact-card > .arrow {
    position: absolute;

    right: 0;

    top: 28px;

    color: #666;
}

.contact-card:hover > .arrow {
    color: white;
}

.back-top {
    display: inline-flex;

    align-items: center;

    gap: 10px;
}

/* ================= HEADER BRAND ================= */

.logo-link {
    display: flex;
    align-items: center;
    gap: 14px;

    width: auto;
    height: 60px;

    flex-shrink: 0;
}

.brand-name {
    font-family: Manrope, sans-serif;

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

    letter-spacing: .08em;

    color: #111;

    white-space: nowrap;
}


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

@media (max-width: 800px) {

    .logo-link {
        gap: 9px;
    }

    .brand-name {
        font-size: 10px;
        letter-spacing: .06em;
    }

}