/*!
 * Sokak Urla - site.css
 * Eski style.css + main.css + animate.css dosyalarından yalnızca sitede
 * kullanılan kurallar bırakılarak oluşturuldu. Izgara (grid) ve temel
 * bileşenler Bootstrap 5 (CDN) üzerinden gelir.
 */
/* ==========================================================================
   BOOTSTRAP 5 UYUM KATMANI
   ========================================================================== */
/* --- Bootstrap 5 uyumu: eski sitedeki 15px boşluk ve konteyner genişlikleri --- */
.container, .row { --bs-gutter-x: 30px; }
@media (min-width: 768px)  { .container { max-width: 730px; } }
@media (min-width: 992px)  { .container { max-width: 964px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* --- Eski ızgara davranışı (Bootstrap 3 / 4-alpha) ---
   Eski şablonda kolon sınıfları .row dışında da kullanılmış ve float ile yan
   yana dizilmişti. Bu blok, eski sıralamayı korumak için tema kurallarından
   ÖNCE gelir; böylece temadaki .floatright, .text-part vb. kurallar yine
   önceliklidir. .row içindeki kolonlarda Bootstrap 5 davranışı geçerlidir. */
.container { position: relative; }
[class*="col-"] { position: relative; min-height: 1px; }
:where(:not(.row)) > [class*="col-"] { padding-left: 15px; padding-right: 15px; }
:where(:not(.row)) > [class*="col-"]:where(:not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"])) { float: left; }
@media (min-width: 768px) { :where(:not(.row)) > [class*="col-sm-"] { float: left; } }
@media (min-width: 992px) { :where(:not(.row)) > [class*="col-md-"] { float: left; } }
@media (min-width: 1200px) { :where(:not(.row)) > [class*="col-lg-"] { float: left; } }
@media (min-width: 576px) { .col-sm-1 { max-width: 8.333333%; } .col-sm-2 { max-width: 16.666667%; } .col-sm-3 { max-width: 25%; } .col-sm-4 { max-width: 33.333333%; } .col-sm-5 { max-width: 41.666667%; } .col-sm-6 { max-width: 50%; } .col-sm-7 { max-width: 58.333333%; } .col-sm-8 { max-width: 66.666667%; } .col-sm-9 { max-width: 75%; } .col-sm-10 { max-width: 83.333333%; } .col-sm-11 { max-width: 91.666667%; } .col-sm-12 { max-width: 100%; } }
@media (min-width: 768px) { .col-md-1 { max-width: 8.333333%; } .col-md-2 { max-width: 16.666667%; } .col-md-3 { max-width: 25%; } .col-md-4 { max-width: 33.333333%; } .col-md-5 { max-width: 41.666667%; } .col-md-6 { max-width: 50%; } .col-md-7 { max-width: 58.333333%; } .col-md-8 { max-width: 66.666667%; } .col-md-9 { max-width: 75%; } .col-md-10 { max-width: 83.333333%; } .col-md-11 { max-width: 91.666667%; } .col-md-12 { max-width: 100%; } }
@media (min-width: 992px) { .col-lg-1 { max-width: 8.333333%; } .col-lg-2 { max-width: 16.666667%; } .col-lg-3 { max-width: 25%; } .col-lg-4 { max-width: 33.333333%; } .col-lg-5 { max-width: 41.666667%; } .col-lg-6 { max-width: 50%; } .col-lg-7 { max-width: 58.333333%; } .col-lg-8 { max-width: 66.666667%; } .col-lg-9 { max-width: 75%; } .col-lg-10 { max-width: 83.333333%; } .col-lg-11 { max-width: 91.666667%; } .col-lg-12 { max-width: 100%; } }


/* BS5 reboot svg için vertical-align: middle veriyor; eski davranış baseline idi */
svg { vertical-align: baseline; }

/* Eski şablondaki clearfix: .container içindeki negatif margin'lerin dışarı taşmasını (margin collapse) engeller */
.container::before, .container::after { content: " "; display: table; }
.container::after { clear: both; }
/* ==========================================================================
   ESKİ TEMA KURALLARI (style.css + main.css + animate.css, kullanılmayanlar ayıklandı)
   ========================================================================== */
@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.6.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
html, body, div, span, iframe, h1, h4, p, a, img, q, s, strong, tt, var, b, u, i, center, ul, li, tr, embed, figure, figcaption, footer, header, menu, output, section { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

 figcaption, figure, footer, header, menu, section { display: block; }

 q { quotes: none; }

 q:before, q:after { content: ''; content: none; }

body * { -webkit-text-size-adjust: none; box-sizing: border-box; }

 button:focus { outline: none; box-shadow: none; }

a, a:link, a:visited, a:active, a:hover { cursor: pointer; text-decoration: none; outline: none; }

body { font-weight: normal; font-size: 14px; line-height: 1; }

ul { list-style: none; }

b { font-weight: 700; }

.hidden { display: none !important; }

body, html { width: 100%; }

body { font-family: 'Playfair Display', serif; color: #4d4d4e; }
body.overflow { overflow: hidden; }

 .button-type-2 { font-family: 'Montserrat', sans-serif; }

.h1 { font-size: 118px; }

.h4 { font-size: 70px; }

.button-type-2 { position: relative; display: inline-block; height: 77px; line-height: 73px; box-shadow: inset 0px 0px 0px 2px #8a694f; color: #8a694f; font-size: 13px; overflow: hidden; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; }
.button-type-2:hover { box-shadow: inset 0px 0px 0px 2px #89254f; color: #89254f; }

.button-type-2.style-2 { white-space: nowrap; height: 60px; line-height: 60px; padding: 0px 30px; font-size: 15px; letter-spacing: 6px; -webkit-transition: all 0.35s ease-out 1s; -moz-transition: all 0.35s ease-out 1s; -ms-transition: all 0.35s ease-out 1s; transition: all 0.35s ease-out 1s;}
.button-type-2.style-2::before {
  content:'';
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out;
  background: #89254f;
  transform:translateY(100%);
  z-index:-1;
}
.button-type-2.style-2:hover::before {
  content:'';
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out;
  background: #89254f;
  transform:translateY(0%);
}

.button-type-2 { position: relative; display: inline-block; height: 77px; line-height: 73px; box-shadow: inset 0px 0px 0px 2px #8a694f; color: #8a694f; font-size: 13px; overflow: hidden; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; overflow:hidden;}

.button-type-2 span {
  display: block;
  background: linear-gradient(120deg, #8a694f, #89254f, #8a694f);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.button-type-2:hover span {
  display: block;
  background: linear-gradient(120deg, #fff, #fff, #fff);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section { position: relative; }

 .bg { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }

 a { transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; }

.bg { overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; backface-visibility: hidden; }

.logo { left: 0px; width: 102px; }
.logo img { width: 100%; height: auto; }

.footer { position: relative; margin: 0 90px; height: 90px; background: #fff; padding: 36px 0px; }

@media (max-width: 1400px) {  .footer { margin: 0 30px; }
  .footer { padding: 25px 0px; height: 66px; } }
@media (max-width: 1200px) {
  .footer { height: 70px; padding: 25px 0px; } }
@media (max-width: 992px) {
  .h4 { font-size: 60px; } }
@media (max-width: 768px) {  .footer { margin: 0px 15px; }
  .footer { text-align: center; height: auto; padding: 25px 0px 0px; } }
@media (max-width: 480px) { .footer { height: auto; display: inline-block; padding: 25px 0px 20px; }
  .h4 { font-size: 50px; } }

 .button-type-2.style-2, .box-item .number { font-weight: 900; }

 .box-item .text-block {  }

.onepage-box { position: relative; }

.onepage-box { position: relative; }
.onepage-box.style-2 { background: #191e3f; }
.onepage-box.style-2 .box-container { background: #0b0e24; }
.onepage-box.style-2 .header.box-style.bg-scroll { background: #0b0e24; }
.onepage-box.style-2 .box-item .text-block { background-color: #0b0e24; }

.header.box-style.bg-scroll {height:80px;}
.header.box-style .container { height: inherit; }

.top-box-slider { position: relative; width: 100%; }

.main-container {position: relative; width: 100%; overflow: hidden; }

.box-container { position: relative; width: 100%; padding-top: 100px; }

.box-title { font-size: 31px; line-height: 49px; padding-bottom: 10px; letter-spacing: 3.8px; color: #fff; }

.box-text { position: relative; }
.box-text p { font-size: 17px; line-height: 32px; color: #8a694f; }

.box-item { position: relative; width: 100%; display: inline-block; }
.box-item .number { position: relative; font-size: 334px;text-shadow: 0px 102px 150px rgba(2, 2, 2, 0.75); color: rgba(255, 255, 255, 0.1); }
.box-item .text-block { position: relative; display: inline-block; }

.box-type-0 {   }
.box-type-0 .number { right: -17%; top: 0px; line-height: 160px; }
.box-type-0 .image {position: absolute; top: 0%; z-index: 2;margin-right:-15px; }

.box-type-0 .text-block { max-width: 570px; z-index: 5;}
.box-type-0 .text-block .box-text { margin:50px 0 0 50px; }

.box-type-1 { padding-bottom: 185px;}
.box-type-1 .number { right: -17%; top: 0px;}
.box-type-1 .image {position: relative; top: 24%; left: 32%; box-shadow: 0px 50px 150px rgba(2, 2, 2, 0.3); z-index: 2; }
.box-type-1 .text-block { z-index: 5; }
.box-type-1 .text-block .box-text { padding-bottom: 30px; }

@media (max-width: 1290px) { .box-container { padding-top: 180px; }
  .main-container { padding-top: 80px; }
  .onepage-box.style-2 .header.box-style { background: #0b0e24; }
  .box-type-1 { margin-bottom: 200px; }
  .box-type-1 .number { right: 0px; }
  .box-type-1 .text-block { margin-left: 0px; }
  .box-type-1 .image { left: auto; right: 0px; top: 33%; } }
@media (max-width: 992px) { .box-type-1 { padding-bottom: 0px; margin-bottom: 120px; }
  .box-type-1 .text-block { max-width: none; width: 100%; padding: 60px; }
  .box-type-1 .image { position: relative; width: 100%; top: 0px;  }
  .box-item .text-block { z-index: 6; }
  .box-item .number {text-align: center; display: block; margin: 0 auto 30px; font-size: 200px; line-height: 155px; } }
@media (max-width: 768px) { .box-container { padding-top: 80px; }
  .box-item .number { font-size: 120px; line-height: 90px; letter-spacing: 3px; } }
@media (max-width: 480px) {
  .box-type-1 .text-block { padding: 30px; }
  .box-type-1 .text-block .box-text { padding-bottom: 20px; }
  .box-title { font-size: 27px; line-height: 43px; }
  .button-type-2.style-2 { letter-spacing: 3px; } }
.footer.fixed { position: fixed; left: 0px; bottom: 0px; width: 100%; background: #fff; }
@media (max-width: 992px) {
  .footer.fixed { position: relative; } }
@media (max-width: 768px) {
  .footer.fixed { height: auto; margin: 0px; } }
.mt-50 {margin-top:50px;}
.mt-100 {margin-top:100px;}

.mb-50 {margin-bottom:50px;}
.mb-100 {margin-bottom:100px;}

.mt-0 {padding:0 0 0 0;}

@font-face {
  font-family: 'AmericanTypewriter';
  src: url('../fonts/AmericanTypewriter.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ameliana';
  src: url('../fonts/Ameliana.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SourceSerifPro-Regular';
  src: url('../fonts/SourceSerifPro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@-webkit-keyframes hamburger-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@-moz-keyframes hamburger-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@-ms-keyframes hamburger-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@keyframes hamburger-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes hamburger-mask-in {
  0% {
    width: 0px;
  }
  100% {
    width: 400px;
  }
}
@-moz-keyframes hamburger-mask-in {
  0% {
    width: 0px;
  }
  100% {
    width: 400px;
  }
}
@-ms-keyframes hamburger-mask-in {
  0% {
    width: 0px;
  }
  100% {
    width: 400px;
  }
}
@keyframes hamburger-mask-in {
  0% {
    width: 0px;
  }
  100% {
    width: 400px;
  }
}
@-webkit-keyframes cross-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@-moz-keyframes cross-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@-ms-keyframes cross-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@keyframes cross-mask-out {
  0% {
    width: 400px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes cross-mask-in {
  0% {
    width: 0;
  }
  100% {
    width: 400px;
  }
}
@-moz-keyframes cross-mask-in {
  0% {
    width: 0;
  }
  100% {
    width: 400px;
  }
}
@-ms-keyframes cross-mask-in {
  0% {
    width: 0;
  }
  100% {
    width: 400px;
  }
}
@keyframes cross-mask-in {
  0% {
    width: 0;
  }
  100% {
    width: 400px;
  }
}
.icon-hamburger {
  width: 20px;
	height: 20px;
}
.icon-hamburger__line-a, .icon-hamburger__line-b, .icon-hamburger__line-c, .icon-hamburger__line-d, .icon-hamburger__line-e {
  fill: #772a4f;
}
.icon-hamburger--hamburger .icon-hamburger__mask-a__shape {
  width: 0;
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: hamburger-mask-in;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0.2s;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: hamburger-mask-in;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0.2s;
  -o-animation-duration: 0.1s;
  -o-animation-name: hamburger-mask-in;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0.2s;
  animation-duration: 0.1s;
  animation-name: hamburger-mask-in;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--hamburger .icon-hamburger__mask-b__shape {
  width: 0;
  -webkit-animation-delay: 0.3s;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: hamburger-mask-in;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0.3s;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: hamburger-mask-in;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0.3s;
  -o-animation-duration: 0.1s;
  -o-animation-name: hamburger-mask-in;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0.3s;
  animation-duration: 0.1s;
  animation-name: hamburger-mask-in;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--hamburger .icon-hamburger__mask-c__shape {
  width: 0;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: hamburger-mask-in;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0.5s;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: hamburger-mask-in;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0.5s;
  -o-animation-duration: 0.1s;
  -o-animation-name: hamburger-mask-in;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0.5s;
  animation-duration: 0.1s;
  animation-name: hamburger-mask-in;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--hamburger .icon-hamburger__mask-d__shape {
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: cross-mask-out;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: cross-mask-out;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0;
  -o-animation-duration: 0.1s;
  -o-animation-name: cross-mask-out;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0;
  animation-duration: 0.1s;
  animation-name: cross-mask-out;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--hamburger .icon-hamburger__mask-e__shape {
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: cross-mask-out;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: cross-mask-out;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0;
  -o-animation-duration: 0.1s;
  -o-animation-name: cross-mask-out;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0;
  animation-duration: 0.1s;
  animation-name: cross-mask-out;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--cross .icon-hamburger__mask-a__shape {
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: hamburger-mask-out;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: hamburger-mask-out;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0;
  -o-animation-duration: 0.1s;
  -o-animation-name: hamburger-mask-out;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0;
  animation-duration: 0.1s;
  animation-name: hamburger-mask-out;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--cross .icon-hamburger__mask-b__shape {
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: hamburger-mask-out;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: hamburger-mask-out;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0;
  -o-animation-duration: 0.1s;
  -o-animation-name: hamburger-mask-out;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0;
  animation-duration: 0.1s;
  animation-name: hamburger-mask-out;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--cross .icon-hamburger__mask-c__shape {
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: hamburger-mask-out;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: hamburger-mask-out;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0;
  -o-animation-duration: 0.1s;
  -o-animation-name: hamburger-mask-out;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0;
  animation-duration: 0.1s;
  animation-name: hamburger-mask-out;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--cross .icon-hamburger__mask-d__shape {
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: cross-mask-in;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0.2s;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: cross-mask-in;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0.2s;
  -o-animation-duration: 0.1s;
  -o-animation-name: cross-mask-in;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0.2s;
  animation-duration: 0.1s;
  animation-name: cross-mask-in;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}
.icon-hamburger--cross .icon-hamburger__mask-e__shape {
  -webkit-animation-delay: 0.4s;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-name: cross-mask-in;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: 0.4s;
  -moz-animation-duration: 0.1s;
  -moz-animation-name: cross-mask-in;
  -moz-animation-timing-function: ease-in;
  -moz-animation-fill-mode: forwards;

  -o-animation-delay: 0.4s;
  -o-animation-duration: 0.1s;
  -o-animation-name: cross-mask-in;
  -o-animation-timing-function: ease-in;
  -o-animation-fill-mode: forwards;

  animation-delay: 0.4s;
  animation-duration: 0.1s;
  animation-name: cross-mask-in;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

}

.menu-btn {position:absolute; right:10px;top:20px; font-size:16px; cursor:pointer;}

	.header.box-style { position: fixed; z-index: 105; left: 0px; top: 0px; width: 100%; height: 120px; text-align: center; background: url(../img/header-bg.png) no-repeat center center; transform: translateY(-100%); transition:all 2s ease;background-size:cover;}
.header.box-style ul {
	opacity:0;
	transition:all 0.5s ease;
}

.getMenu {
	opacity:1 !important;
	transition:all 2s ease;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.transition {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  animation-delay:1s;
}

.header.box-style .logo {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  transform: translate(-50%,-100%);
}

.logoAnimate {
  -webkit-animation-name: logoAnimate;
  animation-name: logoAnimate;
}

@-webkit-keyframes logoAnimate {
  from {
    transform: translate(-50%,-100%);
  }

  to {
    transform: translate(-50%,0%);
  }
}

@keyframes logoAnimate {
  from {
    transform: translate(-50%,-100%);
  }

  to {
    transform: translate(-50%,-0%);
  }
}

.header.box-style {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.headerHeight {
	transition:all 1s ease;
	transform:translateY(0px) !important;
}

.mobileHeight {
	transition:all 3s ease;
	margin-top: 150px !important;
}

.headeropen {
	transition:all 1s ease !important;
	height:80% !important;
}

.header.box-style .logo{ position:absolute; left:50%;top:0%;
width:122px;
height:152px;
background:url(../img/logo-bg.png) no-repeat center center;
}

.header ul {margin:0px auto}
.header ul li {display: block; float: left; margin: 0 40px;  cursor: pointer;transition: all 2s ease}
.header.box-style.bg-scroll ul li {transition: all 2s ease;margin-top:-20px;}

.header ul li a {color: #8a694f; font-family: 'Roboto', sans-serif;position: relative;font-size:16px;line-height: 100px; }
.header ul li:hover a {color: #89254f; }
.header ul li a::after {
  content:'';
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 0%;
  height: 1px;
  background: #89254f;
  transition: width 0.3s ease;
}

.header ul li:hover a::after {
  content:'';
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 50%;
  height: 1px;
  background: #89254f;
  transition: width 0.6s ease;
}
.header ul li:nth-child(4),.header ul li:nth-child(5),.header ul li:nth-child(6) {float:right;}

.fullwidth {position: relative}

html,body {background: #f9f9f9 url(../img/body-dots.png) repeat-y center center; background-size:cover;}

.absoluteleft {left:0px !important;}
.absoluteright {right:0px !important;}
.floatleft {float:left;}
.floatright {float:right !important;}

.textright {text-align: right !important}
.textleft {text-align: left !important}

::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #772a4f;
}

::selection{
  background-color:#772a4f;
  color:#fff;
}

::-moz-selection{
    background-color:#772a4f;
    color:#fff;
}

.head-title {font-size:100px;   font-family: 'Ameliana';color: #8a694f}

.box-title {
  font-family: 'Ameliana';
  color: #8a694f;
  font-size:90px;
}
.box-text p {

  font-family: 'SourceSerifPro-Regular';
  color: #8a694f;
  font-size:18px;
  letter-spacing: 1px;
  color: #8a694f;
}

.orta-banner-title {
  text-align:center; font-size:75px; color:#fff;
  font-family: 'Ameliana';
  margin:50px 0;
}

.orta-banner-text {
  font-family: 'SourceSerifPro-Regular';
  font-size:22px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 32px;
}

.villa-title {
  font-size:65px;
  margin: 20px 0;
}

.box-item .number span {font-size: 115px;font-family: 'NexaSlab-xBold';color: #8a694f !important; opacity: 0.4; line-height: 100px;position: absolute;z-index: -1;top:-40px;}

.number-title {

  font-family: 'Ameliana';
  color: #8a694f;
  font-size: 100px;
}

.number-title p {
  font-family: 'Ameliana';
  color: #8a694f;
  font-size: 60px;
}

.full-maxwidth {max-width:100% !important}

.villa-info {margin-top:50px;}
.villa-info h1 {color: #8a694f; font-size:32px;width:80%;margin:0px auto; font-family: 'AmericanTypewriter';text-align: center;border-bottom:2px solid #8a694f; padding-bottom:20px;}

.villa-info ul {margin-top:20px;font-family: 'AmericanTypewriter';}
.villa-info ul li {font-size:18px; margin:5px 0;}
.villa-info ul li span {float: right;}

.contact-info {  font-family: 'Roboto', sans-serif;color: #8a694f;}
.contact-info ul li {display: block; float:left; margin:10px 0;width:100%;font-size:18px;}

footer {
  display:block; float:left; width:100%;  position:relative;background:url(../img/footer-bg.jpg) no-repeat center center; padding:50px 0;
}

footer::before {
  content:'';
  position: absolute;
  left: 0px;
  top:0px;
  width:100%;
  height:100%;
  background: url(../img/footer-bg.png) no-repeat center center;
  background-size:cover;
  opacity: 0.8;
}

footer h1 {  font-family: 'Ameliana';  color:#fff; font-size:54px;}

footer .contact-info {
  color:#fff;
}

footer .contact-info li {font-size:16px; line-height: 40px; font-family: 'Roboto', sans-serif; font-weight: 300;}
footer .contact-info li svg {font-size:16px; color:#fff; margin-right:10px;}

footer .social {margin-top:0px;}
footer .social li {display: block; float: left; margin-right:5px;}

.link {margin-top:5%;}
.box-text {width:100%;}
.box-text.right {right:0px;}
.box-text.left {left:0px;}

.galeri img {width:100%;}
.img-box {overflow: hidden;}
.img-box a{position:relative;display:block;float:left;width:100%; height:100%;}
.img-box a::before {
  content:'';
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.6);
  transform:translateY(100%);
  -webkit-transition: all 0.35s ease-out 0.35s; -moz-transition: all 0.35s ease-out 0.35s; -ms-transition: all 0.35s ease-out 0.35s; transition: all 0.35s ease-out 0.35s;
}
.img-box a:hover::before {
  background:rgba(0, 0, 0, 0.6);
  transform:translateY(0%);
  -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out;
}

.img-box a::after {
  content:'+';
  position:absolute;
  font-size:180px;
  color: #8a694f;
  font-family: 'Ameliana';

  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  opacity: 0;
  -webkit-transition: all 0.35s ease-out 0.15s; -moz-transition: all 0.35s ease-out 0.15s; -ms-transition: all 0.35s ease-out 0.15s; transition: all 0.35s ease-out 0.15s;
}
.img-box a:hover::after {

  opacity: 1;
  -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out ;
}

footer .contact p {color: #fff; margin:20px 0; font-size:18px;  font-family: 'Roboto', sans-serif;}
::-moz-placeholder {color:#8a694f !important}
::-webkit-input-placeholder{color:#8a694f !important}

.indicator {margin-top:-10%;}

.menu.mobile {display:none;}

.mesafeler h1 {text-align:center; font-size:42px; color:#8a694f; margin-bottom:30px;font-family: 'Roboto', sans-serif;}
.mesafeler li {margin-bottom:10px; list-style-type: disc;}
.mesafeler li > p:nth-child(1) {display:block; float:left; width:60%;}
.mesafeler li > p:nth-child(2) {display: block; float:right; width:30%; text-align:right;}

.image-left .number-right {right:0px;}

.image-right .number-right {left:0px;}

#image-float {float: right;}

.menu-btn {display:none;}

.menu.mobile {position:relative;margin-top:-250px;}
.menu.mobile{transform:translateY(-200%); transition:all 2s ease !important; opacity:0;}
.menu.mobile li {width:100%; line-height:40px; margin:0 0 0 0px !important;}

.social a {display: block;-webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out;}

.social a:hover {transform: scale(1.1);-webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out;}

.indicator {margin:50px 0!important}
.katalog {-webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out;position:absolute;left:50%; transform:translateX(-50%);top:0px; background:#fff;color:#772a4f;font-family: 'Roboto', sans-serif;font-size:16px;padding:10px 20px;}
.katalog:hover {-webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -ms-transition: all 0.35s ease-out; transition: all 0.35s ease-out;padding-top:20px; color:#772a4f;}

.slider-bg {position:absolute; bottom:20%; left:50%; transform: translateX(-50%); width:50%; background-size: cover !important;height:100px; text-align:center;}

.slider-title.first { font-size:60px; color: #772a4f;font-family: 'Ameliana'; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);width:100%;}

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

  #tanitim {height:460px !important}
  .header ul li {margin:0 20px;}
  .main-container {padding-top:0px;}

  .box-type-1 {margin-bottom:500px !important; margin-top:250px !important;}

  #villalar {margin-top:0px !important;}

  .box-container {padding-top: 0px}

  .top-box-slider {margin-bottom:100px;}

  #image-float img {width:100% !important;}

  .image-left img {width:100% !important}

  .image-part img {margin-top: 0px !important}
}

@media screen and (max-width:768px) {
  .header ul li {margin:0 0px;}
  .header ul li a {font-size:15px}
  #villalar {margin-top:-100px !important; margin-bottom:0px !important}
  .orta-banner-text {line-height: 3.5vw;}

  #villalar .image {width:375px !important;display:block; float:left;}
  #villalar .bg {width:375px !important;}

  .fullwidth .text-area {width:100% !important;}

  .box-type-1 .text-block {left:0% !important; right:0% !important}

  .box-type-1 {margin-bottom:0px !important;}

  .menu-btn {display:block;}

  .menu.web {display: none;}
  .menu.mobile {display: block;}

  .header ul li a {line-height: 30px !important;}

  .header.box-style {height:100px; background-size:cover;}

  .header.box-style {position:fixed; transition:all 2s ease;}

  .header ul li:nth-child(4), .header ul li:nth-child(5), .header ul li:nth-child(6) {float: left;}

  .mesafeler {font-size:11px;}
}

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

    .slider-bg {width: 90%; height:60px;}

  .header.box-style .logo {width:115px !important; height:144px !important;}

  .logo img {width:95px !important; top:12px !important; left:10px !important;}

 .box-text p {line-height: 24px;}

  .slider-title.first {right:30px !important; font-size:30px !important;}
  .head-title {font-size:50px !important}

  .box-type-1 .image {position: relative !important; margin: 0 0 0 0 !important;}

  .box-type-1 .image img {width: 100% !important;}

  .box-type-1 {padding-bottom:100px !important}

  .sabanci-logo {text-align: center !important;}
  .sabanci-logo img {width:70% !important;}

  .contact {position: relative !important;left:0px !important;top:0px !important; transform: translate(0,0)!important;  margin:50px 0;}

  footer .contact p {text-align: center !important}

  footer .contact p img {float: none !important}

  footer {height: 760px !important;}

  .top-box-slider {height: 300px !important; margin-bottom:50px;}

  .box-title {background-size:cover !important;}

  .box-item .number span {font-size:80px; left:30px;}

  .number-title {font-size:70px;}
  .number-title p {font-size:50px; margin-top:-30px;}

  .absoluteleft img {float: left !important;}

  .full-maxwidth .box-text {width:100% !important}

  #villa2 {margin-top:100px;}

  .box-title {font-size:45px !important}

  iframe {margin-top:100px;}
  #tanitim {margin-top: 0px;}

.rights {bottom:10px !important}

  #slider {height:100% !important; margin: 0 0 0 0;}
  }

  @media screen and (max-width:680px) {
    .box-title {padding:0px 0px !important;}
    .box-text p {font-size:14px;}
    .box-type-0 .image {position: relative;}
    .box-type-1 {margin-top:100px !important}

    .box-type-1 .image {margin-top:40%;}
    .box-type-1 .image img {width:100%;}

    .box-type-1 .text-block {position:relative !important}

    .box-item .number span {z-index: 33;top:-30px !important}
    .box-item .number {right:5% !important;}

    .indicator {display:none;}

    footer {height:550px !important}

    footer > .container > .row {margin-bottom:150px;}

    .orta-banner-text {line-height: 7vw !important; width:90%; margin:0px auto; font-size:16px;}

    .header ul li a::after {display:none;}

    footer .container {height:100%;}

    footer {padding: 0 0 0 0;position:relative; padding-top:50px;}

    footer > .container > .row {margin-bottom:0px;}

  .footer-logo {position:absolute; bottom:-250px;}

  .full-maxwidth .box-text {margin-left:0px !important;}

  .konsept-box { margin-top:0px !important;}

  .villa-image {padding:0px !important}

  .ft-logo {text-align: center}
  .ft-logo img {width:50% !important}
  .footer-sabanci {text-align: center}
  .footer-sabanci img {width:50% !important}

  .number-title p {font-size:24px; margin-top:-50px;}

  .konsept5 img {margin-top: 0px !important}

  .image-left .image-part img {margin-top:0px !important}

  .image-right .number-title {text-align:left !important; margin-left:30px;}
  .number-title {font-size:42px !important}

  .image-right {margin-top:100px;}
  .image-left {margin-top:100px;}

  .image-left .text-part {margin-top:0px !important}

  .box-container .image-right:nth-child(1) {margin-top: 0px;}

  .box-container .image-left:nth-child(1) {margin-top: 0px;}

  #image-float {float: left;}
  #text-float {float: right; margin-top:0px !important;}

  }

  @media screen and (max-width:414px) {
   #tanitim {height:280px !important}
  }

  @media screen and (max-width:380px) {
    .headeropen {height:100% !important}
    .villa-info h1 {font-size:24px;}
    .villa-info ul li {font-size:14px;}
  }

#slide-show {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  width: 100vw;
  min-width: 100vw !important;
}

.slidex {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: -1;
}

.activx {
  opacity: 1;
}

.slideshow-nav {
  position: absolute;
  bottom: 50%;
  width: 100vw;
  min-width: 100vw !important;
  font-size: 30px;
  background: transparent;
}

.previousx {
  float: left;
}

.nextx {
  float: right;
}

.bg-slider {
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  background-size: cover !important;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  width: 100vw;
  min-width: 100vw !important;
  position: absolute;
  top:0;
  left:0;
}

.nav-link {
  transition: all 0.4s;
  padding: 15px;
  color:#772a4f;
  font-size: 60px;
}
.nav-link:hover {
  opacity: 1;
  transform: scale(1.2);
  color:#8a694f;
}

.arrow a {
  position: absolute;
  bottom:0;
  left: 50%;
  color: #fff;
  transition: all 0.4s;
  cursor: pointer;
  font-size: 80px;
  padding: 0 0 20px 0;
  opacity: 0.2;
}

.arrow a:hover {
  color: #999;
  font-size: 100px;
  opacity: 0.8;
}

.galeri .col-md-4 {margin:5px 0;}

.gallery-info {background: #8a694f;padding: 10px 0px 10px 20px;margin-top:-2px; color:#fff;}

/* ==========================================================================
   YENİ SİTE EKLERİ (statik HTML dönüşümü, Ekim 2026)
   ========================================================================== */

/* --- .row içinde kolon olmayan öğeler BS5'te %100 genişlik alıyordu --- */
.row > .text-area { width: auto; max-width: none; }

/* --- Açılış / yükleniyor perdesi (eski satır içi stillerden taşındı) --- */
.transition { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #f2f2f2; z-index: 99999999; }
.transition img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; }
.transition-kucuk img { width: 100px; }
.transition-buyuk img { width: 15%; }
@media screen and (max-width: 680px) { .transition-buyuk img { width: 50%; } }

/* --- Font Awesome yerine kullanılan satır içi SVG ikonlar --- */
.ikon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.nav-link .ikon, .arrow .ikon { stroke-width: 1.5; }
.ikon-pdf { stroke-width: 1.6; }

/* --- Menü: bulunulan sayfa --- */
.header ul li a.aktif { color: #772a4f; }

/* --- Kurumsal sayfası (eski sayfa içi <style> bloğundan taşındı) --- */
.sayfa-kurumsal .box-title { margin-bottom: 30px; }
.sayfa-kurumsal .box-text p { width: 80%; margin: 0 auto; }

/* --- İletişim: tıklanabilir telefon / e-posta, harita --- */
.contact-info a { color: inherit; }
.contact-info a:hover { color: #772a4f; }
.harita { display: block; width: 100%; }
.harita-link { margin-top: 10px; text-align: right; font-family: 'Roboto', sans-serif; font-size: 14px; }
.harita-link a { color: #8a694f; }
.footer-tel { color: inherit; }
.footer-tel:hover { color: inherit; opacity: .85; }

/* --- Lightbox (fancybox yerine) --- */
body.lb-acik { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 100000000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; }
.lb[hidden] { display: none; }
.lb.lb-gorunur { opacity: 1; }
.lb-arka { position: absolute; inset: 0; background: rgba(20, 16, 18, .92); }
.lb-icerik { position: relative; margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lb-gorsel { display: block; max-width: 92vw; max-height: 82vh; width: auto; height: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: opacity .2s ease; }
.lb.lb-yukluyor .lb-gorsel { opacity: .3; }
.lb-aciklama { margin-top: 12px; color: #fff; font-family: 'Roboto', sans-serif; font-size: 15px; text-align: center; }
.lb-sayac { position: absolute; left: 20px; top: 18px; color: rgba(255, 255, 255, .8); font-family: 'Roboto', sans-serif; font-size: 14px; }
.lb button { position: absolute; border: 0; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; line-height: 1; transition: background .2s ease; }
.lb button:hover, .lb button:focus-visible { background: #772a4f; outline: none; }
.lb-kapat { right: 14px; top: 10px; width: 44px; height: 44px; font-size: 32px; border-radius: 50%; }
.lb-onceki, .lb-sonraki { top: 50%; transform: translateY(-50%); width: 52px; height: 72px; font-size: 48px; }
.lb-onceki { left: 10px; }
.lb-sonraki { right: 10px; }
.lb.lb-tek .lb-onceki, .lb.lb-tek .lb-sonraki { display: none; }
.lb-yukleniyor { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; opacity: 0; animation: lb-don .8s linear infinite; pointer-events: none; }
.lb.lb-yukluyor .lb-yukleniyor { opacity: 1; }
@keyframes lb-don { to { transform: rotate(360deg); } }
@media (max-width: 576px) {
	.lb-onceki, .lb-sonraki { width: 40px; height: 56px; font-size: 36px; }
}