/* =========================================================
   SEBAT MAKİNA
   PRODUCT CATALOG
========================================================= */
/* =========================================================
   PRODUCTS
   PREMIUM MACHINE SHOWCASE
========================================================= */
/* =========================================================
   MACHINE GALLERY
========================================================= */

.machine-gallery-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;

    background:
        linear-gradient(
            180deg,
            #f3f0e9 0%,
            #ebe7de 100%
        );
}


/* =========================================================
   HEADING
========================================================= */

.machine-gallery-heading {
    display: grid;

    grid-template-columns:
        1fr
        0.42fr;

    align-items: end;

    gap: 70px;

    margin-bottom: 50px;
}


.machine-gallery-heading h2 {
    max-width: 850px;

    margin-top: 15px;

    color: #080d12;

    font-size: clamp(
        3.3rem,
        5.2vw,
        5.8rem
    );

    font-weight: 500;

    line-height: 0.97;

    letter-spacing: -0.065em;
}


.machine-gallery-heading h2 em {
    display: block;

    color: #1c355c;

    font-style: normal;
}


.machine-gallery-heading > p {
    max-width: 420px;

    color: #767d82;

    font-size: 0.8rem;

    line-height: 1.85;
}


/* =========================================================
   SLIDER
========================================================= */

.machine-gallery-slider {
    width: 100%;

    overflow: hidden;
}


.machine-gallery-track {
    display: flex;

    width: max-content;

    gap: 18px;

    animation:
        machineGalleryScroll
        45s
        linear
        infinite;
}


.machine-gallery-slider:hover
.machine-gallery-track {
    animation-play-state: paused;
}


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

.machine-gallery-card {
    position: relative;

    width: 420px;
    height: 520px;

    flex: 0 0 420px;

    overflow: hidden;

    background: #101820;
}


.machine-gallery-card:nth-child(3n + 2) {
    width: 330px;

    flex-basis: 330px;

    height: 455px;

    margin-top: 35px;
}


.machine-gallery-card:nth-child(3n + 3) {
    width: 370px;

    flex-basis: 370px;

    height: 490px;

    margin-top: 15px;
}


.machine-gallery-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.78)
        brightness(0.82);

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}


.machine-gallery-card:hover img {
    transform: scale(1.045);

    filter:
        saturate(1)
        brightness(0.92);
}


/* =========================================================
   OVERLAY
========================================================= */

.machine-gallery-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(4, 9, 14, 0.88) 100%
        );
}


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

.machine-gallery-card-content {
    position: absolute;

    right: 25px;
    bottom: 25px;
    left: 25px;

    z-index: 2;
}


.machine-gallery-card-content span {
    color: #d2c198;

    font-size: 0.46rem;
    font-weight: 700;

    letter-spacing: 0.16em;
}


.machine-gallery-card-content h3 {
    max-width: 300px;

    margin-top: 8px;

    color: #ffffff;

    font-size: 1.45rem;

    font-weight: 500;

    line-height: 1.2;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes machineGalleryScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(
            calc(-50% - 9px)
        );
    }

}


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

@media (max-width: 720px) {

    .machine-gallery-section {
        padding:
            80px
            0
            65px;
    }


    .machine-gallery-heading {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 35px;
    }


    .machine-gallery-heading h2 {
        font-size:
            clamp(
                3rem,
                12vw,
                4.3rem
            );
    }


    .machine-gallery-card,
    .machine-gallery-card:nth-child(3n + 2),
    .machine-gallery-card:nth-child(3n + 3) {
        width: 285px;

        height: 390px;

        flex-basis: 285px;

        margin-top: 0;
    }

}
.products-showcase-section {
    position: relative;
    overflow: hidden;
    padding: 95px 0 55px;
    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(28, 55, 98, 0.24),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #05080d 0%,
            #08111d 50%,
            #0a1626 100%
        );
}


/* dekorasyon */

.products-showcase-section::before {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    content: "";
    pointer-events: none;
}


/* =========================================================
   SHOWCASE HEADING
========================================================= */

.products-showcase-heading {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 1fr 0.42fr;

    align-items: end;

    gap: 70px;

    margin-bottom: 48px;
}


.products-showcase-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 0.52rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}


.products-showcase-eyebrow::before {
    width: 28px;
    height: 1px;

    background: #d2c198;

    content: "";
}


.products-showcase-heading h2 {
    max-width: 780px;

    margin-top: 18px;

    color: #ffffff;

    font-size: clamp(
        3.2rem,
        5vw,
        5.7rem
    );

    font-weight: 500;

    line-height: 0.97;

    letter-spacing: -0.065em;
}


.products-showcase-heading h2 em {
    color: #8e9db5;

    font-style: normal;
}


/* sağ açıklama */

.products-showcase-note {
    padding-bottom: 8px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);
}


.products-showcase-note > span {
    color: #d2c198;

    font-size: 0.48rem;
    font-weight: 700;

    letter-spacing: 0.16em;
}


.products-showcase-note p {
    max-width: 330px;

    margin-top: 10px;

    color: rgba(255, 255, 255, 0.37);

    font-size: 0.72rem;

    line-height: 1.75;
}


/* =========================================================
   MARQUEE
========================================================= */

.products-showcase-marquee {
    position: relative;
    z-index: 2;

    width: 100%;

    overflow: hidden;
}


/* kenar fade */

.products-showcase-marquee::before,
.products-showcase-marquee::after {
    position: absolute;
    z-index: 10;

    top: 0;
    bottom: 0;

    width: 8vw;

    content: "";

    pointer-events: none;
}


.products-showcase-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #070d16,
            transparent
        );
}


.products-showcase-marquee::after {
    right: 0;

    background:
        linear-gradient(
            -90deg,
            #070d16,
            transparent
        );
}


.products-showcase-track {
    display: flex;

    width: max-content;

    will-change: transform;

    animation:
        productsShowcaseScroll
        52s
        linear
        infinite;
}


.products-showcase-marquee:hover
.products-showcase-track {
    animation-play-state: paused;
}


.products-showcase-group {
    display: flex;

    flex-shrink: 0;

    gap: 18px;

    padding-right: 18px;
}


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

.products-showcase-card {
    position: relative;

    display: block;

    width: clamp(
        280px,
        28vw,
        455px
    );

    height: clamp(
        360px,
        39vw,
        570px
    );

    flex: 0 0 auto;

    overflow: hidden;

    background: #111820;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);
}


.products-showcase-card:nth-child(3n + 2) {
    width: clamp(
        240px,
        22vw,
        355px
    );

    height: clamp(
        320px,
        35vw,
        500px
    );

    margin-top: 42px;
}


.products-showcase-card:nth-child(3n + 3) {
    width: clamp(
        270px,
        25vw,
        400px
    );

    height: clamp(
        350px,
        37vw,
        540px
    );

    margin-top: 17px;
}


/* FOTO */

.products-showcase-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.78)
        contrast(1.04)
        brightness(0.82);

    transition:
        transform 0.85s cubic-bezier(.2,.8,.2,1),
        filter 0.6s ease;
}


.products-showcase-card:hover img {
    transform: scale(1.055);

    filter:
        saturate(1)
        contrast(1.03)
        brightness(0.94);
}


/* =========================================================
   OVERLAY
========================================================= */

.products-showcase-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3, 8, 13, 0.08) 10%,
            transparent 40%,
            rgba(3, 7, 11, 0.94) 100%
        );

    pointer-events: none;
}


/* =========================================================
   NUMBER
========================================================= */

.products-showcase-number {
    position: absolute;

    top: 20px;
    left: 20px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.52rem;
    font-weight: 700;

    letter-spacing: 0.12em;
}


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

.products-showcase-content {
    position: absolute;

    right: 24px;
    bottom: 24px;
    left: 24px;

    z-index: 3;
}


.products-showcase-content > span {
    color: #d2c198;

    font-size: 0.48rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}


.products-showcase-content > div {
    display: flex;

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

    gap: 20px;

    margin-top: 8px;
}


.products-showcase-content h3 {
    max-width: 310px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        1.25rem,
        1.7vw,
        1.8rem
    );

    font-weight: 500;

    line-height: 1.15;
}


.products-showcase-content i {
    display: grid;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    color: #ffffff;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.products-showcase-card:hover
.products-showcase-content i {
    background: #ffffff;

    color: #07101c;

    transform: rotate(45deg);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes productsShowcaseScroll {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


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

.products-showcase-footer {
    position: relative;
    z-index: 3;

    display: flex;

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

    gap: 30px;

    margin-top: 45px;

    padding-top: 21px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);
}


.products-showcase-footer span {
    color: rgba(255, 255, 255, 0.25);

    font-size: 0.43rem;
    font-weight: 700;

    letter-spacing: 0.13em;
}



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

.products-catalog-intro {
    padding: 115px 0 70px;

    background: #f2efe8;
}


.products-catalog-intro-grid {
    display: grid;

    grid-template-columns:
        1fr
        0.42fr;

    align-items: end;

    gap: 80px;
}


.products-catalog-intro h2 {
    max-width: 760px;

    margin-top: 15px;

    color: #0a0f15;

    font-size: clamp(
        3.3rem,
        5vw,
        5.7rem
    );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.065em;
}


.products-catalog-intro h2 em {
    display: block;

    color: #223c66;

    font-style: normal;
}


.products-catalog-intro-grid > p {
    max-width: 420px;

    color: #777f85;

    font-size: 0.79rem;

    line-height: 1.85;
}



/* =========================================================
   FOTOĞRAFSIZ ÜRÜN
========================================================= */

.product-technical-placeholder {
    position: absolute;
    inset: 0;

    display: flex;

    flex-direction: column;

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

    overflow: hidden;

    padding: 30px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(38, 67, 111, 0.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #09121e,
            #101e2d
        );

    text-align: center;
}


.product-technical-placeholder::before {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size: 44px 44px;

    content: "";
}


.product-placeholder-brand,
.product-placeholder-symbol,
.product-technical-placeholder strong,
.product-technical-placeholder small,
.product-placeholder-line {
    position: relative;
    z-index: 2;
}


.product-placeholder-brand {
    color: rgba(255,255,255,0.28);

    font-size: 0.46rem;
    font-weight: 700;

    letter-spacing: 0.17em;
}


.product-placeholder-symbol {
    display: grid;

    width: 72px;
    height: 72px;

    margin: 30px 0;

    place-items: center;

    border:
        1px solid
        rgba(255,255,255,0.13);

    border-radius: 50%;

    color: #d2c198;

    font-size: 1.45rem;
}


.product-technical-placeholder strong {
    color: #ffffff;

    font-size: 1.3rem;

    font-weight: 500;
}


.product-technical-placeholder small {
    margin-top: 8px;

    color: rgba(255,255,255,0.32);

    font-size: 0.43rem;
    font-weight: 700;

    letter-spacing: 0.16em;
}


.product-placeholder-line {
    width: 44px;
    height: 1px;

    margin-top: 24px;

    background: #d2c198;
}



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

@media (max-width: 1000px) {

    .products-showcase-heading,
    .products-catalog-intro-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .products-showcase-note {
        max-width: 420px;
    }

}



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

@media (max-width: 720px) {

    .products-showcase-section {
        padding:
            75px
            0
            40px;
    }


    .products-showcase-heading {
        margin-bottom: 35px;
    }


    .products-showcase-heading h2 {
        font-size:
            clamp(
                2.9rem,
                12vw,
                4.2rem
            );
    }


    .products-showcase-card {
        width: 275px;

        height: 390px;
    }


    .products-showcase-card:nth-child(3n + 2),
    .products-showcase-card:nth-child(3n + 3) {
        width: 275px;

        height: 390px;

        margin-top: 0;
    }


    .products-showcase-content {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }


    .products-showcase-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }


    .products-catalog-intro {
        padding:
            80px
            0
            50px;
    }


    .products-catalog-intro h2 {
        font-size:
            clamp(
                3rem,
                12vw,
                4.3rem
            );
    }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .products-showcase-track {
        animation: none;
    }

}
.products-catalog-page,
.product-detail-page {
    background: #f2efe8;
}


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

.products-catalog-hero {
    position: relative;
    overflow: hidden;
    padding: 170px 0 105px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(28, 55, 104, 0.28),
            transparent 30%
        ),
        linear-gradient(
            130deg,
            #05080d 0%,
            #07111e 53%,
            #0b1a30 100%
        );
}

.products-catalog-hero::after {
    position: absolute;
    right: -220px;
    bottom: -380px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 50%;
    content: "";
}

.products-catalog-hero .container {
    position: relative;
    z-index: 2;
}

.products-catalog-hero h1 {
    max-width: 980px;
    margin-top: 25px;
    color: #fff;
    font-size: clamp(4rem, 6.5vw, 7rem);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.065em;
}

.products-catalog-hero h1 em {
    display: block;
    color: #526fa6;
    font-style: normal;
}

.products-catalog-hero p {
    max-width: 640px;
    margin-top: 30px;
    color: rgba(255,255,255,.46);
    font-size: .84rem;
    line-height: 1.9;
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.products-category-nav {
    position: sticky;
    z-index: 20;
    top: 82px;
    border-bottom: 1px solid rgba(7,14,24,.12);
    background: rgba(244,241,234,.94);
    backdrop-filter: blur(16px);
}

.products-category-nav-track {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.products-category-nav-track::-webkit-scrollbar {
    display: none;
}

.products-category-nav-track a {
    display: inline-flex;
    min-height: 73px;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 0 28px;
    border-right: 1px solid rgba(7,14,24,.1);
    color: #162331;
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    transition:
        background .3s ease,
        color .3s ease;
}

.products-category-nav-track a span {
    color: #7a8490;
    font-size: .46rem;
}

.products-category-nav-track a:hover {
    background: #0a1830;
    color: #fff;
}


/* =========================================================
   CATEGORY
========================================================= */

.product-category-section {
    padding: 115px 0;
    border-bottom: 1px solid rgba(7,14,24,.1);
}

.product-category-section:nth-of-type(even) {
    background: #e9e5dc;
}

.product-category-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 55px;
}

.product-category-heading h2 {
    margin-top: 15px;
    color: #09111b;
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.06em;
}

.product-category-heading > strong {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    color: #0b1728;
    font-size: 3.6rem;
    font-weight: 400;
    line-height: .9;
}

.product-category-heading > strong small {
    padding-bottom: 5px;
    color: #8b9196;
    font-size: .48rem;
    font-weight: 700;
    letter-spacing: .12em;
}


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

.product-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(8,15,25,.12);
    background: rgba(8,15,25,.12);
}

.product-catalog-card {
    min-width: 0;
    background: #f8f6f1;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.product-catalog-card:hover {
    z-index: 3;
    box-shadow: 0 24px 65px rgba(6,12,22,.12);
    transform: translateY(-6px);
}


/* VISUAL */

.product-catalog-visual {
    position: relative;
    display: block;
    height: 330px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #08101c,
            #10223d
        );
}

.product-catalog-visual > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter:
        saturate(.75)
        contrast(1.02);
    transition: transform .65s ease;
}

.product-catalog-card:hover
.product-catalog-visual > img {
    transform: scale(1.035);
}

.product-catalog-number {
    position: absolute;
    z-index: 3;
    top: 21px;
    left: 23px;
    color: rgba(255,255,255,.68);
    font-size: .54rem;
    font-weight: 700;
}

.product-catalog-arrow {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(5,10,17,.28);
    color: #fff;
    backdrop-filter: blur(8px);
    transition:
        background .3s ease,
        transform .3s ease;
}

.product-catalog-card:hover
.product-catalog-arrow {
    background: #fff;
    color: #091321;
    transform: rotate(45deg);
}


/* NO IMAGE */

.product-technical-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(72,97,153,.28),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #050a12,
            #0c192d
        );
}

.product-technical-placeholder::before {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
}

.product-technical-placeholder::after {
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 95px;
    height: 1px;
    background: rgba(255,255,255,.13);
    content: "";
}

.product-technical-placeholder > span {
    color: rgba(255,255,255,.35);
    font-size: .48rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.product-technical-placeholder > strong {
    margin-top: 12px;
    color: #fff;
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -.06em;
}

.product-technical-placeholder > small {
    margin-top: 13px;
    color: #6b85bb;
    font-size: .48rem;
    font-weight: 700;
    letter-spacing: .15em;
}


/* CONTENT */

.product-catalog-content {
    min-height: 260px;
    padding: 29px 27px 30px;
}

.product-capacity {
    display: inline-flex;
    padding: 7px 10px;
    background: #0c1b33;
    color: #fff;
    font-size: .47rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.product-catalog-content h3 {
    max-width: 320px;
    margin-top: 18px;
    color: #0a121c;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
}

.product-catalog-content p {
    margin-top: 13px;
    color: #777f86;
    font-size: .72rem;
    line-height: 1.75;
}

.product-catalog-content > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding-bottom: 5px;
    border-bottom: 1px solid #0d1927;
    color: #0d1927;
    font-size: .53rem;
    font-weight: 700;
    letter-spacing: .08em;
    transition:
        gap .3s ease,
        color .3s ease;
}

.product-catalog-content > a:hover {
    gap: 16px;
    color: #284b83;
}


/* =========================================================
   PRODUCT DETAIL
========================================================= */

.product-detail-hero {
    padding: 155px 0 100px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(44,73,126,.25),
            transparent 30%
        ),
        #07101c;
}

.product-detail-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(480px, 1.1fr);
    align-items: center;
    gap: 85px;
}

.product-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.3);
    font-size: .48rem;
    font-weight: 700;
    letter-spacing: .09em;
}

.product-detail-breadcrumb a {
    color: #8ea6d0;
}

.product-detail-kicker {
    display: block;
    margin-top: 45px;
    color: #8da2ca;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.product-detail-copy h1 {
    max-width: 780px;
    margin-top: 20px;
    color: #fff;
    font-size: clamp(3.4rem, 5.4vw, 6.2rem);
    font-weight: 500;
    line-height: .97;
    letter-spacing: -.065em;
}

.product-detail-copy > p {
    max-width: 620px;
    margin-top: 27px;
    color: rgba(255,255,255,.44);
    font-size: .82rem;
    line-height: 1.9;
}

.product-detail-capacity {
    display: inline-flex;
    flex-direction: column;
    margin-top: 30px;
    padding: 16px 23px;
    border-left: 2px solid #5f79ae;
    background: rgba(255,255,255,.035);
}

.product-detail-capacity small {
    color: rgba(255,255,255,.28);
    font-size: .42rem;
    font-weight: 700;
    letter-spacing: .15em;
}

.product-detail-capacity strong {
    margin-top: 7px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
}

.product-detail-contact {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    margin-top: 35px;
    padding: 18px 22px;
    background: #fff;
    color: #07101c;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.product-detail-main-visual {
    min-height: 610px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    background: #0b1728;
}

.product-detail-main-visual > img {
    display: block;
    width: 100%;
    height: 610px;
    object-fit: cover;
}

.product-detail-placeholder {
    display: flex;
    height: 610px;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(35px, 5vw, 65px);
    background:
        radial-gradient(
            circle at 70% 10%,
            rgba(71,100,160,.34),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #060c15,
            #0d1d34
        );
}

.product-detail-placeholder > span {
    color: rgba(255,255,255,.34);
    font-size: .51rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.product-detail-placeholder-line {
    width: 45px;
    height: 1px;
    margin: 24px 0;
    background: #7188ba;
}

.product-detail-placeholder > strong {
    color: #fff;
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 400;
    line-height: .85;
    letter-spacing: -.08em;
}

.product-detail-placeholder h2 {
    max-width: 520px;
    margin-top: 24px;
    color: rgba(255,255,255,.75);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.35;
}

.product-detail-placeholder > small {
    margin-top: 28px;
    color: #7289b9;
    font-size: .47rem;
    font-weight: 700;
    letter-spacing: .17em;
}


/* INFO */

.product-detail-info-section {
    padding: 125px 0;
    background: #f2efe8;
}

.product-detail-info-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 80px;
}

.product-detail-info-grid > aside {
    display: flex;
    min-height: 330px;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 30px;
    border-right: 1px solid rgba(8,14,22,.12);
}

.product-detail-info-grid > aside span {
    color: #243e69;
    font-size: .65rem;
    font-weight: 700;
}

.product-detail-info-grid > aside small {
    color: #888f94;
    font-size: .47rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .14em;
}

.product-detail-info-grid h2 {
    max-width: 850px;
    margin-top: 18px;
    color: #08111b;
    font-size: clamp(3rem, 5vw, 5.4rem);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.06em;
}

.product-detail-info-grid h2 em {
    display: block;
    color: #253f6b;
    font-style: normal;
}

.product-detail-description,
.product-detail-default-description {
    max-width: 780px;
    margin-top: 35px;
    color: #6e777e;
    font-size: .84rem;
    line-height: 1.95;
}

.product-detail-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 50px;
    border-top: 1px solid rgba(8,14,22,.12);
    border-left: 1px solid rgba(8,14,22,.12);
}

.product-detail-specs > div {
    display: flex;
    min-height: 105px;
    flex-direction: column;
    justify-content: center;
    padding: 20px 24px;
    border-right: 1px solid rgba(8,14,22,.12);
    border-bottom: 1px solid rgba(8,14,22,.12);
}

