/* ============================================================
   KONEKS CUSTOM HEADER
   AKPA REFERANS MEGA MENU YAPISI
============================================================ */

:root {

    /*
     * KONEKS marka rengi.
     * İstersen daha sonra tam kurumsal sarı kodunu değiştiririz.
     */
    --koneks-accent: #ffdc04;
    --koneks-accent-hover: #d9ad00;

    --koneks-white: #ffffff;
    --koneks-black: #000000;

    --koneks-dark: #171719;
    --koneks-dark-2: #232326;

    --koneks-container: 1500px;

    --koneks-speed: .45s;
}


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

.koneks-header,
.koneks-header *,
.koneks-header *::before,
.koneks-header *::after {
    box-sizing: border-box;
}

.koneks-header ul,
.koneks-header ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.koneks-header a {
    text-decoration: none;
}

.koneks-header button {
    font-family: inherit;
}


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

.koneks-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    color: #fff;

    transition:
        background var(--koneks-speed) ease,
        transform var(--koneks-speed) ease,
        box-shadow var(--koneks-speed) ease;
}


/* hafif karartma - referanstaki gibi */

.koneks-header::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 190px;

    z-index: -1;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, .40) 0%,
        rgba(0, 0, 0, .20) 58%,
        rgba(0, 0, 0, 0) 100%
    );
}


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

.koneks-header.is-fixed {
    position: fixed;

    background: rgba(25, 25, 27, .96);

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

    box-shadow: 0 10px 40px rgba(0, 0, 0, .12);
}


.koneks-header.is-fixed::before {
    display: none;
}


.koneks-header.is-fixed .koneks-header-top-inner {
    min-height: 75px;
}


.koneks-header.is-fixed .koneks-header-logo img {
    max-height: 50px;
}


.koneks-header.is-fixed .koneks-main-menu > ul > li > a {
    min-height: 54px;
}


/* ============================================================
   CONTAINER
============================================================ */

.koneks-header-container {
    width: 100%;

    max-width: var(--koneks-container);

    padding-left: 30px;
    padding-right: 30px;

    margin-left: auto;
    margin-right: auto;
}


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

.koneks-header-top {
    position: relative;

    z-index: 20;
}


.koneks-header-top-inner {
    min-height: 98px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    transition: min-height var(--koneks-speed) ease;
}


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

.koneks-header-logo {
    flex: 0 0 auto;

    display: flex;

    align-items: center;
}


.koneks-header-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 290px;
    max-height: 65px;

    object-fit: contain;

    transition: all var(--koneks-speed) ease;
}


/* ============================================================
   TOP RIGHT
============================================================ */

.koneks-header-top-right {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 15px;
}


/* ============================================================
   TOP PILL
============================================================ */

.koneks-top-pill {
    min-height: 45px;

    padding: 0 25px;

    display: flex;

    align-items: center;

    gap: 38px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 100px;

    background: rgba(255,255,255,.02);

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


.koneks-top-item {
    position: relative;

    min-height: 43px;

    display: flex;

    align-items: center;
}


.koneks-top-item > a {
    position: relative;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    font-size: 14px;

    line-height: 1;

    font-weight: 500;

    white-space: nowrap;
}


.koneks-top-item > a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: #fff;

    transition: width .35s ease;
}


.koneks-top-item:hover > a::after {
    width: 100%;
}


/* ============================================================
   CHEVRON
============================================================ */

.koneks-chevron {
    width: 7px;
    height: 7px;

    display: inline-block;

    border-right: 1px solid rgba(255,255,255,.65);
    border-bottom: 1px solid rgba(255,255,255,.65);

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

    transition: transform .35s ease;
}


.koneks-top-has-dropdown:hover .koneks-chevron,
.koneks-language:hover .koneks-chevron {
    transform: rotate(225deg);
}


/* ============================================================
   WORLD DROPDOWN
============================================================ */

.koneks-world-dropdown {
    position: absolute;

    top: calc(100% + 19px);
    left: 50%;

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

    width: 205px;

    padding: 12px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 14px;

    background: rgba(44,44,44,.92);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: all .35s ease;
}


.koneks-world-dropdown::before {
    content: "";

    position: absolute;

    left: 0;
    top: -22px;

    width: 100%;
    height: 23px;
}


.koneks-top-has-dropdown:hover .koneks-world-dropdown {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

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


.koneks-world-dropdown a {
    min-height: 41px;

    padding: 0 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

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

    font-size: 14px;

    border-radius: 8px;

    transition: all .25s ease;
}


.koneks-world-dropdown a:hover {
    color: #fff;

    background: rgba(255,255,255,.07);
}


/* ============================================================
   LANGUAGE
============================================================ */

.koneks-language {
    position: relative;

    min-height: 43px;

    display: flex;

    align-items: center;
}


.koneks-language-button {
    border: 0;

    padding: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    background: transparent;

    color: #fff;

    font-size: 14px;

    line-height: 1;

    font-weight: 500;

    cursor: pointer;
}


.koneks-language-dropdown {
    position: absolute;

    top: calc(100% + 19px);
    right: -17px;

    width: 108px;

    padding: 12px 10px;

    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.18);

    background: rgba(35,35,36,.96);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(18px);

    transition: all .35s ease;
}


.koneks-language-dropdown::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 23px;

    left: 0;
    top: -22px;
}


.koneks-language:hover .koneks-language-dropdown {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


.koneks-language-dropdown a {
    min-height: 43px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 7px;

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

    font-size: 14px;

    border-radius: 7px;

    transition: all .25s ease;
}


.koneks-language-dropdown a:hover {
    color: #fff;

    background: rgba(255,255,255,.07);
}


.koneks-language-flag {
    font-size: 22px;

    line-height: 1;
}


/* ============================================================
   SEARCH BUTTON
============================================================ */

.koneks-search-button {
    width: 44px;
    height: 44px;

    min-width: 44px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #111;

    background: var(--koneks-accent);

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}


.koneks-search-button:hover {
    background: #fff;
    transform: scale(1.06);
    color: #000;
}


/* ============================================================
   MAIN NAVIGATION
============================================================ */

.koneks-header-bottom {
    position: relative;

    z-index: 10;
}


.koneks-main-menu {
    width: 100%;
}


.koneks-main-menu-list {
    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 46px;
}


.koneks-menu-item {
    position: relative;

    flex: 1 1 0;

    min-width: 0;
}


/*
 * Referanstaki her menü üzerindeki yatay çizgi
 */

.koneks-menu-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 1px;

    background: rgba(255,255,255,.20);

    transition: background .35s ease;
}


.koneks-menu-item:hover::before {
    background: #fff;
}


.koneks-menu-link {
    width: 100%;

    min-height: 66px;

    padding-top: 18px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    color: #fff;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.2;

    white-space: nowrap;

    transition: all .35s ease;
}


/* ============================================================
   MAIN MENU ARROW
============================================================ */

.koneks-menu-chevron {
    width: 7px;
    height: 7px;

    margin-top: 2px;

    flex: 0 0 auto;

    border-right: 1px solid rgba(255,255,255,.55);
    border-bottom: 1px solid rgba(255,255,255,.55);

    transform: rotate(45deg);

    transition:
        transform .35s ease,
        border-color .35s ease;
}


.koneks-has-mega:hover
.koneks-menu-chevron {
    transform: rotate(225deg);

    border-color: #fff;
}


/* ============================================================
   MEGA MENU
============================================================ */

.koneks-mega-menu {
    position: absolute;

    top: calc(100% - 1px);

    width: 930px;

    min-height: 352px;

    padding-top: 15px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .42s ease,
        visibility .42s ease,
        transform .42s ease;
}


/* görünmez köprü - hover kopmasın */

.koneks-mega-menu::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 18px;
}


/* FIRST MENU */

.koneks-mega-left {
    left: 0;

    transform: translateY(20px);
}


/* CENTER MENUS */

.koneks-mega-center {
    left: 120%;

    transform:
        translateX(-50%)
        translateY(20px);
}


/* RIGHT MENUS */

.koneks-mega-right {
    right: 0;

    transform: translateY(20px);
}


/* SHOW */

.koneks-has-mega:hover > .koneks-mega-menu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.koneks-has-mega:hover > .koneks-mega-left,
.koneks-has-mega:hover > .koneks-mega-right {
    transform: translateY(0);
}


.koneks-has-mega:hover > .koneks-mega-center {
    transform:
        translateX(-50%)
        translateY(0);
}


/* ============================================================
   MEGA INNER
============================================================ */

.koneks-mega-menu-inner {
    width: 930px;

    min-height: 352px;

    display: grid;

    grid-template-columns:
        minmax(0, 445px)
        minmax(0, 485px);

    overflow: hidden;

    border-radius: 16px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.15);
}


/* ============================================================
   MEGA LEFT IMAGE AREA
============================================================ */

.koneks-mega-main {
    position: relative;

    min-height: 352px;

    overflow: hidden;

    background: #242426;
}


.koneks-mega-bg {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0;

    visibility: hidden;

    transform: scale(1.04);

    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .8s ease;
}


.koneks-mega-bg.active {
    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


.koneks-mega-dark-overlay {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72),
            rgba(0,0,0,.54)
        );
}


/* ============================================================
   MEGA MAIN LINKS
============================================================ */

.koneks-mega-main-links {
    position: relative;

    z-index: 5;

    min-height: 352px;

    padding:
        45px
        40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 0;
}


.koneks-mega-left-item {
    position: relative;

    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 17px;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.25;

    transition: all .35s ease;
}


.koneks-mega-left-item:hover,
.koneks-mega-left-item.active {
    color: #fff;
}


/* küçük üçgen */

