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

   RESET

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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html {

    width: 100%;

    scroll-behavior: smooth;

    overflow-x: hidden;

}

body {

    width: 100%;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    background: #ffffff;

    color: #071d36;

    font-family: "Encode Sans Semi Condensed", sans-serif;

}

a {

    color: inherit;

    text-decoration: none;

}

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

   VARIABLES

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

:root {

    --background-1: #ffffff;

    --background-2: #071d36;

    --background-3: #06133a;

    --background-4: #eaf1fa;

    --background-5: #891834;

    --accent-2: #eaf1fa;

    --accent-4: #9fd7ff;

    --paragraph-1: #ffffff;

    --paragraph-2: #071d36;

    --divider: #5b606a;

}

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

   NAVBAR

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

.navbar {

    width: 100%;

    height: 76px;

    background: var(--background-2);

    position: relative;

    z-index: 100;

}

.nav-content {

    width: 100%;

    height: 76px;

    display: flex;

    align-items: stretch;

}

.nav-button {

    height: 76px;

    padding: 10px 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--background-2);

    color: var(--paragraph-1);

    font-size: 18px;

    line-height: 1.1;

    font-weight: 400;

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

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

}

.nav-logo {

    flex: 1;

    min-width: 0;

    margin-left: auto;

    padding: 10px 30px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    border-left: 1px solid var(--divider);

}

.nav-logo-image {

    width: 178px;

    height: 56px;

    object-fit: contain;

    object-position: right center;

    display: block;

    margin-left: auto;

}

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

   HERO SLIDER

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

.hero-slider {

    width: 100%;

    height: 650px;

    position: relative;

    overflow: hidden;

}

.hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0;

    visibility: hidden;

    transition:

        opacity 0.8s ease,

        visibility 0.8s ease;

}

.hero-slide.active {

    opacity: 1;

    visibility: visible;

    z-index: 1;

}

.hero-content {

    width: 100%;

    height: 100%;

    padding-top: 116px;

    padding-right: 30px;

    padding-bottom: 64px;

    padding-left: 30px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: space-between;

    position: relative;

    z-index: 2;

}

.hero-content h1 {

    width: 594px;

    color: var(--paragraph-1);

    font-size: 110px;

    line-height: 0.9;

    font-weight: 600;

}

/* OKLAR */

.slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    width: 48px;

    height: 48px;

    border: none;

    background: rgba(7, 29, 54, 0.55);

    color: white;

    font-size: 28px;

    cursor: pointer;

    transition: background 0.2s ease;

}

.slider-arrow:hover {

    background: rgba(7, 29, 54, 0.85);

}

.slider-prev {

    left: 20px;

}

.slider-next {

    right: 20px;

}

/* NOKTALAR */

.slider-dots {

    position: absolute;

    left: 50%;

    bottom: 22px;

    transform: translateX(-50%);

    z-index: 5;

    display: flex;

    gap: 10px;

}

.slider-dot {

    width: 10px;

    height: 10px;

    border: 1px solid white;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

}

.slider-dot.active {

    background: white;

}

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

   BUTTONS

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

.btn {

    height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 26px;

    font-size: 13px;

    line-height: 0.9;

    border-radius: 0;

}

.btn-light {

    background: var(--accent-2);

    color: var(--paragraph-2);

}

.btn-blue {

    background: var(--accent-4);

    color: #ffffff;

}

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

   SPLIT SECTIONS

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

.split-section {

    width: 100%;

    height: 640px;

    display: flex;

    border: 1px solid var(--divider);

}

.visual-panel {

    width: 640px;

    height: 640px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-position: center;

}

.vision-visual::before {

    content: "";

    position: absolute;

    inset: 0;

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

    z-index: 0;

}

.solutions-visual::before {

    content: "";

    position: absolute;

    inset: 0;

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

    z-index: 0;

}

.visual-panel h2 {

    position: relative;

    z-index: 1;

    color: white;

    font-size: 80px;

    line-height: 0.9;

    font-weight: 500;

}

.vision-visual {

    background-image: url("assets/images/2.png");

}

.solutions-visual {

    background-image: url("assets/images/3.png");

}

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

   RIGHT CONTENT

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

.content-panel {

    width: 640px;

    height: 640px;

    padding: 110px 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: var(--background-1);

}