.product-detail-specs span {
    color: #94999d;
    font-size: .44rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.product-detail-specs strong {
    margin-top: 8px;
    color: #142233;
    font-size: .83rem;
}


/* GALLERY */

.product-detail-gallery-section {
    padding: 120px 0;
    background: #08111d;
}

.product-gallery-heading {
    margin-bottom: 45px;
}

.product-gallery-heading h2 {
    max-width: 800px;
    margin-top: 18px;
    color: #fff;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.06em;
}

.product-gallery-heading h2 em {
    display: block;
    color: #6f85b6;
    font-style: normal;
}

.product-detail-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.product-detail-gallery a {
    display: block;
    height: 430px;
    overflow: hidden;
    background: #111b28;
}

.product-detail-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s ease;
}

.product-detail-gallery a:hover img {
    transform: scale(1.035);
}


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

@media (max-width: 1100px) {

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

    .product-detail-hero-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-main-visual,
    .product-detail-main-visual > img,
    .product-detail-placeholder {
        height: 540px;
        min-height: 540px;
    }
}


@media (max-width: 720px) {

    .products-catalog-hero {
        padding: 125px 0 75px;
    }

    .products-catalog-hero h1 {
        font-size: clamp(3rem, 13vw, 4.5rem);
    }

    .products-category-nav {
        top: 68px;
    }

    .products-category-nav-track a {
        min-height: 60px;
        padding: 0 19px;
    }

    .product-category-section {
        padding: 75px 0;
    }

    .product-category-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .product-category-heading h2 {
        font-size: clamp(2.8rem, 12vw, 4rem);
    }

    .product-catalog-grid {
        grid-template-columns: 1fr;
    }

    .product-catalog-visual {
        height: 300px;
    }

    .product-detail-hero {
        padding: 120px 0 70px;
    }

    .product-detail-hero-grid {
        gap: 45px;
    }

    .product-detail-copy h1 {
        font-size: clamp(3rem, 12vw, 4.3rem);
    }

    .product-detail-main-visual,
    .product-detail-main-visual > img,
    .product-detail-placeholder {
        height: 410px;
        min-height: 410px;
    }

    .product-detail-info-section {
        padding: 80px 0;
    }

    .product-detail-info-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .product-detail-info-grid > aside {
        min-height: auto;
        flex-direction: row;
        padding-right: 0;
        padding-bottom: 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(8,14,22,.12);
    }

    .product-detail-info-grid h2 {
        font-size: clamp(2.9rem, 12vw, 4.1rem);
    }

    .product-detail-specs {
        grid-template-columns: 1fr;
    }

    .product-detail-gallery-section {
        padding: 80px 0;
    }

    .product-detail-gallery {
        grid-template-columns: 1fr;
    }

    .product-detail-gallery a {
        height: 310px;
    }
}

/* =========================================================
   SEBAT MAKİNA
   HERO İHRACAT ÜLKELERİ MARQUEE
========================================================= */

.hero-export-marquee {
    position: absolute;
    z-index: 50;

    right: 50%;
    bottom: -46px;

    width: min(720px, 94vw);

    overflow: hidden;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);

    background:
        linear-gradient(
            90deg,
            rgba(5, 11, 18, 0.35),
            rgba(8, 20, 32, 0.58),
            rgba(5, 11, 18, 0.35)
        );

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.16);

    transform:
        translateX(50%);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );
}


/* =========================================================
   HAREKET EDEN TRACK
========================================================= */

.hero-export-marquee-track {
    display: flex;

    width: max-content;

    will-change: transform;

    animation:
        sebatExportMarquee
        48s
        linear
        infinite;
}


/* =========================================================
   HER KOPYA
========================================================= */

.hero-export-marquee-group {
    display: flex;

    flex-shrink: 0;

    align-items: center;
}


/* =========================================================
   ÜLKE
========================================================= */

.hero-export-country {
    position: relative;

    display: inline-flex;

    flex-shrink: 0;

    align-items: center;

    gap: 10px;

    min-height: 50px;

    padding:
        0
        22px;

    color:
        rgba(255, 255, 255, 0.58);

    font-family:
        "Manrope",
        sans-serif;

    font-size: 0.56rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.15em;

    white-space: nowrap;

    transition:
        color 0.25s ease;
}


.hero-export-country:hover {
    color: #ffffff;
}


/* =========================================================
   DİKEY AYIRICI
========================================================= */

.hero-export-country::after {
    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 15px;

    background:
        rgba(255, 255, 255, 0.10);

    content: "";

    transform:
        translateY(-50%);
}


/* =========================================================
   NOKTA
========================================================= */

.hero-export-dot {
    width: 4px;
    height: 4px;

    flex: 0 0 4px;

    border-radius: 50%;

    background: #9caec0;

    box-shadow:
        0 0 0 3px
        rgba(120, 145, 170, 0.07),
        0 0 12px
        rgba(120, 145, 170, 0.32);
}


/* =========================================================
   ANİMASYON
========================================================= */

@keyframes sebatExportMarquee {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(-50%, 0, 0);
    }

}


/* Mouse üzerine geldiğinde durdur */

.hero-export-marquee:hover
.hero-export-marquee-track {
    animation-play-state: paused;
}


/* =========================================================
   GLOBE ALANI İÇİN ALT BOŞLUK
========================================================= */

.home-hero-globe-visual {
    padding-bottom: 55px;
}


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

@media (max-width: 1100px) {

    .hero-export-marquee {
        bottom: -32px;

        width:
            min(
                680px,
                92vw
            );
    }

}


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

@media (max-width: 720px) {

    .home-hero-globe-visual {
        padding-bottom: 0;
    }


    .hero-export-marquee {
        position: absolute;

        right: 50%;
        bottom: -8px;

        width:
            min(
                100vw,
                430px
            );

        transform:
            translateX(50%);
    }


    .hero-export-country {
        min-height: 43px;

        padding:
            0
            16px;

        font-size: 0.48rem;

        letter-spacing: 0.12em;
    }


    .hero-export-dot {
        width: 3px;
        height: 3px;

        flex-basis: 3px;
    }


    .hero-export-marquee-track {
        animation-duration: 40s;
    }

}


/* =========================================================
   ÇOK KÜÇÜK TELEFON
========================================================= */

@media (max-width: 390px) {

    .hero-export-marquee {
        width: 100vw;
    }


    .hero-export-country {
        min-height: 40px;

        padding:
            0
            13px;

        font-size: 0.44rem;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-export-marquee-track {
        animation: none;
    }

}

/* =========================================================
   SEBAT MAKİNA
   KURUMSAL YENİ BÖLÜMLER
========================================================= */
/* =========================================================
   NEDEN SEBAT MAKİNA
   PREMIUM SECTION
========================================================= */
/* =========================================================
   SEBAT MAKİNA
   HERO GLOBAL MESAJ
========================================================= */

.home-hero-global-tag {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding-left: 17px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.14);

    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.48rem;
    font-weight: 700;

    letter-spacing: 0.15em;

    white-space: nowrap;
}


.home-hero-global-tag i {
    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #d1c19d;

    box-shadow:
        0 0 0 4px rgba(209, 193, 157, 0.07),
        0 0 15px rgba(209, 193, 157, 0.35);
}


/* =========================================================
   ANA GLOBAL MESAJ
========================================================= */

.home-global-hero-message {
    position: relative;

    max-width: 650px;

    margin:
        0
        0
        27px;
}


.home-global-hero-message-kicker {
    display: block;

    margin-bottom: 11px;

    color: #d1c19d;

    font-size: 0.48rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.home-global-hero-message-line {
    display: flex;

    align-items: stretch;

    gap: 17px;
}


.home-global-message-rule {
    position: relative;

    width: 3px;

    flex: 0 0 3px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.11);
}


.home-global-message-rule::before {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 46%;

    border-radius: inherit;

    background: #d1c19d;

    box-shadow:
        0 0 18px
        rgba(209, 193, 157, 0.35);

    content: "";
}


.home-global-hero-message p {
    max-width: 620px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.25rem,
            1.65vw,
            1.7rem
        );

    font-weight: 400;

    line-height: 1.32;

    letter-spacing: -0.035em;
}


.home-global-hero-message p strong {
    display: block;

    margin-top: 2px;

    color: #ffffff;

    font-size: 1.12em;
    font-weight: 650;

    letter-spacing: -0.045em;
}


/* =========================================================
   HAFİF GİRİŞ ANİMASYONU
========================================================= */

.home-global-hero-message.visible
.home-global-message-rule::before {
    animation:
        sebatGlobalRule
        1.2s
        cubic-bezier(0.2, 0.72, 0.2, 1)
        both;
}


@keyframes sebatGlobalRule {

    from {
        height: 0;
        opacity: 0;
    }

    to {
        height: 46%;
        opacity: 1;
    }

}


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

@media (max-width: 1100px) {

    .home-global-hero-message {
        max-width: 720px;
    }

    .home-global-hero-message p {
        font-size:
            clamp(
                1.2rem,
                2vw,
                1.6rem
            );
    }

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 720px) {

    .home-hero-topline {
        flex-wrap: wrap;

        gap: 10px;
    }


    .home-hero-global-tag {
        padding-left: 10px;

        font-size: 0.39rem;

        letter-spacing: 0.11em;
    }


    .home-global-hero-message {
        margin-bottom: 22px;
    }


    .home-global-hero-message-kicker {
        margin-bottom: 9px;

        font-size: 0.4rem;

        letter-spacing: 0.17em;
    }


    .home-global-hero-message-line {
        gap: 13px;
    }


    .home-global-message-rule {
        width: 2px;

        flex-basis: 2px;
    }


    .home-global-hero-message p {
        font-size:
            clamp(
                1.05rem,
                5vw,
                1.3rem
            );

        line-height: 1.38;
    }

}
.about-why-premium {
    position: relative;

    overflow: hidden;

    padding: 140px 0;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(17, 46, 75, 0.48),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #03080e 0%,
            #07111c 48%,
            #08182a 100%
        );

    color: #ffffff;
}


/* grid dekorasyonu */

.about-why-premium::before {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );

    background-size: 85px 85px;

    content: "";

    pointer-events: none;
}


/* dekoratif daire */

.about-why-premium::after {
    position: absolute;

    top: -330px;
    right: -280px;

    width: 720px;
    height: 720px;

    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 50%;

    content: "";

    pointer-events: none;
}


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

.about-why-header {
    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: end;

    gap: 90px;

    margin-bottom: 65px;
}


.about-why-header h2 {
    max-width: 920px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            3.5rem,
            5.8vw,
            6.3rem
        );

    font-weight: 500;

    line-height: 0.96;

    letter-spacing: -0.065em;
}


.about-why-header h2 em {
    display: block;

    color: #253f67;

    font-style: normal;
}


.about-why-header > p {
    max-width: 500px;

    padding-bottom: 8px;

    color:
        rgba(
            255,
            255,
            255,
            0.47
        );

    font-size: 0.82rem;

    line-height: 1.9;
}


/* =========================================================
   ANA STATEMENT
========================================================= */

.about-why-statement {
    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: stretch;

    margin-bottom: 45px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.about-why-statement-index {
    display: flex;

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

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    color:
        rgba(
            255,
            255,
            255,
            0.10
        );

    font-size: 2.7rem;

    font-weight: 500;

    letter-spacing: -0.06em;

    writing-mode: vertical-rl;

    transform: rotate(180deg);
}


.about-why-statement-content {
    padding:
        clamp(
            35px,
            4vw,
            58px
        );
}


.about-why-statement-content > span {
    color: var(--gold-soft);

    font-size: 0.5rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}


/* =========================================================
   NEDEN SEBAT - ANA MESAJ YAZISI
========================================================= */

.about-why-statement blockquote {
    position: relative;

    max-width: 1050px;

    margin: 22px 0 0;
    padding: 0 0 0 28px;

    border-left: 3px solid #233f68;

    color: rgba(255, 255, 255, 0.92);

    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;

    font-size: clamp(1.35rem, 2vw, 2rem);

    font-style: normal;
    font-weight: 400;

    line-height: 1.55;

    letter-spacing: -0.025em;
}


/* İlk satıra hafif vurgu */

.about-why-statement blockquote::before {
    content: "";

    position: absolute;

    left: -3px;
    top: 0;

    width: 3px;
    height: 48px;

    background: #ffffff;
}


/* MOBİL */

@media (max-width: 720px) {

    .about-why-statement blockquote {
        margin-top: 18px;

        padding-left: 20px;

        font-size: 1.12rem;

        line-height: 1.6;

        letter-spacing: -0.015em;
    }

}


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

.about-why-premium-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}


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

.about-why-premium-card {
    position: relative;

    display: flex;

    min-height: 360px;

    flex-direction: column;
    justify-content: space-between;

    padding: 29px;

    overflow: hidden;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}


.about-why-premium-card::after {
    position: absolute;

    right: -100px;
    bottom: -100px;

    width: 220px;
    height: 220px;

    border:
        1px solid
        rgba(
            45,
            70,
            108,
            0.2
        );

    border-radius: 50%;

    content: "";

    transition:
        transform 0.5s ease;
}


.about-why-premium-card:hover {
    z-index: 4;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    transform:
        translateY(-7px);
}


.about-why-premium-card:hover::after {
    transform: scale(1.3);
}


/* =========================================================
   CARD TOP
========================================================= */

.about-why-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.about-why-card-top > span {
    color:
        rgba(
            255,
            255,
            255,
            0.25
        );

    font-size: 0.5rem;
    font-weight: 700;
}


.about-why-card-top > i {
    display: grid;

    width: 55px;
    height: 55px;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-radius: 50%;

    color: var(--gold-soft);

    font-size: 1.1rem;
}


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

.about-why-card-content {
    position: relative;
    z-index: 2;

    margin-top: 75px;
}


.about-why-card-content h3 {
    max-width: 310px;

    color: #ffffff;

    font-size:
        clamp(
            1.45rem,
            2vw,
            2rem
        );

    font-weight: 500;

    line-height: 1.18;

    letter-spacing: -0.025em;
}


.about-why-card-content p {
    max-width: 320px;

    margin-top: 15px;

    color:
        rgba(
            255,
            255,
            255,
            0.38
        );

    font-size: 0.72rem;

    line-height: 1.78;
}


/* =========================================================
   ALT MESAJ
========================================================= */

.about-why-footer {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        0.45fr
        1fr;

    gap: 60px;

    margin-top: 45px;

    padding-top: 31px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );
}


.about-why-footer > span {
    color: var(--gold-soft);

    font-size: 0.48rem;
    font-weight: 700;

    letter-spacing: 0.17em;
}


.about-why-footer > p {
    max-width: 760px;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.12rem;
    font-style: italic;

    line-height: 1.65;
}


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

@media (max-width: 1100px) {

    .about-why-header {
        grid-template-columns: 1fr;

        gap: 25px;
    }


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

}


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

@media (max-width: 720px) {

    .about-why-premium {
        padding:
            82px
            0;
    }


    .about-why-header {
        margin-bottom: 42px;
    }


    .about-why-header h2 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.4rem
            );
    }


    .about-why-header > p {
        font-size: 0.77rem;
    }


    .about-why-statement {
        grid-template-columns: 1fr;
    }


    .about-why-statement-index {
        min-height: 55px;

        justify-content: flex-start;

        padding:
            0
            20px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.1
            );

        font-size: 1.5rem;

        writing-mode: initial;

        transform: none;
    }


    .about-why-statement-content {
        padding: 27px 20px;
    }


    .about-why-statement blockquote {
        font-size: 1.3rem;
    }


    .about-why-premium-grid {
        grid-template-columns: 1fr;
    }


    .about-why-premium-card {
        min-height: 290px;

        padding: 23px;
    }


    .about-why-card-content {
        margin-top: 55px;
    }


    .about-why-footer {
        grid-template-columns: 1fr;

        gap: 15px;
    }

}

/* =========================================================
   KURUMSAL FELSEFEMİZ
========================================================= */

.about-philosophy-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background: #f1eee7;
}

.about-philosophy-section::before {
    position: absolute;
    top: -250px;
    right: -190px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(7, 27, 49, 0.06);
    border-radius: 50%;
    content: "";
}

.about-philosophy-heading {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.46fr;
    align-items: end;
    gap: 80px;
    margin-bottom: 60px;
}

.about-philosophy-heading h2 {
    max-width: 900px;
    color: #080d12;
    font-size: clamp(3.3rem, 5.3vw, 5.9rem);
    font-weight: 500;
    line-height: 0.97;
    letter-spacing: -0.065em;
}

.about-philosophy-heading h2 em {
    display: block;
    color: #0b2745;
    font-style: normal;
}

.about-philosophy-heading > p {
    max-width: 430px;
    padding-bottom: 7px;
    color: #747b80;
    font-size: 0.81rem;
    line-height: 1.88;
}

.about-philosophy-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(8, 14, 20, 0.13);
    border-left: 1px solid rgba(8, 14, 20, 0.13);
}

.about-philosophy-card {
    position: relative;
    min-height: 390px;
    padding: 27px;
    border-right: 1px solid rgba(8, 14, 20, 0.13);
    border-bottom: 1px solid rgba(8, 14, 20, 0.13);
    transition:
        background 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.about-philosophy-card:hover {
    z-index: 2;
    background: #ffffff;
    box-shadow: 0 25px 65px rgba(7, 12, 18, 0.07);
    transform: translateY(-7px);
}

.about-philosophy-card > span {
    color: #969b9e;
    font-size: 0.5rem;
    font-weight: 700;
}

.about-philosophy-icon {
    display: grid;
    width: 59px;
    height: 59px;
    margin-top: 70px;
    place-items: center;
    border: 1px solid rgba(11, 39, 69, 0.16);
    border-radius: 50%;
    color: #0b2745;
    font-size: 1.18rem;
}

.about-philosophy-card h3 {
    margin-top: 28px;
    color: #101921;
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.16;
}

.about-philosophy-card p {
    max-width: 280px;
    margin-top: 14px;
    color: #747b80;
    font-size: 0.71rem;
    line-height: 1.78;
}


/* =========================================================
   KALİTE POLİTİKAMIZ
========================================================= */

.about-quality-section {
    position: relative;
    overflow: hidden;
    padding: 135px 0;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(11, 39, 69, 0.22),
            transparent 28%
        ),
        #070c12;
}

.about-quality-section::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px
        );
    background-size: 82px 82px;
    content: "";
}

.about-quality-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    align-items: start;
    gap: 115px;
}

.about-quality-heading {
    position: sticky;
    top: 140px;
}

.about-quality-heading h2 {
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(3.3rem, 5.3vw, 5.9rem);
    font-weight: 500;
    line-height: 0.97;
    letter-spacing: -0.065em;
}

.about-quality-heading h2 em {
    display: block;
    color: #315d7f;
    font-style: normal;
}

.about-quality-lead {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.69);
    font-family: "Playfair Display", serif;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    font-style: italic;
    line-height: 1.7;
}

.about-quality-list {
    margin-top: 42px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.about-quality-list > div {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    padding: 29px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.about-quality-list > div > span {
    padding-top: 4px;
    color: #d1c19d;
    font-size: 0.49rem;
    font-weight: 700;
}

.about-quality-list strong {
    display: block;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
}

.about-quality-list p {
    max-width: 560px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.39);
    font-size: 0.72rem;
    line-height: 1.76;
}


/* =========================================================
   FAALİYET ALANLARI
========================================================= */

.about-activity-section {
    position: relative;
    overflow: hidden;
    padding: 130px 0;
    background: #ebe7de;
}

.about-activity-heading {
    display: grid;
    grid-template-columns: 1fr 0.45fr;
    align-items: end;
    gap: 80px;
    margin-bottom: 60px;
}

.about-activity-heading h2 {
    max-width: 900px;
    color: #080d12;
    font-size: clamp(3.3rem, 5.3vw, 5.9rem);
    font-weight: 500;
    line-height: 0.97;
    letter-spacing: -0.065em;
}

.about-activity-heading h2 em {
    display: block;
    color: #0b2745;
    font-style: normal;
}

.about-activity-heading > p {
    max-width: 430px;
    color: #747b80;
    font-size: 0.81rem;
    line-height: 1.88;
}

.about-activity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(8, 14, 20, 0.13);
    border-left: 1px solid rgba(8, 14, 20, 0.13);
}

.about-activity-card {
    min-height: 370px;
    padding: 27px;
    border-right: 1px solid rgba(8, 14, 20, 0.13);
    border-bottom: 1px solid rgba(8, 14, 20, 0.13);
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.about-activity-card:hover {
    background: rgba(255, 255, 255, 0.52);
    transform: translateY(-7px);
}

.about-activity-card > span {
    color: #919698;
    font-size: 0.5rem;
    font-weight: 700;
}

.about-activity-card > i {
    display: grid;
    width: 59px;
    height: 59px;
    margin-top: 65px;
    place-items: center;
    border: 1px solid rgba(11, 39, 69, 0.16);
    border-radius: 50%;
    color: #0b2745;
    font-size: 1.2rem;
}

.about-activity-card h3 {
    margin-top: 26px;
    color: #101920;
    font-size: 1.55rem;
    font-weight: 500;
}

.about-activity-card p {
    max-width: 270px;
    margin-top: 13px;
    color: #747b80;
    font-size: 0.71rem;
    line-height: 1.75;
}


/* =========================================================
   NEDEN SEBAT MAKİNA
========================================================= */

.about-why-section {
    position: relative;
    overflow: hidden;
    padding: 135px 0;
    background: #071019;
}

.about-why-section::after {
    position: absolute;
    top: -250px;
    right: -170px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(49, 93, 127, 0.12);
    border-radius: 50%;
    content: "";
}

.about-why-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.86fr 1fr;
    gap: 100px;
}