.koneks-mega-pointer {
    width: 0;
    height: 0;

    flex: 0 0 auto;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--koneks-accent);

    opacity: 0;

    visibility: hidden;

    transform: translateX(-8px);

    transition: all .35s ease;
}


.koneks-mega-left-item:hover
.koneks-mega-pointer,
.koneks-mega-left-item.active
.koneks-mega-pointer {
    opacity: 1;

    visibility: visible;

    transform: translateX(0);
}


/* ============================================================
   MEGA RIGHT WHITE AREA
============================================================ */

.koneks-mega-detail {
    position: relative;

    min-height: 352px;

    padding:
        48px
        55px;

    background: #f4f4f4;
}


/* ============================================================
   DETAIL PANELS
============================================================ */

.koneks-detail-panel {
    display: none;

    width: 100%;

    animation:
        koneksMegaFade
        .35s ease;
}


.koneks-detail-panel.active {
    display: block;
}


@keyframes koneksMegaFade {

    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ============================================================
   DETAIL LINKS
============================================================ */

.koneks-detail-panel > a {
    position: relative;

    width: 100%;

    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-bottom:
        1px solid
        rgba(0,0,0,.08);

    color: #161616;

    font-size: 15px;

    font-weight: 600;

    transition:
        color .3s ease,
        padding .3s ease;
}


.koneks-detail-panel > a:hover {
    color: var(--koneks-accent-hover);

    padding-left: 4px;
}


.koneks-detail-arrow {
    flex: 0 0 auto;

    color: var(--koneks-accent-hover);

    font-size: 20px;

    transition: transform .3s ease;
}


.koneks-detail-panel > a:hover
.koneks-detail-arrow {
    transform: rotate(45deg);
}


/* ============================================================
   CAREER MEGA
   Referanstaki tamamen siyah geniş menü
============================================================ */

.koneks-career-mega {
    position: absolute;

    top: calc(100% - 1px);
    right: 0;

    width: 930px;

    padding-top: 15px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(20px);

    transition: all .42s ease;
}


.koneks-career-mega::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 18px;

    left: 0;
    top: 0;
}


.koneks-has-mega:hover >
.koneks-career-mega {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


.koneks-career-grid {
    min-height: 275px;

    padding:
        40px
        65px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap:
        20px
        90px;

    border-radius: 16px;

    background: #090909;

    overflow: hidden;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.20);
}


.koneks-career-grid a {
    min-height: 55px;

    display: flex;

    align-items: center;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    transition:
        color .3s ease,
        transform .3s ease;
}


.koneks-career-grid a:hover {
    color: var(--koneks-accent);

    transform: translateX(5px);
}


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

.koneks-mobile-button {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    background: rgba(255,255,255,.05);

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;
}


.koneks-mobile-button span {
    width: 20px;
    height: 1px;

    display: block;

    background: #fff;
}


/* ============================================================
   1500 > 1300
============================================================ */

@media (max-width: 1500px) {

    .koneks-header-container {
        max-width: 1320px;
    }


    .koneks-main-menu-list {
        gap: 35px;
    }


    .koneks-menu-link {
        font-size: 15px;
    }

}


/* ============================================================
   1300 > 1200
============================================================ */

@media (max-width: 1300px) {

    .koneks-header-container {
        max-width: 1180px;
    }


    .koneks-top-pill {
        gap: 25px;
    }


    .koneks-header-logo img {
        max-width: 240px;
    }


    .koneks-main-menu-list {
        gap: 25px;
    }

}


/* ============================================================
   TABLET + MOBILE
============================================================ */

@media (max-width: 1199px) {

    .koneks-header {
                background: rgb(0 0 0 / 0%);

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


    .koneks-header::before {
        display: none;
    }


    .koneks-header-top-inner {
        min-height: 82px;
    }


    .koneks-header-bottom {
        display: none;
    }


    .koneks-top-pill {
        display: none;
    }


    .koneks-header-logo img {
        max-width: 215px;
        max-height: 52px;
    }


    .koneks-search-button {
        width: 42px;
        height: 42px;

        min-width: 42px;
    }


    .koneks-mobile-button {
        display: flex;
    }


    .koneks-header.is-fixed
    .koneks-header-top-inner {
        min-height: 70px;
    }

}


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

@media (max-width: 575px) {

    .koneks-header-container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .koneks-header-top-inner {
        min-height: 72px;

        gap: 15px;
    }


    .koneks-header-logo img {
        max-width: 155px;
        max-height: 47px;
    }


    .koneks-header-top-right {
        gap: 8px;
    }


    .koneks-search-button,
    .koneks-mobile-button {
        width: 38px;
        height: 38px;

        min-width: 38px;
    }


    .koneks-search-button svg {
        width: 16px;
        height: 16px;
    }


    .koneks-mobile-button span {
        width: 17px;
    }

}



/* ============================================================
   KONEKS SEARCH POPUP FIX
============================================================ */

.pxn_search_popup_overlay {
    position: fixed !important;

    inset: 0 !important;

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

    z-index: 99998 !important;

    background: rgba(0, 0, 0, .70) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity .4s ease,
        visibility .4s ease !important;
}


body.koneks-search-active
.pxn_search_popup_overlay {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}



/* SEARCH WINDOW */

.pxn_search_popup {
    position: fixed !important;

    left: 0 !important;
    top: 0 !important;

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

    z-index: 99999 !important;

    display: flex !important;

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

    padding: 80px 30px !important;

    background: #ffffff !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transform: translateY(-30px) !important;

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease !important;
}


body.koneks-search-active
.pxn_search_popup {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateY(0) !important;
}



/* SEARCH CLOSE */

.pxn_search_popup .search_close {
    position: absolute !important;

    top: 35px !important;
    right: 40px !important;

    z-index: 5 !important;
}


.pxn_search_popup .search_close_btn {
    width: 50px !important;
    height: 50px !important;

    padding: 0 !important;

    border: 1px solid #ddd !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;

    color: #111 !important;

    cursor: pointer !important;

    transition: .3s ease !important;
}


.pxn_search_popup .search_close_btn:hover {
    background: #111 !important;

    color: #fff !important;
}



/* SEARCH CONTENT */

.pxn_search_popup .container-fluid {
    width: 100% !important;

    max-width: 1100px !important;
}


.pxn_search_popup .search_form {
    width: 100% !important;
}


.pxn_search_popup .search_title {
    margin-bottom: 35px !important;

    color: #111 !important;

    font-size: clamp(28px, 4vw, 55px) !important;

    font-weight: 500 !important;
}


.pxn_search_popup .search_box {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    border-bottom: 1px solid #bbb !important;
}


.pxn_search_popup .search-input-field {
    width: 100% !important;

    height: 80px !important;

    padding: 0 70px 0 0 !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    color: #111 !important;

    font-size: 22px !important;
}


.pxn_search_popup .search_box button {
    position: absolute !important;

    right: 0 !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 50px !important;
    height: 50px !important;

    border: 0 !important;

    background: transparent !important;

    cursor: pointer !important;
}



/* ============================================================
   BODY LOCK
============================================================ */

body.koneks-menu-active,
body.koneks-search-active {
    overflow: hidden !important;
}



/* ============================================================
   MOBILE OFFCANVAS OVERLAY
============================================================ */

.koneks-mobile-overlay {
    position: fixed;

    inset: 0;

    z-index: 99998;

    background: rgba(0, 0, 0, .68);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}


body.koneks-menu-active
.koneks-mobile-overlay {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



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

.koneks-mobile-menu {
    position: fixed;

    right: 0;
    top: 0;

    z-index: 99999;

    width: min(430px, 92vw);
    height: 100dvh;

    background: #202124;

    transform: translateX(105%);

    visibility: hidden;

    transition:
        transform .5s cubic-bezier(.7,0,.2,1),
        visibility .5s ease;

    box-shadow:
        -20px 0 60px rgba(0,0,0,.18);
}


body.koneks-menu-active
.koneks-mobile-menu {
    transform: translateX(0);

    visibility: visible;
}



.koneks-mobile-menu-inner {
    width: 100%;
    height: 100%;

    padding: 25px;

    overflow-x: hidden;
    overflow-y: auto;
}



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

.koneks-mobile-menu-top {
    display: flex;

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

    gap: 20px;

    padding-bottom: 25px;

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


.koneks-mobile-logo img {
    max-width: 190px;
    max-height: 55px;

    display: block;

    object-fit: contain;
}


.koneks-mobile-close {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    padding: 0;

    border:
        1px solid rgba(255,255,255,.20);

    border-radius: 50%;

    display: flex;

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

    background: transparent;

    color: #fff;

    cursor: pointer;

    transition: .3s ease;
}


.koneks-mobile-close:hover {
    background: var(--koneks-accent);

    color: #111;
}



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

.koneks-mobile-navigation {
    padding: 25px 0;
}


.koneks-mobile-navigation ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.koneks-mobile-navigation > ul > li {
    position: relative;

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


/* MAIN LINK */

.koneks-mobile-navigation
.mobile-main-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.koneks-mobile-navigation
.mobile-main-row > a {
    min-height: 60px;

    flex: 1;

    display: flex;

    align-items: center;

    color: #fff;

    font-size: 16px;

    font-weight: 500;
}



/* + BUTTON */

.koneks-mobile-navigation
.mobile-sub-toggle {
    position: relative;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: var(--koneks-accent);

    cursor: pointer;

    transition: .3s ease;
}


.koneks-mobile-navigation
.mobile-sub-toggle::before,
.koneks-mobile-navigation
.mobile-sub-toggle::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    background: #111;

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

    transition: .3s ease;
}


.koneks-mobile-navigation
.mobile-sub-toggle::before {
    width: 13px;
    height: 1px;
}


.koneks-mobile-navigation
.mobile-sub-toggle::after {
    width: 1px;
    height: 13px;
}


.koneks-mobile-navigation
li.mobile-open
.mobile-sub-toggle::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);

    opacity: 0;
}



/* ============================================================
   MOBILE SUB MENU
============================================================ */

.koneks-mobile-navigation
.mobile-sub-menu {
    display: none;

    padding: 0 0 15px 15px;
}


.koneks-mobile-navigation
li.mobile-open >
.mobile-sub-menu {
    display: block;
}


.koneks-mobile-navigation
.mobile-sub-menu a {
    min-height: 44px;

    display: flex;

    align-items: center;

    padding: 5px 0;

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

    font-size: 14px;

    transition:
        color .3s ease,
        padding .3s ease;
}


.koneks-mobile-navigation
.mobile-sub-menu a:hover {
    padding-left: 5px;

    color: var(--koneks-accent);
}



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

.koneks-mobile-language {
    padding:
        20px
        0;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

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


.koneks-mobile-language a {
    min-width: 48px;
    height: 38px;

    padding: 0 12px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 100px;

    display: flex;

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

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

    font-size: 12px;

    transition: .3s ease;
}


.koneks-mobile-language a:hover {
    color: #111;

    border-color: var(--koneks-accent);

    background: var(--koneks-accent);
}



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

.koneks-mobile-bottom {
    padding-top: 20px;

    display: flex;

    flex-direction: column;

    gap: 10px;

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


.koneks-mobile-bottom a {
    color: rgba(255,255,255,.7);

    font-size: 14px;

    transition: .3s ease;
}


.koneks-mobile-bottom a:hover {
    color: var(--koneks-accent);
}



/* ============================================================
   MOBILE HEADER BUTTON
============================================================ */

@media (max-width:1199px) {

    .koneks-mobile-button {
        display: flex !important;
    }

}



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

@media (max-width:575px) {

    .koneks-mobile-menu-inner {
        padding: 20px;
    }


    .koneks-mobile-logo img {
        max-width: 160px;
    }


    .pxn_search_popup {
        padding:
            70px
            20px !important;
    }


    .pxn_search_popup .search_close {
        top: 20px !important;
        right: 20px !important;
    }


    .pxn_search_popup .search_title {
        font-size: 30px !important;
    }


    .pxn_search_popup
    .search-input-field {
        height: 65px !important;

        font-size: 17px !important;
    }

}












































/* ============================================================
   KONEKS HEADER + HERO FINAL ALIGNMENT
============================================================ */

.koneks-header-container,
.koneks-hero-container {

    width: 100%;

    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 30px;
    padding-right: 30px;
}



/* ============================================================
   HEADER FINAL POSITION
============================================================ */

.koneks-header {

    z-index: 1000;

}


.koneks-header-top-inner {

    min-height: 95px;

}


.koneks-header-logo img {

    max-width: 250px;
    max-height: 65px;

}


.koneks-main-menu-list {

    gap: 50px;

}


.koneks-menu-link {

    min-height: 68px;

    padding-top: 17px;

}


.koneks-header::before {

    height: 220px;

    background:

        linear-gradient(
            180deg,
            rgba(0, 0, 0, .52) 0%,
            rgba(0, 0, 0, .26) 60%,
            rgba(0, 0, 0, 0) 100%
        );

}



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

.koneks-hero {

    position: relative;

    width: 100%;

    height: 100svh;

    min-height: 760px;

    overflow: hidden;

    background: #111;

}


.koneks-hero-swiper {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

}


.koneks-hero-swiper .swiper-wrapper {

    width: 100%;
    height: 100%;

}


.koneks-hero-slide {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

}



/* ============================================================
   BACKGROUND
============================================================ */

.koneks-hero-background {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

}


.koneks-hero-background img,
.koneks-hero-background video {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform: scale(1.06);

    transition:
        transform 7s cubic-bezier(.2,.55,.3,1);

}


.koneks-hero-slide.swiper-slide-active
.koneks-hero-background img,

.koneks-hero-slide.swiper-slide-active
.koneks-hero-background video {

    transform: scale(1);

}



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

.koneks-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.47) 35%,
            rgba(0,0,0,.27) 65%,
            rgba(0,0,0,.28) 100%
        );

}



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

