/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
  [CSS Index]
  
  ---
  
  Template Name: Sirex - Creative Coming Soon Template
  Author:  ex-nihilo
  Version: 1.0
*/


/*
  1. TEMPLATE BACKGROUNDS
    1.1. section image IMG BACKGROUND, slick fullscreen slideshow and ZOOM/FADE IMG BACKGROUND
	1.2. section video IMG BACKGROUND
	1.3. works IMG gallery carousel IMG BACKGROUND
  2. reset
  3. layout
  4. section
  5. hero
  6. home section
    6.1. logo
    6.2. bottom credits
    6.3. social icons
  7. subheaders
  8. overlay
  9. center container
  10. link effect
  11. countdown
  12. preloader
  13. Slick v1.6.0 CUSTOM
    13.1. slick fullscreen slider
    13.2. slick fullscreen slideshow ZOOM/FADE transition
  14. fullPage v2.9.4 CUSTOM
  15. skills
  16. section image
  17. hero wrapper
  18. element rotation
  19. custom cursor
  20. the button
  21. contact form
  22. newsletter form
    22.1. newsletter modal
  23. YouTube video
  24. scroll indicator
  25. borders
  26. navigation
  27. flying birds
  28. vertical lines
  29. stars
  30. works section
  31. Owl Carousel v2.2.0 CUSTOM
  32. Magnific Popup v1.1.0 CUSTOM
  33. Lity v2.2.2 CUSTOM
  34. divider
*/


/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. section image IMG BACKGROUND, slick fullscreen slideshow and ZOOM/FADE IMG BACKGROUND */
.section1 .section-image-bg,
.bg-img-1 {
background-image: url(../img/background/hero-bg-1.jpg);
}

.section2 .section-image-bg,
.bg-img-2 {
background-image: url(../img/background/hero-bg-2.jpg);
}

.section3 .section-image-bg {
background-image: url(../img/background/hero-bg-3.jpg);
}

.section4 .section-image-bg,
.bg-img-3 {
background-image: url(../img/background/hero-bg-4.jpg);
}

.section5 .section-image-bg,
.bg-img-4 {
background-image: url(../img/background/hero-bg-5.jpg);
}


/* 1.2. section video IMG BACKGROUND */
.section1 .section-image-bg-video {
background-image: url(../img/background/video-BG.jpg);
display: none;
z-index: 10;
}

@media only screen and (max-width: 995px) {
  .section1 .section-image-bg-video {
    /* uncomment the following to show an image for mobile devices */
    /* display: block; */
  }
}


/* 1.3. works IMG gallery carousel IMG BACKGROUND */
.works-page-carousel-item-1 {	
background-image: url(../img/works/works-page-img-carousel-item-1.jpg);
}

.works-page-carousel-item-2 {
background-image: url(../img/works/works-page-img-carousel-item-2.jpg);
}

.works-page-carousel-item-3 {
background-image: url(../img/works/works-page-img-carousel-item-3.jpg);
}

.works-page-carousel-item-4 {
background-image: url(../img/works/works-page-img-carousel-item-4.jpg);
}

/* 5 Kişilik - Compact Düzen (Tam Ekrana Sığması İçin) */
    .team-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 25px; /* Yan yana boşluklar biraz kısıldı */
        width: 100%;
        margin-bottom: 25px; /* Satırlar arası dikey boşluk azaltıldı */
    }

    .team-member {
        /* Kart genişliği 260px'ten 200px'e düşürüldü.
           Otomatik olarak yükseklik de azalmış oldu (250px civarı olur). */
        -webkit-box-flex: 0;
            -ms-flex: 0 1 210px;
                flex: 0 1 210px; 
        text-align: center;
        margin-bottom: 5px; 
    }

    .team-avatar {
        width: 100%;
        aspect-ratio: 4 / 5; /* Oran sabit (Dikey) */
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center top;
           object-position: center top;
        border-radius: 12px; /* Boyut küçüldüğü için ovallik de hafif kısıldı */
        border: 1px solid rgba(255, 255, 255, 0.1);
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease; /* Animasyon süresi biraz hızlandı */
        -webkit-filter: grayscale(100%) contrast(110%);
                filter: grayscale(100%) contrast(110%);
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.3);
                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        cursor: pointer;
    }

    /* Hover Efektleri */
    .team-member:hover .team-avatar {
        -webkit-filter: grayscale(0%) contrast(100%);
                filter: grayscale(0%) contrast(100%);
        -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
                transform: translateY(-5px); /* Çok yukarı zıplamasın, yer kaplamasın */
        -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.5);
                box-shadow: 0 15px 30px rgba(0,0,0,0.5);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .team-name {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        /* Görsel küçüldüğü için puntoyu bir tık kıstık */
        font-size: 16px; 
        margin-top: 15px;
        margin-bottom: 3px;
        color: #fff;
        letter-spacing: 0.5px;
    }

    .team-title {
        font-family: 'Raleway', sans-serif;
        font-size: 12px; /* Unvan puntosu dengelendi */
        letter-spacing: 1.5px;
        opacity: 0.7;
        text-transform: uppercase;
        font-weight: 500;
    }

/* 2. reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
}

html, body {
height: 100%;
line-height: 170%;
}

body {
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
content: "";
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

*:focus {  
outline: none;
}

/* remove dotted outline from links,
button and input element */
a:focus,
a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline: 0;
}

/* IE10 scrollbar FIX */
html {
-ms-overflow-style: scrollbar;
}


/* 3. layout */
body {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
text-align: center;
color: #fff;
background: #14171b;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
line-height: 1.5;
cursor: none;
}

a {
color: #fff;
text-decoration: none;
outline: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
cursor: none;
}

a:hover,
a:visited,
a:active,
a:focus {
color: #fff;
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
cursor: none;
}

p {
text-align: center;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.05em;
color: #fff;
line-height: 2;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
cursor: none;
}

p a,
p a:hover {
color: #fff;
text-decoration: none;
font-weight: 400;
outline: none;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
cursor: none;
}

strong {
font-weight: bold;
}

::-moz-selection {
background: #14171b;
color: #fff;
}

::selection {
background: #14171b;
color: #fff;
}

.nopadding {
padding: 0!important;
margin: 0!important;
}


/* 4. section */
.section,
.section.section-all {
overflow: hidden;
}


/* 5. hero */
.hero-fullscreen {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 0;
}