.about-why-main h2 {
    max-width: 720px;
    color: #ffffff;
    font-size: clamp(3.3rem, 5.3vw, 5.9rem);
    font-weight: 500;
    line-height: 0.97;
    letter-spacing: -0.065em;
}

.about-why-main h2 em {
    display: block;
    color: #315d7f;
    font-style: normal;
}

.about-why-main > p {
    max-width: 610px;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.81rem;
    line-height: 1.9;
}

.about-why-quote {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    max-width: 620px;
    margin-top: 47px;
    padding-top: 31px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.about-why-quote i {
    color: #d1c19d;
    font-size: 1.6rem;
}

.about-why-quote blockquote {
    color: rgba(255, 255, 255, 0.75);
    font-family: "Playfair Display", serif;
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.72;
}

.about-why-features {
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.about-why-card {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 20px;
    min-height: 128px;
    align-items: center;
    padding: 22px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
    transition:
        background 0.3s ease,
        padding-left 0.3s ease;
}

.about-why-card:hover {
    padding-left: 20px;
    background: rgba(255, 255, 255, 0.028);
}

.about-why-card > span {
    color: #d1c19d;
    font-size: 0.48rem;
    font-weight: 700;
}

.about-why-card strong {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
}

.about-why-card p {
    max-width: 520px;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.66rem;
    line-height: 1.65;
}


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

@media (max-width: 1100px) {

    .about-philosophy-heading,
    .about-activity-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

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

    .about-quality-grid,
    .about-why-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .about-quality-heading {
        position: static;
    }
}


@media (max-width: 720px) {

    .about-philosophy-section,
    .about-quality-section,
    .about-activity-section,
    .about-why-section {
        padding: 82px 0;
    }

    .about-philosophy-heading h2,
    .about-quality-heading h2,
    .about-activity-heading h2,
    .about-why-main h2 {
        font-size:
            clamp(
                2.9rem,
                12.5vw,
                4.3rem
            );
    }

    .about-philosophy-grid,
    .about-activity-grid {
        grid-template-columns: 1fr;
    }

    .about-philosophy-card,
    .about-activity-card {
        min-height: 315px;
    }

    .about-philosophy-icon,
    .about-activity-card > i {
        margin-top: 45px;
    }

    .about-quality-list > div {
        grid-template-columns: 38px 1fr;
        gap: 12px;
    }

    .about-why-quote {
        grid-template-columns: 35px 1fr;
    }

    .about-why-quote blockquote {
        font-size: 1rem;
    }

    .about-why-card {
        grid-template-columns: 38px 1fr;
        gap: 12px;
        min-height: 115px;
    }
}

/* =========================================================
   SEBAT MAKİNA
   ANA SAYFA MAVİLERİ -> LOGO LACİVERT
   STYLE.CSS DOSYASININ EN ALTINA EKLE
========================================================= */

:root {
    --sebat-navy: #0b2745;
    --sebat-navy-dark: #071b31;
    --sebat-navy-deep: #041322;
    --sebat-navy-medium: #123a5c;
    --sebat-navy-soft: #1d4a70;
    --sebat-navy-light: #315d7f;
}


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

/* "üretime" */
.home-hero h1 > span {
    color: var(--sebat-navy-light) !important;
}

/* hero arka planındaki mavi aura */
.home-hero {
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(11, 39, 69, 0.34),
            transparent 27%
        ),
        linear-gradient(
            125deg,
            #05080c 0%,
            #07101a 53%,
            #08131d 100%
        ) !important;
}


/* =========================================================
   DÜNYA KÜRESİ
========================================================= */

.world-globe-aura {
    background:
        radial-gradient(
            circle,
            rgba(11, 39, 69, 0.34) 0%,
            rgba(11, 39, 69, 0.13) 42%,
            transparent 73%
        ) !important;
}

.world-globe {
    border-color: rgba(49, 93, 127, 0.38) !important;

    background:
        radial-gradient(
            circle at 28% 25%,
            #153b5a 0%,
            #0d2b46 28%,
            #081e33 49%,
            #051524 71%,
            #02090e 100%
        ) !important;

    box-shadow:
        inset 42px 10px 75px rgba(29, 74, 112, 0.14),
        inset -75px -10px 100px rgba(0, 0, 0, 0.66),
        0 40px 105px rgba(0, 0, 0, 0.34),
        0 0 75px rgba(11, 39, 69, 0.18) !important;
}


/* harita rengi */

.world-map-copy > img {
    filter:
        brightness(1.52)
        contrast(0.95)
        saturate(0)
        sepia(0.12)
        drop-shadow(
            0 0 8px
            rgba(29, 74, 112, 0.28)
        ) !important;
}


/* =========================================================
   DÜNYA NOKTALARI
========================================================= */

.world-marker-dot {
    background: var(--sebat-navy-light) !important;

    box-shadow:
        0 0 0 4px rgba(29, 74, 112, 0.18),
        0 0 17px rgba(29, 74, 112, 0.9) !important;
}

.world-marker-pulse {
    border-color: rgba(49, 93, 127, 0.65) !important;
}

.marker-important .world-marker-dot {
    background: var(--sebat-navy-medium) !important;

    box-shadow:
        0 0 0 6px rgba(18, 58, 92, 0.20),
        0 0 31px rgba(29, 74, 112, 0.95) !important;
}


/* küre çizgileri */

.world-latitude,
.world-longitude {
    border-color: rgba(49, 93, 127, 0.20) !important;
}


/* küre kenar ışığı */

.world-globe-edge {
    box-shadow:
        inset 18px 0 34px rgba(29, 74, 112, 0.13),
        inset -54px 0 70px rgba(0, 0, 0, 0.53),
        inset 0 0 0 1px rgba(49, 93, 127, 0.22) !important;
}


/* yörüngeler */

.world-orbit-one {
    border-color: rgba(49, 93, 127, 0.22) !important;
}

.world-orbit-two {
    border-color: rgba(49, 93, 127, 0.15) !important;
}

.world-orbit-one::before {
    background: var(--sebat-navy-light) !important;

    box-shadow:
        0 0 0 5px rgba(29, 74, 112, 0.14),
        0 0 24px rgba(29, 74, 112, 0.75) !important;
}


/* global erişim noktası */

.world-status-dot {
    background: var(--sebat-navy-light) !important;

    box-shadow:
        0 0 0 5px rgba(29, 74, 112, 0.14),
        0 0 18px rgba(29, 74, 112, 0.82) !important;
}


/* =========================================================
   MANIFESTO
========================================================= */

.home-manifesto-content h2 em {
    color: var(--sebat-navy) !important;
}

.home-text-link:hover {
    color: var(--sebat-navy) !important;
}


/* =========================================================
   MAKİNELER
========================================================= */

.home-section-heading h2 em {
    color: var(--sebat-navy-light) !important;
}


/* =========================================================
   LEGACY / TARİH
========================================================= */

.home-legacy-content h2 em {
    color: var(--sebat-navy) !important;
}


/* =========================================================
   GLOBAL ERİŞİM
========================================================= */

.home-global-summary {
    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(11, 39, 69, 0.28),
            transparent 27%
        ),
        #070c12 !important;
}

.home-global-summary-heading h2 em {
    color: var(--sebat-navy-light) !important;
}


/* =========================================================
   REFERANSLAR
========================================================= */

.home-references-heading h2 em {
    color: var(--sebat-navy) !important;
}

.home-reference-item::after {
    background: var(--sebat-navy-medium) !important;
}

.home-reference-bottom a:hover {
    color: var(--sebat-navy) !important;
}


/* =========================================================
   ÜRETİM PANORAMA
========================================================= */

.home-production-content h2 em {
    color: var(--sebat-navy-light) !important;
}


/* =========================================================
   INNER PAGE BAŞLIKLARI
========================================================= */

.inner-hero-content h1 em {
    color: var(--sebat-navy-light) !important;
}

.about-intro-content h2 em {
    color: var(--sebat-navy) !important;
}

.about-story-content h2 em {
    color: var(--sebat-navy-light) !important;
}

.about-numbers-heading h2 em {
    color: var(--sebat-navy) !important;
}

.about-values-heading h2 em {
    color: var(--sebat-navy-light) !important;
}

.about-timeline-heading h2 em {
    color: var(--sebat-navy) !important;
}


/* timeline mavi noktalar */

.about-timeline-dot::before {
    background: var(--sebat-navy-medium) !important;

    box-shadow:
        0 0 0 1px rgba(11, 39, 69, 0.45),
        0 0 0 7px rgba(11, 39, 69, 0.10) !important;
}

.about-timeline-copy > span {
    color: var(--sebat-navy-medium) !important;
}


/* =========================================================
   MAKİNELER SAYFASI
========================================================= */

.machines-intro-grid h2 em {
    color: var(--sebat-navy) !important;
}

.machine-product-content h2 em {
    color: var(--sebat-navy) !important;
}

.machine-product-features i {
    color: var(--sebat-navy-medium) !important;
}

.machine-product-link:hover {
    color: var(--sebat-navy) !important;
}

.machines-process-heading h2 em {
    color: var(--sebat-navy-light) !important;
}


/* =========================================================
   YÖNETİMDEN MESAJ
========================================================= */

.management-message-heading h2 em {
    color: var(--sebat-navy) !important;
}

.management-quote-icon {
    color: var(--sebat-navy) !important;
}


/* =========================================================
   REFERANSLAR SAYFASI
========================================================= */

.references-inner-hero {
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(11, 39, 69, 0.30),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(11, 39, 69, 0.10),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #05080c 0%,
            #07101a 54%,
            #081521 100%
        ) !important;
}

.references-intro-content h2 em {
    color: var(--sebat-navy) !important;
}

.references-list-heading h2 em {
    color: var(--sebat-navy) !important;
}

.reference-brand-letter {
    color: var(--sebat-navy) !important;
}

.reference-brand-line {
    background: var(--sebat-navy-medium) !important;
}

.references-sectors-heading h2 em {
    color: var(--sebat-navy-light) !important;
}

.references-trust-content h2 em {
    color: var(--sebat-navy-light) !important;
}


/* =========================================================
   İLETİŞİM
========================================================= */

.contact-new-hero {
    background:
        radial-gradient(
            circle at 82% 26%,
            rgba(11, 39, 69, 0.30),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(11, 39, 69, 0.09),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #05080c 0%,
            #07101a 55%,
            #081521 100%
        ) !important;
}

.contact-new-hero-content h1 em {
    color: var(--sebat-navy-light) !important;
}

.contact-new-info h2 em {
    color: var(--sebat-navy) !important;
}

.contact-new-card-icon {
    color: var(--sebat-navy) !important;
}

a.contact-new-card:hover .contact-new-arrow {
    color: var(--sebat-navy) !important;
}

.contact-new-input input:focus,
.contact-new-input select:focus,
.contact-new-input textarea:focus {
    border-color: var(--sebat-navy-medium) !important;

    box-shadow:
        0 0 0 3px
        rgba(11, 39, 69, 0.09) !important;
}

.contact-new-security i {
    color: var(--sebat-navy) !important;
}

.contact-new-submit:hover {
    background: var(--sebat-navy) !important;
}

.contact-new-form-message {
    color: var(--sebat-navy) !important;
}

.contact-location-heading h2 em {
    color: var(--sebat-navy) !important;
}
/* =========================================================
   SEBAT MAKİNA
   GERÇEK KOORDİNATLI DÖNEN DÜNYA
========================================================= */

.home-hero-globe-visual {
    position: relative;
    display: flex;
    min-height: 650px;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}


/* =========================================================
   KÜRE
========================================================= */

.world-globe-shell {
    position: relative;
    z-index: 5;

    width: 470px;
    height: 470px;

    flex: 0 0 470px;

    border-radius: 50%;
}


.world-globe-aura {
    position: absolute;
    z-index: -1;

    inset: -42px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(75, 162, 211, 0.17) 0%,
            rgba(75, 162, 211, 0.06) 42%,
            transparent 73%
        );

    filter: blur(12px);

    pointer-events: none;
}


.world-globe {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid rgba(135, 199, 235, 0.27);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 28% 25%,
            #265975 0%,
            #143d54 28%,
            #0a2738 49%,
            #051823 71%,
            #02090e 100%
        );

    box-shadow:
        inset 42px 10px 75px rgba(105, 187, 231, 0.08),
        inset -75px -10px 100px rgba(0, 0, 0, 0.66),
        0 40px 105px rgba(0, 0, 0, 0.34),
        0 0 75px rgba(71, 157, 207, 0.11);
}


/* =========================================================
   DÖNEN DÜNYA
========================================================= */

.world-map-rotation {
    position: absolute;
    z-index: 3;

    top: 0;
    left: 0;

    display: flex;

    width: 200%;
    height: 100%;

    animation:
        sebatWorldRotate
        40s
        linear
        infinite;

    will-change: transform;
}


@keyframes sebatWorldRotate {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }

}


.world-map-copy {
    position: relative;

    width: 50%;
    height: 100%;

    flex: 0 0 50%;
}


/* =========================================================
   HARİTA

   Haritanın kapladığı alan:
   top: 14%
   height: 72%

   JS markerları tam olarak bu alana yerleştiriyor.
========================================================= */

.world-map-copy > img {
    position: absolute;
    z-index: 1;

    top: 14%;
    left: 0;

    display: block;

    width: 100%;
    height: 72%;

    max-width: none;

    object-fit: fill;

    opacity: 0.88;

    filter:
        brightness(1.78)
        contrast(0.86)
        saturate(0)
        drop-shadow(
            0 0 8px
            rgba(117, 191, 232, 0.20)
        );

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   MARKER KATMANI
========================================================= */

.world-marker-layer {
    position: absolute;
    z-index: 7;

    inset: 0;

    pointer-events: none;
}


/* =========================================================
   MARKER

   --marker-x ve --marker-y JS'ten geliyor.
========================================================= */

.world-marker {
    position: absolute;
    z-index: 8;

    top: var(--marker-y);
    left: var(--marker-x);

    width: 18px;
    height: 18px;

    transform: translate(-50%, -50%);

    pointer-events: none;
}


/* =========================================================
   NOKTA
========================================================= */

.world-marker-dot {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    border: 1.5px solid #ffffff;
    border-radius: 50%;

    background: #72c5ef;

    box-shadow:
        0 0 0 4px rgba(114, 197, 239, 0.11),
        0 0 17px rgba(114, 197, 239, 0.82);

    transform: translate(-50%, -50%);
}


/* =========================================================
   PULSE
========================================================= */

.world-marker-pulse {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 25px;
    height: 25px;

    border: 1px solid rgba(126, 205, 247, 0.44);
    border-radius: 50%;

    animation:
        worldMarkerPulse
        2.8s
        ease-out
        infinite;

    transform: translate(-50%, -50%);
}


@keyframes worldMarkerPulse {

    0% {
        opacity: 0.95;

        transform:
            translate(-50%, -50%)
            scale(0.35);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.75);
    }

}


/* =========================================================
   TÜRKİYE
========================================================= */

.marker-important {
    z-index: 30;
}


.marker-important .world-marker-dot {
    width: 12px;
    height: 12px;

    border: 3px solid #ffffff;

    background: #168fc8;

    box-shadow:
        0 0 0 6px rgba(121, 203, 245, 0.12),
        0 0 31px rgba(121, 203, 245, 0.98);
}


.marker-important .world-marker-pulse {
    width: 39px;
    height: 39px;

    border-color: rgba(255, 255, 255, 0.50);
}


/* =========================================================
   TÜRKİYE LABEL
========================================================= */

.world-marker-label {
    position: absolute;

    top: 50%;
    left: 27px;

    display: flex;

    min-width: 116px;

    flex-direction: column;

    padding: 8px 10px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(3, 14, 22, 0.91);

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.32);

    transform: translateY(-50%);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.world-marker-label small {
    color: rgba(255, 255, 255, 0.40);

    font-size: 0.31rem;

    font-weight: 700;

    letter-spacing: 0.13em;
}


.world-marker-label strong {
    margin-top: 3px;

    color: #ffffff;

    font-size: 0.56rem;

    font-weight: 700;

    letter-spacing: 0.06em;
}


/* =========================================================
   SABİT KÜRE IZGARASI
========================================================= */

.world-globe-grid {
    position: absolute;
    z-index: 15;

    inset: 0;

    border-radius: 50%;

    pointer-events: none;
}


/* ENLEM */

.world-latitude {
    position: absolute;

    left: 7%;

    width: 86%;

    border: 1px solid rgba(160, 211, 239, 0.085);

    border-radius: 50%;
}


.latitude-1 {
    top: 18%;
    height: 18%;
}

.latitude-2 {
    top: 35%;
    height: 19%;
}

.latitude-3 {
    top: 49%;
    height: 19%;
}

.latitude-4 {
    top: 65%;
    height: 17%;
}


/* BOYLAM */

.world-longitude {
    position: absolute;

    top: 5%;
    left: 50%;

    height: 90%;

    border: 1px solid rgba(160, 211, 239, 0.085);

    border-radius: 50%;

    transform: translateX(-50%);
}


.longitude-1 {
    width: 27%;
}

.longitude-2 {
    width: 56%;
}

.longitude-3 {
    width: 83%;
}


/* =========================================================
   3D IŞIK
========================================================= */

.world-globe-light {
    position: absolute;
    z-index: 40;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 27% 22%,
            rgba(255, 255, 255, 0.17),
            transparent 21%
        );

    pointer-events: none;
}


/* =========================================================
   GECE / KENAR GÖLGESİ
========================================================= */

.world-globe-shadow {
    position: absolute;
    z-index: 41;

    inset: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.13) 0%,
            transparent 25%,
            transparent 55%,
            rgba(0, 0, 0, 0.72) 100%
        );

    pointer-events: none;
}


.world-globe-edge {
    position: absolute;
    z-index: 42;

    inset: 0;

    border-radius: 50%;

    box-shadow:
        inset 18px 0 34px rgba(100, 185, 231, 0.06),
        inset -54px 0 70px rgba(0, 0, 0, 0.53),
        inset 0 0 0 1px rgba(185, 224, 245, 0.10);

    pointer-events: none;
}


/* =========================================================
   DIŞ YÖRÜNGELER
========================================================= */

.world-orbit {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    pointer-events: none;
}


.world-orbit-one {
    width: 610px;
    height: 610px;

    border: 1px solid rgba(135, 193, 226, 0.12);

    animation:
        worldOrbitOne
        50s
        linear
        infinite;
}


.world-orbit-two {
    width: 535px;
    height: 535px;

    border: 1px dashed rgba(135, 193, 226, 0.08);

    animation:
        worldOrbitTwo
        68s
        linear
        infinite;
}