.koneks-hero-content {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items: center;

}


.koneks-hero-content
.koneks-hero-container {

    width: 100%;

}


.koneks-hero-text {

    width: 100%;

    max-width: 600px;

    padding-top: 105px;

}



/* ============================================================
   TITLE
============================================================ */

.koneks-hero-title {

    margin: 0 0 36px;

    color: #fff;

    font-size: clamp(38px, 2.65vw, 52px);

    font-weight: 500;

    line-height: 1.18;

    letter-spacing: -1.6px;

    opacity: 0;

    transform: translateY(50px);

    transition:
        opacity .8s ease .35s,
        transform .8s ease .35s;

}


.swiper-slide-active
.koneks-hero-title {

    opacity: 1;

    transform: translateY(0);

}



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

.koneks-hero-search {

    position: relative;

    width: 100%;

    max-width: 600px;

    height: 53px;

    display: flex;

    align-items: center;

    border:

        1px solid
        rgba(255,255,255,.38);

    border-radius: 100px;

    background:
        rgba(0,0,0,.13);

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

    opacity: 0;

    transform: translateY(35px);

    transition:

        border-color .3s ease,
        background .3s ease,
        opacity .8s ease .55s,
        transform .8s ease .55s;

}


.swiper-slide-active
.koneks-hero-search {

    opacity: 1;

    transform: translateY(0);

}


.koneks-hero-search:hover,
.koneks-hero-search:focus-within {

    border-color:
        rgba(255,255,255,.75);

    background:
        rgba(0,0,0,.20);

}


.koneks-hero-search input {

    width: 100%;
    height: 100%;

    padding:
        0
        145px
        0
        28px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #fff;

    font-size: 14px;

    font-weight: 400;

}


.koneks-hero-search input::placeholder {

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

    opacity: 1;

}



/* ============================================================
   SEARCH BUTTON
============================================================ */

.koneks-hero-search button {

position: absolute;
    right: 5px;
    top: 50%;
    height: 43px;
    min-width: 105px;
    padding: 0 22px;
    border: 0;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transform: translateY(-50%);
    background: #ffdc04;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color .3s ease, background .3s ease, transform .3s ease;

}


.koneks-hero-search button:hover {

    background:
        var(--koneks-accent);

    color: #111;

}


.koneks-hero-search button svg {

    flex: 0 0 auto;

}



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

.koneks-hero-bottom {

    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 20;

    width: 100%;

}


.koneks-hero-bottom-inner {

    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}



/* ============================================================
   SCROLL BUTTON
============================================================ */

.koneks-hero-scroll {

    width: 62px;
    height: 62px;

    margin-bottom: 20px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    color: #111;

    cursor: pointer;

    transition:

        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.koneks-hero-scroll:hover {

    background:
        var(--koneks-accent);

    transform:
        translateY(-4px);
            color: #000000;

}


.koneks-hero-scroll svg {

    animation:
        koneksHeroArrow
        1.6s
        infinite;

}


@keyframes koneksHeroArrow {

    0%,
    100% {

        transform:
            translateY(-3px);

    }

    50% {

        transform:
            translateY(4px);

    }

}



/* ============================================================
   CONTROLLER
============================================================ */

.koneks-hero-controller {

    min-height: 108px;

    padding:
        22px
        30px;

    display: flex;

    align-items: center;

    gap: 38px;

    border-radius:
        10px
        10px
        0
        0;

    background:
        var(--koneks-accent);

}


.koneks-hero-navigation {

    display: flex;

    align-items: center;

    gap: 18px;

}



/* ============================================================
   PREV NEXT
============================================================ */

.koneks-hero-nav {

    position: relative;

    width: 62px;
    height: 62px;

    padding: 0;

    border:

        1px solid
        rgba(0,0,0,.18);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(0,0,0,.04);

    color:
        rgba(0,0,0,.60);

    cursor: pointer;

    overflow: hidden;

    transition:

        color .3s ease,
        border-color .3s ease,
        background .3s ease;

}


.koneks-hero-nav::before {

    content: "";

    position: absolute;

    inset: 3px;

    border:

        1px solid
        transparent;

    border-radius: 50%;

    transition:
        border-color .35s ease;

}


.koneks-hero-nav:hover {

    color: #111;

    border-color:
        rgba(0,0,0,.65);

}


.koneks-hero-nav:hover::before {

    border-color:
        rgba(0,0,0,.40);

}


.koneks-hero-prev:hover svg {

    transform:
        translateX(-3px);

}


.koneks-hero-next:hover svg {

    transform:
        translateX(3px);

}


.koneks-hero-nav svg {

    position: relative;

    z-index: 2;

    transition:
        transform .3s ease;

}



/* ============================================================
   CONTROLLER TEXT
============================================================ */

.koneks-hero-controller-text {

    width: 260px;

    color: #111;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.45;

}



/* ============================================================
   SWIPER FADE
============================================================ */

.koneks-hero-swiper
.swiper-slide {

    opacity: 0 !important;

    transition:
        opacity 1s ease !important;

}


.koneks-hero-swiper
.swiper-slide-active {

    opacity: 1 !important;

}



/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1680px) {

    .koneks-header-container,
    .koneks-hero-container {

        max-width: 1500px;

    }

}



/* ============================================================
   NOTEBOOK
============================================================ */

@media (max-width: 1400px) {

    .koneks-header-container,
    .koneks-hero-container {

        max-width: 1280px;

    }


    .koneks-main-menu-list {

        gap: 34px;

    }


    .koneks-hero-text {

        max-width: 560px;

    }


    .koneks-hero-title {

        font-size: 44px;

    }

}



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