.hero-bg {
position: relative;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-ms-background-size: cover;
    background-size: cover;
-webkit-transition: -webkit-transform 2s ease;
     -o-transition: -o-transform 2s ease-out;
        transition: -webkit-transform 2s ease;
        -o-transition: transform 2s ease;
        transition: transform 2s ease;
        transition: transform 2s ease, -webkit-transform 2s ease;
-webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
        transform: scale(1.8);
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.hero-bg-show {
-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.hero-fullscreen-FIX {
width: 100%;
height: 100%;
}


/* 6. home section */
/* 6.1. logo */
.logo {
position: absolute;
display: inline-block;
top: 40px;
left: 50px;
line-height: 0;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
     -o-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 200;
}

@media only screen and (max-width: 995px) {
  .logo {
    position: absolute;
  }
}

@media only screen and (max-width: 768px) {
  .logo {
    top: 20px;
    left: 25px;
  }
}

.logo-img::before {
content: "";
background: url(../img/logo.png) no-repeat;
display: block;

}


/* 6.2. bottom credits */
.bottom-credits {
position: absolute;
display: block;
width: auto;
height: auto;
bottom: 46px;
color: #fff;
font-size: 9px;
text-transform: uppercase;
text-align: right;
letter-spacing: 0.05em;
font-weight: 600;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
z-index: 1002;
text-align: center;
width: 100%;
}
.btm-tx{
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .bottom-credits {
    display: none;
	visibility: hidden;
  }
}

.bottom-credits a,
.bottom-credits a:hover {
color: #fff;
text-decoration: none;
}


/* 6.3. social icons */
.social-icons-wrapper {
position: absolute;
right: 51px;
bottom: 48px;
text-align: right;
z-index: 1002;
}

@media only screen and (max-width: 768px) {
  .social-icons-wrapper {
    right: 26px;
    bottom: 24px;
  }
}

.social-icons-wrapper ul {
margin: 0 auto;
padding: 0;
list-style-type: none;
}

.social-icons-wrapper ul li {
display: inline-block;
margin: 0 auto;
padding: 0 0 0 5px;
}

ul.social-icons {
position: relative;
font-size: 16px;
line-height: 1;
margin: 0;
padding: 0;
}

@media only screen and (max-width: 640px) {
  ul.social-icons {
    font-size: 14px;
  }
}

ul.social-icons a,
ul.social-icons a:hover {
padding: 0;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

ul.social-icons a {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.social-icons a:hover {
        opacity: 0.5;
   -moz-opacity: 0.5;
-webkit-opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


/* 7. subheaders */
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: -0.02em;
margin: -4px auto 0 auto;
padding: 0;
line-height: 1.25;
color: #fff;
}

@media all and (min-width: 1920px) {
  h3 {
    margin: -7px auto 0 auto;
	line-height: 1.5;
  }
}


/* 8. overlay */
.overlay::before,
.overlay-video::before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}

.overlay::before {
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}

.overlay-video::before {
-webkit-pointer-events: auto;
   -moz-pointer-events: auto;
        pointer-events: auto;
}

.overlay-dark::before {
background: rgba(0, 0, 0, .45);
}


/* 9. center container */
.center-container {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: none;
text-align: center;
z-index: 10;
}

.center-block {
display: table-cell;
vertical-align: middle;
}


/* 10. link effect */
.link-effect a {
position: relative;
display: inline-block;
text-decoration: none;
color: inherit;
}

.link-effect a::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 1px;
left: 0;
bottom: 0;
padding: 0;
background-color: #fff;
-webkit-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-effect a:hover::after {
-webkit-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
-webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
        transform: scale(0, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* 11. countdown */
.countdown {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
z-index: 10;
}


/* 12. preloader */
.preloader-bg {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #14171b;
z-index: 999999;
}

#preloader {
position: fixed;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #14171b;
z-index: 999999;
}

#preloader-status {
display: table-cell;
vertical-align: middle;
}

.preloader-position {
position: relative;
margin: 0 auto;
text-align: center;
-webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

.loader {
position: relative;
width: 45px;
height: 45px;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: 2px;
-webkit-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
border: 3px solid rgba(255, 255, 255, .15);
border-radius: 50%;
}

.loader span {
position: absolute;
width: 45px;
height: 45px;
top: -3px;
left: -3px;
border: 3px solid transparent;
border-top: 3px solid rgba(255, 255, 255, .75);
border-radius: 50%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


/* 13. Slick v1.6.0 CUSTOM */
.slick-slide {
height: 100vh;
background: none;
}
		
.slick-slider {
margin-bottom: 0;
margin-top: 0;
cursor: auto;
}

.slick-track,
.slick-list {
-webkit-perspective: 2000;
        perspective: 2000;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}


/* 13.1. slick fullscreen slider */
.slick-fullscreen-img-fill {
position: relative;
display: block;
width: 100%;
overflow: hidden;
text-align: center;
}

.slick-fullscreen-img-fill img {
position: relative;
display: inline-block;
min-width: 100%;
max-width: none;
min-height: 100%;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .slick-fullscreen-img-fill {
height: 100vh;
background: none;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img {
position: relative;
width: auto;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-ms-background-size: cover;
    background-size: cover;
}

.slick-fullscreen .slick-dots,
.slick-fullscreen-slideshow-zoom-fade .slick-dots {
position: absolute;
width: 100%;
height: 5px;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
background: rgba(255, 255, 255, .25);
list-style-type: none;
}

.slick-fullscreen .slick-dots li button,
.slick-fullscreen-slideshow-zoom-fade .slick-dots li button {
display: none;
}

.slick-fullscreen .slick-dots li,
.slick-fullscreen-slideshow-zoom-fade .slick-dots li {
position: absolute;
float: left;
width: 0;
height: 5px;
left: -5px;
background: #fff;
}

.slick-fullscreen .slick-dots li.slick-active,
.slick-fullscreen-slideshow-zoom-fade .slick-dots li.slick-active {
width: 100%;
-webkit-animation: progressDots 4s both;
        animation: progressDots 4s both;
}

@-webkit-keyframes progressDots {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes progressDots {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.slick-fullscreen,
.slick-fullscreen-slideshow-zoom-fade {
background: none;
}

.slick-fullscreen .slick-slide,
.slick-fullscreen-slideshow-zoom-fade .slick-slide {
display: none;
float: left;
height: 100%;
}

.slick-initialized .slick-slide {
display: block;
}


/* 13.2. slick fullscreen slideshow ZOOM/FADE transition */
.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item .bg-img {
-webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
     -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
        transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
        transform: scale(1.3);
}

.slick-fullscreen-slideshow-zoom-fade .slick-fullscreen-item.slick-active .bg-img {
-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
}


/* 14. fullPage v2.9.4 CUSTOM */
@media only screen and (max-width: 1024px) {
  #fullpage {
    overflow-x: hidden;
  }
}

#fp-nav.right,
#fp-nav.left {
z-index: -1!important;
display: none;
visibility: hidden;
}


/* 15. skills */
.skills-wrapper {
margin: 60px auto;
}

.skills {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin: 0 auto;
text-align: center;
}

.skills canvas {
position: absolute;
top: 0;
left: 0;
}

.percent {
display: inline-block;
line-height: 110px;
color: #fff;
z-index: 2;
}

.percent::after {
content: "%";
margin-left: 0.1em;
font-size: .8em;
color: #fff;
}


/* 16. section image */
.section-image-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}

.section-image,
.slick-fullscreen-slideshow-zoom-fade {
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-ms-background-size: cover;
    background-size: cover; 
-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
-webkit-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
        opacity: .7;
   -moz-opacity: .7;
-webkit-opacity: .7;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
overflow: hidden;
}

.section-image-bg,
.section-image-bg-video,
.slick-fullscreen-slideshow-zoom-fade {
left: 0;
-webkit-transform: scale(.8);
    -ms-transform: scale(.8);
        transform: scale(.8);
}

@media only screen and (max-width: 1024px) {
  .section-image-bg,
  .section-image-bg-video,
  .slick-fullscreen-slideshow-zoom-fade {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}

.section.active .section-image-bg,
.section.active .section-image-bg-video,
.section.active .slick-fullscreen-slideshow-zoom-fade {
-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
-webkit-transition-delay: .4s;
     -o-transition-delay: .4s;
        transition-delay: .4s;
}

.section1,
.section2,
.section3,
.section4 {
background: #14171b;
}


/* 17. hero wrapper */
.hero-wrapper,
.hero-wrapper-all {
margin: 0 auto;
text-align: center;
}

h1#wordrotator {
position: relative;
margin: 0 auto -7px auto;
}

@media all and (min-width: 1920px) {
  h1#wordrotator {
	margin: 0 auto -9px auto;
  }
}

@media only screen and (max-width: 1024px) {
  h1#wordrotator {
	margin: 0 auto -6px auto;
  }
}

@media only screen and (max-width: 995px) {
  h1#wordrotator {
	margin: 0 auto -5px auto;
  }
}

h1 {
font-family: 'Montserrat', sans-serif;
font-size: 80px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
color: #fff;
margin: -7px auto;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px #111;
}

@media all and (min-width: 1920px) {
  h1 {
    font-size: 90px;
	margin: -9px auto;
  }
}

@media only screen and (max-width: 1024px) {
  h1 {
    font-size: 70px;
	margin: -6px auto;
  }
}

@media only screen and (max-width: 995px) {
  h1 {
    font-size: 60px;
	margin: -5px auto;
  }
}

@media only screen and (max-width: 640px) {
  h1 {
    font-size: 50px;
	margin: -4px auto;
  }
}

.highlighter {
color: #bc002d;
}

h1.newsletter-title {
font-size: 60px;
margin: -5px auto;
}

@media only screen and (max-width: 995px) {
  h1.newsletter-title {
    font-size: 50px;
	margin: -4px auto;
  }
}

@media only screen and (max-width: 640px) {
  h1.newsletter-title {
    font-size: 35px;
	margin: -3px auto;
  }
}

.countdown h1 {
font-size: 80px; font-size: 160px;
margin: -7px auto; margin: -17px auto;
}

@media all and (min-width: 1920px) {
  .countdown h1 {
    font-size: 90px; font-size: 180px;
	margin: -9px auto; margin: -21px auto;
  }
}

@media only screen and (max-width: 1024px) {
  .countdown h1 {
    font-size: 70px;
	margin: -6px auto;
  }
}

@media only screen and (max-width: 995px) {
  .countdown h1 {
    font-size: 60px;
	margin: -5px auto;
  }
}

@media only screen and (max-width: 640px) {
  .countdown h1 {
    font-size: 50px;
	margin: -4px auto;
  }
}

.hero-subtitle {
position: relative;
display: inline-block;
font-family: 'Raleway', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
bottom: -5px;
}

@media only screen and (max-width: 768px) {
  .hero-subtitle {
    font-size: 12px;
  }
}

.hero-subtitle::after {
content: "";
position: absolute;
width: 50px;
height: 1px;
top: 50%;
left: 100%;
background-color: #fff;
margin-left: 25px;
}

@media only screen and (max-width: 995px) {
  .hero-subtitle::after {
    width: 25px;
  }
}


/* 18. element rotation */
.element-rotation {
position: relative;
padding: 0;
-webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
-webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
}

@media only screen and (max-width: 1024px) {
  .element-rotation {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}


/* 19. custom cursor */
.cursor {
position: fixed;
width: 60px;
height: 60px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
    -ms-transform: scale(0.2);
        transform: scale(0.2);		
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
border-radius: 50%;
background-color: #bc002d;
z-index: 10000;
}

@media (pointer: coarse) {
  .cursor {
    display: none;
  }
}

.cursor {
-webkit-transition: transform 0.15s ease, opacity 0.15s ease;
     -o-transition: transform 0.15s ease, opacity 0.15s ease;
        -webkit-transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
        transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
        transition: transform 0.15s ease, opacity 0.15s ease;
        transition: transform 0.15s ease, opacity 0.15s ease, -webkit-transform 0.15s ease;
}

.cursor.bounce {
-webkit-transform: rotate(0deg) scale(0.8);
    -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);	
-webkit-transition-delay: .2s;
     -o-transition-delay: .2s;
        transition-delay: .2s;
        opacity: 0.35;
   -moz-opacity: 0.35;
-webkit-opacity: 0.35;
filter: alpha(opacity=35);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
border-color: #bc002d;
background-color: #bc002d;
}


/* 20. the button */
.contact-form-submit-wrapper {
position: relative;
width: 205px;
height: auto;
line-height: 1.5;
padding: 0;
left: 0;
margin: 42px auto -9px auto;
}

@media all and (min-width: 1920px) {
  .contact-form-submit-wrapper {
    margin: 42px auto -5px auto;
  }
}

.the-button-wrapper {
position: relative;
width: 225px;
height: auto;
line-height: 1.5;
margin: 0 auto;
padding: 0;
left: 0;
text-align: center;
}

@media all and (min-width: 1920px) {
  .the-button-wrapper {
    width: 205px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 640px) {
  .the-button-wrapper {
    width: 165px;
	margin: 0 auto;
  }
}

.the-button {
position: relative;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.10em;
color: #fff;
background: none;
padding: 10px 40px 0 40px;
margin-top: 10px;
border-radius: 0;
cursor: none;
}

@media all and (min-width: 1920px) {
  .the-button {
    font-size: 12px;
    letter-spacing: 0.25em;
  }
}

@media only screen and (max-width: 640px) {
  .the-button {
    font-size: 10px;
	letter-spacing: 0.10em;
padding: 0px 40px 0 40px;

  }
}

.the-button:hover::before {
width: 100%;
}

.the-button:hover::after {
width: 100%;
}

.the-button::before {
content: "";
position: absolute;
width: 15px;
height: 38px;
top: -2px;
left: -6px;
border: 1px solid #fff;
border-right: none;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

@media all and (min-width: 1920px) {
  .the-button::before {
    width: 20px;
    height: 47px;
	top: -5px;
  }
}

@media only screen and (max-width: 640px) {
  .the-button::before {
    width: 15px;
	height: 38px;
	top: -2px;
  }
}

.the-button::after {
content: "";
position: absolute;
width: 15px;
height: 38px;
top: -2px;
right: -6px;
border: 1px solid #fff;
border-left: none;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;  
}

@media all and (min-width: 1920px) {
  .the-button::after {
    width: 20px;
    height: 47px;
	top: -5px;
  }
}

@media only screen and (max-width: 640px) {
  .the-button::after {
    width: 15px;
	height: 38px;
	top: -2px;
  }
}

.the-button-submit {
width: 165px;
top: -19px;
border: none;
}

@media all and (min-width: 1920px) {
  .the-button-submit {
    width: 205px;
	border: none;
  }
}

@media only screen and (max-width: 640px) {
  .the-button-submit {
    width: 165px;
	top: -19px;
  }
}


/* 21. contact form */
#contact-form {
width: 100%;
margin: -20px auto 0 auto;
padding: 0;
text-align: center;
}

form {
margin: 0;
padding: 0;
}

#form input {
position: relative;
width: 100%;
height: 40px;
border-bottom: 1px solid #fff;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 10px 0 10px 0;
font-family: 'Raleway', sans-serif;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
color: #fff;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
cursor: none;
}

textarea {
position: relative;
width: 100%;
height: 100px;
border-bottom: 1px solid #fff;
border-left: none;
border-right: none;
border-top: none;
padding: 5px 5px;
background: none;
margin: 5px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
cursor: none;
}

#form textarea {
color: #fff;
margin: 10px 0 10px 0;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#form input:hover,
#form textarea:hover {
border-color: rgba(255, 255, 255, .5);
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}


#form input:focus,
#form textarea:focus {
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

.success {
font-family: 'Raleway', sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
color: #fff;
margin: 0 auto;
padding: 23px 0 0 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

#form .error {
position: absolute;
display: block;
font-size: 9px;
text-transform: uppercase;
color: #fff;
margin: 0;
padding: 0;
letter-spacing: 0.15em;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
width: 200px!important;
font-weight: 700;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.make-space {
margin-left: 15px;
margin-right: 15px;
}

::-webkit-input-placeholder { font-size: 14px; color: #fff; }
     :-ms-input-placeholder { font-size: 14px; color: #fff; }
         ::-moz-placeholder { font-size: 14px; color: #fff; }
     input:-moz-placeholder { font-size: 14px; color: #fff; }

input:focus::-webkit-input-placeholder { color: transparent; }
     input:focus:-ms-input-placeholder { color: transparent; }
         input:focus::-moz-placeholder { color: transparent; }
          input:focus:-moz-placeholder { color: transparent; }

textarea:focus::-webkit-input-placeholder { color: transparent; }
     textarea:focus:-ms-input-placeholder { color: transparent; }
         textarea:focus::-moz-placeholder { color: transparent; }
          textarea:focus:-moz-placeholder { color: transparent; }


/* 22. newsletter form */
#subscribe-wrapper {
position: relative;
width: 300px;
height: 140px;
margin: -5px auto 0 auto;
background: none;
text-align: center;
z-index: 1;
}

.newsletter {
position: relative;
clear: both;
border: none;
background: none;
padding: 0;
overflow: hidden;
margin: 10px 0 0 0;
}

#subscribe input {
position: relative;
width: 177px;
height: 60px;
text-align: center;
color: #fff;
border: none;
border-bottom: 1px solid #fff;
background: none;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
bottom: 25px;
position: relative;
width: 177px;
height: 40px;
border-bottom: 1px solid #fff;
border-left: none;
border-right: none;
border-top: none;
padding: 7px 5px 5px 5px;
background: none;
margin: 11px 0 10px 0;
font-family: 'Raleway', sans-serif;
font-size: 14px;
letter-spacing: 0.05em;
line-height: 1.5;
font-style: normal;
font-weight: normal;
text-align: center;
color: #fff;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
cursor: none;
}

@media all and (min-width: 1920px) {
  #subscribe input {
    width: 217px;
  }
}

#subscribe input:focus, #subscribe textarea:focus {
color: #fff;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#subscribe input:hover {
border-color: rgba(255, 255, 255, .5);
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

.subscribe-success {
font-family: 'Open Sans', sans-serif;
font-size: 10px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
color: #fff;
margin: 0 auto;
padding: 60px 0 0 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

#subscribe .subscribe-error {
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #fff;
display: block;
margin: 8px auto 0 auto;
padding: 0;
letter-spacing: 0.15em;
font-weight: 700;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

input[type="text"].subscribe-email::-webkit-input-placeholder {
color: #fff;
}

input[type="text"].subscribe-email:-ms-input-placeholder{
color: #fff;
}

input[type="text"].subscribe-email::-moz-placeholder {
color: #fff;
}

input:focus.subscribe-email::-webkit-input-placeholder { color: transparent; }
     input:focus.subscribe-email:-ms-input-placeholder { color: transparent; }
         input:focus.subscribe-email::-moz-placeholder { color: transparent; }
          input:focus.subscribe-email:-moz-placeholder { color: transparent; }
 

/* 22.1. newsletter modal */
.newsletter-modal {
position: fixed;
width: calc(100% - 100px);
height: calc(100% - 20px, 100px, 20px, 100px);
top: 10px;
right: 50px;
bottom: 10px;
left: 50px;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
visibility: hidden;
background: #000;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
        transform: scale(0.75);
-webkit-transition: all 1s ease;
     -o-transition: all 1s ease;
        transition: all 1s ease;
z-index: 1005;
-webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
        transform: rotate(30deg);
-webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
z-index: 1010;
}

@media only screen and (max-width: 1024px) {
  .newsletter-modal {
            opacity: 0;
       -moz-opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
            transform: scale(0.75);
  }
}

.newsletter-modal.open {
width: calc(100% - 100px);
height: calc(100% - 20px, 100px, 20px, 100px);
top: 10px;
right: 50px;
bottom: 10px;
left: 50px;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
visibility: visible;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
-webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
-webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
z-index: 1010;
}

@media only screen and (max-width: 1024px) {
  .newsletter-modal.open {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    top: 5px;
	right: 5px;
    bottom: 5px;
	left: 5px;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
			
            opacity: 1;
       -moz-opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}

.newsletter-modal.close {
visibility: hidden;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.element-rotation-reverse {
-webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
        transform: rotate(30deg);
-webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
}

@media only screen and (max-width: 1024px) {
  .element-rotation-reverse {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.newsletter-modal-launcher {
cursor: none;
}

.newsletter-modal-closer {
position: relative;
width: 50px;
height: auto;
margin: 0 auto;
font-size: 20px;
text-align: center;
color: #fff;
cursor: none;
}


/* 23. YouTube video */
#videoContainment {
position: absolute;
display: block;
width: 100%!important;
height: 100%!important;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #14171b;
z-index: 0;
}


/* 24. scroll indicator */
.scroll-indicator-wrapper {
position: absolute;
width: 1px!important;
height: 100%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
visibility: visible;
-webkit-transition: all .7s;
     -o-transition: all .7s;
        transition: all .7s;
}

@media only screen and (max-width: 640px) {
  .scroll-indicator-wrapper {
    display: none;
	visibility: hidden;
  }
}

.scroll-indicator {
position: absolute;
bottom: 50px;
left: 50%;
-webkit-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
        transform: translate(-50%, 50%);
z-index: 1005;
}

@media only screen and (max-width: 768px) {
  .scroll-indicator {
    bottom: 35px;
  }
}

.scroll-line {
display: block;
width: 1px;
height: 50px;
background: none;
}

@media only screen and (max-width: 768px) {
  .scroll-line {
    height: 35px;
  }
}

.scroll-line::before {
content: "";
display: block;
width: 1px;
height: 50%;
top: 0;
background-color: #fff;
-webkit-animation: scroll-down 2s ease-in-out infinite;
	    animation: scroll-down 2s ease-in-out infinite;
}

@-webkit-keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    height: 100%;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
@keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    height: 100%;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}


/* 25. borders */
.border-top,
.border-left,
.border-right,
.border-bottom {
position: fixed;
-webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
-webkit-transform-origin: center;
    -ms-transform-origin: center;
        transform-origin: center;
-webkit-transition: all 1.0s ease;
     -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
background: #fff;
z-index: 10;
}

@media only screen and (max-width: 1024px) {
  .border-top,
  .border-left,
  .border-right,
  .border-bottom {
    display: none;
	visibility: hidden;
  }
}

.border-top {
width: 50%;
height: 2px;
left: 10px;
top: 10px;
}

.border-top.top-position {
-webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
        transform: translateY(-200px);
}

.border-left {
width: 2px;
height: 50%;
left: 10px;
bottom: 10px;
}

.border-left.left-position {
-webkit-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
        transform: translateX(-200px);
}

.border-right {
width: 2px;
height: 50%;
right: 10px;
top: 10px;
}

.border-right.right-position {
-webkit-transform: translateX(200px);
    -ms-transform: translateX(200px);
        transform: translateX(200px);
}

.border-bottom {
width: 50%;
height: 2px;
right: 10px;
bottom: 10px;
}

.border-bottom.bottom-position {
-webkit-transform: translateY(200px);
    -ms-transform: translateY(200px);
        transform: translateY(200px);
}


/* 26. navigation */
#navigation-btn {
position: fixed;
width: 63px;
height: 50px;
top: 35px;
right: 35px;
-webkit-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
        transition: all 1.5s ease;
z-index: 1005;
}

@media only screen and (max-width: 768px) {
  #navigation-btn {
    top: 10px;
    right: 10px;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #navigation-btn {
    z-index: 300;
  }
}

.navigation-toggle {
position: fixed;
display: block;
padding: 0;
background: none;
line-height: 1;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
border: none;
z-index: 1005;
}

#navigation {
position: fixed;
width: 400px;
height: 200%;
top: -360px;
left: -760px;
bottom: 0;
margin: auto;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: -0.02em;
margin: -4px auto 0 auto;
padding: 0;
line-height: 1.25;
background: #fff;
-webkit-transition: left .4s ease-in-out;
     -o-transition: left .4s ease-in-out;
        transition: left .4s ease-in-out;
z-index: 998;
}

@media all and (min-width: 1920px) {
  #navigation {
	top: -460px;
  }
}

@media only screen and (max-width: 1200px) {
  #navigation {
	top: -460px;
  }
}

@media only screen and (max-width: 1024px) {
  #navigation {
    width: 380px;
	height: 100%;
	top: auto;
	bottom: 0;
	font-size: 18px;
  }
}

@media only screen and (max-width: 640px) {
  #navigation {
	width: 215px;
  }
}