@keyframes worldOrbitOne {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes worldOrbitTwo {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


.world-orbit-one::before {
    position: absolute;

    top: 13%;
    left: 7%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #87caef;

    box-shadow:
        0 0 0 5px rgba(135, 202, 239, 0.08),
        0 0 24px rgba(135, 202, 239, 0.60);

    content: "";
}


/* =========================================================
   GLOBAL STATUS
========================================================= */

.world-status {
    position: absolute;
    z-index: 50;

    top: 105px;
    right: 0;

    display: flex;

    min-width: 145px;

    align-items: center;

    gap: 11px;

    padding: 12px 15px;

    border: 1px solid rgba(255, 255, 255, 0.11);

    background: rgba(5, 15, 23, 0.75);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}


.world-status-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #82c8ed;

    box-shadow:
        0 0 0 5px rgba(130, 200, 237, 0.08),
        0 0 18px rgba(130, 200, 237, 0.72);
}


.world-status > div {
    display: flex;
    flex-direction: column;
}


.world-status small {
    color: rgba(255, 255, 255, 0.36);

    font-size: 0.35rem;

    font-weight: 700;

    letter-spacing: 0.13em;
}


.world-status strong {
    margin-top: 2px;

    color: #ffffff;

    font-size: 0.62rem;

    font-weight: 700;
}


/* =========================================================
   HOVER
========================================================= */

.world-globe:hover .world-map-rotation {
    animation-play-state: paused;
}


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

@media (max-width: 1100px) {

    .home-hero-globe-visual {
        min-height: 590px;
    }

    .world-globe-shell {
        width: 420px;
        height: 420px;

        flex-basis: 420px;
    }

    .world-orbit-one {
        width: 540px;
        height: 540px;
    }

    .world-orbit-two {
        width: 475px;
        height: 475px;
    }

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 720px) {

    .home-hero-globe-visual {
        min-height: 455px;

        margin-top: 10px;
    }

    .world-globe-shell {
        width: min(325px, 86vw);
        height: min(325px, 86vw);

        flex-basis: min(325px, 86vw);
    }

    .world-orbit-one {
        width: min(405px, 105vw);
        height: min(405px, 105vw);
    }

    .world-orbit-two {
        width: min(360px, 94vw);
        height: min(360px, 94vw);
    }

    .world-marker {
        width: 14px;
        height: 14px;
    }

    .world-marker-dot {
        width: 5px;
        height: 5px;

        border-width: 1px;
    }

    .world-marker-pulse {
        width: 18px;
        height: 18px;
    }

    .marker-important .world-marker-dot {
        width: 9px;
        height: 9px;

        border-width: 2px;
    }

    .marker-important .world-marker-pulse {
        width: 27px;
        height: 27px;
    }

    .world-marker-label {
        left: 18px;

        min-width: 82px;

        padding: 6px 7px;
    }

    .world-marker-label small {
        font-size: 0.25rem;
    }

    .world-marker-label strong {
        font-size: 0.41rem;
    }

    .world-status {
        top: 64px;
        right: 0;

        min-width: 112px;

        padding: 9px 10px;
    }

    .world-status small {
        font-size: 0.28rem;
    }

    .world-status strong {
        font-size: 0.50rem;
    }

}


/* =========================================================
   ÇOK KÜÇÜK TELEFON
========================================================= */

@media (max-width: 390px) {

    .home-hero-globe-visual {
        min-height: 410px;
    }

    .world-globe-shell {
        width: 292px;
        height: 292px;

        flex-basis: 292px;
    }

    .world-orbit-one {
        width: 355px;
        height: 355px;
    }

    .world-orbit-two {
        width: 325px;
        height: 325px;
    }

}


/* =========================================================
   HAREKET AZALTMA
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .world-map-rotation,
    .world-marker-pulse,
    .world-orbit-one,
    .world-orbit-two {
        animation: none !important;
    }

}
şimdi böyle 





























/* =========================================================
   KURUCUMUZUN MESAJI - EK DÜZENLEMELER
========================================================= */

.management-message-title {
    margin-bottom: 28px;
}

.management-message-title > span {
    display: block;
    margin-bottom: 8px;
    color: #8d7955;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.17em;
}

.management-message-title h3 {
    max-width: 700px;
    margin: 0;
    color: #0b1117;
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.management-message-content > p {
    max-width: 760px;
}

.management-message-content blockquote {
    max-width: 760px;
    margin: 38px 0;
    padding: 28px 0 28px 28px;
    border-left: 2px solid #8d7953;
    color: #172631;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    font-style: italic;
    line-height: 1.7;
}

.management-signature-mark {
    font-family: "Playfair Display", serif;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 720px) {
    .management-message-title h3 {
        font-size: 2rem;
    }

    .management-message-content blockquote {
        padding-left: 18px;
        font-size: 1rem;
    }
}
/* =========================================================
   01. ROOT
========================================================= */

:root {
    --black: #06090d;
    --black-soft: #0a1017;
    --black-card: #0f1720;

    --navy: #0d2233;
    --navy-soft: #183a52;

    --blue: #4f7895;
    --blue-soft: #7ea6c1;
    --blue-light: #a8c3d5;

    --paper: #f1eee7;
    --paper-soft: #e9e5dc;
    --paper-deep: #ded9cf;

    --white: #ffffff;

    --text: #171d22;
    --text-soft: #3e4850;
    --muted: #747b80;

    --gold: #b19b6d;
    --gold-soft: #d1c19d;

    --line: rgba(15, 20, 24, 0.13);
    --line-dark: rgba(255, 255, 255, 0.12);

    --container: 1320px;

    --ease:
        cubic-bezier(
            0.2,
            0.72,
            0.2,
            1
        );
}

/* =========================================================
   02. RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--text);
    font-family: "Manrope", sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

::selection {
    background: var(--navy);
    color: #ffffff;
}

.container {
    width: min(
        var(--container),
        calc(100% - 56px)
    );

    margin-inline: auto;
}

/* =========================================================
   03. REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   04. HEADER
========================================================= */

.site-header {
    position: fixed;
    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    background:
        rgba(
            6,
            9,
            13,
            0.91
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.site-header.scrolled {
    border-bottom-color:
        rgba(
            255,
            255,
            255,
            0.11
        );

    background:
        rgba(
            6,
            9,
            13,
            0.98
        );

    box-shadow:
        0 16px 48px
        rgba(
            0,
            0,
            0,
            0.24
        );
}

.header-inner {
    display: flex;

    min-height: 90px;

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

    gap: 36px;
}

/* =========================================================
   05. BRAND
========================================================= */
/* =========================================================
   SEBAT MAKİNA — PREMIUM HEADER BRAND
   STYLE.CSS DOSYASININ EN ALTINDA KALSIN
========================================================= */

/* =========================================================
   SEBAT MAKİNA — PREMIUM BRAND
========================================================= */
/* =========================================================
   SEBAT MAKİNA
   NAVBAR BRAND — SADE / KURUMSAL / PREMIUM
========================================================= */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    flex-shrink: 0;
}


/* =========================================================
   LOGO
========================================================= */

.brand-logo {
    position: relative;

    display: flex;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;

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

    overflow: hidden;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.brand-logo img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50%;

    transform: scale(1.02);
}


.brand:hover .brand-logo {
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32);

    transform: translateY(-1px);
}


/* =========================================================
   MARKA BİLGİSİ
========================================================= */

.brand-info {
    display: flex;
    min-width: 0;
    flex-direction: column;

    justify-content: center;
}


/* =========================================================
   ZİLE SEBAT / MAKİNA
========================================================= */

.brand-main-name {
    display: flex;
    align-items: baseline;

    gap: 9px;

    line-height: 1;
}


.brand-main-name strong {
    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.105em;

    white-space: nowrap;
}


.brand-main-name > span {
    color: rgba(255, 255, 255, 0.48);

    font-family: "Manrope", sans-serif;

    font-size: 0.58rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.23em;

    white-space: nowrap;
}


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

.brand-sub-info {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 10px;

    color: rgba(255, 255, 255, 0.3);

    font-size: 0.39rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.15em;

    white-space: nowrap;
}


.brand-sub-info > i {
    display: block;

    width: 18px;
    height: 1px;

    background: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   HOVER
========================================================= */

.brand-main-name strong,
.brand-main-name > span,
.brand-sub-info {
    transition: color 0.25s ease;
}


.brand:hover .brand-main-name > span {
    color: rgba(255, 255, 255, 0.68);
}


.brand:hover .brand-sub-info {
    color: rgba(255, 255, 255, 0.43);
}


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

@media (max-width: 1250px) {

    .brand {
        gap: 13px;
    }

    .brand-logo {
        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }

    .brand-main-name strong {
        font-size: 0.88rem;
    }

    .brand-main-name > span {
        font-size: 0.5rem;
    }

    .brand-sub-info {
        font-size: 0.34rem;
    }

    .brand-sub-info > span:last-child {
        display: none;
    }

    .brand-sub-info > i {
        display: none;
    }

}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 720px) {

    .brand {
        gap: 10px;
    }

    .brand-logo {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }

    .brand-main-name {
        gap: 6px;
    }

    .brand-main-name strong {
        font-size: 0.73rem;

        letter-spacing: 0.08em;
    }

    .brand-main-name > span {
        font-size: 0.41rem;

        letter-spacing: 0.17em;
    }

    .brand-sub-info {
        margin-top: 7px;

        font-size: 0.3rem;

        letter-spacing: 0.12em;
    }

}


/* =========================================================
   ÇOK KÜÇÜK TELEFON
========================================================= */

@media (max-width: 390px) {

    .brand-logo {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .brand-main-name strong {
        font-size: 0.66rem;
    }

    .brand-main-name > span {
        font-size: 0.36rem;
    }

    .brand-sub-info {
        font-size: 0.27rem;
    }

}

/* =========================================================
   ÇOK KÜÇÜK TELEFON
========================================================= */

@media (max-width: 390px) {

    .brand-logo {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .brand-title {
        font-size: 0.52rem;
    }

    .brand-title strong {
        font-size: 0.92rem;
    }

    .brand-founded {
        display: none;
    }

    .brand-detail-rule {
        display: none;
    }
}


/* =========================================================
   06. DESKTOP NAV
========================================================= */

.desktop-nav {
    display: flex;

    align-items: center;

    gap:
        clamp(
            23px,
            2.4vw,
            40px
        );
}

.desktop-nav a {
    position: relative;

    padding:
        35px
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    font-size: 0.65rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    transition:
        color 0.25s ease;
}

.desktop-nav a::after {
    position: absolute;

    right: 0;
    bottom: 20px;
    left: 0;

    height: 1px;

    background: var(--gold-soft);

    content: "";

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform 0.32s ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: #ffffff;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* =========================================================
   07. HEADER ACTIONS
========================================================= */

.header-actions {
    display: flex;

    align-items: center;

    gap: 16px;
}

.header-history {
    display: flex;

    align-items: center;

    gap: 10px;

    padding-right: 18px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}

.header-history > span {
    color: var(--gold-soft);

    font-size: 0.73rem;
    font-weight: 700;
}

.header-history small {
    color:
        rgba(
            255,
            255,
            255,
            0.34
        );

    font-size: 0.48rem;
    font-weight: 600;

    line-height: 1.35;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.header-cta {
    display: inline-flex;

    min-height: 46px;

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

    gap: 10px;

    padding:
        0
        19px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius: 999px;

    color: #ffffff;

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.header-cta:hover {
    background: #ffffff;
    color: var(--black);

    transform:
        translateY(-2px);
}

.menu-button {
    display: none;
}

/* =========================================================
   08. MOBILE MENU
========================================================= */

.mobile-menu-overlay {
    position: fixed;
    z-index: 998;

    inset: 0;

    display: none;

    border: 0;

    background:
        rgba(
            0,
            0,
            0,
            0.65
        );

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    z-index: 999;

    top: 0;
    right: 0;

    display: none;

    width:
        min(
            440px,
            100%
        );

    height: 100dvh;

    flex-direction: column;

    padding:
        116px
        34px
        34px;

    background: #080c11;

    box-shadow:
        -30px
        0
        80px
        rgba(
            0,
            0,
            0,
            0.4
        );

    transform:
        translateX(100%);

    transition:
        transform
        0.4s
        var(--ease);
}

.mobile-menu.open {
    transform:
        translateX(0);
}

.mobile-menu-head {
    display: flex;

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

    gap: 30px;

    margin-bottom: 30px;

    padding-bottom: 24px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}

.mobile-menu-kicker {
    display: block;

    color: var(--gold-soft);

    font-size: 0.53rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}

.mobile-menu-head strong {
    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-size: 0.9rem;
}

.mobile-menu-year {
    color:
        rgba(
            255,
            255,
            255,
            0.075
        );

    font-size: 4rem;
    font-weight: 700;

    line-height: 0.8;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
}

.mobile-menu nav a {
    display: grid;

    grid-template-columns:
        30px
        1fr
        auto;

    min-height: 76px;

    align-items: center;

    gap: 14px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    color: #ffffff;
}

.mobile-menu nav a > span {
    color:
        rgba(
            255,
            255,
            255,
            0.27
        );

    font-size: 0.53rem;
}

.mobile-menu nav a > strong {
    font-size: 1.12rem;
    font-weight: 500;
}

.mobile-menu nav a > i {
    color:
        rgba(
            255,
            255,
            255,
            0.4
        );
}

.mobile-menu nav a.active > strong {
    color: var(--gold-soft);
}

.mobile-cta {
    display: flex;

    min-height: 58px;

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

    margin-top: 25px;

    padding:
        0
        19px;

    background: #ffffff;
    color: var(--black);

    font-size: 0.7rem;
    font-weight: 700;
}

.mobile-menu-footer {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: auto;

    padding-top: 25px;
}

.mobile-menu-footer span {
    max-width: 290px;

    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 1rem;
    font-style: italic;

    line-height: 1.5;
}

.mobile-menu-footer small {
    color:
        rgba(
            255,
            255,
            255,
            0.25
        );

    font-size: 0.5rem;
    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

/* =========================================================
   09. HOME
========================================================= */

.home-page {
    overflow: hidden;
}

/* =========================================================
   10. HERO
========================================================= */

.home-hero {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    padding:
        150px
        0
        0;

    background:
        radial-gradient(
            circle
            at
            78%
            35%,
            rgba(
                67,
                121,
                160,
                0.16
            ),
            transparent
            27%
        ),
        linear-gradient(
            125deg,
            #05080c
            0%,
            #081019
            53%,
            #0a131b
            100%
        );

    color: #ffffff;
}

.home-hero-grid-pattern {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent
            1px
        );

    background-size:
        88px
        88px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000
            25%,
            #000
            75%,
            transparent
        );

    pointer-events: none;
}

.home-hero-orbit {
    position: absolute;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );

    border-radius: 50%;

    pointer-events: none;
}

.home-hero-orbit-one {
    top: -330px;
    right: -290px;

    width: 800px;
    height: 800px;
}

.home-hero-orbit-two {
    right: 9%;
    bottom: -470px;

    width: 760px;
    height: 760px;
}

.home-hero-container {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(
            500px,
            0.93fr
        )
        minmax(
            520px,
            1.07fr
        );

    align-items: center;

    gap:
        clamp(
            60px,
            7vw,
            125px
        );

    min-height:
        calc(
            100vh -
            216px
        );

    padding-bottom: 80px;
}

/* =========================================================
   11. HERO COPY
========================================================= */

.home-hero-content {
    max-width: 690px;
}

.home-hero-topline {
    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 30px;
}

.home-hero-kicker {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size: 0.57rem;
    font-weight: 700;

    letter-spacing: 0.21em;
}

.home-hero-kicker::before {
    width: 34px;
    height: 1px;

    background: var(--gold-soft);

    content: "";
}

.home-hero-since {
    padding-left: 17px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    color: var(--gold-soft);

    font-size: 0.61rem;
    font-weight: 700;

    letter-spacing: 0.11em;
}

.home-hero h1 {
    max-width: 730px;

    margin: 0;

    color: #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            3.7rem,
            5.45vw,
            6.5rem
        );

    font-weight: 500;

    line-height: 0.955;

    letter-spacing: -0.067em;
}

.home-hero h1 > span {
    display: block;

    color: #86a9c0;
}

/* slogan */

.home-hero-signature {
    position: relative;

    max-width: 560px;

    margin-top: 31px;

    padding-left: 23px;

    color: #e0d6bd;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.2rem
        );

    font-style: italic;

    line-height: 1.55;
}

.home-hero-signature::before {
    position: absolute;

    top: 4px;
    bottom: 4px;
    left: 0;

    width: 1px;

    background: var(--gold-soft);

    content: "";
}

.home-hero-description {
    max-width: 570px;

    margin-top: 24px;

    color:
        rgba(
            255,
            255,
            255,
            0.47
        );

    font-size: 0.84rem;

    line-height: 1.88;
}

/* =========================================================
   12. HERO BUTTONS
========================================================= */

.home-hero-actions {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 24px;

    margin-top: 35px;
}

.home-primary-button {
    display: inline-flex;

    min-height: 58px;

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

    gap: 14px;

    padding:
        0
        25px;

    border:
        1px solid
        #ffffff;

    background: #ffffff;

    color: var(--black);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.05em;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.home-primary-button:hover {
    background: var(--gold-soft);
    color: var(--black);

    transform:
        translateY(-3px);
}

.home-secondary-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 6px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.32
        );

    color:
        rgba(
            255,
            255,
            255,
            0.67
        );

    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.home-secondary-link:hover {
    gap: 15px;

    border-color: var(--gold-soft);

    color: var(--gold-soft);
}

/* =========================================================
   13. HERO METRICS
========================================================= */

.home-hero-metrics {
    display: grid;

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

    margin-top: 41px;

    padding-top: 27px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}

.home-hero-metrics > div {
    position: relative;

    display: flex;

    align-items: flex-end;

    gap: 11px;

    padding:
        0
        18px;
}

.home-hero-metrics > div:first-child {
    padding-left: 0;
}

.home-hero-metrics > div:not(:last-child)::after {
    position: absolute;

    top: 3px;
    right: 0;

    width: 1px;
    height: 39px;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

    content: "";
}

.home-hero-metrics strong {
    color: #ffffff;

    font-size: 1.95rem;
    font-weight: 500;

    line-height: 1;
}

.home-hero-metrics span {
    color:
        rgba(
            255,
            255,
            255,
            0.31
        );

    font-size: 0.5rem;
    font-weight: 700;

    line-height: 1.45;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

/* =========================================================
   14. HERO GLOBE VISUAL
========================================================= */

.home-hero-visual {
    position: relative;

    min-height: 660px;
}

.home-hero-globe-visual {
    display: flex;

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

/* ORBITS */

.hero-globe-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid
        rgba(
            125,
            174,
            205,
            0.1
        );

    border-radius: 50%;

    pointer-events: none;
}

.hero-globe-orbit-outer {
    width: 660px;
    height: 660px;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(-10deg);
}

.hero-globe-orbit-middle {
    width: 570px;
    height: 570px;

    border-color:
        rgba(
            255,
            255,
            255,
            0.055
        );

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(13deg);
}

/* =========================================================
   15. GLOBE
========================================================= */

.hero-globe {
    position: relative;
    z-index: 3;

    width:
        min(
            515px,
            39vw
        );

    aspect-ratio: 1;

    overflow: hidden;

    border:
        1px solid
        rgba(
            135,
            185,
            216,
            0.32
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle
            at
            32%
            27%,
            rgba(
                116,
                171,
                207,
                0.18
            ),
            transparent
            31%
        ),
        radial-gradient(
            circle
            at
            70%
            68%,
            rgba(
                42,
                92,
                126,
                0.12
            ),
            transparent
            37%
        ),
        linear-gradient(
            145deg,
            rgba(
                18,
                38,
                54,
                0.54
            ),
            rgba(
                4,
                10,
                15,
                0.86
            )
        );

    box-shadow:
        inset
        -50px
        -25px
        90px
        rgba(
            0,
            0,
            0,
            0.45
        ),
        inset
        25px
        15px
        55px
        rgba(
            111,
            169,
            205,
            0.08
        ),
        0
        0
        0
        26px
        rgba(
            74,
            132,
            171,
            0.023
        ),
        0
        0
        0
        62px
        rgba(
            74,
            132,
            171,
            0.014
        ),
        0
        45px
        100px
        rgba(
            0,
            0,
            0,
            0.35
        );

    transform:
        rotate(-8deg);
}

.hero-globe-glow {
    position: absolute;
    z-index: 0;

    top: -20%;
    left: -25%;

    width: 75%;
    height: 75%;

    border-radius: 50%;

    background:
        rgba(
            103,
            163,
            201,
            0.1
        );

    filter: blur(27px);
}

/* =========================================================
   16. GLOBE LATITUDE
========================================================= */

.hero-globe-latitude {
    position: absolute;

    right: 3%;
    left: 3%;

    border:
        1px solid
        rgba(
            132,
            184,
            216,
            0.21
        );

    border-radius: 50%;
}

.hero-latitude-one {
    top: 18%;

    height: 22%;
}

.hero-latitude-two {
    top: 40%;

    height: 21%;
}

.hero-latitude-three {
    bottom: 18%;

    height: 21%;
}

/* =========================================================
   17. GLOBE LONGITUDE
========================================================= */

.hero-globe-longitude {
    position: absolute;

    top: 0;
    bottom: 0;

    border:
        1px solid
        rgba(
            132,
            184,
            216,
            0.19
        );

    border-radius: 50%;
}

.hero-longitude-one {
    left: 13%;

    width: 74%;
}

.hero-longitude-two {
    left: 30%;

    width: 40%;
}

.hero-longitude-three {
    left: 43%;

    width: 14%;
}

/* =========================================================
   18. GLOBE POINTS
========================================================= */

.hero-world-point {
    position: absolute;
    z-index: 5;

    width: 8px;
    height: 8px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.7
        );

    border-radius: 50%;

    background: #9bc3dc;

    box-shadow:
        0
        0
        0
        5px
        rgba(
            155,
            195,
            220,
            0.07
        ),
        0
        0
        20px
        rgba(
            155,
            195,
            220,
            0.5
        );
}

.hero-world-point::after {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 25px;
    height: 25px;

    border:
        1px solid
        rgba(
            159,
            201,
            225,
            0.2
        );

    border-radius: 50%;

    content: "";

    transform:
        translate(
            -50%,
            -50%
        );

    animation:
        heroWorldPulse
        2.8s
        ease-out
        infinite;
}

.point-europe {
    top: 28%;
    left: 48%;
}

.point-africa {
    top: 51%;
    left: 47%;
}

.point-asia {
    top: 34%;
    right: 20%;
}

.point-america {
    top: 36%;
    left: 18%;
}

.point-middle-east {
    top: 42%;
    left: 59%;
}

@keyframes heroWorldPulse {

    0% {
        opacity: 0.8;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.55);
    }

    100% {
        opacity: 0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.65);
    }
}

/* =========================================================
   19. TURKEY POINT
========================================================= */

.hero-turkey-point {
    position: absolute;
    z-index: 8;

    top: 34%;
    left: 54%;

    display: flex;

    align-items: center;

    gap: 8px;

    transform:
        rotate(8deg);
}

.hero-turkey-point > span {
    width: 11px;
    height: 11px;

    flex: 0 0 11px;

    border:
        2px solid
        #ffffff;

    border-radius: 50%;

    background: var(--gold-soft);

    box-shadow:
        0
        0
        0
        5px
        rgba(
            209,
            193,
            157,
            0.11
        ),
        0
        0
        26px
        rgba(
            209,
            193,
            157,
            0.6
        );
}

.hero-turkey-point > div {
    display: flex;

    flex-direction: column;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    background:
        rgba(
            5,
            11,
            17,
            0.82
        );

    backdrop-filter: blur(10px);
}

.hero-turkey-point small {
    color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    font-size: 0.33rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.hero-turkey-point strong {
    margin-top: 2px;

    color: #ffffff;

    font-size: 0.49rem;

    letter-spacing: 0.09em;
}

/* =========================================================
   20. GLOBE CENTER
========================================================= */

.hero-globe-center {
    position: absolute;
    z-index: 10;

    top: 50%;
    left: 50%;

    display: flex;

    width: 145px;
    height: 145px;

    flex-direction: column;

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(
                13,
                22,
                31,
                0.94
            ),
            rgba(
                4,
                10,
                15,
                0.84
            )
        );

    box-shadow:
        0
        22px
        60px
        rgba(
            0,
            0,
            0,
            0.42
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.07
        );

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(8deg);

    backdrop-filter: blur(14px);
}

.hero-globe-center img {
    width: 47px;
    height: 47px;

    object-fit: contain;

    border-radius: 50%;

    background: #ffffff;
}

.hero-globe-center > span {
    margin-top: 9px;

    color:
        rgba(
            255,
            255,
            255,
            0.27
        );

    font-size: 0.34rem;
    font-weight: 700;

    letter-spacing: 0.2em;
}

.hero-globe-center > strong {
    margin-top: 1px;

    color: var(--gold-soft);

    font-size: 0.95rem;
    font-weight: 600;

    letter-spacing: 0.12em;
}

/* =========================================================
   21. ANNIVERSARY CARD
========================================================= */

.hero-anniversary {
    position: absolute;
    z-index: 12;

    top: 75px;
    left: -3px;

    width: 190px;

    padding:
        23px
        21px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.11
            ),
            rgba(
                255,
                255,
                255,
                0.035
            )
        );

    box-shadow:
        0
        22px
        58px
        rgba(
            0,
            0,
            0,
            0.32
        );

    backdrop-filter: blur(16px);
}