@media (max-width: 1199px) {

    .koneks-hero {

        min-height: 720px;

    }


    .koneks-hero-content {

        align-items: center;

    }


    .koneks-hero-text {

        max-width: 580px;

        padding-top: 60px;

    }


    .koneks-hero-title {

        font-size: 40px;

    }


    .koneks-hero-controller {

        min-height: 82px;

        padding:
            14px
            18px;

        gap: 18px;

    }


    .koneks-hero-nav {

        width: 50px;
        height: 50px;

    }


    .koneks-hero-controller-text {

        width: 220px;

        font-size: 13px;

    }


    .koneks-hero-scroll {

        width: 50px;
        height: 50px;

    }

}



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

@media (max-width: 767px) {

    .koneks-header-container,
    .koneks-hero-container {

        padding-left: 20px;
        padding-right: 20px;

    }


    .koneks-hero {

        height: 100svh;

        min-height: 670px;

    }


    .koneks-hero-overlay {

        background:

            linear-gradient(
                90deg,
                rgba(0,0,0,.72),
                rgba(0,0,0,.45)
            );

    }


    .koneks-hero-content {

        align-items: center;

    }


    .koneks-hero-text {

        max-width: 100%;

        padding-top: 50px;

        padding-bottom: 100px;

    }


    .koneks-hero-title {

        margin-bottom: 25px;

        font-size: 34px;

        line-height: 1.15;

        letter-spacing: -1px;

    }


    .koneks-hero-search {

        height: 50px;

    }


    .koneks-hero-search input {

        padding-left: 20px;

        padding-right: 90px;

        font-size: 13px;

    }


    .koneks-hero-search button {

        width: 42px;
        min-width: 42px;

        height: 42px;

        padding: 0;

    }


    .koneks-hero-search button span {

        display: none;

    }


    .koneks-hero-bottom-inner {

        align-items: flex-end;

    }


    .koneks-hero-scroll {

        width: 42px;
        height: 42px;

        margin-bottom: 10px;

    }


    .koneks-hero-controller {

        min-height: auto;

        padding:
            10px;

        border-radius:
            8px
            8px
            0
            0;

    }


    .koneks-hero-controller-text {

        display: none;

    }


    .koneks-hero-navigation {

        gap: 8px;

    }


    .koneks-hero-nav {

        width: 42px;
        height: 42px;

    }


    .koneks-hero-nav svg {

        width: 16px;
        height: 16px;

    }

}



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

@media (max-width: 480px) {

    .koneks-hero-title {

        font-size: 30px;

    }


    .koneks-hero-text {

        padding-bottom: 80px;

    }

}
































































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

.koneks-footer {

    --kf-bg: #18181a;
    --kf-bg-dark: #26272c;

    --kf-border: #37383d;

    --kf-text: #bfbfc4;
    --kf-text-light: #e6e6e6;

    --kf-yellow: #ffd400;
    --kf-yellow-dark: #e2bd00;

    --kf-black: #111111;

    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--kf-bg);

    color: #fff;

}


/* ============================================================
   CONTAINER
============================================================ */

.koneks-footer-container {

    width: 100%;

    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 30px;
    padding-right: 30px;

}


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

.koneks-footer-grid {

    display: grid;

    grid-template-columns:

        minmax(260px, 1.15fr)
        minmax(150px, .78fr)
        minmax(180px, .90fr)
        minmax(520px, 2fr);

    align-items: stretch;

}


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

.koneks-footer-brand {

    position: relative;

    padding:

        42px
        36px
        40px
        0;

    border-right:

        1px solid
        var(--kf-border);

}


/* LOGO */

.koneks-footer-logo {

    display: inline-flex;

    align-items: center;

}


.koneks-footer-logo img {

    display: block;

    width: auto;

    max-width: 245px;

    height: 68px;

    object-fit: contain;

    object-position: left center;

}


/* TEXT */

.koneks-footer-intro {

    max-width: 280px;

    margin-top: 20px;

    padding-bottom: 30px;

    color: #707075;

    font-size: 15px;

    line-height: 1.65;

}


.koneks-footer-intro strong {

    color: #fff;

    font-weight: 600;

}


/* LINE */

.koneks-footer-line {

    width:

        calc(100% + 36px);

    height: 1px;

    background:
        var(--kf-border);

}


/* ============================================================
   NEWSLETTER
============================================================ */

.koneks-footer-newsletter {

    margin-top: 35px;

}


.koneks-footer-newsletter h3 {

    margin: 0 0 27px;

    color: #fff;

    font-size: 21px;

    font-weight: 400;

    line-height: 1.2;

}


.koneks-footer-newsletter-form {

    position: relative;

    width: 100%;

    max-width: 280px;

}


.koneks-footer-newsletter-form input {

    width: 100%;

    height: 47px;

    padding:

        0
        52px
        0
        22px;

    border:

        1px solid
        rgba(255,255,255,.13);

    border-radius: 6px;

    outline: none;

    background:
        rgba(0,0,0,.10);

    color: #fff;

    font-size: 14px;

    transition: .3s ease;

}


.koneks-footer-newsletter-form input::placeholder {

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

}


.koneks-footer-newsletter-form input:focus {

    border-color:
        rgba(255,255,255,.50);

}


/* BUTTON */

.koneks-footer-newsletter-form button {

    position: absolute;

    right: 9px;
    top: 50%;

    width: 29px;
    height: 29px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    display: flex;

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

    transform:
        translateY(-50%);

    background: #fff;

    color:
        var(--kf-yellow-dark);

    cursor: pointer;

    transition: .3s ease;

}


.koneks-footer-newsletter-form button:hover {

    background:
        var(--kf-yellow);

    color: #111;

}


/* NOTE */

.koneks-footer-newsletter-note {

    max-width: 280px;

    margin:

        18px
        0
        0;

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

    font-size: 12px;

    line-height: 1.45;

}


.koneks-footer-newsletter-note a {

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

    transition: .3s ease;

}


.koneks-footer-newsletter-note a:hover {

    color: #fff;

}


/* ============================================================
   SOCIAL
============================================================ */

.koneks-footer-social {

    margin-top: 25px;

    display: flex;

    align-items: center;

    gap: 21px;

}


.koneks-footer-social a {

    width: 24px;
    height: 24px;

    display: flex;

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

    color: #57585d;

    transition:

        color .3s ease,
        transform .3s ease;

}


.koneks-footer-social a:hover {

    color:
        var(--kf-yellow);

    transform:
        translateY(-3px);

}


.koneks-footer-social svg {

    width: 23px;
    height: 23px;

}


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

.koneks-footer-menu {

    padding:

        54px
        30px
        40px;

}


.koneks-footer-menu-title {

    margin:

        0
        0
        76px;

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

    font-size: 13px;

    font-weight: 600;

    line-height: 1.2;

}


.koneks-footer-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.koneks-footer-menu li {

    margin: 0;

    padding: 0;

}


.koneks-footer-menu a {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(230,230,230,.72);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.2;

    transition:

        color .3s ease,
        transform .3s ease;

}


.koneks-footer-menu a::after {

    content: "›";

    color:
        var(--kf-yellow);

    font-size: 17px;

    opacity: 0;

    transform:
        translateX(-7px);

    transition: .3s ease;

}


.koneks-footer-menu a:hover {

    color: #fff;

    transform:
        translateX(2px);

}


.koneks-footer-menu a:hover::after {

    opacity: 1;

    transform:
        translateX(0);

}


/* ============================================================
   WORLD FIELD
============================================================ */

.koneks-footer-world {

    position: relative;

    min-width: 0;

    width:

        calc(
            100% +
            max(
                0px,
                (100vw - 1500px) / 2
            )
        );

    background:
        var(--kf-yellow);

    border-radius:

        10px
        0
        0
        10px;

}


/* ============================================================
   WORLD INNER
============================================================ */

.koneks-footer-world-inner {

    min-height: 100%;

    padding:

        55px
        max(
            45px,
            calc(
                (100vw - 1500px) / 2 +
                35px
            )
        )
        55px
        38px;

    display: grid;

    grid-template-columns:

        minmax(310px, 1fr)
        minmax(280px, .85fr);

    gap: 65px;

}


/* ============================================================
   WORLD TITLE
============================================================ */

.koneks-footer-world-list h3 {

    margin:

        0
        0
        34px;

    color:
        rgba(17,17,17,.48);

    font-size: 28px;

    font-weight: 600;

    line-height: 1.15;

}


.koneks-footer-world-list h3 span {

    color:
        var(--kf-black);

}


/* ============================================================
   WORLD LIST
============================================================ */

.koneks-footer-world-list ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.koneks-footer-world-list li {

    position: relative;

}


.koneks-footer-world-list li a {

    position: relative;

    min-height: 51px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-bottom:

        1px solid
        rgba(17,17,17,.11);

    color:
        rgba(17,17,17,.57);

    font-size: 14px;

    font-weight: 500;

    transition: .3s ease;

}


.koneks-footer-world-list li a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 0;
    height: 1px;

    background:
        var(--kf-black);

    transition:
        width .4s ease;

}


.koneks-footer-world-list li svg {

    opacity: 0;

    transform:
        translateX(-5px);

    transition: .3s ease;

}


.koneks-footer-world-list li:hover a,
.koneks-footer-world-list li.active a {

    color:
        var(--kf-black);

}


.koneks-footer-world-list li:hover a::after,
.koneks-footer-world-list li.active a::after {

    width: 100%;

}


.koneks-footer-world-list li:hover svg,
.koneks-footer-world-list li.active svg {

    opacity: 1;

    transform:
        translateX(0);

}


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

