/*

TemplateMo 571 Hexashop

https://templatemo.com/tm-571-hexashop

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #2a2a2a;
  color: #fff;
}

::-moz-selection {
  background: #2a2a2a;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-border-button a {
  font-size: 13px;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px 25px;
  display: inline-block;
  font-weight: 500;
  transition: all .3s;
}

.main-border-button a:hover {
  background-color: #fff;
  color: #2a2a2a;
}

.main-white-button a {
  font-size: 13px;
  color: #2a2a2a;
  background-color: #fff;
  padding: 12px 25px;
  display: inline-block;
  border-radius: 3px;
  font-weight: 600;
  transition: all .3s;
}

.main-white-button a:hover {
  opacity: 0.9;
}

.main-text-button a {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  transition: all .3s;
}

.main-text-button a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  font-size: 34px;
  font-weight: 700;
  color: #2a2a2a;
}

.section-heading span {
  font-size: 14px;
  color: #a1a1a1;
  font-style: italic;
  font-weight: 400;
}



/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  border-bottom: none !important;
  background-color: #fff;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}


.background-header .main-nav .nav li:hover a {
  color: #2a2a2a!important;
}

.background-header .nav li a.active {
  color: #2a2a2a!important;
}






.header-area {
 
  box-shadow: none;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  height: 80px;
  min-height: 80px;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 999;
  height: 20px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  
}

.header-area  .nav{
  min-height: 100px;
  background: transparent;
}



.header-area.header-sticky{
  height: 102px !important;
}

.header-area.header-sticky .logo-text{
  margin-top: -10px;
  padding: 1rem;
}

.logo{
  display: flex;
  align-items: center;
  margin-top: -25px;  /* Bu satırı ekleyin */
  margin-left:-200px !important;

}
.logo-text {
  margin-left: 15px;
  font-size: 19px;
  font-weight: bold;
  color: #333;  /* Bu satırı ekleyin */
}


.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
 margin-left: -80px;  
  transform: scale(5.3); /* 5.3 kat büyüt */
  transform-origin: left center; /* Sol köşeden büyümesini sağla */
  transition: all 0.3s ease 0s;
  margin-top: -40px;

}





.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0; /* Yeni eklenen satır */
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #aaa!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #aaa!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #aaa!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #aaa;
}

/* Logo container (a.etiketi) için flex ayarları */
.main-nav .logo {
  display: block;
  align-items: center;
  text-decoration: none; /* Link alt çizgisini kaldır */
  gap: 12px; /* Logo ile metin arasındaki boşluk */
}

.main-nav .logo img {
  width: 60px; /* Logo boyutu */
  height: auto;
}

.main-nav .logo .logo-text {
  font-size: 1.3rem;
  font-weight: bold;
  color: #000;
}

/* 768px ve daha küçük ekranlarda alt alta */
@media (max-width: 768px) {
  .main-nav .logo {
    flex-direction: column; /* Alt alta sırala */
    text-align: center;
  }

  .main-nav .logo .logo-text {
    font-size: 1.1rem;
    margin-top: 10px; /* Metinle logo arasında boşluk */
  }

  .main-nav .logo img {
    width: 50px; /* Mobilde daha küçük logo */
  }
}
/* Çok küçük ekranlar (örneğin 480px altı) */
@media (max-width: 480px) {
  .main-nav .logo .logo-text {
    font-size: 1rem;
  }
  .main-nav .logo img {
    width: 45px;
  }
}






@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
    margin-left: -40px !important;
    margin-top: 0px;
    transform: scale(2) !important; /* 1.5 kat büyük */
    transform-origin: left center;
    position: relative;
    z-index: 999;
    line-height: 60px;
  }
  
  .header-area .main-nav .logo img {
    width: 140px !important; /* Logo boyutu büyütüldü */
    height: auto;
  }
  
  .header-area .logo {
    margin-left: 20px !important;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #aaa!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 60px !important;
    box-shadow: none;
    text-align: left !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }
  
  .header-area .main-nav {
    overflow: visible !important;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
    position: absolute !important;
    right: 20px !important;
    top: 25px !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    background-color: rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 5px;
  }
  
  .header-area .main-nav .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav .menu-trigger {
    display: block !important;
    position: fixed !important; /* Sabit pozisyon */
    right: 20px !important;
    top: 30px !important;
    z-index: 9999 !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    margin-top: 80px !important;
    background-color: #fff;
    position: relative;
    z-index: 999;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #aaa!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  border-bottom: 3px dotted #eee;
  padding-top: 35px;
  padding-bottom: 30px;
  z-index: 1;
}