#navigation.navigation-on {
left: 0;
}

#navigation ul {
position: relative;
width: 300px!important;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto;
padding-left: 61px;
text-align: left;
list-style: none outside none;
}

@media only screen and (max-width: 995px) {
  #navigation ul {
    width: 280px!important;
	padding-left: 57px;
  }
}

@media only screen and (max-width: 640px) {
  #navigation ul {
    width: 200px!important;
    padding-left: 30px;
  }
}

#navigation ul li {
padding: 0 0 4px 0;
cursor: none;
}

@media only screen and (max-width: 995px) {
  #navigation ul li {
    padding: 0 0 6px 0;
  }
}

@media only screen and (max-width: 640px) {
  #navigation ul li {
    padding: 0 0 3px 0;
  }
}

#navigation .navigation-credits {
font-size: 10px;
letter-spacing: 0.05em;
margin: 3px 0 0 0;
}

@media only screen and (max-width: 640px) {
  #navigation .navigation-credits {
    margin: 2px 0 0 0;
  }
}

#navigation .navigation-credits a {
color: #111;
text-decoration: none;
}

#navigation a,
#navigation a:hover {
color: #111;
text-decoration: none;
-webkit-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#navigation a {
display: none;
min-width: 10px;
}

.navigation-wrapper {
display: table;
width: 100%;
height: 100%;
overflow: hidden;
}

