@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


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

:where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure) {
    margin: 0;
}

:where(ul,ol) {
    padding: 0;
    list-style: none;
}

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


body {
    font-family: 'Open Sans', sans-serif;
    color: #2d3647;
    font-size: 16px;
}

html {
    scroll-behavior: smooth;
}

h1 {
    margin: 50% 0 5% 0;
    font-weight: 300;
    font-size: 45px;
    line-height: 45px;
    color: #fff;
    width: 70%;
    height: 100vh;
    overflow-y: scroll; /* Native scroll bar görünür, gizlemek istersen ::-webkit-scrollbar kullanabilirsin */
    scroll-snap-type: y mandatory; /* Sihrin gerçekleştiği yer */
    scroll-behavior: smooth;
}


.navbar-default {
    background-color: transparent;
}


.section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10% 5% 0 5%;
}


.section-solid {
    padding: 0;
}


/* tipografi*/

.contactH2 {
    font-weight: 300;
    font-size: 45px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 5px 0;
}


.motto {
    font-size: 22px;
    line-height: 35px;
}

.imza {
    font-size: 14px;
    font-style: italic;
}

.right-content {
    line-height: 25px;
}

    .right-content strong {
        line-height: normal;
        font-size: 18px;
    }

    .right-content p {
        padding: 20px 0;
    }

        .right-content p strong {
            line-height: normal;
            font-size: 16px;
        }


.imgArrow {
    display: block;
    margin: 30px 0;
}

.img-referans {
    padding: 10px 10px !important;
    width: 80%;
}


.popover {
    z-index: 1060 !important;
}


.contactTxt {
    color: #fff;
    font-size: 14px;
}

.hoverImage img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: grayscale(100%);
    transition: all 0.2s ease-in;
}

.hoverImage:hover img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: none;
}

.referanslar1 {
    padding-top: 50px;
}

.modal-footer {
    border-top: none;
}


.bilgiContent {
    font-size: 12px;
    line-height: 19px;
}


.infoDiv {
    padding: 15px;
    margin-bottom: 20px;
}


.captchaPadding {
    padding: 35px 0 0 0;
}


#header {
    position: fixed;
    height: 100px;
    display: block;
    width: 100%;
    z-index: 9;
    top: 0px;
}

/* =============================================================================
  MM - MATERIAL MENU
============================================================================= */

.mm-menu-toggle {
    position: fixed;
    top: 60px;
    right: 6%;
    z-index: 20;
    width: 25px;
    height: 18px;
    font-size: 0;
    text-indent: -9999px;
}

    .mm-menu-toggle::before,
    .mm-menu-toggle::after {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #fff;
        content: "";
    }


    .mm-menu-toggle::before {
        top: 0;
        transform-origin: bottom left;
    }

    .mm-menu-toggle::after {
        bottom: 0;
        transform-origin: top left;
    }

    .mm-menu-toggle,
    .mm-menu-toggle::before,
    .mm-menu-toggle::after {
        transition: all 0.5s;
    }

        /* active states */
        .mm-menu-toggle.active {
            transform: rotate(360deg);
            right: 2%;
        }

            .mm-menu-toggle.active::before {
                width: 75%;
                transform: translateY(7px) rotate(-45deg);
            }

            .mm-menu-toggle.active::after {
                width: 75%;
                transform: translateY(-7px) rotate(45deg);
            }


.mm-menu {
    position: fixed;
    padding: 0;
    top: 0;
    right: 0;
    z-index: 10;
    background-color: #f5f4f4;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 0.5s, box-shadow 0.5s;
}

    .mm-menu.active {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transform: translateX(0);
    }




.mm-menu__title {
    position: absolute;
    bottom: 12px;
    left: 12px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 22px;
}

/* list */
.mm-menu__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mm-menu__item {
    display: block;
    width: 100%;
    opacity: 0;
    transform: translateX(-50%);
}

    .mm-menu__item.in-view {
        opacity: 1;
        transform: translateX(0);
    }