.main-banner .left-content .thumb img {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.main-banner .left-content .inner-content {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .left-content .inner-content h4 {
  color: #fff;
  margin-top: -10px;
  font-size: 52px;
  font-weight: 700;
  margin-bottom: 20px;
}

.main-banner .left-content .inner-content span {
  font-size: 16px;
  color: #fff;
  font-weight: 400;
  font-style: italic;
  display: block;
  margin-bottom: 30px;
}


.main-banner .right-content .right-first-image {
  margin-bottom: 28.5px;

}

.main-banner .right-content .right-first-image .thumb {
  position: relative;
  text-align: center;
}

.main-banner .right-content .right-first-image .thumb img {
  position: relative;
  width: 200%;
  margin-bottom: 28.5px;

}

.main-banner .right-content .right-first-image .thumb .inner-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.main-banner .right-content .right-first-image .thumb .inner-content h4 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

.main-banner .right-content .right-first-image .thumb .inner-content span {
  font-size: 16px;
  color: #fff;
  font-style: italic;
}



.main-banner .right-content .right-first-image .thumb .hover-content {
  position: absolute;
  top: 15px;
  right: 15px;
  left: 15px;
  bottom: 15px;
  text-align: center;
  background-color: rgba(42,42,42,.97);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

.main-banner .right-content .right-first-image .thumb:hover .hover-content {
  opacity: 1;
  visibility: visible;
}

.main-banner .right-content .right-first-image .thumb .hover-content .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.main-banner .right-content .right-first-image .thumb .hover-content h4 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
}

.main-banner .right-content .right-first-image .thumb .hover-content p {
  color: #fff;
  padding: 0px 20px;
  margin-bottom: 20px;
}







/* Sağ taraftaki küçük resimler */
.right-first-image .thumb img {
    width: 100%;
    height: 300px !important; /* İstediğiniz yüksekliği ayarlayın */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 5px; /* Resimler arası boşluk */
}
/*
---------------------------------------------
Amerikan
---------------------------------------------
*/


#Amerikan {
  padding: 20px 0;
  text-align: center; /* Butonları ortalamak için */
}

#Amerikan .navigation-buttons {
  margin-top: 20px;
}

#Amerikan .nav-btn {
  background-color: #020303;
  color: white;
  border: none;
  padding: 12px 24px;
  margin: 0 10px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#Amerikan .nav-btn:hover {
  background-color: #363131;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


#Amerikan .nav-btn:active {
  transform: translateY(0);
}

#Amerikan .geri_tus,
#Amerikan .ileri_tus {
    width: 70px;
    height: 70px; /* Aynı yükseklik */
    background-color: #30302e;
    opacity: 1;
    font-size: 50px; /* Daha uyumlu font size */
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Yuvarlak görünüm */
}

#Amerikan .geri_tus {
    margin-right: 40px;
}

#Amerikan .ileri_tus {
    margin-left: 40px;
}
/* Mobil için responsive */
@media (max-width: 768px) {
  .nav-btn {
    padding: 10px 20px;
    font-size: 14px;
    margin: 0 5px;
  }
}


/*
---------------------------------------------
Women
---------------------------------------------
*/
#PVC {
  padding: 20px 0;
  text-align: center; /* Butonları ortalamak için */
}
#PVC .geri_tus,
#PVC .ileri_tus {
    width: 70px;
    height: 70px; /* Aynı yükseklik */
    background-color: #30302e;
    opacity: 1;
    font-size: 50px; /* Daha uyumlu font size */
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Yuvarlak görünüm */
}

#PVC .geri_tus {
    margin-right: 40px;
}

#PVC .ileri_tus {
    margin-left: 40px;
}

/*
---------------------------------------------
Kids
---------------------------------------------
*/

#Lake {
  padding: 20px 0;
  text-align: center;
}
#Lake .geri_tus,
#Lake .ileri_tus {
    width: 70px;
    height: 70px; /* Aynı yükseklik */
    background-color: #30302e;
    opacity: 1;
    font-size: 50px; /* Daha uyumlu font size */
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Yuvarlak görünüm */
}

#Lake .geri_tus {
    margin-right: 40px;
}

#Lake .ileri_tus {
    margin-left: 40px;
}


#Celik {
  padding: 20px 0;
  text-align: center;
}
#Celik .geri_tus,
#Celik .ileri_tus {
    width: 70px;
    height: 70px; /* Aynı yükseklik */
    background-color: #30302e;
    opacity: 1;
    font-size: 50px; /* Daha uyumlu font size */
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Yuvarlak görünüm */
}

#Celik .geri_tus {
    margin-right: 40px;
}

#Celik .ileri_tus {
    margin-left: 40px;
}

#Mutfak {
  padding: 20px 0;
  text-align: center;
}
#Mutfak .geri_tus,
#Mutfak .ileri_tus {
    width: 70px;
    height: 70px; /* Aynı yükseklik */
    background-color: #30302e;
    opacity: 1;
    font-size: 50px; /* Daha uyumlu font size */
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Yuvarlak görünüm */
}

#Mutfak .geri_tus {
    margin-right: 40px;
}

#Mutfak .ileri_tus {
    margin-left: 40px;
}

#Mutfak



/*
---------------------------------------------
Explore
---------------------------------------------
*/

#explore {
  padding-top: 90px;
  padding-bottom: 90px;
  border-bottom: 3px dotted #eee;
}

#explore .left-content {
  margin-right: 30px;
}

#explore .left-content h2 {
  font-size: 34px;
  font-weight: 700;
  color: #2a2a2a;
}

#explore .left-content span {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

#explore .left-content .quote {
  margin-top: 25px;
}

#explore .left-content .quote i {
  float: left;
  font-size: 32px;
  margin-right: 15px;
  margin-top: 10px;
}

#explore .left-content .quote p {
  font-style: italic;
  color: #2a2a2a;
  font-weight: 500;
}

#explore .left-content p {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

#explore .left-content .main-border-button a {
  color: #2a2a2a;
  border-color: #2a2a2a;
  margin-top: 35px;
}

#explore .left-content .main-border-button a:hover {
  background-color: #2a2a2a;
  color: #fff;
}

#explore img {
  width: 100%;
  overflow: hidden;
}

#explore .leather {
  margin-bottom: 30px;
}

#explore .first-image {
  margin-bottom: 30px;
}