.text-block {

    width: 420px;

    padding: 0 25px;

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.text-block + .text-block {

    margin-top: 48px;

}

.text-block h3,

.solution-text h3 {

    font-size: 20px;

    line-height: 0.9;

    font-weight: 600;

}

.text-block p,

.solution-text p {

    font-size: 17px;

    line-height: 1.2;

}

.solution-text {

    width: 420px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 35px;

}

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

   FOOTER

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

.footer {

    width: 100%;

    background: var(--background-4);

}

.footer-content {

    width: 100%;

    height: 448px;

    display: flex;

    align-items: flex-start;

}

.footer-heading {

    width: 33.333%;

    padding: 30px;

}

.footer-heading h2 {

    font-size: 56px;

    line-height: 0.9;

}

.contact-list,

.address-list {

    width: 33.333%;

    padding: 30px;

    display: flex;

    flex-direction: column;

}

.contact-list {

    gap: 36px;

}

.address-list {

    gap: 32px;

}

.footer h4 {

    font-size: 16px;

    margin-bottom: 8px;

}

.footer p {

    font-size: 16px;

    line-height: 1.1;

}

.company-info {

    width: 298px;

}

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

   FOOTER LINKS

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

.footer-links {

    width: 100%;

    height: 188px;

    display: flex;

}

.footer-link {

    width: 33.333%;

    height: 188px;

    padding: 30px;

    display: flex;

    align-items: flex-start;

    font-size: 24px;

    line-height: 1;

    color: var(--paragraph-1);

}

.footer-social {

    background: var(--background-3);

}

.footer-mail {

    background: var(--background-2);

}

.footer-phone {

    background: var(--background-5);

}

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

   HOVER

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

.nav-button,

.btn,

.footer-link {

    transition:

        opacity 0.2s ease,

        transform 0.2s ease;

}

.nav-button:hover,

.btn:hover,

.footer-link:hover {

    opacity: 0.85;

}

.btn:hover {

    transform: translateY(-2px);

}

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

   TABLET

   800px - 1279px

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

@media (min-width: 800px) and (max-width: 1279px) {

    /* NAVBAR */

    .navbar,

    .nav-content {

        height: 76px;

    }

    .nav-button {

        height: 76px;

        padding: 10px 30px;

        font-size: 18px;

    }

    .nav-logo {

        flex: 1;

        min-width: 0;

        margin-left: auto;

        height: 76px;

        padding: 10px 30px;

        display: flex;

        align-items: center;

        justify-content: flex-end;

    }

    .nav-logo-image {

        width: 150px;

        height: auto;

        display: block;

        margin-left: auto;

        object-fit: contain;

        object-position: right center;

    }

    /* HERO */

    .hero-slider {

        height: 540px;

    }

    .hero-content {

        height: 540px;

        padding-top: 116px;

        padding-right: 30px;

        padding-bottom: 64px;

        padding-left: 30px;

    }

    .hero-content h1 {

        width: auto;

        font-size: 48px;

        line-height: 0.9;

        white-space: nowrap;

    }

    /* VİZYON + ÇÖZÜMLER */

    .split-section {

        height: 400px;

    }

    .visual-panel,

    .content-panel {

        width: 50%;

        height: 400px;

    }

    .visual-panel {

        padding: 30px;

    }

    .visual-panel h2 {

        font-size: 40px;

        line-height: 0.9;

    }

    /* SAĞ METİN ALANI */

    .content-panel {

        padding: 48px;

    }

    .text-block {

        width: 100%;

        padding: 0;

        gap: 15px;

    }

    .text-block + .text-block {

        margin-top: 30px;

    }

    .text-block h3,

    .solution-text h3 {

        font-size: 17px;

    }

    .text-block p,

    .solution-text p {

        font-size: 14px;

        line-height: 1.2;

    }

    .solution-text {

        width: 100%;

        gap: 25px;

    }

    /* BUTTON */

    .btn {

        height: 48px;

        padding: 18px 26px;

        font-size: 13px;

    }

    /* FOOTER */

    .footer-content {

        height: 448px;

    }

    .footer-heading,

    .contact-list,

    .address-list {

        padding: 30px;

    }

    .footer-heading h2 {

        font-size: 48px;

    }

    .contact-list {

        gap: 30px;

    }

    .address-list {

        gap: 28px;

    }

    .footer h4,

    .footer p {

        font-size: 13px;

    }

    .company-info {

        width: 100%;

    }

    /* FOOTER ALT ŞERİT */

    .footer-links {

        height: 188px;

    }

    .footer-link {

        height: 188px;

        padding: 30px;

        font-size: 18px;

    }

}
/* ====================================

   MOBILE

   0px - 799px

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

@media (max-width: 799px) {

    /* =================================
       NAVBAR
    ================================= */

    .navbar {

        width: 100%;

        height: 50px;

        position: fixed;

        top: 0;

        left: 0;

        z-index: 1000;

        background: var(--background-2);

    }

    .nav-content {

        width: 100%;

        height: 50px;

        display: flex;

        align-items: stretch;

        position: relative;

    }

    /* Desktop / tablet linklerini gizle */

    .nav-button {

        display: none;

    }

    /* Hamburger */

    .mobile-menu-button {

        width: 50px;

        height: 50px;

        flex: 0 0 50px;

        padding: 10px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 5px;

        background: var(--background-2);

        border: 0;

        border-right: 1px solid var(--divider);

        cursor: pointer;

        z-index: 1002;

    }

    .mobile-menu-button span {

        width: 100%;

        height: 2px;

        display: block;

        background: white;

        transition:

            transform 0.25s ease,

            opacity 0.25s ease;

    }

    /* Açılınca X */

    .mobile-menu-button.active span:nth-child(1) {

        transform: translateY(7px) rotate(45deg);

    }

    .mobile-menu-button.active span:nth-child(2) {

        opacity: 0;

    }

    .mobile-menu-button.active span:nth-child(3) {

        transform: translateY(-7px) rotate(-45deg);

    }

    /* Logo alanı */

    .nav-logo {

        flex: 1;

        min-width: 0;

        margin-left: auto;

        height: 50px;

        padding: 10px 20px;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        border-left: 0;

    }

    .nav-logo-image {

        width: auto;

        height: 30px;

        display: block;

        margin-left: auto;

        object-fit: contain;

        object-position: right center;

    }

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

    .mobile-menu {

        position: absolute;

        top: 50px;

        left: 0;

        width: 100%;

        background: var(--background-4);

        z-index: 1001;

        display: flex;

        flex-direction: column;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition:

            opacity 0.25s ease,

            transform 0.25s ease,

            visibility 0.25s ease;

    }

    .mobile-menu.active {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }

    .mobile-menu a {

        min-height: 82px;

        padding: 24px 30px;

        display: flex;

        align-items: center;

        color: var(--paragraph-2);

        font-size: 18px;

        font-weight: 500;

        border-bottom: 1px solid var(--divider);

    }

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

    .hero-slider {

        width: 100%;

        height: 500px;

        margin-top: 50px;

    }

    .hero-slide {

        width: 100%;

        height: 100%;

        background-size: cover;

        background-position: center;

    }

    .hero-content {

        width: 100%;

        height: 100%;

        padding:
            80px
            20px
            45px
            20px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: space-between;

    }

    .hero-content h1 {

        width: 280px;

        font-size: 44px;

        line-height: 0.9;

        white-space: normal;

        color: white;

    }

    .hero-content .btn {

        height: 42px;

        padding: 14px 20px;

        font-size: 12px;

    }

    /* Slider okları */

    .slider-arrow {

        width: 38px;

        height: 38px;

        font-size: 20px;

        background: rgba(7, 29, 54, 0.5);

    }

    .slider-prev {

        left: 8px;

    }

    .slider-next {

        right: 8px;

    }

    /* Slider noktaları */

    .slider-dots {

        bottom: 15px;

        gap: 8px;

    }

    .slider-dot {

        width: 8px;

        height: 8px;

    }

    /* =================================
       VISION / SOLUTIONS
    ================================= */

    .split-section {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

        border-left: 0;

        border-right: 0;

    }

    /* Görsel taraf */

    .visual-panel {

        width: 100%;

        height: auto;

        aspect-ratio: 1 / 1;

        padding: 20px;

        flex: none;

        background-size: cover;

        background-position: center;

    }

    .visual-panel h2 {

        font-size: 40px;

        line-height: 0.9;

    }

    /* Metin taraf */

    .content-panel {

        width: 100%;

        height: auto;

        padding: 45px 30px;

        display: flex;

        justify-content: flex-start;

        align-items: flex-start;

    }

    .text-block {

        width: 100%;

        padding: 0;

        gap: 15px;

    }

    .text-block + .text-block {

        margin-top: 38px;

    }

    .text-block h3,

    .solution-text h3 {

        font-size: 18px;

        line-height: 0.95;

    }

    .text-block p,

    .solution-text p {

        font-size: 14px;

        line-height: 1.2;

    }

    /* Solutions */

    .solution-text {

        width: 100%;

        gap: 28px;

    }

    .solution-text .btn {

        height: 42px;

        padding: 14px 20px;

    }

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

    .footer {

        width: 100%;

    }

    .footer-content {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

        padding: 0;

    }

    .footer-heading,

    .contact-list,

    .address-list {

        width: 100%;

        padding: 30px;

    }

    .footer-heading {

        padding-bottom: 10px;

    }

    .footer-heading h2 {

        font-size: 48px;

        line-height: 0.9;

    }

    .contact-list {

        gap: 28px;

    }

    .address-list {

        gap: 28px;

        padding-top: 10px;

        padding-bottom: 40px;

    }

    .footer h4 {

        font-size: 15px;

    }

    .footer p {

        font-size: 14px;

        line-height: 1.2;

    }

    .company-info {

        width: 100%;

    }

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

    .footer-links {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

    }

    .footer-link {

        width: 100%;

        height: 72px;

        padding: 20px 30px;

        display: flex;

        align-items: center;

        font-size: 18px;

    }

}


