.modern-step-form {
        font-family: 'Arial', sans-serif;
        color: #333;
    }
    .step-title {
        font-size: 20px;
        margin-bottom: 1rem;
        margin-top:15px;
        margin-bottom:15px;
        color: #4A4A4A;
    }
    .modern-input {
        padding: 10px;
        border: 1px solid #CCC;
        border-radius: 5px;
        width: 100%;
        margin-bottom: 1rem;
        transition: border-color 0.3s;
    }
    .modern-input:focus {
        border-color: #007BFF;
        outline: none;
    }
    .address-input {
        padding: 10px;
        border: 1px solid #CCC;
        border-radius: 5px;
        width: 100%;
        margin-bottom: 1rem;
        background-color: #F9F9F9;
        color: #333;
        font-size: 1rem;
    }
    .address-input:focus {
        border-color: #007BFF;
        background-color: #FFF;
    }
    .step-buttons {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-top: 1rem;
    }
    .btn {
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .btn-primary {
        background-color: var(--ztc-text-text-2);
        color: #FFF;
    }
    .btn-primary:hover {
        background-color: var(--ztc-text-text-2);
        opacity: 0.9;
    }
    .btn-secondary {
        background-color: #6C757D;
        color: #FFF;
    }
    .btn-secondary:hover {
        background-color: #545B62;
    }
    .btn-success {
        background-color: var(--ztc-text-text-2);
        color: #FFF;
    }
    .btn-success:hover {
        background-color: #CC0000;
    }

    .nice-select {
    position: relative;
    display: inline-block;
    width: 100%; /* İhtiyaca göre ayarlanabilir */
    height:45px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    padding: 12px 20px 10px 10px;
    box-sizing: border-box;
    user-select: none;
    transition: all 0.3s ease;
}

.nice-select:hover {
    border-color: #888;
}

.nice-select:focus,
.nice-select.open {
    border-color: #555;
    outline: none;
}

.nice-select:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: translateY(-50%) rotate(45deg);
    transition: transform 0.3s ease;
}

.nice-select.open:after {
    transform: translateY(-50%) rotate(-135deg);
}

.nice-select .list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.nice-select.open .list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nice-select .option {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.nice-select .option:hover {
    background-color: #f0f0f0;
}

.nice-select .option.selected {
    background-color: #e6e6e6;
    font-weight: bold;
}

.nice-select .option.disabled {
    color: #999;
    cursor: not-allowed;
}

.nice-select.small {
    font-size: 12px;
    padding: 8px 25px 8px 10px;
}

.nice-select.wide {
    width: 100%;
}

/* Progress bar container */
.progress-container {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

/* Progress bar */
.progress {
    position: relative;
    height: 10px; /* Çubuğun yüksekliği */
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

/* Progress bar filled */
.progress-bar {
    height: 100%;
    background-color: var(--ztc-text-text-2); /* İlerleme çubuğu rengi */
    transition: width 0.4s ease;
}

/* Step indicators */
.step-indicators {
    position: absolute;
    top: 50%; /* Çubuğun ortasına hizalar */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%); /* Dikey hizalama */
    pointer-events: none; /* Tıklanabilir olmaması için */
}

/* Individual step circles */
.step-circle {
    width: 30px; /* Yuvarlakların genişliği */
    height: 30px;
    line-height: 30px; /* Yazıyı tam ortalamak için */
    border: 2px solid #e0e0e0; /* Çerçeve rengi */
    border-radius: 50%; /* Tam yuvarlak */
    background-color: #fff; /* Yuvarlakların arka planı */
    color: #000; /* İçerideki sayı rengi */
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    z-index: 2;
}

/* Active step */
.step-circle.active {
    border-color: var(--ztc-text-text-2); /* Aktif çerçeve rengi */
    background-color: var(--ztc-text-text-2); /* Aktif yuvarlak rengi */
    color: #fff; /* Aktif sayı rengi */
}

/* Açılan liste için temel ayarlar */
#suggestions {
  position: absolute;
  width: 100%; /* Üstteki div ile eşit genişlik */
  max-height: 200px; /* Maksimum yükseklik */
  overflow-y: auto; /* Kaydırma çubuğu */
  background-color: #ffffff; /* Beyaz arka plan */
  border-radius: 0px; /* Köşeleri yuvarlat */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif bir gölge */
  z-index: 1000; /* Üstte göster */
  margin-top: 5px;
  padding: 0;
  list-style: none;
}

/* Öneriler Divi */
#suggestions div {
  padding: 10px 15px; /* İç boşluk */
  cursor: pointer; /* Tıklanabilir işaretçi */
  font-size: 14px; /* Yazı boyutu */
  color: #333; /* Metin rengi */
  transition: background-color 0.2s, color 0.2s; /* Geçiş efekti */
  text-align: left;
  background-color: #f9f9f9; /* Hafif gri arka plan */
  border-bottom: 1px solid #e0e0e0; /* Alt sınır (çizgi) */
}