.hero-anniversary > small {
    color: var(--gold-soft);

    font-size: 0.44rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.hero-anniversary > div {
    display: flex;

    align-items: flex-end;

    gap: 11px;

    margin-top: 12px;
}

.hero-anniversary strong {
    color: #ffffff;

    font-size: 4.2rem;
    font-weight: 400;

    line-height: 0.8;

    letter-spacing: -0.07em;
}

.hero-anniversary span {
    padding-bottom: 3px;

    color:
        rgba(
            255,
            255,
            255,
            0.43
        );

    font-size: 0.41rem;
    font-weight: 700;

    line-height: 1.45;

    letter-spacing: 0.12em;
}

/* =========================================================
   22. GLOBAL DATA CARD
========================================================= */

.hero-global-data {
    position: absolute;
    z-index: 11;

    right: 0;
    bottom: 85px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding:
        16px
        19px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );

    background:
        rgba(
            5,
            11,
            17,
            0.77
        );

    box-shadow:
        0
        18px
        45px
        rgba(
            0,
            0,
            0,
            0.25
        );

    backdrop-filter: blur(14px);
}

.hero-global-data > div {
    display: flex;

    align-items: flex-end;

    gap: 6px;
}

.hero-global-data strong {
    color: #ffffff;

    font-size: 1.35rem;
    font-weight: 500;

    line-height: 1;
}

.hero-global-data span {
    padding-bottom: 1px;

    color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    font-size: 0.37rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.hero-global-data > i {
    width: 1px;
    height: 25px;

    background:
        rgba(
            255,
            255,
            255,
            0.11
        );
}

.hero-globe-caption {
    position: absolute;

    right: 50%;
    bottom: 17px;

    color:
        rgba(
            255,
            255,
            255,
            0.21
        );

    font-size: 0.41rem;
    font-weight: 700;

    letter-spacing: 0.2em;

    white-space: nowrap;

    transform:
        translateX(50%);
}

/* =========================================================
   23. HERO BOTTOM
========================================================= */

.home-hero-bottom {
    position: relative;
    z-index: 5;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    background:
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.home-hero-bottom-inner {
    display: flex;

    min-height: 67px;

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

    gap:
        clamp(
            25px,
            4vw,
            60px
        );
}

.home-hero-bottom-inner span {
    color:
        rgba(
            255,
            255,
            255,
            0.37
        );

    font-size: 0.51rem;
    font-weight: 700;

    letter-spacing: 0.19em;
}

.home-hero-bottom-inner i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--gold-soft);
}

/* =========================================================
   24. COMMON SECTION KICKER
========================================================= */

.home-section-kicker {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

    color: #61686c;

    font-size: 0.55rem;
    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}

.home-section-kicker::before {
    width: 34px;
    height: 1px;

    background: currentColor;

    content: "";
}

.home-section-kicker.light {
    color:
        rgba(
            255,
            255,
            255,
            0.43
        );
}

/* =========================================================
   25. MANIFESTO
========================================================= */

.home-manifesto-section {
    position: relative;

    overflow: hidden;

    padding:
        140px
        0;

    background: var(--paper);
}

.home-manifesto-section::after {
    position: absolute;

    top: -260px;
    right: -170px;

    width: 530px;
    height: 530px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.055
        );

    border-radius: 50%;

    content: "";
}

.home-manifesto-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        0.27fr
        1fr;

    gap: 84px;
}

.home-manifesto-index {
    display: flex;

    min-height: 440px;

    flex-direction: column;
    justify-content: space-between;

    padding-right: 38px;

    border-right:
        1px solid
        var(--line);
}

.home-manifesto-index > span {
    color: #9a8a64;

    font-size: 0.63rem;
    font-weight: 700;
}

.home-manifesto-index p {
    color: #7a7e80;

    font-size: 0.51rem;
    font-weight: 700;

    line-height: 1.6;

    letter-spacing: 0.13em;
}

.home-manifesto-content h2 {
    max-width: 1050px;

    color: var(--black);

    font-size:
        clamp(
            3.5rem,
            6vw,
            6.6rem
        );

    font-weight: 500;

    line-height: 0.96;

    letter-spacing: -0.067em;
}

.home-manifesto-content h2 em {
    color: #526f84;

    font-style: normal;
}

.home-manifesto-copy {
    display: grid;

    grid-template-columns:
        0.8fr
        1fr;

    gap: 54px;

    max-width: 900px;

    margin-top: 53px;
    margin-left: auto;
}

.home-manifesto-copy > p {
    color: var(--text);

    font-size: 1.02rem;
    font-weight: 600;

    line-height: 1.75;
}

.home-manifesto-copy > div > p {
    color: var(--muted);

    font-size: 0.86rem;

    line-height: 1.9;
}

.home-text-link {
    display: inline-flex;

    width: fit-content;

    align-items: center;

    gap: 11px;

    margin-top: 24px;

    padding-bottom: 6px;

    border-bottom:
        1px solid
        var(--text);

    color: var(--text);

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.home-text-link:hover {
    gap: 17px;

    color: var(--blue);
}

/* =========================================================
   26. MACHINES SECTION
========================================================= */

.home-machines-section {
    position: relative;

    overflow: hidden;

    padding:
        130px
        0
        115px;

    background: #080d13;
}

.home-section-heading {
    display: grid;

    grid-template-columns:
        1fr
        0.52fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 65px;
}

.home-section-heading h2 {
    max-width: 920px;

    color: #ffffff;

    font-size:
        clamp(
            3.3rem,
            5.2vw,
            5.8rem
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.06em;
}

.home-section-heading h2 em {
    display: block;

    color: #7da2bb;

    font-style: normal;
}

.home-section-heading > p {
    max-width: 430px;

    padding-bottom: 8px;

    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    font-size: 0.8rem;

    line-height: 1.85;
}

/* =========================================================
   27. HOME MACHINES GRID
========================================================= */

.home-machines-grid {
    display: grid;

    grid-template-columns:
        1.3fr
        0.7fr;

    grid-template-rows:
        350px
        350px;

    gap: 18px;
}

.home-machine-card {
    position: relative;

    display: grid;

    grid-template-rows:
        1fr
        auto;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.095
        );

    background: #10171f;
}

.home-machine-card-large {
    grid-row:
        1 /
        3;
}

.home-machine-image {
    position: relative;

    display: block;

    overflow: hidden;
}

.home-machine-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.72)
        brightness(0.76)
        contrast(1.05);

    transition:
        transform 0.85s var(--ease),
        filter 0.6s ease;
}

.home-machine-card:hover
.home-machine-image img {
    filter:
        saturate(0.92)
        brightness(0.87)
        contrast(1.04);

    transform:
        scale(1.045);
}

.home-machine-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(
                4,
                8,
                12,
                0.06
            ),
            rgba(
                4,
                8,
                12,
                0.08
            )
            48%,
            rgba(
                4,
                8,
                12,
                0.75
            )
        );
}

.home-machine-number {
    position: absolute;

    top: 21px;
    left: 22px;

    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

    font-size: 0.56rem;
    font-weight: 700;
}

.home-machine-arrow {
    position: absolute;

    top: 19px;
    right: 19px;

    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.26
        );

    border-radius: 50%;

    color: #ffffff;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.home-machine-card:hover
.home-machine-arrow {
    background: #ffffff;
    color: var(--black);

    transform:
        rotate(45deg);
}

.home-machine-info {
    padding:
        27px
        27px
        29px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.085
        );
}

.home-machine-info > span {
    color: var(--gold-soft);

    font-size: 0.49rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}

.home-machine-info h3 {
    margin-top: 8px;

    color: #ffffff;

    font-size:
        clamp(
            1.55rem,
            2.25vw,
            2.7rem
        );

    font-weight: 500;

    line-height: 1.1;
}

.home-machine-info p {
    max-width: 560px;

    margin-top: 13px;

    color:
        rgba(
            255,
            255,
            255,
            0.39
        );

    font-size: 0.73rem;

    line-height: 1.75;
}

.home-machines-footer {
    display: flex;

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

    gap: 40px;

    margin-top: 36px;

    padding-top: 26px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}

.home-machines-footer > span {
    color:
        rgba(
            255,
            255,
            255,
            0.27
        );

    font-size: 0.49rem;
    font-weight: 700;

    letter-spacing: 0.16em;
}

.home-machines-footer a {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(
            255,
            255,
            255,
            0.76
        );

    font-size: 0.61rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.home-machines-footer a:hover {
    gap: 16px;

    color: var(--gold-soft);
}

/* =========================================================
   28. LEGACY
========================================================= */

.home-legacy-section {
    position: relative;

    overflow: hidden;

    padding:
        140px
        0;

    background: #e9e5dc;
}

.home-legacy-section::before {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 28%;

    width: 1px;

    background:
        rgba(
            0,
            0,
            0,
            0.065
        );

    content: "";
}

.home-legacy-grid {
    display: grid;

    grid-template-columns:
        0.42fr
        1fr;

    gap: 100px;
}

.home-legacy-year {
    position: sticky;

    top: 140px;

    align-self: start;
}

.home-legacy-year > span {
    color: #7e8487;

    font-size: 0.52rem;
    font-weight: 700;

    letter-spacing: 0.18em;
}

.home-legacy-year strong {
    display: block;

    margin-top: 13px;

    color: var(--black);

    font-size:
        clamp(
            5.7rem,
            8.8vw,
            9.5rem
        );

    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -0.085em;
}

.home-legacy-year small {
    display: block;

    margin-top: 17px;

    color: #8b8f91;

    font-size: 0.54rem;
    font-weight: 600;

    letter-spacing: 0.12em;
}

.home-legacy-content h2 {
    max-width: 880px;

    color: var(--black);

    font-size:
        clamp(
            3.25rem,
            5.4vw,
            6rem
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.062em;
}

.home-legacy-content h2 em {
    display: block;

    color: #51758d;

    font-style: normal;
}

.home-legacy-content > p {
    max-width: 720px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 0.86rem;

    line-height: 1.92;
}

/* legacy cards */

.home-legacy-features {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    margin-top: 50px;

    border-top:
        1px solid
        var(--line);

    border-left:
        1px solid
        var(--line);
}

.home-legacy-features > div {
    min-height: 220px;

    padding: 25px;

    border-right:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);

    transition:
        background 0.3s ease;
}

.home-legacy-features > div:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.38
        );
}

.home-legacy-features span {
    color: #8f8e89;

    font-size: 0.53rem;
    font-weight: 700;
}

.home-legacy-features strong {
    display: block;

    margin-top: 55px;

    color: var(--text);

    font-size: 0.84rem;
}

.home-legacy-features p {
    margin-top: 8px;

    color: var(--muted);

    font-size: 0.67rem;

    line-height: 1.65;
}

.home-outline-button {
    display: inline-flex;

    min-height: 54px;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    padding:
        0
        21px;

    border:
        1px solid
        var(--black);

    color: var(--black);

    font-size: 0.63rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.home-outline-button:hover {
    background: var(--black);
    color: #ffffff;
}

/* =========================================================
   29. GLOBAL SUMMARY
========================================================= */

.home-global-summary {
    position: relative;

    overflow: hidden;

    padding:
        125px
        0;

    background:
        radial-gradient(
            circle
            at
            92%
            15%,
            rgba(
                86,
                139,
                175,
                0.16
            ),
            transparent
            27%
        ),
        #070c12;
}

.home-global-summary::before {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.022
            )
            1px,
            transparent
            1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.022
            )
            1px,
            transparent
            1px
        );

    background-size:
        80px
        80px;

    content: "";
}

.home-global-summary-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        0.72fr;

    align-items: end;

    gap: 110px;
}

.home-global-summary-heading h2 {
    max-width: 860px;

    color: #ffffff;

    font-size:
        clamp(
            3.3rem,
            5.3vw,
            5.9rem
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.06em;
}

.home-global-summary-heading h2 em {
    display: block;

    color: #7da4be;

    font-style: normal;
}

.home-global-summary-content {
    padding-bottom: 7px;
}

.home-global-summary-content > p {
    max-width: 570px;

    color:
        rgba(
            255,
            255,
            255,
            0.44
        );

    font-size: 0.82rem;

    line-height: 1.88;
}

.home-global-summary-numbers {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    margin-top: 34px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.11
        );
}

.home-global-summary-numbers > div {
    position: relative;

    display: flex;
    flex-direction: column;
}

.home-global-summary-numbers
> div:not(:last-child)::after {
    position: absolute;

    top: 2px;
    right: 15px;

    width: 1px;
    height: 44px;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

    content: "";
}

.home-global-summary-numbers strong {
    color: #ffffff;

    font-size: 2.25rem;
    font-weight: 500;

    line-height: 1;
}

.home-global-summary-numbers span {
    margin-top: 7px;

    color:
        rgba(
            255,
            255,
            255,
            0.28
        );

    font-size: 0.43rem;
    font-weight: 700;

    letter-spacing: 0.09em;
}

.home-global-summary-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    padding-bottom: 6px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.3
        );

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size: 0.59rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.home-global-summary-link:hover {
    gap: 15px;

    color: var(--gold-soft);
}

/* =========================================================
   30. REFERENCES
========================================================= */

.home-references-section {
    position: relative;

    overflow: hidden;

    padding:
        130px
        0;

    background: var(--paper);
}

.home-references-section::after {
    position: absolute;

    top: -220px;
    right: -180px;

    width: 500px;
    height: 500px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.05
        );

    border-radius: 50%;

    content: "";
}

.home-references-heading {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr
        0.45fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 58px;
}

.home-references-heading h2 {
    max-width: 900px;

    color: var(--black);

    font-size:
        clamp(
            3.3rem,
            5.2vw,
            5.8rem
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.06em;
}

.home-references-heading h2 em {
    display: block;

    color: #55768c;

    font-style: normal;
}

.home-references-heading > p {
    max-width: 390px;

    padding-bottom: 8px;

    color: var(--muted);

    font-size: 0.84rem;

    line-height: 1.8;
}

/* =========================================================
   31. REFERENCE GRID
========================================================= */

.home-reference-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    border-top:
        1px solid
        var(--line);

    border-left:
        1px solid
        var(--line);
}

.home-reference-item {
    position: relative;

    display: flex;

    min-height: 175px;

    flex-direction: column;
    justify-content: space-between;

    padding: 23px;

    border-right:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);

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

.home-reference-item::after {
    position: absolute;

    right: 22px;
    bottom: 22px;

    width: 22px;
    height: 1px;

    background: #6b879a;

    content: "";

    transition:
        width 0.3s ease;
}

.home-reference-item:hover {
    z-index: 3;

    background: #ffffff;

    box-shadow:
        0
        20px
        50px
        rgba(
            0,
            0,
            0,
            0.06
        );

    transform:
        translateY(-5px);
}

.home-reference-item:hover::after {
    width: 48px;
}

.home-reference-item span {
    color: #989b9c;

    font-size: 0.5rem;
    font-weight: 700;
}

.home-reference-item strong {
    max-width: 220px;

    padding-right: 25px;

    color: var(--text);

    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1.5;

    letter-spacing: 0.055em;
}

/* reference bottom */

.home-reference-bottom {
    position: relative;
    z-index: 2;

    display: flex;

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

    gap: 50px;

    margin-top: 35px;

    padding-top: 28px;

    border-top:
        1px solid
        var(--line);
}

.home-reference-bottom p {
    max-width: 600px;

    color: var(--muted);

    font-size: 0.76rem;
}

.home-reference-bottom a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--text);

    font-size: 0.59rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.home-reference-bottom a:hover {
    gap: 16px;

    color: var(--blue);
}

/* =========================================================
   32. PRODUCTION IMAGE
========================================================= */

.home-production-section {
    position: relative;

    display: flex;

    min-height: 720px;

    align-items: center;

    overflow: hidden;

    color: #ffffff;
}

.home-production-section > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(0.5)
        brightness(0.7)
        contrast(1.07);
}

.home-production-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(
                4,
                7,
                11,
                0.97
            ),
            rgba(
                4,
                7,
                11,
                0.74
            )
            51%,
            rgba(
                4,
                7,
                11,
                0.2
            )
        );
}

.home-production-content {
    position: relative;
    z-index: 3;
}

.home-production-content h2 {
    max-width: 750px;

    color: #ffffff;

    font-size:
        clamp(
            3.6rem,
            6vw,
            6.7rem
        );

    font-weight: 500;

    line-height: 0.95;

    letter-spacing: -0.067em;
}

.home-production-content h2 em {
    display: block;

    color: #a5bccb;

    font-style: normal;
}

.home-production-content p {
    max-width: 570px;

    margin-top: 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.54
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 1.05rem;
    font-style: italic;

    line-height: 1.7;
}