/* ==========================================
   ÇÖZÜMLERİMİZ PAGE
========================================== */

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

.solutions-page-hero {

    width: 100%;

    height: 580px;

    position: relative;

    background-image:
        url("./assets/images/solutions-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

    border-bottom: 10px solid #891834;

}

.solutions-page-hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(7, 29, 54, 0.35);

}

.solutions-page-hero-content {

    width: 100%;

    height: 100%;

    position: relative;

    z-index: 2;

    padding: 55px 30px;

    display: flex;

    align-items: flex-start;

}

.solutions-page-hero h1 {

    color: white;

    font-size: 80px;

    line-height: 0.9;

    font-weight: 400;

}


/* ==========================================
   SOLUTIONS SHOWCASE
========================================== */

.solutions-showcase {

    width: 100%;

    display: grid;

    grid-template-columns:
        34% 66%;

}


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

.solutions-intro {

    min-height: 1150px;

    padding: 40px 30px;

    background: var(--background-2);

    color: white;

}

.solutions-intro h2 {

    max-width: 340px;

    font-size: 42px;

    line-height: 0.95;

    font-weight: 600;

}

.solutions-intro p {

    max-width: 340px;

    margin-top: 40px;

    font-size: 16px;

    line-height: 1.35;

    opacity: 0.8;

}


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