/* Son satırda alt çizgi olmaması için */
#suggestions div:last-child {
  border-bottom: none;
}

/* Hover efekti */
#suggestions div:hover {
  background-color: #f0f0f0; /* Hover sırasında açık gri arka plan */
  color: #000; /* Koyu renk metin */
}


/* Hover Stili */
#suggestions div:hover {
  background-color: #e6e6e6;
  color: #000;
}

/* Scrollbar stilleri */
#suggestions::-webkit-scrollbar {
  width: 8px; /* Scrollbar genişliği */
}

#suggestions::-webkit-scrollbar-thumb {
  background: #ccc; /* Scrollbar rengi */
  border-radius: 4px; /* Köşeleri yuvarlat */
}

#suggestions::-webkit-scrollbar-thumb:hover {
  background: #999; /* Hover durumunda scrollbar rengi */
}

#suggestions::-webkit-scrollbar-track {
  background: #f9f9f9; /* Scrollbar arka planı */
  border-radius: 4px; /* Köşeleri yuvarlat */
}

/* Popup İçeriği */
#search-popup {
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
}

/* Input ve Butonu Yan Yana Yap */
.search-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Arama Input Alanı */
.search-wrapper input {
  flex: 1;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  outline: none;
}

/* Arama Butonu */
.search-wrapper button {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: var(--ztc-text-text-2);
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.search-wrapper button:hover {
  background: var(--ztc-text-text-2);
}

/* Öneriler varsayılan olarak gizli */
.hidden-results {
  display: none; /* Başlangıçta görünmez */
}

.visible-results {
  display: block; /* Sonuçlar olduğunda göster */
  position: absolute;
  width: 100%;
  max-height: 200px; /* Maksimum yükseklik */
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  z-index: 1000;
  margin-top: 5px;
}

/* Her bir öneri */
.visible-results div {
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: background-color 0.2s, color 0.2s;
  border-bottom: 1px solid #e0e0e0;
  background-color: #f9f9f9;
}

#kullanicisozlesmesi {
    max-height: 400px;
    overflow-y: auto;
}

/* Scrollbar'ın inceliğini ayarlama */
#kullanicisozlesmesi::-webkit-scrollbar {
    width: 8px; /* Scrollbar'ın genişliği */
}

#kullanicisozlesmesi::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar'ın rengi */
    border-radius: 4px; /* Köşeleri yuvarlama */
}

#kullanicisozlesmesi::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Hover (üzerine gelindiğinde) rengi */
}

#gizliliksozlesmesi {
    max-height: 400px;
    overflow-y: auto;
}

/* Scrollbar'ın inceliğini ayarlama */
#gizliliksozlesmesi::-webkit-scrollbar {
    width: 8px; /* Scrollbar'ın genişliği */
}

#gizliliksozlesmesi::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar'ın rengi */
    border-radius: 4px; /* Köşeleri yuvarlama */
}

#gizliliksozlesmesi::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Hover (üzerine gelindiğinde) rengi */
}