.home-light-button {
    display: inline-flex;

    min-height: 55px;

    align-items: center;

    gap: 13px;

    margin-top: 33px;

    padding:
        0
        22px;

    background: #ffffff;

    color: var(--black);

    font-size: 0.63rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.home-light-button:hover {
    background: var(--gold-soft);

    transform:
        translateY(-3px);
}

.home-production-year {
    position: absolute;
    z-index: 2;

    right: 4%;
    bottom: -48px;

    color:
        rgba(
            255,
            255,
            255,
            0.065
        );

    font-size:
        clamp(
            8rem,
            17vw,
            15rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.085em;
}

/* =========================================================
   33. FINAL CTA
========================================================= */

.home-final-cta {
    position: relative;

    overflow: hidden;

    padding:
        125px
        0;

    background: #e7e2d8;
}

.home-final-cta::after {
    position: absolute;

    top: -190px;
    right: -120px;

    width: 430px;
    height: 430px;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            0.055
        );

    border-radius: 50%;

    content: "";
}

.home-final-cta-inner {
    position: relative;
    z-index: 2;

    display: flex;

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

    gap: 80px;
}

.home-final-cta h2 {
    max-width: 900px;

    color: var(--black);

    font-size:
        clamp(
            3.2rem,
            5.4vw,
            5.8rem
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.062em;
}

.home-final-circle {
    display: flex;

    width: 170px;
    height: 170px;

    flex: 0 0 170px;

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

    gap: 12px;

    border:
        1px solid
        var(--black);

    border-radius: 50%;

    color: var(--black);

    font-size: 0.68rem;
    font-weight: 700;

    line-height: 1.45;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.home-final-circle:hover {
    background: var(--black);
    color: #ffffff;

    transform:
        rotate(-6deg)
        scale(1.04);
}

/* =========================================================
   34. FOOTER
========================================================= */

.site-footer {
    padding:
        90px
        0
        28px;

    background: #05080c;

    color: #ffffff;
}

.footer-top {
    display: grid;

    grid-template-columns:
        1fr
        0.95fr;

    gap: 100px;

    padding-bottom: 70px;
}

.footer-brand-area {
    max-width: 560px;
}

.footer-brand {
    display: inline-flex;

    align-items: center;

    gap: 14px;
}

.footer-brand-logo {
    display: grid;

    width: 70px;
    height: 70px;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #ffffff;
}

.footer-brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.footer-brand > span:last-child {
    display: flex;

    flex-direction: column;
}

.footer-brand strong {
    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;

    letter-spacing: 0.13em;
}

.footer-brand small {
    margin-top: 7px;

    color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    font-size: 0.47rem;
    font-weight: 600;

    letter-spacing: 0.42em;
}

.footer-brand-area > p {
    max-width: 480px;

    margin-top: 28px;

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );

    font-size: 0.76rem;

    line-height: 1.85;
}

.footer-slogan {
    display: grid;

    grid-template-columns:
        35px
        1fr;

    gap: 14px;

    max-width: 440px;

    margin-top: 30px;

    padding-top: 27px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}

.footer-slogan > span {
    color: var(--gold-soft);

    font-family:
        "Playfair Display",
        serif;

    font-size: 2.3rem;

    line-height: 1;
}

.footer-slogan p {
    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-family:
        "Playfair Display",
        serif;

    font-size: 0.96rem;
    font-style: italic;

    line-height: 1.55;
}

/* footer navigation */

.footer-navigation {
    display: grid;

    grid-template-columns:
        0.65fr
        1fr;

    gap: 65px;
}

.footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}

.footer-column h4 {
    margin-bottom: 9px;

    color:
        rgba(
            255,
            255,
            255,
            0.3
        );

    font-size: 0.51rem;
    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.footer-column > a {
    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

    font-size: 0.71rem;

    transition:
        color 0.25s ease;
}

.footer-column > a:hover {
    color: #ffffff;
}

.footer-contact > a,
.footer-contact > div {
    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-bottom: 10px;
}

.footer-contact span {
    color:
        rgba(
            255,
            255,
            255,
            0.25
        );

    font-size: 0.46rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.footer-contact strong {
    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-size: 0.7rem;
    font-weight: 500;
}

/* footer stats */

.footer-middle {
    display: grid;

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

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}

.footer-middle > div {
    display: flex;

    min-height: 125px;

    flex-direction: column;
    justify-content: center;

    padding: 25px;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}

.footer-middle span {
    color: #ffffff;

    font-size: 1.65rem;
    font-weight: 500;
}

.footer-middle small {
    margin-top: 7px;

    color:
        rgba(
            255,
            255,
            255,
            0.25
        );

    font-size: 0.46rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.footer-bottom {
    display: flex;

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

    gap: 40px;

    padding-top: 25px;

    color:
        rgba(
            255,
            255,
            255,
            0.23
        );

    font-size: 0.55rem;

    letter-spacing: 0.03em;
}

/* =========================================================
   35. TABLET
========================================================= */

@media (max-width: 1100px) {

    .desktop-nav,
    .header-history,
    .header-cta {
        display: none;
    }

    .menu-button {
        position: relative;
        z-index: 1001;

        display: block;

        width: 46px;
        height: 46px;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.15
            );

        background: transparent;
    }

    .menu-button span {
        display: block;

        width: 20px;
        height: 1px;

        margin:
            5px
            auto;

        background: #ffffff;

        transition:
            transform 0.25s ease,
            opacity 0.25s ease;
    }

    .menu-button.active
    span:nth-child(1) {
        transform:
            translateY(6px)
            rotate(45deg);
    }

    .menu-button.active
    span:nth-child(2) {
        opacity: 0;
    }

    .menu-button.active
    span:nth-child(3) {
        transform:
            translateY(-6px)
            rotate(-45deg);
    }

    .mobile-menu {
        display: flex;
    }

    .mobile-menu-overlay {
        display: block;
    }

    /* HERO */

    .home-hero {
        min-height: auto;
    }

    .home-hero-container {
        grid-template-columns:
            1fr;

        min-height: auto;

        gap: 60px;

        padding-bottom: 70px;
    }

    .home-hero-content {
        max-width: 820px;
    }

    .home-hero-visual {
        width:
            min(
                100%,
                800px
            );

        min-height: 620px;
    }

    .hero-globe {
        width: 500px;
    }

    /* sections */

    .home-section-heading,
    .home-references-heading,
    .home-global-summary-grid {
        grid-template-columns:
            1fr;

        gap: 30px;
    }

    .home-manifesto-grid {
        grid-template-columns:
            0.2fr
            1fr;

        gap: 55px;
    }

    /* machines */

    .home-machines-grid {
        grid-template-columns:
            1fr
            1fr;

        grid-template-rows:
            500px
            320px;
    }

    .home-machine-card-large {
        grid-column:
            1 /
            3;

        grid-row: auto;
    }

    /* legacy */

    .home-legacy-grid {
        grid-template-columns:
            1fr;

        gap: 60px;
    }

    .home-legacy-section::before {
        display: none;
    }

    .home-legacy-year {
        position: static;
    }

    /* references */

    .home-reference-grid {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }

    /* footer */

    .footer-top {
        grid-template-columns:
            1fr;

        gap: 60px;
    }
}

/* =========================================================
   36. MOBILE
========================================================= */

@media (max-width: 720px) {

    .container {
        width:
            min(
                100% - 28px,
                var(--container)
            );
    }

    /* HEADER */

    .header-inner {
        min-height: 76px;

        gap: 15px;
    }

    .brand {
        gap: 10px;
    }

    .brand-logo {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }

    .brand-topline > strong {
        font-size: 0.77rem;

        letter-spacing: 0.1em;
    }

    .brand-anniversary {
        min-height: 24px;

        padding:
            0
            7px;
    }

    .brand-anniversary > span {
        font-size: 0.56rem;
    }

    .brand-anniversary > small {
        font-size: 0.32rem;
    }

    .brand-subtitle {
        margin-top: 5px;

        font-size: 0.38rem;

        letter-spacing: 0.37em;
    }

    .menu-button {
        width: 42px;
        height: 42px;

        flex: 0 0 42px;
    }

    .mobile-menu {
        padding:
            96px
            22px
            25px;
    }

    /* HERO */

    .home-hero {
        padding-top: 110px;
    }

    .home-hero-container {
        gap: 50px;

        padding-bottom: 58px;
    }

    .home-hero-topline {
        gap: 11px;

        margin-bottom: 22px;
    }

    .home-hero-kicker {
        gap: 8px;

        font-size: 0.45rem;

        letter-spacing: 0.15em;
    }

    .home-hero-kicker::before {
        width: 24px;
    }

    .home-hero-since {
        padding-left: 11px;

        font-size: 0.48rem;
    }

    .home-hero h1 {
        max-width: 100%;

        font-size:
            clamp(
                3rem,
                14vw,
                4.6rem
            );

        line-height: 0.96;
    }

    .home-hero-signature {
        margin-top: 25px;

        padding-left: 17px;

        font-size: 0.94rem;
    }

    .home-hero-description {
        margin-top: 20px;

        font-size: 0.77rem;

        line-height: 1.8;
    }

    .home-hero-actions {
        align-items: stretch;

        flex-direction: column;

        gap: 17px;

        margin-top: 30px;
    }

    .home-primary-button {
        width: 100%;
    }

    .home-secondary-link {
        width: fit-content;
    }

    /* metrics */

    .home-hero-metrics {
        margin-top: 31px;

        padding-top: 21px;
    }

    .home-hero-metrics > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

        padding:
            0
            8px;
    }

    .home-hero-metrics strong {
        font-size: 1.5rem;
    }

    .home-hero-metrics span {
        font-size: 0.42rem;
    }

    /* GLOBE */

    .home-hero-visual,
    .home-hero-globe-visual {
        min-height: 465px;
    }

    .hero-globe-orbit-outer {
        width: 405px;
        height: 405px;
    }

    .hero-globe-orbit-middle {
        width: 350px;
        height: 350px;
    }

    .hero-globe {
        width:
            min(
                330px,
                88vw
            );
    }

    .hero-globe-center {
        width: 100px;
        height: 100px;
    }

    .hero-globe-center img {
        width: 35px;
        height: 35px;
    }

    .hero-globe-center > span {
        margin-top: 6px;

        font-size: 0.27rem;
    }

    .hero-globe-center > strong {
        font-size: 0.75rem;
    }

    .hero-anniversary {
        top: 38px;
        left: 0;

        width: 145px;

        padding: 17px;
    }

    .hero-anniversary strong {
        font-size: 3rem;
    }

    .hero-anniversary span {
        font-size: 0.32rem;
    }

    .hero-global-data {
        right: 3px;
        bottom: 52px;

        gap: 11px;

        padding:
            11px
            13px;
    }

    .hero-global-data strong {
        font-size: 1rem;
    }

    .hero-global-data span {
        font-size: 0.29rem;
    }

    .hero-turkey-point > div {
        display: none;
    }

    .hero-turkey-point {
        gap: 0;
    }

    .hero-globe-caption {
        bottom: 5px;

        font-size: 0.3rem;
    }

    /* HERO BOTTOM */

    .home-hero-bottom-inner {
        min-height: 55px;

        gap: 11px;
    }

    .home-hero-bottom-inner span {
        font-size: 0.35rem;

        letter-spacing: 0.1em;
    }

    /* SECTION SPACING */

    .home-manifesto-section,
    .home-machines-section,
    .home-legacy-section,
    .home-global-summary,
    .home-references-section,
    .home-final-cta {
        padding:
            82px
            0;
    }

    /* MANIFESTO */

    .home-manifesto-grid {
        grid-template-columns:
            1fr;

        gap: 32px;
    }

    .home-manifesto-index {
        min-height: auto;

        flex-direction: row;

        align-items: center;

        padding-right: 0;
        padding-bottom: 21px;

        border-right: 0;

        border-bottom:
            1px solid
            var(--line);
    }

    .home-manifesto-content h2 {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.3rem
            );
    }

    .home-manifesto-copy {
        grid-template-columns:
            1fr;

        gap: 20px;

        margin-top: 36px;
        margin-left: 0;
    }

    .home-manifesto-copy > p {
        font-size: 0.92rem;
    }

    /* MACHINES */

    .home-section-heading {
        margin-bottom: 42px;
    }

    .home-section-heading h2,
    .home-references-heading h2 {
        font-size:
            clamp(
                2.8rem,
                12vw,
                4.1rem
            );
    }

    .home-section-heading > p {
        font-size: 0.76rem;
    }

    .home-machines-grid {
        grid-template-columns:
            1fr;

        grid-template-rows:
            auto;
    }

    .home-machine-card-large {
        grid-column: auto;
    }

    .home-machine-image {
        height: 330px;
    }

    .home-machine-card-large
    .home-machine-image {
        height: 430px;
    }

    .home-machine-info {
        padding: 21px;
    }

    .home-machine-info h3 {
        font-size: 1.8rem;
    }

    .home-machines-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    /* LEGACY */

    .home-legacy-grid {
        gap: 44px;
    }

    .home-legacy-year strong {
        font-size: 6.2rem;
    }

    .home-legacy-content h2,
    .home-global-summary-heading h2,
    .home-final-cta h2 {
        font-size:
            clamp(
                2.9rem,
                13vw,
                4.3rem
            );
    }

    .home-legacy-content > p {
        font-size: 0.8rem;
    }

    .home-legacy-features {
        grid-template-columns:
            1fr;
    }

    .home-legacy-features > div {
        min-height: 175px;
    }

    .home-legacy-features strong {
        margin-top: 35px;
    }

    /* GLOBAL SUMMARY */

    .home-global-summary-grid {
        gap: 40px;
    }

    .home-global-summary-content > p {
        font-size: 0.78rem;
    }

    .home-global-summary-numbers strong {
        font-size: 1.65rem;
    }

    .home-global-summary-numbers span {
        font-size: 0.34rem;
    }

    .home-global-summary-numbers
    > div:not(:last-child)::after {
        right: 8px;

        height: 35px;
    }

    /* REFERENCES */

    .home-references-heading {
        margin-bottom: 42px;
    }

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

    .home-reference-item {
        min-height: 145px;

        padding: 17px;
    }

    .home-reference-item strong {
        font-size: 0.62rem;
    }

    .home-reference-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    /* PRODUCTION */

    .home-production-section {
        min-height: 620px;
    }

    .home-production-content h2 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.6rem
            );
    }

    .home-production-content p {
        font-size: 0.95rem;
    }

    .home-production-year {
        right: 0;
        bottom: -18px;

        font-size: 7rem;
    }

    /* CTA */

    .home-final-cta-inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 42px;
    }

    .home-final-circle {
        width: 140px;
        height: 140px;

        flex-basis: 140px;
    }

    /* FOOTER */

    .site-footer {
        padding-top: 70px;
    }

    .footer-navigation {
        grid-template-columns:
            1fr;

        gap: 40px;
    }

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

    .footer-middle > div {
        min-height: 100px;
    }

    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }
}

/* =========================================================
   37. EXTRA SMALL
========================================================= */

@media (max-width: 390px) {

    .container {
        width:
            calc(
                100% -
                22px
            );
    }

    .brand-anniversary {
        display: none;
    }

    .brand-topline > strong {
        font-size: 0.72rem;
    }

    .home-hero h1 {
        font-size: 2.87rem;
    }

    .home-hero-bottom-inner
    span:nth-of-type(2) {
        display: none;
    }

    .home-hero-bottom-inner
    i:nth-of-type(2) {
        display: none;
    }

    .hero-globe {
        width: 300px;
    }

    .hero-globe-orbit-outer {
        width: 355px;
        height: 355px;
    }

    .hero-globe-orbit-middle {
        width: 320px;
        height: 320px;
    }

    .hero-anniversary {
        width: 132px;

        padding: 14px;
    }

    .hero-anniversary strong {
        font-size: 2.7rem;
    }

    .home-reference-grid {
        grid-template-columns:
            1fr;
    }

    .footer-middle {
        grid-template-columns:
            1fr;
    }
}

/* =========================================================
   38. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .hero-world-point::after {
        animation: none;
    }

    .home-machine-image img,
    .home-machine-arrow,
    .home-final-circle,
    .header-cta,
    .home-primary-button {
        transition: none;
    }
}

/* =========================================================
   INNER PAGES
   KURUMSAL + MAKİNELER
========================================================= */

/* =========================================================
   01. INNER HERO
========================================================= */

.inner-hero {
  position: relative;
  overflow: hidden;
  padding: 165px 0 0;
  background:
    radial-gradient(
      circle at 84% 30%,
      rgba(71, 125, 163, 0.17),
      transparent 28%
    ),
    linear-gradient(
      125deg,
      #05080c 0%,
      #081019 55%,
      #0b141d 100%
    );
  color: #ffffff;
}

.inner-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size: 86px 86px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 25%,
      #000 80%,
      transparent
    );
  pointer-events: none;
}

.inner-hero-orbit {
  position: absolute;
  border: 1px solid rgba(130, 177, 207, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.inner-hero-orbit-one {
  top: -300px;
  right: -250px;
  width: 720px;
  height: 720px;
}

.inner-hero-orbit-two {
  right: 19%;
  bottom: -390px;
  width: 580px;
  height: 580px;
}

.inner-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.16fr 1fr 0.28fr;
  align-items: end;
  gap: 65px;
  min-height: 550px;
  padding-bottom: 85px;
}

/* SOL NUMARA */

.inner-hero-number {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.inner-hero-number > span {
  color: var(--gold-soft);
  font-size: 0.65rem;
  font-weight: 700;
}

.inner-hero-number > small {
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* HERO CONTENT */

.inner-hero-content {
  max-width: 880px;
}

.inner-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.47);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.19em;
}

.inner-hero-kicker::before {
  width: 33px;
  height: 1px;
  background: var(--gold-soft);
  content: "";
}

.inner-hero-content h1 {
  max-width: 920px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(4.2rem, 6.5vw, 7.4rem);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.07em;
}

.inner-hero-content h1 em {
  display: block;
  color: #234C70;
  font-style: normal;
}

.inner-hero-content > p {
  max-width: 650px;
  margin-top: 31px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.83rem;
  line-height: 1.9;
}

/* SAĞ BÜYÜK SAYI */

.inner-hero-year {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.inner-hero-year > span {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.26);
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.inner-hero-year > strong {
  color: rgba(255, 255, 255, 0.11);
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.08em;
}

/* HERO ALT BAR */

.inner-hero-bottom {
  position: relative;
  z-index: 4;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
}

.inner-hero-bottom-inner {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 45px);
}

.inner-hero-bottom-inner span {
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.inner-hero-bottom-inner i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-soft);
}

/* =========================================================
   02. ABOUT INTRO
========================================================= */

.about-intro-section {
  padding: 135px 0;
  background: var(--paper);
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 0.25fr 1fr;
  gap: 85px;
}

.about-intro-side {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 35px;
  border-right: 1px solid var(--line);
}

.about-intro-side > span {
  color: #98845f;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.about-intro-line {
  width: 1px;
  height: 120px;
  margin-left: 5px;
  background: var(--line);
}

.about-intro-side small {
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.12em;
}

.about-intro-content h2 {
  max-width: 940px;
  color: var(--black);
  font-size: clamp(3.5rem, 5.8vw, 6.3rem);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.065em;
}

.about-intro-content h2 em {
    color: #0B2440;
      font-style: normal;
}

.about-intro-copy {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 55px;
  max-width: 930px;
  margin-top: 50px;
  margin-left: auto;
}

.about-intro-lead {
  color: var(--text) !important;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.8;
}

.about-intro-copy > div p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.88;
}

.about-intro-copy > div p + p {
  margin-top: 18px;
}

/* =========================================================
   03. ABOUT STORY
========================================================= */

.about-story-section {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 760px;
  background: #080d13;
}

.about-story-image {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: #111820;
}

.about-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    saturate(0.58)
    brightness(0.73)
    contrast(1.06);
}

.about-story-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 45%,
      rgba(7, 12, 18, 0.25)
    ),
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(4, 7, 10, 0.75)
    );
}

.about-story-year {
  position: absolute;
  right: 28px;
  bottom: -26px;
  color: rgba(255, 255, 255, 0.09);
  font-size: clamp(6rem, 11vw, 10rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.08em;
}

.about-story-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px, 7vw, 110px);
}

.about-story-content h2 {
  max-width: 700px;
  color: #ffffff;
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.about-story-content h2 em {
    color: #234C70;
  font-style: normal;
}

.about-story-content > p {
  max-width: 620px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.81rem;
  line-height: 1.88;
}

.about-story-signature {
  position: relative;
  max-width: 560px;
  margin-top: 36px;
  padding: 25px 0 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--gold-soft);
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
}

.about-story-signature::before {
  position: absolute;
  top: 27px;
  bottom: 2px;
  left: 0;
  width: 1px;
  background: var(--gold-soft);
  content: "";
}

/* =========================================================
   04. ABOUT NUMBERS
========================================================= */

.about-numbers-section {
  padding: 130px 0;
  background: #e8e4db;
}

.about-numbers-heading {
  display: grid;
  grid-template-columns: 1fr 0.45fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 58px;
}