#explore .leather,
#explore .types {
  min-height: 255px;
  background-color: #f8f8f8;
  text-align: center;
  width: 100%;
}

#explore .leather h4,
#explore .types h4 {
  font-size: 24px;
  font-weight: 700;
  color: #2a2a2a;
  padding-top: 90px;
  margin-bottom: 5px;
}

#explore .leather span,
#explore .types span {
  font-size: 14px;
  font-style: italic;
  color: #aaa;
  font-weight: 500;
}

/* 
---------------------------------------------
Social
--------------------------------------------- 
*/
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  /* visibility: hidden; */ /* Bu satır YORUMDAYSA, buton GÖRÜNÜR */
  transition: all .3s;
}
/* --- WhatsApp: her zaman görünür ve menüden üstte olsun --- */
.whatsapp-button {
  position: fixed !important;   /* sayfada sabit kalsın */
  right: 40px !important;       /* sağ alt köşe (isteğe göre değiştir) */
  bottom: 40px !important;      /* sağ alt köşe (isteğe göre değiştir) */
  z-index: 100000 !important;   /* kesinlikle üst katmanda olsun */
  box-shadow: 0 6px 20px rgba(37,211,102,0.35);
}

/* Küçük ekranlar için biraz daha küçük: */
@media (max-width: 576px) {
  .whatsapp-button {
    right: 18px !important;
    bottom: 18px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 6px !important;
  }
}

.whatsapp-button:hover {
  transform: scale(1.1);
}
.whatsapp-button svg {
  width: 100%;
  height: 100%;
}

#social {
  margin-top: 90px;
  padding-bottom: 90px;
  border-bottom: 3px dotted #eee;
}

#social .col-2 {
  padding-left: 0;
  padding-right: 0;
}

#social .images {
  margin-top: 60px;
  padding-left: 15px;
  padding-right: 15px;
}

#social .thumb {
  position: relative;
}

#social .thumb .icon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.85);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

#social .thumb:hover .icon {
  opacity: 1;
  visibility: visible;
}

#social .thumb .icon h6 {
  color: #fff;
  position: absolute;
  font-size: 14px;
  bottom: 40px;
  font-weight: 400;
  left: 15px;
}

#social .thumb .icon i {
  color: #fff;
  position: absolute;
  bottom: 15px;
  left: 15px;
}

#social .thumb img {
  width: 100%;
  overflow: hidden;
}


/* 
---------------------------------------------
Subscribe
--------------------------------------------- 
*/

.subscribe {
  margin-top: 90px;
}

.subscribe .section-heading {
  margin-bottom: 30px;
}

.subscribe .section-heading h2 {
  line-height: 55px;
}

.subscribe form input {
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0px 15px;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #aaa;
  border-radius: 0px;
  border: 1px solid #7a7a7a;
  box-shadow: none;
}

.subscribe form input::focus {
  border-color: #2a2a2a;
  border-radius: 0px;
}

.subscribe form button {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  background-color: #2a2a2a;
  box-shadow: none;
  border: 1px solid transparent;
  color: #fff;
  transition: all 0.3s;
}

.subscribe form button:hover {
  background-color: #fff;
  border: 1px solid #2a2a2a;
  color: #2a2a2a;
}

.subscribe ul li {
  margin-bottom: 30px;
  display: block;
}

.subscribe ul li {
  font-size: 16px;
  font-weight: 700;
  color: #2a2a2a;
}

.subscribe ul li span,
.subscribe ul li span a {
  font-size: 14px;
  font-weight: 400;
  color: #aaa;
}

.subscribe ul li span a:hover {
  color: #2a2a2a;
}


/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

footer {
  margin-top: 60px;
  padding: 60px 0px 30px 0px;
  background-color: #000000;
}

footer .logo {
  margin-bottom: 20px;
}

footer .logo img{
  height: 100px;
  width: 100px;
  margin-left: 190px;
  margin-top: 20px;
}


.first-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.footer-text p {
    color: #ffffff; /* İstediğiniz rengi yazabilirsiniz */
    margin-top: 10px;
    font-size: 16px;
}





.container {
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.col-lg-3, .col-lg-6 {
    padding: 15px;
}

.col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
}

.col-lg-6 {
    flex: 0 0 50%;
}

.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.map-container iframe {
    width: 100%;
    height: 450px;
    border-radius: 8px;
    border: 0;
}
.whatsapp-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 10px;
    box-sizing: border-box;
}

.whatsapp-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    padding: 10px;
     transition: transform 0.3s ease;
    box-sizing: border-box;

}

.whatsapp-button:hover {
    transform: scale(1.1);
}
.whatsapp-button svg {
    width: 100%;
    height: 100%;
}

/* Mobil için */
@media (max-width: 992px) {
    .row {
        flex-direction: column;
    }

    .col-lg-3, .col-lg-6 {
        flex: 0 0 100%;
        text-align: center;
    }
    .col-lg-3{
       padding: 15px 5px;
    }

    .map-container {
        order: 3;
    }

    .whatsapp-overlay {
        order: 2;
    }

    .first-item {
        order: 1;
    }

     .map-container iframe {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .footer-text p {
        font-size: 14px;
        margin-top: 8px;
    }

       .whatsapp-button {
        width: 50px;
        height: 50px;
        padding: 8px;
    }
}

@media (max-width: 576px) {
    .footer-text p {
        font-size: 12px;
        margin-top: 6px;
    }

        .whatsapp-button {
        width: 40px;
        height: 40px;
        padding: 5px;
    }
}








.map-responsive {
    width: 100%;
    max-width: 500px;
    height: 0;
    padding-bottom: 75%;
    position: relative;
    overflow: hidden;
}

/* Masaüstü için sağa */
@media (min-width: 992px) {
    .map-responsive {
        margin-left: auto;
    }
}

/* Mobil için ortada */
@media (max-width: 991px) {
    .map-responsive {
        margin-left: auto;
        margin-right: auto;
    }
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}



@media (max-width: 991px) {
    .map-container {
        padding-left: 0 !important;
        text-align: center;
    }
    .map-container iframe {
        max-width: 100%;
        height: 300px;
    }
}


.whatsapp-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding-top: 0;
    position: relative;
    top: -200px !important;
}