.merhaba{
    width: 350px;
    overflow: hidden;
}
.merhaba .text{
    position: relative;
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 600;
}
.merhaba .text.first-text{
    color: #FFF;
}
.text.sec-text:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--ztc-text-text-2);
    border-left: 2px solid #FFFFFF;
    animation: animate 4s steps(12) infinite;
}
@keyframes animate{
    40%, 60%{
        left: calc(100% + 4px);
    }
    100%{
        left: 0%;
    }
}


 /* Modern Çerçeve Stili */
 .rating-form-container {
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 20px;
   background-color: #f9f9f9;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-width: 100%;
   margin: 20px auto;
 }
    .rating-form-container h6 {
   font-size: 18px;
   margin-bottom: 20px;
   color: #333;
   font-weight: 600;
 }
    .star-rating {
   display: flex;
   gap: 8px;
 }
    .star-rating .star {
   font-size: 30px;
   color: #ddd;
   cursor: pointer;
   transition: color 0.3s ease-in-out;
 }
    .star-rating .star.active,
 .star-rating .star.hover {
   color: #ffc107;
 }
    .form-control {
   border-radius: 5px;
   border: 1px solid #ccc;
   padding: 10px;
   font-size: 14px;
   width: 100%;
 }
    .form-control:focus {
   border-color: #007bff;
   outline: none;
   box-shadow: 0 0 4px rgba(0, 123, 255, 0.25);
 }
    .btn-primary {
   background-color: #007bff;
   border: none;
   border-radius: 5px;
   padding: 10px 20px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.3s ease;
 }
    .btn-primary:hover {
   background-color: #0056b3;
 }
 
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    padding: 2rem;
    background: var(--ztc-text-text-2);
    box-sizing: border-box;
}