.navigation-links {
display: table-cell;
width: 100%;
height: 100%;	
vertical-align: middle;
}

.lines-button {
margin: -16px 0 0 -3px;
padding: 30px 16px;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
cursor: none;
}

.lines-button:hover {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.lines-button:active {
-webkit-transition: 0;
     -o-transition: 0;
        transition: 0;
}

.lines {
position: relative;
display: inline-block;
width: 35px;
height: 2px;
-webkit-transition: .3s;
     -o-transition: .3s;
        transition: .3s;
background: #fff;
}

.lines::after,
.lines::before {
content: "";
position: absolute;
display: inline-block;
width: 35px;
height: 2px;
-webkit-transition: .3s;
     -o-transition: .3s;
        transition: .3s;
left: 0;
-webkit-transform-origin: .28571rem center;
    -ms-transform-origin: .28571rem center;
        transform-origin: .28571rem center;
background: #fff;
}

.lines::before {
top: 10px;
}

.lines::after {
top: -10px;
}

.lines-button.minus.lines-close .lines::after,
.lines-button.minus.lines-close .lines::before {
-webkit-transform: none;
    -ms-transform: none;
        transform: none;
top: 0;
width: 35px;
background: #fff;
}

.lines-button.x.lines-close .lines {
background: 0 0;
}

.lines-button.x.lines-close .lines::after,
.lines-button.x.lines-close .lines::before {
-webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
top: 0;
width: 35px;
background: #fff;
}

.lines-button.x.lines-close .lines::before {
-webkit-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
}

.lines-button.x.lines-close .lines::after {
-webkit-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
}

.lines-button.x2 .lines {
-webkit-transition: background .3s .5s ease;
     -o-transition: background .3s .5s ease;
        transition: background .3s .5s ease;
}

.lines-button.x2 .lines::after,
.lines-button.x2 .lines::before {
-webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
-webkit-transition: top .3s .6s ease, -webkit-transform .3s ease;
     -o-transition: top .3s .6s ease, -o-transform .3s ease;
        transition: top .3s .6s ease, -webkit-transform .3s ease;
        -o-transition: top .3s .6s ease, transform .3s ease;
        transition: top .3s .6s ease, transform .3s ease;
        transition: top .3s .6s ease, transform .3s ease, -webkit-transform .3s ease;
}

.lines-button.x2.lines-close .lines {
-webkit-transition: background .3s 0 ease;
     -o-transition: background .3s 0 ease;
        transition: background .3s 0 ease;
background: 0 0;
}

.lines-button.x2.lines-close .lines::after,
.lines-button.x2.lines-close .lines::before {
-webkit-transition: top .3s ease, -webkit-transform .3s .5s ease;
     -o-transition: top .3s ease, -o-transform .3s .5s ease;
        transition: top .3s ease, -webkit-transform .3s .5s ease;
        -o-transition: top .3s ease, transform .3s .5s ease;
        transition: top .3s ease, transform .3s .5s ease;
        transition: top .3s ease, transform .3s .5s ease, -webkit-transform .3s .5s ease;
top: 0;
width: 35px;
background: #fff;
}

.lines-button.x2.lines-close .lines::before {
-webkit-transform: rotate3d(0,0,1,45deg);
    -ms-transform: rotate3d(0,0,1,45deg);
        transform: rotate3d(0,0,1,45deg);
}

.lines-button.x2.lines-close .lines::after {
-webkit-transform: rotate3d(0,0,1,-45deg);
    -ms-transform: rotate3d(0,0,1,-45deg);
        transform: rotate3d(0,0,1,-45deg);
}


/* 27. flying birds */
#flying-birds-container {
display: none;
visibility: hidden;
}