.whatsapp-button {
    display: inline-block;
    background-color: #25D366;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.whatsapp-button svg {
    width: 50px;
    height: 50px;
}

.map-container {
    width: 100%;
}

.map-container iframe {
    max-width: 100%;
}




@media (max-width: 768px) {
    .whatsapp-overlay {
        padding: 15px 5px;
    }
}

@media (min-width: 992px) {
    .whatsapp-overlay {
        
        left: 1000px;
        margin-top: -40px !important;  /* İstediğiniz konuma göre değiştirin: left, right */
    }
}

/* Tablet ve Mobil */
@media (max-width: 991px) {
    .whatsapp-overlay {
        top: -130px;
        left: 400px;  /* Mobilde farklı konum istiyorsanız değiştirin */
        padding: 10px;
    }
}




@media (max-width: 991px) {
    .map-container iframe {
        width: 100% !important;
        height: 350px !important;
    }
}

@media (max-width: 991px) {
    .whatsapp-container {
        height: auto;
        margin-bottom: 30px;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .whatsapp-container {
        margin-bottom: 20px;
    }
    
    .whatsapp-button {
        width: 60px;
        height: 60px;
    }
    
    .whatsapp-button svg {
        width: 35px;
        height: 35px;
    }
    
    .whatsapp-number {
        font-size: 13px;
        margin-top: 8px;
    }
}


@media (max-width: 991px) {
    .map-container iframe {
        width: 100% !important;
        height: 350px !important;
    }
}





/* 
---------------------------------------------
Products Page
--------------------------------------------- 
*/

.page-heading {
  margin-top: 160px;
  margin-bottom: 30px;
  background-image: url(../images/products-page-heading.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-heading .inner-content {
  padding: 150px 0px;
  text-align: center;
}

.page-heading .inner-content h2 {
  font-size: 52px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 15px;
}

.page-heading .inner-content span {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  font-style: italic;
}

#products .section-heading {
  text-align: center;
  margin-bottom: 60px;
  margin-top: 80px;
}

#products .item {
  margin-bottom: 30px;
}

#products .item .thumb img {
  width: 100%;
  overflow: hidden;
}

#products .item .down-content {
  padding-top: 20px;
  position: relative;
  z-index: 3;
  background-color: #fff;
}

#products .item .down-content h4 {
  font-size: 22px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 8px;
}

#products .item .down-content span {
  font-size: 18px;
  color: #a1a1a1;
  font-weight: 500;
  display: block;
}

#products .item .down-content ul.stars {
  position: absolute;
  right: 0;
  top: 20px;
}

#products .item .down-content ul.stars li {
  display: inline;
  font-size: 13px;
}

#products .item .thumb .hover-content {
  position: absolute;
  z-index: 2;
  text-align: center;
  bottom: -60px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

#products .item .thumb:hover .hover-content {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}

#products .item .thumb {
  position: relative;
}

#products .item .thumb .hover-content ul li {
  display: inline;
  margin: 0px 10px;
}

#products .item .thumb .hover-content ul li a {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  display: inline-block;
  color: #2a2a2a;
  background-color: #fff;
}

#products .pagination {
  margin-top: 30px;
  margin-bottom: 40px;
}

#products .pagination ul {
  text-align: center;
  width: 100%;
}

#products .pagination ul li {
  display: inline;
  margin: 0px 5px;
}

#products .pagination ul li a {
  width: 44px;
  height: 44px;
  border: 1px solid #2a2a2a;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: #2a2a2a;
}

#products .pagination ul li a:hover,
#products .pagination ul li.active a {
  background-color: #2a2a2a;
  color: #fff;
}



/* 
---------------------------------------------
Single Product Page
--------------------------------------------- 
*/

#product {
  margin-top: 80px;
}

#product .left-images img {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}

#product .right-content {
  position: relative;
  z-index: 3;
  background-color: #fff;
}

#product .right-content h4 {
  font-size: 22px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 0px;
}

#product .right-content span.price {
  font-size: 18px;
  color: #a1a1a1;
  font-weight: 500;
  display: block;
  margin-top: 5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

#product .right-content ul.stars {
  position: absolute;
  right: 0;
  top: 0;
}

#product .right-content ul.stars li {
  display: inline;
  font-size: 13px;
}

#product .right-content span {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

#product .right-content .quote {
  margin-top: 25px;
}

#product .right-content .quote i {
  float: left;
  font-size: 32px;
  margin-right: 15px;
  margin-top: 10px;
}

#product .right-content .quote p {
  font-style: italic;
  color: #2a2a2a;
  font-weight: 500;
}

#product .right-content p {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