.tag-cloud a {
    font-size: calc(0.8rem + 1vw);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    background: rgba(255, 75, 31, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Masaüstü görünümde normal dağılım */
.tag-cloud a:nth-child(1) { font-size: 1.7rem; background: #ff5733; }
.tag-cloud a:nth-child(2) { font-size: 1.5rem; background: #ff6f5e; }
.tag-cloud a:nth-child(3) { font-size: 1.8rem; background: #ff784e; }
.tag-cloud a:nth-child(4) { font-size: 1.2rem; background: #ff8b6a; }
.tag-cloud a:nth-child(5) { font-size: 1.1rem; background: #ff5733; }
.tag-cloud a:nth-child(6) { font-size: 1.2rem; background: #ff6f5e; }
.tag-cloud a:nth-child(7) { font-size: 1.5rem; background: #ff8b6a; }
.tag-cloud a:nth-child(8) { font-size: 1.6rem; background: #ff947d; }
.tag-cloud a:nth-child(9) { font-size: 1.4rem; background: #ff784e; }
.tag-cloud a:nth-child(10) { font-size: 1.1rem; background: #ff8b6a; }
.tag-cloud a:nth-child(11) { font-size: 1.3rem; background: #ff6f5e; }
.tag-cloud a:nth-child(12) { font-size: 1.5rem; background: #ff947d; }
.tag-cloud a:nth-child(13) { font-size: 1.6rem; background: #ff5733; }
.tag-cloud a:nth-child(14) { font-size: 1.4rem; background: #ff6f5e; }
.tag-cloud a:nth-child(15) { font-size: 1.1rem; background: #ff784e; }
.tag-cloud a:nth-child(16) { font-size: 1.2rem; background: #ff947d; }

/* MOBİL CİHAZLAR İÇİN (Ekran genişliği 768px ve altı) */
@media (max-width: 768px) {
    .tag-cloud {
        gap: 0.5rem; /* Mobilde boşlukları biraz azalt */
        padding: 1rem;
    }

    .tag-cloud a {
        font-size: calc(0.6rem + 2vw); /* Mobilde font boyutunu küçült */
        flex: 1 1 48%; /* Sadece mobilde 2 sütun olacak şekilde ayarla */
        padding: 0.3rem 0.8rem;
        border-radius: 8px;
        text-align: center;
    }
}


		
/* Yorum Çerçevesi */
.comment-box {
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 8px;
}

/* Genel Yorum Stili */
.comment-author {
  font-size: 16px;
  font-weight: bold;
}

.star-rating {
  font-size: 18px;
}

.comment-box p {
  font-size: 14px;
  margin: 0;
  color: #555;
}
.profile-container {
    max-width: 100%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background: #f8f9fa;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}
.profile-container h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}
.profile-container .profile-item {
    margin-bottom: 15px;
}
.profile-container .profile-item label {
    font-weight: bold;
    color: #555;
    display: block;
    margin-bottom: 5px;
}
.profile-container .profile-item span {
    font-size: 16px;
    color: #333;
}

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOut {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  #notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 0, 0, 0.8);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transform: translateX(100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

  #notification.visible {
    animation: slideIn 0.5s forwards;
  }

  #notification.hidden {
    animation: slideOut 0.5s forwards;
  }
  
.image-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-box img {
    width: 150px; /* Sabit genişlik */
    height: 100px; /* Sabit yükseklik */
    object-fit: cover; /* Resmi orantılı kırp */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.image-box button {
    width: 100px; /* Butonları sabit genişlikte yap */
}

/* Modal genişliği ve mobil cihazlar için boşluk */
.modal-dialog {
  max-width: 600px; /* Maksimum genişlik */
  margin: 1rem auto; /* Mobilde sağdan soldan boşluk bırak */
  padding: 0 1rem; /* Mobil cihazlarda içerik için yan boşluk */
}
.modal-content {
  border: none; /* Çerçevesiz modal */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Hafif gölge */
}
/* Modal tam siyah arka plan */
.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 1); /* Tam siyah arka plan */
}
/* Modal içeriği */
.modal-body {
  padding: 0; /* Boşluk kaldırıldı */
  position: relative; /* Buton ve metin için konumlandırma */
}
/* Overlay metin ve buton kapsayıcısı */
.overlay-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  color: white;
}
/* Bilgilendirme metni */
.info-text {
  background-color: rgba(0, 0, 0, 0.7); /* Transparan siyah arka plan */
  padding: 8px 16px;
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 14px; /* Metin boyutu küçültüldü */
  font-weight: 500;
}
/* Küçültülmüş Buton Tasarımı */
.overlay-button {
  background-color: #ff5733; /* Canlı bir buton rengi */
  color: white;
  padding: 8px 16px; /* Daha küçük boyut */
  border: none;
  border-radius: 5px;
  font-size: 14px; /* Yazı boyutu küçültüldü */
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  text-decoration: none; /* Link alt çizgisi kaldırıldı */
  display: inline-block;
}
.overlay-button:hover {
  background-color: #c44126; /* Hover rengi */
}
/* Resim */
.modal-body img {
  width: 100%;
  height: auto;
}
/* Kapatma butonu */
.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1051;
}

/* Açılan liste için temel ayarlar */
#firmalarigetir {
  position: absolute;
  width: 100%; /* Üstteki div ile eşit genişlik */
  max-height: 200px; /* Maksimum yükseklik */
  overflow-y: auto; /* Kaydırma çubuğu */
  background-color: #ffffff; /* Beyaz arka plan */
  border-radius: 0px; /* Köşeleri yuvarlat */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif bir gölge */
  z-index: 1000; /* Üstte göster */
  margin-top: 5px;
  padding: 0;
  list-style: none;
}

/* Öneriler Divi */
#firmalarigetir div {
  padding: 10px 15px; /* İç boşluk */
  cursor: pointer; /* Tıklanabilir işaretçi */
  font-size: 14px; /* Yazı boyutu */
  color: #333; /* Metin rengi */
  transition: background-color 0.2s, color 0.2s; /* Geçiş efekti */
  text-align: left;
  background-color: #f9f9f9; /* Hafif gri arka plan */
  border-bottom: 1px solid #e0e0e0; /* Alt sınır (çizgi) */
}

/* Son satırda alt çizgi olmaması için */
#firmalarigetir div:last-child {
  border-bottom: none;
}

/* Hover efekti */
#firmalarigetir div:hover {
  background-color: #f0f0f0; /* Hover sırasında açık gri arka plan */
  color: #000; /* Koyu renk metin */
}


/* Hover Stili */
#firmalarigetir div:hover {
  background-color: #e6e6e6;
  color: #000;
}

/* Scrollbar stilleri */
#firmalarigetir::-webkit-scrollbar {
  width: 8px; /* Scrollbar genişliği */
}

#firmalarigetir::-webkit-scrollbar-thumb {
  background: #ccc; /* Scrollbar rengi */
  border-radius: 4px; /* Köşeleri yuvarlat */
}

#firmalarigetir::-webkit-scrollbar-thumb:hover {
  background: #999; /* Hover durumunda scrollbar rengi */
}

#firmalarigetir::-webkit-scrollbar-track {
  background: #f9f9f9; /* Scrollbar arka planı */
  border-radius: 4px; /* Köşeleri yuvarlat */
}


/* Açılan liste için temel ayarlar */
#manualkonumbilgileri {
  position: absolute;
  width: 100%; /* Üstteki div ile eşit genişlik */
  max-height: 200px; /* Maksimum yükseklik */
  overflow-y: auto; /* Kaydırma çubuğu */
  background-color: #ffffff; /* Beyaz arka plan */
  border-radius: 0px; /* Köşeleri yuvarlat */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif bir gölge */
  z-index: 1000; /* Üstte göster */
  margin-top: 5px;
  padding: 0;
  list-style: none;
}

/* Öneriler Divi */
#manualkonumbilgileri div {
  padding: 10px 15px; /* İç boşluk */
  cursor: pointer; /* Tıklanabilir işaretçi */
  font-size: 14px; /* Yazı boyutu */
  color: #333; /* Metin rengi */
  transition: background-color 0.2s, color 0.2s; /* Geçiş efekti */
  text-align: left;
  background-color: #f9f9f9; /* Hafif gri arka plan */
  border-bottom: 1px solid #e0e0e0; /* Alt sınır (çizgi) */
}

/* Son satırda alt çizgi olmaması için */
#manualkonumbilgileri div:last-child {
  border-bottom: none;
}

/* Hover efekti */
#manualkonumbilgileri div:hover {
  background-color: #f0f0f0; /* Hover sırasında açık gri arka plan */
  color: #000; /* Koyu renk metin */
}


/* Hover Stili */
#manualkonumbilgileri div:hover {
  background-color: #e6e6e6;
  color: #000;
}