#flying-birds {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%!important;
overflow: hidden;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 2;
}

canvas {
position: fixed;
left: 0;
/* top: 0; */
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
}


/* 28. vertical lines */
.vertical-lines-wrapper {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
margin: 0;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 1;
}

.vertical-lines {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.vertical-effect {
position: relative;
width: 20%;
height: 100%;
float: left;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
border-right: 1px solid rgba(255, 255, 255, .1);
}

.vertical-effect::before {
content: "";
position: absolute;
display: block;
width: 3px;
-webkit-animation-direction: normal;
        animation-direction: normal;
}

.vertical-effect:first-child::before,
.vertical-effect:last-child::before {
content: "";
position: absolute;
right: -2px;
}

.vertical-effect:first-child::before {
top: 0;
-webkit-animation: raindrop 6s ease-out infinite;
        animation: raindrop 6s ease-out infinite;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.vertical-effect:last-child::before {
bottom: 0;
-webkit-animation: raindrop-reverse 6s ease-out infinite;
        animation: raindrop-reverse 6s ease-out infinite;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
background: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

@-webkit-keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}
@keyframes raindrop {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    height: 35%;
  }
}

@-webkit-keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 100%;
    height: 35%;
  }
}
@keyframes raindrop-reverse {
  0% {
    bottom: -10%;
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
   }
  100% {
    bottom: 100%;
    height: 35%;
  }
}


/* 29. stars */
#space {
position: fixed;
width: 100vw;
height: 100vh;
background: none;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 10;
}


/* 30. works section */
.works-page-carousel-item {
position: relative;
width: 100%;
height: 35vh;
background-position: center center;
background-repeat: no-repeat;
-ms-background-size: cover;
    background-size: cover;
}

.description {
position: absolute;
padding: 0 15px;
margin-bottom: -4px;
bottom: -40px;
left: 0;
right: 0;
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.8s ease;
     -o-transition: all 0.8s ease;
        transition: all 0.8s ease;
text-align: center;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 10;
}

.description h3 {
position: relative;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-size: 40px;
font-weight: 700;
text-transform: lowercase;
text-align: center;
letter-spacing: -0.02em;
color: #fff;
line-height: 1;
margin: 0 auto -4px auto;
z-index: 10;
}

@media only screen and (max-width: 768px) {
  .description h3 {
    font-size: 30px;
	margin: 0 auto -2px auto;
  }
}