.mm-menu__link {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 4px 0;
    padding: 12px;
    color: #727272;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.5s, color 0.5s;
}

.mm-menu__link-text {
    position: relative;
    z-index: 2;
}

/* the touch effect, for when a link is touched */
.mm-menu__link--touch-effect {
    display: block;
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    border-radius: 100%;
    transform: scale(0);
    transform-origin: 50% 50%;
}

    .mm-menu__link--touch-effect.animating {
        transform: scale(1);
        transition: transform 0.5s;
    }

/**
 * Menu mask
 *
 * A mask that comes in and covers the wrapper when the menu is active.
 */
.mm-menu-mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
}


    .mm-menu-mask.active {
        visibility: visible;
        opacity: 1;
    }


button {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    appearance: none;
    cursor: pointer;
}


.rightMenu {
    padding: 10px;
    line-height: 35px;
    color: #5c5c5c;
    border-bottom: solid 1px #eaeaea;
    width: 100%;
    font-size: 17px;
    display: block;
}


.modal-backdrop.fade.in:nth-child(2) {
    z-index: 1060 !important;
}

.mm-menu__header {
    position: relative;
    padding: 10px;
    width: 100%;
    height: 120px;
    /*background-color: #69b9c0;*/
    padding: 20px 10px;
    margin: 0 0 50px 0;
}

.mm-menu__items li:hover {
    background-color: #5c5c5c;
    color: #ffffff;
}

.rightMenu:hover {
    color: #ffffff;
}



.whiteIcon {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 7px, #fff 7px, #fff 11px, rgba(255, 255, 255, 0) 11px, rgba(255, 255, 255, 0) 18px);
}