/* Scrollbar stilleri */
#manualkonumbilgileri::-webkit-scrollbar {
  width: 8px; /* Scrollbar genişliği */
}

#manualkonumbilgileri::-webkit-scrollbar-thumb {
  background: #ccc; /* Scrollbar rengi */
  border-radius: 4px; /* Köşeleri yuvarlat */
}

#manualkonumbilgileri::-webkit-scrollbar-thumb:hover {
  background: #999; /* Hover durumunda scrollbar rengi */
}

#manualkonumbilgileri::-webkit-scrollbar-track {
  background: #f9f9f9; /* Scrollbar arka planı */
  border-radius: 4px; /* Köşeleri yuvarlat */
}


.card-form {
	max-width: 100%;
	margin: auto;
	padding: 20px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

  .uyelik-secimi {
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding: 15px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
  }

  .uyelik-secimi.secili {
    border: 2px solid #c90f16; /* Seçili olduğunda kırmızı çerçeve */
    background: #fff3f3; /* Hafif kırmızı ton */
  }

  .uyelik-icerik {
    display: none; /* Başlangıçta gizli */
    padding: 15px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* Ücretli üyelik seçili olarak başlasın */
  #ucretli_icerik {
    display: block;
  }

.sabit-alt {
    width: 70%;
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    background-color: #d2e4ff; /* Arka plan beyaz */
    color: black; /* Yazı rengi siyah */
    padding: 15px 20px;
    border-radius: 10px;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid rgba(0, 0, 0, 0.2); /* Siyah çerçeve */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); /* Daha belirgin siyah gölge */
}



.teklif-aciklama {
    font-size: 16px;
    font-weight: bold;
	color: #333;
}

.teklif-btn {
    background-color: #c90f16;
    color: white;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    animation: shake-horizontal 0.5s infinite ease-in-out; /* Daha yavaş, sağa-sola titreme */
    display: inline-block;
}

.teklif-btn:hover {
    background-color: #a00c12;
}

.teklif-btn:active {
    transform: scale(0.95);
}


@media (max-width: 767px) { /* Mobil cihazlar için */
	.sabit-alt {
		width: 90%;
	}

    .teklif-btn {
        width: 100%; /* Butonu tam genişlikte yap */
        margin-top: 20px; /* Yazının altına biraz boşluk bırak */
    }
}

    @keyframes shake-horizontal {
        0% { transform: translateX(0); }
        25% { transform: translateX(5px); }
        50% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
        100% { transform: translateX(0); }
    }

.utf_box {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.08); /* Hafif beyaz arka plan */
    border-radius: 6px;
    padding: 10px;
    border: 8px solid rgba(0, 0, 0, 0.3); /* Varsayılan siyah şeffaf kenarlık */
    text-align: center;
    font-weight: 600;
    box-shadow: 0 0 16px 0 rgba(2, 2, 2, 0.1);
    -webkit-box-shadow: 0 0 16px 0 rgba(2, 2, 2, 0.1);
    color: #FFFFFF;
    transition: all 0.3s ease; /* Yumuşak geçiş efekti */
}