.koneks-footer-contact {

    display: flex;

    flex-direction: column;

    gap: 25px;

    padding-top: 2px;

}


.koneks-footer-contact-group {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

}


.koneks-footer-contact-label {

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

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

}


.koneks-footer-contact p {

    margin: 0;

    color:
        rgba(17,17,17,.78);

    font-size: 14px;

    line-height: 1.5;

}


.koneks-footer-contact a {

    color:
        rgba(17,17,17,.78);

    font-size: 14px;

    line-height: 1.4;

    transition:

        color .3s ease,
        transform .3s ease;

}


.koneks-footer-contact a:hover {

    color: #000;

    transform:
        translateX(3px);

}


/* MAP */

.koneks-footer-map {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}


/* PHONE */

.koneks-footer-phone {

    margin:

        1px
        0
        3px;

}


.koneks-footer-phone a {

    color:
        var(--kf-black);

    font-size: 19px;

    font-weight: 700;

}


/* ============================================================
   BOTTOM
============================================================ */

.koneks-footer-bottom {

    border-top:

        1px solid
        var(--kf-border);

}


.koneks-footer-bottom-grid {

    min-height: 72px;

    display: grid;

    grid-template-columns:

        1.2fr
        1.5fr
        1fr;

    align-items: center;

    gap: 30px;

}


/* COPYRIGHT */

.koneks-footer-copyright {

    color:
        var(--kf-text);

    font-size: 12px;

}


/* LINKS */

.koneks-footer-bottom-links {

    display: flex;

    align-items: center;

    gap: 28px;

}


.koneks-footer-bottom-links a {

    color:
        var(--kf-text);

    font-size: 13px;

    transition: .3s ease;

}


.koneks-footer-bottom-links a:hover {

    color: #fff;

}


/* AGENCY */

.koneks-footer-agency {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

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

    font-size: 9px;

}


.koneks-footer-agency span {

    line-height: 1.15;

}


.koneks-footer-agency a {

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .5px;

    transition: .3s ease;

}


.koneks-footer-agency a:hover {

    color:
        var(--kf-yellow);

}


/* ============================================================
   1400
============================================================ */

@media (max-width: 1400px) {

    .koneks-footer-grid {

        grid-template-columns:

            minmax(250px, 1.1fr)
            minmax(150px, .75fr)
            minmax(180px, .85fr)
            minmax(470px, 1.8fr);

    }


    .koneks-footer-world-inner {

        gap: 35px;

        padding-left: 30px;

    }


    .koneks-footer-menu {

        padding-left: 24px;
        padding-right: 24px;

    }

}


/* ============================================================
   1200
============================================================ */

@media (max-width: 1199px) {

    .koneks-footer-grid {

        grid-template-columns:
            1fr
            1fr;

    }


    .koneks-footer-brand {

        padding-right: 30px;

    }


    .koneks-footer-world {

        grid-column:
            1 / -1;

        width: 100%;

        margin-top: 0;

        border-radius: 10px;

    }


    .koneks-footer-world-inner {

        padding:
            40px
            35px;

    }


    .koneks-footer-menu-title {

        margin-bottom: 40px;

    }


    .koneks-footer-bottom-grid {

        grid-template-columns:
            1fr
            1fr;

        padding:
            22px
            0;

    }


    .koneks-footer-agency {

        grid-column:
            1 / -1;

        justify-content: flex-start;

    }

}


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

@media (max-width: 767px) {

    .koneks-footer-container {

        padding-left: 20px;
        padding-right: 20px;

    }


    .koneks-footer-grid {

        display: block;

    }


    .koneks-footer-brand {

        padding:

            30px
            0;

        border-right: 0;

    }


    .koneks-footer-logo img {

        height: 55px;

        max-width: 210px;

    }


    .koneks-footer-line {

        width: 100%;

    }


    .koneks-footer-menu {

        padding:

            28px
            0;

        border-top:

            1px solid
            var(--kf-border);

    }


    .koneks-footer-menu-title {

        margin-bottom: 23px;

    }


    .koneks-footer-world {

        margin:

            0
            -20px;

        width:

            calc(100% + 40px);

        border-radius: 0;

    }


    .koneks-footer-world-inner {

        grid-template-columns:
            1fr;

        gap: 35px;

        padding:

            35px
            20px;

    }


    .koneks-footer-world-list h3 {

        margin-bottom: 25px;

        font-size: 26px;

    }


    .koneks-footer-bottom-grid {

        grid-template-columns:
            1fr;

        gap: 17px;

        padding:

            25px
            0;

    }


    .koneks-footer-bottom-links {

        flex-wrap: wrap;

        gap:

            12px
            20px;

    }


    .koneks-footer-agency {

        justify-content: flex-start;

    }

}


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

@media (max-width: 480px) {

    .koneks-footer-newsletter-form {

        max-width: 100%;

    }


    .koneks-footer-newsletter-note {

        max-width: 100%;

    }


    .koneks-footer-world-inner {

        padding-top: 30px;
        padding-bottom: 30px;

    }


    .koneks-footer-world-list h3 {

        font-size: 24px;

    }


    .koneks-footer-phone a {

        font-size: 17px;

    }

}








































































/* ============================================================
   KONEKS HOME NEWS
============================================================ */

.koneks-home-news {

    --koneks-news-yellow: #ffd000;
    --koneks-news-black: #111111;
    --koneks-news-grey: #b7b7b7;

    position: relative;

    width: 100%;

    padding:
        85px
        0
        105px;

    overflow: hidden;

    background: #ffffff;

}


/* ============================================================
   CONTAINER
============================================================ */

.koneks-home-news-container {

    width: 100%;

    max-width: 1600px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 45px;
    padding-right: 45px;

}


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

.koneks-home-news-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 50px;

}


/* ============================================================
   TABS
============================================================ */

.koneks-home-news-tabs {

    display: flex;

    align-items: center;

    gap: 55px;

}


.koneks-home-news-tab {

    position: relative;

    padding: 0;

    border: 0;

    display: flex;

    align-items: center;

    gap: 20px;

    background: transparent;

    color: #b5b5b5;

    cursor: pointer;

    font-family: inherit;

    transition: color .3s ease;

}


.koneks-home-news-tab-icon {

    width: 0;
    height: 0;

    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 27px solid #cfcfcf;

    transition:

        border-left-color .3s ease,
        transform .3s ease;

}


.koneks-home-news-tab-text {

    position: relative;

    display: block;

    padding-bottom: 7px;

    font-size: 25px;

    line-height: 1;

    font-weight: 600;

}


/* TAB LINE */

.koneks-home-news-tab-text::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        var(--koneks-news-black);

    transition:
        width .35s ease;

}


/* ACTIVE */

.koneks-home-news-tab.active {

    color:
        var(--koneks-news-black);

}


.koneks-home-news-tab.active
.koneks-home-news-tab-icon {

    border-left-color:
        var(--koneks-news-yellow);

}


.koneks-home-news-tab.active
.koneks-home-news-tab-text::after {

    width: 100%;

}


/* HOVER */

.koneks-home-news-tab:hover {

    color:
        var(--koneks-news-black);

}


.koneks-home-news-tab:hover
.koneks-home-news-tab-icon {

    border-left-color:
        var(--koneks-news-yellow);

    transform:
        translateX(4px);

}


/* ============================================================
   ALL NEWS BUTTON
============================================================ */

.koneks-home-news-all {

    min-width: 195px;

    height: 62px;

    padding:
        0
        30px;

    border-radius: 6px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        var(--koneks-news-yellow);

    color:
        var(--koneks-news-black);

    font-size: 15px;

    font-weight: 600;

    transition:

        background .3s ease,
        transform .3s ease;

}


.koneks-home-news-all:hover {

    background: #111;

    color: #fff;

    transform:
        translateY(-3px);

}


/* ============================================================
   SLIDER
============================================================ */
/* ============================================================
   NEWS SLIDER - FULL CARD VIEW
============================================================ */

.koneks-home-news-slider-wrap {
    position: relative;

    width: 100%;

    max-width: 1600px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 45px;
    padding-right: 45px;

    overflow: hidden;
}


.koneks-news-swiper {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: hidden !important;
}


.koneks-news-swiper .swiper-wrapper {
    align-items: stretch;
}


.koneks-news-swiper .swiper-slide {
    height: auto;

    min-width: 0;
}


/* CARD */

.koneks-home-news-card {
    width: 100%;

    min-height: 345px;

    aspect-ratio: 1.55 / 1;
}


/* IMAGE */

.koneks-home-news-image {
    width: 100%;
    height: 100%;
}


.koneks-home-news-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


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

@media (max-width: 1199px) {

    .koneks-home-news-slider-wrap {
        padding-left: 30px;
        padding-right: 30px;
    }

}


@media (max-width: 767px) {

    .koneks-home-news-slider-wrap {
        padding-left: 20px;
        padding-right: 20px;
    }


    .koneks-home-news-card {
        min-height: 330px;
        aspect-ratio: 1 / 1;
    }

}


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

.koneks-home-news-card {

    position: relative;

    width: 100%;

    aspect-ratio: 1.73 / 1;

    min-height: 430px;

    overflow: hidden;

    background: #111;

}


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

.koneks-home-news-image {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

}


.koneks-home-news-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.6,.2,1);

}


.koneks-home-news-card:hover
.koneks-home-news-image img {

    transform:
        scale(1.055);

}


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

.koneks-home-news-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,0) 25%,
            rgba(0,0,0,.06) 45%,
            rgba(0,0,0,.78) 82%,
            rgba(0,0,0,.94) 100%
        );

}


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