.blueIcon {
    background: linear-gradient(0deg, rgba(105, 185, 192, 0), rgba(105, 185, 192, 0) 7px, #69b9c0 7px, #69b9c0 11px, rgba(105, 185, 192, 0) 11px, rgba(105, 185, 192, 0) 18px);
}

.greenIcon {
    background: linear-gradient(0deg, rgba(182, 202, 43, 0), rgba(182, 202, 43, 0) 7px, #b6ca2b 7px, #b6ca2b 11px, rgba(182, 202, 43, 0) 11px, rgba(182, 202, 43, 0) 18px);
}

.purpleIcon {
    background: linear-gradient(0deg, rgba(161, 73, 122, 0), rgba(161, 73, 122, 0) 7px, #a1497a 7px, #a1497a 11px, rgba(161, 73, 122, 0) 11px, rgba(161, 73, 122, 0) 18px);
}

.darkBlueIcon {
    background: linear-gradient(0deg, rgba(76, 103, 193, 0), rgba(76, 103, 193, 0) 7px, #4c67c1 7px, #4c67c1 11px, rgba(76, 103, 193, 0) 11px, rgba(76, 103, 193, 0) 18px);
}


.mm-menu-toggle.white::before,
.mm-menu-toggle.white::after {
    background-color: #ffffff;
}

.mm-menu-toggle.blue::before,
.mm-menu-toggle.blue::after {
    background-color: #69b9c0;
}

.mm-menu-toggle.green::before,
.mm-menu-toggle.green::after {
    background-color: #b6ca2b;
}

.mm-menu-toggle.purple::before,
.mm-menu-toggle.purple::after {
    background-color: #a1497a;
}

.mm-menu-toggle.darkBlue::before,
.mm-menu-toggle.darkBlue::after {
    background-color: #4c67c1;
}


.section-footer {
    color: #fff;
    letter-spacing: 0.5px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px 80px;
    background-color: #474747;
    height: auto;
}

    .section-footer ul {
        display: block;
    }

        .section-footer ul li {
            float: left;
            padding: 0 6px;
        }

    .section-footer > div > ul > li > a,
    .section-footer > div > ul > li > a:hover,
    .section-footer > div > ul > li > a:active,
    .section-footer > div > ul > li > a:visited {
        color: #fff;
        font-size: 12px;
    }

@media only screen and (min-width: 992px) {
    .right-content, .left-content {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        padding: 0 6%;
    }

    .section {
        padding: 10% 5% 0 5%;
    }

    .hiddenH2 {
        display: block;
    }
}

@media only screen and (min-width : 768px) {


    .bg-hizmetler, .bg-cozumler, .bg-referanslar {
        background-size: cover;
    }

    .bg-sirket {
        background-size: contain;
    }

    a {
        font-size: 14px;
    }

    .section {
        padding: 5% 0;
    }

    h1 {
        overflow: hidden;
    }

    .right-content, .left-content {
        margin-top: 0;
    }

    .rightContact {
        margin-bottom: 150px;
    }

    .hiddenH2 {
        display: none;
    }
}

@media only screen and (max-width:465px) {


    body {
        font-size: 14px;
    }


    .panel-body {
        padding: 0 0;
        line-height: 30px;
    }

        .panel-body > div > a {
            display: block;
        }


    .mobilIcon {
        display: block;
    }

    .desktopIcon {
        display: none;
    }

    .section {
        padding: 15% 0 0 0;
    }

    /*.mobilSection {
        height: auto !important;
    }*/

    .motto {
        font-size: 16px;
        line-height: 25px;
    }

    .right-content {
        line-height: normal;
        margin: 20px 0;
    }

        .right-content p {
            padding: 14px 0;
            font-size: small;
            /* overflow: scroll; */
            /* height: 250px; */
        }

    /*.container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }*/

    .bg-sirket, .bg-hizmetler, .bg-cozumler, .bg-referanslar {
        background-size: contain;
    }

    .right-content strong {
        line-height: normal;
        font-size: 15px;
    }

    h1 {
        margin: 0;
        font-size: 28px;
        line-height: 32px;
        width: 70%;
    }


    .contactH2 {
        margin: 0;
        font-weight: normal;
        font-size: 31px;
        line-height: 55px;
        color: #fff;
    }

    .LogoMain {
        width: 70%;
    }

    .nav-toggle {
        position: absolute;
        top: 20px;
        right: 15px;
        z-index: 999999;
        padding: 10px 35px 16px 0px;
        cursor: pointer;
    }

    .imgArrow {
        /*display: inline-block;*/

        width: 15%;
    }


    /*#contactForm input,
    #contactForm textarea {
        width: 100%;
    }*/

    .mm-menu-toggle {
        top: 34px;
        right: 23px;
    }

    .cozumler1, .referanslar1, .iletisim {
        height: auto !important;
        padding-top: 20px;
    }

    .section.bg-hizmetler.fp-section.active.fp-completely {
        padding-top: 40px;
    }

    .section.hizmetler3.fp-section {
        padding-top: 5px;
    }

    #contactForm input,
    #contactForm textarea {
        width: 100%;
    }

    p.contactTxt {
        letter-spacing: 0.5px;
        font-size: 11px;
    }

    .contactRight {
        margin-top: auto;
    }

    .section-solid h1 {
        margin-top: 30%;
    }



    .rightContact {
        margin-bottom: 200px;
    }

    .hiddenH2 {
        display: none;
    }

    small, .small {
        font-size: 70%;
    }

   
}

@media only screen and (max-width : 320px) {


    h1 {
        margin: 0;
        font-size: 24px;
        line-height: 28px;
        width: 90%;
    }

    .mm-menu-toggle {
        top: 30px;
        right: 23px;
    }

}

@media only screen and (min-width: 466px) and (max-width: 737px) {



    h1 {
        margin: 50% 0 5% 0;
        font-weight: 300;
        font-size: 20px;
        line-height: 25px;
        color: #fff;
        width: 50%;
        overflow: hidden;
    }



    .mm-menu-toggle {
        top: 25px;
        right: 23px;
    }

    img.LogoMain {
        width: 22%;
    }

    .right-content strong {
        font-size: 14px;
    }

    .motto {
        font-size: 20px;
        line-height: 30px;
    }

    .rightContact {
        margin-bottom: 150px;
    }

    .hiddenH2 {
        display: none;
    }

    /*.mobilSection {
        height: auto !important;
    }*/

    .right-content {
        margin-top: 40px;
    }

    .rightMenu {
        padding: 3px 15px;
    }

    .mm-menu__header {
        margin: 0 0 10px 0;
    }


    small, .small {
        font-size: 70%;
    }
}

@media only screen and (min-width: 466px) and (max-width: 992px) {


    .cozumler1, .referanslar1, .iletisim {
        height: auto !important;
        padding-top: 20px;
    }

   
}

/*ipad only*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    .section-footer {
        position: relative;
    }
}

/*ipad only*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    .section-solid h1 {
        margin-top: 40%;
    }

}


.contactRight {
    margin-top: 120px;
}

#selectedFiles {
    float: left;
    height: 33px;
    width: 100%;
    padding: 5px;
}


a.mtMail {
    font-size: 16px;
}

.hiddenH2 {
    display: block;
}

.clear-padding {
    padding: 0;
    float: left;
}

.bgHide {
    display: none;
}

.field-validation-error {
    color: red;
    /*display: inline-block;*/
    padding-left: 5px;
    /*margin-top: -40px;*/
    text-align: right;
    float: right;
    padding: 8px;
    margin-right: 1%;
    font-size: 13px;
}


#contactForm > span.field-validation-error,
#contactForm > .field-validation-error {
    color: #000;
    margin-top: -40px;
    margin-right: 10%;
}


#hakkimizda-tanitim-yazisi {
    height: 100vh;
}