.quantity-content {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  width: 100%;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.quantity-content .left-content {
  float: left;
  margin-right: 30px;
}

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

.quantity-content .left-content h6 {
  padding-top: 7px;
  font-size: 20px;
  font-weight: 700;
  color: #aaa;
  position: relative;
  z-index: 11;
}

.total h4 {
  float: left;
  font-size: 20px;
  margin-top: 10px;
  color: #aaa!important;
}

.total .main-border-button {
  text-align: right;
}

.total .main-border-button a {
  border-color: #2a2a2a;
  color: #2a2a2a;
}

.total .main-border-button a:hover {
  color: #fff;
  background-color: #2a2a2a;
}

.quantity {
  display: inline-block; }
 
 .quantity .input-text.qty {
  width: 35px;
  height: 39px;
  padding: 0 5px;
  text-align: center;
  background-color: transparent;
  border: 1px solid #efefef;
 }
 
 .quantity.buttons_added {
  text-align: left;
  position: relative;
  white-space: nowrap;
  vertical-align: top; }
 
 .quantity.buttons_added input {
  display: inline-block;
  margin: 0;
  vertical-align: top;
  box-shadow: none;
 }
 
 .quantity.buttons_added .minus,
 .quantity.buttons_added .plus {
  padding: 7px 10px 8px;
  height: 39px;
  background-color: #ffffff;
  border: 1px solid #efefef;
  cursor:pointer;}
 
 .quantity.buttons_added .minus {
  border-right: 0; }
 
 .quantity.buttons_added .plus {
  border-left: 0; }
 
 .quantity.buttons_added .minus:hover,
 .quantity.buttons_added .plus:hover {
  background: #eeeeee; }
 
 .quantity input::-webkit-outer-spin-button,
 .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0; }
  
  .quantity.buttons_added .minus:focus,
 .quantity.buttons_added .plus:focus {
  outline: none; }



/* 
---------------------------------------------
About Us Page
--------------------------------------------- 
*/

.about-page-heading {
  margin-top: 160px;
  margin-bottom: 30px;
  background-image: url(../images/about-us-page-heading.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.about-us {
  margin-top: 80px;
}

.about-us .left-image img {
  width: 100%;
  overflow: hidden;
}

.about-us .right-content {
  margin-left: 30px;
}

.about-us .right-content h4 {
  font-size: 34px;
  font-weight: 700;
  color: #2a2a2a;
}

.about-us .right-content span {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

.about-us .right-content .quote {
  margin-top: 25px;
}

.about-us .right-content .quote i {
  float: left;
  font-size: 32px;
  margin-right: 15px;
  margin-top: 10px;
}

.about-us .right-content .quote p {
  font-style: italic;
  color: #2a2a2a;
  font-weight: 500;
}

.about-us .right-content p {
  font-size: 14px;
  color: #aaaaaa;
  font-weight: 500;
  display: block;
  margin-top: 25px;
}

.about-us .right-content ul {
  border-top: 3px dotted #eee;
  margin-top: 30px;
  padding-top: 30px;
}

.about-us .right-content ul li {
  display: inline-block;
  margin-right: 5px;
}

.about-us .right-content ul li a {
  width: 44px;
  height: 44px;
  background-color: #2a2a2a;
  color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border-radius: 50%;
  transition: all .5s;
}

.about-us .right-content ul li a:hover {
  background-color: #eee;
  color: #2a2a2a;
}

.our-team {
  margin-top: 100px;
  padding-top: 90px;
  padding-bottom: 90px;
  border-top: 3px dotted #eee;
}

.our-team .section-heading {
  margin-bottom: 60px;
  text-align: center;
}

.our-team .section-heading h2 {
  margin-bottom: 10px;
}

.our-team .team-item .thumb {
  position: relative;
}

.our-team .team-item .thumb img {
  width: 100%;
  overflow: hidden;
}

.our-team .team-item .thumb .hover-effect {
  position: absolute;
  background-color: rgba(0,0,0,0.9);
  width: 100%;
  text-align: center;
  top: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

.our-team .team-item .thumb:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

.our-team .team-item .thumb .hover-effect .inner-content {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  transform: translateY(-22px);
}

.our-team .team-item .thumb .hover-effect .inner-content ul li {
  display: inline-block;
  margin: 0px 5px;
}

.our-team .team-item .thumb .hover-effect .inner-content ul li a {
  width: 44px;
  height: 44px;
  background-color: #fff;
  color: #2a2a2a;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border-radius: 50%;
  transition: all .3s;
}

.our-team .team-item .thumb .hover-effect .inner-content ul li a:hover {
  background-color: #2a2a2a;
  color: #fff;
}

.our-team .team-item .down-content {
  text-align: center;
  padding-top: 25px;
}

.our-team .team-item .down-content h4 {
  font-size: 24px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 5px;
}

.our-team .team-item .down-content span {
  font-size: 14px;
  color: #a1a1a1;
  font-weight: 500;
  display: block;
  font-style: italic;
}

.our-services {
  padding-top: 90px;
  padding-bottom: 90px;
  border-top: 3px dotted #eee;
  border-bottom: 3px dotted #eee;
}

.our-services .section-heading {
  margin-bottom: 60px;
  text-align: center;
}

.our-services .section-heading h2 {
  margin-bottom: 10px;
}

.our-services .service-item {
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.10);
  text-align: center;
}

.our-services .service-item img {
  width: 100%;
  overflow: hidden;
}

.our-services .service-item h4 {
  font-size: 24px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 20px;
}

.our-services .service-item p {
  margin-bottom: 25px;
}



/* 
---------------------------------------------
contact Us Page
--------------------------------------------- 
*/

.contact-us {
  margin-top: 90px;
  border-bottom: 3px dotted #eee;
  padding-bottom: 90px;
}

.contact-us .section-heading {
  margin-bottom: 40px;
}

.contact-us #map {
  margin-right: 30px;
}

.contact-us form input {
  width: 100%;
  height: 44px;
  line-height: 44px;
  padding: 0px 15px;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #aaa;
  border-radius: 0px;
  border: 1px solid #7a7a7a;
  box-shadow: none;
}

.contact-us form input::focus {
  border-color: #2a2a2a;
  border-radius: 0px;
}

.contact-us form textarea {
  width: 100%;
  height: 140px;
  min-height: 120px;
  max-height: 200px;
  margin-top: 30px;
  margin-bottom: 25px;
  line-height: 44px;
  padding: 0px 15px;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #aaa;
  border-radius: 0px;
  border: 1px solid #7a7a7a;
  box-shadow: none;
}

.contact-us form textarea::focus {
  border-color: #2a2a2a;
  border-radius: 0px;
}

.contact-us form button {
  width: 44px;
  height: 44px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  background-color: #2a2a2a;
  box-shadow: none;
  border: 1px solid transparent;
  color: #fff;
  transition: all 0.3s;
}

.contact-us form button:hover {
  background-color: #fff;
  border: 1px solid #2a2a2a;
  color: #2a2a2a;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .main-banner .right-content .right-first-image .thumb .hover-content p {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-banner .right-content .right-first-image .thumb .hover-content p {
    display: block;
  }
  .header-area .main-nav .nav li.submenu:after {
    right: 3px;
  }
  .header-area .main-nav .nav li.submenu {
    padding-right: 15px;
  }
  .header-area .main-nav .nav li {
    padding-right: 5px;
    padding-left: 5px;
  }
  .header-area .main-nav .nav li a {
    font-size: 14px;
    letter-spacing: 0px;
  }
  .main-banner .left-content {
    margin-bottom: 30px;
  }
  #explore .left-content {
    margin-bottom: 30px;
  }
  #explore .right-content .types {
    margin-top: 30px;
  }
  .subscribe input {
    margin-bottom: 15px;
  }
  .subscribe form {
    text-align: center;
    margin-bottom: 30px;
  }
  .about-us .right-content {
    margin-left: 0px;
    margin-top: 30px;
  }
  .our-team .team-item {
    margin-bottom: 30px;
  }
  .our-services .service-item {
    margin-bottom: 30px;
  }
  .contact-us #map {
    margin-right: 0px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .main-banner .left-content .thumb .inner-content {
    left: 50%;
    top: 47.5%;
    transform: translate(-50%,-50%);
    text-align: center;
  }
  .subscribe form button {
    width: 100%;
  }
  footer {
    text-align: center;
  }
  footer h4 {
    margin-top: 30px;
  }
}





