header {
    position        : absolute;
    width           : 100%;
    background-color: rgba($color: #000000, $alpha: 0);
    z-index         : 9;
    border          : 2px solid rgba($color:#ffffff, $alpha: 0.17);
    border-left     : none;
    border-right    : none;
    top             : 25px;
    left            : 0;
    right           : 0;
    height          : 75px;

    .header {
        display        : flex;
        justify-content: space-between;
        height         : 75px;
        display        : flex;
        align-items    : center;

        .siteLogo {
            transition: all .3s ease-in-out;

            img {
                &.fixed {
                    display: none;
                }
            }

            &:hover {
                opacity: 0.8;
            }
        }

        .otherColumn {
            display        : flex;
            align-items    : flex-start;
            justify-content: space-between;
            flex           : 1;
            height         : 100%;
            max-width      : calc(100% - 478px);
            position       : relative;

            &>div {
                border-right   : 2px solid rgba($color:#ffffff, $alpha: 0.17);
                display        : flex;
                align-items    : center;
                height         : 71px;
                justify-content: center;
                flex           : 1;

                &.userArea {
                    max-width: 68px;
                }

                &.menuArea {
                    max-width: 68px;
                }
            }

            .photoSendArea {
                border-left: 2px solid rgba($color:#ffffff, $alpha: 0.17);
            }

            &>a {
                height     : 100%;
                display    : flex;
                align-items: center;
                transition : all .3s ease-in-out;
                padding    : 0 15px;

                &:hover {
                    opacity: 0.8;
                }
            }

            .headerLink {
                opacity        : 0.53;
                display        : flex;
                align-items    : center;
                justify-content: center;
                transition     : all .3s ease-in-out;
                width          : 100%;
                position       : relative;
                height         : 100%;

                &:after {
                    content         : "";
                    width           : 0;
                    height          : 5px;
                    position        : absolute;
                    bottom          : -2px;
                    left            : 0;
                    right           : 0;
                    transition      : all .3s linear;
                    background-color: customColor(secondary);
                }

                &:hover {
                    &:after {
                        width: 100%;
                    }
                }

                span {
                    font-family : 'GilroyBold';
                    font-size   : 1.259rem;
                    color       : #ffffff;
                    transition  : all .3s ease-in-out;
                    padding-left: 10px;
                }

                &:hover {
                    opacity: 1;
                }
            }
        }
    }

    .icon-photo-gallery {
        font-size: 24px;
    }

    .icon-plus-circle {
        font-size: 23px;
    }

    .customIcon {
        color: #ffffff;
    }

    //Header Fixed
    &.fixed {
        position        : fixed;
        top             : 0;
        left            : 0;
        right           : 0;
        background-color: #ffffff;
        box-shadow      : -1px 10px 32px 0px rgba(0, 0, 0, 0.6);

        .header {
            .siteLogo {
                img {
                    display: none;

                    &.fixed {
                        display: block;
                    }
                }
            }
        }

        .photoSendArea {
            .photoSendButton {
                span {
                    color: customColor(primary);
                }
            }
        }

        .agencyAlbumArea {
            .albumButtonArea {
                span {
                    color: customColor(primary);
                }
            }
        }

        .customIcon {
            color: customColor(primary);

            &.icon-facebook {
                color: #ffffff;
            }
        }

        .userArea {
            .userButton {
                img {
                    filter: none;
                }
            }
        }

        .menuArea {
            .menuButton {
                span {
                    background-color: customColor(primary);

                    &:before,
                    &:after {
                        background-color: customColor(primary);
                    }
                }
            }
        }

        .otherColumn {
            &>div {
                border-right: 2px solid rgba($color:#0b0b0b, $alpha: 0.17);
            }

            &>a {
                img {
                    filter    : invert(1);
                    opacity   : 0.53;
                    transition: all .3s ease-in-out;
                }

                &:hover {
                    img {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

.menuPopup {
    opacity    : 0;
    height     : 0;
    visibility : hidden;
    overflow   : hidden;
    z-index    : -999;
    transition : all .3s linear;
    position   : absolute;
    padding-top: 2px;
    width      : 100%;
    right      : 0;
    top        : 100%;
    box-shadow : -1px 10px 32px 0px rgba(0, 0, 0,  0.06);

    .popupContent {
        background-color: #ffffff;
        width           : 100%;
        height          : auto;
        padding         : 30px 40px;
    }
}

/*Header User*/
.userArea {
    position: relative;

    &:hover {
        .menuPopup {
            opacity    : 1;
            height     : auto;
            visibility : visible;
            overflow   : visible;
            z-index    : 999;
            left       : 50%;
            margin-left: -147px;
        }
    }

    .userFormArea {
        width: 294px;

        .head {
            text-align: center;

            .title {
                font-family: 'GilroyExtraBold';
                font-size  : 24.84px;
                color      : #171717;
            }
        }
    }

    .userButton {
        .customIcon {
            font-size: 24px;
        }

        img {
            filter    : invert(1);
            opacity   : 0.53;
            transition: all .3s ease-in-out;
        }

        &:hover {
            img {
                opacity: 1;
            }
        }
    }
}

/*Header Site Menu*/
.menuArea {
    .menuButton {
        span {
            height          : 18px;
            display         : block;
            width           : 30px;
            position        : relative;
            background-color: #ffffff;
            height          : 2px;

            &:before,
            &:after {
                content         : "";
                width           : 100%;
                height          : 2px;
                background-color: #ffffff;
                right           : 0;
                position        : absolute;
                display         : block;
            }

            &:before {
                top : -7px;
                left: 0;
            }

            &:after {
                bottom: -7px;
                width : 21px;
            }
        }

        &:hover {
            opacity: 1;
        }
    }

    //Header Acılır Menü
    .menuPopup {
        .menuListArea {
            display        : flex;
            align-items    : flex-start;
            flex           : 1;
            justify-content: space-between;

            .menuItem {
                a {
                    font-family   : 'GilroyBlack';
                    font-size     : 1.325rem;
                    color         : #171717;
                    display       : block;
                    padding-bottom: 14px;
                    transition    : all 3s ease-in-out;

                    &:hover {
                        color: customColor(secondary);

                        span {
                            color: customColor(secondary);
                        }
                    }

                    span {
                        font-family: 'GilroyBlack';
                        font-size  : 1.325rem;
                        color      : #171717;
                    }
                }

                .subMenuList {
                    .menuItem {
                        a {
                            font-family: 'GilroyBold';
                            font-size  : 1.155rem;
                            display    : block;
                            padding    : 6px 0;

                            span {
                                font-family: 'GilroyBold';
                                font-size  : 1.155rem;
                            }
                        }
                    }
                }
            }

        }
    }

    &:hover {
        .menuPopup {
            opacity   : 1;
            visibility: visible;
            overflow  : visible;
            height    : auto;
        }
    }
}

.mobileMenuButton {
    display: none;

    span {
        height          : 18px;
        display         : block;
        width           : 30px;
        position        : relative;
        background-color: #ffffff;
        height          : 2px;
        transition      : all .3s linear;
        top             : 50%;
        margin-top      : -1px;

        &:before,
        &:after {
            content         : "";
            width           : 100%;
            height          : 2px;
            background-color: #ffffff;
            right           : 0;
            position        : absolute;
            display         : block;
            transition      : all .3s linear;
        }

        &:before {
            top : -7px;
            left: 0;
        }

        &:after {
            bottom: -7px;
            width : 21px;
        }
    }

    &:hover {
        opacity: 1;
    }
}

/*Alt Sayfalar Header*/
.subMainBody {
    header {
        box-shadow      : -1px 10px 32px 0px rgba(0, 0, 0, 0.06);
        top             : 0;
        background-color: #ffffff;
        height          : 94px;

        &>div {
            &.container {
                height: 100%;
            }
        }

        .header {
            height: 100%;

            .siteLogo {
                img {
                    display: none;

                    &.fixed {
                        display: block;
                    }
                }
            }
        }

        .photoSendArea {
            .photoSendButton {
                span {
                    color: customColor(primary);
                }
            }
        }

        .agencyAlbumArea {
            .albumButtonArea {
                span {
                    color: customColor(primary);
                }
            }
        }

        .customIcon {
            color: customColor(primary);

            &.icon-facebook {
                color: #ffffff;
            }
        }

        .userArea {
            .userButton {
                img {
                    filter: none;
                }
            }
        }

        .menuArea {
            .menuButton {
                span {
                    background-color: customColor(primary);

                    &:before,
                    &:after {
                        background-color: customColor(primary);
                    }
                }
            }
        }

        .otherColumn {
            &>div {
                border-right: 2px solid rgba($color:#0b0b0b, $alpha: 0.17);
                height      : calc(100% + 4px);
                margin-top  : -2px;
            }

            &>a {
                img {
                    filter    : invert(1);
                    opacity   : 0.53;
                    transition: all .3s ease-in-out;
                }

                &:hover {
                    img {
                        opacity: 1;
                    }
                }
            }
        }
    }
}

@media screen and(max-width:1024px) {
    header {
        .header {
            .otherColumn {
                max-width: calc(100% - 220px);
            }

            .siteLogo {
                img {
                    width: 200px;
                }
            }
        }

        &.fixed {
            .header {
                .siteLogo {
                    img {
                        &.fixed {
                            width: 200px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and(max-width:768px) {
    .mobileMenuButton {
        display: block;
        z-index: 999;
        height : 24px;
        width  : 30px;

        &.active {
            span {
                background-color: rgba(0, 0, 0, 0);

                &:before {
                    transform       : rotate(45deg);
                    top             : 0;
                    background-color: customColor(dark_primary);
                }

                &:after {
                    background-color: customColor(dark_primary);
                    transform       : rotate(-45deg);
                    bottom          : 0;
                    top             : 0;
                    width           : 100%;
                }
            }
        }
    }

    .subMainBody {
        .mobileMenuButton {
            &.active {
                span {
                    background-color: rgba(0, 0, 0, 0);

                    &:before {
                        transform: rotate(45deg);
                        top      : 0;
                    }

                    &:after {
                        transform: rotate(-45deg);
                        bottom   : 0;
                        top      : 0;
                        width    : 100%;
                    }
                }
            }

            span {
                background-color: customColor(dark_primary);

                &:before {
                    background-color: customColor(dark_primary);
                }

                &:after {
                    background-color: customColor(dark_primary);
                }
            }
        }
    }

    .menuPopup {
        box-shadow: none;
    }


    header {
        border: none;

        .header {
            .otherColumn {
                position        : fixed;
                background-color: #ffffff;
                width           : 100%;
                height          : 100%;
                left            : 0;
                max-width       : 100%;
                bottom          : 0;
                display         : block;
                padding-right   : 0;
                text-align      : right;
                visibility      : hidden;
                overflow        : hidden;
                opacity         : 0;
                right           : -100%;
                transition      : all .5s linear;
                padding-top     : 90px;

                &.active {
                    right     : 0;
                    visibility: visible;
                    overflow  : visible;
                    opacity   : 1;

                    .menuArea {
                        .menuPopup {
                            display: block;
                        }
                    }
                }

                &>a {
                    display   : block;
                    height    : auto;
                    margin    : 9px 0;
                    text-align: center;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    margin: 40px auto 0 auto;

                    img {
                        filter: invert(1) opacity(0.5);
                    }
                }

                .photoSendArea {
                    border-left: none;
                }

                &>div {
                    border-right: none;
                    display     : block;
                    height      : 45px;
                    margin      : 5px auto;
                    text-align  : center;

                    &.userArea {
                        max-width: initial;
                    }

                    &.menuArea {
                        height: 0;
                        margin: 0;
                    }
                }

                .customIcon {
                    color: customColor(dark_primary);
                }

                .headerLink {
                    border         : 1px solid rgba(31, 29, 29, 0.53);
                    display        : inline-flex;
                    width          : 80%;
                    align-items    : center;
                    justify-content: center;
                    padding-left   : 20px;
                    position       : relative;

                    .customIcon {
                        position: absolute;
                        left    : 20px;
                    }

                    &:hover {
                        &:after {
                            display: none;
                        }
                    }

                    &.active {
                        border                 : 1px solid rgba(31, 29, 29, 1);
                        opacity                : 1;
                        // &:before {
                        //     content         : "";
                        //     bottom          : 10px;
                        //     width           : 100%;
                        //     height          : 5px;
                        //     position        : absolute;
                        //     left            : 0;
                        //     right           : 0;
                        //     transition      : all .3s linear;
                        //     background-color: customColor(secondary);
                        // }
                    }

                    &.menuButton {
                        display: none;
                    }

                    span {
                        color: customColor(dark_primary);
                    }

                    &.userButton {
                        &:before {
                            content    : "Giriş Yap";
                            font-family: 'GilroyBold';
                            font-size  : 1.259rem;
                            transition : all .3s ease-in-out;
                            color      : #1f1d1d;
                        }
                    }
                }

                .facebookLoginButton {
                    .customIcon {
                        color: #ffffff;
                    }
                }

            }
        }

        &.fixed {
            .mobileMenuButton {
                &.active {
                    span {
                        background-color: rgba(0, 0, 0, 0);

                        &:before {
                            transform: rotate(45deg);
                            top      : 0;
                        }

                        &:after {
                            transform: rotate(-45deg);
                            bottom   : 0;
                            top      : 0;
                            width    : 100%;
                        }
                    }
                }

                span {
                    background-color: customColor(dark_primary);

                    &:before {
                        background-color: customColor(dark_primary);
                    }

                    &:after {
                        background-color: customColor(dark_primary);
                    }
                }
            }
        }
    }

    .userArea {
        .userButton {
            img {
                filter: none;
            }
        }

        &:hover {
            .menuPopup {
                right      : 0;
                width      : 100%;
                left       : 0;
                position   : fixed;
                top        : 240px;
                margin-left: 0;
            }
        }

        .menuPopup {
            opacity   : 1;
            visibility: visible;
            overflow  : visible;
            display   : none;
            overflow  : scroll;
            overflow-x: hidden;
            height    : calc(100% - 240px);
            z-index   : -9999;
            top       : 70px;

            &:hover,
            &.active {
                opacity   : 1;
                visibility: visible;
                overflow  : visible;
                overflow  : scroll;
                overflow-x: hidden;
                display   : block;
                height    : calc(100% - 240px);
                z-index   : 999999;
                min-height: 274px;
                width     : 100%;
            }
        }
    }

    .menuArea {
        .menuButton {
            display: none;

            span {
                background-color: customColor(dark_primary);

                &:before,
                &:after {
                    background-color: customColor(dark_primary);
                }
            }
        }

        .menuPopup {
            opacity   : 1;
            visibility: visible;
            top       : 240px;
            height    : calc(100% - 250px);
            overflow  : visible;
            overflow-x: hidden;
            display   : none;


            .menuListArea {
                display         : block;
                text-align      : center;
                width           : 100%;
                background-color: rgba(0, 0, 0, 0);
                overflow        : scroll;
                overflow-x      : hidden;
                height          : 100%;
                padding-top     : 0;

                &>.menuItem {
                    &>a {
                        padding-bottom: 10px;
                        padding-top   : 20px;
                    }
                }
            }
        }
    }
}