.koneks-home-news-content {

    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 5;

    width: 76%;

    padding:
        0
        0
        46px
        58px;

}


/* DATE */

.koneks-home-news-date {

    display: block;

    margin-bottom: 9px;

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

    font-size: 12px;

}


/* TITLE */

.koneks-home-news-content h3 {

    margin: 0 0 25px;
    color: #fff;
    font-size: clamp(15px, 1.65vw, 7px);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.5px;

}


.koneks-home-news-content h3 a {

    color: inherit;

}


/* DETAIL */

.koneks-home-news-detail {

    position: relative;

    display: inline-block;

    padding-bottom: 4px;

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

    font-size: 15px;

    font-weight: 500;

    transition:
        color .3s ease;

}


.koneks-home-news-detail::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

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

    transition:
        background .3s ease;

}


.koneks-home-news-detail:hover {

    color:
        var(--koneks-news-yellow);

}


.koneks-home-news-detail:hover::after {

    background:
        var(--koneks-news-yellow);

}


/* ============================================================
   CORNER ARROWS
============================================================ */

.koneks-home-news-corner {

    position: absolute;

    right: 30px;
    bottom: 25px;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 8px;

}


.koneks-home-news-corner span {

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        transform .35s ease;

}


.koneks-home-news-corner-back {

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

}


.koneks-home-news-corner-front {

    color:
        var(--koneks-news-yellow);

}


.koneks-home-news-card:hover
.koneks-home-news-corner-back {

    transform:
        translate(-4px, 4px);

}


.koneks-home-news-card:hover
.koneks-home-news-corner-front {

    transform:
        translate(4px, -4px);

}


/* ============================================================
   PROGRESS LINE
============================================================ */

.koneks-home-news-progress {

    position: relative;

    width: 63%;

    height: 2px;

    margin:
        65px
        auto
        0;

    background:
        #e5e5e5;

}


.koneks-home-news-progress span {

    position: absolute;

    left: 0;
    top: 0;

    width: 35%;
    height: 2px;

    background:
        #1c1c1c;

}


/* ============================================================
   1500
============================================================ */

@media (max-width: 1500px) {

    .koneks-home-news-container {

        max-width: 1350px;

    }


    .koneks-news-swiper {

        width:
            calc(100% + 250px);

        margin-left: -125px;

    }


    .koneks-home-news-content {

        padding-left: 45px;

    }

}


/* ============================================================
   1200
============================================================ */

@media (max-width: 1199px) {

    .koneks-home-news {

        padding:
            70px
            0
            80px;

    }


    .koneks-home-news-tabs {

        gap: 35px;

    }


    .koneks-home-news-tab-text {

        font-size: 21px;

    }


    .koneks-home-news-tab-icon {

        border-top-width: 13px;
        border-bottom-width: 13px;
        border-left-width: 22px;

    }


    .koneks-home-news-all {

        min-width: 170px;

        height: 55px;

    }


    .koneks-news-swiper {

        width:
            calc(100% + 140px);

        margin-left: -70px;

    }


    .koneks-home-news-card {

        min-height: 380px;

    }


    .koneks-home-news-content {

        padding:
            0
            0
            35px
            35px;

    }

}


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

@media (max-width: 991px) {

    .koneks-home-news-container {

        padding-left: 25px;
        padding-right: 25px;

    }


    .koneks-home-news-top {

        margin-bottom: 38px;

    }


    .koneks-home-news-tabs {

        gap: 25px;

    }


    .koneks-home-news-tab-text {

        font-size: 18px;

    }


    .koneks-home-news-tab {

        gap: 13px;

    }


    .koneks-home-news-all {

        min-width: 145px;

        height: 50px;

        padding:
            0
            20px;

        font-size: 13px;

    }


    .koneks-news-swiper {

        width:
            calc(100% + 80px);

        margin-left: -40px;

    }


    .koneks-home-news-progress {

        width: 75%;

        margin-top: 45px;

    }

}


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

@media (max-width: 767px) {

    .koneks-home-news {

        padding:
            50px
            0
            60px;

    }


    .koneks-home-news-container {

        padding-left: 20px;
        padding-right: 20px;

    }


    .koneks-home-news-top {

        align-items: flex-start;

        flex-direction: column;

        gap: 27px;

    }


    .koneks-home-news-tabs {

        width: 100%;

        gap: 25px;

        overflow-x: auto;

    }


    .koneks-home-news-tab {

        flex: 0 0 auto;

    }


    .koneks-home-news-tab-text {

        font-size: 17px;

    }


    .koneks-home-news-tab-icon {

        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 17px;

    }


    .koneks-home-news-all {

        min-width: 0;

        width: auto;

        height: 46px;

    }


    .koneks-news-swiper {

        width:
            calc(100% + 20px);

        margin-left: 20px;

    }


    .koneks-home-news-card {

        min-height: 360px;

        aspect-ratio: .95 / 1;

    }


    .koneks-home-news-content {

        width: 85%;

        padding:
            0
            0
            30px
            25px;

    }


    .koneks-home-news-content h3 {

        margin-bottom: 18px;

        font-size: 21px;

    }


    .koneks-home-news-detail {

        font-size: 13px;

    }


    .koneks-home-news-corner {

        right: 18px;
        bottom: 18px;

        gap: 3px;

    }


    .koneks-home-news-corner svg {

        width: 26px;
        height: 26px;

    }


    .koneks-home-news-progress {

        width: 100%;

        margin-top: 35px;

    }

}


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

@media (max-width: 480px) {

    .koneks-home-news-tabs {

        gap: 20px;

    }


    .koneks-home-news-tab-text {

        font-size: 15px;

    }


    .koneks-home-news-card {

        min-height: 330px;

    }


    .koneks-home-news-content {

        padding-left: 20px;

    }


    .koneks-home-news-content h3 {

        font-size: 19px;

    }

}



































































/* ============================================================
   KONEKS ABOUT
============================================================ */

.koneks-about-section {

    --ka-yellow: #ffd000;
    --ka-black: #101010;
    --ka-blue: #183a6d;
    --ka-grey: #cfd3d8;

    position: relative;

    width: 100%;

    padding:
        90px
        0
        100px;

    background: #ffffff;

    overflow: hidden;

}


/* ============================================================
   CONTAINER
============================================================ */

.koneks-about-container {

    width: 100%;

    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 30px;
    padding-right: 30px;

}


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

.koneks-about-grid {

    display: grid;

    grid-template-columns:

        minmax(0, 1.1fr)
        minmax(460px, .9fr);

    align-items: center;

    gap: 95px;

}


/* ============================================================
   LEFT
============================================================ */

.koneks-about-left {

    min-width: 0;

}


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

.koneks-about-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 38px;

    color: #111;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 1.6px;

}


/* ICON */

.koneks-about-label-icon {

    position: relative;

    width: 14px;
    height: 14px;

    display: inline-flex;

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

    transform: rotate(45deg);

}


.koneks-about-label-icon::before {

    content: "";

    position: absolute;

    inset: 1px;

    background:
        var(--ka-yellow);

}


.koneks-about-label-icon span {

    position: relative;

    z-index: 2;

    width: 5px;
    height: 5px;

    background:
        #111;

}


/* ============================================================
   TITLE
============================================================ */

.koneks-about-title {

    max-width: 730px;

    margin:
        0
        0
        50px;

    color:
        var(--ka-black);

    font-size:
        clamp(
            40px,
            3.1vw,
            60px
        );

    line-height: 1.06;

    font-weight: 500;

    letter-spacing: -2.4px;

}


.koneks-about-title span {

    color:
        rgba(16,16,16,.58);

}


/* ============================================================
   INFO
============================================================ */

.koneks-about-info {

    display: grid;



    gap: 30px;

}


/* ============================================================
   DOTS
============================================================ */

.koneks-about-dots {

    padding-top: 5px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 24px;

}


.koneks-about-dot {

    position: relative;

    width: 32px;
    height: 32px;

    padding: 0;

    border:

        1px solid
        #e2e5e8;

    background:
        transparent;

    transform:
        rotate(45deg);

    cursor: pointer;

    transition:
        border-color .3s ease,
        transform .3s ease;

}


.koneks-about-dot span {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    background:
        #d6dce3;

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

    transition:
        background .3s ease;

}


/* ACTIVE */

.koneks-about-dot.active {

    border-color:
        var(--ka-blue);

}


.koneks-about-dot.active span {

    background:
        var(--ka-blue);

}


/* HOVER */

.koneks-about-dot:hover {

    border-color:
        var(--ka-yellow);

}


.koneks-about-dot:hover span {

    background:
        var(--ka-yellow);

}


/* ============================================================
   DESCRIPTION
============================================================ */

.koneks-about-text-area {

    max-width: 540px;

}


.koneks-about-description {

    margin:
        0
        0
        45px;

    color:
        rgba(16,16,16,.73);

    font-size: 15px;

    line-height: 1.65;

    font-weight: 400;

}


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

.koneks-about-button {

    min-width: 165px;

    min-height: 48px;

    padding:
        5px
        5px
        5px
        23px;

    border-radius: 100px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background:
        var(--ka-yellow);

    color: #111;

    transition:
        background .3s ease,
        transform .3s ease;

}


.koneks-about-button > span:first-child {

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* ICON */

.koneks-about-button-icon {

    position: relative;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border:

        1px solid
        rgba(0,0,0,.30);

    border-radius: 50%;

    display: flex;

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

    overflow: hidden;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.koneks-about-button:hover {

    background:
        #111;

    color: #fff;

    transform:
        translateY(-3px);

}


.koneks-about-button:hover
.koneks-about-button-icon {

    border-color:
        rgba(255,255,255,.30);

    transform:
        rotate(45deg);

}


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

.koneks-about-image {

    position: relative;

    width: 100%;

    aspect-ratio:
        1.095 / 1;

    overflow: hidden;

    background:
        #f3f3f3;

}


.koneks-about-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            135deg,
            rgba(255,208,0,.04),
            transparent 45%
        );

}


