/*
Template Name: Tipsmms 
Description: Bootstrap template for match odds
Author URI: cekyatkoltuk
Version: 1.0
*/
/* -----------------------------------------------------------------------------

# Base - Genral & Typography

----------------------------------------------------------------------------- */
html {
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  height: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1px;
  line-height: 1.8;
  color: #051922;
  overflow-x: hidden;
}

body img {
  max-width: 100%;
}

a {
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

a:hover {
  color: #F28123;
  text-decoration: none;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  margin: 0 0 1.25rem 0;
  color: #051922;
}


h1:last-child, .h1:last-child,
h2:last-child, .h2:last-child,
h3:last-child, .h3:last-child,
h4:last-child, .h4:last-child,
h5:last-child, .h5:last-child,
h6:last-child, .h6:last-child {
  margin: 0;
}

h1, .h1 {
  font-size: 4rem;
  font-weight: 700;
  line-height: 4rem;
}

@media only screen and (max-width: 767.96px) {
  h1, .h1 {
    font-size: 3rem;
    line-height: 3.25rem;
  }
}

@media only screen and (max-width: 575.96px) {
  h1, .h1 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

h2, .h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 3.25rem;
}

@media only screen and (max-width: 767.96px) {
  h2, .h2 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

@media only screen and (max-width: 575.96px) {
  h2, .h2 {
    font-size: 2rem;
    line-height: 2.25rem;
  }
}

h3, .h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.25rem;
}

@media only screen and (max-width: 575.96px) {
  h3, .h3 {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

h4, .h4 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.75rem;
}

@media only screen and (max-width: 575.96px) {
  h4, .h4 {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
}

h6, .h6 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
}

p {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1px;
  line-height: 1.8;
  color: #051922;
  margin: 0 0 1.25rem 0;
}

p:last-child {
  margin: 0;
}

/* -----------------------------------------------------------------------------

# All Common Styles

----------------------------------------------------------------------------- */
.loader {
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1111;
  background: #fff;
  overflow-x: hidden;
}

.loader-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
}

.circle {
  width: 8vmax;
  height: 8vmax;
  border-right: 4px solid #000;
  border-radius: 50%;
  -webkit-animation: spinRight 800ms linear infinite;
  animation: spinRight 800ms linear infinite;
}

.circle:before {
  content: '';
  width: 6vmax;
  height: 6vmax;
  display: block;
  position: absolute;
  top: calc(50% - 3vmax);
  left: calc(50% - 3vmax);
  border-left: 3px solid #F28123;
  border-radius: 100%;
  -webkit-animation: spinLeft 800ms linear infinite;
  animation: spinLeft 800ms linear infinite;
}

.circle:after {
  content: '';
  width: 6vmax;
  height: 6vmax;
  display: block;
  position: absolute;
  top: calc(50% - 3vmax);
  left: calc(50% - 3vmax);
  border-left: 3px solid #F28123;
  border-radius: 100%;
  -webkit-animation: spinLeft 800ms linear infinite;
  animation: spinLeft 800ms linear infinite;
  width: 4vmax;
  height: 4vmax;
  top: calc(50% - 2vmax);
  left: calc(50% - 2vmax);
  border: 0;
  border-right: 2px solid #000;
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes spinLeft {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@keyframes spinLeft {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@-webkit-keyframes spinRight {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes spinRight {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.mt-80 {
  margin-top: 80px;
}

@media only screen and (max-width: 767.96px) {
  .mt-80 {
    margin-top: 50px;
  }
}

.mb-80 {
  margin-bottom: 80px;
}

@media only screen and (max-width: 767.96px) {
  .mb-80 {
    margin-bottom: 50px;
  }
}

.mt-100 {
  margin-top: 100px;
}

@media only screen and (max-width: 767.96px) {
  .mt-100 {
    margin-top: 80px;
  }
}

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

@media only screen and (max-width: 767.96px) {
  .mb-100 {
    margin-bottom: 80px;
  }
}

.mt-150 {
  margin-top: 150px;
}

@media only screen and (max-width: 767.96px) {
  .mt-150 {
    margin-top: 100px;
  }
}

.mb-150 {
  margin-bottom: 150px;
}

@media only screen and (max-width: 767.96px) {
  .mb-150 {
    margin-bottom: 100px;
  }
}

.pt-80 {
  padding-top: 80px;
}

@media only screen and (max-width: 767.96px) {
  .pt-80 {
    padding-top: 50px;
  }
}

.pb-80 {
  padding-bottom: 80px;
}

@media only screen and (max-width: 767.96px) {
  .pb-80 {
    padding-bottom: 50px;
  }
}

.pt-100 {
  padding-top: 100px;
}

@media only screen and (max-width: 767.96px) {
  .pt-100 {
    padding-top: 80px;
  }
}

.pb-100 {
  padding-bottom: 100px;
}

@media only screen and (max-width: 767.96px) {
  .pb-100 {
    padding-bottom: 80px;
  }
}

.pt-150 {
  padding-top: 150px;
}

@media only screen and (max-width: 767.96px) {
  .pt-150 {
    padding-top: 100px;
  }
}

.pb-150 {
  padding-bottom: 150px;
}

@media only screen and (max-width: 767.96px) {
  .pb-150 {
    padding-bottom: 100px;
  }
}

.gray-bg {
  background-color: #f5f5f5;
}

.orange-text {
  color: #F28123;
}

.blue-bg {
  background-color: #162133;
}

a.boxed-btn {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
}
button.boxed-btn {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
  border: none;
}

a.bordered-btn {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  color: #fff;
  border: 2px solid #F28123;
  padding: 10px 20px;
}

a.read-more-btn {
  display: inline-block;
  margin-top: 15px;
  color: #051922;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  font-weight: 700;
}

a.read-more-btn:hover {
  color: #F28123;
}

a.boxed-btn, a.bordered-btn, a.cart-btn {
  border-radius: 50px;
}

.section-title h3 {
  font-size: 40px;
  position: relative;
  padding-bottom: 15px;
}

.section-title h3:after {
  position: absolute;
  content: '';
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 50px;
  height: 2px;
  background-color: #F28123;
  margin: 0 auto;
}

.section-title p {
  font-size: 15px;
  width: 530px;
  margin: 0 auto;
  color: #555;
  margin-top: 10px;
  line-height: 1.8;
}

.section-title {
  margin-bottom: 80px;
}

/* -----------------------------------------------------------------------------

# Header Styles

----------------------------------------------------------------------------- */

ul.navbar-nav li.nav-item a.nav-link, ul.navbar-nav li.nav-item.active a.nav-link {
  color: #051922;
}

.top-header-area {
  position: absolute;
  z-index: 999;
  width: 100%;
  padding: 25px 0;
  background: #000000;
  transition: transform 0.5s ease, opacity 0.5s ease; /* Transition ekliyoruz */
}

.top-header-area.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #000000; /* Sabit başlık rengi */
  transition: background-color 0.3s, padding 0.3s, transform 0.5s ease, opacity 0.5s ease;
  padding: 15px 0;
}

.hidden {
  opacity: 0; /* Opaklığı 0 yaparak görünmez yapıyoruz */
  transform: translateY(-100%); /* Yukarı kaydırarak gizliyoruz */
}


.top-header-area.white ul.navbar-nav li.nav-item a.nav-link, .top-header-area.white ul.navbar-nav li.nav-item.active a.nav-link {
  color: #fff;
}

ul.navbar-nav li.nav-item a.nav-link, ul.navbar-nav li.nav-item.active a.nav-link {
  color: #fff;
  font-weight: 700;
  margin-right: 14px;
}

a.navbar-brand img {
  max-width: 150px;
}

nav.main-menu ul {
  display: flex; /* Menü elemanlarını yatayda esnek yapar */
  justify-content: space-between; /* Elemanlar arasında boşluk bırakır */
  align-items: center; /* Dikeyde hizalar */
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000000;
}

nav.main-menu ul li:last-child {
  margin-left: auto; /* Menü son öğesini sağa yaslar */
}

nav.main-menu ul li {
  flex-grow: 1;  /* Menü elemanlarını eşit büyüt */
  text-align: center;  /* Menü elemanlarını ortala */
  display: inline-block;
  background: #000000;
}

nav.main-menu ul li a {
  color: #fff;
  font-weight: 700;
  display: block;
  padding: 15px;
  background: #000000;
  text-decoration: none;
  font-weight: 500;
}

.main-menu ul li a:hover, .main-menu ul li.current-list-item a {
  color: #ff6347;
}

nav.main-menu ul > li {
  position: relative;
  background: #000000;
}



.main-menu ul li .sub-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
}

.main-menu ul li:hover .sub-menu {
  display: block;
}

.main-menu ul li .sub-menu li {
  margin: 0;
}


/* Alt menüler düzgün çalışması için gerekli düzenlemeler */
nav.main-menu ul ul.sub-menu {
  position: absolute;
  background-color: #000000;
  width: 220px;
  padding: 15px;
  margin: 0;
  left: 0;
  top: 50px;
  border-radius: 3px;
  transition: opacity 0.3s, visibility 0.3s; /* Geçiş animasyonlarını ekle */
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 20px #555555;
}

nav.main-menu ul ul.sub-menu li {
  display: block;
  text-align: left;
  background: #000000;
}

nav.main-menu ul ul.sub-menu li a {
  color: #555;
  font-weight: 600;
  padding: 7px 10px;
  font-size: 13px;
  background: #000000;
}

nav.main-menu ul > li:hover ul {
  opacity: 1;
  visibility: visible;
  background: #000000;
}

nav.main-menu ul li:last-child a {
  display: inline-block;
  background: #000000;
}

nav.main-menu > ul li:last-child {
  float: right;
  background: #000000;
}


/* Mobil menü alt menüler için düzenleme */
@media (max-width: 768px) {
  .mean-container .mean-nav ul ul.sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    background-color: #000000;
  }
  
  .mean-container .mean-nav ul li a {
    padding: 0.5em 5%;
  }

  .mean-container .mean-nav ul li li a {
    padding: 0.5em 10%;
  }
}

/* Menüde sağdaki son eleman olan logout butonu hizasını korumak için */
nav.main-menu > ul li:last-child {
  margin-left: auto; /* Logout butonunu sağa hizalar */
}

.site-logo {
  float: left;
  max-width: 100px;
  max-height: auto;
}

.site-logo img {
  max-width: 100%; /* Logo genişliği ekran genişliğine göre otomatik ayar */
  height: auto; /* Yükseklik oranını korur */
  max-height: 80px; /* Logo yüksekliğini ihtiyaca göre ayarlayabilirsiniz */
}

@media (max-width: 768px) {
  .site-logo img {
      max-height: 50px; /* Mobil cihazlarda daha küçük logo */
  }
}

@media (max-width: 991px) {
  .main-menu ul {
      display: none;
  }
}


ul.sub-menu li:last-child {
  float: none !important;
}

.mean-container .mean-bar {
  background-color: transparent;
  position: absolute;
  right: 0;
  top: 15px;
}

.mean-bar a.meanmenu-reveal {
  background-color: #F28123;
}

.main-menu-wrap {
  display: flex;
  /* Elemanlar arasında boşluk bırakır justify-content: space-between;*/
  align-items: center;
  position: relative;
}

.mean-container a.meanmenu-reveal {
  color: #051922;
}

.mean-container a.meanmenu-reveal span {
  background-color: #000000;
}

.mean-container .mean-nav ul li a {
  padding: 0.5em 5%;
}

.mean-container .mean-nav ul li li a {
  padding: 0.5em 10%;
}

.mean-container .mean-nav ul li a.mean-expand {
  font-size: 16px;
  height: 10px;
  line-height: 10px;
  width: 15px;
}

.mean-container a.meanmenu-reveal {
  padding: 8px 8px 6px;
}

nav.mean-nav > ul > li:first-child > a {
  border-top: none;
}

#sticker.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #051922; /* Sabit başlık rengi */
  transition: background-color 0.3s;
}

.header-icons {
  display: flex;
  align-items: center;
}

.header-icons a {
  color: #fff;
  display: inline-block;
  padding: 10px;
  margin-left: 20px;
}

.site-logo {
  padding: 6px 0;
}

.top-header-area.sepherate-header ul li > a, .top-header-area.sepherate-header .header-icons a {
  color: #051922;
}

nav.main-menu ul ul.sub-menu li {
  display: block;
}

nav.main-menu ul ul.sub-menu li a {
  color: #555;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
}

nav.main-menu ul li.current-list-item > a {
  color: #F28123;
}

nav.main-menu li:hover > a {
  color: #F28123;
}

nav.main-menu li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.top-header-area .header-icons a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.top-header-area .header-icons a:hover {
  color: #ff6347;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #051922; /* Color for the sticky header */
  transition: background-color 0.3s, padding 0.3s;
  padding: 15px 0;
}

.sticky-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999 !important;
}

.sticky-wrapper.is-sticky .top-header-area {
  background-color: #051922;
  padding: 15px 0;
}

.top-header-area {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

ul.navbar-nav {
  margin: 0 auto;
}

.search-area {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5555;
  background-color: #051922;
  width: 100%;
  height: 100%;
  text-align: center;
}

span.close-btn {
  position: absolute;
  right: 0%;
  color: #fff;
  top: 5%;
  cursor: pointer;
}

.search-area {
  height: 100%;
}

.search-area div {
  height: 100%;
}

.search-bar {
  height: 100%;
  display: table;
  width: 100%;
}

a.mobile-show {
  display: none;
}

.search-area .search-bar div.search-bar-tablecell {
  display: table-cell;
  vertical-align: middle;
  height: auto;
}

.search-bar-tablecell input {
  border: none;
  padding: 15px;
  width: 60%;
  background-color: transparent;
  border-bottom: 1px solid #F28123;
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #fff;
}

.search-bar-tablecell button[type=submit] {
  border: none;
  background-color: #F28123;
  padding: 15px 30px;
  cursor: pointer;
  display: inline-block;
  border-radius: 50px;
  font-weight: 700;
}

.search-bar-tablecell input::-webkit-input-placeholder {
  color: #fff;
}

.search-bar-tablecell input:-ms-input-placeholder {
  color: #fff;
}

.search-bar-tablecell input::-ms-input-placeholder {
  color: #fff;
}

.search-bar-tablecell input::placeholder {
  color: #fff;
}

.search-bar-tablecell button[type=submit] i {
  margin-left: 5px;
}

.search-area {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.search-area.search-active {
  visibility: visible;
  opacity: 1;
  z-index: 999;
}

.search-bar-tablecell h3 {
  color: #fff;
  margin-bottom: 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 7px;
}

.logout-button {
  background: none;
  border: none;
  color: #fff;
  font-weight: 700;
  margin-right: 14px;
  cursor: pointer;
  padding: 15px;
  display: block;
}

.logout-button:hover {
  color: #F28123;
  transition: color 0.3s;
}

/* Mobil menü butonu */
.mobile-show {
  display: block;
  position: absolute; /* Buton top header içinde olsun */
  right: 20px; /* Header alanında sağdan uzaklığı ayarlayın */
  z-index: 1000; /* Diğer elemanların üzerinde görünsün */
  color: #F28123; /* Turuncu renk */
  font-size: 24px; /* Buton boyutu */
  display: none;
}



/* Mobil menü */
.mobile-menu {
  position: fixed;
  top: 8%; /* Sayfanın ortasında açılmasını sağlar */
  left: 50%; /* Yatayda da ortalar */
  transform: translate(-50%, -50%); /* Tam ortada açılmasını sağlar */
  width: 50%; /* Menü genişliği tam ekran */
  max-width: 400px; /* Menü genişliği sınırı */
  height: auto; /* Menü yüksekliği ihtiyaca göre otomatik ayarlanır */
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Gölge efekti */
  transition: transform 0.3s ease; /* Animasyon süresi */
  opacity: 0;
  visibility: hidden;
}


/* Mobil menü kapama butonu */
.mobile-menu-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%); /* Açılınca tam ortada görünsün */
}


/* Açık menü için stil */
.mobile-menu.open {
  display: block;
  transform: translateX(0); /* Menü açıldığında */
}

/* Menünün animasyonunu ve düzenini kontrol edin */
.mobile-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.mobile-menu ul li {
  background: #000000;
}

.mobile-menu ul li a {
  color: #fff;
  padding: 15px;
  display: block;
}

.submenu-toggle {
  color: #fff;       /* Önceki renk stilini korur */
  padding: 15px;     /* Önceki padding'i korur */
  display: block;    /* Blok yapısını korur */
  cursor: pointer;   /* Tıklanabilir olduğunu göstermek için el işareti imleci */
}

.submenu-toggle:hover,
.submenu-toggle.active {
  color: #ccc;       /* Hover veya aktif durumda farklı bir renk tonu */
}


/* -----------------------------------------------------------------------------

/* Footer Styles */
.single-logo-item img {
  max-width: 250px;
  margin: 0 auto;
}

.logo-carousel-section {
  background-color: #f5f5f5;
  padding: 30px 0;
}

.logo-carousel-section img {
  width: 70%;
  height: 70px; 
  object-fit:fill; 
  
}

.logo-carousel-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.single-logo-item {
  flex: 0 0 auto;
  padding: 10px;
  max-width: 180px;
}

/* Other footer styles */
.footer-area {
  background-color:#000000;
  color: #fff;
  padding: 50px 0;
}

h2.widget-title {
  font-size: 24px;
  font-weight: 500;
  position: relative;
  padding-bottom: 20px;
  color: #fff;
}

h2.widget-title:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 2px;
  background-color: #F28123;
  content: "";
}