@supports((text-stroke: 1px #fff) or (-webkit-text-stroke: 1px #fff)) {
  .description h3 {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
            text-stroke: 1px #fff;
    text-shadow: none;
  }
}

.description-second {
color: #fff;
margin: -3px auto -2px auto;
}

.item-grid-size:hover .description,
.item-grid-size:focus .description {
bottom: 5px;
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.item-grid-size {
position: relative;
padding: 0;
width: 100%;
height: 100%;
}

.item {
position: relative;
margin-bottom: 0;
float: left;
}

.item:after {
content: "";
display: block;
clear: both;
}

.item-wh {
width: 100%;
height: auto;
}

.item:hover .link-wrap {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
cursor: none;
}

.link-wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
background: rgba(0, 0, 0, .6);
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
}


/* 31. Owl Carousel v2.2.0 CUSTOM */
.owl-buttons {
position: static;
}

.owl-prev,
.owl-next {
position: absolute;
display: block;
top: 50%;
margin-top: -29px;
width: 60px;
height: 60px;
line-height: normal;
font-size: 11px;
padding-top: 23px;
color: #111;
text-align: center;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
     -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: visible;
}

.owl-prev {
left: -50px;
padding-left: 21px; 
}

.owl-next {
right: -50px;
padding-right: 21px; 
}

.owl-prev:before,
.owl-next:before {
content: "";
position: absolute;
display: block;
width: 66%;
height: 66%;
background: #fff;
border-radius: 3px;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
     -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.owl-prev:before {
left: 85px;
top: 9px;
}

@media only screen and (max-width: 640px) {
  .owl-prev:before {
    left: 60px;
  }
}

.owl-next:before {
right: 85px;
top: 9px;
}

@media only screen and (max-width: 640px) {
  .owl-next:before {
    right: 60px;
  }
}

.owl-prev .owl-custom,
.owl-next .owl-custom {
position: relative;
}

.owl-prev .owl-custom {
position: relative;
left: 64px;
}

@media only screen and (max-width: 640px) {
  .owl-prev .owl-custom {
    left: 39px;
  }
}

.owl-next .owl-custom {
position: relative;
right: 64px;
}

@media only screen and (max-width: 640px) {
  .owl-next .owl-custom {
    right: 39px;
  }
}

.owl-prev:hover,
.owl-next:hover {
-webkit-transition: 0 none;
     -o-transition: 0 none;
        transition: 0 none;
}

.owl-prev:hover:before,
.owl-next:hover:before,
.owl-prev:active:before,
.owl-next:active:before,
.owl-carousel:hover .owl-prev,
.owl-carousel:hover .owl-next {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
cursor: none;
}

.owl-carousel:hover .owl-prev {
left: -35px;
}

.owl-carousel:hover .owl-next {
right: -35px;
}


/* 32. Magnific Popup v1.1.0 CUSTOM */
.mfp-arrow-left:after {
font-family: "Ionicons";
content: "\f124";
font-size: 18px;
color: #fff;
margin-top: 22px;
}

.mfp-arrow-right:after {
font-family: "Ionicons";
content: "\f125";
font-size: 18px;
color: #fff;
margin-top: 22px;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: crosshair;
}

.mfp-arrow-left:after,
.mfp-arrow-left:before {
border-right: none;
}

.mfp-arrow-right:after,
.mfp-arrow-right:before {
border-left: none;
}

.mfp-title {
font-family: 'Raleway', sans-serif;
font-size: 13px;
line-height: 1.5;
font-style: normal;
font-weight: 400;
letter-spacing: 0.05em;
}

.popup-gallery-slider a:visited,
.popup-gallery-slider a:active,
.popup-gallery-slider a:focus {
color: #fff;
}

.popup-gallery-slider a:hover {
color: #000;
}

.mfp-close {
display: none;
visibility: hidden;
}

@media only screen and (max-width: 1024px) {
  .mfp-close {
	display: block;
	visibility: visible;
  }
}

img.mfp-img {
cursor: none;
}


/* 33. Lity v2.2.2 CUSTOM */
.lity {
z-index: 99999;
cursor: crosshair;
background: rgba(0, 0, 0, .55);
}

.lity-close {
top: 40px;
left: 40px;
display: none;
visibility: hidden;
}

@media only screen and (max-width: 1024px) {
  .lity-close {
	display: block;
	visibility: visible;
  }
}

@media only screen and (max-width: 768px) {
  .lity-close {
    top: 15px;
    left: 15px;
  }
}

.lity-close:active {
top: 40px;
}

@media only screen and (max-width: 768px) {
  .lity-close:active {
    top: 15px;
  }
}


/* 34. divider */
.inner-divider-xl,
.inner-divider-l,
.inner-divider-m,
.inner-divider-xs,
.inner-divider-mobile {
position: relative;
width: 100%;
margin: 0 auto;
background: none;
z-index: -1;
}

.inner-divider-xl {
height: 120px;
}

@media all and (min-width: 1920px) {
  .inner-divider-xl {
	height: 140px;
  }
}

@media only screen and (max-width: 1024px) {
  .inner-divider-xl {
	height: 100px;
  }
}

.inner-divider-l {
height: 100px;
}

.inner-divider-m {
height: 60px;
}

@media all and (min-width: 1920px) {
  .inner-divider-m {
	height: 80px;
  }
}

.inner-divider-xs {
height: 30px;
}

.show-on-mobile {
display: none;
visibility: hidden;
}

@media only screen and (max-width: 1024px) {
  .show-on-mobile {
	display: block;
	visibility: visible;

  }
}

/* --- MASAÜSTÜ AYARLARI --- */
    .services-grid-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px; 
        width: 100%;
        max-width: 750px; 
        margin: 10px auto; 
    }

    .service-card-mini {
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        padding: 15px 5px;
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        min-height: 55px;
        cursor: default;
        background: rgba(0, 0, 0, 0.3);
    }

    .service-card-mini:hover {
        border-color: #fff;
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        -webkit-transform: translateY(-2px);
            -ms-transform: translateY(-2px);
                transform: translateY(-2px);
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .modal-button-container {
        margin-top: 40px;
        text-align: center;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    /* --- MOBİL AYARLARI (GÜNCELLENDİ) --- */
    @media (max-width: 768px) {
        .services-grid-container {
            -ms-grid-columns: 1fr 8px 1fr;
            grid-template-columns: repeat(2, 1fr); /* 2 Sütun */
            gap: 8px; /* Boşluklar küçüldü */
            
            /* ÖNEMLİ: Genişliği %85'e çektik ki kartlar ekranın tamamına yayılıp geniş durmasın */
            max-width: 85% !important; 
            margin: 0 auto; /* Ortala */
        }

        .service-card-mini {
            font-size: 9px; /* Yazı boyutu küçültüldü */
            padding: 8px 2px; /* İç boşluklar sıkılaştırıldı */
            min-height: 40px; /* Yükseklik azaltıldı */
            letter-spacing: 0; /* Harf aralığı sıkılaştırıldı */
        }

        .modal-button-container {
            margin-top: 25px;
        }
        
        /* Butonu da mobilde biraz küçültelim */
        .the-button span {
            font-size: 11px; 
        }
    }

    /* İletişim Kutuları Düzeni */
        .contact-info-row {
            margin-bottom: 0px;
        }

        .contact-col {
            margin-bottom: 0px;
        }

        .contact-box-minimal {
            text-align: center;
            padding: 20px 10px;
            /* Hafif border ekleyelim mi? İsteğe bağlı, şu an temiz duruyor */
        }

        .contact-box-minimal i {
            font-size: 36px;
            color: #fff;
            margin-bottom: 15px;
            display: inline-block;
        }

        .contact-box-minimal h4 {
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.9);
            margin: 0;
        }

        .contact-box-minimal p, 
        .contact-box-minimal a {
            font-family: 'Raleway', sans-serif;
            font-size: 15px;
            color: rgba(255,255,255,0.6);
            line-height: 1.6;
            text-decoration: none;
            display: block;
        }

        .contact-box-minimal a:hover {
            color: #fff;
        }


        /* SİNEMATİK HARİTA ÇERÇEVESİ */
        .cinema-map-frame {
            position: relative;
            padding: 15px; /* Harita ile çerçeve arasındaki boşluk */
            border: 1px solid rgba(255, 255, 255, 0.1); /* Dış ince çizgi */
            background: rgba(0, 0, 0, 0.3); /* Yarı saydam zemin */
            -webkit-box-shadow: 0 20px 50px rgba(0,0,0,0.5);
                    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Derinlik gölgesi */
        }

        .cinema-map-frame iframe {
            display: block;
            -webkit-filter: grayscale(100%) invert(90%) contrast(85%);
                    filter: grayscale(100%) invert(90%) contrast(85%); /* Haritayı 'Dark Mode' yapar */
            opacity: 0.8;
            -webkit-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        /* Hover yapınca harita renklenir */
        .cinema-map-frame:hover iframe {
            -webkit-filter: grayscale(0%) invert(0%) contrast(100%);
                    filter: grayscale(0%) invert(0%) contrast(100%);
            opacity: 1;
        }

        /* Köşe Dekorları (Vizör Efekti) */
        .frame-decor-top-left, .frame-decor-top-right,
        .frame-decor-bottom-left, .frame-decor-bottom-right {
            position: absolute;
            width: 20px;
            height: 20px;
            border-color: #fff;
            border-style: solid;
            -webkit-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        .frame-decor-top-left {
            top: -1px; left: -1px;
            border-width: 2px 0 0 2px; /* Sol Üst Köşe */
        }
        .frame-decor-top-right {
            top: -1px; right: -1px;
            border-width: 2px 2px 0 0; /* Sağ Üst Köşe */
        }
        .frame-decor-bottom-left {
            bottom: -1px; left: -1px;
            border-width: 0 0 2px 2px; /* Sol Alt Köşe */
        }
        .frame-decor-bottom-right {
            bottom: -1px; right: -1px;
            border-width: 0 2px 2px 0; /* Sağ Alt Köşe */
        }

        .cinema-map-frame:hover .frame-decor-top-left { top: -5px; left: -5px; }
        .cinema-map-frame:hover .frame-decor-top-right { top: -5px; right: -5px; }
        .cinema-map-frame:hover .frame-decor-bottom-left { bottom: -5px; left: -5px; }
        .cinema-map-frame:hover .frame-decor-bottom-right { bottom: -5px; right: -5px; }

        .ald{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }

        .image-wrapper {
    position: relative; /* Kalkanın buna göre hizalanması için gerekli */
    display: inline-block; /* Veya resmin yapısına göre block */
    width: 100%;
}

.protection-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Tamamen şeffaf */
    z-index: 10; /* Resmin üzerinde durmasını sağlar */
}

/* Ayrıca resmi sürüklenemez hale getirelim */
.team-avatar {
    pointer-events: none; /* Resme tıklamayı tamamen iptal eder */
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; /* Seçilmesini engeller */
    -webkit-user-drag: none; /* Sürüklenmesini engeller */
}


/* Team Member İmleç Ayarı */
.team-member {
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.team-member:hover {
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

/* Modal Overlay (Arka Plan) */
.team-modal-overlay {
    display: none; /* Varsayılan olarak gizli */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Koyu yarı saydam arka plan */
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px); /* Arkadaki siteyi bulanıklaştırır */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
   /* ...diğer kodlar aynı kalsın... */
    position: fixed; /* Kesinlikle fixed olmalı */
    top: 0;
    left: 0;
    width: 100vw; /* Ekranın tamamı */
    height: 100vh; /* Ekranın tamamı */
    
    /* Z-Index'i çok yüksek veriyoruz ve !important ekliyoruz */
    z-index: 2147483647 !important;

}

.team-modal-overlay.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
}

/* Modal İçerik Kutusu */
.team-modal-content {
    background: #1a1a1a; /* Koyu Gri/Siyah zemin */
    color: #fff;
    width: 90%;
    max-width: 800px;
    border-radius: 12px;
    position: relative;
    -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.team-modal-overlay.show .team-modal-content {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

/* Kapatma Butonu */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}

.close-modal:hover {
    color: #fff;
}

/* Modal İç Düzeni (Flexbox) */
.modal-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

/* Sol Taraf: Resim */
.modal-img-wrapper {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
            flex: 0 0 40%; /* Genişliğin %40'ı */
    position: relative;
    overflow: hidden;
}

.modal-img-wrapper img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* Sağ Taraf: Yazı */
.modal-text {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.modal-text h2 {
    font-size: 2rem;
    margin: 0 0 5px 0;
    color: #fff;
    font-weight: 700;
}

.modal-job-title {
    font-size: 1rem;
    color: #bbb; /* Hafif gri unvan rengi */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-weight: 500;
}

.modal-divider {
    height: 2px;
    width: 50px;
    background-color: #e50914; /* Sitenizin vurgu rengi neyse burayı değiştirebilirsiniz (örn: kırmızı) */
    margin: 20px 0;
}

#modalDesc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ddd;
    font-weight: 300;
}

/* MOBİL GÖRÜNÜM (Responsive) */
@media (max-width: 768px) {
    .modal-body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .modal-img-wrapper {
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        height: 250px; /* Mobilde resim yüksekliği */
    }
    
    .modal-text {
        padding: 30px 20px;
    }

    .modal-text h2 {
        font-size: 1.5rem;
    }
}
/* Modal Overlay (Ana Kapsayıcı) */
.team-modal-overlay {
    /* MOUSE SORUNU ÇÖZÜMÜ BURADA: */
    cursor: default !important; /* Mouse'u ZORLA görünür yap */
    
    display: none; 
    position: fixed; 
    z-index: 2147483647 !important; 
    left: 0;
    top: 0;
    width: 100vw; 
    height: 100vh; 
    background-color: rgba(0, 0, 0, 0.9); 
    -webkit-backdrop-filter: blur(8px); 
            backdrop-filter: blur(8px);
    
    /* Ortalama Ayarları */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; 
    -webkit-box-pack: center; 
        -ms-flex-pack: center; 
            justify-content: center; 
    
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.team-modal-overlay.show {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important; 
    opacity: 1;
}

/* Kapatma Butonu */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #fff;
    font-size: 35px;
    font-weight: 300;
    
    /* MOUSE EL İŞARETİ OLSUN */
    cursor: pointer !important; 
    
    z-index: 100;
    line-height: 1;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.close-modal:hover {
    color: #e50914;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}




/* --- MOUSE İÇİN KESİN ÇÖZÜM --- */

/* 1. Modalın kendisi ve içindeki İSTİSNASIZ TÜM elementlerde (*) mouse okunu göster */
#teamModal, 
#teamModal * {
    cursor: default !important; 
    /* Bazı tarayıcılar için auto da ekleyelim garanti olsun */
    cursor: auto !important;
}

/* 2. Sadece Kapatma (X) butonunda ve onun içindekilerde EL işareti göster */
.close-modal, 
.close-modal * {
    cursor: pointer !important;
}

/* --- MOBİL İÇİN ÖZEL: HAKKIMIZDA ve İLETİŞİM ARKAPLAN AYARI --- */
@media only screen and (max-width: 768px) {

    /* HAKKIMIZDA (.section2) ve İLETİŞİM (.section5) Hedefleniyor */
    .section2, 
    .section5 {
        /* 1. İstenilen Arkaplan Rengi */
        background-color: #171717 !important;
        background: #171717 !important;
    }

    /* Bu bölümlerin içindeki Resim Taşıyıcılarını Sıfırla */
    .section2 .section-image-wrapper,
    .section5 .section-image-wrapper,
    .section2 .section-image,
    .section5 .section-image,
    .section2 .section-image-bg,
    .section5 .section-image-bg {
        /* Resmi kaldır */
        background-image: none !important;
        /* Arkaplanı şeffaf yap ki ana rengi görelim */
        background-color: transparent !important;
        /* Garanti olsun diye görünmez yap */
        opacity: 0 !important;
        /* Yer kaplamasını engelle (gerekirse) */
        visibility: hidden !important;
    }

    /* Zemin zaten koyu olduğu için üzerindeki karartma filtresini (overlay) kaldırıyoruz 
       Böylece #171717 rengi tam net gözükür. */
    .section2.overlay-dark::before,
    .section5.overlay-dark::before {
        display: none !important;
    }
}

/* --- MOBİL İÇİN AYIRICI ÇİZGİ (PROJELER ve EKİP ARASI) --- */
@media only screen and (max-width: 768px) {
    .section3, .section4, .section5 {
        /* Üst tarafa 1 piksellik beyaz çizgi ekle */
        
        /* Çizginin hemen altına yapışmaması için biraz iç boşluk (opsiyonel) */
        padding-top: 0 !important; 
        
        /* Eğer çizgi çok yapışık durursa bu değeri artırabilirsiniz */
        margin-top: 0 !important;
    }
}

.project-description {
    /* ...mevcut diğer kodlar... */
    
    max-height: 150px; /* 1. Bu yükseklikten sonrası gizlenir */
    overflow-y: auto;  /* 2. Yükseklik aşılırsa dikey scroll devreye girer */
    padding-right: 10px; /* 3. Metin scroll çubuğuna yapışmasın diye boşluk */
}

/* Scroll çubuğunun genişliği */
.project-description::-webkit-scrollbar {
    width: 6px;
}

/* Scroll çubuğunun arka planı (yol) */
.project-description::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* Tutamaç (hareket eden kısım) rengi */
.project-description::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 4px;
}

/* Üzerine gelince tutamaç rengi */
.project-description::-webkit-scrollbar-thumb:hover {
    background-color: #555; 
}
/* Modal Açıklama Alanı İçin Scroll Ayarı */
#modalDesc {
    /* Metnin düzgünce aşağı akmasını sağlar */
    white-space: normal !important;
    word-wrap: break-word !important;
    
    /* Yükseklik ve Scroll Ayarları */
    display: block;
    max-height: 150px;       /* 150px'i geçerse scroll çıkar */
    overflow-y: auto;        /* Dikey kaydırma çubuğunu açar */
    overflow-x: hidden;      /* Yatay kaydırmayı engeller */
    
    /* Görünüm ayarları */
    line-height: 1.6;        /* Satır aralığı */
    padding-right: 10px;     /* Scroll çubuğu ile metin arasına boşluk */
}

/* Scroll çubuğu tasarımı (İsteğe bağlı şık görünüm) */
#modalDesc::-webkit-scrollbar {
    width: 6px;
}
#modalDesc::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
#modalDesc::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.logo-img {
    background: rgba(255, 255, 255, 0.85); /* %85 opak beyaz */
    padding: 8px 12px;       /* Logoya nefes payı */
    border-radius: 8px;       /* Kenarları yumuşat */
    -webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Hafif gölge */
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px); /* Arkadaki videoyu flulaştırır */
}