.solutions-cards {

    width: 100%;

    display: grid;

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

    align-content: start;

    background: white;

}


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

.solution-card {

    width: 100%;

    display: flex;

    flex-direction: column;

    background: white;

    border-right: 1px solid var(--divider);

    border-bottom: 1px solid var(--divider);

}

.solution-image {

    width: 100%;

    aspect-ratio: 1.45 / 1;

    overflow: hidden;

}

.solution-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.45s ease;

}

.solution-card:hover .solution-image img {

    transform: scale(1.04);

}

.solution-card-content {

    min-height: 125px;

    padding: 20px;

    background: white;

}

.solution-card-content h3 {

    color: var(--paragraph-2);

    font-size: 22px;

    line-height: 1;

    font-weight: 600;

}

.solution-card-content p {

    margin-top: 12px;

    color: var(--paragraph-2);

    font-size: 14px;

    line-height: 1.25;

}


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

.why-destek {

    width: 100%;

    min-height: 440px;

    display: grid;

    grid-template-columns:
        34% 66%;

}

.why-destek-brand {

    padding: 30px;

    background: var(--background-5);

    color: white;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 28px;

    overflow: hidden;

}

.why-destek-brand h2 {

    margin: 0;

    color: white;

    font-size: 28px;

    line-height: 1;

    font-weight: 500;

}

.destek-acilim-image {

    width: 360px;

    max-width: 90%;

    height: auto;

    display: block;

    align-self: center;

    margin-top: 10px;

    object-fit: contain;

}