/* Mouse üzerine gelince kenarlık daha koyu kırmızı, arka plan kırmızı olacak */
.utf_box:hover {
    border-color: rgba(139, 0, 0, 6); /* Daha koyu kırmızı kenarlık */
    background: rgba(201, 15, 22, 8); /* Daha açık kırmızı arka plan */
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.6); /* Hafif kırmızı gölge efekti */
}

.no-wrap {
    white-space: nowrap; /* Satır kaymasını engeller */
    overflow: hidden; /* Taşan içeriği gizler */
    text-overflow: ellipsis; /* Uzun yazılar için "..." ekler */
}

.scroll-box {
    max-height: none; /* Masaüstünde normal akış */
    overflow: hidden; /* Varsayılan olarak taşan içeriği gizle */
}

/* Mobil cihazlar için */
@media (max-width: 768px) {
    .scroll-box {
        height: 400px; /* Mobilde sabit yükseklik */
        overflow-y: auto; /* Dikey kaydırma aktif */
        scrollbar-width: thin; /* Firefox için ince scrollbar */
        -ms-overflow-style: none; /* IE ve Edge'de scrollbar gizleme */
    }

    /* Chrome, Safari için scrollbar stilini özelleştirme */
    .scroll-box::-webkit-scrollbar {
        width: 5px;
    }

    .scroll-box::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3); /* Hafif şeffaf siyah scrollbar */
        border-radius: 4px;
    }
}

/* Arka plan flu efekti için overlay */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Hafif karartılmış arka plan */
    backdrop-filter: blur(5px); /* Flu efekti */
    z-index: 999;
}

/* Popup kapsayıcısı */
#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent; /* Beyaz arka planı kaldır */
    box-shadow: none; /* Gölgeyi kaldır */
    z-index: 1000;
    max-width: 90%;
    width: auto; /* Resme göre genişlik ayarla */
    padding: 0; /* Kenar boşluklarını kaldır */
    border-radius: 0; /* Köşeleri düz yap */
}

/* Resim ayarları */
#popup img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0; /* Kenar boşluklarını kaldır */
    border: none; /* Kenar çizgilerini kaldır */
    object-fit: cover; /* Resmi popup'a tam sığdır */
}

/* Kapat butonu */
#closePopup {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    z-index: 1001;
}

#closePopup:hover {
    background: red;
}

/* Küçük ekranlar için ekstra stil */
@media screen and (max-width: 600px) {
    #popup {
        width: 90%;
        max-width: 90%;
    }
}

.whatsapp-widget {
    position: fixed;
    right: 20px; /* Sayfanın sağ kenarından 20px içeride */
    bottom: 10px; /* Sayfanın altından 20px yukarıda */
    width: 180px;
    height: 30px;
    background: linear-gradient(135deg, #25D366, #128C7E); /* WhatsApp yeşil geçiş efekti */
    color: white;
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px; /* Tam yuvarlak buton */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Modern gölgelendirme */
    transition: all 0.3s ease-in-out;
    z-index: 999999;
    text-decoration: none;
}

/* Hover efekti (Büyüme ve ekstra gölge) */
.whatsapp-widget:hover {
    transform: scale(1.1); /* %10 büyüme efekti */
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.4); /* Hover'da daha belirgin gölge */
    background: linear-gradient(135deg, #128C7E, #075E54); /* Hover’da daha koyu geçiş */
    text-decoration: none;
}

/* Aktif veya focus olduğunda mavi olmasını engelle */
.whatsapp-widget:active, 
.whatsapp-widget:focus {
    color: white !important;
    text-decoration: none;
    outline: none; /* Mavi çerçeve çıkmasını engeller */
}

.whatsapp-widget i {
    margin-right: 4px; /* İkon ile metin arasına boşluk ekler */
    font-size: 20px; /* İkonun boyutunu belirle */
}

/* TinyMCE dış kapsayıcı ve iframe'in etrafındaki border'ları kaldır */
.tox-tinymce {
  border: 0 !important;
  box-shadow: none !important;
}

/* Editör içindeki içerik alanının border'ını kaldır */
.tox-edit-area iframe {
  border: 0 !important;
}

.galeri-kart {
    width: 100%;
    aspect-ratio: 1/1; /* Kare alan */
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
}
.galeri-kart img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.kurumsalekle {
    font-size: 23px;
    border: 1px solid;
    width: 40px;
    height: 40px;
	color:#ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #161616;
}

.owl-nav {
    display: none !important;
}