#preloader {
  overflow: hidden;
  background-color: #2a2a2a;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 99999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper > div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* Tüm kapı resimlerine uygulanacak boyutlandırma */
/* Tüm kapı resimlerine uygulanacak boyutlandırma */
.owl-men-item .item .thumb img,
.owl-women-item .item .thumb img,
.owl-celik-item .item .thumb img,
.owl-mutfak-item .item .thumb img,
.owl-teslim-item .item .thumb img {
    max-width: 200px;
    max-height: 280px;
    height: auto;
    width: auto;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

/* Mobil uyumlu */
/* Mobil uyumlu */
@media (max-width: 768px) {
    .owl-men-item .item .thumb img,
    .owl-women-item .item .thumb img,
    .owl-celik-item .item .thumb img,
    .owl-mutfak-item .item .thumb img {
        max-width: 160px;
        max-height: 220px;
    }
}


/* Butonları tam ortalamak için konteyner */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 12px;
}

/* Buton stili: yeni renkler */
.geri_tus, .ileri_tus {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: #4361ee !important; /* Elektrik mavisi */
    color: #ffffff !important; /* Beyaz ok */
    border: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background-color 0.2s ease;
}

/* Hover efekti (isteğe bağlı, daha canlı) */
.geri_tus:hover, .ileri_tus:hover {
    background-color: #3a56d4 !important; /* Biraz daha koyu mavi */
}



/* Main Banner'daki tüm resimleri sabit yükseklikte ve hizalı göster */
#top .right-content .thumb img {
    width: 100%;
    height: 180px; /* Sabit yükseklik — isterseniz 200px vs. yapabilirsiniz */
    object-fit: cover; /* Resim kesilmeden doldurulur */
    object-position: center; /* Merkezden kırpılır */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Mobilde daha küçük yükseklik */
@media (max-width: 768px) {
    #top .right-content .thumb img {
        height: 140px;
    }
}


/* TeslimEttiklerimiz section stili */
#TeslimEttiklerimiz {
  padding: 20px 0;
  text-align: center;
}

#TeslimEttiklerimiz .geri_tus,
#TeslimEttiklerimiz .ileri_tus {
    width: 70px;
    height: 70px;
    background-color: #30302e;
    opacity: 1;
    font-size: 50px;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#TeslimEttiklerimiz .geri_tus {
    margin-right: 40px;
}

#TeslimEttiklerimiz .ileri_tus {
    margin-left: 40px;
}

/* Mobil menü açıkken scroll engelle */
@media (max-width: 767px) {
    body.menu-open {
        overflow: hidden;
    }
}