.why-destek-content {

    padding: 40px 55px;

    display: flex;

    align-items: center;

    background: var(--background-2);

    color: white;

}

.why-destek-content ul {

    padding-left: 22px;

}

.why-destek-content li {

    margin-bottom: 18px;

    font-size: 17px;

    line-height: 1.25;

}


/* ==========================================
   CURRENT NAV PAGE
========================================== */

.nav-active {

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

}


/* ==========================================
   ÇÖZÜMLER TABLET
========================================== */

@media (min-width: 800px) and (max-width: 1279px) {

    .solutions-page-hero {

        height: 500px;

    }

    .solutions-page-hero-content {

        padding: 45px 30px;

    }

    .solutions-page-hero h1 {

        font-size: 58px;

    }

    .solutions-showcase {

        grid-template-columns:
            30% 70%;

    }

    .solutions-intro {

        min-height: 900px;

        padding: 30px 25px;

    }

    .solutions-intro h2 {

        font-size: 32px;

    }

    .solutions-intro p {

        font-size: 14px;

    }

    .solution-card-content {

        min-height: 110px;

        padding: 15px;

    }

    .solution-card-content h3 {

        font-size: 17px;

    }

    .solution-card-content p {

        font-size: 12px;

    }

    .why-destek {

        grid-template-columns:
            30% 70%;

    }

    .why-destek-content {

        padding: 35px;

    }

    .why-destek-content li {

        font-size: 14px;

    }

    .why-destek-brand {

        padding: 28px 24px;

        gap: 24px;

    }

    .destek-acilim-image {

        width: 300px;

        max-width: 90%;

    }

}


/* ==========================================
   ÇÖZÜMLER MOBILE
========================================== */

@media (max-width: 799px) {

    .solutions-page-hero {

        height: 350px;

        margin-top: 50px;

    }

    .solutions-page-hero-content {

        padding: 30px 20px;

    }

    .solutions-page-hero h1 {

        font-size: 44px;

    }

    /* INTRO + CARDS ALT ALTA */

    .solutions-showcase {

        display: flex;

        flex-direction: column;

    }

    .solutions-intro {

        min-height: auto;

        padding: 35px 25px;

    }

    .solutions-intro h2 {

        max-width: none;

        font-size: 32px;

    }

    .solutions-intro p {

        max-width: none;

        margin-top: 25px;

        font-size: 14px;

    }

    /* MOBILE TEK KOLON */

    .solutions-cards {

        grid-template-columns: 1fr;

    }

    .solution-image {

        aspect-ratio: 16 / 10;

    }

    .solution-card-content {

        min-height: auto;

        padding: 20px;

    }

    .solution-card-content h3 {

        font-size: 20px;

    }

    .solution-card-content p {

        font-size: 14px;

    }

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

    .why-destek {

        display: flex;

        flex-direction: column;

        min-height: auto;

    }

    .why-destek-brand {

        width: 100%;

        padding: 30px 25px;

        gap: 24px;

    }

    .why-destek-brand h2 {

        font-size: 28px;

    }

    .destek-acilim-image {

        width: 260px;

        max-width: 90%;

        align-self: flex-start;

        margin-top: 5px;

    }

}
/* ==========================================
   HAKKIMIZDA PAGE
========================================== */

/* HERO */