.sectionHakkimizda {
    background-color: #69b9c0;
    height: 100vh;
}


.sectionHizmetler {
    background-color: #b6ca2b;
    height: 100vh;
}

.sectionCozumler {
    background-color: #a1497a;
    height: 100vh;
}


.sectionReferanslar {
    background-color: #4c67c1;
    height: 100vh;
}

.sectionIletisim {
    background-color: #fe6200;
    /*height: 100vh;*/
}

.modal-fix {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

.hakkimizda-scroll,
.hizmetler-scroll,
.cozumler-scroll,
.referans-scroll {
    cursor: pointer;
}


.mobilScroll {
    overflow: auto !important;
    height: 100% !important;
}


.emptyDiv {
    position: relative;
    display: block;
    height: 70px;
    background-color: transparent;
}

.loadingDiv {
    text-align: center;
}

/*xxx*/
.cozumlerBox {
    height: 125px;
    min-height: 90px !important;
    border: solid 1px #e7e7e7;
    width: 98%;
    min-width: 98%;
    margin: 0 0 5px 0;
    padding: 10px;
    line-height: normal;
    cursor: pointer;
    color: #2d3647;
}

.mobilBox {
    height: auto !important;
    min-height: 50px !important;
    margin-top: 10px;
}

.cozumlerBox:hover {
    color: #fff;
    background-color: #a1497a;
}

.cozumlerBox > span:nth-child(1) {
    font-size: 14px;
    color: #a1497a;
    font-weight: bold;
}


.cozumlerBox > span:hover,
.cozumlerBox > span:hover {
    color: #fff;
}

.cozumlerBox:hover span,
.cozumlerBox:hover span {
    color: #fff;
}


div.bhoechie-tab-container {
    z-index: 10;
    background-color: #ffffff;
    padding: 0 !important;
    margin-top: 10px;
}

div.bhoechie-tab-menu {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

    div.bhoechie-tab-menu div.list-group {
        margin-bottom: 0;
    }

        div.bhoechie-tab-menu div.list-group > a {
            margin-bottom: 0;
        }

            div.bhoechie-tab-menu div.list-group > a .glyphicon,
            div.bhoechie-tab-menu div.list-group > a .fa {
                color: #5A55A3;
            }

            div.bhoechie-tab-menu div.list-group > a:first-child {
                border-top-right-radius: 0;
            }

            div.bhoechie-tab-menu div.list-group > a:last-child {
                border-bottom-right-radius: 0;
            }

            div.bhoechie-tab-menu div.list-group > a.active,
            div.bhoechie-tab-menu div.list-group > a.active .glyphicon,
            div.bhoechie-tab-menu div.list-group > a.active .fa {
                background-color: rgb(161, 73, 122);
                color: #ffffff;
            }

                div.bhoechie-tab-menu div.list-group > a.active:after {
                    content: '';
                    position: absolute;
                    left: 100%;
                    top: 50%;
                    margin-top: -13px;
                    border-left: 0;
                    border-bottom: 13px solid transparent;
                    border-top: 13px solid transparent;
                    border-left: 10px solid rgb(161, 73, 122);
                }

div.bhoechie-tab-content {
    background-color: #ffffff;
    /* border: 1px solid #eeeeee; */
    padding-left: 5px;
    padding-top: 0;
}

div.bhoechie-tab div.bhoechie-tab-content:not(.active) {
    display: none;
}



/*menu higlithg*/

body.fp-viewing-hakkimizda #mm-menu > ul > li.item-1.in-view,
body.fp-viewing-hakkimizda-tanitim #mm-menu > ul > li.item-1.in-view {
    background-color: #69b9c0;
}

    body.fp-viewing-hakkimizda #mm-menu > ul > li.item-1.in-view > a,
    body.fp-viewing-hakkimizda-tanitim #mm-menu > ul > li.item-1.in-view > a {
        color: #ffffff;
    }