/* 1. Varsayılan Hal (Diğer Bölümler - logo.png için) */
/* Arka plan yok, gölge yok, padding yok */
.logo-img {
    background: transparent !important;
    padding: 0 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border-radius: 0 !important;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; /* Yumuşak geçiş efekti */
    
}

/* 2. Özel Durum (Sadece Section 1 - logo_d.png için) */
/* JavaScript ile bu sınıfı eklediğimizde beyaz kutu gelecek */
.logo-img.logo-box-active {
    background: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    -webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    -webkit-backdrop-filter: blur(5px) !important;
            backdrop-filter: blur(5px) !important;
}




/* Logo Ticker Ana Konteynır */
.logo-ticker-container {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    background: transparent;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* İçindeki rayı ortalamak için */
}

/* Ray (Track) - Buradaki display: flex ve width: max-content önemli */
.logo-ticker-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content; /* İçerik kadar genişle, manuel hesaplamaya gerek yok */
    -webkit-animation: scrollTicker 25s linear infinite;
            animation: scrollTicker 25s linear infinite; /* Hızı buradan ayarlayabilirsin */
}

.logo-item {
    /* Logolar arası boşluğu padding yerine flex-basis veya sabit genişlikle yönetiyoruz */
    -webkit-box-flex: 0;
        -ms-flex: 0 0 250px;
            flex: 0 0 250px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.logo-item img {
    max-width: 140px;
    max-height: 50px;
    -webkit-filter: grayscale(80%) opacity(1);
            filter: grayscale(80%) opacity(1); /* İstediğin gibi opacity arttırıldı */
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none; /* Mouse ile logoyu sürüklemeyi engeller */
}

.logo-item:hover img {
    -webkit-filter: grayscale(0%) opacity(1);
            filter: grayscale(0%) opacity(1);
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}

/* SONSUZ DÖNGÜ SİHİRİ */
@-webkit-keyframes scrollTicker {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        /* Rayın tam yarısına geldiğinde (yani kopya grubun başına) 
           aniden başa döner. -50% kullandığımız için pikseller 
           hiç şaşmaz ve atlama hissedilmez. */
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}
@keyframes scrollTicker {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        /* Rayın tam yarısına geldiğinde (yani kopya grubun başına) 
           aniden başa döner. -50% kullandığımız için pikseller 
           hiç şaşmaz ve atlama hissedilmez. */
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}

/* Mobil için hız ve genişlik ayarı */
@media (max-width: 768px) {
    .logo-item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 180px;
                flex: 0 0 180px; 
    }
    .logo-ticker-track {
        -webkit-animation: scrollTicker 15s linear infinite;
                animation: scrollTicker 15s linear infinite; /* Mobilde daha kısa mesafe olduğu için hızlandırdık */
    }
}