.about-hero {

    width: 100%;

    height: 560px;

    position: relative;

    background-image:
        url("./assets/images/about-hero.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}

.about-hero-overlay {

    position: absolute;

    inset: 0;

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

}

.about-hero-content {

    width: 100%;

    height: 100%;

    position: relative;

    z-index: 2;

    padding: 55px 30px;

    display: flex;

    align-items: flex-start;

}

.about-hero h1 {

    color: white;

    font-size: 80px;

    line-height: 0.9;

    font-weight: 400;

}


/* TITLE BAND */

.about-title-band {

    width: 100%;

    padding: 28px 30px;

    background: var(--background-2);

    color: white;

}

.about-title-band h2 {

    font-size: 56px;

    line-height: 1;

    font-weight: 500;

}


/* MAIN */

.about-main {

    width: 100%;

    min-height: 470px;

    display: grid;

    grid-template-columns:
        34% 66%;

    background: var(--background-4);

}

.about-side {

    background: var(--background-2);

}

.about-content {

    padding: 38px 45px 45px 45px;

    color: var(--paragraph-2);

}

.about-content h3 {

    margin-bottom: 18px;

    font-size: 20px;

    line-height: 1;

    font-weight: 600;

}

.about-content p {

    margin-bottom: 15px;

    font-size: 15px;

    line-height: 1.25;

}

.about-acronym {

    margin: 5px 0 18px 0;

}

.about-acronym p {

    margin-bottom: 3px;

}

.about-acronym strong {

    display: inline-block;

    width: 18px;

    color: var(--background-5);

}

.about-company-note {

    margin-top: 20px;

    font-weight: 500;

}


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

@media (min-width: 800px) and (max-width: 1279px) {

    .about-hero {

        height: 440px;

    }

    .about-hero-content {

        padding: 45px 30px;

    }

    .about-hero h1 {

        font-size: 58px;

    }

    .about-title-band {

        padding: 26px 30px;

    }

    .about-title-band h2 {

        font-size: 48px;

    }

    .about-main {

        display: block;

    }

    .about-side {

        display: none;

    }

    .about-content {

        padding: 40px 35px;

    }

    .about-content p {

        font-size: 14px;

    }

}


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

@media (max-width: 799px) {

    .about-hero {

        height: 330px;

        margin-top: 50px;

        background-position: center;

    }

    .about-hero-content {

        padding: 30px 20px;

    }

    .about-hero h1 {

        font-size: 44px;

    }

    .about-title-band {

        padding: 24px 20px;

    }

    .about-title-band h2 {

        font-size: 48px;

    }

    .about-main {

        display: block;

        min-height: auto;

    }

    .about-side {

        display: none;

    }

    .about-content {

        padding: 35px 25px 45px 25px;

    }

    .about-content h3 {

        font-size: 18px;

    }

    .about-content p {

        font-size: 14px;

        line-height: 1.28;

    }

}


/* =========================================================
   FINAL NAV LOGO ALIGNMENT LOCK
   Logo her ekran modunda sağ üstte kalır.
========================================================= */

.nav-content {
    width: 100%;
}

.nav-logo {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
    margin-right: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.nav-logo-image {
    display: block;
    margin-left: auto;
    margin-right: 0;

    object-fit: contain;
    object-position: right center;
}

@media (min-width: 800px) and (max-width: 1279px) {

    .nav-logo {
        flex: 1 1 auto;
        margin-left: auto;
        margin-right: 0;
        justify-content: flex-end;
    }

    .nav-logo-image {
        width: 150px;
        height: auto;
        margin-left: auto;
        margin-right: 0;
    }

}

@media (max-width: 799px) {

    .nav-logo {
        flex: 1 1 auto;
        margin-left: auto;
        margin-right: 0;
        justify-content: flex-end;
    }

    .nav-logo-image {
        width: auto;
        height: 30px;
        margin-left: auto;
        margin-right: 0;
    }

}


/* =========================================================
   FINAL ABOUT / CONTACT HEADING LOCK
   Hakkımızda ve İletişim her breakpoint'te aynı boyuttadır.
========================================================= */

.about-title-band h2,
.footer-heading h2 {

    font-size: 56px;

    line-height: 0.9;

    font-weight: 500;

    margin: 0;

}

@media (min-width: 800px) and (max-width: 1279px) {

    .about-title-band h2,
    .footer-heading h2 {

        font-size: 48px;

        line-height: 0.9;

    }

}

@media (max-width: 799px) {

    .about-title-band h2,
    .footer-heading h2 {

        font-size: 48px;

        line-height: 0.9;

    }

}


/* =========================================================
   NAVBAR SON HİZALAMA DÜZELTMESİ
========================================================= */

html,
body {

    margin: 0 !important;

    padding: 0 !important;

}

.navbar {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    position: relative;

}

.nav-content {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    position: relative;

}


/* LOGOYU SAĞ KENARA KİLİTLE */

.nav-logo {

    position: absolute;

    top: 0;

    right: 0;

    height: 76px;

    margin: 0 !important;

    padding: 10px 15px !important;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    border-left: 0;

}

.nav-logo-image {

    width: 178px;

    height: 56px;

    display: block;

    margin: 0 !important;

    object-fit: contain;

    object-position: right center;

}


/* TABLET */

@media (min-width: 800px) and (max-width: 1279px) {

    .nav-logo {

        top: 0;

        right: 0;

        height: 76px;

        padding: 10px 15px !important;

    }

    .nav-logo-image {

        width: 150px;

        height: 56px;

    }

}


/* MOBILE */

@media (max-width: 799px) {

    .nav-logo {

        top: 0;

        right: 0;

        height: 50px;

        padding: 10px 15px !important;

    }

    .nav-logo-image {

        width: auto;

        height: 30px;

    }

}


/* ANA SAYFA SEPARATOR DÜZELTMESİ */

.visual-panel,
.content-panel {

    border: 0 !important;

}

.footer {

    border-top: 1px solid var(--divider);

}


/* =========================================================
   ANA SAYFA - TEK PARÇA SEPARATOR
========================================================= */

.split-section {

    position: relative;

    border: none !important;

}


/* İç panellerdeki eski çizgileri kapat */

.visual-panel,
.content-panel {

    border: none !important;

}


/* Eski HR/divider varsa gizle */

.split-section hr,
.visual-panel hr,
.content-panel hr,
.text-block hr,
.solution-text hr {

    display: none !important;

}


/* Tek ve tam genişlik separator */

.split-section::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background: var(--divider);

    z-index: 20;

    pointer-events: none;

}


/* Footer başlangıcı */

.footer {

    position: relative;

    border-top: none !important;

}

.footer::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background: var(--divider);

    z-index: 20;

}
/* =========================================================
   LANGUAGE SWITCH - FINAL
========================================================= */

.language-switch {

    position: absolute;

    top: 0;

    right: 208px;

    height: 76px;

    display: flex;

    align-items: center;

    z-index: 1100;

}


/* Aktif dili gösteren buton */

.language-toggle {

    height: 44px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border: 0;

    background: transparent;

    color: #ffffff;

    font-family: inherit;

    font-size: 15px;

    line-height: 1;

    font-weight: 600;

    cursor: pointer;

}


/* Küçük ok */

.language-arrow {

    display: inline-block;

    font-size: 13px;

    line-height: 1;

    transition:
        transform 0.2s ease;

}


/* Menü açılınca oku çevir */

.language-switch.active .language-arrow {

    transform: rotate(180deg);

}


/* Açılan dil kutusu */

.language-dropdown {

    position: absolute;

    top: 60px;

    left: 50%;

    min-width: 62px;

    background: #f1f1f1;

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(-6px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.12);

}


/* Menü açık */

.language-switch.active .language-dropdown {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

}


/* Açılır menü linki */

.language-dropdown a {

    min-height: 48px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #071d36;

    background: #f1f1f1;

    font-size: 15px;

    font-weight: 600;

}


/* Hover */

.language-dropdown a:hover {

    background: #e5e5e5;

}


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

@media (min-width: 800px) and (max-width: 1279px) {

    .language-switch {

        right: 180px;

        height: 76px;

    }


    .language-toggle {

        height: 40px;

        padding: 0 10px;

        font-size: 14px;

    }


    .language-dropdown {

        top: 58px;

        min-width: 58px;

    }


    .language-dropdown a {

        min-height: 44px;

        padding: 0 16px;

        font-size: 14px;

    }

}


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

@media (max-width: 799px) {

    .language-switch {

        top: 0;

        right: 72px;

        height: 50px;

    }


    .language-toggle {

        height: 36px;

        padding: 0 8px;

        font-size: 13px;

    }


    .language-arrow {

        font-size: 11px;

    }


    .language-dropdown {

        top: 44px;

        left: 50%;

        min-width: 56px;

    }


    .language-dropdown a {

        min-height: 42px;

        padding: 0 14px;

        font-size: 13px;

    }

}
/* =========================================================
   MOBILE LANGUAGE SWITCH - LOGO ÇAKIŞMA FIX
========================================================= */

@media (max-width: 799px) {

    .language-switch {
        top: 0;

        left: 58px;
        right: auto;

        height: 50px;

        z-index: 1100;
    }

    .language-toggle {
        height: 50px;

        padding: 0 10px;

        font-size: 13px;
    }

    .language-dropdown {
        top: 46px;

        left: 50%;

        min-width: 56px;
    }

    .nav-logo {
        right: 0;

        padding: 10px 15px !important;

        z-index: 1050;
    }
}