body.fp-viewing-hizmetler #mm-menu > ul > li.item-2.in-view,
body.fp-viewing-hizmetler-tanitim #mm-menu > ul > li.item-2.in-view,
body.fp-viewing-hizmetler-yazilim #mm-menu > ul > li.item-2.in-view,
body.fp-viewing-hizmetler-donanim #mm-menu > ul > li.item-2.in-view,
body.fp-viewing-hizmetler-danismanlik #mm-menu > ul > li.item-2.in-view,
body.fp-viewing-hizmetler-internet #mm-menu > ul > li.item-2.in-view {
    background-color: #b6ca2b;
}

    body.fp-viewing-hizmetler #mm-menu > ul > li.item-2.in-view > a,
    body.fp-viewing-hizmetler-tanitim #mm-menu > ul > li.item-2.in-view > a,
    body.fp-viewing-hizmetler-yazilim #mm-menu > ul > li.item-2.in-view > a,
    body.fp-viewing-hizmetler-donanim #mm-menu > ul > li.item-2.in-view > a,
    body.fp-viewing-hizmetler-danismanlik #mm-menu > ul > li.item-2.in-view > a,
    body.fp-viewing-hizmetler-internet #mm-menu > ul > li.item-2.in-view > a {
        color: #ffffff;
    }


body.fp-viewing-cozumler #mm-menu > ul > li.item-3.in-view,
body.fp-viewing-cozumler-tanitim #mm-menu > ul > li.item-3.in-view,
body.fp-viewing-cozumler-sektorler #mm-menu > ul > li.item-3.in-view {
    background-color: #a1497a;
}


    body.fp-viewing-cozumler #mm-menu > ul > li.item-3.in-view > a,
    body.fp-viewing-cozumler-tanitim #mm-menu > ul > li.item-3.in-view > a,
    body.fp-viewing-cozumler-sektorler #mm-menu > ul > li.item-3.in-view > a {
        color: #ffffff;
    }



body.fp-viewing-referanslar #mm-menu > ul > li.item-4.in-view,
body.fp-viewing-referanslar-tanitim #mm-menu > ul > li.item-4.in-view,
body.fp-viewing-referanslar-logolar #mm-menu > ul > li.item-4.in-view {
    background-color: #4c67c1;
}

    body.fp-viewing-referanslar #mm-menu > ul > li.item-4.in-view > a,
    body.fp-viewing-referanslar-tanitim #mm-menu > ul > li.item-4.in-view > a,
    body.fp-viewing-referanslar-logolar #mm-menu > ul > li.item-4.in-view > a {
        color: #ffffff;
    }


