/* 
Theme Name: Milas Yapı 2026
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: milas-yapi-2026
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
:root {
  --acik1: #F4F2EB;
  --acik2: #D8CFB0;
  --koyu1: #231F20;
  --koyu2: #54595F;
  --text: #231F20;
  --hover: #6D5B1B;
}
.bg-noise {
    position: fixed;
    display: block;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    width: 100vw;
    height: 100vh
}

.bg-noise::before {
    position: absolute;
    content: "";
    top: -10rem;
    left: -10rem;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    z-index: 0;
    pointer-events: none;
    background-image: url(img/bg-noise.png);
    background-position: 50% center;
    background-repeat: repeat;
    animation: 1s steps(2) 0s infinite normal none running BgNoise
}

@keyframes
BgNoise {
    0% {
        transform: translate3d(0, 9rem, 0)
    }

    10% {
        transform: translate3d(-1rem, -4rem, 0)
    }

    20% {
        transform: translate3d(-8rem, 2rem, 0)
    }

    30% {
        transform: translate3d(9rem, -9rem, 0)
    }

    40% {
        transform: translate3d(-2rem, 7rem, 0)
    }

    50% {
        transform: translate3d(-9rem, -4rem, 0)
    }

    60% {
        transform: translate3d(2rem, 6rem, 0)
    }

    70% {
        transform: translate3d(7rem, -8rem, 0)
    }

    80% {
        transform: translate3d(-9rem, 1rem, 0)
    }

    90% {
        transform: translate3d(6rem, -5rem, 0)
    }

    to {
        transform: translate3d(-7rem, 0, 0)
    }

}

.sticky-header {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: all 0.3s !important;
    width: 100% !important
}

.sticky-header.elementor-sticky--effects {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    background-color: #F4F2EB;
    border-bottom: 1px solid #c7c1ac;
    -moz-box-shadow: 0 3px 5px rgba(182, 182, 182, 0.75);
    -webkit-box-shadow: 0 3px 5px rgba(182, 182, 182, 0.75);
    box-shadow: 0 3px 5px rgba(182, 182, 182, 0.75)
}
.hamburger.is-active .sticky-header.elementor-sticky--effects svg g {
    fill: black;

}
.hamburger.is-active .hamburger-inner::after {
   background-color: #313131; /* Color of the lines after the icon is active */
}
.sticky-header.elementor-sticky--effects svg {
        -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    transition: transform 0.3s ease-in;
}
.sticky-header.elementor-sticky--effects .elementor-nav-menu li a {
    color: var(--koyu1) !important;
}

.sticky-header.elementor-sticky--effects .elementor-nav-menu li a:hover  {
    color: var(--hover) !important;
}
.sticky-header.elementor-sticky--effects .elementor-nav-menu li a.active  {
    color: var(--hover) !important;
}
.sticky-header.elementor-sticky--effects .elementor-nav-menu li span.sub-arrow {
    fill:black !important;
}
.sticky-header.elementor-sticky--effects svg#logo g {
    fill:black !important;
}

.sticky-header.elementor-sticky--effects .hamburger-inner,
.sticky-header.elementor-sticky--effects .hamburger-inner::before,
.sticky-header.elementor-sticky--effects .hamburger-inner::after {
   background-color: #313131;
}

.preloader {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #F4F2EB;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F4F2EB;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;

}

.logo-stack {
    position: relative;
    width: 400px;
    height: 250px
}

.logo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.static-text {
    background-image: url('img/milas-yazi.svg');
    opacity: 1
}

.animated-brush {
    background-color: #000;
    -webkit-mask-image: url('img/milas-firca.svg');
    mask-image: url('img/milas-firca.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-position: center
}

.animated-brush::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F4F2EB;
    animation: fircaCizimi 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.1s
}

@keyframes fircaCizimi {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(100%)
    }

}

.loader-hidden {
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none
}

ul.elementor-nav-menu li.menu-item a.elementor-item:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease
}

ul.elementor-nav-menu li.menu-item a.elementor-item.elementor-item-active {
    filter: brightness(0.8) !important
}

nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    overflow: hidden !important
}