.koneks-about-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1);

}


.koneks-about-image:hover img {

    transform:
        scale(1.035);

}


/* ============================================================
   STATS
============================================================ */

.koneks-about-stats {

    margin-top: 95px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    column-gap: 70px;

    row-gap: 50px;

}


/* ============================================================
   STAT ITEM
============================================================ */

.koneks-about-stat {

    cursor: pointer;

}


.koneks-about-stat-top {

    padding:
        0
        18px
        18px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    opacity: .18;

    transition:
        opacity .35s ease;

}


.koneks-about-stat:hover
.koneks-about-stat-top,

.koneks-about-stat.active
.koneks-about-stat-top {

    opacity: 1;

}


/* NUMBER */

.koneks-about-stat strong {

    color:
        var(--ka-black);

    font-size:
        clamp(
            45px,
            4.2vw,
            74px
        );

    line-height: .95;

    font-weight: 500;

    letter-spacing: -3px;

}


/* TEXT */

.koneks-about-stat-top span {

    padding-bottom: 4px;

    color:
        #111;

    font-size: 17px;

    font-weight: 400;

}


/* ============================================================
   STAT LINE
============================================================ */

.koneks-about-stat-line {

    position: relative;

    width: 100%;

    height: 2px;

    overflow: hidden;

    background:
        #e4e6e9;

}


.koneks-about-stat-line span {

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background:
        var(--ka-yellow);

    transition:
        width .55s ease;

}


.koneks-about-stat:hover
.koneks-about-stat-line span,

.koneks-about-stat.active
.koneks-about-stat-line span {

    width: 48%;

}


/* ============================================================
   1400
============================================================ */

@media (max-width: 1400px) {

    .koneks-about-container {

        max-width: 1280px;

    }


    .koneks-about-grid {

        gap: 65px;

    }


    .koneks-about-title {

        font-size: 50px;

    }

}


/* ============================================================
   1199
============================================================ */

@media (max-width: 1199px) {

    .koneks-about-section {

        padding:
            75px
            0
            80px;

    }


    .koneks-about-grid {

        grid-template-columns:
            1fr
            1fr;

        gap: 45px;

    }


    .koneks-about-title {

        font-size: 43px;

    }


    .koneks-about-stats {

        margin-top: 70px;

        gap:
            40px
            45px;

    }


    .koneks-about-stat strong {

        font-size: 56px;

    }

}


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

@media (max-width: 991px) {

    .koneks-about-grid {

        grid-template-columns:
            1fr;

    }


    .koneks-about-left {

        order: 1;

    }


    .koneks-about-image {

        order: 2;

        aspect-ratio:
            16 / 9;

    }


    .koneks-about-title {

        max-width: 650px;

    }


    .koneks-about-description {

        max-width: 580px;

    }


    .koneks-about-stats {

        margin-top: 55px;

    }

}


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

@media (max-width: 767px) {

    .koneks-about-section {

        padding:
            55px
            0
            60px;

    }


    .koneks-about-container {

        padding-left: 20px;
        padding-right: 20px;

    }


    .koneks-about-label {

        margin-bottom: 25px;

    }


    .koneks-about-title {

        margin-bottom: 35px;

        font-size: 35px;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .koneks-about-info {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .koneks-about-dots {

        padding-top: 0;

        flex-direction: row;

        justify-content: flex-start;

        gap: 15px;

    }


    .koneks-about-dot {

        width: 26px;
        height: 26px;

    }


    .koneks-about-description {

        margin-bottom: 30px;

        font-size: 14px;

    }


    .koneks-about-image {

        margin-top: 10px;

    }


    .koneks-about-stats {

        grid-template-columns:
            1fr;

        margin-top: 45px;

        row-gap: 30px;

    }


    .koneks-about-stat-top {

        padding:
            0
            8px
            15px;

    }


    .koneks-about-stat strong {

        font-size: 47px;

    }


    .koneks-about-stat-top span {

        font-size: 14px;

    }

}


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

@media (max-width: 480px) {

    .koneks-about-title {

        font-size: 31px;

    }


    .koneks-about-stat strong {

        font-size: 42px;

    }


    .koneks-about-stat-top {

        gap: 15px;

    }

}





































/* ============================================================
   KONEKS PRODUCTS SHOWCASE
============================================================ */

.koneks-products-showcase {

    --kp-yellow: #ffd000;
    --kp-black: #111111;
    --kp-dark: #152338;
    --kp-grey: #747b84;

    position: relative;

    width: 100%;

    padding:
        100px
        0
        115px;

    overflow: hidden;

    background: #ffffff;

}


/* ============================================================
   CONTAINER
============================================================ */

.koneks-products-container {

    width: 100%;

    max-width: 1500px;

    margin:
        0
        auto;

    padding:
        0
        30px;

}


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

.koneks-products-grid {

    display: grid;

    grid-template-columns:
        minmax(300px, .85fr)
        minmax(0, 1.65fr);

    align-items: center;

    gap: 65px;

}


/* ============================================================
   LEFT
============================================================ */

.koneks-products-left {

    position: relative;

    z-index: 10;

}


/* LABEL */

.koneks-products-label {

    display: block;

    margin-bottom: 20px;

    color:
        #a08320;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.8px;

}


/* TITLE */

.koneks-products-heading h2 {

    position: relative;
    z-index: 5;
    width: 510px;
    margin: 0 -170px 45px 0;
    color: var(--kp-black);
    font-size: clamp(46px, 4.3vw, 60px);
    line-height: .97;
    font-weight: 600;
    letter-spacing: -4px;

}


.koneks-products-heading h2 span {

    color:
        rgba(17,17,17,.42);

}


/* ============================================================
   NAVIGATION
============================================================ */

.koneks-products-navigation {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 35px;

}


.koneks-products-nav {

    position: relative;

    width: 54px;
    height: 54px;

    padding: 0;

    border:

        1px solid
        rgba(17,17,17,.16);

    border-radius: 50%;

    display: flex;

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

    background:
        transparent;

    color:
        var(--kp-black);

    cursor: pointer;

    overflow: hidden;

    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease;

}


.koneks-products-nav::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        var(--kp-yellow);

    transform:
        scale(0);

    transition:
        transform .35s ease;

}


.koneks-products-nav:hover {

    border-color:
        var(--kp-yellow);

}


.koneks-products-nav:hover::before {

    transform:
        scale(1);

}


.koneks-products-nav svg {

    position: relative;

    z-index: 2;

}


/* ============================================================
   DESCRIPTION
============================================================ */

.koneks-products-description {

    max-width: 380px;

}


.koneks-products-description p {

    margin: 0;

    color:
        rgba(17,17,17,.58);

    font-size: 14px;

    line-height: 1.65;

}


/* ============================================================
   PAGINATION
============================================================ */

.koneks-products-pagination {

    margin-top: 35px;

    display: flex;

    align-items: center;

    gap: 10px;

}


.koneks-products-pagination
.swiper-pagination-bullet {

    width: 35px;
    height: 2px;

    margin: 0 !important;

    border-radius: 0;

    opacity: 1;

    background:
        rgba(17,17,17,.15);

    transition:
        width .35s ease,
        background .35s ease;

}


.koneks-products-pagination
.swiper-pagination-bullet-active {

    width: 65px;

    background:
        var(--kp-yellow);

}


/* ============================================================
   RIGHT
============================================================ */

.koneks-products-right {

    position: relative;

    min-width: 0;

}


/* ============================================================
   SWIPER
============================================================ */

.koneks-products-swiper {

    width: 100%;

    overflow: visible !important;

    padding-bottom: 95px;

}


.koneks-products-swiper
.swiper-wrapper {

    align-items: stretch;

}


/* ============================================================
   SLIDE
============================================================ */

.koneks-products-slide {

    position: relative;

    width: 100%;

    opacity: .25;

    transition:
        opacity .5s ease;

}


.koneks-products-slide.swiper-slide-active {

    opacity: 1;

}


.koneks-products-slide.swiper-slide-next {

    opacity: .38;

}


/* ============================================================
   INNER
============================================================ */

.koneks-product-slide-inner {

    position: relative;

    width: 100%;

    height: 100%;

    padding-bottom: 75px;

}


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

.koneks-product-image {

    position: relative;

    width: 100%;

    aspect-ratio: 900 / 560;

    display: block;

    overflow: hidden;

    border-radius: 20px;

    background:
        #efefef;

}


.koneks-product-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            120deg,
            transparent 35%,
            rgba(0,0,0,.05)
        );

}


.koneks-product-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2,.6,.2,1);

}


.koneks-products-slide:hover
.koneks-product-image img {

    transform:
        scale(1.045);

}


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

.koneks-product-info {

    position: absolute;

    left: 50%;
    bottom: 0;

    z-index: 10;

    width: 100%;

    max-width: 390px;

    transform:
        translateX(-50%)
        translateY(25px)
        scale(.94);

    opacity: 0;

    transition:

        opacity .5s ease .15s,
        transform .5s ease .15s;

}


.koneks-products-slide.swiper-slide-active
.koneks-product-info {

    opacity: 1;

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

}


.koneks-product-info > a {

    min-height: 145px;

    padding:

        22px
        26px
        25px;

    border:

        1px solid
        rgba(17,17,17,.06);

    border-radius: 18px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color:
        #142d51;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.12);

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

    backdrop-filter:
        blur(15px);

}


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

.koneks-product-info-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

}