body.fp-viewing-iletisim #mm-menu > ul > li.item-6.in-view {
    background-color: #fe6200;
}

    body.fp-viewing-iletisim #mm-menu > ul > li.item-6.in-view > a {
        color: #ffffff;
    }

.menuActiveBlue {
    background-color: #69b9c0;
}

.menuActiveGreen {
    background-color: #b6ca2b;
}

.menuActivePurple {
    background-color: #a1497a;
}

.menuActiveDarkBlue {
    background-color: #4c67c1;
}

.menuActiveOrange {
    background-color: #fe6200;
}

    .menuActiveBlue > a,
    .menuActiveGreen > a,
    .menuActivePurple > a,
    .menuActiveDarkBlue > a,
    .menuActiveOrange > a {
        color: #fff;
    }

.scroll-wrapper {
    height: 100vh;
    min-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#contactForm .form-control {
    border-radius: 0;
}

#contactForm .mb-3:not(.widget-textarea) {
    margin-bottom: 0 !important
}

.btn {
    border-radius: 4px;
}

.form-control:focus {
    box-shadow: none;
}

/* orchard için styles overwrites*/

.section {
    min-height: 100svh;
    height: auto;
    overflow: clip; /* ya da visible; ihtiyaca göre */
}

@supports (height: 100dvh) {
    .section {
        min-height: 100dvh;
    }
}

@media (width <= 480px) {
    .section.hizmetler1.fp-section,
    .section.hizmetler2.fp-section,
    .section.hizmetler3.fp-section,
    .section.hizmetler4.fp-section {
        height: auto !important;
    }


    .container-fluid:has(.section-footer) {
        margin: 0;
        padding: 0;
    }
}


.fp-wrapper {
    height: 100%;
    position: relative;
    touch-action: none;
    transform: translate3d(0px, -12930px, 0px);
    transition: 200ms;
}



.is-hidden {
    display: none !important;
}

.is-visible {
    display: block !important;
}


.navbar-fixed-top {
    position: absolute;
    top: 0;
    border-width: 0;
    padding: 0;
    background-color: transparent;
    z-index: 555;
    width: 100%;
    padding: 25px;
}


/* =========================================
   1. CSS SCROLL SNAP KAPSAYICISI
   ========================================= */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden !important; /* Dışarıda scroll çıkmasını engeller */
}

.snap-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

    .snap-container .section {
        width: 100%;
        height: 100vh !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        position: relative;
        overflow: hidden;
        /* İçeriği dikey ortalamak için */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Arka plan geçişleri yumuşak olsun diye */
        transition: background-color 0.5s ease;
    }

/* =========================================
   2. DİNAMİK MENÜ VE TEMA YÖNETİMİ
   ========================================= */

/* Menü Linkleri - Rengini JS'den (CSS Variable) Alır */

li {
    padding: 0;
}

.navbar-fixed-top a {
    color: var(--nav-color, #2d3647);
    transition: color 0.3s ease, background-color 0.3s ease;
}

    .navbar-fixed-top a:hover {
        opacity: 0.8;
    }

.navbar-nav li > a {
    border-radius: 0;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: solid 1px #ddd;
}

    .navbar-nav li > a:hover {
        border-radius: 0;
        height: 50px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        border-bottom: solid 1px #ddd;
        color: var(--nav-active-bg, transparent)
    }



.navbar-nav li.active > a {
    background-color: var(--nav-active-bg, transparent);
    color: #ffffff !important;
    border-radius: 0;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}


.navbar-toggle .icon-bar {
    background-color: var(--nav-color, #2d3647);
    transition: background-color 0.3s ease;
}


li.nav-item {
    padding: 0;
}


#hakkimizda-tanitim {
    background: url('/media/Background/zen_taslari.jpg') no-repeat center bottom;
    background-size: cover;
}

#hizmetler-tanitim {
    background: url('/media/Background/saat.jpg') no-repeat center bottom;
    background-size: cover;
}

#cozumler-tanitim {
    background: url('/media/Background/go_taslari.jpg') no-repeat center bottom;
    background-size: cover;
}