.about-numbers-heading h2 {
  max-width: 880px;
  color: var(--black);
  font-size: clamp(3.2rem, 5.3vw, 5.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.about-numbers-heading h2 em {
  display: block;
  color: #55768c;
  font-style: normal;
}

.about-numbers-heading > p {
  max-width: 420px;
  color: var(--muted);
  font-size: 0.81rem;
  line-height: 1.85;
}

.about-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.about-number-card {
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  justify-content: space-between;
  padding: 27px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.about-number-card:hover {
  z-index: 2;
  background: rgba(255, 255, 255, 0.42);
  transform: translateY(-6px);
}

.about-number-card > span {
  color: #989896;
  font-size: 0.52rem;
  font-weight: 700;
}

.about-number-card strong {
  margin-top: auto;
  color: var(--black);
  font-size: clamp(3.8rem, 5vw, 5.7rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.07em;
}

.about-number-card p {
  max-width: 200px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.6;
}

/* =========================================================
   05. ABOUT VALUES
========================================================= */

.about-values-section {
  padding: 130px 0;
  background: #070c12;
}

.about-values-heading {
  max-width: 900px;
  margin-bottom: 60px;
}

.about-values-heading h2 {
  color: #ffffff;
  font-size: clamp(3.3rem, 5.4vw, 5.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.about-values-heading h2 em {
  display: block;
    color: #234C70;
  font-style: normal;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.about-value-card {
  position: relative;
  min-height: 380px;
  padding: 27px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.about-value-card:hover {
  z-index: 2;
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-7px);
}

.about-value-card > span {
  color: rgba(255, 255, 255, 0.24);
  font-size: 0.5rem;
  font-weight: 700;
}

.about-value-icon {
  display: grid;
  width: 57px;
  height: 57px;
  margin-top: 70px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 1.2rem;
}

.about-value-card h3 {
  margin-top: 27px;
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 500;
}

.about-value-card p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72rem;
  line-height: 1.75;
}

/* =========================================================
   06. TIMELINE
========================================================= */

.about-timeline-section {
  padding: 130px 0;
  background: var(--paper);
}

.about-timeline-heading {
  max-width: 850px;
  margin-bottom: 70px;
}

.about-timeline-heading h2 {
  color: var(--black);
  font-size: clamp(3.2rem, 5.3vw, 5.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.about-timeline-heading h2 em {
  color: #55778d;
  font-style: normal;
}

.about-timeline {
  position: relative;
}

.about-timeline::before {
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: 185px;
  width: 1px;
  background: var(--line);
  content: "";
}

.about-timeline-item {
  display: grid;
  grid-template-columns: 145px 80px 1fr;
  padding-bottom: 35px;
}

.about-timeline-year {
  padding-top: 25px;
  color: var(--black);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.about-timeline-dot {
  position: relative;
}

.about-timeline-dot::before {
  position: absolute;
  z-index: 2;
  top: 30px;
  left: 50%;
  width: 11px;
  height: 11px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: #5c8098;
  box-shadow:
    0 0 0 1px rgba(82, 115, 140, 0.32),
    0 0 0 7px rgba(82, 115, 140, 0.08);
  content: "";
  transform: translateX(-50%);
}

.about-timeline-copy {
  padding: 28px 32px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.32);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.about-timeline-copy:hover {
  background: #ffffff;
  transform: translateY(-4px);
}

.about-timeline-copy > span {
  color: #5c7c92;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.about-timeline-copy h3 {
  margin-top: 10px;
  color: var(--black);
  font-size: 1.8rem;
  font-weight: 500;
}

.about-timeline-copy p {
  max-width: 680px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.75;
}

/* =========================================================
   07. MACHINES INTRO
========================================================= */

.machines-intro-section {
  padding: 125px 0 95px;
  background: var(--paper);
}

.machines-intro-grid {
  display: grid;
  grid-template-columns: 1fr 0.48fr;
  align-items: end;
  gap: 85px;
}

.machines-intro-grid h2 {
  max-width: 920px;
  color: var(--black);
  font-size: clamp(3.3rem, 5.5vw, 6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.062em;
}

.machines-intro-grid h2 em {
  display: block;
      color: #0B2440;
  font-style: normal;
}

.machines-intro-grid > p {
  max-width: 440px;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.85;
}

/* =========================================================
   08. MACHINE PRODUCT
========================================================= */

.machine-product-section {
  padding: 70px 0;
  background: var(--paper);
}

.machine-product-section.alternate {
  background: #e8e4db;
}

.machine-product-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  min-height: 620px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.24);
}

.machine-product-image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #141c23;
}

.machine-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    saturate(0.72)
    brightness(0.88)
    contrast(1.03);
  transition:
    transform 0.8s var(--ease),
    filter 0.6s ease;
}

.machine-product-grid:hover .machine-product-image img {
  filter:
    saturate(0.92)
    brightness(0.94)
    contrast(1.03);
  transform: scale(1.035);
}

.machine-product-image::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05),
      transparent 50%,
      rgba(4, 8, 11, 0.55)
    );
  content: "";
}

.machine-product-index {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 27px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* CONTENT */

.machine-product-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(45px, 6vw, 85px);
}

.machine-product-category {
  color: #927e58;
  font-size: 0.51rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.machine-product-content h2 {
  max-width: 620px;
  margin-top: 17px;
  color: var(--black);
  font-size: clamp(3rem, 4.7vw, 5.4rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.063em;
}

.machine-product-content h2 em {
  display: block;
  color: #55778e;
  font-style: normal;
}

.machine-product-content > p {
  max-width: 560px;
  margin-top: 27px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.88;
}

.machine-product-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}

.machine-product-features span {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 0.68rem;
  font-weight: 600;
}

.machine-product-features span:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.machine-product-features span:nth-child(even) {
  padding-left: 17px;
}

.machine-product-features i {
     color: #153A5B;
  font-size: 0.9rem;
}

.machine-product-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  margin-top: 34px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--black);
  color: var(--black);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition:
    gap 0.3s ease,
    color 0.3s ease;
}

.machine-product-link:hover {
  gap: 16px;
  color: #55778d;
}

/* =========================================================
   09. MACHINE PROCESS
========================================================= */

.machines-process-section {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background: #070c12;
}

.machines-process-heading {
  display: grid;
  grid-template-columns: 1fr 0.45fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 60px;
}

.machines-process-heading h2 {
  color: #ffffff;
  font-size: clamp(3.3rem, 5.3vw, 5.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.machines-process-heading h2 em {
  display: block;
  color: #7da4bc;
  font-style: normal;
}

.machines-process-heading > p {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.41);
  font-size: 0.8rem;
  line-height: 1.85;
}

.machines-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.machines-process-card {
  position: relative;
  min-height: 340px;
  padding: 27px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.machines-process-card:hover {
  z-index: 2;
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-7px);
}

.machines-process-card > span {
  color: rgba(255, 255, 255, 0.24);
  font-size: 0.49rem;
  font-weight: 700;
}

.machines-process-card > i {
  display: grid;
  width: 55px;
  height: 55px;
  margin-top: 60px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 1.15rem;
}

.machines-process-card h3 {
  margin-top: 26px;
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 500;
}

.machines-process-card p {
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.37);
  font-size: 0.7rem;
  line-height: 1.7;
}

/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1100px) {

  .inner-hero-container {
    grid-template-columns: 0.13fr 1fr;
  }

  .inner-hero-year {
    display: none;
  }

  .about-intro-grid {
    grid-template-columns: 0.18fr 1fr;
  }

  .about-story-section {
    grid-template-columns: 1fr;
  }

  .about-story-image {
    min-height: 590px;
  }

  .about-story-content {
    min-height: 550px;
  }

  .about-numbers-heading,
  .machines-intro-grid,
  .machines-process-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .about-numbers-grid,
  .about-values-grid,
  .machines-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .machine-product-grid {
    grid-template-columns: 1fr;
  }

  .machine-product-section.alternate
  .machine-product-content {
    order: 2;
  }

  .machine-product-section.alternate
  .machine-product-image {
    order: 1;
  }
}

/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 720px) {

  .inner-hero {
    padding-top: 120px;
  }

  .inner-hero-container {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 25px;
    padding-bottom: 62px;
  }

  .inner-hero-number {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    padding-right: 0;
    padding-bottom: 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .inner-hero-number > small {
    writing-mode: initial;
    transform: none;
  }

  .inner-hero-content h1 {
    font-size: clamp(3.2rem, 14vw, 4.7rem);
  }

  .inner-hero-content > p {
    font-size: 0.77rem;
  }

  .inner-hero-bottom-inner {
    min-height: 54px;
    gap: 10px;
  }

  .inner-hero-bottom-inner span {
    font-size: 0.33rem;
    letter-spacing: 0.08em;
  }

  /* ABOUT INTRO */

  .about-intro-section,
  .about-numbers-section,
  .about-values-section,
  .about-timeline-section,
  .machines-process-section {
    padding: 82px 0;
  }

  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-intro-side {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    padding-right: 0;
    padding-bottom: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .about-intro-line {
    width: 80px;
    height: 1px;
    margin: 0;
  }

  .about-intro-content h2 {
    font-size: clamp(3rem, 13vw, 4.4rem);
  }

  .about-intro-copy {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 34px;
    margin-left: 0;
  }

  .about-intro-lead {
    font-size: 0.93rem;
  }

  /* STORY */

  .about-story-image {
    min-height: 470px;
  }

  .about-story-content {
    min-height: auto;
    padding: 70px 20px;
  }

  .about-story-content h2 {
    font-size: clamp(2.9rem, 13vw, 4.3rem);
  }

  /* NUMBERS / VALUES */

  .about-numbers-grid,
  .about-values-grid,
  .machines-process-grid {
    grid-template-columns: 1fr;
  }

  .about-number-card {
    min-height: 220px;
  }

  .about-number-card strong {
    font-size: 4rem;
  }

  .about-value-card {
    min-height: 330px;
  }

  .about-value-icon {
    margin-top: 50px;
  }

  /* TIMELINE */

  .about-timeline::before {
    left: 10px;
  }

  .about-timeline-item {
    grid-template-columns: 25px 1fr;
    gap: 15px;
    padding-bottom: 28px;
  }

  .about-timeline-year {
    grid-column: 2;
    padding: 0 0 14px;
    font-size: 1.8rem;
  }

  .about-timeline-dot {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .about-timeline-dot::before {
    top: 11px;
    left: 10px;
  }

  .about-timeline-copy {
    grid-column: 2;
    padding: 23px 20px;
  }

  /* MACHINES */

  .machines-intro-section {
    padding: 80px 0 60px;
  }

  .machines-intro-grid h2 {
    font-size: clamp(3rem, 13vw, 4.4rem);
  }

  .machine-product-section {
    padding: 30px 0;
  }

  .machine-product-image {
    min-height: 390px;
  }

  .machine-product-content {
    padding: 38px 21px;
  }

  .machine-product-content h2 {
    font-size: clamp(2.9rem, 13vw, 4.2rem);
  }

  .machine-product-features {
    grid-template-columns: 1fr;
  }

  .machine-product-features span:nth-child(odd) {
    border-right: 0;
  }

  .machine-product-features span:nth-child(even) {
    padding-left: 0;
  }

  .machines-process-card {
    min-height: 290px;
  }

  .machines-process-card > i {
    margin-top: 40px;
  }
}

/* =========================================================
   12. EXTRA SMALL
========================================================= */

@media (max-width: 390px) {

  .inner-hero-bottom-inner span:nth-of-type(3),
  .inner-hero-bottom-inner i:nth-of-type(3) {
    display: none;
  }

  .about-story-image {
    min-height: 410px;
  }

  .machine-product-image {
    min-height: 340px;
  }
}

/* =========================================================
   YÖNETİMDEN MESAJ
========================================================= */

.management-message-section {
  position: relative;
  overflow: hidden;
  padding: 135px 0;
  background:
    linear-gradient(
      180deg,
      #f4f1ea 0%,
      #ebe7de 100%
    );
}

/* Arka plan dekorasyonu */

.management-message-section::before {
  position: absolute;
  top: -240px;
  right: -180px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(7, 12, 18, 0.055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.management-message-section::after {
  position: absolute;
  bottom: -260px;
  left: -190px;
  width: 530px;
  height: 530px;
  border: 1px solid rgba(7, 12, 18, 0.045);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}


/* =========================================================
   HEADING
========================================================= */

.management-message-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

.management-message-index {
  padding-top: 12px;
  color: #8c806a;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.management-message-heading h2 {
  max-width: 920px;
  color: #090e14;
  font-size: clamp(3.4rem, 5.5vw, 6rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.management-message-heading h2 em {
  display: block;
  color: #58788d;
  font-style: normal;
}


/* =========================================================
   ANA KART
========================================================= */

.management-message-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(330px, 0.65fr);
  overflow: hidden;
  border: 1px solid rgba(8, 14, 20, 0.12);
  background: #fdfcf9;
  box-shadow:
    0 35px 100px rgba(7, 12, 18, 0.09);
}


/* =========================================================
   MESAJ
========================================================= */

.management-message-content {
  position: relative;
  padding: clamp(45px, 6vw, 85px);
}

.management-quote-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 35px;
  place-items: center;
  border: 1px solid rgba(8, 14, 20, 0.13);
  border-radius: 50%;
  color: #58788d;
  font-size: 1.35rem;
}

.management-message-content h3 {
  color: #090e14;
  font-size: clamp(2.1rem, 3vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.management-message-content > p {
  max-width: 720px;
  margin-top: 19px;
  color: #69727a;
  font-size: 0.82rem;
  line-height: 1.9;
}

.management-message-content
.management-message-lead {
  max-width: 700px;
  margin-top: 27px;
  color: #263b49;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75;
}


/* =========================================================
   ALINTI
========================================================= */

.management-message-content blockquote {
  position: relative;
  max-width: 680px;
  margin-top: 35px;
  padding: 25px 0 25px 28px;
  border-left: 2px solid #8d7953;
  color: #172631;
  font-family: "Playfair Display", serif;
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.65;
}


/* =========================================================
   İMZA
========================================================= */

.management-signature {
  display: flex;
  max-width: 700px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 42px;
  padding-top: 29px;
  border-top: 1px solid rgba(8, 14, 20, 0.1);
}

.management-signature > div:first-child {
  display: flex;
  flex-direction: column;
}

.management-signature span {
  margin-bottom: 8px;
  color: #93999d;
  font-size: 0.62rem;
}

.management-signature strong {
  color: #0b1117;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.management-signature small {
  margin-top: 4px;
  color: #828a90;
  font-size: 0.62rem;
}

.management-signature-mark {
  color: rgba(11, 17, 23, 0.23);
  font-family: "Playfair Display", serif;
  font-size: 1.65rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.08em;
  transform: rotate(-5deg);
}


/* =========================================================
   YÖNETİCİ FOTOĞRAFI
========================================================= */

.management-person {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #090f15;
}

.management-person-image {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: #151d23;
}

.management-person-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter:
    saturate(0.72)
    contrast(1.02)
    brightness(0.91);
  transition:
    transform 0.8s ease,
    filter 0.8s ease;
}

.management-message-card:hover
.management-person-image img {
  filter:
    saturate(0.88)
    contrast(1.02)
    brightness(0.95);
  transform: scale(1.025);
}

.management-person-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(5, 9, 13, 0.85)
    );
}

.management-person-year {
  position: absolute;
  right: 20px;
  bottom: -10px;
  color: rgba(255, 255, 255, 0.13);
  font-size: 4.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.08em;
}


/* =========================================================
   YÖNETİCİ BİLGİLERİ
========================================================= */

.management-person-info {
  padding: 31px 31px 25px;
}

.management-person-info > span {
  color: #ad9a73;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.management-person-info h4 {
  margin-top: 9px;
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 500;
}

.management-person-info p {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.68rem;
}


/* =========================================================
   META
========================================================= */

.management-person-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.management-person-meta > div {
  display: flex;
  min-height: 110px;
  flex-direction: column;
  justify-content: center;
  padding: 22px 30px;
}

.management-person-meta > div:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.management-person-meta strong {
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
}

.management-person-meta span {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.52rem;
  line-height: 1.4;
}


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

@media (max-width: 1000px) {

  .management-message-heading {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .management-message-card {
    grid-template-columns: 1fr;
  }

  .management-person {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
  }

  .management-person-image {
    grid-row: 1 / 3;
    height: 100%;
    min-height: 500px;
  }

  .management-person-info {
    align-self: end;
  }

  .management-person-meta {
    align-self: end;
  }
}


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

@media (max-width: 720px) {

  .management-message-section {
    padding: 80px 0;
  }

  .management-message-heading {
    margin-bottom: 35px;
  }

  .management-message-heading h2 {
    font-size: clamp(3rem, 13vw, 4.3rem);
  }

  .management-message-content {
    padding: 35px 20px;
  }

  .management-quote-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 27px;
  }

  .management-message-content h3 {
    font-size: 2rem;
  }

  .management-message-content > p {
    font-size: 0.77rem;
  }

  .management-message-content
  .management-message-lead {
    font-size: 0.9rem;
  }

  .management-message-content blockquote {
    padding-left: 20px;
    font-size: 1rem;
  }

  .management-signature {
    align-items: flex-start;
    flex-direction: column;
  }

  .management-signature-mark {
    margin-top: 5px;
  }

  /* FOTO */

  .management-person {
    display: flex;
  }

  .management-person-image {
    min-height: 0;
    height: 430px;
  }

  .management-person-info {
    padding: 25px 20px 20px;
  }

  .management-person-meta > div {
    min-height: 95px;
    padding: 18px 20px;
  }
}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 390px) {

  .management-person-image {
    height: 380px;
  }

  .management-person-year {
    font-size: 3.8rem;
  }

  .management-person-meta strong {
    font-size: 1.4rem;
  }
}

/* =========================================================
   SEBAT MAKİNA
   REFERANSLAR SAYFASI
========================================================= */

.references-page {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* =========================================================
   01. REFERANS HERO EK AYARLAR
========================================================= */

.references-inner-hero {
  background:
    radial-gradient(
      circle at 82% 28%,
      rgba(72, 126, 163, 0.19),
      transparent 27%
    ),
    radial-gradient(
      circle at 12% 100%,
      rgba(123, 154, 174, 0.07),
      transparent 30%
    ),
    linear-gradient(
      125deg,
      #05080c 0%,
      #081019 54%,
      #0c1720 100%
    );
}

/* =========================================================
   02. REFERANS GİRİŞ
========================================================= */

.references-intro {
  position: relative;
  overflow: hidden;
  padding: 135px 0;
  background:
    linear-gradient(
      180deg,
      #f2efe8 0%,
      #ebe7de 100%
    );
}

.references-intro::before {
  position: absolute;
  top: -250px;
  right: -190px;
  width: 570px;
  height: 570px;
  border: 1px solid rgba(8, 14, 20, 0.055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.references-intro::after {
  position: absolute;
  bottom: -310px;
  left: -220px;
  width: 630px;
  height: 630px;
  border: 1px solid rgba(8, 14, 20, 0.04);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.references-intro-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(250px, 0.35fr)
    minmax(0, 1fr);
  align-items: center;
  gap: 95px;
}

/* SOL 61 */

.references-intro-side {
  position: relative;
  display: flex;
  min-height: 405px;
  flex-direction: column;
  justify-content: center;
  padding: 45px;
  border: 1px solid rgba(8, 14, 20, 0.12);
  background:
    rgba(255, 255, 255, 0.28);
}

.references-intro-side::before {
  position: absolute;
  top: 27px;
  right: 27px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #897653;
  box-shadow:
    0 0 0 6px rgba(137, 118, 83, 0.08);
  content: "";
}

.references-intro-side > span {
  color: #887755;
  font-size: 0.51rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.references-intro-side strong {
  margin-top: 22px;
  color: #0a0f14;
  font-size: clamp(6rem, 9vw, 9rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.09em;
}

.references-intro-side small {
  margin-top: 25px;
  color: #777c7f;
  font-size: 0.51rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.16em;
}

/* SAĞ */

.references-intro-content {
  max-width: 900px;
}

.references-intro-content h2 {
  max-width: 920px;
  color: #080d12;
  font-size: clamp(3.5rem, 5.7vw, 6.3rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.067em;
}

.references-intro-content h2 em {
  display: block;
  color: #55788f;
  font-style: normal;
}

.references-intro-lead {
  position: relative;
  max-width: 760px;
  margin-top: 39px;
  padding-left: 25px;
  color: #1a2c38;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.7;
}

.references-intro-lead::before {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 2px;
  background: #8f7b54;
  content: "";
}

.references-intro-content > p:not(.references-intro-lead) {
  max-width: 700px;
  margin-top: 26px;
  color: #737b81;
  font-size: 0.83rem;
  line-height: 1.9;
}

/* =========================================================
   03. REFERANS LİSTESİ
========================================================= */

.references-list-section {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background: #f7f5f0;
}

.references-list-section::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9%;
  width: 1px;
  background: rgba(8, 14, 20, 0.035);
  content: "";
  pointer-events: none;
}

.references-list-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 70px;
  margin-bottom: 62px;
}

.references-list-heading h2 {
  max-width: 900px;
  color: #080d12;
  font-size: clamp(3.3rem, 5.3vw, 5.9rem);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.065em;
}

.references-list-heading h2 em {
  display: block;
  color: #55788e;
  font-style: normal;
}

/* REFERANS SAYISI */

.references-total {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 17px;
  padding-bottom: 7px;
}

.references-total strong {
  color: #0d151c;
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.07em;
}

.references-total span {
  color: #83888b;
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.12em;
}

/* =========================================================
   04. REFERANS GRID
========================================================= */

.references-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(8, 14, 20, 0.12);
  border-left: 1px solid rgba(8, 14, 20, 0.12);
}

/* KART */

.reference-brand-card {
  position: relative;
  display: flex;
  min-height: 215px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 25px;
  border-right: 1px solid rgba(8, 14, 20, 0.12);
  border-bottom: 1px solid rgba(8, 14, 20, 0.12);
  background:
    rgba(255, 255, 255, 0.25);
  transition:
    background 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.reference-brand-card::before {
  position: absolute;
  top: -74px;
  right: -74px;
  width: 155px;
  height: 155px;
  border: 1px solid rgba(68, 105, 130, 0.075);
  border-radius: 50%;
  content: "";
  transition:
    transform 0.45s ease;
}

.reference-brand-card:hover {
  z-index: 4;
  background: #ffffff;
  box-shadow:
    0 25px 65px rgba(7, 12, 18, 0.09);
  transform: translateY(-6px);
}

.reference-brand-card:hover::before {
  transform: scale(1.25);
}

/* NUMARA */

.reference-brand-number {
  position: absolute;
  top: 19px;
  left: 21px;
  color: #9a9da0;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* HARF */

.reference-brand-letter {
  position: absolute;
  top: 18px;
  right: 20px;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(78, 113, 137, 0.14);
  border-radius: 50%;
  background:
    rgba(238, 241, 241, 0.7);
  color: #58788e;
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-weight: 500;
}

/* İÇERİK */

.reference-brand-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.reference-brand-content strong {
  max-width: 230px;
  color: #16232c;
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.055em;
}

.reference-brand-content span {
  margin-top: 7px;
  color: #969b9e;
  font-size: 0.42rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ALT ÇİZGİ */

.reference-brand-line {
  width: 27px;
  height: 2px;
  margin-top: 17px;
  background: #5d7d92;
  transition:
    width 0.35s ease;
}

.reference-brand-card:hover
.reference-brand-line {
  width: 55px;
}

/* =========================================================
   05. SEKTÖRLER
========================================================= */

.references-sectors-section {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background:
    radial-gradient(
      circle at 87% 13%,
      rgba(72, 126, 163, 0.14),
      transparent 27%
    ),
    #070c12;
}

.references-sectors-section::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.023) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.023) 1px,
      transparent 1px
    );
  background-size: 82px 82px;
  content: "";
  pointer-events: none;
}

.references-sectors-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.47fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 62px;
}

.references-sectors-heading h2 {
  max-width: 900px;
  color: #ffffff;
  font-size: clamp(3.3rem, 5.3vw, 5.9rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.062em;
}

.references-sectors-heading h2 em {
  display: block;
  color: #234C70;
  font-style: normal;
}

.references-sectors-heading > p {
  max-width: 430px;
  padding-bottom: 7px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  line-height: 1.85;
}

/* SEKTÖR GRID */

.references-sector-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.references-sector-card {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.35s ease,
    transform 0.35s ease;
}

.references-sector-card::after {
  position: absolute;
  right: -75px;
  bottom: -90px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(132, 181, 212, 0.07);
  border-radius: 50%;
  content: "";
  transition:
    transform 0.45s ease;
}

.references-sector-card:hover {
  z-index: 3;
  background:
    rgba(255, 255, 255, 0.035);
  transform: translateY(-7px);
}

.references-sector-card:hover::after {
  transform: scale(1.24);
}

.references-sector-number {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.5rem;
  font-weight: 700;
}

.references-sector-icon {
  display: grid;
  width: 60px;
  height: 60px;
  margin-top: 70px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 1.25rem;
}

.references-sector-card h3 {
  margin-top: 28px;
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
}

.references-sector-card p {
  max-width: 260px;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.37);
  font-size: 0.71rem;
  line-height: 1.75;
}

/* =========================================================
   06. TRUST / UZUN VADELİ İŞ ORTAKLIĞI
========================================================= */

.references-trust-section {
  position: relative;
  overflow: hidden;
  padding: 135px 0;
  background: #0b1219;
}

.references-trust-section::before {
  position: absolute;
  top: -240px;
  left: -170px;
  width: 550px;
  height: 550px;
  border: 1px solid rgba(128, 173, 203, 0.07);
  border-radius: 50%;
  content: "";
}

.references-trust-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(280px, 0.42fr)
    minmax(0, 1fr);
  align-items: center;
  gap: 110px;
}

/* 1965 */

.references-trust-number {
  position: relative;
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: center;
  padding: 45px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(
      145deg,
      rgba(91, 132, 158, 0.17),
      rgba(255, 255, 255, 0.015)
    );
}

.references-trust-number::after {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
}

.references-trust-number > span {
  color: var(--gold-soft);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.references-trust-number strong {
  margin-top: 20px;
  color: #ffffff;
  font-size: clamp(5.5rem, 8vw, 8.5rem);
  font-weight: 400;
  line-height: 0.83;
  letter-spacing: -0.09em;
}

.references-trust-number small {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.47rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* SAĞ */

.references-trust-content {
  max-width: 850px;
}

.references-trust-content h2 {
  max-width: 830px;
  color: #ffffff;
  font-size: clamp(3.3rem, 5.2vw, 5.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.062em;
}

.references-trust-content h2 em {
  display: block;
  color: #7fa3ba;
  font-style: normal;
}

.references-trust-content > p {
  max-width: 680px;
  margin-top: 27px;
  color: rgba(255, 255, 255, 0.41);
  font-size: 0.8rem;
  line-height: 1.9;
}

/* FEATURES */

.references-trust-features {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  margin-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.references-trust-features > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 15px;
  min-height: 105px;
  padding: 19px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.references-trust-features > div > span {
  color: rgba(255, 255, 255, 0.24);
  font-size: 0.48rem;
  font-weight: 700;
}

.references-trust-features > div > div {
  display: flex;
  flex-direction: column;
}

.references-trust-features strong {
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}

.references-trust-features small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.58rem;
  line-height: 1.45;
}

/* =========================================================
   07. SLOGAN / STATEMENT
========================================================= */

.references-statement {
  position: relative;
  overflow: hidden;
  padding: 105px 0;
  background:
    linear-gradient(
      180deg,
      #e9e5dc,
      #f2efe8
    );
}

.references-statement::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 550px;
  height: 550px;
  border: 1px solid rgba(8, 14, 20, 0.045);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.references-statement-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.references-statement-inner > span {
  color: #8c7953;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.references-statement blockquote {
  max-width: 900px;
  margin-top: 30px;
  color: #151f26;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.references-statement small {
  margin-top: 29px;
  color: #8d9295;
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* =========================================================
   08. TABLET
========================================================= */

@media (max-width: 1100px) {

  .references-intro-grid {
    grid-template-columns:
      minmax(220px, 0.3fr)
      1fr;
    gap: 60px;
  }

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

  .references-sectors-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }

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

  .references-trust-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .references-trust-number {
    width: min(100%, 520px);
  }
}

/* =========================================================
   09. MOBILE
========================================================= */

@media (max-width: 720px) {

  /* INTRO */

  .references-intro,
  .references-list-section,
  .references-sectors-section,
  .references-trust-section {
    padding: 82px 0;
  }

  .references-intro-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .references-intro-side {
    min-height: 230px;
    padding: 26px;
  }

  .references-intro-side strong {
    font-size: 5.2rem;
  }

  .references-intro-content h2 {
    font-size:
      clamp(
        3rem,
        13vw,
        4.4rem
      );
  }

  .references-intro-lead {
    margin-top: 30px;
    padding-left: 18px;
    font-size: 1.02rem;
  }

  .references-intro-content
  > p:not(.references-intro-lead) {
    font-size: 0.77rem;
  }

  /* HEADING */

  .references-list-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 42px;
  }

  .references-list-heading h2,
  .references-sectors-heading h2,
  .references-trust-content h2 {
    font-size:
      clamp(
        2.9rem,
        12.5vw,
        4.2rem
      );
  }

  .references-total strong {
    font-size: 3.3rem;
  }

  /* GRID */

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

  .reference-brand-card {
    min-height: 175px;
    padding: 18px;
  }

  .reference-brand-number {
    top: 14px;
    left: 15px;
  }

  .reference-brand-letter {
    top: 13px;
    right: 14px;
    width: 36px;
    height: 36px;
    font-size: 0.92rem;
  }

  .reference-brand-content strong {
    padding-right: 10px;
    font-size: 0.62rem;
  }

  .reference-brand-content span {
    font-size: 0.34rem;
  }

  /* SECTORS */

  .references-sectors-heading {
    margin-bottom: 42px;
  }

  .references-sector-grid {
    grid-template-columns: 1fr;
  }

  .references-sector-card {
    min-height: 320px;
  }

  .references-sector-icon {
    margin-top: 45px;
  }

  /* TRUST */

  .references-trust-grid {
    gap: 42px;
  }

  .references-trust-number {
    min-height: 300px;
    padding: 30px;
  }

  .references-trust-number strong {
    font-size: 5.3rem;
  }

  .references-trust-content > p {
    font-size: 0.76rem;
  }

  .references-trust-features {
    grid-template-columns: 1fr;
  }

  /* STATEMENT */

  .references-statement {
    padding: 80px 0;
  }

  .references-statement blockquote {
    font-size:
      clamp(
        2rem,
        9vw,
        3rem
      );
  }
}

/* =========================================================
   10. EXTRA SMALL
========================================================= */

@media (max-width: 390px) {

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

  .reference-brand-card {
    min-height: 150px;
  }

  .references-total {
    gap: 12px;
  }

  .references-total strong {
    font-size: 3rem;
  }
}

/* =========================================================
   11. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .reference-brand-card,
  .reference-brand-card::before,
  .reference-brand-line,
  .references-sector-card,
  .references-sector-card::after {
    transition: none;
  }
}

/* =========================================================
   NAVBAR LOGO YAKINLAŞTIRMA
========================================================= */

.brand-logo img {
    width: 135% !important;
    height: 135% !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: scale(1.08);
}

/* =========================================================
   SEBAT MAKİNA
   İLETİŞİM SAYFASI
========================================================= */

.contact-new-page {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

/* =========================================================
   01. HERO
========================================================= */

.contact-new-hero {
  position: relative;
  overflow: hidden;
  padding: 165px 0 0;
  background:
    radial-gradient(
      circle at 82% 26%,
      rgba(72, 126, 163, 0.19),
      transparent 27%
    ),
    radial-gradient(
      circle at 12% 100%,
      rgba(130, 165, 187, 0.06),
      transparent 30%
    ),
    linear-gradient(
      125deg,
      #05080c 0%,
      #081019 55%,
      #0c1720 100%
    );
  color: #ffffff;
}

.contact-new-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.024) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.024) 1px,
      transparent 1px
    );
  background-size: 86px 86px;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 20%,
      #000 80%,
      transparent
    );
  pointer-events: none;
}

.contact-new-orbit {
  position: absolute;
  border: 1px solid rgba(128, 176, 207, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.contact-new-orbit-one {
  top: -300px;
  right: -240px;
  width: 720px;
  height: 720px;
}

.contact-new-orbit-two {
  right: 18%;
  bottom: -380px;
  width: 580px;
  height: 580px;
}

.contact-new-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.14fr 1fr 0.3fr;
  align-items: end;
  gap: 65px;
  min-height: 550px;
  padding-bottom: 85px;
}

/* SOL NUMARA */

.contact-new-hero-number {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 27px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-new-hero-number > span {
  color: var(--gold-soft);
  font-size: 0.64rem;
  font-weight: 700;
}

.contact-new-hero-number > small {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* HERO METİN */

.contact-new-hero-content {
  max-width: 900px;
}

.contact-new-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.47);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.contact-new-kicker::before {
  width: 34px;
  height: 1px;
  background: var(--gold-soft);
  content: "";
}

.contact-new-hero-content h1 {
  max-width: 930px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(4.2rem, 6.5vw, 7.4rem);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.07em;
}

.contact-new-hero-content h1 em {
  display: block;
  color: #82a7bf;
  font-style: normal;
}

.contact-new-hero-content > p {
  max-width: 650px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.82rem;
  line-height: 1.9;
}

/* SAĞ KONUM */

.contact-new-hero-side {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.contact-new-hero-side > span {
  color: var(--gold-soft);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.contact-new-hero-side strong {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.11);
  font-size: clamp(4rem, 6vw, 6.3rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.08em;
}

.contact-new-hero-side small {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* ALT BAR */

.contact-new-hero-bottom {
  position: relative;
  z-index: 4;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
}

.contact-new-hero-bottom-inner {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 45px);
}

.contact-new-hero-bottom-inner span {
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.contact-new-hero-bottom-inner i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-soft);
}

/* =========================================================
   02. ANA İLETİŞİM ALANI
========================================================= */

.contact-new-main {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background:
    linear-gradient(
      180deg,
      #f3f0e9 0%,
      #ebe7de 100%
    );
}

.contact-new-main::before {
  position: absolute;
  top: -250px;
  right: -190px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(8, 14, 20, 0.05);
  border-radius: 50%;
  content: "";
}

.contact-new-main-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(350px, 0.75fr)
    minmax(0, 1.25fr);
  align-items: start;
  gap: 85px;
}

/* =========================================================
   03. SOL İLETİŞİM
========================================================= */

.contact-new-info {
  position: sticky;
  top: 130px;
}

.contact-new-info h2 {
  max-width: 630px;
  color: #080d12;
  font-size: clamp(3.3rem, 5vw, 5.4rem);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.065em;
}

.contact-new-info h2 em {
  display: block;
  color: #55788e;
  font-style: normal;
}

.contact-new-description {
  max-width: 560px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.88;
}

/* =========================================================
   04. İLETİŞİM KARTLARI
========================================================= */

.contact-new-cards {
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid var(--line);
}

.contact-new-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 17px;
  min-height: 92px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--line);
  transition:
    padding-left 0.3s ease,
    background 0.3s ease;
}

a.contact-new-card:hover {
  padding-left: 14px;
  background: rgba(255, 255, 255, 0.36);
}

.contact-new-card-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(8, 14, 20, 0.13);
  border-radius: 50%;
  color: #55768d;
  font-size: 1rem;
}