.koneks-product-icon {

    width: 50px;
    height: 50px;

    display: flex;

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

    color:
        #183a68;

}


.koneks-product-arrow {

    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: flex;

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

    color:
        #183a68;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.koneks-product-info a:hover
.koneks-product-arrow {

    background:
        var(--kp-yellow);

    color:
        #111;

    transform:
        rotate(45deg);

}


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

.koneks-product-info h3 {

    margin:
        12px
        0
        0;

    color:
        #183a68;

    font-size: 23px;

    line-height: 1.15;

    font-weight: 600;

}


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

@media (max-width: 1400px) {

    .koneks-products-container {

        max-width: 1280px;

    }


    .koneks-products-heading h2 {

        width: 540px;

        margin-right: -130px;

        font-size: 60px;

    }

}


/* ============================================================
   1199
============================================================ */

@media (max-width: 1199px) {

    .koneks-products-showcase {

        padding:
            80px
            0
            90px;

    }


    .koneks-products-grid {

        grid-template-columns:
            .8fr
            1.4fr;

        gap: 40px;

    }


    .koneks-products-heading h2 {

        width: 480px;

        margin-right: -100px;

        font-size: 53px;

    }


    .koneks-product-info {

        max-width: 330px;

    }

}


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

@media (max-width: 991px) {

    .koneks-products-grid {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .koneks-products-left {

        text-align: center;

    }


    .koneks-products-heading h2 {

        width: 100%;

        max-width: 680px;

        margin:
            0
            auto
            30px;

        font-size: 48px;

    }


    .koneks-products-navigation {

        justify-content: center;

    }


    .koneks-products-description {

        max-width: 580px;

        margin:
            0
            auto;

    }


    .koneks-products-pagination {

        justify-content: center;

    }


    .koneks-products-right {

        width: 88%;

        margin:
            0
            auto;

    }

}


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

@media (max-width: 767px) {

    .koneks-products-showcase {

        padding:
            55px
            0
            65px;

    }


    .koneks-products-container {

        padding:
            0
            20px;

    }


    .koneks-products-heading h2 {

        font-size: 37px;

        line-height: 1;

        letter-spacing: -2px;

    }


    .koneks-products-nav {

        width: 44px;
        height: 44px;

    }


    .koneks-products-right {

        width: 100%;

    }


    .koneks-products-swiper {

        padding-bottom: 80px;

    }


    .koneks-product-image {

        aspect-ratio:
            4 / 3;

        border-radius: 14px;

    }


    .koneks-product-info {

        max-width:
            calc(100% - 30px);

    }


    .koneks-product-info > a {

        min-height: 120px;

        padding:
            18px
            20px;

        border-radius: 14px;

    }


    .koneks-product-icon {

        width: 40px;
        height: 40px;

    }


    .koneks-product-icon svg {

        width: 37px;
        height: 37px;

    }


    .koneks-product-info h3 {

        font-size: 20px;

    }

}


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

@media (max-width: 480px) {

    .koneks-products-heading h2 {

        font-size: 32px;

    }


    .koneks-products-description p {

        font-size: 13px;

    }

}























/* ============================================================
   KONEKS CORPORATE VIDEO
============================================================ */

.koneks-video-section {

    --kv-yellow: #ffd000;
    --kv-dark: #101010;

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

    background: #ffffff;

}


/* ============================================================
   CONTAINER
============================================================ */

.koneks-video-container {

    width: 100%;

    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    padding: 0;

}


/* ============================================================
   BANNER
============================================================ */

.koneks-video-banner {

    position: relative;
    width: 100%;
    aspect-ratio: 1300 / 350;
    min-height: 350px;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
}


/* ============================================================
   COVER IMAGE
============================================================ */

.koneks-video-cover {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

}


.koneks-video-cover img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1);

}


.koneks-video-banner:hover
.koneks-video-cover img {

    transform: scale(1.025);

}


/* ============================================================
   GRADIENT
============================================================ */

.koneks-video-gradient {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.12) 0%,
            rgba(0,0,0,.23) 37%,
            rgba(0,0,0,.72) 67%,
            rgba(0,0,0,.86) 100%
        );

}


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

.koneks-video-content {

    position: relative;

    z-index: 5;

    width: 100%;

    min-height: 400px;

    padding:
        45px
        70px;

    display: grid;

    grid-template-columns:
        1fr
        1.1fr;

    align-items: center;

    gap: 60px;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


/* PLAYER AÇILINCA CONTENT GİZLE */

.koneks-video-banner.video-active
.koneks-video-content {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* ============================================================
   PLAY AREA
============================================================ */

.koneks-video-play-area {

    width: fit-content;

    margin-left: auto;
    margin-right: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* ============================================================
   PLAY BUTTON
============================================================ */

.koneks-video-play-button {

    position: relative;

    width: 110px;
    height: 110px;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

    display: flex;

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

      background: rgb(255 208 0);
    color: #000000;

    cursor: pointer;

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

    transition:
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .35s ease;

}


.koneks-video-play-button:hover {

    color: #111;

    border-color:
        var(--kv-yellow);

    background:
        var(--kv-yellow);

    transform: scale(1.06);

}


/* PLAY ICON */

.koneks-video-play-icon {

    position: relative;

    z-index: 5;

    display: flex;

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

}


.koneks-video-play-icon svg {

    margin-left: 4px;

}


/* ============================================================
   RIPPLE
============================================================ */

.koneks-video-ripple {

    position: absolute;

    inset: 0;

    border:

        1px solid
        rgba(255,255,255,.30);

    border-radius: 50%;

    opacity: 0;

    animation:
        koneksVideoRipple
        2.7s
        infinite;

}


.koneks-ripple-1 {
    animation-delay: 0s;
}


.koneks-ripple-2 {
    animation-delay: .9s;
}


.koneks-ripple-3 {
    animation-delay: 1.8s;
}


@keyframes koneksVideoRipple {

    0% {

        transform: scale(.95);

        opacity: .55;

    }

    70% {

        transform: scale(1.65);

        opacity: 0;

    }

    100% {

        transform: scale(1.65);

        opacity: 0;

    }

}


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

.koneks-video-play-label {

    margin-top: 18px;

    color: #fff;

    font-size: 14px;

    line-height: 1;

    font-weight: 500;

}


/* ============================================================
   TITLE
============================================================ */

.koneks-video-title-area {

    max-width: 630px;

}


.koneks-video-label {

    display: block;

    margin-bottom: 15px;

    color:
        var(--kv-yellow);

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 2px;

}


.koneks-video-title-area h2 {

    margin:
        0
        0
        22px;

    color: #fff;

    font-size:
        clamp(
            47px,
            4.4vw,
            78px
        );

    line-height: .92;

    font-weight: 500;

    letter-spacing: -4px;

}


.koneks-video-title-area h2 span {

    display: block;

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

}


.koneks-video-title-area p {

    max-width: 520px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.6;

}


/* ============================================================
   INLINE VIDEO PLAYER
============================================================ */

.koneks-video-player {

    position: absolute;

    inset: 0;

    z-index: 20;

    width: 100%;
    height: 100%;

    background: #000;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: scale(.985);

    transition:

        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease;

}


/* ACTIVE */

.koneks-video-banner.video-active
.koneks-video-player {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: scale(1);

}


/* ============================================================
   IFRAME
============================================================ */

.koneks-video-player iframe {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    display: block;

}


/* ============================================================
   CLOSE
============================================================ */

.koneks-video-player-close {

    position: absolute;

    right: 18px;
    top: 18px;

    z-index: 30;

    width: 48px;
    height: 48px;

    padding: 0;

    border:

        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

    display: flex;

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

    background:
        rgba(0,0,0,.55);

    color: #fff;

    cursor: pointer;

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

    backdrop-filter:
        blur(10px);

    transition:

        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.koneks-video-player-close:hover {

    background:
        var(--kv-yellow);

    color: #111;

    transform: rotate(90deg);

}


/* ============================================================
   1500
============================================================ */

@media (max-width: 1500px) {

    .koneks-video-container {

        max-width: calc(100% - 60px);

    }

}


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

@media (max-width: 991px) {

    .koneks-video-banner {

        aspect-ratio: auto;

        min-height: 430px;

    }


    .koneks-video-content {

        min-height: 430px;

        padding:

            40px
            45px;

        gap: 35px;

    }


    .koneks-video-title-area h2 {

        font-size: 52px;

        letter-spacing: -2.5px;

    }


    .koneks-video-play-button {

        width: 90px;
        height: 90px;

    }

}


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

@media (max-width: 767px) {

    .koneks-video-container {

        max-width: 100%;

        padding:
            0
            20px;

    }


    .koneks-video-banner {

        min-height: 520px;

        border-radius: 14px;

    }


    .koneks-video-gradient {

        background:

            linear-gradient(
                180deg,
                rgba(0,0,0,.15) 0%,
                rgba(0,0,0,.42) 48%,
                rgba(0,0,0,.88) 100%
            );

    }


    .koneks-video-content {

        min-height: 520px;

        padding:

            35px
            25px;

        grid-template-columns:
            1fr;

        align-content: center;

        gap: 40px;

    }


    .koneks-video-title-area {

        order: 1;

        text-align: center;

    }


    .koneks-video-play-area {

        order: 2;

    }


    .koneks-video-title-area h2 {

        font-size: 39px;

        line-height: .96;

        letter-spacing: -1.8px;

    }


    .koneks-video-title-area p {

        margin-left: auto;
        margin-right: auto;

        font-size: 13px;

    }


    .koneks-video-play-button {

        width: 78px;
        height: 78px;

    }


    .koneks-video-player-close {

        width: 42px;
        height: 42px;

        right: 12px;
        top: 12px;

    }

}