#referanslar-tanitim {
    background: url('/media/Background/kum_tas.jpg') no-repeat center bottom;
    background-size: cover;
}

.row.tanitim {
    position: absolute;
    top: 20%;
    padding: 0 5%;
}

.navbar-toggler {
    border: 0;
}


.offcanvas-body {
    padding: 0;
}



.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px; /* Adjust height for desired spacing */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--nav-color, #2d3647); /* Rengi JS'in bastığı değişkenden alır */
    transition: background-color 0.3s ease;
    border-radius: 1px;
    transition: all 0.3s ease-in-out;
}

/* Add an active state class (requires JS toggle) to animate to an 'X' */
.hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.navbar-toggler:focus {
    box-shadow: none;
}


.left-content img {
    max-width: 610px;
}

#referanslar-logolar {
    padding: 0 10%;
}

.text-right {
    text-align: right;
}

a {
    text-decoration: none;
}


.section-footer a.nav-link {
    font-size: 14px;
}

form input {
    font-size: 0.875em;
    width: 90%;
    height: 50px;
    padding: 0px 15px 0px 15px;
    background: transparent;
    outline: none;
    color: #fff;
    border: solid 1px #fff;
    border-bottom: none;
    transition: all 0.3s ease-in-out;
}

.contactH2 {
    font-weight: 300;
    font-size: 45px;
    line-height: 55px;
    color: #fff;
    margin: 0 0 5px 0;
}


form input,
form textarea {
    width: 100%;
}




form > span.field-validation-error,
form > .field-validation-error {
    color: #000;
    margin-top: -40px;
    margin-right: 10%;
}


form .form-control {
    border-radius: 0;
}

form .mb-3:not(.widget-textarea) {
    margin-bottom: 0 !important
}


form input:hover {
    background: #b3aca7;
    color: #fff;
}



button.g-recaptcha, button#btnSend-referans {
    background-color: #212529;
    width: 150px;
    float: left;
    padding: 10px 0;
    margin: 15px 0 0 0;
    font-size: .875em;
    color: #fff;
    outline: none;
    cursor: pointer;
    border: solid 1px #fff;
}

    button.g-recaptcha:hover, button#btnSend-referans:hover {
        background-color: #212529;
        width: 150px;
        float: left;
        padding: 10px 0;
        margin: 15px 0 0 0;
        font-size: .875em;
        color: #fff;
        outline: none;
        cursor: pointer;
        border: solid 1px #fff;
    }


.alert-dismissible {
    padding-right: 3rem;
    position: absolute;
    z-index: 25000;
    width: 97vw;
    margin: 1vw;
}

.modal-header {
    justify-content: space-between;
}


.grecaptcha-badge {
    z-index: 234;
    opacity: .5;
}

.lang a {
    color: var(--nav-color);
}


/* Mobil Görünüm (Navbar Collapse) Ayarları */
@media (max-width: 991.98px) {
    /* Navbar zeminini her zaman beyaz yap */
    .navbar.fixed-top {
        background-color: #ffffff !important;
    }

    /* Hamburger ikonunun çerçevesini (opsiyonel) gizle veya rengini ayarla */
    .navbar-toggler {
        border-color: transparent !important;
    }

    /* Hamburger ikonunu koyu gri (#333) renge sabitle */

    .bar {

        background-color: #333; /* Rengi JS'in bastığı değişkenden alır */

    }

    nav.navbar.fixed-top > .container-fluid {
        margin: 10px !important;
    }


    h1 {
        height: 80vh;
    }

    .left-content img {
        max-width: 100%;
    }


    .section-footer {
        padding: 10px;
        text-align: left !important;
    }

        .section-footer .text-right
        {

            text-align: left;
        }

        .section-footer ul
        {
            display: none;
        }


    #hakkimizda-tanitim,
    #hizmetler-tanitim,
    #cozumler-tanitim,
    #referanslar-tanitim {
        background-size: auto;
    }


    .lang a {
        color: white;
    }
}

.lang {
    position: absolute;
    top: 10px;
    right: 55px;


}