/* 
---------------------------------------------
Menu Fix - Sağa Kayma Düzeltmesi
--------------------------------------------- 
*/

/* Daha küçük ekranlar için ayarlamalar */
@media (max-width: 1200px) {
    .header-area .main-nav .nav li {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .header-area .main-nav .nav li a {
        font-size: 13px;
        letter-spacing: 0;
    }
}

@media (max-width: 992px) {
    .header-area .main-nav .nav li {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .header-area .main-nav .nav li a {
        font-size: 12px;
    }
}

/* Logo ile menü arasındaki boşluğu ayarla */
.header-area .main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo boyutunu optimize et */
.header-area .main-nav .logo {
    flex-shrink: 0;
}

.header-area .main-nav .logo img {
    max-width: 120px;
    height: auto;
}

/* 
---------------------------------------------
Mobil Menü Fix - Logo Altında Açılma
--------------------------------------------- 
*/

/* Mobil menü açıkken body scroll'unu engelle */
body.menu-open {
    overflow: hidden;
}

/* Mobil menü için özel stiller */
@media (max-width: 767px) {
    .header-area {
        min-height: 80px;
        overflow: visible !important;
        position: relative;
    }
    
    .header-area.header-sticky {
        min-height: 80px !important;
    }
    
    /* Ana menü container */
    .header-area .main-nav .nav {
        float: none;
        width: 100%;
        display: none;
        margin-top: 100px !important;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 998;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    /* Menü açıkken header arkaplanı */
    .header-area .main-nav .nav:not(:hidden) {
        background: #fff;
        border-top: 1px solid #eee;
    }
    
    /* Menü öğeleri */
    .header-area .main-nav .nav li {
        width: 100%;
        text-align: left;
        border-bottom: 1px solid #f5f5f5;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .header-area .main-nav .nav li:last-child {
        border-bottom: none;
    }
    
    .header-area .main-nav .nav li a {
        padding: 0 20px !important;
        font-size: 16px;
        color: #2a2a2a !important;
        background: #fff !important;
        height: 50px !important;
        line-height: 50px !important;
        transition: all 0.3s ease;
        display: block;
    }
    
    .header-area .main-nav .nav li a:hover {
        background: #f8f8f8 !important;
        color: #2a2a2a !important;
        padding-left: 25px !important;
    }
    
    /* Logo container düzenlemesi */
    .main-nav .logo {
        display: flex;
        align-items: center;
        padding: 15px 0;
        position: relative;
        z-index: 999;
    }
    
    .main-nav .logo img {
        width: 120px;
        height: auto;
        margin-left: 15px;
    }
    
    /* Menü butonunu sağ üste sabitle */
    .header-area .main-nav .menu-trigger {
        position: absolute !important;
        right: 15px !important;
        top: 20px !important;
        z-index: 1000 !important;
        display: block !important;
    }
    
    /* Header yüksekliği ayarı */
    .header-area, 
    .header-area.header-sticky {
        height: 80px !important;
        min-height: 80px !important;
    }
}

/* Tablet için küçük ayarlar */
@media (max-width: 991px) and (min-width: 768px) {
    .header-area .main-nav .nav li {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    .header-area .main-nav .nav li a {
        font-size: 13px;
    }
}


/* ---------------------------------------------
KESİN ÇÖZÜM: TeslimEttiklerimiz Bölümü Mobil Düzeltmesi
Bu kod, şablonun genel alt alta sıralama (column) kuralını ezer.
--------------------------------------------- */

@media (max-width: 992px) {
    
    /* 1. Galeri satırını (row) yan yana dizilime ZORLA */
    #TeslimEttiklerimiz .row {
        display: flex !important;
        flex-direction: row !important; /* Alt alta sıralanmayı (column) engeller */
        flex-wrap: wrap !important;     /* Satır dolduğunda alta kaymayı sağlar */
    }
    
    /* 2. col-4 sütunlarının genişliğini kesin olarak %33.33 olarak zorla (3 resim) */
    #TeslimEttiklerimiz .col-4.gallery-col {
        width: 33.333333% !important;
        max-width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
    }
    
    /* 3. Daha küçük ekranlar için de aynı kuralı tekrar et (ekstra önlem) */
    @media (max-width: 768px) {
        #TeslimEttiklerimiz .col-4.gallery-col {
            width: 33.333333% !important;
            max-width: 33.333333% !important;
            flex: 0 0 33.333333% !important;
        }
    }
}


/* 
 BASİT PERFORMANS İYİLEŞTİRMELERİ
 Resimler asla kaybolmaz, sadece performans artar
*/

/* Temel performans iyileştirmeleri */
@media (max-width: 768px) {
    .owl-carousel .owl-item {
        transform: translateZ(0);
    }
}

/* Görsel kalite */
img {
    image-rendering: -webkit-optimize-contrast;
    max-width: 100%;
    height: auto;
}

/* Smooth hover efekti */
.thumb img {
    transition: transform 0.3s ease;
}

.thumb:hover img {
    transform: scale(1.02);
}


/* 
---------------------------------------------
Critical CSS - Above the Fold Optimization
--------------------------------------------- 
*/

/* Header hemen görünsün */
.header-area {
    will-change: transform;
}

/* Ana banner hızlı yüklensin */
.main-banner {
    content-visibility: auto;
}

/* Önemli butonlar hemen görünsün */
.whatsapp-button,
.menu-trigger,
.geri_tus,
.ileri_tus {
    will-change: transform;
}

/* İlk ekrandaki resimler */
.main-banner .left-content .thumb img {
    priority: high;
}


/* 
---------------------------------------------
TESLİM ETTİKLERİMİZ - KESİN ÇÖZÜM
--------------------------------------------- 
*/

/* Mevcut stilleri override etmek için !important kullanıyoruz */
#TeslimEttiklerimiz .row.gallery-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    margin: 0 -2px !important;
    padding: 0 10px !important;
}