.contact-new-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.contact-new-card small {
  color: #92979a;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.contact-new-card strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #182630;
  font-size: 0.74rem;
  font-weight: 700;
}

.contact-new-card > div > span {
  margin-top: 3px;
  color: #858c91;
  font-size: 0.64rem;
}

.contact-new-arrow {
  color: #8b9093;
  font-size: 0.9rem;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

a.contact-new-card:hover
.contact-new-arrow {
  color: #55768d;
  transform: translate(3px, -3px);
}

/* =========================================================
   05. 1965 MINI INFO
========================================================= */

.contact-new-mini-info {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.contact-new-mini-info > span {
  color: #0c1319;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.contact-new-mini-info p {
  max-width: 300px;
  color: #82888c;
  font-size: 0.66rem;
  line-height: 1.65;
}

/* =========================================================
   06. FORM
========================================================= */

.contact-new-form {
  position: relative;
  overflow: hidden;
  padding: clamp(35px, 4.8vw, 58px);
  border: 1px solid rgba(8, 14, 20, 0.12);
  background: #fdfcf9;
  box-shadow:
    0 35px 90px rgba(7, 12, 18, 0.09);
}

.contact-new-form::before {
  position: absolute;
  top: -160px;
  right: -150px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(70, 111, 137, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

/* FORM ÜST */

.contact-new-form-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
}

.contact-new-form-number {
  display: grid;
  width: 55px;
  height: 55px;
  place-items: center;
  border: 1px solid #0a1117;
  border-radius: 50%;
  background: #0a1117;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 700;
}

.contact-new-form-kicker {
  display: block;
  color: #8d7955;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.contact-new-form-top h3 {
  max-width: 650px;
  margin-top: 8px;
  color: #080d12;
  font-size: clamp(2.5rem, 3.7vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
}

.contact-new-form-top p {
  max-width: 590px;
  margin-top: 14px;
  color: #80878b;
  font-size: 0.74rem;
  line-height: 1.75;
}

.contact-new-divider {
  position: relative;
  z-index: 2;
  height: 1px;
  margin: 34px 0;
  background:
    linear-gradient(
      90deg,
      rgba(8, 14, 20, 0.16),
      rgba(8, 14, 20, 0.03)
    );
}

/* =========================================================
   07. FORM ROW
========================================================= */

.contact-new-form-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.contact-new-field {
  position: relative;
  z-index: 2;
  margin-bottom: 19px;
}

.contact-new-field > label {
  display: block;
  margin-bottom: 8px;
  color: #384a57;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* =========================================================
   08. INPUT
========================================================= */

.contact-new-input {
  position: relative;
}

.contact-new-input > i:first-child {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 17px;
  color: #8b959c;
  font-size: 0.93rem;
  pointer-events: none;
  transform: translateY(-50%);
}

.contact-new-input input,
.contact-new-input select,
.contact-new-input textarea {
  width: 100%;
  border: 1px solid rgba(8, 14, 20, 0.14);
  border-radius: 0;
  outline: none;
  background: rgba(255, 255, 255, 0.62);
  color: #111a21;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.contact-new-input input,
.contact-new-input select {
  height: 58px;
  padding: 0 48px;
}

.contact-new-input textarea {
  min-height: 170px;
  padding: 17px 18px 17px 48px;
  resize: vertical;
}

.contact-new-input input::placeholder,
.contact-new-input textarea::placeholder {
  color: #a0a5a8;
}

.contact-new-input input:focus,
.contact-new-input select:focus,
.contact-new-input textarea:focus {
  border-color: #587a91;
  background: #ffffff;
  box-shadow:
    0 0 0 3px
    rgba(88, 122, 145, 0.08);
}

/* SELECT */

.contact-new-input select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.contact-new-select-arrow {
  position: absolute;
  top: 50%;
  right: 17px;
  color: #89939a;
  pointer-events: none;
  transform: translateY(-50%);
}

/* TEXTAREA ICON */

.contact-new-textarea > i:first-child {
  top: 20px;
  transform: none;
}

/* =========================================================
   09. FORM BOTTOM
========================================================= */

.contact-new-form-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 8px;
  padding-top: 27px;
  border-top: 1px solid var(--line);
}

.contact-new-security {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 330px;
  color: #83898d;
  font-size: 0.63rem;
  line-height: 1.55;
}

.contact-new-security i {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(8, 14, 20, 0.13);
  border-radius: 50%;
  color: #4f7086;
}

/* SUBMIT */

.contact-new-submit {
  display: inline-flex;
  min-height: 60px;
  align-items: center;
  gap: 18px;
  padding: 6px 7px 6px 23px;
  border: 0;
  border-radius: 999px;
  background: #080e14;
  color: #ffffff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.contact-new-submit-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #080e14;
  transition:
    transform 0.3s ease;
}

.contact-new-submit:hover {
  background: #55778d;
  box-shadow:
    0 17px 35px
    rgba(7, 12, 18, 0.16);
  transform: translateY(-3px);
}

.contact-new-submit:hover
.contact-new-submit-icon {
  transform: rotate(45deg);
}

.contact-new-form-message {
  position: relative;
  z-index: 2;
  margin-top: 15px;
  color: #55778d;
  font-size: 0.7rem;
  font-weight: 600;
}

/* =========================================================
   10. KONUM SECTION
========================================================= */

.contact-location-section {
  position: relative;
  overflow: hidden;
  padding: 125px 0;
  background: #f7f5f0;
}

.contact-location-section::before {
  position: absolute;
  top: -220px;
  left: -180px;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(8, 14, 20, 0.045);
  border-radius: 50%;
  content: "";
}

.contact-location-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 70px;
  margin-bottom: 52px;
}

.contact-location-heading h2 {
  max-width: 850px;
  color: #080d12;
  font-size: clamp(3.2rem, 5.2vw, 5.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.064em;
}

.contact-location-heading h2 em {
  display: block;
  color: #55788e;
  font-style: normal;
}

.contact-location-address {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: 8px;
}

.contact-location-address > span {
  color: #8e7a56;
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.contact-location-address strong {
  margin-top: 8px;
  color: #17242d;
  font-size: 1rem;
  font-weight: 700;
}

.contact-location-address small {
  margin-top: 2px;
  color: #8b9195;
  font-size: 0.47rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* =========================================================
   11. HARİTA
========================================================= */

.contact-map {
  position: relative;
  z-index: 2;
  height: 590px;
  overflow: hidden;
  border: 1px solid rgba(8, 14, 20, 0.12);
  background: #d7d8d6;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  filter:
    grayscale(0.82)
    saturate(0.55)
    contrast(0.98);
}

.contact-map::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(4, 8, 12, 0.02),
      transparent 55%,
      rgba(4, 8, 12, 0.16)
    );
  content: "";
  pointer-events: none;
}

/* HARİTA KARTI */

.contact-map-card {
  position: absolute;
  z-index: 4;
  right: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  min-width: 330px;
  padding: 19px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 11, 16, 0.91);
  color: #ffffff;
  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
}

.contact-map-card-number {
  color: var(--gold-soft);
  font-size: 0.48rem;
  font-weight: 700;
}

.contact-map-card > div {
  display: flex;
  flex-direction: column;
}

.contact-map-card small {
  color: rgba(255, 255, 255, 0.29);
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.contact-map-card strong {
  margin-top: 3px;
  color: #ffffff;
  font-size: 0.73rem;
}

.contact-map-card p {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.58rem;
}

.contact-map-card > i {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: var(--gold-soft);
}

/* =========================================================
   12. DESTEK KARTLARI
========================================================= */

.contact-support-section {
  padding: 120px 0;
  background: #080d13;
}

.contact-support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-support-card {
  position: relative;
  min-height: 350px;
  padding: 27px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}

.contact-support-card:hover {
  z-index: 2;
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-7px);
}

.contact-support-card > span {
  color: rgba(255, 255, 255, 0.24);
  font-size: 0.48rem;
  font-weight: 700;
}

.contact-support-card > i {
  display: grid;
  width: 57px;
  height: 57px;
  margin-top: 62px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 1.15rem;
}

.contact-support-card h3 {
  margin-top: 25px;
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 500;
}

.contact-support-card p {
  max-width: 310px;
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.37);
  font-size: 0.7rem;
  line-height: 1.75;
}

/* =========================================================
   13. TABLET
========================================================= */

@media (max-width: 1100px) {

  .contact-new-hero-container {
    grid-template-columns: 0.13fr 1fr;
  }

  .contact-new-hero-side {
    display: none;
  }

  .contact-new-main-grid {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .contact-new-info {
    position: static;
  }

  .contact-location-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .contact-location-address {
    align-items: flex-start;
  }
}

/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 720px) {

  /* HERO */

  .contact-new-hero {
    padding-top: 120px;
  }

  .contact-new-hero-container {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 24px;
    padding-bottom: 62px;
  }

  .contact-new-hero-number {
    min-height: auto;
    flex-direction: row;
    align-items: center;
    padding-right: 0;
    padding-bottom: 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .contact-new-hero-number > small {
    writing-mode: initial;
    transform: none;
  }

  .contact-new-hero-content h1 {
    font-size: clamp(3.2rem, 14vw, 4.7rem);
  }

  .contact-new-hero-content > p {
    font-size: 0.76rem;
  }

  .contact-new-hero-bottom-inner {
    min-height: 54px;
    gap: 10px;
  }

  .contact-new-hero-bottom-inner span {
    font-size: 0.32rem;
    letter-spacing: 0.07em;
  }

  /* MAIN */

  .contact-new-main,
  .contact-location-section,
  .contact-support-section {
    padding: 80px 0;
  }

  .contact-new-main-grid {
    gap: 48px;
  }

  .contact-new-info h2,
  .contact-location-heading h2 {
    font-size:
      clamp(
        3rem,
        13vw,
        4.35rem
      );
  }

  .contact-new-description {
    font-size: 0.77rem;
  }

  /* INFO */

  .contact-new-card {
    grid-template-columns: 48px 1fr auto;
    min-height: 82px;
  }

  .contact-new-card-icon {
    width: 43px;
    height: 43px;
  }

  .contact-new-card strong {
    font-size: 0.68rem;
  }

  /* FORM */

  .contact-new-form {
    padding: 30px 18px;
  }

  .contact-new-form-top {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-new-form-number {
    width: 48px;
    height: 48px;
  }

  .contact-new-form-top h3 {
    font-size: 2.55rem;
  }

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

  .contact-new-form-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-new-security {
    max-width: none;
  }

  .contact-new-submit {
    width: 100%;
    justify-content: space-between;
  }

  /* MAP */

  .contact-map {
    height: 460px;
  }

  .contact-map-card {
    right: 14px;
    bottom: 14px;
    left: 14px;
    min-width: 0;
  }

  /* SUPPORT */

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

  .contact-support-card {
    min-height: 300px;
  }

  .contact-support-card > i {
    margin-top: 43px;
  }
}

/* =========================================================
   15. EXTRA SMALL
========================================================= */

@media (max-width: 390px) {

  .contact-new-hero-bottom-inner
  span:nth-of-type(3),
  .contact-new-hero-bottom-inner
  i:nth-of-type(3) {
    display: none;
  }

  .contact-map {
    height: 400px;
  }

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

  .contact-map-card > i {
    display: none;
  }
}

/* =========================================================
   16. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-new-card,
  .contact-new-arrow,
  .contact-new-submit,
  .contact-new-submit-icon,
  .contact-support-card {
    transition: none;
  }
}