#videoContainment {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#bgndVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    -o-object-fit: cover;
       object-fit: cover; /* Videonun ekranı tam kaplamasını sağlar */
}
/* Sayfa aktif olduğunda videoyu zorla göster */
.fp-viewing-home #mainLocalVideo {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- MOBİLDE VİDEOYU ZORLA YAN ÇEVİR VE DOLDUR --- */
@media screen and (max-width: 768px) {

    /* 1. Tüm Slick kapsayıcılarını ve ana kutuyu serbest bırak */
    #videoContainment, 
    #videoContainment .slick-list, 
    #videoContainment .slick-track, 
    #videoContainment .slick-slide {
        height: 100vh !important; /* Yüksekliği ekran kadar yap */
        max-width: none !important;
        max-height: none !important;
    }

    /* 2. Videoyu (mainLocalVideo) hedefle ve 90 derece döndür */
    video#mainLocalVideo {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        
        /* ÖNEMLİ: Yatayda tam kaplaması için genişlik ve yüksekliği ters veriyoruz */
        width: 100vh !important;  /* Cihazın boyu kadar genişlik */
        height: 100vw !important; /* Cihazın eni kadar yükseklik */
        
        /* Video oranını koru ve alanı doldur */
        object-fit: cover !important;
        
        /* Tam ortala ve döndür */
        transform: translate(-50%, -50%) rotate(90deg) !important;
        -webkit-transform: translate(-50%, -50%) rotate(90deg) !important;
        
        /* Slick'in atadığı genişliği sıfırla */
        max-width: none !important;
    }
}