.footer-box p {
  color: #fff;
  opacity: 0.7;
  line-height: 1.8;
}

.footer-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-box ul li {
  opacity: 0.7;
  margin-bottom: 10px;
  line-height: 1.8;
}

.footer-box ul li:last-child {
  margin-bottom: 0;
}

.footer-box.subscribe form input[type=email] {
  border: none;
  background-color: #012738;
  width: 78%;
  padding: 15px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #fff;
}

.footer-box.subscribe form button {
  width: 20%;
  border: none;
  background-color: #012738;
  color: #F28123;
  padding: 14px 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  cursor: pointer;
}

.footer-box.subscribe form button:focus {
  outline: none;
}

.copyright {
  background-color: #051922;
  border-top: 1px solid #232a35;
}

.copyright p {
  margin: 0;
  color: #fff;
  opacity: 0.7;
  padding: 16px 0;
  font-size: 15px;
}

.copyright a {
  color: #F28123;
  font-weight: 700;
}

.copyright a:hover {
  color: #f59d53;
}

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

.social-icons ul li {
  display: inline-block;
}

.social-icons ul li a {
  font-size: 16px;
  color: #fff;
  opacity: 0.7;
  padding: 16px 10px;
  display: block;
}

.footer-box ul li a {
  color: #fff;
}