#TeslimEttiklerimiz .gallery-col {
    padding: 0 2px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
}

#TeslimEttiklerimiz .gallery-item {
    width: 100% !important;
    height: 300px !important; /* GENİŞ ve BÜYÜK */
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}

#TeslimEttiklerimiz .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 6px !important;
    transition: transform 0.3s ease !important;
}

#TeslimEttiklerimiz .gallery-item:hover img {
    transform: scale(1.05) !important;
}

/* Mobil için */
@media (max-width: 992px) {
    #TeslimEttiklerimiz .row.gallery-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px !important;
    }
    
    #TeslimEttiklerimiz .gallery-item {
        height: 250px !important;
    }
}

@media (max-width: 576px) {
    #TeslimEttiklerimiz .row.gallery-row {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
    
    #TeslimEttiklerimiz .gallery-item {
        height: 220px !important;
    }
}













.whatsapp-button {
    position: fixed !important;
    right: 40px !important;
    bottom: 40px !important;
    z-index: 100000 !important;
    box-shadow: 0 6px 20px rgba(37,211,102,0.35);
}





.whatsapp-button {
    bottom: 80px !important; /* Yukarı çekildi */
    width: 60px;
    height: 60px;
    padding: 15px;
}

@media (max-width: 576px) {
    
    
    .whatsapp-button {
        bottom: 60px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 12px !important;
    }
    
    
    .whatsapp-button svg {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 768px) and (min-width: 577px) {
    
    
    .whatsapp-button {
        bottom: 70px !important;
    }
}



/* Mobilde daha büyük tıklama alanı */
@media (max-width: 576px) {
    
    .whatsapp-button {
        min-width: 54px; /* iOS minimum tıklama boyutu */
        min-height: 54px;
    }
}

/* Butonlara tıklama geri bildirimi */

.whatsapp-button:active {
    transform: scale(0.95);
    transition: transform 0.1s;
}



/* =====================================================
   SOSYAL MEDYA BUTONLARI - YENİ KODLAR
   ===================================================== */

/* Facebook Butonu - En Üstte */
.facebook-button {
    position: fixed !important;
    right: 40px !important;
    bottom: 220px !important;
    z-index: 100000 !important;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1877f2 0%, #0d5db8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 15px;
}

.facebook-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(24, 119, 242, 0.6);
}

.facebook-button:active {
    transform: scale(0.95);
}

.facebook-button svg {
    width: 100%;
    height: 100%;
}

/* Instagram Butonu - Ortada */
.instagram-button {
    position: fixed !important;
    right: 40px !important;
    bottom: 150px !important;
    z-index: 100000 !important;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(221, 42, 123, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 15px;
}

.instagram-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(221, 42, 123, 0.6);
}

.instagram-button:active {
    transform: scale(0.95);
}

.instagram-button svg {
    width: 100%;
    height: 100%;
}

/* WhatsApp Butonu Pozisyon Güncelleme */
.whatsapp-button {
    position: fixed !important;
    right: 40px !important;
    bottom: 80px !important;
    z-index: 100000 !important;
}

/* Mobil Uyumluluk */
@media (max-width: 576px) {
    .facebook-button {
        right: 18px !important;
        bottom: 168px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 12px !important;
    }
    
    .instagram-button {
        right: 18px !important;
        bottom: 108px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 12px !important;
    }
    
    .whatsapp-button {
        right: 18px !important;
        bottom: 48px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 12px !important;
    }
}

@media (max-width: 768px) and (min-width: 577px) {
    .facebook-button {
        bottom: 190px !important;
    }
    
    .instagram-button {
        bottom: 120px !important;
    }
    
    .whatsapp-button {
        bottom: 50px !important;
    }
}


/* Instagram Butonu Stilleri */
.instagram-button {
    position: fixed;
    right: 40px;          /* WhatsApp ile aynı hizada */
    bottom: 150px;        /* WhatsApp (80px) + Boşluk payı ile üstte durması için */
    width: 60px;          /* Buton genişliği */
    height: 60px;         /* Buton yüksekliği */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-radius: 50%;   /* Yuvarlak olması için */
    text-align: center;
    color: #fff;
    z-index: 100000;      /* Diğer öğelerin üzerinde durması için */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Hafif gölge */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.instagram-button:hover {
    transform: scale(1.1); /* Üzerine gelince hafif büyüme efekti */
}

.instagram-button svg {
    width: 32px;
    height: 32px;
}



/* Facebook Butonu Stilleri */
.facebook-button {
    position: fixed;
    right: 40px;          /* Diğerleriyle aynı hizada */
    bottom: 220px;        /* Instagram (150px) + 70px */
    width: 60px;
    height: 60px;
    background-color: #1877F2; /* Facebook Mavisi */
    border-radius: 50%;
    text-align: center;
    color: #fff;
    z-index: 100000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.facebook-button:hover {
    transform: scale(1.1); /* Üzerine gelince büyüme efekti */
}

.facebook-button svg {
    width: 32px;
    height: 32px;
}