.footer-box.pages ul li {
  position: relative;
  padding-left: 20px;
}

.footer-box.pages ul li:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #F28123;
}

/* -----------------------------------------------------------------------------

# Hover Styles

----------------------------------------------------------------------------- */
a.navbar-brand {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a.navbar-brand:hover {
  opacity: 0.7;
}

a.boxed-btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a.boxed-btn:hover {
  background-color: #051922;
  color: #F28123;
}

button.boxed-btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

button.boxed-btn:hover {
  background-color: #051922;
  color: #F28123;
}

a.bordered-btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a.bordered-btn:hover {
  background-color: #F28123;
  color: #fff;
}

ul.sub-menu a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

ul.sub-menu li:hover a {
  color: #F28123;
}

.single-tof-box {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.single-tof-box:hover {
  -webkit-box-shadow: 0 0 80px #353535;
  box-shadow: 0 0 80px #353535;
}

a.video-play-btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a.video-play-btn:hover {
  background-color: #333;
  color: #F28123;
}

.latest-news-bg {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.single-latest-news:hover .latest-news-bg {
  opacity: 0.8;
}

a.tof-btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a.tof-btn i {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a.tof-btn:hover {
  color: #F28123;
}

a.tof-btn:hover i {
  margin-left: 10px;
}

.custom-container {
  max-width: 1300px; /* İstediğiniz genişlik yüzdesini belirleyin */
  margin: 0 auto; /* Ortalanmış halde tutar */
  padding-left: 15px; /* İsteğe göre sol boşluk ayarı */
  padding-right: 15px; /* İsteğe göre sağ boşluk ayarı */
}

@media (min-width: 1800px) { /* 1800px ve daha geniş ekranlar için */
  .col-custom-lg {
      flex: 0 0 25%; /* 5 sütun */
      max-width: 30%;
  }
}

@media (min-width: 1600px) and (max-width: 1799px) { /* Büyük monitörler için */
  .col-custom-lg {
      flex: 0 0 25%; /* 4 sütun */
      max-width: 25%;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) { /* Normal büyük ekran */
  .col-custom-lg {
      flex: 0 0 33.33%; /* 3 sütun */
      max-width: 33.33%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) { /* Orta ekran */
  .col-custom-lg {
      flex: 0 0 50%; /* 2 sütun */
      max-width: 50%;
  }
}

@media (max-width: 991px) { /* Küçük ekran */
  .col-custom-lg {
      flex: 0 0 100%; /* 1 sütun */
      max-width: 100%;
  }
}

.single-latest-news {
  height: 450px; /* Set the fixed height for the container */
  -webkit-box-shadow: 0 0 20px #dddddd;
  box-shadow: 0 0 20px #dddddd;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.single-latest-news img {
  width: 100%;
  height: 200px; /* Set the height for the image */
  object-fit:fill; /* Ensure the image covers the area without distortion */
  border-radius: 10px;
}

/* Specific styles for BlogDetail page */
.single-latest-news .blogdetail-img {
  width: 150%;
  height: 220px; /* Set the height for the image */
  object-fit:contain;/* Ensure the image covers the area without distortion */
  border-radius: 10px;
}


.single-latest-news:hover {
  -webkit-box-shadow: 0 0 0;
  box-shadow: 0 0 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.single-logo-item {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.single-logo-item:hover {
  opacity: 0.7;
}

.footer-box.pages ul li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.footer-box.pages ul li:hover a {
  color: #F28123;
}

.footer-box.subscribe form button {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.footer-box.subscribe form button:hover {
  background-color: #F28123;
  color: #051922;
}

.social-icons ul li:hover a {
  color: #F28123;
}

.social-icons ul li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

ul.social-link-team li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

ul.social-link-team li a:hover {
  background-color: #051922;
  color: #F28123;
}

.counter-box {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.counter-box:hover {
  -webkit-box-shadow: 0 0 80px #6f6f6f;
  box-shadow: 0 0 80px #6f6f6f;
}

input[type="submit"] {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border-radius: 50px !important;
}

input[type="submit"]:hover {
  background-color: #051922;
  color: #F28123;
}

div.owl-controls, .owl-controls div {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

div.owl-controls div.owl-nav div:hover {
  opacity: 0.7;
}

.pagination-wrap ul li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.pagination-wrap ul li:hover a {
  background-color: #F28123;
}

.icons a i {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.icons a:hover i {
  color: #F28123;
}

.tof-text a.tof-btn {
  margin-top: 15px;
  display: inline-block;
}

.single-pricing-table {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.single-pricing-table:hover {
  -webkit-box-shadow: 0 0 20px #ddd;
  box-shadow: 0 0 20px #ddd;
}

.product-image img {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.product-image img:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

a.cart-btn {
  font-family: 'Poppins', sans-serif;
    display: inline-block;
    background-color: #F28123;
    color: #fff;
    padding: 10px 20px;
}

a.cart-btn:hover {
  background-color: #051922;
  color: #F28123;
}

button.cart-btn {
  font-family: 'Poppins', sans-serif;

  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button.cart-btn:hover {
  background-color: #051922;
  color: #F28123;
}

button.boxed-btn, button.bordered-btn, button.cart-btn {
  border-radius: 50px;
}

.single-product-form button.cart-btn {
  margin-bottom: 15px;
}



.recent-posts ul li {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.recent-posts ul li:hover {
  opacity: 0.7;
}

ul.sub-menu li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

ul.sub-menu li:hover a {
  color: #F28123 !important;
}

.sidebar-section ul li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.sidebar-section ul li a:hover {
  opacity: 0.7;
}

.comment-text-body h4 a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.comment-text-body h4 a:hover {
  color: #F28123;
}

ul.product-share li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

ul.product-share li:hover a {
  color: #F28123;
}

.service-menu ul li a {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.service-menu ul li a.active {
  font-weight: 600;
  color: #ffe200;
}

.service-menu ul li a:hover {
  color: #ffe200;
}

.single-product-item {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.single-product-item:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.search-bar-tablecell button[type=submit] {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.search-bar-tablecell button[type=submit]:hover {
  background-color: #fff;
  color: #000;
}

span.close-btn {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

span.close-btn:hover {
  color: #fff;
}

a.mobile-show.search-bar-icon {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

a.mobile-show.search-bar-icon:hover {
  color: #F28123;
}

.newsletter-widget form {
  margin-top: 20px;
}

.newsletter-widget input,
.newsletter-widget button {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.newsletter-widget input[type="email"],
.newsletter-widget input[type="tel"] {
  background-color: #f9f9f9;
  border-color: #ddd;
}

.newsletter-widget input[type="email"]:focus,
.newsletter-widget input[type="tel"]:focus {
  border-color: #F28123;
}

.newsletter-widget button {
  background-color: #F28123;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.newsletter-widget button:hover {
  background-color: #e56e0c;
}

/* -----------------------------------------------------------------------------

# Hero Styles

----------------------------------------------------------------------------- */

.hero-bg {
  background-image: url(../img/hero/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-text {
  display: table;
  height: 100%;
  color: #fff;
  text-align: center;
}

.hero-text-tablecell {
  display: table-cell;
  vertical-align: middle;
  padding-left: 15%; /* Adjust the left padding as needed */
  padding-right: 28%; /* Adjust the right padding as needed */
}

.hero-area {
  height: 100vh;
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-image: url('../img/hero/hero-bg.jpg');
}

html, body {
  height: 100%;
}

.hero-area:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(180deg, #2ED45D 0%, #272C37 66.53%);
  z-index: -1;
}

.hero-text .subtitle {
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
}

.hero-text p.subtitle {
  color: #F28123;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 7px;
  font-size: 15px;
}

.hero-text h1 {
  font-size: 48px;
  font-weight: 700;
  margin: 10px 0;
  line-height: 1.3;
  color: #fff;
}

.hero-area div {
  height: 100%;
}

.hero-area div.hero-text {
  height: 100%;
  width: 100%;
}

.hero-area div.hero-text-tablecell {
  height: auto;
  vertical-align: middle;
}

.hero-area div.hero-text-tablecell div {
  height: auto;
  vertical-align: middle;
}

.hero-btns .boxed-btn, .hero-btns .bordered-btn {
  margin: 10px;
}

.hero-btns {
  margin-top: 35px;
}

.hero-btns a.bordered-btn {
  margin-left: 15px;
}

.hero-area div.hero-form {
  background-color: #fff;
  text-align: center;
  width: 380px;
  margin: 0 auto;
  margin-right: 0;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 15px #000000;
  box-shadow: 0 0 15px #000000;
  position: absolute;
  right: 30px;
  bottom: -15%;
  height: 600px;
}

input[type="submit"] {
  background-color: #F28123;
  color: #051922;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  border: none !important;
  cursor: pointer;
  padding: 15px 25px;
  border-radius: 3px;
}

.homepage-bg-1 {
  background-image: url(../img/hero/hero-bg.jpg);
}

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

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

.homepage-slider {
  height: 100%;
}

.homepage-slider div {
  height: 100%;
}

.homepage-slider div.hero-text {
  display: table;
  width: 100%;
}

.homepage-slider div.hero-text-tablecell {
  height: auto;
  vertical-align: middle;
  display: table-cell;
}

.homepage-slider div.hero-text-tablecell div {
  height: auto;
}

.single-homepage-slider {
  background-size: cover;
  background-position: center;
  background-color: #020C0E;
  position: relative;
  z-index: 1;
}

.single-homepage-slider:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #051922;
  content: "";
  z-index: -1;
  opacity: 0.7;
}

div.owl-controls, .owl-controls div {
  height: auto;
  top: 50%;
  color: #F28123;
  font-size: 48px;
}

.homepage-slider {
  position: relative;
}

.owl-prev {
  position: absolute;
  left: 60px;
  margin-top: -30px;
}

.owl-next {
  position: absolute;
  right: 60px;
  margin-top: -30px;
}

/* Loader */
.loader {
  position: fixed;
  z-index: 999;
  height: 100vh;
  width: 100%;
  overflow: visible;
  background: #272c37;
}

.loader-inner {
  position: absolute;
  top: calc(50% - 2rem);
  left: calc(50% - 2rem);
  width: 4rem;
  height: 4rem;
  animation: loader 1s infinite ease;
}

.loader-inner .circle {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.3rem solid #000;
  border-top-color: transparent;
}

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





/* -----------------------------------------------------------------------------


# List Styles

----------------------------------------------------------------------------- */
.list-section {
  background-color: #f5f5f5;
}

.list-box {
  overflow: hidden;
  letter-spacing: 0.5px;
}

.list-box .content h3 {
  display: block;
  line-height: 22px;
  font-size: 18px;
  margin-bottom: 4px;
}

.list-box .content p {
  margin-bottom: 0px;
  opacity: 0.75;
}

.list-box .list-icon i {
  display: block;
  font-size: 24px;
  margin-right: 15px;
  color: #F28123;
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 60px;
  border: 2px #F28123 dotted;
  border-radius: 999px;
}

/* -----------------------------------------------------------------------------

# News Styles

----------------------------------------------------------------------------- */
.news-bg-1 {
  background-image: url(../img/latest-news/news-bg-1.jpg);
}

.news-bg-2 {
  background-image: url(../img/latest-news/news-bg-2.jpg);
}

.news-bg-3 {
  background-image: url(../img/latest-news/news-bg-3.jpg);
}

.news-bg-4 {
  background-image: url(../img/latest-news/news-bg-4.jpg);
}

.news-bg-5 {
  background-image: url(../img/latest-news/news-bg-5.jpg);
}

.news-bg-6 {
  background-image: url(../img/latest-news/news-bg-6.jpg);
}

.latest-news-bg {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  background-color: #ddd;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.single-latest-news h1 {
  font-size: 25px;
  font-weight: 700;
  line-height: 2rem;
  margin-bottom: 20px; /* Başlık ile diğer içerikler arasında boşluk bırakmak için */
}

.single-latest-news h3 {
  font-size: 15px;
  line-height: 1.25em;
  font-weight: 600;
}

.single-latest-news h3 a {
  color: #051922;
}

p.blog-meta span {
  margin-right: 15px;
  opacity: 0.6;
  color: #051922;
  font-size: 0.85em;
}

p.blog-meta span:last-child {
  margin-right: 0;
}

p.blog-meta span i {
  margin-right: 5px;
}

p.excerpt {
  line-height: 1.8;
  color: #555;
  font-size: 13px;
}

/* Mobil cihazlar için h1 stili */
@media (max-width: 767px) {
  .single-latest-news h1 {
      font-size: 20px;
  }

  /* Mobil cihazlar için excerpt stili */
  p.excerpt {
      font-size: 10px;
      line-height: 1.8; /* Bu özellik mobil için de geçerli kalır */
      color: #555; /* Bu özellik mobil için de geçerli kalır */
  }
}

.latest-news a.boxed-btn {
  margin-top: 80px;
}

.news-text-box {
  padding: 25px 25px 5px 25px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.single-latest-news {
  margin-bottom: 30px;
}

.single-artcile-bg {
  background-image: url(../img/latest-news/news-bg-3.jpg);
  height: 450px;
}

.pagination-wrap {
  margin-top: 40px;
}

.pagination-wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination-wrap ul li {
  display: inline-block;
}

.pagination-wrap ul li a {
  color: #6f6f6f;
  font-size: 15px;
  background-color: #f3f3f3;
  display: inline-block;
  padding: 8px 14px;
  border-radius: 5px;
  margin: 3px;
  font-weight: 600;
  border-radius: 50px;
}

.pagination-wrap ul li a.active {
  background-color: #F28123;
}

.single-artcile-bg {
  background-size: cover;
  background-position: center;
  background-color: #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

.single-article-text h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
}

.single-article-text p {
  font-size: 15px;
  line-height: 1.6;
  color: #051922;
}

.comments-list-wrap {
  margin: 100px 0;
}

.comments-list-wrap h3 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 50px;
}

.comment-template h4 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 50px;
}

.single-comment-body {
  position: relative;
}

.comment-user-avater {
  position: absolute;
  left: 0;
  top: 0;
}

.comment-user-avater img {
  width: 60px;
  max-width: 60px;
  border-radius: 50%;
}

.comment-text-body {
  padding-left: 80px;
  margin-bottom: 40px;
}

.comment-text-body h4 {
  font-size: 18px;
  font-weight: 600;
}

span.comment-date {
  opacity: 0.5;
  font-size: 80%;
  font-weight: 700;
  margin-left: 5px;
}

.comment-text-body h4 a {
  color: #051922;
  font-size: 80%;
  margin-left: 10px;
  border-bottom: 1px solid #aaa;
}

.single-comment-body.child {
  margin-left: 75px;
}

.comment-text-body p {
  color: #888;
  line-height: 2;
  margin: 0;
}

.comment-template h4 {
  margin-bottom: 10px;
}

.comment-template > p {
  opacity: 0.7;
  margin-bottom: 30px;
}

.comment-template form p input[type=text] {
  border: 1px solid #ddd;
  width: 49%;
  padding: 15px;
  border-radius: 5px;
  font-size: 15px;
  color: #051922;
}

.comment-template form p input[type=email] {
  border: 1px solid #ddd;
  width: 49%;
  padding: 15px;
  border-radius: 5px;
  font-size: 15px;
  color: #051922;
  margin-left: 10px;
}

.comment-template form p textarea {
  border: 1px solid #ddd;
  padding: 15px;
  font-size: 15px;
  color: #051922;
  border-radius: 5px;
  height: 250px;
  resize: none;
  width: 100%;
}

.sidebar-section {
  margin-left: 30px;
}

.sidebar-section h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.sidebar-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-section ul li {
  line-height: 1.5;
}

.sidebar-section ul li a {
  color: #555;
  font-size: 15px;
}

.sidebar-section > div {
  margin-bottom: 60px;
}

.sidebar-section > div:last-child {
  margin-bottom: 0;
}

.recent-posts ul li, .archive-posts ul li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 10px;
}

.recent-posts ul li:before, .archive-posts ul li:before {
  position: absolute;
  left: 0;
  top: 2px;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.tag-section ul li {
  display: inline-block;
}

.tag-section ul li a {
  background-color: #ddd;
  padding: 3px 10px;
  display: block;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-right: 5px;
}

/* -----------------------------------------------------------------------------

# Cart Banner Styles

----------------------------------------------------------------------------- */
.cart-banner {
  background-color: #f5f5f5;
}

.cart-banner .image-column {
  position: relative;
  margin-top: 40px;
}

.cart-banner .image-column .price-box {
  position: absolute;
  left: 15%;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: rgba(242, 129, 35, 0.75);
}

.cart-banner .image-column .price-box .inner-price {
  position: relative;
  width: 94px;
  height: 94px;
  margin: 0 auto;
  margin-top: 8px;
  text-align: center;
  border-radius: 50%;
  background-color: #F28123;
}

.cart-banner .image-column .price-box .inner-price .price {
  color: #051922;
  padding-top: 27px;
  position: relative;
  display: inline-block;
  line-height: 18px;
  font-weight: 400;
}

.cart-banner .image-column .price-box .inner-price .price strong {
  color: #051922;
  font-size: 24px;
}

.cart-banner .content-column {
  position: relative;
  padding-top: 40px;
}

.cart-banner .content-column h3 {
  font-size: 40px;
}

.cart-banner .content-column h4 {
  position: relative;
  font-weight: 300;
  text-transform: uppercase;
}

.cart-banner .content-column .text {
  position: relative;
  font-weight: 400;
  line-height: 1.8em;
  margin-top: 25px;
  margin-bottom: 25px;
}

.time-counter {
  position: relative;
  margin-bottom: 25px;
}

.time-counter .time-countdown {
  position: relative;
}

.time-countdown .counter-column {
  position: relative;
  display: inline-block;
  margin: 0px 0px 5px;
  font-size: 13px;
  line-height: 1em;
  padding: 8px 20px 14px;
  text-transform: capitalize;
  text-align: center;
  border: 2px solid #F28123;
}

.time-countdown .counter-column .count {
  position: relative;
  display: block;
  font-size: 30px;
  line-height: 1.4em;
  padding: 0px 0px;
  color: #F28123;
  font-weight: 700;
  letter-spacing: 1px;
}

/* -----------------------------------------------------------------------------


# About Page Styles

----------------------------------------------------------------------------- */
.feature-bg {
  position: relative;
  margin: 150px 0;
}

.feature-bg:after {
  background-image: url(../img/feature-bg.jpg);
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  content: "";
  background-size: cover;
  background-position: center;
  border-top-left-radius: 5px;
  -webkit-box-shadow: 0 0 20px #cacaca;
  box-shadow: 0 0 20px #cacaca;
  border-bottom-left-radius: 5px;
}

.team-bg-1 {
  background-image: url(../img/editor/team-1.jpg);
}

.team-bg-2 {
  background-image: url(../img/editor/team-2.jpg);
}

.team-bg-3 {
  background-image: url(../img/editor/team-3.jpg);
}

.team-bg-4 {
  background-image: url(../img/editor/team-4.jpg);
}

.team-bg {
  height: 350px;
  background-size: cover;
  background-position: center;
  border-radius: 30px;
  background-color: #ddd;
}

.single-team-item {
  position: relative;
}

.single-team-item h4 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

.single-team-item h4 span {
  font-size: 70%;
  display: block;
  margin-top: 10px;
  opacity: 0.7;
}

ul.social-link-team {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

ul.social-link-team li {
  display: inline-block;
}

ul.social-link-team li a {
  color: #fff;
  background-color: #F28123;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  display: block;
  margin: 5px;
}

/* -----------------------------------------------------------------------------

# Contact Page Styles

----------------------------------------------------------------------------- */
.form-title {
  margin-bottom: 25px;
}

.form-title h2 {
  font-size: 25px;
}

.form-title p {
  font-size: 15px;
  line-height: 1.8;
}

.contact-form form p input[type=text], .contact-form form p input[type=tel], .contact-form form p input[type=email] {
  width: 49%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.contact-form form p textarea {
  border: 1px solid #ddd;
  padding: 15px;
  height: 200px;
  border-radius: 3px;
  width: 100%;
  resize: none;
}

.contact-form-wrap {
  background-color: #FBFBFB;
  padding: 45px 30px;
  border-radius: 5px;
}

.contact-form-box {
  padding-left: 40px;
  margin-bottom: 30px;
}

.contact-form-box h4 {
  font-size: 20px;
  font-weight: 600;
  position: relative;
  margin-bottom: 10px;
}

.contact-form-box h4 i {
  position: absolute;
  left: -13%;
  color: #F28123;
  top: 2px;
}

.contact-form-box p {
  line-height: 1.8;
  opacity: 0.8;
}

.contact-form-wrap .contact-form-box:last-child {
  margin: 0;
}

.find-location p {
  color: #fff;
  font-size: 40px;
  margin: 0;
  font-weight: 600;
  padding: 95px 0;
}

.find-location p i {
  margin-right: 10px;
  color: #F28123;
}

#form_status span {
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  background: #E74C3C;
  width: 100%;
  text-align: center;
  display: inline-block;
  padding: 10px 0px;
  border-radius: 3px;
  margin-bottom: 18px;
}

#form_status span.loading {
  color: #333;
  background: #eee;
  border-radius: 3px;
  padding: 18px 0px;
}

#form_status span.notice {
  color: yellow;
}

#form_status .success {
  color: #fff;
  text-align: center;
  background: #2ecc71;
  border-radius: 3px;
  padding: 30px 0px;
}

#form_status .success i {
  color: #fff;
  font-size: 45px;
  margin-bottom: 14px;
}

#form_status .success h3 {
  color: #fff;
  margin-bottom: 10px;
}

/* -----------------------------------------------------------------------------

# Shop Page Styles

----------------------------------------------------------------------------- */
.product-filters {
  margin-bottom: 80px;
}

.product-filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.product-filters ul li {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  margin: 15px;
  border: 2px solid #051922;
  color: #323232;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 25px;
}

.product-filters ul li.active {
  border: 2px solid #F28123;
  background-color: #F28123;
  color: #fff;
}

.single-product-item {
  margin-bottom: 30px;
}

.product-image {
  padding: 30px;
  padding-bottom: 0;
}

.product-image img {
  width: 90%;
  border-radius: 5px;
  margin-bottom: 20px;
}

.single-product-item h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

p.product-price {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 15px;
}

p.product-price span {
  display: block;
  opacity: 0.8;
  font-size: 15px;
  font-weight: 400;
}


.single-product-img img {
  border-radius: 5px;
  -webkit-box-shadow: 0 0 20px #ddd;
  box-shadow: 0 0 20px #ddd;
}

.single-product-content h3 {
  font-size: 22px;
  font-weight: 600;
}

p.single-product-pricing span {
  font-size: 18px;
  display: block;
  opacity: 0.8;
  margin-bottom: 10px;
  font-weight: 400;
}

.single-product-content p {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
}

.single-product-content p.single-product-pricing {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #051922;
  line-height: inherit;
}

input[type="number"] {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  width: 100px;
  margin-bottom: 15px;
}

.single-product-form a.cart-btn {
  margin-bottom: 15px;
}

.single-product-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 35px;
}


.single-product-content {
  margin-left: 30px;
}


.single-product-item {
  -webkit-box-shadow: 0 0 20px #e4e4e4;
  box-shadow: 0 0 20px #e4e4e4;
  padding-bottom: 50px;
  border-radius: 5px;
}

/* -----------------------------------------------------------------------------

# 404 Page Styles

----------------------------------------------------------------------------- */
.error-text i {
  font-size: 90px;
  margin-bottom: 30px;
}

.error-text h1 {
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 10px;
}

.error-text p {
  font-size: 15px;
  margin-bottom: 30px;
}

.full-height-section {
  height: 100%;
  display: table;
  width: 100%;
}


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

/* Breadcrumb 
.breadcrumb-bg {
  background-image: url(../img/breadcrumb-bg.jpg);
}
*/

.breadcrumb-text p {
  color: #F28123;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 7px;
}

.breadcrumb-text h1 {
  font-size: 50px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  margin-top: 20px;
}


.breadcrumb-section {
  padding: 150px 0 120px 0; /* Adjust as needed */
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
  background-attachment: fixed;
  height: 80%;
}

.breadcrumb-section::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 80%;
  content: "";
  background-color: #07212e;
  z-index: -1;
  opacity: 0.8;
}

.breadcrumb-section {
  padding-top: 170px; /* Adjust this value if necessary */
}

/* Sayfanın tüm genişliğini kaplayacak şekilde */
.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Yatay kaydırma çubuğunu üstte göstermek için */
.table-wrapper {
  overflow-x: auto;
  width: 100%;
  margin: 0 auto;
  transform: rotateX(180deg); 
}

.acilis-table-wrapper {
  margin-bottom: 500px; 
}

.table {
  width: 100%;
  border: 1px solid #364b55;
  border-collapse: collapse;
  transform: rotateX(180deg); 
}

.table th, .table td {
  border: 1px solid #364b55;
  padding: 6px;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
}

.table th {
  background-color: #1f2d3d; 
  color: #f0f0f0;          
  font-size: 9px;
  font-weight: 700;
}

.table td {
  background-color: #F6F1AD; 
  color: #000000;            
  font-size: 9px;
  font-weight: 500;
}

.table th[colspan] {
  font-size: 8px;
  padding: 5px;
  text-align: center;
}

.table input[type="text"] {
  font-size: 8px;
  padding: 4px;
  margin: 2px;
  height: 20px;
  width: 90px;
}

.table thead th {
  border-bottom: 0px solid #dee2e6;
}

.top-header th {
  background-color: #0a1b2a; 
  color: #f0f0f0;
  border-bottom: 0px solid #dee2e6;
  vertical-align: bottom;
  font-weight: 900;
  font-size: 12px;
}

.loading-message {
  text-align: center;
  margin-bottom: 10px; 
  transform: rotateX(180deg);
}

/* Tema butonu stili */
.theme-toggle-button {
  background-color: #1f2d3d; 
  color: #f0f0f0;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  margin: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.theme-toggle-button:hover {
  background-color: #364b55;
}

/* Siyah tema için sadece tabloya uygulanan sınıf */
.table-wrapper.dark-theme .table th {
  background-color: #272c37; 
  color: #ffffff;            
}

.table-wrapper.dark-theme .table td {
  background-color: #ffffff; 
  color: #000000;            
}

.table-wrapper.dark-theme .top-header th {
  background-color: #07212e; 
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 50px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 50px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #272c37; 
}

input:checked + .slider:before {
  transform: translateX(14px);
}


.refresh-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #007bff;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  padding: 0;
}

.refresh-button:hover {
  transform: rotate(90deg); /* Döndürme efekti */
  color: #0056b3;
}



/* Form section */
.form-section {
  margin-top: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-weight: bold;
}

.form-control {
  width: 50%;
  padding: 8px;
  border: 1px solid #ced4da;
}

.btn-success {
  margin-top: 10px;
  background-color: #a200ff;
  width: 100px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .breadcrumb-text h1 {
      font-size: 2rem;
  }
}

.buton-adminmenu {
  color: #fff;
  background: #051919;
  outline: 0;
  border: 0;
  padding: 12px 25px;
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
}

.buton-adminmenu:hover {
  color: #051919;
  background-color: #fff;
  border: 2px solid #051919;
  transition: 0.3s ease all;
}


input[type="textfiltre"] {
  width: 120px;
  height: 30px;
  padding: 5px;
  font-size: 14px;
  margin: 0 10px; /* Üst-alt: 0px, sol-sağ: 10px boşluk ekler */
  text-align: center;
}


.comment-section {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  background-color: #000000;
  max-width: 800px;
  margin: 0 auto;
}

.comment-section h3 {
  font-size: 1.5em;
  margin-bottom: 16px;
  color: #9e9387;
}

.comment-section ul {
  list-style-type: none;
  padding: 0;
}

.comment-section li {
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
  margin-bottom: 8px;
}

.comment-section li:last-child {
  border-bottom: none;
}

.comment-section p {
  margin: 0;
  font-size: 1em;
  color: #f0f0f0; /* Yazıları beyazımsı yapmak için */
}

.comment-section strong {
  color: #f0f0f0; /* Yazıları beyazımsı yapmak için */
}

.comment-section form {
  margin-top: 8px;
}

.comment-section input[type="text"] {
  width: calc(100% - 100px); /* Textboxları biraz küçültmek için */
  padding: 6px; /* Padding'i azaltarak textboxları biraz küçültmek için */
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
}

.comment-section button {
  background-color: #F28123;
  color: #051922;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px; /* Buton yazı boyutunu küçültmek için */
  border: none !important;
  cursor: pointer;
  padding: 10px 20px; /* Buton çerçevesini küçültmek için */
  border-radius: 3px;
}

.comment-section button:hover {
  background-color: #0056b3;
}

.comment-section input[type="text"]::placeholder {
  color: #aaa;
}

/* Yanıtları biraz daha içeride göstermek için */
.comment-section ul ul {
  padding-left: 20px;
}

.comment-section ul ul li {
  margin-left: 20px;
}

/* Giriş Yap butonu için stil */
.btn-profile-login {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
  margin-bottom: 10px;
}

.btn-profile-login:hover {
  background-color: #051922;
  color: #F28123;
}

/* Kayıt Ol butonu için stil */
.btn-profile-register {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
  margin-bottom: 10px;
}

.btn-profile-register:hover {
  background-color: #051922;
  color: #F28123;
}

/* Çıkış Yap butonu için stil */
.btn-profile-logout {
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #dc3545;
  color: white;
  border: none;
  transition: background-color 0.3s ease;
}

.btn-profile-logout:hover {
  background-color: #c82333;
}

/* sayfalama */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination button {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.pagination button:hover {
  background-color: #051922;
  color: #F28123;
}

.pagination span {
  font-family: 'Poppins', sans-serif;
  margin: 0 10px;
  vertical-align: middle; /* Bu satır sayfa numarasını aşağı hizalar */
  padding-top: 2px; /* Ekstra ayarlama için padding ekleyin */
}

/* Profile */
/* Profil Sayfası CSS */
.profile-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Üçüncü sütun için boşluk */
}

.profile-info,
.password-update {
  flex: 1; /* Her iki bölüm de eşit genişlikte */
}

/* Telegram linki güncelleme formu */
#tg_link {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-bottom: 20px; /* Yazma kutusu ve buton arasına boşluk ekle */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.telegram-button {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.telegram-button:hover {
  background-color: #051922;
  color: #F28123;
}

/* Şifre güncelleme butonu */
.password-button {
  font-family: 'Poppins', sans-serif;
  background-color: #F28123;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.password-button:hover {
  background-color: #051922;
  color: #F28123;
}

/* Mobil cihazlar için stil ayarları */
@media (max-width: 768px) {
  .profile-container {
      flex-direction: column; /* Mobilde alt alta getirmek için */
  }
}


/* Filtreleme Class */

.filter button {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin: 5px;
  transition: background-color 0.3s, color 0.3s;
}

/* (Filtreyi Kaydet) */
.filter .btn-primary {
  background-color: #F28123;
  color: #fff;
}

.filter .btn-primary:hover {
  background-color: #051922;
  color: #F28123;
}

/*(Filtreleri Temizle) */
.filter .btn-secondary {
  background-color: #07212E;
  color: #fff;
}

.filter .btn-secondary:hover {
  background-color: #051922;
  color: #F28123;
}


/* Kayıtlı filtreler altında filtre butonları */
.filter .saved-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Butonlar arasındaki boşluk */
  margin-top: 10px; /* Başlık ile butonlar arasındaki boşluk */
}

/* Filtre butonları */
.filter .saved-filter-buttons .filter-btn {
  font-family: 'Poppins', sans-serif;
  background-color: #272c37; /* Renk değiştirin */
  color: #fff;
 /* padding: 5px 15px; /* Küçük ama yeterli boyut */
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative; /* Silme butonu için konumlandırma */
  border-radius: 4px; /* Köşeleri yuvarlatmak için */
  min-width: 120px; /* Minimum genişlik */
  text-align: center; /* Metin ortalamak için */
  transition: background-color 0.3s, color 0.3s;
}

.filter .saved-filter-buttons .filter-btn:hover {
  background-color: #051922; /* Hover rengi değiştirin */
  color: #F28123;
}

/* Silme butonu */
.filter .saved-filter-buttons .delete-btn {
  background-color: #b22222; /* Silme butonunun arka plan rengi */
  color: #fff;
  border: none;
  padding: 2px 5px; /* Küçük boyut */
  font-size: 0.8em; /* Daha küçük yazı boyutu */
  border-radius: 4px; /* Köşeleri yuvarlatmak için */
  cursor: pointer;
  position: absolute; /* Filtre butonunun sağ köşesine yapışık */
  top: 5px; /* Üstten boşluk */
  right: 5px; /* Sağdan boşluk */
  transition: background-color 0.3s;
}

.filter .saved-filter-buttons .delete-btn:hover {
  background-color: #a52a2a; /* Silme butonunun hover rengi */
}



.author-select {
  margin-left: 50px; /* İstediğiniz kadar sağa taşıyabilirsiniz */
}

/* UyelikSozlesmesi.css */
.terms-content {
font-size: 16px; /* Masaüstü için standart font boyutu */
line-height: 1.6;
}

.terms-content ul {
padding-left: 20px;
}

.terms-content li {
margin-bottom: 15px; /* Maddeler arası boşluk */
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
.terms-content {
  font-size: 14px; /* Mobilde yazı boyutunu küçült */
}
}



/* login-page için özel CSS */
.login-page .row.login-row {
  display: flex;
  justify-content: center; /* Ortalamak için yatayda */
  margin: 0; /* Margin ayarlarını sıfırla */
}

/* Eğer margin veya padding ile ilgili sorun yaşıyorsan, bu da yardımcı olabilir */
.login-page .col-md-6 {
  padding-left: 15px;
  padding-right: 15px;
}

/* register-page için özel CSS */
.register-page .row.register-row {
  display: flex;
  justify-content: center; /* Ortalamak için yatayda */
  margin: 0; /* Margin ayarlarını sıfırla */
}

/* Eğer margin veya padding ile ilgili sorun yaşıyorsan, bu da yardımcı olabilir */
.register-page .col-md-6 {
  padding-left: 15px;
  padding-right: 15px;
}




/* Varsayılan desktop ve geniş ekranlar için */
.filter-container {
  display: flex;
  align-items: center; /* Dikey ortalama */
  gap: 15px; /* Dropdown'lar arasındaki boşluk */
  margin-top: 10px; /* Yukarıdan boşluk */
}

/* Hem native select hem de react-select için genel stiller */
.filter-dropdown {
  /* flex: 1; /* Eşit genişlikte olmalarını sağlar */
  padding: 5px; /* İç boşlukları azalt */
  border: 2px solid #07212e; /* Kenar rengi ekle */
  border-radius: 5px; /* Kenarları yuvarlama */
  background-color: #fff; /* Arka plan rengi beyaz */
  color: #000; /* Yazı rengi siyah */
  font-size: 16px; /* Yazı boyutu */
  line-height: 1.5; /* Satır yüksekliği */
  min-width: 200px; /* Minimum genişlik */
  height: 40px; /* Yüksekliği sabitle */
  transition: border-color 0.3s; /* Kenar rengi geçişi */
}

.filter-dropdown:focus,
.filter-dropdown__control--is-focused {
  border-color: #0056b3; /* Fokuslandığında kenar rengi */
  outline: none; /* Dış hatayı kaldır */
}

/* react-select için düzenlemeler */
.filter-dropdown__control {
  padding: 0; /* İç padding’i kaldır */
  border: 2px solid #000; /* Kenar rengi siyah yapıldı */
  border-radius: 5px;
  background-color: #fff;
  min-width: 450px; /* Genişlik native select ile eşitle */
  height: 40px; /* Yüksekliği native select ile aynı yap */
  transition: border-color 0.3s;
}

/* Diğer stiller aynı kalacak */


.filter-dropdown__menu {
  margin-top: 0px;
  z-index: 1000;
}

.filter-dropdown__value-container {
  padding: 0 8px; /* İç boşluk native select ile uyumlu */
  height: 100%; /* Yüksekliği kutu boyutuna uyumlu hale getir */
  display: flex;
  align-items: center; /* Dikey ortala */
}

.filter-dropdown__single-value {
  color: #000;
  font-size: 16px; /* Yazı boyutu native select ile uyumlu */
}

.filter-dropdown__input {
  margin: 0;
  padding: 0;
  font-size: 16px; /* Yazı boyutu */
  width: 100%; /* Genişlik alanı kaplasın */
}

/* Silme butonu */
.delete-button {
  margin-left: 10px; /* Silme butonuna sol boşluk */
  color: #dc3545; /* Buton rengi */
  font-size: 20px; /* Buton yazı boyutu */
  padding: 5px 10px; /* İç boşluk */
  border: 2px solid #dc3545; /* Kenar rengi */
  border-radius: 5px; /* Kenarları yuvarlama */
  background-color: #fff; /* Arka plan rengi */
  cursor: pointer; /* Fareyi üzerine getirince işaretçi değişimi */
  transition: background-color 0.3s, color 0.3s; /* Geçiş efektleri */
}

.delete-button:hover {
  background-color: #dc3545; /* Hover'da arka plan rengi */
  color: #fff; /* Hover'da yazı rengi */
}

/* Mesaj */
.no-filters-message {
  color: #6c757d; /* Mesaj rengi */
  font-style: italic; /* İtalik stil */
}

/* Mobil cihazlar için düzenleme (max genişlik: 768px) */
@media (max-width: 768px) {
  .filter-container {
    flex-direction: column; /* Elementleri dikey hizala */
    align-items: stretch; /* Stretch yaparak tam genişlik kullan */
    gap: 5px; /* Dropdown'lar ve buton arasındaki boşluk */
  }

  .filter-dropdown {
    font-size: 14px; /* Yazı boyutunu küçült */
    padding: 4px; /* İç boşlukları biraz azalt */
    min-width: 80%; /* Minimum genişlik %100 yap */
    flex: none;
  }

  .filter-dropdown__control {
    font-size: 14px; /* Yazı boyutunu küçült */
    padding: 4px;
    min-width: 80%; /* Genişliği tam ekran yap */
    width: 80%;
  }

  .delete-button {
    font-size: 16px; /* Buton yazı boyutunu ayarla */
    padding: 4px 8px; /* İç boşlukları azalt */
    margin-top: 5px; /* Dropdown ile buton arasındaki mesafeyi ayarla */
    width: auto; /* Butonun genişliğini otomatik yap */
    align-self: flex-start; /* Butonu sola hizala */
  }

  .no-filters-message {
    font-size: 14px; /* Mesajın boyutunu küçült */
    text-align: center; /* Ortala */
  }
}


/* Sütun Başlıkları için Stil */
.column-header {
  align-items: center;
}

.column-header-checkbox {
  margin: 8px;
  margin-left: 8px;
  max-width: 40px;
  max-height: 15px;
}

/* Gizlenen Sütunlar için Stil */

.hidden-columns-container {
  display: flex;
  flex-wrap: wrap; /* Mobilde taşmayı önlemek için öğeleri sar */
}

.hidden-column {
  display: flex;
  align-items: center;
  margin-right: 10px; /* Öğeler arasında biraz boşluk bırak */
  margin-bottom: 5px; /* Alta geçişte aralık bırakmak için */
}

.restore-column-button {
  margin-left: 8px;
  color: #007bff;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}

.restore-column-button:hover {
  color: #0056b3;
  text-decoration: none;
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
  .hidden-column span {
    font-size: 14px; /* Mobilde yazı boyutunu küçült */
  }

  .restore-column-button {
    font-size: 12px; /* Buton yazı boyutunu da küçült */
  }
  
  .hidden-column {
    margin-right: 5px; /* Mobilde daha dar boşluk */
  }
}

@media (max-width: 480px) {
  .hidden-column span {
    font-size: 12px; /* Daha küçük ekranlar için yazıyı biraz daha küçült */
  }

  .restore-column-button {
    font-size: 10px;
  }

  .hidden-column {
    margin-right: 3px;
  }
}




/* Normal görünüm için varsayılan ayar */
.button-container {
  max-width: 400px; /* maksimum genişlik */
  margin-left: auto; /* sağ taraftan boşluk bırakmak için */
  margin-right: 0; /* sağ taraftaki boşluğu kaldırın */
  padding: 10px; /* isteğe bağlı padding */
  text-align: right;
}


/* Mobil görünüm için */
@media (max-width: 768px) {
  .button-container {
      text-align: left; /* Mobilde sola hizala */
      margin-right: 10px;
  }

  .button-container button {
      width: 90%; /* Butonların tam genişlikte olmasını sağla */
      margin-top: 10px; /* Butonlar arasındaki boşluk */
  }
}



.kazanan-button {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin: 10px;
  transition: background-color 0.3s, color 0.3s;
  background-color: #F28123;
  color: #fff;
}

.kazanan-button:hover {
  background-color: #051922;
  color: #F28123;
}




.telegram-link {
  position: absolute;
  right: 0px; /* Sağdan 20px mesafede */
  bottom: 0px; /* Alttan 20px mesafede */
  background-color: #0088cc;
  color: white;
  padding: 10px 15px;
  border-radius: 50px;
  text-align: center;
  font-size: 10px;
  text-decoration: none;
  z-index: 1000; /* Diğer elementlerin üstünde kalmasını sağlar */
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif bir gölge ekleyelim */
  border: 2px solid #0088cc; /* Mavi çerçeve */
}

.telegram-link i {
  margin-right: 8px;
}

.telegram-link:hover {
  background-color: #006699;
}



.detail-button {
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin: 2px;
  transition: background-color 0.3s, color 0.3s;
  background-color: #F28123;
  color: #fff;
}

.detail-button:hover {
  background-color: #051922;
  color: #F28123;
}

.detail-form {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Align items to the center */
  margin: 0 auto;
  width: 100%;  /* Make sure the form takes the full width */
}


.form-input {
  display: center;
  margin-bottom: 10px;
  padding: 5px;  /* Reduced padding */
  font-size: 14px;  /* Reduced font size */
  width: 50%;  /* Adjusted width to make it smaller */
  box-sizing: border-box;
}

@media (max-width: 768px) {  /* Tablet ve mobil cihazlar için */
  .detail-button {
    padding: 8px 16px;  /* Buton boyutunu küçült */
    margin: 5px;
    font-size: 14px;  /* Buton yazı boyutunu küçült */
  }

  .detail-form {
    width: 90%;  /* Formun genişliğini daha dar yap */
  }

  .form-input {
    width: 80%;  /* Form inputlarını küçült */
    font-size: 12px;  /* Yazı boyutunu küçült */
    padding: 5px;  /* Input iç boşluğunu küçült */
  }
}